火枪手团队博客

简介

如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？

类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。

这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

几种实现方式

随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们整理了下这种布局的几种实现方式，有三种:

1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式，如下图所示:

• 各列固定宽度，并且左浮动；
• 一列中的数据块为一组，列中的每个数据块依次排列即可；
• 更多数据加载时，需要分别插入到不同的列上；
• 线上例子。

优点:

• 布局简单，应该说没啥特别的难点；
• 不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。

缺点:

• 列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
• 滚动加载更多数据时，还要指定插入到第几列中，还是不方便。

2) CSS3 定义。W3C 中有讲述关于多列布局的文档，排列出来的样子:

• 由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现；

    #container {
        -webkit-column-count: 5；
        /*-webkit-column-gap: 10px；
        -webkit-column-rule: 5px solid #333；
        -webkit-column-width: 210px；*/

        -moz-column-count: 5；
        /*-moz-column-gap: 20px；
        -moz-column-rule: 5px solid #333；
        -moz-column-width: 210px；*/

        column-count: 5；
        /*column-gap: 10px；
        column-rule: 5px solid #333；
        column-width: 210px；*/
    }

• column-count 为列数； column-gap 为每列间隔距离； column-rule 为间隔边线大小； column-width 为每列宽度； 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏； 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏； 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。这边其实很简单，简易自己尝试下，详细可参考https://developer.mozilla.org/en/CSS3_Columns 中的说明。
• 线上例子。

优点:

• 直接 CSS 定义，最方便了；
• 扩展方便，直接往容器里添加内容即可。

缺点:

• 只有高级浏览器中才能使用；
• 还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；
• 鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。

3) 绝对定位。即 Pinterest ，Mark之，KISSY 采用的方式:

• 可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；
• 线上例子。

缺点:

• 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；
• JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

KISSY.Waterfall 实现思路

KISSY 的 Waterfall 组件主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置； 二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。

1) 数据块排列，算法步骤简述下:

• 初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取容器总宽度； b，列宽度； c，最小列数； 最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数据；
• 获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；
• 依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束；
• 当所有元素插入完毕后，调整容器的高度为各列最大的高度值，结束依次调整；
• 性能效率上的注意点: a，如果当前正在调整中，又触发了 resize 事件，需要将上次调整暂停后执行这次调整(见 timedChunk 函数)； b，resize 触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见 S.buffer 函数)
• 感兴趣的可以参见源码。

2) 异步加载数据，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，为此专门设计了一个独立的模块 KISSY.Waterfall.Loader，其实这个功能就更简单了，仅包含两个步骤:

• 绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；
• 加载数据，为了不对数据源做太多限制，完全由使用者自己决定数据源从哪边获取和其格式，这样更好的方便用户使用。为此，该组件只提供一个load(success，end) 接口，怎样load 由用户自己去定义，而其中的 success/end，分别给出如何添加新数据(suceess 即同 addItems)/如何停止加载的接口。这样真是太方便了~~
• 感兴趣的可以参见源码。

KISSY.Waterfall 示例和文档

看到这边，是不是很想试用一下~~ 嗯嗯，这里给出一些相关学习资料和示例，以供参考:

• Waterfall API 文档，相关构造器，配置项，方法都在这里；
• 示例，包含静态和动态两种。

欢迎试用和提出意见~~

UPDATE: juicer-0.3.1-dev published @ github.com.

让我们从一段代码说起，假设有一段这样的JSON数据：

var json={
	name:"流火",
	blog:"ued.taobao.com"
};

我们需要根据这段JSON生成这样的HTML代码：

流火 (blog: ued.taobao.com)

传统的Javascript代码一定是这个样子：

var html;
html=''+json.name+' (blog: '+json.blog+')';

不言而喻，这样的代码混杂了html结构和代码逻辑，而且代码不具可读性，不便于后期维护，于是便有了这样一个函数：

function sub(str,data) {
    return str
        .replace(/{(.*?)}/igm,function($,$1) {
            return data[$1]?data[$1]:$;
        });
}

有了这个函数，我们拼接字符串的工作就可以简化为：

var tpl='{name} (blog: {blog})';
var html=sub(tpl,json);

看到这里，不用我多说，我想通过这个例子直观的展现出前端模板引擎的好处所在，这么做能够完全剥离html和代码逻辑，便于多人协作和后期的代码维护。当然，当我们的业务逻辑需要对数据源进行循环遍历，if判断等的时候，这个简明的函数很显然并不能满足我们的需求，于是便有了如今这市面上众多的模板引擎，诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin, etc.

“如无必要，勿增实体。” 这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造轮子。那么就会有童鞋质疑，既然已然有这么多现成的东西可用，为什么还要重新打造一个呢？

我个人认为一个完善的模板引擎应该兼顾这几点：

• 语法简明
• 执行效率高
• 安全性
• 错误处理机制
• 多语言通用性

而市面上现有的模板引擎没有做到兼顾以上几点，比如Mustache支持多种语言，通用性不错，不过性能稍差，而且语法不支持高级特性，例如遍历的时候无法做if判断，也无法获得index索引值，jQuery tmpl依赖jQuery，缺乏可移植性，Kissy template虽然依赖Kissy, 不过性能和语法都值得推荐，doT/nTenjin 性能和灵活性都很不错，但是语法需要用原生的js来写，写好的模板代码可读性稍差。

鱼和熊掌不可兼得，语法的处理，安全性的输出过滤和错误处理机制的引入在一定程度上都会或多或少降低模板引擎的性能，因此就需要我们权衡。Juicer 在实现上首先将性能看做第一个重要的指标，毕竟性能好坏直接影响用户的感知，同时兼顾了安全性和错误处理机制（即便这样会导致性能的略微下降）。

首先来看下jsperf上同几个主流模板引擎的性能对比。

可以看到，性能上比传统模板引擎均有提升，下边的介绍主要从语法、安全性和错误处理，以及如何使用这几个方面介绍下Juicer.

a. 语法

