《通用设计法则》读书笔记

博客分类: 设计 阅读次数:

《通用设计法则》读书笔记

概述

近期学习了《Universal Principles of Design》(又名《通用设计法则》)这本书,该书是一部跨越各专业领域的设计著作,详解常用设计概念,配以图示实例,帮助设计师快速吸收宝贵经验,避免致命错误,开启更多、更好的沟通与创意。

本文主要从交互设计的角度出发,选取其中部分最相关的设计法则,分成六大类(清晰、一致性、高效、少即是多、别让用户思考、给用户控制感),辅以当前工业界已存在的产品交互界面示例,进行详细综合的解读。


1.清晰


2.一致性


3.高效


4.少即是多


5.降低用户负荷(别让用户思考)


6.给用户控制感


清晰

信噪比原则

信噪比指的是,同一显示中相关信息与不相关信息的比例。

能达到最高信噪比的设计最为理想

最优信噪比的实现包括 信号最大化噪音最小化

信号最大化 指将信号递减降为最小,强调信息的关键方面,使用合理的信息表达方式。

噪音最小化 指去除或减少不必要的干扰元素,适当使用设计元素。(如表格中的分割线可以淡一点)

2

苹果官网的介绍页中,没有任何多余的元素,高清图片+介绍文字,能让任何一个到达此页面的用户清晰快速地了解产品信息。

80/20法则

在所有大系统中,高达80%的效果是由仅占20%的关键因素决定的;产品80%的使用只使用了20%的功能。二八法则有助于资源的整合,因此可以提升设计的最大化。

1

Gmail的邮件类别中,直接显示的只有人们最常使用(80%)的其中的几个类别(20%),要显示其它类别需要点击更多标签展开。即使纵向空间足够展示所有类别,但Gmail选择将不常使用的类别隐藏起来,从而聚焦于最常用到的类别。

分类法

分类法是把信息按照不同的类别分类,需要时呈现相关信息。分类法主要是为了管理复杂的信息,也可以用来加强信息之间的关系。

分类法主要分为二维分类法和三维分类法。

3

淘宝首页的分类

4

淘宝搜索结果页的分类

格式塔原理

格式塔理论和研究述及了这样一个观念,即人们的审美观对整体与和谐具有一种基本的要求,视觉形象首先是作为统一的整体被认知的,而后才以部分的形式被认知,也就是说,我们先“看见”一个构图的整体,然后才“看见”组成这一构图整体的各个部分。格式塔原理有几项基本法则:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运法则。

接近性

接近性法则主张靠在一起的元素会被视为一组或一个模块,因此,比起分开较远的元素,紧靠的元素会被视为有关联性。

5

Airbnb的输入组合符合接近性法则,用户能够感知到搜索按钮是和前三个输入框是有关联的。

相似性

如果其它因素相同,那么相似的物体看起来归属于一组。

6

阿里云的云计算产品功能图标形态具有相似性,表示它们之间是相关的。而选中的那个用蓝色标亮,则又与其它未选中的区分开了。

连续性

视觉倾向于感知连续的形式而不是离散的碎片

7

列表的应用中会添加分割线使得 【行】的连续感变强。若没有分割线,根据接近性则知觉会更倾向于意识到【列】。

封闭性

视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

12

APP常用的汉堡菜单展开后右边会留一部分上一个页面的图,由于知觉上的封闭性,人们会很自然地认为右边的页面被覆盖住或者被推到右侧去了。

对称性

对称是美最基本最持久的元素。在设计时,可利用对称传达平衡、和谐及稳定的信息。

主体/背景 原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素,其余则是背景。当物体重叠时我们习惯把小的那个看成是背景之上的主体。

共同命运

往同一方向一起移动的元素,会被视为一组或一个模块,而且元素之间会被认为关联性更强。

易读性

主要通过合适的字号大小,字体、颜色对比、间距、和对齐方式来保证易读性。

8

新闻资讯类网站常常内容繁多,网易新闻则处理得很好,通过字号的对比,合理的行距,将最重要的新闻用最大字号放在中间板块,很好地突出了重点,能让访客以最快的速度获取最重要的信息。


一致性

系统相似的部分用一致性的方法表现时,能更好地改善系统的使用性。一致性能让人有效率地把知识运用到新的情境,并能快速学会新事物。一致性分为视觉一致性和操作一致性。

视觉一致性

相似的或者相关的视觉元素表现为相同或者相似。

操作一致性

相同或相似的行为在界面交互上表现为相同或相似的操作形态或操作序列。

9

相同功能的按钮在视觉上保持一致性。

25

同一个网站的不同页面间保持结构上的一致性,有助于用户快速认知和操作。


高效

好的交互设计表现之一是 用户能够高效地完成任务。主要可以通过 形式服从功能、 直接操作法则、和渐进式引导提高用户的使用效率。

形式服从功能

形式服从功能指的是形式不独立于功能而存在,体现在界面设计上就是功能与可用性优先、设计师应该处理好形式与功能之间的平衡。

20

Confluence产品页面与其官网页面有着形式上强烈的差异,官网页面形式上更具有美感。原因是其产品承载的功能众多,且对效率的要求高,形式上的美感则相对削弱。而官网作为产品兜售区,则更需要视觉上的美感来吸引用户。

直接操作法则

直接操作指的是在一个过程中通过用手指、鼠标或其它扩展意义的“手”等来选择数字对象,然后可以操作对象,如移动、旋转、拖拽到回收站、改变颜色的。其核心是【需要在哪里输出,就要允许在哪里输入】,即支持直接在上下文编辑。

