团队博客 - 以用户为中心的设计

对规范更深层次认识来自于YUI的启发，这个几乎已经是控件代名词的英文缩写，可能很少有人注意全称The Yahoo! User Interface Library，其实就是整套带有开发模式的界面规范，因此我也喜欢把整理好的各种规范叫做XXX Design Library。

产品规范的应用对象，分为设计师、工程师两类人。对设计师来说主要是“协调”工作，使交付物统一；对工程师来说主要是“配合”工作，使开发效率提高。

1. 规范的时机

我倾向于在概念设计的低保原型之后，也就是说得先有第一批可开发的页面。我反复强调的原因，概念上不管做产品还是平台，核心都是由一个个页面组成的网站，有效规范只针对于最终产出。

很多朋友提到边设计边整理规范，这是对设计工作的总结。我的看法，产品设计与开发是整套系统工程，所以更进一步，应该边开发边整理规范，让规范与开发同步，互相契合更新。也就是说，每次迭代之后，都应该升级规范。

对工程师而言，上手来一份事无巨细的规范，读完要花两天，熟练要花十天，在庖丁解牛的开发过程中，简直就是噩梦。于是还没等走完这个过程，早因想痛打设计师而消极怠工了。这也正是不建议使用现成规范的原因，第一国情不同，第二时机不对。

(more…)

1. 横排往下会影响阅读速度。

如12345678的单排单列数字，肯定是竖排阅读快。但多行多列的整块信息，横排并不见得就比竖排慢，比如所有简体中文文章都是横排往下阅读。关键在于，用户选高层和低层的机率相等，所以在阅读速度角度判断优劣并不合适。

2. 横排往下会造成阅读不流畅。

我根本就认为每次都让用户通过阅读找到目标不是好方案，所以竖向阅读流畅与否不重要。既然电梯按钮的位置固定，如果能想办法让用户记住大致位置，记住列头，不是更好么？

(more…)

所有的交互创新都需要开发落实，并且越让用户更方便，逻辑也就越麻烦，两个指标正好成反比。不是说有了创意就能做出来，因为编码本身就是个复杂的系统工程，除了需要考虑可行性，还有执行效率、平台兼容、客户端兼容等因素。

关于模式，我们经常在网上发现一些有趣的交互方案(Solution)，能够开阔眼界打开思路，甚至可以原封不动的放到自己产品上使用，所见即所得，典型如Lightbox效果。

关于开发，有同行为了更好的分享资源，除了制作成演示控件(Pattern)，并且搭建为一体化接口库，目地是整合更多设计师的创意，实现高效开发，典型如YUI框架。

(more…)

和朋友讨论时，我提到过一个观点，所有框架层设计中，最核心的是导航设计。最近更看到有国外同行提出“80%的可用性是导航！”因为良好的导航可以保证用户找到任何信息。也就是说，提供到达的可能，远比如何到达的可用重要。

我习惯把导航分为一维、二维、多维来简单理解，一维对应线性结构，二维对应分层结构，多维对应无序结构。这么说可能比较抽象，其实都已经是耳熟能详的应用，分别举例阐述设计意图：

1. 最原始仅限于一二三级的，单对多树状应用就是“分层导航”，基本属于必要元素。
2. 跟踪用户行为，记录的用户在网站的活动足迹就是“线性导航”，俗称面包屑。
3. 管理系统的后台，在首页增加的类似跨分层结构的链接就是“无序导航”，俗称快捷方式。

(more…)

国内网站真正流行并重视用户体验不超过两年，我相信大部分从业者的研究资历也仅限于此。区别在于，因功底和个体差异影响到的对新概念的理解突破，我的经历大概可以从两个方面来描述：

概念理解：用户体验 —— 以用户为中心 —— 交互设计 —— 信息架构
实践操作：目标 —— 流程 —— 方法 —— 交付物 —— 产品管理

2005年初，在Google搜索结果里链接到的UIGarden第一次看到“用户体验”，那会儿的真实感受，就是作为互联网用户的我们，终于有人关心了。最想做的事情，就是把我常上的那几个网站的设计师拎过来，海扁一顿。

(more…)

围绕文字、符号、链接三个方面，主要是中文，草拟的个人行文经验：

1. 文字避免写错。应付挑剔的读者是一个方面，某些关键词的错误，有可能就避过了搜索引擎抓取。

2. 文字密度节奏的控制。段落在四行左右比较合适，宜少不宜多，同时避免文字量大的段落连续堆积，段落之间最好的节奏不是一一二二三三，而是类似一三二三一二的无序结构，纵横道理类似。

3. 词语避免在同行断开。比如行末一个“搜”，下行头一个“狐”，用户读起来比较费劲。注意英文的默认段落内，一个单词不会断开，原因也是如此。

(more…)

有时会被问到“看看XXX网站如何？”之类的问题。

谈到评估，通常都是指产品级的网站，如果模式很新，了解需要花一定时间。于是，很多人又问“那么你仅从UI/UE的角度看看呢？”首先我们得达成共识，一切花里胡哨都在为功能服务，如果功能满足都成问题，其他就没必要谈了。

举例分步说明，注意先后顺序。

(more…)

不系列了，只随便记五个印象比较深的事情。

1. Gtalk的加为好友通知

当用户在IM上加朋友为好友，建立人际关系列表的时候，往往会忽略被加的朋友也必须强制加他自己，而且还要人家实时回应，我就一直在想，凭什么啊？

QQ的方案，Icon以短消息的形式不断闪烁提醒，然后对话框确认；MSN的方案，咣当一下蹦出对话框打断用户。只有Gtalk，用户在被动接受陌生人打扰时，不会被强制接受，当点开面板才能“发现”，并且不影响其他操作。

(more…)

找茬半月刊，开头先：

1. 图片来自keso博客

如果我来修改，上一张留言，去掉“发表于”后文字的加粗，并且与“评论内容”的颜色对调；下一张文章，可以考虑把“发表于”几个字颜色和上图的灰统一，以便与分割线区分。

(more…)

用户在网站上的所有行为都可以描述为大大小小的任务流，任务流中的每个节点都有前后逻辑，那么起始节点之前的逻辑是什么？是这个任务流的根源，即可以理解为任务情景。

以目标为导向

在完成页面结构原型设计之后，需要考虑如何把这一个个页面串起来，也就是说，得在用户的角度，模拟使用这个产品，能够做什么？最有可能做什么？经常做什么？

从用户的最终目标反推，逐步细化分解，每个任务为独立的流，逻辑上为一个整体，理想情况是做到任务之间既相互独立，又能分层对应、交叉组合，最好还大小均匀。

(more…)