• 循环 {@each}…{@/each}
• 判断 {@if}…{@else if}…{@else}…{@/if}
• 变量（支持函数）${varname|function}
• 注释 {# comment here}

详细的语法请参考 Juicer Docs.

b. 安全性

安全性，简单地说就是对输出数据在输出前进行一次转义过滤，避免XSS这样的脚本注入攻击，简单扫下盲，举个XSS的例子。

var json={
	output:'alert("XSS");'
};

如果JSON数据是第三方接口返回或者含有用户输入（像BBS、评价）的内容，我们如果赤裸裸的将output写到页面上就会执行恶意的js代码，所以Juicer默认是对数据输出做了安全转义的，当然如果不想被转义，可以使用$${varname}。

juicer.to_html('${output}',json);
//输出：<script>alert("XSS");</script>

juicer.to_html('$${output}',json);
//输出：<script>alert("XSS");</script>

c. 错误处理

如果没有错误处理，当模板引擎编译(Compile)或者渲染(Render)出错时候就会引起后续js代码停止执行，可想而知，如果因为一个逗号或者JSON数据的偶发错误导致整个页面挂掉，是我们不能接受的。但是Juicer在遇到这些错误的时候不会影响后续代码的执行，只会在控制台打出一句警告(Warn)告知开发者模板解析出现错误。

juicer.to_html('${varname,,,,,,,}',json);
alert('hello, juicer!');

执行上边的代码就会看到控制台打出的“Juicer Compile Exception: Unexpected token ,”，但是不会因为错误导致后续的alert被阻塞掉。

实现原理

Juicer对一个模板的编译和渲染的过程主要有以下几个步骤：

• 1、对模板代码进行语法分析
• 2、分析后生成原生的Javascript代码字符串
• 3、将生成的代码转为可重用的Function (Compiled Template)

var json={
	list:[
		{name:"benben"},
		{name:"liuhuo"}
	]
};
juicer.set('errorhandling',false);//pre-set option
var tpl='{@each list as value,key}$${value.name}{@/each}';
var compiled_tpl=juicer(tpl);

我们通过compiled_tpl.render.toString()看下编译后的代码：

function anonymous(data) {
	var data = data || {};
	var out = '';
	out += '';
	for (var i0 = 0, l = data.list.length; i0 < l; i0++) {
		var value = data.list[i0];
		var key = i0;
		out += '';
		out += ((value.name));
		out += '';
	}
	out += '';
	return out;
}

是不是已经明白了Juicer的原理？这个编译后的函数就会每次帮我们完成从数据到html代码的拼装操作。

这里有几点优化的地方值得分享下：

• 1、using += instead of array.push
• 2、avoid using with {}
• 3、cache the compiled template (function)

这几点优化在大数据量循环渲染时候性能提升显著，不过正因为放弃了with{}语句，所以Juicer会在编译函数之前对模板进行词法分析，将用到的变量实现声明，这样就能避免JSON数据外层必须指定“data.”前缀，如果你觉得这点性能的提升不重要，也可以在options中指定loose:false（禁用松散模式），这样就可以不省去data. 前缀，这样做的好处就是性能会更好一些。

最后介绍下Options配置项，左侧为参数默认值。

{
	cache:true/false,
	loose:true/false,
	strip:true/false,
	errorhandling:true/false
}

cache默认为true，即同一个模板编译后是否被juicer缓存，也就是说如果缓存开启的情况下，同一个模板第一次编译后，为了缩短耗时提升性能，后续不会再次执行编译的操作而是直接从缓存中去取编译好的模板函数。

Juicer的API. Juicer有两种使用方法，一种是通过

juicer(tpl,data);
--- 或者 ---
juicer.to_html(tpl,data);

直接根据提供的数据将模板转为html代码，另一种是通过compile方法先将模板编译好，在需要的时候再对模板进行数据的Render操作：

var compiled_tpl=juicer(tpl);
compiled_tpl.render(data);
--- 或者 ---
var compiled_tpl=juicer.compile(tpl);
compiled_tpl.render(data);

最后附上Juicer的项目地址，上边有详细的文档和Demo代码。
http://juicer.name

去年8月份至12月份，我有幸和另外六名同事一起翻译了这本“JavaScript权威指南(第六版)”，这是一本大块头，这本书是如此经典以至于其他任何推介言语都显得多余。对于我们来说，能参加这个项目是一件让人骄傲的事情，很多人也都是第一次作翻译工作，我们尽力克服各自表达上的差异、使用统一的词汇表、固定句式和译注风格，原书中的代码注释和脚注也都细心翻译。在此我们也将词汇表整理出来分享给大家。本书块头很大，编辑们为了尽力保证质量也花了很多时间审校，也让这本书的翻译周期“旷日持久”，出版日期也一拖再拖，今天此书终于可以预定了，希望犀牛书翻译小组的努力不会让大家失望。当然，我们的知识水平难达到权威的高度，因此也邀请了广大网友参加本书的审校。

在此，我们诚恳的向所有前端工程师推荐这本“犀牛书(第六版)”～

词汇表：http://vdisk.weibo.com/s/4kDdB/1334837613

预定地址：http://product.dangdang.com/product.aspx?product_id=22722790

译者序

从1996年以来，《JavaScript 权威指南》已经成为 JavaScript 程序员公认的《圣经》。该书凭借着完整的内容、细致的讲解以及大量针对性的示例而受到读者的一贯好评，十多年来一直畅销不衰。JavaScript 之父 Brendan Eich 对它如是评价：“本书是 JavaScript 程序员的必备参考……内容组织得很好，而且非常详细。”

作为 JavaScript最经典的工具书，它的历次改版见证了 Web 发展的历程与深刻变革：从玩具式的“轻脚本”到革命性的 Ajax，从传统的桌面系统到新潮的手持终端，从风靡一时的类库到现在主流当道的 Web 富应用开发，从纯浏览器脚本语言到面向服务器端的 JavaScript……HTML5、CSS3、jQuery 和 NodeJS 等新技术的出现进一步丰富了 Web 前端开发的内涵，而本书第6次改版则是一场及时雨，系统翔实地收录了五年来前端技术的这些变革，并提供了大量的实例，可以边学边用，同时秉承了前几版的“学术气质”，是 JavaScript 和前端开发领域不可多得的佳作。

本书第6版涵盖了 HTML5 和 ECMAScript 5，很多章节完全重写，增加了当今 Web 开发的最佳实践的内容，新增的章节包括 jQuery 、服务器端 JavaScript、图形编程以及 JavaScript 式的面向对象。本书第6版不仅适合初学者系统学习，而且适合有经验的 JavaScript 开发者随手翻阅。

淘宝前端团队非常荣幸地承担这本大块头的翻译任务。本书书名为《JavaScript权威指南（原书第6版）》，我们作为译者深知自己知识面有限，难达到“权威”的高度，所以翻译过程难免疏漏。但不管怎样，这项任务是一种荣誉，更是一种责任。本次翻译共有7位译者，李晶（拔赤）、张散集（一舟）、吴英杰（季札）、赵静（澄净）、陈成（云谦）、王保平（玉伯）和鄢学鵾（三七）。感谢赵泽欣（小马）为促成本次翻译做出的努力。此外为了保证翻译质量，我们还邀请了热心网友来参与部分章节的校对，非常感谢他们。最后要特别感谢机械工业出版社华章公司的陈冀康老师和谢晓芳编辑，不仅容忍我们再三推迟交稿，还不断鼓励我们“多花些时间来保证质量”。在此对上述各位同学和老师致以深深的感谢。

淘宝前端团队
2011年12月

感谢贷岩的邀请，我在本期奶茶会上做了“响应式设计实践”的分享，是接着上一次的话题进一步讨论“如何实现”。响应式Web设计(Responsive Web design)是当下比较流行的话题，什么是响应式设计？简单讲，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

响应式设计听起来非常理想，但其技术实现则困难重重，因为响应式设计并不仅仅包含设计本身，还包含实现，更进一步讲，实现原理固然简单，但要考虑到开发成本、性能、可维护性方面则又是充满了挑战。比如说，我们都知道使用MediaQuery来实现CSS去适配各式终端，但MediaQuery应当从高分辨率还是往低适配还是从低分辨率往高适配？容器样式使用MediaQuery来作适配，那么布局是不是也适合用MediaQuery作适配？加入MediaQuery适配后的页面体积增加了，如何在小屏幕终端里降低页面体积？带有复杂交互的组件如何作适配？MediaQuery增加了代码复杂度降低了可维护性，如何让MediaQuery来适应变化频繁的被运营的Web页面？这些问题不是一两篇文章能说明白的。我们需要提炼出一套实现响应式设计的最佳实践。为此我们成立了“变色龙”小组（响应式设计小组），来持续对当前方案进行改进，成立几个月时间以来，淘宝新业务已经有不少页面开始尝试响应式设计，我们将文档中部分内容提炼出来，分享给大家，希望对各位刚刚学习响应式设计的同学有所帮助。

对于刚才提到的这些问题，小组在布局和组件开发上给出了一些思路和粗糙的实现，但对于设计师同学来讲，挑战更甚，因为设计师只有在充分和前端工程师沟通理解的基础上才能设计出完美的响应式UI，毕竟响应式UI上的一点小改动，将会带入极大的开发工作量。所以响应式设计从某种程度上讲是一种团队协作模式，这也给设计师和前端工程师提出了更高的要求。

PPT中提到的布局问题稍微有点复杂，如果考虑到终端兼容，首先应当考虑容器的宽度可变，最典型的容器为图文混排容器。和英文和拉丁语系的UI设计不同，中文网页排版天生不灵活，图文混排太受文案限制，因为在英文排版中，单词个数不构成影响容器布局的关键因素，不同单词的长度不一样，中文网页中汉字个数则很大程度影响UI，因为丁文很容易撑开图文容器，汉字则不行，例如菜单项字数限制，列表项不能折行，布局上就缺少流体+灵活的美感。对于视觉设计来说，这是最大的挑战。

在定宽网页设计中流行的栅格，并不适用于多终端兼容的情况。因此在固定宽度的布局下，CSS网格布局表现出色，在处理浮动元素的百分比时比较麻烦。然而，大多数的网格系统都提供浮动属性选项，这非常糟糕，当我们在网格中插入列时，网格样式常常因此而扭曲变形。另外，固定宽度栅格对“响应”的支持非常糟糕，造成这些问题的“元凶”就是我们现有工具的局限性。导致CSS编码缺少灵动，一套CSS对应一种适配。而Less则是解决CSS语法缺少灵活性的一种尝试解决方案。Less让CSS变得“可编程”，具有更灵活的适应能力，基于此我们展开对响应式布局的进一步探讨。

在使用less实现布局时遇到了一个小问题，由于Firefox中width等属性最高只有3个小数点的精度，所以某些极端状况下某一行上Less计算出来元素宽度总和可能会比总宽度超出0.000x个px，从而导致错位，目前采用hack的方式对每个元素的计算后的width都减去0.01px暂时规避解决，可能还会有一些可知不可知的问题存在，需要我们不断地去完善。而且Less.js在客户端对CSS进行编译使用可能会对性能造成略微的影响。

还有一个最容易被忽略的问题，就是智能机中的动画性能，在普通的PC平台里，动画的实现大都是通过setInterval函数来完成，jQuery和YUI以及Kissy中亦是如此，只不过帧频有所差异。后来都各自添加了对内置css3 transition的检测，优先使用css3 transition，动画在现代浏览器中的性能又上升了一个台阶。但在iphone/ipad/android中依然不流畅，更流畅的动画则需要开启webkit的硬件加速。可以参照之前的一个ppt来了解js动画编程的一些背景知识。

css3动画分为两种，transitions和transform，css3 transform本质上是将元素的内容作平移，而非直接对元素作属性渐变，因此性能更好，通过Demo可以看出，移动端的Dom操作性能要比css3 animation慢几个数量级。因此要在动画中尽量减少Dom操作，而只对动画的内容相对位置作平移。另外还有一个css3动画相关属性就是keyframe，这个是用来辅助作复杂动画时用的，通过设定关键帧来作动画，在Slide控件中的简单动画暂时用不到。因此css3动画的几个属性小结如下：

• css3 transition：平滑的改变CSS属性值，和setInterval原理类似，但速度更快
• css3 2d transform：二维变换，CSS属性值未渐变，未用到webGL加速，速度有提升，但提升程度有限
• css3 3d transform：三维变换，CSS属性值未渐变，开启WebGL加速，速度明显提升
• css3 animation：即使用keyframe来模拟动画，用来实现复杂动画，和性能无关

所以我们推荐使用在支持transition的平台中使用translate3d来启用硬件加速，注意要使用transform代替transition。

当前我们某种程度上实现了响应式设计，但后续还有很多优化的工作，特别是页面体积的优化，是需要接下来着重要思考的。

我们不仅要关心用户的情绪，做出给予和引导正向情感的设计，我们也要关注用户的身体，帮用户用舒服的姿势使用产品。
做一个简单的测试，拿起鼠标，第一次，让光标从屏幕的顶边中点，尽量保持垂直线移动到底部；第二次，让光标从屏幕左边中点，尽量保持水平线移动到右边。感觉一下，第一次和第二次，哪个操作让你觉得累？

从上到下移动光标，你的手腕，肘部的活动的幅度更大，牵动的肌肉和关节更多；从左到右相对轻松，肢体只需要轻微的移动。
我们需要动用肢体——主要是手——给电脑输入指令，运动久则疲劳。输入方式上鼠标比键盘舒适，但现在也变成了繁重劳动，出现“鼠标手”的病症。持续的点击、移动导致手肘的疲劳，用眼过度导致视力下降，腰部和肩部酸痛，这些身体的不适反映都会影响你正在进行的操作，影响你的产品体验过程。
豆瓣的阿尔法城，虽然有很多创新的设计，但若我不强迫自己，我无法在那儿停留超过五分钟。比起一般的小组或者论坛，我要做出数倍的交互指令，点击鼠标移动光标，才能获取内容，不一会，我就疲惫不堪。
也许是我喜欢游戏的缘故，我倒蛮喜欢IBM的这个逛法 www.ibmpower.com。

下面分三个部分，说说那些会影响我们使用产品的舒适的关键，当你在设计界面的时候，尝试去考虑一下“用户的身体舒适吗”。

一 手指和臂肘
1 减少关节活动
前文的测试中提到，我们需要尽量的让用户用最少的操作完成指令。横向操作比竖向的轻松，移动比点击便捷，一次点击比两次点击省力。
我们大部分人是右利手，屏幕右侧是光标的待机位置，所以我们看到大多数快捷操作放在那边。

2 减少精确要求高的操作
精确定位需要花费更多的力气，移动鼠标定位到一个10px的方形内，一定比定位到100px的方形中费力。所以，更大的按钮，用户点起来更容易、更舒适。

Chrome浏览器的页签设计
1 关闭的设计
在Chrome上关闭多个页签时，你会发现它采用一个奇妙的方式保证你不那么费力——下一个标签的关闭按钮会被送到你的光标上，不需要移动鼠标，只需点击。
如果你是在当中关闭页签，之后的页签会移上到当前位置。
如果你是关闭最后一个页签，那么剩余的页签会自动改变宽度，原本倒数第二个标签的关闭按钮会送到你的光标上来；
直到光标离开关闭按钮，页签才会自动调整拉长。

2 页签的切换
在Chrome诞生之前，没有一个浏览器将页签完全放置在屏幕顶部，它是舒适设计原则的典范。当我们从屏幕中心移动鼠标去切换页签时，只要把光标甩到屏幕顶部，屏幕顶部的对光标自动限制，让你无需考虑控制光标的上下移动，只需要控制左右移动。
其他浏览器，当你移动光标到页签时，至少都需要给光标一个刹车的操作。

二 视觉
1 舒适的颜色
2 清晰的层级
颜色上的舒适应该由设计师来定夺把关，例如同一页面的不同颜色尽量少，页面的明度和对比度不会伤眼睛，主题色应注意暗示了用户怎样的情绪。
而布局上，我们可以用一种方法来检测。
第一，产品的界面，可以让用户可以毫不犹豫的分成3-5个大板块。
第二，假想这些板块离你有远近，你可以明确的描述它们每一个离你你多远。
在我浏览这篇文章的时候，正文离我若有50厘米，那么掰掰的小站名称和导航栏大概在100厘米远，右侧的广告80厘米左右，豆瓣logo和用户信息那行在120厘米远，所以，我浏览起来很舒适。

这张来自瘾科技的图恰好可以做示范，原文

新一代的iPad，现在拥有Retina高过300dpi的分辨率，近于印刷精度的图文，也会让我们的视觉更舒适。

三 姿势
iPad改变了我使用电脑的姿势，在这之前，我不论是工作、娱乐还是休息，都是以正襟危坐的姿势战斗在电脑前，即便是看文章、看视频也很难放松。iPad致力于从这种紧张的“前倾型”中解放用户，让他们变成“后仰型”的沙发土豆。
iPad的一个很重要的价值，就是重新设计了用户使用的场景和姿势，这为它的用户体验大大加分。iPad达到这个设计目标，特别做了两件事：
★ 减少重量
★ 提高续航时间

这时候，产品设计的作用从细节战术来到了整体战略的层面，再加上其他种种优势iPad弄死了上网本。

联想的这款无线掌中宝，可以让你躺在沙发上，利用HTPC看视频的时候，就会变得非常有用。它还有LED背光功能，不打扰你关灯营造的影院效果。

豆瓣阅读器的设计，就很好的考虑了姿势问题，不论是坐在电脑前，还是捧着平板，都能够进入舒适的阅读状态，手轻轻搭在键盘翻翻页就好了。相比之下京东的电子书PC版就完全是垃圾，完全没有考虑过阅读者的姿势。

在将来，我们使用互联网的场景和姿势将变得更复杂，端坐电脑前的比例越来越小。我们会站着，坐着，短时间的停留，用一只拇指操作……甚至开始利用语音和体感进行输入，让用户舒适的与机器高效沟通，永远是用户体验设计的重要一环。

　　作为一名新时代女性，自认为永无止尽追求外表女人，内心爷们的独立境界是一件很酷的事情。为了达到这个目的，淘宝没少逛书也是没少念啊。虽然离标杆还存在遥远的一段距离，可在这个过程中，从默默无闻的小买家摇身一变为双金砖且略有经验的淘宝买家，来谈谈消费分享社区的那些事儿应该略懂个一二滴。

　　请问如今网上购物，有多少童鞋还那么傻那么天真到淘宝上直接搜索，然后点击销量排行再逐个查看对比最后下订单的？如果电脑前可爱的你还遵循着这套老方法，那就凹凸了哈。互联网信息万变，最近行业内最暗潮涌起的领域莫过于“推荐购物、购物搜索、购物社区”等导购方向的产品。当然这消息我也是看白鸦兄的博客里（http://uicom.net/blog/）说的，白鸦兄对电子商务导购领域的真知灼见还是挺深刻的，推荐拜读。

　　今天笔者充当一名典型的爱美女性用户，还有之前对消费分享社区产品的体验与研究，和大家浅谈一下这块新兴领域的事儿。也给男同胞们普及一下这方面的讯息，因为最为热门的几个消费分享社区产品是拒绝男性用户的喔！

什么是消费分享社区？

　　美丽说、蘑菇街、爱物网、美丽街，甚至是人人网刚新推出的实名制时尚分享SNS“逛街”都属于是消费分享社区，但关于“消费分享社区”的名词定义在维基和百度都没有资料（麻烦更新一下）。对这类产品的归类还存在其他说法，如垂直类社交网站、垂直电子商务新模式、社会化（社区）电子商务等等，较为接近的说法则是社会化电子商务。

社会化电子商务

　　社会化电子商务，social commerce，是电子商务的一种新的衍生模式。它借助社交媒介、网络媒介的传播途径，通过社交互动、用户自生内容等手段来辅助商品的购买和销售行为。在Web2.0时代，越来越多的内容和行为是由终端用户来产生和主导的。社会化电子商务市场规模到2015年将达到300亿美元，是仅指通过社会化媒体的销售收入。整个市场规模应该更为巨大。 

　　上述几个产品在初期被定义为是基于社区模式发展的，但现今已逐渐媒体化，或者说本质更像是媒体而不是社区。因为用户与用户之间基本不产生互动，他们只是因为相同的喜好和品味而互相关注。

产品定位与用户群体

富有代表性的一些国内外消费分享社区网站。

美丽说
http://www.meilishuo.com/

蘑菇街
http://www.mogujie.com/

爱物网
http://www.hers.com.cn/

Thisnext
http://www.thisnext.com/

Kaboodle
http://www.kaboodle.com/

 　　提到产品定位与用户群体，极具代表性的则是消费分享社区领头羊美丽说和蘑菇街，很多人对两者进行了各方面的比较与分析。有兴趣的童鞋可以阅读一下这篇文章，swot分析得挺到位的。http://liao.it/archives/172.html 

　　笔者就不就这个话题再长篇大论了，总结了一些有参考价值的资料和图表和大家分享一下，以美丽说，蘑菇街为例。

让1%用户制造内容

　　“让1%的用户来制作网站上绝大部分内容，而其他99%的用户，就是让她们来逛，为她们提供各种各样的推荐。”这是美丽街提出的一个观念并只专注的一个点。对于消费分享社区来说，内容制作是不容忽视，特别是一些网络红人所带来的连锁口碑反应。美丽街CEO宁晓彤表示，这1%用户的来源主要分为三个阶段：

　　换汤不换药，美丽说的杂志和蘑菇街的专辑也同样是用户制作内容的主要途径之一。

“走质”还是“走量”

　　又想做得精致有力，又想做大做强，这一直是很多产品面临的必选题。在一个点上做得过于专注又怕赶不上用户需求的变更，想扩大市场份额，团队的规模又不能兼顾产品的质量，这其中的取舍还是包含这很多故事的。

　　就像美丽说和蘑菇街的内容策划上，导购的性质会将80%的流量引到淘宝上，那商家们为了增加曝光率便会以作为用户的身份去推自己的商品。庆幸的是，商家“捣乱”的行为在现在还属于能控制的范围内，比想象中的要和谐一些。但内容的质量问题多多少少会受到影响，这往后的筛选规则会作怎样的调整，让我们拭目以待吧。

Pinterest画报流模式

　　Pinterest最近是打得火红火热，它是一个自称“个人版猎酷工具”的视觉分享社区，在这里内容以图片瀑布流的形式出现，用户可以关注人，也可以分享、收藏自己感兴趣的内容。

　　2010年Pinterest已经开始受到国内创业者的追捧，美丽说、蘑菇街等网站的上线其实都是在Pinterest微创新下的改良版，所不同的是他们更聚焦在女性产品上，而且与电子商务的合作更加紧密，也更加商业化。而新近上线的知美网与花瓣刚则更像是Pinterest的中文版，注重感兴趣内容的各种采集分享。

　　Pinterest画报流模式以图片为中心建立人和信息的关系，而图片正是兴趣的载体。

　　Pin模式在美丽说、蘑菇街等网站上的运用主要是两类：

 　　这种画报流布局，更直观的用户体验界面，独具风格的内容展示，再加上从色彩和构图角度吸引女生，容易引起女性用户的共鸣。

　　同时围绕兴趣这类模式采用了瀑布流的图片展示方式，形象直观，恰恰符合快捷购物需求，其实这也为图片背后的商业意图打下了基础。此类网站聚集了大量来自用户的有价值信息，经过优化排序、分类处理，将内容变得更为有价值。

　　拓展阅读：http://www.dorightdream.com/news/latest/2011-12-03/43.html

客户端，决一高下吧

　　女性消费分享类社区在移动互联网方面有两大潮流，第一个是女性用户的手持设备大量转向Iphone和Android，在休闲的时间里开始被移动设备应用占据，第二个是手机购物开始兴起，支付宝这几年的移动交易额成倍增长。这两大原因让消费分类社区在移动设备上的竞争将很可能是在无线领域。

　　目前这类手机应用做得比较好的还是美丽说和蘑菇街，美丽说的IOS客户端推出得比较早，蘑菇街紧随其后。

　　相比之下，美丽说更倾向于社区，用户自己关注的用户中获取信息。蘑菇街的想法更倾向于媒体，输出内容。应用在版面上也基本采用pin模式，继续读图。在这两款应用的竞争中，产品体验与主推的相机功能将会成为竞争热点。

总结

　　我们可以在众多女性消费分享社区观察出一点很有趣的现象，那就是它们都拒绝男性用户哟，不过现在已经慢慢向男性用户开放了。

　　现在在市场上核心用户为女性的产品还是挺多的，但仅仅只为女性服务的产品却少之又少，更不要提客户端的应用了。我们就回过头来谈谈一下题目里提及到“谁能抓住女用户”吧。

　　美丽说CEO徐易容认为，未来的五到十年，有一件事是可以预测的，就是女性会变得越来越美。而什么是时尚的，怎样变得更时尚，是急待解决的问题。根据统计，在使用护肤品上，中外女性用户有一点很大的区别是，对品牌的坚持度。徐易容认为，中国女性用户很容易更换品牌的原因，是对如何变美的概念很模糊。因此，帮助女性完善这个概念的“美丽说”本身就是个巨大的产业，有着丰富的想象空间。

　　其实除了时尚、护肤品，像瘦身、美体、健康（月经治疗），甚至是到内在休养，如如何充实生活、扩展眼界和升华自身等等，均是可以做到Design for ladies的。我们还可以拓展出去，就拿QQ做案例吧。是不是也能出一个QQ  for ladies版本呢？这个版本的内容均是针对或根据女性需求而策划的。像每天的新闻弹框，里面可以全是女性感兴趣的内容或应用，毕竟有多少女性用户对奥迪A6感兴趣呢？在这个版本中，还有一个一键切换回正常模式的入口，于是一切又可以回复正常，想想挺有意思的。

　　好了，就此打住，只能说 Design for ladies 的产品在现今还是一片让人值得遐想的领域，以后还能延伸出什么模式，都是一个未知数呢。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5595)

