《web界面设计》读书笔记

六大原则

直截了当:在哪里输出,就允许在哪里输入。让用户直接对对象进行操作,所见即所得。

简化交互:减少操作步骤,缩短交互流程,简化功能层级。根据当前的情境显示合适的界面元素。

足不出户:在当前页面完成操作,减少页面切换,更好保持上下文。

提供邀请:增加功能的可发现性,引导用户进入下一交互层次。

巧用变换:动画过渡的形式,暗示关联性,增强趣味性、增加与用户的沟通。

即时反应:及时响应用户的操作,提供反馈、建议等,防止用户出错。

直接了当

一、页内编辑

what:

在页面中或者使用浮层直接编辑,不用新开页面或弹窗,减少跳转。浮层可以提供更加复杂的编辑器,如日期选择。

一般会有一个操作(按钮、双击等)进入编辑状态。

how:

进入编辑状态的方式,需要给与用户提示。

对称性原则:进入和退出编辑模式应当采取同样的交互风格。

让编辑状态与显示状态平滑过渡。

覆盖层可以同时对多个字段同时调整。

只要可能,应当允许用户拖动覆盖层,以便查看被遮住的内容。

why:

减少页面跳转,可以不脱离上下文,在编辑过程中可以为用户提供参考。

所见即所得,修改后可以立即看到结果,更加直观。

二、利用拖放

what:

利用鼠标拖放可以更改位置、排序、从属关系、分组、对被放置对象执行操作(如删除)。

how:

让用户知道哪些可以拖动、那些不能拖动。

拖动过程中给予视觉反馈,告知可以放到哪里以及拖动后的效果。

why:

直观、便捷、自由度大。

三、直接选择

what:

多个对象时,可以直接点击对象选择部分对象,或者点击按钮/框选全部对象,之后批量进行操作。

how:

区分选择与未选择状态。

提示选择的数量。

支持shift/Ctrl键的多选。

简化交互

四、上下文工具

what:

就相关联的内容放到一起,同时对应的操作放在内容旁边,方便用户操作。

how:

将工具和内容放到一起,让人知道二者之间的关系。

鼠标悬浮显示操作,注意操作部分与显示部分的遮挡关系。

通过开关进入编辑状态,在内容旁显示操作按钮。

双击/右键单击对象显示更多操作。

why:

不同点击内容之后再进去一层才能操作,层次更加扁平,操作流程更加简单。

使用悬浮/开关进入编辑状态,页面显示会更加简洁、清晰。

足不出户

五、覆盖层

what:

通过点击/悬浮激活浮层形式,更加轻量。可以展示操作、详情等。

how:

使用亮盒效果(即周围变暗)突出内容。

注意遮挡对于当前操作和下一步操作的影响。

六、嵌入层

what:

从当前区域挤出一块临时的内容空间,可以执行操作、查看详细信息(如列表中的更多信息,通过点击后行高增加来显示)等。

使用标签页的形式并列放置多项主题的内容。

how:

打开与关闭操作应该保持对称性。

将重要内容放在第一个标签页,许多用户可能不会查看其它标签页。

七、虚拟页面

what:

每页加载一定数量的内容,分页加载,分步显示。

how:

下拉过程中逐步加载/翻页控件/拖动过程中逐步加载(如地图)。逐步加载可先显示占位内容,再显示加载后的内容。

使用上一步/下一步的传送带模式,分屏展示。

还有一种就是类似prizi模式的,先看到一个全貌,可以无限放大进入更细节的页面。

why:

当前页面可以显示大量的内容,创造了一个无尽显示空间的感觉。

八、流程处理

what:

魔法原理:能否通过某种魔法来帮用户完成任务。跳过技术驱动的制约。也就是用户目标是什么,如何直接达成目标。让任务完成的流程符合用户的思维方式。

how:

交互式单页:组合筛选时,一个筛选条件的改变会影响其他筛选条件的值。

嵌入式部件:通过轻量的浮层来显示/完成附加步骤,不影响主线任务的流程。

对话框:使用弹窗来完成一系列分步任务,在弹窗中分页展示,不用整个页面都产生变动。需要给出当前位置的提示。

配置程序:实时预览不同选择的组合结果,及时反馈。

静态单页:从上到下按顺序排列任务,在一个页面内上下拖动完成,减少页面跳转。

单页适合步骤较少的任务。多页适合步骤复杂的任务。同时多页有助于人们聚焦于当前的步骤,上下文/前后页之间的联系比较弱。

提供邀请

九、静态邀请

what:

直接在页面上给出交互提示。

how:

引导操作邀请:将步骤列出来,告知用户需要几步完成操作;空白区域的提示文本;CTA(行为召唤)按钮;露出部分内容,提示还有更多内容。

需要在可发现性与干扰用户之间做出平衡。

十:动态邀请

what:

在用户交互过程中的某个点上吸引用户,并引导他们继续下一步操作。

how:

鼠标悬停是触发;拖动时提示可以拖动的元素以及可以放置的位置;推断人们的下一步操作,并给出提示。

why:

动态邀请的功能没有静态邀请那样直接、明显,但是可以减少页面的视觉干扰,适合于在某种时机下才需要使用的功能。

巧用变换

十一、变换模式

what:

通过变化来吸引、引导人们的注意力。

how:

加亮/减暗,让用户聚焦于某一块内容。

扩展/折叠,在用户交互过程中逐步显示更多内容。

动画效果,表明状态过程(如增加、删除、移动等),增强上下文联系。

变化的方式:滑入滑出、面板互换、翻转、传送带、折叠窗格、缩放、渐进显示。

十二、变换的目的

why:

增加吸引力;增进沟通,告知用户操作的结果、对象之间的关系,更好的保持上下文联系。吸引用户的注意力,更好地引导用户。

即时反映

十三、查询模式

how:

自动完成:输入一部分,系统给出可用选项,如同下拉选项中的可搜索。

实时建议:输入一部分,通过数据库给出常用的搜索建议,如百度搜索时的建议。

实时搜索:输入过程中及时展现结果,无需点击查询按钮。

微调搜索:搜索后对结果进行筛选。

十四:反馈模式

how:

实时预览:在提交输入之前就给与用户反馈,如输入邮箱,用户切换焦点后显示格式错误。或者密码强度的实时提示。

渐进展示:输入一部分内容后再显示与之相关的接下来的内容。如填写用户名后再显示密码输入框。

进度指示:显示任务处理的实时进度,如上传进度条、搜索时加载占位内容、文字输入时显示还可以输入多少字。

定时刷新:自动刷新内容。过于频繁会导致页面抖动剧烈,干扰用户。


参考:

Web界面设计 (豆瓣)