让前端忍不住喊爽的设计元素

现状

1. 视觉效果太复杂，前端一看就傻眼了，实现成本太大；
2. 界面太简陋，仅采用一些简单元素比如直角、实色填充等实现设计。

其实可以尽情地使用这些设计元素

1. 水平或垂直的线性渐变
2. 箭头及各种箭头的变型
3. 单像素圆角
4. 简单阴影
5. 半透明背景

以上这些设计元素对于前端实现来说有个相同的特点：即可以通过添加少量标签或完全利用CSS特性完成，实现成本和后期维护成本低，扩展性高，且不需要任何图片。图片对前端来说就是个难搞的事情，尤其是现在关注性能的同学还需要进行sprites合并。(真的，我宁愿多加几个tag，也不愿多加一张图片)
如果您认可优雅降级，还可针对高级浏览器选择以下设计元素

当然，IE用户是看不到的。

1. 圆角
2. 复杂的阴影
3. 文字阴影

此外，设计师们还可以为Chrome、Safari浏览器设计一些小动画，比如鼠标移上去icon旋转下之类的。

只有让设计师更了解前端，才能实现设计效果和前端开发成本的双赢。

欢迎补充。

来源：http://www.chencheng.org/blog/2010/08/04/cool-design-elements/

原文来自：UED TEAM

关于前端开发的那些事（一）

现在国内的前端团队都很年轻，换句话说就是要么是成立不久的，要么是正在建立当中。都有很多问题尚须解决，但哪些问题真正是我们现阶段要解决的呢？每个团队都有自己的答案。 详细内容

判断元素包含关系的一些方法

在很多场景下，要判断一个元素是不是包含另一个元素，总结了一下，有下列的方法：

一，遍历节点树，这个方法是最容易的，也没有什么兼容性问题。在“mouseenter和mouseleave”这篇日志中有演示，可以看一下。

二，对于IE浏览器，DOM元素有个contains的方法可以判断包含关系。比如div1.contains(div2)，如果返回的结果为true就说明div1包含了div2，反之亦然。

三，DOM3的Node.compareDocumentPosition方法。
(div1.compareDocumentPosition(div2) & 0×10) === 0×10如果为true的话，说明div1包含div2。
详细的文档见：https://developer.mozilla.org/en/DOM/Node.compareDocumentPosition

作者：周明智
[本站团队成员原创文章，转载请注明来源，并保留链接地址，谢谢]

原文来自：UED TEAM

网站用户体验的五大分类

每个人对网站的使用习惯不一样，功能要求也不一样，要做到最好的用户体验只能是照顾最主要目标受众的需求，因此要实现用户体验的优化，前提之 一是必须对自己的目标受众了如指掌。因此，要有一个详细的背景调查，分析目标受众的属性，分析他们的需求和行为特征，这样才能有的放矢，实现网站用户体验优化的目的。 详细内容

设计思想形成的四个阶段

设计师的才华携手什么样根深蒂固的习性才能将最初的想法变成新兴的创造呢？

从研究设计师成功解决问题、创造革新的方法中，商业人士能学到什么呢？最根本面上来讲，他们能学会提问、关注、联系和付诸行动。凭借最重要事情中的这四项，设计师们能取得意义非凡的突破。 详细内容

互联网产品服务品质杂思

前两天接到了蜘蛛网客服的电话，说我年初通过他们网站订阅中国经营报时候，中国经营报赠送了几本书。这段时间中国经营报那边盘点时候发现给我的赠书一直没有送出，中国经营报那边向蜘蛛网询问情况。客服说蜘蛛网这边一直也没有收到我的投诉，因此直到中国经营报问起他们最近才发现此事。 详细内容

innerHTML和W3C之DOM在脚本编程中的中庸之道

这篇文章并非关于innerHTML和W3C的DOM方法孰优孰劣的口水战。关于它们的PK在很多朋友的文章中都已经可以整理为精彩的小说，这里就不再为故事添加情节。

本文阅网博客要给大家分享的内容是，在前端应用中若涉及大量元素elements操作，如何来更好整合使用innerHTML和DOM方法，以使页面的脚本执行效率能够潜在地提升数百倍，比单纯使用innerHTML或DOM方法在浏览器性能实践、实战PK中，在速度方面实实在在地提升到极致。 详细内容

开放的互联网，开放的网站

开放的互联网，封闭的网站

大家都说互联网是一个开放的世界，的确，你可以自由的几乎不受限制的获取互联网上的信息。但随着互联网的发展，越来越多的网站要求用户先注册再使用，所以，为了进入不同的网站，我们就需要不停的去注册，然后进入这个网站来获取我们需要的东西，或许是数据内容，或许是和朋友的交流。但问题是，网站和网站彼此之间很少有交流的渠道，你也没法方便的从一个网站转到另一个网站，除非是抛弃你在那个网站上的一切。 详细内容