你走路的方式会透露出你的哪些性格？

为什么有些人竟然会回忆起不曾发生过的事情？

夏天出生的人和冬天出生的人谁运气更好？

真心的笑容和虚假的笑容都打着哪些难以掩饰的烙印？……

原文访问：娿九的博客《怪诞心理学》分享

首先，凭第一个感觉在你的额头上画一个“Q”,记住小尾巴的方向如下图（听过分享的同学请自动忽略）

_________________________________一、时间心理学___________________________________

现在都回来，我们来阅读下面这段文字：

你需要别人喜欢你和欣赏你，但你通常对自己要求苛刻。虽然你在个性上的确有一些弱点，但你通常能够设法加以弥补。你在某些方面的能力并没有得到充分的发挥，所以还未能变成你的优势。从外表来看，你是一个讲求自律和自制的人，但内心却常常焦虑不安。有时候，你会强烈地怀疑自己是不是做出了正确的决定或正确的事情。你倾向于让自己的生活有所改变和变得丰富多彩，在遇到约束和限制时你会感到不满。你很自豪自己是一个能够独立思考的人，如果没有令人满意的证据，你不会接受别人的观点和说法。不过，你也觉得在别人面前过于直言不讳并不是明智之举。有时候你很外向，比较容易亲近，也乐于与人交往，但有时候你却很内向，比较小心谨慎，而且沉默寡言。你有很多梦想，其中有一些看起来相当不切实际。

