全篇字数：10816字

阅读需用：20min

前几天在部门里做了一次分享，分享的内容是关于读过的一本书《web界面设计》，这是一本不算新的书，书里对于一些知识举的举例也还都是雅虎时代的例子，但俗话说的好：例糙理不糙，作者对于交互模式的总结、分析和解读在当下也被许多大企业借鉴，比如蚂蚁的ANTD部分设计原则就是基于此书，所以总的来说，这是一本可以一读的书。目前网上应该是买不到此书了，我也是脱朋友从学校图书馆里借阅了一本，用了一段时间阅读，这类书说实话，确实枯燥，不过对于从事交互设计的同学来说，应该说可以作为一本基础必读书目来看。

以下读书笔记：

引子

《web界面设计》是由两位作者 Bill Scott和Theresa Neil两位30多年web设计所总结出来的经验和最佳实践。

原理：（拉丁语：principium，法语：principe，德语：Prinzip，英语：principle）、原则或定律，是存在于某个系统中的一组法律、规则与基本前提。这个体系中的其他事物，大体上都可以经由这个基本规律来推导、解释与预测；这个体系中的成员，都应该遵守这个基本规律，在这套规则下运作。经由了解这个体系的原理，可以了解到整个体系的基本特征，或是反映出这个体系被设计的目的。如果这个体系下的某个原理被忽略，可能造成体系无法运作，或是这个行为将无法达成其目的。-wiki百科

模式：…当遇到某个反复出现的问题时，就相应解决方案的核心内容给出的描述…

设计模式：在软件工程中，对软件设计中普遍存在（反复出现）的各种问题，所提出的解决方案。这个属于是由埃里希·伽玛等人在1990年代从建筑设计领域引入到计算机科学的。-wiki百科

本次分享的内容就是web交互设计的模式，以及这些模式所依托的由作者总结出来的6个设计原理。

直截了当  简化交互  足不出户  提供邀请  使用变换  即时反应

这6个设计原理也是目前比较被大家认可的AntDesign所依托的设计原理，所以我们这里也同样结合Antdesign来看。

Antdesign所依托的设计原理一共10个，前四个出自《写给大家看的设计书》、后6个即出自《web界面设计》

直截了当

需要在哪里输入，就要允许在哪里输出。不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。目的是能更直接的相应用户的操作。

Axure和Sketch的目录编辑交互模式就符合这个原理，输入及输出，所见即所得，没有经过任何其他的页面过度，在此原理下，我们来介绍三种常见的交互模式：页内编辑、利于拖放、直接选择

页内编辑

故名思意就是在当前页内完成编辑操作，不用跳转到其他页面。包含了：单字段行内编辑、多字段行内编辑、覆盖层编辑、群组编辑、表格编辑、模块配置

单字段行内编辑

-  这里举知乎编辑个人资料的例子

单字段行内编辑  就是在行内编辑一个文本字段，是最简单的行内编辑形式，这种交互发生在原地而不是单独的窗口或者单独的页面。营造所见即所得的状态。

设计这个模式的时候，要考虑到两个要素：易读性和易编辑性

我们来看两个例子：

什么时候选用方案1、什么时候选用方案2 ？

方案1的优点是易读性较好，因为页面中没有干扰内容本身的其他元素，缺点是编辑模式的易发现性较差，因为要通过鼠标移动到字段上面才能发现编辑模式；方案2的优缺点刚好是相反，所以当易读性比易发现性重要时，选用方案1，反之，则选择方案2。

多字段行内编辑

多字段行内编辑，常见于表格的一行多字段编辑

1 视觉割裂感

显示模式和编辑模式模式之间往往需要不同大小的页面空间和布局，也会使用不同类型和数量的控件，因此显示模式和编辑模式之间就可能造成用户视觉上的割裂感。

解决这种视觉割裂感有两种方式：1 保证显示模式在切换到编辑模式的时候，显示模式的元素位置不动，如下图；2 利用动画的方式，来缓解这种割裂感，一般为淡出和淡入。（这个在后面的巧用过过渡的原理里也会提到）

这两种模式都是在页面内实现编辑，这样的好处是可以不脱离上下文。但有时我们会遇到很复杂的编辑模式，比如我们要通过日期选择控件，重新选择一个入住日期，那要在当前页面内完成的话，且不影响上下文，那就需要把下面的“酒店和关键词 以及搜索，下移，来给这个控件腾出位置” 这样会损坏页面的整体感，这时就可以采用覆盖层来实现，这样虽然会遮挡上下文中的一些元素，不过这些元素对编辑并不显得那么重要

