“看吧，他出书了。”-虎课网

“看吧，他出书了。”

孔雅轩LineVision发布于 2021-03-261243阅读0点赞

规律与逻辑-用户体验设计法则...

“会说话你就多说点，不行就出本书！”

“好的。”

2018年给自己的年终总结中有这么一段话：

“年初，鼓起勇气开始撰写自己第一本书，之前受邀多次，但总感觉自己对行业理解尚浅，并且一本书需要付出太多的时间与精力。然而在开始撰写后不久就在各种设计交流群看到一些让人颇感不适的言论：“这个**又来邀请我写书，真是懒得写。”“**出版社也老邀请我写书，都烦死了，不知道那些写书的人怕不怕误人子弟，反正我怕。”... 对于一个每天加班很晚到家又要加班熬夜写书的普通北漂青年来讲，这些言论就像一把把刀子一样，刀刀都是要害。

自己的门槛自己垒，为什么要遵循别人给自己设定门槛呢？新书截稿后的最后一个深夜，突然想清楚了这个道理。我给自己写书的门槛不是有没有资格写书，也不是能不能写完一本书，而是这本书是否可以让百分之90以上的读者都感觉买书的这几十块钱花得值，并且推荐给身边的朋友。能否有资格做，是最低的门槛，敢不敢做是第二个门槛，做得好不好才是自己应该给自己定的门槛。

关于书的起名

时隔两年，终于这本书出版了，我给它起了名字，叫《规律与逻辑-用户体验设计法则》。

能为互联网设计行业写一本书，我感到很欣慰，同时也感受到了莫大的压力。令人欣慰的是，我终于可以把这么多年积累的行业经验通过这样一种方式进行体系化的总结，并阶梯化地分享出来;而压力则是因为这个行业实在太新锐了，产品的功能迭代几乎不给设计师足够的思考时间。在诸多设计师还在纠结移动界面设计扁平化更好还是轻拟物风格更好时，各种新兴词汇早已如泉涌般让人应接不暇，如“商业化思维”“以用户增长为中心的设计”及“双钻石模型分析法”......甚至在我撰写这本书之前，很多我寻找到且自认为比较完善的用户体验设计规律，也在一次次的迭代发展中不断被打破。

而我始终相信，用户体验设计一定是有规律可循的。只要掌握了这些规律，就可以设计出体验感较好的产品。不管是视觉体验还是交互体验，甚至用户对于产品的情感都是可以主观去营造的。本书算是我的一个阶段性入门成果，通过对未来互联网行业的感知，塑造出未来用户体验设计师的能力模型——从技法到“招式(理论实际应用)”。

因此，在写稿之初，“规律与逻辑”就已经成了这本书的核心理念。

为什么要读这本书？

必读原因一：体验设计系统全栈化入门

整书从体验认知开始，知道什么是生活中的用户体验，什么是互联网中的用户体验设计，然后从设计规范基础逐渐深入到界面设计原则与技巧，运营设计原则与技巧，交互设计，甚至动效设计...

1.1.1 生活中的用户体验

“用户体验”这个概念在早期的工业设计中颇受重视，从汽车的驾驶体验到厨房用具的使用体验，都属于用户体验的范畴。用户体验是可以随着科技水平的发展而不断优化的。例如，从前插线板的插口很多，但由于插口与插口之间的距离较近，在具体使用过程中，相邻的两个插口往往只能使用其中的一个。如今很多工业设计师都尝试着去解决这个问题，所以就有了现在各种各样的插线板 / 插座样式。如图 1-1 所示，这是一种伸缩式的、可以从多个面插入插头的立体插座。

1.1.2 用户体验设计师的职责

笔者将一名用户体验设计师的终极目标分为 3 个:首先是满足用户需求，即产品流畅易用，其实也就是早期 UCD(User Centered Design，以用户为中心的设计)的概念;其次是满足产品需求，即产品数据的正向提升，这就像是最近较为流行的 UGD(User Growth Design，以用户为中心，以增长为导向) 的概念;最后就是满足设计者自身的需要，即产品有体验上的创新。设计师在工作中扮演的角色就是如何让这 3 个目标无限地趋于平衡，或者根据产品当时的环境确定侧重点。

1.1.3 界面设计中的栅格系统

在 App 界面设计中，栅格系统的应用不仅可以让界面看起来更美观，还可以提升程序开发的效率。App 的设计过程与开发过程是完全不同的。App 的设计过程可以是感性的，各个元素可以相对随意地进行摆放，只要看起来舒服就好。而 App 的开发过程必须是理性的，界面中每一个元素的摆放都有一定的规范。如图 2-18 所示，看似摆放随意的4个标签，实际上它们的位置是符合栅格系统的规范的。

必读原因二：UI&交互&情感三大体验