实验这里就不做了，简单说一下，曾经一个美国的教授在让自己的学生做了心里测试之后发给学生每人一样的性格描述后，百分80的学生在给准确性上打了满分，最低的也不低于3分（满分5分）。然而在教授告诉学生实情之后，学生在打分，就大部分只有1分2分了。

出生时的星象位置并不会对一个人的个性产生什么魔法效应。然后，的确有那么一些人，由于对占星学中的星座和性格之间的关系非常熟悉，竟然真的就变成了具有某种星座特质的人。

理学家伯特伦·福勒于1948年通过试验证明的一种心理学现象, 人们常常认为一种笼统的、一般性的人格描述十分准确地揭示了自己的特点，心理学上将这种倾向称为“巴纳姆效应”。

天生幸运儿

这是作者对40W志愿者做的一个调查成果，夏天出生的人比冬天出生的人更觉得幸运的比较多，关于这点原因的分析，可能是因为冬天的环境比较恶劣，所以父母相对比较保护婴孩，也就导致了独立性以及发现新事物的比例相对夏天出生的孩子要少，但是有一点毋庸置疑，幸运的人一定是性格外向，容易接受新的机遇。

______________________________二、撒谎和欺骗心理学__________________________________

泛美式微笑

1852年，一位年轻的法国艺术家从巴黎一家宾馆的四层窗口纵身跃下，并留下一封遗书：多年来，她得微笑把我折磨得几近绝望，现在我宁愿选择结束生命