21

直接操作实现了 所见即所得 的效果。

渐进式引导

引导主要用在两个阶段,一个是当用户初次接触新产品的的时候;另外一个是当产品更新了新功能希望用户知道的时候。


少即是多

少即是多的核心在于移除非必要元素来降低复杂度,从而达到最高的使用效率和使用体验。

功能性与使用性的取舍

该原则的核心在于:系统的多功能性增加,使用性则会相应降低。

一般认为,设计的功能性越强大越好。然而多功能性设计需要在设计复杂性、使用性、时间及成本上都要付出很大的代价。

多功能性与使用性的取舍,牵涉到权衡两者在设计中的相对重要性。当购买者明确自己的需求时,尽量用定制化设计有效满足其需求,当他们不清楚自己的需求时,要用多功能性设计来应付未来应用的最大可能范围。

需求的等级

需求的等级由下到上分为:功能性需求、可靠性需求、使用性需求、熟练度需求、创意需求。“需求的等级”指出,设计在满足高级需求之前,必须先满足基本的需求。

逐级展开(需要时出现)

逐级展开是一种处理复杂信息的策略,即只有在需要或是要求的情况下,才会显示资料。

13

表单填写时的提示是一个很好的逐级展开的例子,只有当前输入框被激活时,才出现输入提示。

19

邮箱列表中默认只显示【刷新】操作按钮,只有当选中了某些邮件时才会展开【删除】【归档】等操作按钮。帮用户从过多操作按钮的界面中解放出来。


降低用户负荷(别让用户思考)

效能负荷

效能负荷是指为了达成目标,身心投入的努力程度。如果效能负荷高,执行的时间与错误会增加;效能负荷低更容易成功完成目标任务。

效能负荷主要包括:认知负荷与操作负荷。 在界面设计中主要通过降低用户的认知负荷和操作负荷来优化设计。

菲茨定律

目标越小,距离越远,移动到目标定位点的时间越长。界面设计中,主要体现在目标操作元素的位置和大小上。

除此之外,还可以将目标放在屏幕的边缘或角落上来使其更容易被选中。

14

Windows的任务栏和Mac OS 的Dockbar 都默认放在屏幕底部,Windows的菜单按钮放在屏幕左下角,为“无限可选中区域”,都是为了常用功能更容易被选中的设计策略;

阿里云首页的【免费注册】按钮比其它功能入口按钮更为大更为明显,作为CTA按钮,一方面是吸引注意力,另一方面也是方便选中,有助于提高转化率。

席克定律

当选项增加,做决定的时间也增加

17

当选项过多时,常常采用 推荐策略 和 分组策略 以减少用户做决定的时间。

辨认比回想重要

人们辨认曾经经历过的事,比回想记忆中的事更容易。是因为辨认过程为记忆提供了线索,有助于穿梭记忆搜索。

10

常用的搜索工具,激活输入框时,都会有历史记录下拉框出现,减轻用户的记忆负荷。

心智模型

心智模型的理论是基于一个试图对某事做出合理解释的个人会发展可行的方法的假设,在有限的领域知识和有限的信息处理能力上,产生合理的解释。心智模型是对思维的高级建构,象征了主观的知识。

设计师在设计时,要考虑普通大众的心智模式,如果使用某件东西时,已经有一个标准的心智模式,设计师必须试着先达到那个模式的标准。

11

常见的电商网站的购物车、文件系统的文件夹、回收站等都考虑到了用户的心智模型。

购物网站的购物车与在超市用的购物车相对应;回收站的垃圾桶标识,当清空回收站时,会变成空垃圾桶;当文件夹里面有文件时,文件夹也中间也会有文件缩略图,也很好地反映了“文件夹”的概念。


给用户控制感

产品使用中,要给与用户控制感而不是挫败感。给用户控制感能够使用户的情绪保持在一个积极的状态,进而提升使用效率和使用体验。

功能可见性

当系统状态与使用方法清晰可见时,就能提高系统的可用性。设计的系统要能清晰显示系统状态、可以执行哪些功能,以及完成运作后产生的结果。

包容性

设计应该能让人避免错误的产生,而且当错误真的发生时,能把负面影响降成最低。

把包容性纳入设计的常见策略包括:

良好的功能可见性、撤销、确认、警告和帮助。

16

图为电脑设备状态栏和浏览器下载状态栏。状态栏不应太占视觉空间,但又能清晰显示系统当前状态。

15

编辑的文档在退出时会弹出确认框,减少误操作而关闭带来的失误,软件的自动保存设置也规避了因为意外而未手动保存导致文件丢失的风险。

18

提供【撤销】让用户从错误中恢复。

23

当发生错误时提供错误信息和帮助。

忘我状态

一种专注的心智状态,忘记对周围真实世界的感受,通常会带来喜悦或满足感。

一般在界面操作流程中,用户都不希望自己被打断。

24

若非必要,避免过多使用模态弹窗,使用轻量级的提示,避免让用户感觉自己的操作被打断;

用户做出的操作应该立即给出相应反馈,避免让用户等待。

适当约束

在交互设计过程中合理设置限制因素,与给与用户控制感并不是相违背的,相反,合理加入限制因素能够防止用户误操作、保证交互行为得以顺利进行。

22

如前进后退按钮,当在第一页时,后退按钮禁用置灰;

微博的发布按钮,当为输入任何文字时,发布按钮不可用;

合理的约束能减少用户一些不必要的操作,提高输入的正确性。


总结