随着互联网信息爆炸式增长，用户浏览单个网页时，并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看，为什么？

一、 视觉层级为什么重要

左侧是设计师期望用户的浏览方式，右侧为用户实际的浏览方式—摘自《Don’t make me think》

用户来到一个网站有他自己特定的目标，如阅读新闻、购物、查看新消息，然而信息量太大，逐一查看需要大量时间，这就要求网站能抓住主流用户特征，将重点推送给他，用户找到自己的目标或感兴趣的点，才有可能继续浏览或产生下一步动作，否则就会离开。

有的时候，我常常无法进入状态，这个时候我会选择看书。一本好书有一种力量，一种代入感的力量，会让你随着做着的逻辑一路陷入进去，慢慢的将内心的浮躁都洗去，让你沉静下来，然后整个人也跟着沉了下来。

Flickr为用户准备了很多有意思的登录欢迎语，这其实是一个容易被忽略的细节，但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许，只有当这些细节从产品中消失的时候，我们才会发现并开始怀念它们。

我(英文原文作者)会特别在意这些细节，因为它们可以触发用户的情感响应。如果运用方式得当，这些细节当中的小魔鬼可以帮助我们打造出更具人格的产品，并使用户在与之进行互动的过程中产生积极的情感响应；而这种积极的态度会有效的促使用户主动传播和拥护你的产品。这种在人格层面与用户建立关联的设计思路也被称作“情感化设计”。

一点小理论

“情感化设计(Emotional Design)”一词由Donald Norman在其同名著作 当中提出。而在Designing for Emotion 一书中，作者Aarron Walter将情感化设计与马斯洛的人类需求层次理论联系了起来。正如人类的生理、安全、爱与归属、自尊和自我实现这五个层次的需求，产品特质也可以被划分为功能性、可依赖性、可用性和愉悦性这四个从低到高的层面，而情感化设计则处于其中最上层的“愉悦性”层面当中。

一个有效的情感化设计策略通常包括两个方面：

1. 你创造出了独特并且优秀的风格理念，令用户产生了积极响应。
2. 你持续的使用该理念打造出一整套具有人格层面的设计方案。

接下来，我们将一起了解一下情感化设计的组成要素及相关策略，看一看有哪些产品在这些方面做的比较有代表性；另外，我们还会通过几个案例分析来感受一下从整体角度持续使用情感化设计理念所带给产品的“人格魅力”。

在决定网站的布局之前，有很多重要的事情需要考虑。颜色、风格和可用性是网站布局的核心因素，是网站是否成功的关键。多年以来，我们看到很多内容充实，色彩丰富的网站作品，但最近几年极简主义风格（一种设计风格，感官上简约整洁，品味和思想上更为优雅）的设计越来越流行，人们认识到简洁干净的网站布局能够更加有效的突出网站的主题内容。

Tapmates

Caava Design

我个人对这方面的话题是蛮关注的，偶尔在微博 上弱弱的念叨两句，也会有不少朋友来发表各自的看法，确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的，其中有些比较公允务实，有些则比较偏颇；所谓偏颇，也就是片面表达某种风格一定比某种风格更好，以及好在哪里。说真的，都有一定的道理，都能看出发表论调的设计师的思考和激情。

有人说了你怎么这么没节操呢，你到底觉得哪种好呢？我要说的是叭，在我看来这个事情里的的确确不应该存在哪个强于哪个的争议，因为它根本就不是个非黑即白非美即丑泾渭分明的问题；脱离了实际产品的上下文环境，脱离了产品功能与目标用户群类型之间的关联，所谓好与不好的命题压根就不成立。

说的具体些，远的不讲，单说Beforweb 这边的视觉风格，除了每篇文章的图标以外，可以说是彻彻底底的扁平化了(当然，细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框，这个不算数...)，但如果有人说我是扁平风格的卫道者的话，我会很不开心，因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面，最典型的包括语音备忘录、iBooks、iPad里的日历等等，它们的界面让我觉得亲切自然，让我可以在冰冷的电子设备当中找到现实生活的真实感，就这么简单。

下面这些截图来自我平常自娱自乐时会用到的一些音乐方面的iOS或OS X应用。它们的功能的确非常棒，我着实在这些东西上花掉不少钱，但如果它们的界面没有采用如此逼真的拟物化设计，如果他们只是干巴巴的功能和数据陈列或是Metro风，我是绝不会在它们身上花半毛钱的。

什么是风格指南？简单的说，就是一份告诉你如何讲故事的文档。它确立了一些标准，例如怎样撰写文案、怎样排版、怎样打造视觉元素和交互方式等等。风格指南源自于印刷领域，例如报刊(看看卫报的风格指南 )；在Web领域，它同样体现出了巨大的价值。

无论是传统印刷，还是互联网，最关键的都是“内容”。风格指南的最终目标就是让内容以清晰并且一致的视觉风格呈现出来。BBC的全球体验语言 (Global Experience Language,GEL)就是网站风格指南的绝佳范例。不妨通过页面右侧的“Download GEL Web Styleguide”下载一份PDF文档来稍作了解先。