这个笑容大家应该第一反应就能知道，她是蒙娜丽莎的微笑

500年来，人们一直对《蒙娜丽莎》神秘的微笑莫衷一是。不同的观者或在不同的时间去看，感受似乎都不同。有时觉得她笑得舒畅温柔，有时又显得严肃，有时像是略含哀伤，有时甚至显出讥嘲和揶揄。在一幅画中，光线的变化不能像在雕塑中产生那样大的差别。但在蒙娜丽莎的脸上，微暗的阴影时隐时现，为她的双眼与唇部披上了一层面纱。而人的笑容主要表现在眼角和嘴角上，达 ·芬奇却偏把这些部位画得若隐若现，没有明确的界线，因此才会有这令人捉摸不定的“神秘的微笑”。 人们同样也把这种并不那么真实的微笑称为泛美式微笑。

杜胥内微笑

心理学家保罗·艾克曼说，只有能活动到特定肌肉的微笑，才是能感受到幸福的“真正的微笑”。他一共发现了19种微笑，而其中18种是假笑。而那种让我们确实感到幸福和快乐的微笑是：嘴角上翘，双眼稍微靠近，眼角起了皱纹，眼睛下面的脸颊上浮现的，是真正的微笑，它被命名为“杜胥内微笑”。对比上图中眼角皱纹的变化，判断哪一个是发自内心的微笑。

