写在前面
首先这不是一篇绝对的指导意义上的交互设计的博客或笔记,在读完整本书时我也是怅然若失的。整体上原则性的建议并不多,但我还是推荐大家读一下原作或者本文,作者表述了些用户行为习惯和偏好上的问题,也相对系统的说明了交互设计上的一些要点,以及如何执行可用性测试(本文没有详细列举相关内容)。
背景
我之所以选择花时间在这方面上最根本的原因是在梵天项目初期阶段,因为交互设计上的一些问题出现多次反工调整,耗费大量时间,所以我认为一个从事桌面端中台系统前端开发的开发人员,有必要具备一定的交互知识,在一些简单的显而易见的交互问题上可以避免低级问题的发生。同样花费时间整理写作此文的目的也是基于部分人没有精力和时间投入到这方面学习中,所以提取并重整原书内容,方便对这方面有需求的同学粗略了解。
说明
正如我开文所说,想通过本文或者《Don't make me think》这本书拿到具有可执行性的设计方案是不现实的,我在萌发普及设计方面知识时,前后翻了很大一部分书,细读了本文要分享的《Don't make me think》和《The non-desiners design book》两本,过程中意识到设计本身也是一场基于经验实践的修行,和开发所累积的经验类似,设计需要不断的积累吸收好的设计方案并应用。所以作为开发人员在这方面存在天然的壁垒,因此有效优秀的设计不单单是源自书本知识的培养,更多的是来自日常的积累和实践。
最后在此之前我坚信设计和艺术本身有着本质上的区别,设计是偏向工业化的,受众是普通大众用户,而艺术偏向自我表达,受众是小部分偏好群体。我对此看法持保守态度,贡布里希在《艺术的故事》中提及早期艺术是为满足宗教及上层社会的需求而发展起来的,绘画用于记录法老生平,雕塑用于展现神威。如此看来绝对对立的划分设计和艺术是一个片面的看法,设计本身也要从工业和美术中折中发展,如同电影、游戏在商业和艺术表达上的折中一样。本部分纯粹为满足个人表达,与全文无关,望见谅。
纲要
第一部分本文将先简述什么是可用性,然后从可用性的第一原则上介绍一些基本的设计原则。 第二部分从用户和开发者思维区别上展开,介绍面向用户使用习惯的一些设计原则。 第三部分从路标导航开始,说明网页应用中的导航设计。 第四部分说明首页信息的传达和一些设计原则。 第五部分简单略过移动端设计上的差异。 第六部分说明用户习惯与个人偏好间的关系,并指明可用性测试的建议和意义。
可用性
可用性(Usability)也常称作 UX/UXD,用户体验设计(User Experience Design ),因乔布斯在这方面做出的努力,现在大部分人开始重视可用性相关的设计。
如何诠释可用性
Useful 是否是用户需要的。
Learnable 用户是否能清晰如何使用。
Memorable 用户是否每次都需要重新学习记忆。
Effective 是否可用,能够完成相应功能/任务。
Efficient 是否高效,学习使用所花费的时间是划的来的。
Desirable 是否为用户所期望的。
Delightful 用户使用后会感到有趣愉悦。
比如 如果某个应用需要用户花费大量的时间来学习,那么它的可用性就是很低的。
第一原则:Don't make me think
当你打开一个页面时,它应该是清晰明了,能够自我诠释/解释的(self-explanatory)。

应该避免让人产生疑问。

如何做到 self-explanatory
降低视觉上的迷惑
注意用语,站点中的专用概念、名词、指示词等要简洁易懂,保持一致。

可点击按钮/超链接要清晰明了,避免使用彩色字体指代按钮。

