详情
本书通过行为学、心理学的描述阐明了用户体验设计到底是怎样对用户发生作用的。当用户在浏览一个页面的时候，他的视角是怎样的？一个页面的结构布局又是如何影响用户浏览的？对于这些问题的具体解答，将会使读者更深刻地理解一些用户体验设计的客观、可实施的评判原则，也会了解到具体怎样做才可以达到一个好的用户体验设计。
书名：像素雕琢——跨平台用户体验设计法则
ISBN：978-7-115-45793-6
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [以] Tal Florentin
译 北京天职信息技术有限公司
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Authorized translation from the English language edition, entitled DESIGN OF THE PERFECT SCREEN, by Tal Florentin, Copyright © 2016.
本书中文简体字版由Tal Florentin授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。版权所有，侵权必究。
用户体验设计是一种比较主观、抽象的工作。本书通过行为学、心理学的描述阐明了用户体验设计到底是怎样对用户发生作用的。当用户在浏览一个页面的时候，他的视角是怎样的？一个页面的结构布局又是如何影响用户浏览的？对于这些问题的具体解答，将会使读者更深刻地理解一些用户体验设计的客观、可实施的评判原则，也会了解到具体怎样做才可以达到一个好的用户体验设计。
本书从用户界面最基础的知识入手，介绍了页面布局的基本原则，为后面的复杂布局应用奠定基调；之后，从页面可读性、黄金分割、认知过程几个方面阐述了一个优秀的界面应该有的特征，帮助读者掌握打造高品质用户体验的黄金法则。
本书结构层次分明、内容简练精辟，无论您是前端设计/开发工程师，还是需求分析师，本书都值得您仔细品味、消化吸收。
前端开发人员缺少的从来都不是工具，就好像程序员从来不缺少IDE一样。作为一个软件开发人员，更需要理论落实到具体方法上的指导，就像设计模式、开发框架之于程序员，在界面设计方面，这本书恰恰达到了这个目的。
评判一个好的APP或者网站的标准有很多，人们首先想到的大多会是功能、内容等因素。然而，再丰富的功能，再充足的内容，也无法挽救一个布局凌乱，内容混杂的APP或网站所留给你的第一印象。对于一个印象大打折扣的APP或网站，你还会有兴趣继续关注它吗？我相信你不会。
通过这本书，你会了解到人们关注内容的方式与习惯，进而体会到作者所提到的那种能力——仅仅凭借静态的内容布局就可以实现引导用户的目的。神奇吗？不仅如此，黄金分割的真实案例，还会让你体会到日常事物不可言喻的美妙。原来一个简单的位置调整，就可以让一幅普普通通的照片变得生动起来，仿佛它有着自己的故事，让人浮想联翩。
作者丰富的设计经验让人折服，这对于前端开发工程师，尤其是在设计方面缺乏经验的人来说，是不可多得的宝贵财富，值得我们去学习和借鉴。而对大多数普通人而言，掌握其中的奥妙，能够让照片更加生动，让文档更加简洁易懂，如此，何乐而不为呢？
最后，感谢参与本书翻译及校对的工作人员：王治国、刘凯、许大伟、陈东、陈天运、白思思、胡萌、裴芮、韦祎蒙、周静。
本书翻译团队的本职工作侧重于企业应用开发，出于对用户体验的兴趣完成了这本书的翻译。希望这本书能帮助到中国的软件开发者。如书中存在疏漏之处，还请读者指出。
优秀的设计师可以影响用户的操作行为，他们可以让用户按照规定的路线来浏览当前页面，甚至可以在页面上定义一个入口，让用户不得不从指定的位置开始浏览，就像魔法师的魔法一样。
他们进行设计的方式有很多种，其中一种是传统的设计方式。该方式在建筑行业和印刷业已经有几百年的应用历史，它源于一些调查研究，例如视觉追踪技术。这些技术的应用在行为学和心理学中也很常见（例如人在做选择时眼睛会不停地转动）。在设计的过程中，像这种涉及其他行业的例子还有很多。再举个例子，我们日常用到的工具（如钢琴的键盘、铁锤的手柄），同解剖学也是息息相关的。
就像心理学家一样，设计师也会掌握一种“魔法”，这种“魔法”可以影响用户、训练用户并且引导用户。你一定对这种“魔法”感兴趣吧？那么让我们一起揭开设计这层神秘的面纱吧！
我用了18年的时间研究数字产品界面的设计技巧，并尝试熟练应用它们。刚开始我还不清楚到底什么是设计，一段时间后，我发现了一些规律，但这些规律并不具有广泛适用性。我已经设计了120种产品（大约有3500个页面、屏幕和布局），但仍有很多需要学习的地方，并且我也会尽自己最大的努力做到最好。
之后几年，我一直在学习怎样才能熟练地应用优秀的设计。下面是我最近研究的一个项目带给我的感触。我带领我的团队为一个来自Tel-Avivian1 的博客做设计，这个博客的受众是“Y世代”2。让我意想不到的是这个作品竟然获得了2014年的国际用户体验奖3，于是我的名字就出现在了一份大约有40人的名单上，并且除我之外，这40多个人之前都曾获过奖。
1以色列地名——译者注。
2“Y世代”指的是1980年之后出生的人。
3https://userexperienceawards.com/——译者注。
上面这段文字看起来像是在炫耀，然而并不是。这次获奖对我而言并没有多大影响，却激发了我分享知识的欲望。我讲授了十几年的UX课程，估计可能是我们国家最活跃的UX讲师了吧！几年前，我创立了UXV4 ——以色列UX认证机构，并向UX的人才市场输送了几百人，但只有此次获奖真正让我产生了向国外传递知识的欲望。
4UXV – the Israeli UX certification program。
我写这本书的原因，就是让你在学习UX的道路上不用走那么多的弯路。尽管我坚信勤学苦练很重要，但在成功的道路上还是应该要借鉴他人的经验。
这本书会使你在UX前进的道路上更加容易。本书中，我将采用最简单的方式来描述不同的工具、方法和技巧。另外，为了便于读者理解，我还加了很多图片进行说明。你要做的就是花一些时间读完这本书，之后的实践就要靠你自己。
这不像是魔法世界，你发现的这些秘密不应该只有一部分人知道，我们需要将这些秘密传递给更多的人。事实上，这正是我想要的——让更多的人知道这些秘密会让世界变得更加美好。
让我们用设计来创造更加美好的世界！5
5Let’s make it a better world – pixel by pixel。
这本书主要是针对数字产品的布局进行讲述，然而，设计并没有一个标准。如果你想接受本书中所涉及到的设计思想和过程，那么你需要开始做很多关于UX的研究和调查。在这个过程中，我们会经历以下的一些重要步骤，它们会带给我们一些有用的信息。
我们需要调查并定义产品的商业目标，并且明白对于本产品来说，什么才是最好的交互。
我们需要花费大量的时间来对我们产品的受众进行充分调研。我们一定要抱着一种“我并不清楚用户到底需要一个怎样的产品”的态度去完成这项工作。对用户的调查将会让我们知道用户眼中的世界是怎样的，而不仅仅只局限于我们眼中的世界6。
此外，我们必须了解产品以及它的功能需求。一个UX设计师并不是产品的唯一定义者。我们需要理解需求，用最有效的方式将功能呈现给用户，并尽可能地满足产品的商业目标和用户需求。
6毕竟产品是给用户用的——译者注。
当你打开你最喜欢的设计软件（原型设计工具）的时候，你应该确保你可以回答以下几个问题。
1．该页面提供的功能是什么？
2．该页面目标用户是谁？使用该页面的用户是一个怎样的人？
3．你期待用户在页面上执行哪些操作？
当你已经为页面的期望值进行了充分的思考和定义后，你就可以开始你的设计工作了。我们的目标就是创建一个可以迎合所有期望的设计。
在设计之前，设定一个期望值很重要。本书将会用这样的屏幕来演示和描述我的解决方案。虽然这只是一个特定比例的屏幕，但是不用担心，本书所提及的所有设计思想和规范适用于各种类型的屏幕，包括平板和智能手机。当本书所提及的模式需要一些修改才能用在其他地方的时候，我将会提醒并给出解决方案。
这是一个屏幕
设计一个布局其实需要理解一种“力”，这种力会控制用户的行为。用户的第一个认知周期是从环境中获取信息。然而，对于我们来说，用户得到的大多数的信息是通过眼睛来获取的（也就是他看到了什么）。理解眼睛是如何工作的，尤其是理解眼睛浏览一个页面的方式在设计中是一个很重要的参考量。
眼睛浏览一个页面的时候，主要是靠两种“力”来驱动，即：从上到下和从左到右（后者还要复杂一些，我等一下会讲到）。
这两种力在平面设计中较为常用，如报纸、书籍和广告。同样的，对于一些数字产品，如网站、登录页面和APP。上面提到的“力”也同样适用。
我们来看一下这两种力到底是什么样的。
两种“力”
我们先来看第一种力。这种力是垂直方向的——它可以驱动我们从上到下地浏览信息。这条规律也叫“古腾堡之力”，是以发明印刷机的古腾堡先生之名命名的。每当我们浏览一个图形界面的时候，总会感觉有一股力量让我们不自觉地从上到下浏览页面。
我们应该如何利用这条规律呢？我们应该把最主要的信息放在顶端，以便于用户可以在第一时间看到。这种做法很直接，对吧？
第二种力会影响用户水平方向的浏览顺序。这种力和当前内容所用的语言相关，不同语言的阅读顺序其实是不一样的。如果你的内容和英语的阅读顺序一样，这种力应该是从左向右的。如果内容是用从右向左的阅读顺序来做的，例如希伯来文和阿拉伯文，这种力就应该反过来——也就是从右向左。
但是我要声明一点，这种力其实是和读者有关的。如果读者日常的习惯就是从左向右的阅读顺序，那么这位读者在浏览一个页面的时候，将会把眼睛“自动地”放在页面的左上角。
在物理中，经常使用“矢量合成”的方法来计算多个力的合力。我们都知道，力有方向，也有大小。那么，这两种力哪一种更强一些呢？是从左到右的“力”还是从上到下的“力”？
一般来说，这两个力是等同的，创建一个矢量其实就是从屏幕的左上角到右下角连接一条线。
通常情况下的浏览路径
如图3所示，通常情况下，用户的浏览路径都是从左上角开始。这两种“力”会引导用户从左上角一直浏览到右下角。
那么是否就像上文所提到的那样，用户一定会按照对角线方向来浏览屏幕呢？
当然不是，一些研究（如视觉追踪）表明，人们只是在浏览的时候眼睛会按照对角线方向移动。所以说这种对角线方向的说法只是用户大体的视觉移动方向。
我们目前所知道的是用户的视线通常会从左上角移动到右下角。但是在移动的过程中都发生了什么呢？答案是：看情况。当然了，这也取决于设计师。元素在页面上的布局也会影响用户浏览页面的方式。
这既是一个好消息，又是一个坏消息。对于那些认为用户的浏览过程一成不变的设计师来说收到的就是坏消息。如果设计师设计出来的页面不是用户想要的，那么这个设计师就一定要反思了。
好消息就是，我们有很多方法来控制用户的浏览路径。优秀的设计师会有很强烈的控制欲。我们要在达到商业目标的基础上来定义用户如何浏览我们的页面。
在接下来的章节中，我会告诉你怎样使用这两种“力”。
设计技巧1
这两种“力”会控制用户的浏览路径，并且这两种“力”的强度相差无几。
设计技巧2
浏览路径从左上角一直到右下角。
设计技巧3
浏览和阅读的路径是一条直线。
从印刷时代开始，页面上各个元素的摆放位置一直困扰着设计师们。因此，合理地规划元素在页面中的位置是尤为重要的。
本章所提及的元素摆放指南最早诞生于印刷时代，并引导设计师们合理地对元素进行布局。
首先，我们需要将屏幕等分为四块，如图所示。
四分布局
左上角的区域叫做“主视觉区”。当用户的眼睛扫视页面的时候，目光一般会停留在这个区域。主要视觉区将会在第一时间吸引用户的注意力。因此，本区域可以用来放置网站的logo，告知用户当前页面的位置，显示欢迎信息等。
第二个区域叫做“强视觉区”，该区域对用户的吸引力仅次于第一个区域。我们的视觉一般是在水平方向移动的，因此，我们的大脑会很容易引导视线从第一个区域转移到该区域。设计师可以通过在首页放置一个大图片等方式来引导用户视线的水平移动。在这里，我们运用了“古腾堡之力”的水平力。
当目光划过第二个区域并准备向屏幕末端移动的时候，“垂直力”将会引导用户的目光来到第四个区域。这个区域正是“终止区”，即视线终止的地方。该区域可以放置按钮，也可以用来告诉用户接下来该做什么，如可以放一个链接来引导用户浏览下一个页面。
在这个过程中，我们跳过了“弱视觉区”。
为了确定用户视觉的浏览路径，我们需要跳过第三个区域。所以，该区域我们不能放太多重要的内容。
如果第三个区域的内容和第二个区域的内容一样多，有可能会产生“冲突”。刚浏览完第一个区域的用户将会得到两个焦点，此时，用户的心里就会想，下一步应该看哪里呢？我们知道“水平力”和“垂直力”其实是相等的，这就意味着用户的视线将会停滞在这里不知所措，不知道应该选择哪一个区域继续浏览。我们一点也不想让这种情况发生。
我们希望页面中定义的浏览路线对于每一个人都是一致的，所以在设计中，我们要避免冲突。
本章提到的准则只作为设计师的一个参考，有时候我们的客户是不会让我们将页面的1/4留为空白的。因此，我们可以把这个准则应用在网站的首页或者各种CMS上，但是该准则并不适用于专业性强的网站，在此类网站中，我们希望充分利用屏幕上的每一寸空间。
设计技巧4
将第三个区域留为空白可以避免页面中的视觉冲突。