记忆可塑性

人类记忆的可塑性要比我们所能够想象的更为惊人。一旦某位权威人士指出我们有过某种经历，多数人都会觉得很难否认，随后就会用设想填补记忆中的空缺。经过一段时间之后，事实和虚构情节之间的界限就变得难以区分了，于是我们开始相信谎言。这种效果的力量是如此强大，以至于有时候我们并不需要权威的声音也能够愚弄自己。有时候，我们甚至完全有能力把自己骗得团团转。暗示的欺骗效果并不仅仅会让世界上的领导人把虚构的故事当作事实。职业骗子（或者魔术师）也会使用同样的技巧，并以此让人们相信他们曾经历过不可能发生的事情。

_______________________________三、灵异心理学_____________________________________

回文

O，Draconian devil！（啊，严酷的魔王！）

        Oh，Lame Saint！（噢，瘸腿的圣徒！）

         重新排列就变成了：

         Leonardo da Vinci！（列昂纳多。达。芬奇！）

         The Mona Lisa！（蒙娜丽莎！）

       （以上片段取自书本《达芬奇密码》）

巧合

英国每天都有上百起巧合时间发生，曾经有一个球迷在球场上狂欢时候，随手抓了一张从天空中飘下的碎纸片，纸片上印的正式这位球迷自己家的电话号码。

_________________________________四、幽默心理学___________________________________

大脑半球与幽默

在拥挤的广场上，一名男子走到一位妇人旁边问：“抱歉，你看到这附近哪里有警察吗？” “对不起”，这位妇人说：“我找了好久也没有看到一个警察。”