这方面的设计原则可以参考视觉设计的几大原则进行。
降低交互上的迷惑
比如同样的输入逻辑要保证返回是一致的规则。假设你在输入框中定制了输入BJ
则自动填充为北京
,那么当用户输入SH
时也应该自动补充为上海
,如果没有这样做将让用户产生迷惑,认为系统存在问题。
交互相关的设计技巧会在下文继续补充。
用户是如何使用网页的
设计者角度
设计者角度期望的用户行为是,用户能够浏览站点所有页面,详细阅读全部内容,理清我们如何组织站点结构后,权衡分析然后点击进行所需要的操作。
实际使用
实际上使用者通常会大致扫一眼每个页面(glance at each page),扫一部分的文本信息(scan some of the text),然后点击第一个自己感兴趣或者在寻找的链接。他们几乎不会关心页面其他大部分的信息。
可参考下图对比:

实际使用者分析
为什么用户只浏览页面而不是细读
首先人们在网页阅读和传统阅读习惯是完全不同的,人们不会花大量时间阅读文本,通常扫描然后寻找兴趣点是最节约时间的。 题外话网络文学也具备这种特点,这也是为什么博客、公众号、网络小说等会高秘密的制造段子、梗和信息点,传统的大段落式的心理描写、缜密细繁的事件发展逻辑在网络文学很难抓留用户。总的来说网络阅读更加浮躁追求简单易得的快感刺激。 另外也有形成以超链接为体验形式的文学表达,诸如大名鼎鼎的 SCP 委员会(新怪谈文学的代表,感兴趣可以了解)。
回到正题,通常抓住我们眼球的点一般包括:
- 正在进行的任务
- 个人的兴趣偏好
- 一些刺激性的信息,比如 免费、打折、性感荷官在线发牌等。