覆盖层编辑

使用覆盖层编辑时，应尽量使用最轻量的样式，以减少显示和编辑模式切换造成的干扰。覆盖层编辑一般为一些特殊控件：如日历控件、日期选择控件等。

群组编辑

群组编辑这个最经典的例子莫过于iPhone的长按图标由正常显示模式进入编辑模式，但iPhone的这种编辑模式初次使用不易被发现，有一定的学习成本，我们平时也会遇到很多群组编辑的例子，比如刚刚说到的QQ个人资料卡的编辑。

这里我们要提到另一个原则叫 对称性交互原则；

对称性交互原则：进入和退出编辑模式通常应该同样的交互风格，这样有助于发现相反的操作。

我们看iPhone的例子 其实是不符合对称性交互原则的，因为它进入编辑模式是通过长按，而退出编辑模式是通过按home键，这种交互是不对称的，那按照对称性交互原则，编辑模式下，长按图标应该也会退出编辑模式，那苹果为什么没这么做的原因，是因为它把按压home键设计成了系统级的返回桌面的交互操作，而这个方式在用户的使用中也逐渐成为操作习惯。我们再看QQ的个人资料卡，其实是个很好的遵循了对称性交互原则，它进入编辑模式和退出编辑模式的交互位置和方式是相同的，这样就很大程度的降低了用户的认知成本；平时也会遇到很多的对称性交互原则的例子：

比如：Axure的目录编辑，用户能进行行内编辑，所见即所得，输入输出保持了高度一致。

拖放

拖放操作，在Antdesign里给了两个示例：1 拖放列表  2 拖放图片/文件

但其实我们平时使用计算机的过程中会发现很多其他的拖放的身影：

拖放模块：

重新排列页面上的模块，注意鼠标移动到画板上的交互邀请，以及拖动画板离开原位置的虚线框和触发第二块画板自动填充第一个虚线框后留下的攻被拖放花瓣放置的虚线框，这其实也是一种邀请，这里我们讨论一个问题：到底以哪个位置来确定拖动模块的

- 这里举花瓣网拖放画板的例子

花瓣网个人画板拖放模块操作

在拖放模块设计的时候，要考虑到拖放的过程中过程瞬间，根据不同的场景选择合适的拖放触发位置，如下图的：1.被拖放模块的边界；2.鼠标的位置；3.被拖放模块的中心

拖放模块示意图

拖放列表：

重新排列列表项的顺序，这里也要注意一些交互邀请。

滴答清单拖放列表示例，限定在一个维度上进行拖放

图为GIF，加载可能会有点慢。

拖放对象：

改变对象间的从属关系，拖放目录到被放置目录上的交互瞬间，解释层级关系的改变。Axure采用的是插入条，道理相同，Google Drive没采用目录拖放邀请的原型可能是目录的拖放操作已经培养成用户喜欢，或者是用户想去改变目录结构的时候，给予他正确的反馈。

google 云端硬盘拖放目录，GIF加载会有点慢

拖放操作：

在被放置的对象上执行操作

QQ拖放文件

拖放集合：

通过拖放操作集合

举一个不算太合适的例子：eagle

将网页图片通过拖放集合到eagle后，再进行整理处理

直接选择

就是允许用户选择对象，然后为对象应用操作。我们平时工作比较常见的几种选择模式：

切换选择：

基于复选框的选择

集合选择：

跨越多页的选择

对象选择：

直接选择对象

我这里举一个例子，大家就知道这三种选择模式分别代表什么了

左上是对象选择 、右上是切换选择、下面是集合选择

我们现在通过三个邮箱客户端来分别对比一下这三种选择：QQ邮箱、Gmail、某企业邮箱

对于切换选择和对象选择，这三个系统方式都是相同的，通过切换选择复选框来选择多项，对象选择是打开邮件，这里面我们来看这三个系统在选择全部集合选择上差异：

QQ邮是提供一个全选复选框+选择当前页还是选择全部提示；

G邮是提供一个全选复选框+选择当前页还是选择全部提示+全选复选框下拉提示；

某企业邮是提供一个全选复选框+全选复选框下拉提示；

下拉是一个不易被发现的交互模式，所以某企业邮是三个系统里 集合选择模式上做的最不好的。

简化交互