可能的笑点：

1．那么好吧，你可以把自己的手表和项链叫出来吗？

2．哦，没关系，我都找了半个小时了，连个警察的影子也没看见

3．棒球是我最喜欢的运动

你选哪个作为笑点，一般情况下，大部分的同学都会选1对不对，请问有没有同学觉得3是最好笑的笑点？

-

-

-

-

-

-

选3的同学，据实验论证的各位学者称是因为：大脑右半球受损，所以觉得3是最有笑点的。

_________________________________五、决策心理学___________________________________

小费的多少取决于？

服务态度，店家质量，地理环境，天气等是一些客观事物对当事人影响的因素，有时候有些行为细节，会是一些决定性的因素，例如：在客人吃饭结账时候，递过账单时候手微微轻触这样的细微接触会使小费加倍，这是经过怪诞心理学这本书的作者和伙伴们经过多次试验论证的结论。

消费打折

原价20英镑的计算器，售货员告诉你明天将会打折售价5英镑，你会选择今天买还是明天买？在换一个，售价999英镑的电脑，售货员同样告诉你，明天会便宜15英镑，你会选择今天买还是明天买？大部分的人在第一个计算器的选择上都会是明天来买，而电脑，大部分的人不会特地等到明天在来买，同样是便宜了15英镑，为什么会有不同的方式对待这两次购买行为？大多数人在购物并不是以绝对值来计算到底可以省下多少钱，而是以能够节省的金额在支出总额中所占的比例来衡量。

潜意识决定

在很多实验中都表明，潜意识可以决定购买行为，工作者们在电影中加入了可口可乐和爆米花的信息，这些信息展现的时间在千分之一秒左右，分别插入在不同的画面之间，事实上，观看电影的人并没有特别的感受，但是却导致这家电影院的爆米花和可乐的销量增加了一倍。

_________________________________六、自私心理学___________________________________

比较社会上人们最信任和最不信任的两类人在诚实度上的差异，这两类人分别是牧师和二手车商。最近的盖洛普民意调查结果显示，59％的人认为神职人员是诚实的，但只有50％的人觉得汽车销售员比较诚实。那么这种观念能够反映现实中诚实度的真实情况吗?为了找出问题的答案，研究团队成立了一家虚假的室内装饰公司，公司的名称就是“诚信”，他们从新成立的公司给一群牧师和二手车商寄了一封信，感谢他们最近购买公司的产品，并随信附上了一张10英镑的支票作为返款。所有收到信的人都应该很清楚他们并没有从这家公司买过任何东西，但其中会有多少人不诚实地把这张支票兑现呢?结果证明两组人的表现没有太大的区别，大约50％的牧师和50％的二手车商都将拿到的支票兑现了。

城市生活节奏

实验者们造访了23个国家的首都，丢了400多支钢笔，戴了500多次假腿支架，并丢了大约800个信封。丢信封技巧被证明在各种文化中都会是一场噩梦。在特拉维夫，放在地上或汽车挡风玻璃上的包裹和信封往往会被当成炸弹，因此所有人都会远离这些东西。在萨尔瓦多，这些信封会引起人们的怀疑，因为它们跟一种著名的诈骗伎俩有关。如果有人捡起了信封，就会发现自己身边站着一个人，后者会说信封是他的，而且信封里放着一些现金。但现在信封里的钱却不见了，所以他们要求捡信封的人把他们辛苦挣来的钱还给他们。有些国家根本就没有邮筒，或者就像阿尔巴尼亚一样，没有可以信赖的邮政系统。不过，尽管面临重重困难，研究人员还是坚持下来了，并最终绘出了国际助人为乐排行榜。

研究结果对于拉丁美洲人来说的确是个好消息，里约热内卢(巴西)和圣何塞(哥斯达黎加)排在了最乐于助人城市的前两位。位居第三的是非洲的利隆圭(马拉维)。排在倒数前三名的分别是新加坡(新加坡)、纽约(美国)和吉隆坡(马来西亚)。不同地区在助人为乐上的差异程度还不是一星半点。在里约热内卢和利隆圭，大街上的每一个“盲人”实验者都得到了帮助，然而，他们在新加坡和吉隆坡成功得到帮助的比例竟然只有50％。在圣何塞，95％的人都会帮装有假腿支架的实验者捡起掉在地上的杂志，但在纽约却只有28％的人愿意伸出援手。

对美国城市里助人为乐的情况做了进一步的深入分析后，莱文和他的同事们发现，人口的密集程度是预测助人为乐程度的最佳指标。人口密度越大，助人为乐的程度就越低，这又是为什么呢?依据米尔格兰姆的理论，在人口众多的城市里，人们会更有更多的“感觉超负荷”经历。来自他人、手机、交通和广告的各种信息一直在对人们狂轰乱炸。结果他们就只能和所有需要处理大量信息的系统一样工作，那就是给所有的信息排列优先顺序，花最少的时间应付各种分散其注意力的琐事。米尔格兰姆认为，正因如此，人们才会从需要帮助的人身边径直走过去，从而把帮助这些人的责任推到了别人身上。所有这一切导致了一种自相矛盾的现象：某一个空间里的人越多，人们的孤独和孤立感就会越强烈。

_____________________________________小结语______________________________________

《怪诞心理学》这本书主要讲了6种心理学情况，时间心理，撒谎与欺骗心理，灵异心理，幽默心理，决策心理，自私心理，所举的例子互相之间都有从属关系，列如幽默心理中，对金发女郎的嘲笑笑话也是一种撒谎与欺骗心理等等…

在文章最开头的一个小实验，还记得那个小“Q”吗？现在公布结果：

Q的小尾巴，如果画好之后是左图，那就说明你比较在意别人眼中的你，行为决定也比较容易受人影响;右图，说明你比较独乐乐，并且相对而言，你比较自私一点。

有一个实验者在研究微笑的过程中有这么一段描述，打保龄球的选手，在投出满分后，有些人在转身前微笑，而有些人在转身后才对着朋友或者观众微笑，那牵着就是独乐乐人群，后者是比较在意别人眼中的自己了。。。

分享资料下载：（等待图片加载完成后另存为，可打印）

　　3月份，Photoshop CS6 Beta版(下文简称PS CS6)发布公测，有着多项惊艳的新特性，工作中整天和像素打交道，感触比较深的特性就是PS CS6支持矢量对象绘制、变换时像素自动对齐网格。