为什么用户从不权衡分析,而是盲目点击
理想状态下,我们都期望所有人在决策前理性分析全部可能性,然后选择出最优方案。而实际上(这里重点说网页浏览)让我们做出选择的原因不是分析思考,而是最先满足我们期望的(satisficing)信息,比如一但我们发现一个链接和我们正要找的方案接近,我们就会毫不犹豫的点进去。
造成这种现象的原因如下:
忙/浮躁还是最根本的原因 如上文提到的,我们不愿意花大段的时间在网页中分析摘取信息。
犯错惩罚非常底 和高考、犯罪相比,这种点错一个链接所带来的错误惩罚简直可以说是没有,甚至远不如忘记 ctrl+s 造成的影响大。 有统计表明,浏览器中使用频率最高的按钮是后退(back),也就是说一次错误的选择和点击,其犯错成本就是一次额外的后退点击,
权衡的收益底 相对的,权衡分析的收益底,权衡分析所带来的收益有时可能和几次错误点击是等效的,而分析花费的经历和时间要远超盲目的点击,所以收益成本底的情况下,没人会愿意认真阅读然后分析,更何况可能有些页面的糟糕设计会让你的分析毫无卵用。
试错的收益高 更讽刺的时,试错的惩罚低,但是收益高。几次错误的点击后就能获取满意的答案,这种正向的反馈严重的刺激了用户,没记错的话在心理学上称作正反馈,正反馈是刺激学习和习惯养成的有效手段,通常动物园训练动物,或者你训练宠物,幼儿少年的成长学习都是靠正反馈的激励进行的,这种效应作用在用户身上,更加深了试错式使用的习惯。
我们从不在乎真相/真理,我们不过乌合之众
我还是比较喜欢原句:We don't figure out how things work. We muddle through. 我这样翻译确实携带了很多个人色彩,甚至有些过激,不过过往的经验确实映证着这点(比如现在进行着的疫情,感动、谣言等各种事件)。
当我们一旦找到事件的解决方案后,我们通常不会去寻找更好的方案替代,也不会去理解摸清方案的来龙去脉,这是大多数人及大多数技术人员的通病。我们只是在解决问题,我们只是问题解决方案的搬运工,而且我们搬过来的还不一定是最好的方案。
段落小结
这是整本书对我触动最大的地方,同样我也夹带了很多个人情感和理解,重新梳理和复述了关于 Web 使用者的一些特点。这不是说用户有问题,这只是客观现象,我们需要接受尊重并顺从,顺从使用者的思维方式,才能做出体验更好的页面。
为扫描使用者设计网页
上文已经提到了两个关键的观点:
- 网页要能够自我解释,足够清晰,减少使用者的思考成本。
- 使用者通常只是扫描,试错。
本段落将重点说明如何让页面更清晰的展示,更高效的使用。
沿用继成规则和交互
Conventions are your friends
使用广泛认同的交互规则(如下拉加载,左滑后退)是一个绝佳的方案,当然不可否认存在一批人他们认为公司雇佣他们不是为了重复一些旧有的事情,他们要做些不同的事情,他们要继续造轮子。对于这部分人有一点需要提醒的———你要清楚自己所造的轮子与自己要替换东西是否是等价的。简单的说经常有人自己实现滚动条,但是多数人看到的只是滚动条的外观样式,而忽略了原生开发者在滚动条性能优化上花费的精力和时间,如果你要替换滚动条势必要权衡其价值是否对等,同样你所花费的成本是否值得。
原文不否定创新的价值,但好钢用到刀刃上,这是原作者给出的一个有着不错创新的站点:harlem.org,站点用每个人的照片做超链接,点击后可跳转到相应人物介绍,同时站点保留了传统的文字索引列表,保证了创新点所不可替代的功能是有效可用的。
视觉层级关系
另一个可以让人第一眼就形成清晰认知的方案是,视觉层级关系(这部分在视觉设计也会讲到),视觉层级关系可以清晰的表达出页面中每一部分的关联关系。
三个要点
- 越重要的信息层级越高。
- 逻辑相关的元素放在同一层级。
- 可以通过嵌套表现层级间的关系。
对页面进行模块拆分
模块开分可以帮助用户聚焦,当用户进行扫描时,合理的模块划分可以更快更有效的帮助用户抓到关键信息点。
强调按钮
通常用户会在页面中寻找下一个可点击的操作,保证按钮展现足够明显,能够帮助用户快速进入下一个页面。
字体格式/排版
字体格式和排版相关内容会在讲视觉设计时占用大量篇幅讨论。
通常我们会关注的内容包括:相关的内容是否有效的聚合、段落之间的层级关系是否清晰合理、排版是否统一、重复和强调元素的使用。 这里不展开讨论。
省略不必要的寒暄和指南
大多数用户不会关注寒暄式的社交,同样多数人也不会静下来详细阅读操作指南。更好的方案是使你的网页是简单易用的,而不是依赖操作指南。 减少不必要的文字信息可以使页面简短清晰。
路标、导航、定位
如果把网页和真实街道对比,会发现网页的“路标”和实际街道的标识存在一定的差异。
与物理世界上路标的差异
无法感知规模/大小
和杂志、建筑不同,网页是无法感知规模和大小的,杂志看厚度可以知道大概有多少内容,建筑看面积就可以知道有多大。但是网页是通过众多的超链接拼接的,你无法明确的知道这个网站有多少页面,你也不知道自己浏览过的页面占整个网站多少比例,网站中始终会有些角落你关注不到。
没有物理意义上的方向 网页没有物理意义上的东南西北,上下左右,我们只能说页面滚动上的上下,或者层级关系上的上下。
没有可标识的位置信息 和物理环境不同,物理环境有明确的位置信息,对于熟悉的位置可以优化路径,但是网页没有这种感官上的概念。

导航
Web Navigation 解决了我们在 web 浏览时不知道自己的位置以及如何定位到目标位置的问题。
导航组成
导航通常由四个部分组成:站点ID(Site ID)、菜单栏(Section)、工具栏(Utilites)和搜索栏(Search)。
页面名称
每个页面都应该有一个唯一的名称。 名称需要在页面中显著的位置展示。