整书核心部分将体验设计拆分为视觉、交互、情感三大体验，视觉体验包括了界面设计规范化与提升质感的细节，空页面、引导页等辅助页面的设计技巧；交互体验从可用性、易用性、好用性三个角度出发，详细剖析好的交互设计应该具备哪些细节；情感体验从产品安全感、满足感、亲切感三个角度出发，解读一款产品如何更具温度，提高用户粘性。

2.1.1 卡片/分界线/无框

顾名思义，卡片风格就是把界面中各板块的信息用卡片的形式承载起来，让界面信息看起来直观、清晰。这种设计风格非常适合用在一些列表页里。同时，手机屏幕内的卡片也可以让用户联想到现实生活中的卡片，所以一些优惠券或会员卡等元素也非常适合运用卡片风格。

图 3-44 所示为一款创业计划书评估的小程序。由于用户在单个界面需要获取的信息较多，不采用卡片风格会使整个版面显得较为松散，板块与板块之间的归类不清晰(见左边部分)，而采用卡片风格，则可以让多个板块看起来更加直观和规整(见右边部分)。

2.1.2 文字的层级区分

在界面设计中，文字部分的层级区分是决定一个界面是否有层次感的重要因素。一般情况下，文字可以进行调整的属性除字体，还有字号、字重(粗细)、倾斜度、色相和明度等，如图 4-52 所示。其中，字号大小是拉开文字层级的首要因素。如果通过字号大小的调整不足以清晰地区分层级，那么可以再考虑字体是否加粗。

2.1.3 动效设计的意义

设计师若只追求静态像素的完美呈现，而忽略动态过程的合理表达，会导致用户不能在视觉上觉察元素的连续变化，进而很难对新旧状态的更替有清晰的感知。迪士尼的一名动画大师曾说过:“动画的一切皆在于时间点和空间幅度。”通过“时间点”和“空间幅度”的设计可为用户建立运动的可信度，即视觉上的真实感。当用户意识到这个动作合理的时候，才能更加愉悦地使用产品。

那么，什么是视觉上的真实感呢?举一个最简单的例子，当我们使用产品提交表单并加载信息时，如果加入一个进度条，可以看到加载进度，相比静止不动的加载状态来说，这种动效可以让用户更清楚自己当前所处的位置。如图 5-6 所示，加载时的进度条可以为用户建立产品视觉上的真实感。

2.1.4 容错原则

当用户进行错误的操作时，想看到的并不是一个大大的错号，而是操作具体错在哪里，接下来该如何去做。这时，设计师应该明确地告诉用户当前如何操作可以避免再次犯错。其中让笔者记忆犹新的就是，之前 Windows XP 系统经常会出现莫名其妙的弹窗，告诉笔者系统出现了错误，有时候系统错误提示还是一堆看不懂的代码符号，甚至有时候弹窗还关不掉，这种体验是非常不友好的。如今的产品都非常看重“容错性”这一点。如图 6-7 所示，当用户在“淘宝”界面(左图)中搜索内容时，如果输入了错误的文字，系统会智能地猜测用户真正想搜索的内容，并给予显示与提示;“百度搜索”界面(右图)设计也是同理。

必读原因三：深挖设计规律授之予渔

一本书到底可以给读者带来多少价值呢?或许有的读者只希望通过本书对界面设计中的规范有所了解。而对于笔者来说，更多的是想让读者通过本书了解用户体验设计的核心内容，而非单纯的规范或工具讲解。在了解界面应该如何设计之后，更要了解为何要这么设计。即使设计风格与设计规范不断迭代，也都是基于设计的核心原则来进行的。

3.1.1 色彩的对比

从视觉心理上讲，明度越低的物体越靠后，明度越高的物体越靠前。在进行界面设计时，一般不能将深色卡片悬浮在浅色背景尤其是白色背景上，如此操作容易违反用户的视觉心理。因为浅色背景一般为界面背景配色中的较高层级规律，所以一般将浅色卡片悬浮在深色背景上的情况居多。如图 3-13 所示，当将白色卡片放到灰色背景上时，会很明显地感觉到灰色背景上浮起的白色卡片，界面层次清晰;而将黑色卡片放到灰色背景上时，则让人觉得仿佛是在灰色背景上挖了个洞，界面层次不清晰。

3.1.2 每一个用户都是特殊的

一直以来，设计师在很多产品设计中都会有意无意地强调专属感。这样的设计或运营方式可以让用户感觉到产品特别地“懂”自己。这个“懂”字，正是大品牌所具有的一种独特而又不可或缺的重要属性。在传统的认知体系中，专属感意味着稀缺性，一种对稀缺资源的占有，是一个非常狭小的受众群体才能享受到的“特权”，并且往往和“定制”“专供”及“限定” 等词汇捆绑在一起，因而通常会频繁地出现在奢侈品行业的产品理念和营销推广活动中。在产品设计中，通过视觉设计增加用户专属元素，可以提升用户的专属感，进而产生满足感。