移动设备与传统桌面设备虽然都被成为“计算设备”，但它们之间的差异是显而易见的：移动设备的屏幕要小很多，无线网络链接方面会有不稳定，电池续航能力较弱，等等。这份“弱点”清单可以列的很长，但如果你因此认为移动设备就是降级版的计算机，那同样是错误的看法。

实际上，从其他一些角度来观察，移动设备又是比桌面设备更加强大的。智能手机和平板电脑都是更加个人化的设备，它们会一直陪伴在你身边，让你随时随地都可以接入互联网获取所需的信息；它们身上还有传统设备所不具备的很酷的功能，包括GPS、数位罗盘、加速计等等。

所有这些差异都使得移动设备当中的应用程序在界面设计方面存在很多独到之处。我(英文原文作者)基于在自己的workshop中的工作经验，总结出了移动应用界面设计的十条原则及小提示，在这里与大家分享，希望能够帮助那些还不是非常熟悉这个领域的设计师们建立起一套有实践价值的设计思维框架。

1.设计观念

从传统设备转向移动领域，设计师们首先要做的是调整思维模式和设计观念。

• 专注 ：移动应用的本质目标是帮助人们以最高的效率完成特定的任务。少即是多，你要砍掉的产品功能通常会比你想象的多很多。
• 独特：从一开始就要理解你的应用与同类产品相比具有哪些独到之处，将其体现到产品的整体用户体验策略当中，并在交互及视觉设计流程当中着重突出这些卖点。
• 迷人 ：移动设备是相当个人化的工具，人们会在长久的使用过程中逐渐将感情融入到软硬件当中；应用程序同样要与用户在情感层面产生互动，通过各种友好的、有趣的、可信赖的设计与功能让用户觉得爱不释手。
• 体贴 ：不要将注意力过多集中在“开发”本身上，不要将自己的心智模型以及产品的业务逻辑作为设计的准绳。如果你确实希望自己的产品能够被更多用户所接受，那么必须学会站在他们的角度观察问题、制定设计决策。

不要用“多多益善”的观念打造移动应用

今年，我们(英文原文作者及团队)发布了FreshBooks 的第一款iPhone应用。从前我们的产品一直是通过Web端应用的方式提供服务的。这次，我们把iPhone应用的设计开发过程看作一张空白的花布，尽力在其中实现一些新的功能概念和设计想法。在这个过程中，我们着实学到不少东西。

不要害怕犯错

对于移动应用这样的产品，设计过程中必然会遇到很多用户体验方面的问题与挑战，尤其是对于新手来说更是如此。

无论你的线框稿在逻辑上有多缜密，UI稿在视觉上有多漂亮，当它们落实成为原型或最终产品时，总会有问题呈现出来。这并不完全是坏事；我们在设计FreshBooks的iPhone应用时甚至将犯错这件事也纳入到了流程规划当中，这就意味着：

• 坦承没有完美的设计，无论稿件和原型多么优秀。
• 真正的成功或失败都是由用户的反馈来定义的。
• 对于在设计过程中看到的问题要迅速做出反应，根据从实际用户身上得来的验证结果进行迭代。

接下来，我将向各位描述一下我们在项目中犯过的三个错误，以及我们是怎样解决这些问题的。

应用的主界面

在项目开始的时候，我们对FreshBooks的一些现有用户进行了访谈，了解他们在生活和工作中是怎样使用移动设备的，包括他们面对的实际问题，以及他们对移动应用版本的FreshBooks的期望。

根据这些访谈，我们归纳出了一些基本的设计原则，例如下面这条：

以任务为中心的用户体验

移动应用版本的产品应该围绕着一系列互不相关的帐单任务进行优化，包括时间追踪、为收据拍照存档、开票等等，这些是移动应用所处的使用场景当中最常见的任务。

而其他方面的复杂任务，包括批量编辑、权限管理、定制化等，则留给传统的Web端应用来承担，以此来保证移动版本在功能上的简约与集中。

基于这条原则，我们设计了应用的主界面。它由一系列最重要的任务组成，视觉上采用图标加文字标题的形式，点击进入相应的任务流程。例如，用户点击了其中的“创建新发票”之后会进入发票列表界面，然后创建新发票的界面会自动滑入视图。

这种以典型任务为中心的设计思路在意图上是好的，但接下来我们发现了一些问题。

亲密是爱情关系中的温暖体验，是一种朋友般的亲近。由于真正喜欢和对方在一起，渴望同对方一道建立更有凝聚力的和谐关系，希望把自己的生活以坦诚、不设防的方式与对方分享。伴侣间会发展出属于两个人的沟通风格，熟悉彼此不完美的个性。亲密令恋人互相关心，善待对方，满足彼此的需要和欲望。亲密没有激情强 烈，但能促进恋人相互亲近，让人感受到人际温暖。