高亮
为标明当前位置可以使用高亮等方式。
面包屑
面包屑可以展现你当前所在页面的全路径。 面包屑通常置于页面顶部。 最后一个节点必须为当前页面,且名称需要一致,样式需要强调(高亮或者加粗等),不可点击。
标签页
标签页可以完美的切分视图。
标签页在使用上没有学习成本,据作者表述在众多的可用性测试中,使用者可能会不理解滚动条、导航栏的作用,但标签页是可见即可得的,和物理效应上的标签分割器一致,没有任何了解和学习的成本。
打开页面的第一感觉
通常所说的当你打开页面时,一般打开的都是首页,首页需要解答用户以下四个问题:
- 这个页面是什么。
- 页面里有什么东西。
- 页面能做什么,完成什么功能。
- 为什么优先展示这个页面。
传达首页信息
通常首页涵盖了三个组成部分帮助用户了解当前站点,分别是标语、欢迎词和了解更多。 其中标语(tagline)由为有说道。
标语
标语通常和站点ID 绑定在一起。

在一个站点中,站点ID是最引人注意的,标语和站点ID绑定将直接导致标语作为整个站点的诠释是最直观高效的。
选择站点标语时可以参考如下建议:
- 清晰并且蕴含信息的标语。
- 不宜过长,可适当长。
- 独一无二的标语更让人印象深刻
- 生动有个性。
清晰的入口
当清晰了站点作用后,需要清晰的告诉用户在哪里搜索,在哪里开始浏览。 最好的方式就是使入口看起来像入口,比如在搜索栏后面加上”搜索“两个字。
移动端设计
整体上移动端设计原则遵循桌面端,如果说差异的话,大概是移动端屏幕更小,用户阅读的耐心和时间更少。
移动端差异
移动端除了屏幕尺寸的差异外,最大的差异就是鼠标游标的问题,桌面端很多交互是通过hover
来提示的,但是移动端手滑玻璃不会触发这些交互提醒,因此在移动端交互中要找到一些替代方案,比如按钮按下要有阴影反馈。
同样移动端复杂的手势操作也导致另一个问题,是否易于学习和记忆,通常在启动App时会有一个新手指引,但多数情况下重新再找到这个新手指引是很困难的,所以要保证应用易学易记忆。

更多的约束和妥协
有时候约束是好事,比如你要买一个沙发,当约束你沙发要和你客厅的房型/装修能够协调时,这时候相比单纯买一个没有要求的沙发来说更加容易。
因为移动端屏幕尺寸的限制,将约束其只能作为桌面端的一个子集,一个好的折中点是移动端先行,首先在移动端完成最核心和重要的功能,然后再向桌面端迁移一个全量的版本。
个人偏好不是用户习惯
在可用性问题上,Web 团队通常很难快速决定方案,往往针对一个问题反复讨论。


上图漫画中因为个人偏好的不同,导致一个细小我问题反复沟通没有结论。
通常我们在工作时能很清晰的认识到我们本身也是用户,而作为用户我们有强烈的偏好,这导致我们通常会认为大多数人持相同的喜好。而实际上并非所有人都和你保持相同的喜好,甚至并非所有人都喜欢你。你的偏好不是用户习惯。
同样不同岗位或职能也有着不同的偏好倾向。


什么是大多数用户
There is no average user.
关于用户偏好的调查研究显示:所谓的大多数用户是不存在的,所有的网页浏览者都是相互独立,独一无二的。 对于大多数设计问题来说根本不存在绝对的正确,正确的工作是指收集分析需求,设计一个满足需求场景的交互,然后执行,测试,并反馈修改。这里不存在所谓的用户习惯。
可用性测试的重要性
如果你想让自己的页面/站点更优秀,可用性测试是不可避免的。人们通常以各种理由拒绝可用性测试,比如人力、资源、成本、效果收益、测试范围、测试方法等等。通常这些都只是借口。
测试一个用户就比不进行可用性测试要强 100% 即使是错误的测试方法,错误的测试人员,也能暴露出需要你改进的问题 越早进行测试越好,刚开始时就测试一个人,要比快结束时测试五十个人收益高 有些人认为可用性测试是个重量级的事,这种想法只会让问题积压的更多,尽快投入尽快解决问题
最简单的性能测试你不需要任何设备录像,不需要任何办公环境准备,不需要特别的测试人员,你只需要找同组或者同事帮忙使用,你只需要坐在一旁观看,然后记录一些使用的问题,同时尽量不要干涉用户,不要提示,观察然后记录即可。