　　当然，对象绘制、变换时像素对齐网格并不是PS CS6独有的功能，只是更智能更好用了，PS CS6的像素自动对齐网格功能在绘图过程中，无疑方便了很多，不必再担心图形边缘会出现模糊，但是我们在实际的图形设计过程中会发现，还是会经常需要调整一些路径没有完全对齐到网格产生的半透明的过渡像素，用来平滑图形边缘减少锯齿感，或让图形看上去更饱满、更细腻，我们称其为次像素 (或亚像素，Sub-pixel，一般用于屏幕显示技术等领域)，如下图所示。 

图1-消除锯齿的次像素

　　趁着 PS CS6正式版还未普及，以PS CS5为例，和大家探讨矢量路径图形绘制时如何让像素对齐网格，如何利用路径调整次像素改善图形的饱满度的一些经验，希望对大家有所启发和帮助。

一、像素对齐网格

1.    对象绘制时像素对齐网格

　　像素对齐网格最大的作用就是避免绘制图形时出现虚边，解决图形模糊的问题，尤其是将画布放大数倍去抠界面、图标细节时，精度可以达到像素级，让设计师将精力更多的集中在创意表达层面，不必因为担心模糊而谨慎的去操作，从而提高工作效率。

　　在PS CS5初始状态时，只有当画布在100%比例下，也就是实际像素比例时，画出来的图形才不会模糊，放大或缩小画布到其他比例下，即使打开网格进行辅助，画出来的图形也会模糊，如图2所示，蓝色图形与紫色图形分别为100%画布下不打开网格，和非100%比例画布下打开网格随意绘制的相同大小的矩形，我们能明显的看到紫色图形边缘非常的模糊。

图2-对齐像素图形和未对齐像素图形的对比

 　　这时的网格没有起到作用，是因为在PS CS5初始状态时，网格的参数不是以像素为单位，而是毫米，如图-3，首选项窗口可以通过主菜单中“编辑>首选项>常规”或快捷键Ctrl+K来打开。

图3-初始状态下的网格参数

　　想要在常规图形 (矩形、圆角矩形、圆形) 绘制过程中，使像素在任何情况下都对齐网格，在PS CS5的首选项窗口中，对“参考线、网格和切片”选项卡的网格参数进行简单的设置，并配合快捷键就可以做到。

　　图3中可以看到网格线间隔的默认值是25毫米，将单位改为像素，这时单位前面的数值会自动变为1，这时的网格线并未与画布上的像素格对齐，需要手动重新输入数值，且网格线间隔数值与子网格数值必须相等，图4展示的是在3200%比例下，两种不同数值网格所呈现出的效果，可根据自己的喜好进行调整。网格可通过主菜单“视图>显示>网格“来显示或隐藏，快捷键为Ctrl+’(回车左侧的引号键)。 

图4-不同网格参数呈现的效果

　　完成了如上设置，最后确保”主菜单>视图>对齐”及“对齐到>网格“两个选项已勾选，“对齐到>网格“选项在打开显示网格的情况下才可编辑。

图5-对齐功能及相关选项

　　像素对齐网格设置完成，以后在非100%视图下绘制常规图形，只要打开网格辅助，就不会出现模糊情况。像素对齐网格在PS CS5中还是存在一定的局限性，受到图形形状的约束，当使用线条工具、多边形工具、自定义形状工具绘制一些带有倾斜边缘或非直角的图形时，还是无法保证所有角点和边缘对齐网格，当然这里的模糊更多的是防锯齿效果，可以利用网格手动调整。

2.    对象变换时像素对齐网格

　　PS CS5中，长宽都是奇数或都是偶数时，进行90°变换时都可以对齐像素，当长宽数值分别是奇数和偶数时，再进行顺时针或逆时针90°变换就会使图形模糊，无法对齐到像素，这时可以先旋转，然后打开网格进行辅助，不要退出自由变换模式，拖动对象，这时边缘就会自动吸附对齐网格，如下图：

图6-变换图形时对齐网格

二、利用次像素让图形更饱满

　　举个小例子，看看次像素在图形设计中的作用，抛砖引玉。

　　在界面设计中，经常会绘制下拉菜单等控件上的三角形箭头形状，最常见的做法就是用铅笔工具点象素画出来，如图7-a所示，看上去很清晰，但在分辨率较小的屏幕上看，会稍显生硬、有锯齿感，影响界面的细腻度；用路径对齐网格绘制箭头，如图7-b所示，解决了锯齿问题，但看上去体量感被削弱了，不够饱满；图7-c中所示的效果，是对次像素微调后的效果，既消除了锯齿，而且在体量感上不输第一种方案的效果。

图7-三种不同方法绘制的箭头

　　没看出差别？我们将三种方案放在一起对比下，见图8，从左至右依次为图7中的a、b、c方案，我们看到中间的b方案虽然没有了锯齿，但体量上明显小于a、c方案，而c方案同时具备无锯齿、相等的体量感两个优点。

图8-下拉箭头效果对比

　　通过放大图片我们可以看到在次像素上的差别，要达到方案c的方法其实很简单，看看下图放大的效果和路径你就明白了。

图9-使用路径改善后的次像素

　　只要将角点上的路径锚点分别向外移动一点，让原本颜色比较淡的次像素稍微加深就可以了，操作时，放大画布让调节更细微和精确，选中锚点，轻点多次键盘上的方向键来移动即可，这个方法不局限于箭头形状，大家可以开启像素眼去发现更多的应用场景。

总结

　　啰嗦了这么多，希望这些小的点能对大家工作有所帮助和启发。我们总是希望利用现有的资源做更多的事，不断的探索设计中的更多可能性，关注设计细节的展现，无论是PS CS5还是即将发布的 CS6，每一项功能改进都激动人心，使操作更加得心应手，也帮助设计师能够在更智能的环境中专注于创意表达，提高输出效率，相信Adobe CS6设计套装在各个方面都不会让人失望，让我们一起期待。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5584)

隐形的尺寸、边缘的思量、手势的语汇、动画的语法… 看得见的视觉，看不见的视觉背后的设计故事——阿里巴巴中国站无线产品经验总结…

原文链接：http://liuchenhuan.net/?p=1610

项目成员：刘宸寰（为一），夏明芬（夏夏）， 黄海 （黄黄），裴芸，邱燕维（维维）