简单点理解就是让用户执行某个操作时更容易，这里引用费茨法则，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。这个法则其实很好理解。球门越大，越容易踢进去，距离球门越近，越容易踢进去。

我们首先来看三张图：桌面客户端产品、GOOGLE、QQ邮箱

第一个是最常见的桌面客户端型产品Word，可以看出内容区和功能菜单是完全分开的两个区域，用户要么先选择一种工具，要么先选择一些内容对象，然后再用相应的工具来操作数据。

（这里我要推荐下Markdown，最近已经完全爱上这种编辑模式，有兴趣的体验就就知道了）

早起网站如Google等则是完全以内容为中心，简单的浏览或链接到其他的页面，用不到太多的工具，而随着web的成熟，越来越多内容和功能混合的站点涌现，就如同邮箱系统一样。

那当前的话题就是要考量这种站点的用户界面要如何设计？

我们前面说到费茨法则，距离越近，目标越大操作越容易，那这个近到底近到什么程度才能算近呢，iPhone的用户界面给了我们答案，内容即界面，无需划分功能区，每个对象都可以直接操作。

怎样才能使功能更贴近内容，从而简化交互呢？

这里我们提出一个名词叫上下文工具

上下文工具

上下文功能其实你可以理解为桌面右键菜单的web版。不过并不是让用户通过右键显示菜单，而是可以通过内容在上下文中显示相关工具

我们首先能想到的第一点是不是把重要的操作直接放到界面中，并实时可见。

实时可见工具：

把上下文工具直接显示在内容中

- 这里举知乎的例子

这里为什么不把赞同/不赞同 隐藏起来，等到鼠标悬停再出现呢，因为这个功能是知乎这个网站的一个核心功能，必须始终显示以明确邀请用户参与。

实时可见工具的一个最大的好处就是易发现性，但是在另一方面也会导致页面看起来比较混乱，那我们来看看一些知名的web站点是怎么处理的？

这里主要对比三个邮箱的加星标操作的差异

星标的位置和重要程度的不同，可能是考虑到用户群体的差异，Gmail和163面向的商务群体比较多，星标邮件对于这类群体来说是个很重要的功能，所以将其提至页面视觉的前部，而QQ邮箱面向的群体可能偏学生多一点，所以星标邮件功能就不是那么重要的功能，所以放在视觉末端去显示（个人观点，欢迎辟谣）

这里补充一点几个邮箱的差异：Q邮和163的菜单（删除操作等）是实时显示的，而Gmail采用的是选择后出现，孰优孰劣，也要视业务场景和用户群体特征去判断，单从内容和交互体验来看，Gmail的方式 我比较喜欢。

悬停即现工具

如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。

这个大家再熟悉不过了，这样做的目的是为了减少视觉干扰，将非主要操作先隐藏起来，按需出现。

- 这里举百度网盘和Google Drive的例子

百度网盘的悬停即现工具 Google云端硬盘

分析百度网盘悬停即现 下载 分享快捷操作，而Google Drive没有采取悬停即现的原因？

开关显示工具

这种模式也很常见，如果操作并不是主要目的，但又想用户直接操作界面来提供方面，可以通过开关来实现，某些操作只需要在特定模式时显示。

这里QQ个人资料卡 是个反例，虽然保证了编辑和完成编辑交互的对称，但两个模式的切换却出现了页面元素的晃动。

级联递进工具

首先拿Gmail举级联递进的例子，说明级联递进是什么意思。

下面对比QQ邮箱和百度网盘还有Gmail的例子，选中某一个对象后，才出现相应的操作和相应的操作一直显示的差异。

在可能的情况下，应尽量避免级联，因为为了使用下一级菜单而执行过多的鼠标操作，很容易让用户反感。

二级菜单

二级菜单就相当于桌面程序的右键菜单，当然也不局限于右键，MAC在DOCK上按住鼠标1秒钟也会呼出菜单，但在web中要慎重使用，因为二级菜单以前在web上并不常见，主要原因是因为会和浏览器的右键菜单冲突，所以用户这种操作习惯并没有被培养出来，所以在使用二级菜单的时候，应该是把一些替代性命令或者快捷方式放在其中

交互中的工具

如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。

- 这里对比Antdesign和QQ个人资料卡 复制QQ号的优劣

首先用户想复制一个东西，他首先想到的是系统级的复制，即选中数字 右键复制，当用户在执行这个意图的过程中，你通过一些动态邀请，提供给了用户一个更快捷的操作，会增加用户对产品的喜爱。而QQ这里的快捷操作，在首次使用时 是有一定的认知门槛的，用户如果执行传统的复制操作，则不会发现此功能，所以在传统的用户心智模型的基础上，Antdesign的设计方式要更优一点，因为用户的心智模型弥补了不易发现性。

可视区域≠可点击区域

这个其实就是扩大可点击视觉原色的可点击区域，以此来简化交互，遵循的费茨法则。

足不出户

能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化视盲（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。

这里说到两个词：心流和变化视盲。

变换盲视（Change Blindness） ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》

心流（Flow） ：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》

运动员要去培养快速进入心流的能力。

其实通俗一点讲就是：能在这个页面解决的问题，就不要去其它页面解决，以此能创造连续视觉感知的心流境界，其实就一个词：视觉连续性

那为达到这种视觉连续性，避免页面的跳转，有4中我们常见的模式：

覆盖层、嵌入层、虚拟页面、流程处理

覆盖层

覆盖层大家再熟悉不过，覆盖层的好处：

1. 轻量  不占资源、显示速度快

2. 覆盖层由web控制而不是浏览器控制，这样设计人员就可以从外观上使覆盖层与界面很好的融为一体。

我们平时遇到的覆盖层有：对话框覆盖层、详情覆盖层、输入覆盖层

对话框覆盖层

先举例：模态覆盖层和非模态覆盖层

模态覆盖层就是你必须要和当前的覆盖层进行交互 才能返回应用程序；

非模态则是允许用户在不处理对话框的情况下 可以操作页面被的其他内容。

我们从一个简单的操作：删除  来看这两者的区别和应用场景

印象笔记的 删除 ，在删除笔记时，用户是需要通过右键 选择删除操作的，完成这个操作，用户需要付出一定操作成本，所以这里不需要确认删除的对话框。那我们再看印象笔记删除笔记本的操作，这里印象笔记弹出了一个确认删除的对话框是为什么？因为删除一个笔记本对用户造成的损失要远远大于一个删除一个笔记带来的损失，所以这里会有二次确认。

我们再看淘宝购物车的删除，淘宝使用了一个模态的确认弹窗，为啥？

因为你购物车里的东西，会极大可能转化为交易，所以淘宝当然希望你不删除购物车里的东西了，这是业务层面的考虑。

像删除这种操作的二次确认的对话框，应该勇敢的让用户去尝试，给用户撤销的机会，当执行某些无法撤销的操作时，可以使用轻量级的非模态弹窗，应尽量避免使用模态的二次确认弹窗。

Antdesign给我们举了很不错的例子：

输入覆盖层

在覆盖层上，让用户直接进行少量字段的输入。

这个一般用于表格或列表的名称修改比较多，用户可以直接通过一个小的气泡输入覆盖层，来修改编辑信息，而不是弹出一个带有亮盒效果的对话框覆盖层

详情覆盖层

一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。

这里我们再对比QQ邮箱、163邮箱、Gmail、阿里企业邮箱，其余三者均为点击邮件跳转新页面查看详情，而阿里企业邮则是在右侧滑出一个覆盖层用以显示邮件详情。这样的好处显而易见，可以在显示部分邮件列表内容的情况下，快速切换查看邮件；

阿里企业邮-利用详情覆盖层显示邮件信息

详情覆盖层的例子还有很多，比如豆瓣的电影详情，鼠标悬停在电影海报上 0.5s会弹出一个详情页，以便用户快速查看影片信息，这里的重点是0.5的悬停延时，如果没有这0.5s的悬停延时，要么用户无法发现详情覆盖层，要么就是页面会显得特别闹腾。

豆瓣电影的详情覆盖层

嵌入层

顾名思义 就是将信息直接嵌在页面中，平时比较常见的就是列表嵌入层、详情嵌入层和标签页

列表嵌入层

在列表中，显示某条列表项的详情信息，保持上下文不中断。

使用列表嵌入层时，应保证嵌入层的内容高度不要太高，否则会影响体验。

以上为什么QQ阅读订阅的嵌入层展开内容高度很多，却还要采用嵌入层的模式，因为QQ阅读列表提供的内容已经相对来说比较丰富，用户可以判断是不是对内容感兴趣才会打开，这时候阅读的视觉连续性就比较重要，但是也要考虑到用户误触等非意愿打开的情况，这时我们在交互上要做的就是 提供一种简单快速的关闭打开模式的交互，这里我认为QQ订阅列表的关闭列表的交互热区应该可以考虑适当扩大一点，按照费茨法则，这样可以简化交互，给用户带来方便。

详情嵌入层

顾名思义就是把内容详情直接嵌入页面中，和前面提到的详情覆盖层类似，使用详情嵌入层也要考虑到内容信息的多少。下面我们来看一个例子：

安居客房子信息列表的页面，其实可以将房子的照片等能促使用户对房子发生兴趣的因为嵌入到当前页面中，以方便用户快速的对房子有个大体的印象。

有时候我们可以使用详情嵌入层在上下文中显示详细信息，且不会遮挡其他信息。

标签页

这个大家再熟悉不过，将多个平级的信息进行整理和分类了，一次只显示一组信息。

这里需要注意的是，通常情况下 是使用鼠标单击来切换标签，当几个标签页内容同样都很重要的时候，通过悬停切换。

尽量避免在同一个页面中使用多组标签页，如果无法避免，那就讲次级的标签页样式在视觉上设计的更轻量化。

一般情况下，标签页的前两个用户点击率较高，所以要将重要的信息放在前两个标签页。

虚拟页面

通过内置分页、滚动加载、等方式创建一个看起来很大的页面，而不用跳转页面。

虚拟页面的模式主要包括：虚拟滚动、内置分页、滚动分页、虚拟摇摄、伸缩式用户界面

这里我们主要来讲前两个：

虚拟滚动

其实就是我们现在讲的瀑布流。用户可以通过滚动无限的看到内容，在一个页面内面内保证视觉连续性，查看更多的信息，比较典型的瀑布流：花瓣网、知乎

花瓣主页瀑布流

内置分页

其实就是翻页控件，让用户觉得不是页面切换而只是内容切换，这个太常见。

这里抛出一个问题：为什么淘宝、百度、谷歌不采用瀑布流？

首先对于淘宝这种电子商务网站采用瀑布流设计，我认为会很大程度的影响到购买成交量，因为用户会一直被无限的产品诱惑这不断滚动鼠标，而不愿意轻易点击，浩如烟海的产品虽然会让用户感觉到产品很丰富，但很快用户将意识到他很难做出选择，他们会认为最好的还在下面，这实际上破坏了用户的自我控制和选择的感受，反而会导致成交率下降。

因此，电子商务网站应放弃瀑布流布局设计，并要做好页面长度的控制，太长反而会让用户感到疲惫，并且，请为用户留下页码。

对于像百度和谷歌这中搜索引擎网站，据调查用户在首页找到相关内容就跳转走的概率是94%，只有6%的人会翻到第二页，另外用户使用搜索引擎是渴望快速找到自己想要的答案，而不是渴望看到更多的内容，还有就是分页可以帮助用户确定最佳搜索结果的位置，而瀑布流就不可以，用户再一次寻找最佳答案时，就会很懵逼。

对于内容的无限加载，有时也会让用户感觉过载，造成视觉疲劳，所以我比较喜欢简书的处理方式：3页瀑布流+1页分页，给用户选择的权利，简书还有个好处，就是可以在分页的状态的时候，看到页脚的信息…

滚动分页  虚拟摇摄  伸缩式用户界面

走马灯、google Maps的地图拖动、图片/页面等的放大缩小

前者用的比较多，后两者用的比较少

流程处理

前面几个话题讨论了足不出户原理的几种模式，长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。

下面来实际体验一下：亚马逊、淘宝、京东、天猫商城、天猫超市的购物体验：

（因为录制的GIF尺寸太大，无法上传，可以实际操作体验）

从上我们可以看出，亚马逊、淘宝、京东 三个采用的流程是差不多，将流程步骤分页展示，这样用户购买多件商品的体验就像折返跑，体验不好，再看天猫商城和天猫超市采用了讲购物车设计成一个嵌入式部件，随时都可以往里添加商品，而不会中断用户的购买流程；哪种体验更好：当然是后者，但前者的分页流程也是有一定的好处，那就是可以通过推荐其他商品（附加步骤）来增加销售额。这样从业务角度和用户角度来看，天猫超市的设计是比较合理的。其次是天猫商城。

流程处理的方式还有很多，比如交互式单页、嵌入式部件、还有弹出式的覆盖层，虽然这种方式会打乱用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。

提供邀请、巧用变换、即时反应、待续…

以上为《web界面设计》前三个原理的读书理解，可能会有一些地方理解不合理的地方，还望批评指正。

文章最先发布于我的个人博客：xdoupd：一个交互设计师的博客