Appearance
人机交互
雷军曾说过互联网思维里最关键的两个点:第一是用户体验,第二是效率。
对于互联网产品来说,能否让一件事变得更快捷、更有效率,让用户完成一件事更快是最重要的检验要素。
1. 人机交互
人机交互(Human–Machine Interaction,缩写:HMI),是一门研究系统与用户之间的交互关系的学问。
系统可以是各种各样的机器,也可以是计算机化的系统和软件。人机交互界面通常是指用户可见的部分。用户通过人机交互界面与系统交流,并进行操作。小如收音机的播放按键,大至飞机上的仪表板、或是发电厂的控制室。
1.1 交互设计五大原则
从这些基本的设计原则中我们可以了解怎么去评价一个产品的交互设计,而不是总是停留在一些视觉设计的争论上,很具有现实指导意义:
1.1.1 诺曼设计原则(Norman‘s Principles)
诺曼集团提出。
(1).可见性(Visibility)
如果一个功能不能被用户所发现,那么这个功能肯定会给用户造成很多困扰,我在生活中一个比较典型的例子:现在很多电视或者投屏经常很难找到它的物理开关,以前在公司时就发现了公司的投屏就是这样,4、5 个人围着投屏转了一圈没有发现物理开关。
诺曼将良好的可见性描述为:“可以确定哪些操作是可行的以及设备的当前状态“。明确的关键要素(行为召唤按钮、图片和标题); 清晰的视觉层次结构(按优先级排列的内容); 显而易见的导航系统在设计中都具有良好的可见性和理解能力。
(2).反馈(Feedback)
反馈是系统对用户动作的响应,使得用户的操作可以继续下去。用户在没有得到系统及时响应的情况下会感到迷茫和不知所措。
诺曼将反馈描述为“某种让你知道系统正在处理你的请求的方式”。他还解释说,反馈必须是即时的,提供信息的,有计划的(以不打扰的方式)并且是优先考虑的。
(3).约束(Constraints)
约束的设计概念是指限制在给定时刻内可能发生的用户交互类型和方式,这能有效的帮助用户减少处理的信息量以及避免用户犯错。诺曼解释说:“物理,逻辑,语义和文化约束指导行动并简化解释”。
正如诺曼所述,约束的形式有多种,包括物理的、语义的、文化的和逻辑的。 每一项都可以帮助我们将注意力集中在一项重要任务上,并有助于减少人为错误的可能性。
物理约束限制了可能的操作;例如,鼠标光标不能移到屏幕之外。语义约束是可以在何处执行操作的线索; 例如,插座的含义是可以插入插头的位置。文化约束是一种社会习俗,比如排队等候服务。最后,逻辑约束有助于确定替代方案。 以滚动为例,这就使我们知道如何查看屏幕的其余部分。
(4).映射 Mapping
映射是控件与其对世界的影响之间的关系。例如,钳形机器上的箭头按钮对应于玩具抓取机械臂的运动。诺曼解释道:“当映射使用控件布局和被控制设备之间的空间对应关系时,很容易确定该如何使用它们”。
举个简单例子,不知道大家有没有这样的经历,在大学里大教室里去开或关特定的灯和风扇,经常有同学试了很多次才搞定。这就是一个典型的映射做的不够好的例子,开关的排列位置和所控制对象的实际物理位置并没有什么关系,导致用户对哪个开关对应哪个对象并不清楚,容易误操作。
(5).一致性(Consistency)
一致性是指将界面设计为具有相似的操作并使用相似的元素来完成相似的任务。 一致的界面设计是遵循特定规则,例如使用相同的操作选择所有对象。 举个例子,一致性的交互使用相同的输入操作来与界面上可视的对象进行交互,例如始终单击鼠标左键。 另一方面,一致性不高的界面会经常有规则之外的交互操作。
(6).功能可见性(Affordance)
功能可见性是指对象的感知动作和实际属性,可以帮助我们确定其操作。诺曼说:“功能可见性是指实体和人之间的关系”。例如,门把手或拉链的形状类似于其控制的形状。
以椅子为例,它的形状可以让你坐着或站着,还有一些椅子配有脚轮,可以推拉。而且,在发生火灾的极端情况下,我们甚至可能会将椅子的尺寸和重量视为打破窗户的机会。
应该指出的是,功能可见性取决于头脑中的知识(我们已经了解的)和文化相关性。如果没有这些特性,则对象的所需动作将更难以感知。以扁平化设计为例,新手用户可能不会立即理解某些视觉元素可以被操纵。
1.1.2 尼尔森十大可用性原则(Nielsen heuristics)
原则的提出者——人机交互博士:尼尔森(Jakob Nielsen)。
原则提出的背景——向 web 设计师传授易用性知识。
(1).状态可见原则
系统应始终在合理的时间内通过适当的反馈使用户了解发生的情况。
(2).环境贴切原则
系统与现实世界之间的匹配,系统应该使用用户熟悉的单词,短语和概念来讲用户的语言,而不是面向系统的术语。遵循现实世界的惯例,使信息以自然和逻辑的顺序出现。
(3).撤销重做原则
用户可控性和自由度,用户拥有控制权。用户可以自由的控制返回和去到的地方。(如前进、后退)
用户经常误用系统功能,所以需要明确标记的“紧急退出”的按钮以帮助用户离开不需要的状态,不需要通过额外的对话框。支持撤消和重做。
(4).一致性原则
一致性:同样的文字、状态、按钮,都应该触发相同的事情,也就是,同一用语、功能、操作保持一致。减轻用户负担,使用连贯舒服。
(5).防错原则
精心设计的系统比良好错误反馈消息更好,它可以从一开始就防止问题发生。消除容易出错的条件,或者检查条件,并在用户执行操作之前向其提供确认选项。
(6).识别好于回忆
通过使对象,操作和选项可见,最大程度地减少用户的记忆负荷。用户不必记住从对话框的一部分到另一部分的信息。在适当的情况下,系统使用说明应清晰可见或易于检索。
(7).灵活高效
新手用户不知道的快捷功能往往可以提高专家用户的使用效率,这样可以使系统可以同时满足经验不足和经验丰富的用户。同时允许用户定制频繁的操作的快捷功能。
(8).易扫原则
美观和简洁的设计,对话中的内容应该去除不相关的信息或几乎不需要的信息,突出重要功能。因为每个多余的信息都会分散用户对有用或者相关信息的注意力。
(9).容错原则
帮助识别,诊断,并从错误中恢复。错误信息应该用语言表达,较准确地反应问题所在,而非代码,比如 404。
并且提出一个建设性的解决方案,帮助用户从错误中恢复,将损失降到最低。如果无法自动挽回,则提供详尽的说明文字和指导方向,
(10).人性化帮助原则
帮助和文档,即使可以在没有文档的情况下使用系统会更好,但可能仍需要提供帮助文档。任何帮助信息都应该可以方便地搜索到,让用户知道如何解决,不致于茫然。以用户的任务为核心。
- 帮助文档应该方便寻找。比如放在显眼的菜单栏。
- 帮助操作应该易于理解。比如图文引导。
1.1.3 Petrie and Power 设计原则(☆)
英国约克大学的人机交互教授提出的设计原则:
(1).使文本和交互元素足够大且清晰
文字和交互元素的默认尺寸和常规尺寸应该要足够大,易于阅读和操作。(人因工程)
(2).清晰的页面布局
确保页面上的信息布局清晰,易于阅读且反映信息的组织逻辑。
(3).避免短暂的超时和显示时间
提供足够长的超时时间,以便用户舒适地完成任务;如果只能在有限的时间内显示信息,请确保它有足够长的时间让用户舒适地阅读。
(4).能够突出显示关键内容以及它们的变化
确保关键内容和交互元素在页面上清晰可见,并且在它们在页面上的变化也能也清楚地突出。
(5).提供相关和合适的内容
确保内容与用户的任务相关,并且内容合适措辞得当。
(6).提供足够但不要过多的内容
提供足够的内容(包括帮助),以便用户可以完成他们的任务,但不要让用户淹没在过多的信息中。
(7).提供明确的术语,缩写,避免使用行话
定义所有复杂的术语,行话并解释缩写。
(8).提供清晰,组织良好的信息结构
提供清晰的信息结构来组织页面上的内容,并帮助用户完成任务。
(9).如何以及为什么
为用户提供交互作用方式以及事情发生原因的清晰解释。
(10).清晰的标签和说明
为所有交互式元素提供清晰的标签和说明。请遵循一些设计惯例中的标签和说明规则(例如,表单必填项使用星号)。
(11).避免用户重复操作以及过高交互成本
当系统可以更有效地实现相同信息时,请勿要求用户多次提供相同的信息,也不要要求过多的努力。
(12).使输入格式清晰易懂
事先明确要求用户提供什么格式的信息。使用易于使用的输入格式,例如月份的单词而不是数字。
(13).提供有关用户操作和系统进度的反馈
在过程中,向用户提供其操作以及系统这个过程是否需要时间的反馈。
(14).使交互顺序合理
使交互顺序对用户具有逻辑性(例如,以欧洲语言为母语的用户通常在左上角到右下角浏览页面,因此请在右下角提供“下一步”按钮)。
(15).提供一组合乎逻辑的且完整的选项
确保任何选项集都包括用户可能需要的所有选项,并且该选项集对用户是合乎逻辑的。
(16).遵循交互惯例
除非有非常特殊的原因,否则请在交互中遵循常规的交互惯例(例如,在交互元素之间遵循逻辑制表符顺序)。
(17).提供用户需要和期望的交互功能
提供用户完成任务所需的所有交互功能,以及他们在这种情况下期望的功能(例如,是否需要搜索或提供搜索?)。
(18).指明链接是否指向外部站点或另一个网页
如果链接指向另一个网站或打开了其他类型的资源(例如 PDF 文档),请提前进行说明。
(19).应清楚地区分交互和非交互元素
交互元素应明确标明,非交互元素不应看起来是交互的。
(20).清晰,有逻辑地将交互元素分组
将交互式元素以及与它们关联的标签和文本分组,以使其功能清晰明了。
(21).提供有用的错误消息和错误恢复
提供错误消息,以用户的语言解释问题,并提供从错误中恢复的方法。
1.1.4 施耐德八项黄金法则(Shneiderman)
原则的提出者——人机交互创建者:本.施耐德曼(Ben Shneiderman)
- 力求一致性
- 允许频繁使用快捷键
- 提供明确的反馈
- 设计对话,告诉用户任务已完成
- 提供错误预防和简单的纠错功能
- 应该方便用户取消某个操作
- 用户应掌握控制权
- 减轻用户记忆负担
Question
以购买作者的这本书看看:《用户界面设计——有效的人机交互策略》
1.1.5 IBM 设计原则(☆)
是 IBM 为了获得基于网络产品的设计一致性及易用性提出的一套用户界面设计规范
- 简单:不可因过度追求功能而牺牲产品的易用性。
- 支持:让用户控制系统,并积极协助。
- 熟悉:基于用户已知内容做设计。
- 直观:对象及操作要做到直观、易懂。
- 安心:能够预测处理的结果,且操作可回退。
- 满意:可以在使用过程中感觉到进步和成就。
- 可用:总是做到所有对象可用。
- 安全:尽量不让用户在使用过程中遇到麻烦。
- 灵活:提供可替换的对话途径。
- 个性定制:提供用户定制功能。
- 相似:通过使用优秀的视觉设计使对象看上去和实物一样
1.1.6 原则总结(☆)
- 操作少,避免嵌套过多层次,满足用户傻瓜式操作
- 界面风格统一,颜色搭配与应用主题一致
- 正确使用图标和文字说明
- 了解产品面向的用户群体、特性、动机、痛点等(也就是说你要基本知道这个产品所对应的用户画像)
- 尽量减少用户输入,采用选择列表最好,提高用户体验
- 个性化服务,记录用户个性化信息
- 页面跳转逻辑清晰,始终保持一键返回 Home
- 一定要容错,对于用户错误输入或操作,要及时反馈和终止!!!
1.2 交互设计十大定律
1.2.1 菲茨定律
菲茨定律(Fitts' Law)是一个用来预测用户在计算机界面上移动到目标区域所需时间的数学模型。
它由保罗·菲茨(Paul Fitts)在1954年提出,主要用于人机交互设计中的界面优化。
菲茨定律的核心公式是:
其中:
- T 表示完成移动任务所需的时间。
- D 表示从起始点到目标中心的距离。
- W 表示目标的大小(通常是目标的有效命中区域)。
- a 和 b 是根据具体操作任务和设备条件得到的经验常数。
理解菲茨定律的关键点:
菲茨定律通过公式中的对数项 log2(1+
) 来描述运动的难度。 距离(D)和目标大小(W)的关系:
- 随着目标距离(D)的增加,用户移动到目标所需的时间也会增加。
- 随着目标宽度(W)的增加,用户移动到目标所需的时间会减少,因为更大的目标更容易点击。
产品设计启示:
按钮大小和位置:
- 按钮等可点击对象需要合理的大小尺寸。
- 重要功能的按钮应该设计得更大、更显眼,并且放置在用户容易触及的区域。
导航菜单:
- 屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。
- 菜单项之间的距离不宜过大,子菜单应该尽量贴近主菜单项,以减少用户的移动距离。
移动设备界面:
- 在移动设备上,界面元素应设计得更大,因为用户使用手指进行操作,手指比鼠标指针更大。
Question
知乎的「赞同」和「喜欢」按钮,为何设计不同?
知乎是中文互联网高质量的问答社区和创作者聚集的原创内容平台,因此对于高质量的问答内容,会有更高的曝光量。
如何评估问答质量的高低?主要是看分享、收藏和喜欢等用户的客观行为反馈。其中,有两个相近的反馈行为,赞同和喜欢。
- 喜欢:可能是针对答案表示喜欢,也可能针对答主本人表示喜欢,有主观因素影响
- 赞同:仅仅针对答案表示赞同,仅做客观评价
因此,对于一个问题是否高质量,其赞同数比喜欢数更加重要,所以赞同设计要区别于喜欢,且用按钮形式设计,增加用户点击率。
生活中的菲茨定律:
- 汽车的内部设计,如方向盘、档位、控制按钮等,都考虑了菲茨定律。常用的控制装置应布置在司机易于触及和操作的位置,以提高驾驶安全性和便捷性。
- 电视、空调等遥控器上的常用按钮(如电源、音量调节、频道切换)通常设计得较大且易于触及,以方便用户操作。
- 放大链接点击区域。在链接文字周围放置可点击的填充区域,这样用户想要点击的链接文本会有更大的容错性。
- 将用户最有可能点击(或最想要)的按钮放大。例如,将”登陆”按钮设计的更大。
- 程序非最大化状态下,macOS的菜单栏位于顶部边缘,而Windows操作系统的菜单栏在界面里面。实际测试和理论计算结果都表明,在使用 macOS操作系统时,用户点击某个菜单所需的平均时间要比Windows上快0.4秒(《The humane Interface》Jef Raskin )。
1.2.2 转向定律
转向定律(Steering Law)是一种描述人类运动行为的定律,特别是在交互设计和人机交互领域中应用广泛。
转向定律由Accot和Zhai于1997年提出,用来预测和解释用户在导航弯曲路径时所需的时间。
转向定律的公式如下:
其中:
- T 是完成转向任务所需的时间。
- D 是路径的总长度。
- W 是路径的宽度。
- a 和 b 是根据具体操作任务和设备条件得到的经验常数。
理解转向定律的关键点:
距离(D)和路径宽度(W)的关系:
- 随着目标距离(D)的增加,用户移动到目标所需的时间也会增加。
- 随着路径宽度(W)的增加,用户移动到目标所需的时间会减少,因为更宽的路更容易走。
转向定律适用于用户需要沿复杂路径导航的场景。典型的应用包括拖动滑块、在地图上导航、或游戏中角色的移动。
滑块控件应用场景:调整音量、亮度或其他设置的滑块控件。其优化策略有:
- 宽度适中:确保滑块轨道足够宽,使用户能够轻松拖动,而不容易滑出轨道。
- 长度适当:滑块轨道的长度应适中,避免用户需要长距离拖动才能达到目标位置。
路径导航应用场景:在地图应用中,用户需要沿路径导航。其优化策略有:
- 清晰路径:设计清晰、宽敞的路径,使用户能够轻松识别和跟随路径。
- 减少曲折:尽量减少路径的曲折程度,避免用户频繁转向,提高导航效率。
Note
菲茨定律 & 转向定律的区别
应用场景:
- 菲茨定律适用于直线路径上的目标选择。
- 转向定律适用于曲线路径上的导航。
模型公式:
- 菲茨定律公式考虑的是目标距离和目标大小的对数关系。
- 转向定律公式考虑的是路径长度与路径宽度的线性关系。
核心概念:
- 菲茨定律强调目标的距离和大小对选择时间的影响。
- 转向定律强调路径的长度和宽度对导航时间的影响。
通过理解这两个定律,设计师可以在不同的情境下优化用户界面,提升用户体验。例如,在需要快速点击的场景下应用菲茨定律,而在需要沿复杂路径导航的场景下应用转向定律。
1.2.3 席克定律
1951 年,席克(W. E. Hick)做了一个实验,他用每 5 秒随机点亮 10 盏灯,并让被试复述的方式,测得反应时间和选择数量之间的对数关系。
随后,海曼(Ray Hyman)通过实验确定了信息传输与反应时间的线性关系,丰富了席克定律公式。
一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。
用数学公式表达:
在人机交互中界面中选项越多,意味着用户做出决定的时间越长。
席克定律常用于用户界面设计中,用来优化菜单、按钮和选项的布局,减少用户的决策时间,从而提高效率和用户体验。
例如比起 2 个菜单,每个菜单有 4 项,用户会更快得从有 1 个菜单中做出选择。
常见的设计原则:
- 菜单设计:在设计软件或网站的菜单时,不宜放置过多选项。将选项分成子菜单可以有效减少单次决策的复杂度。例如,网站导航栏中的一级菜单应保持简洁,详细选项可以放在下拉菜单中。
- 按钮和控件布局:常用按钮和控件应保持在易于访问的位置,并且数量应适中。过多的按钮会增加用户的选择时间,导致操作复杂化。
- 电子设备设置:在设计电子设备的设置界面时,可以将设置选项分类,以减少单一界面上的选项数量,使用户更容易找到所需选项。
- 产品选择界面:购物网站的产品筛选界面应提供合理数量的筛选条件,避免用户面对过多选择项而感到困惑。可以通过分类、分步筛选等方式简化选择过程。
- 表单设计:在线表单中的选择项应适当简化,使用下拉菜单、单选按钮等控件时,应避免出现过多选项,使用户能够快速做出选择。
1.2.4 神奇数字 7±2 法则
神奇数字 7±2 法则(The Magical Number Seven, Plus or Minus Two)是认知心理学中的一个重要概念,由心理学家乔治·米勒(George A. Miller)在1956年提出。
1956 年,乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有 7(±2)项信息单元(即通常为5到9项信息单元),在记忆了 5~9 项信息后人类的头脑就开始出错,这意味着人们在短时间内能记住和处理的信息数量有限。
与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。
在设计用户界面时,应避免一次呈现过多选项或信息。将信息分组或分页可以帮助用户更容易处理和记忆。
例如,将表单分为多个步骤,而不是在一个页面上显示所有字段。
在设计列表和菜单时,应限制选项数量,避免用户感到信息过载。
将选项分组,并提供明确的分类标签,可以帮助用户更快找到所需内容。
1.2.5 接近法则
接近法则(The Law of Proximity)是格式塔心理学中的一个重要原则,描述了人们在视觉感知中如何将彼此接近的元素看作一个整体。这一法则强调了空间上的接近度对知觉组织的影响,即当元素在空间上靠得很近时,人们倾向于将它们视为一个群体或模式,它们是相关的。
理解接近法则的关键点:
空间接近性
- 元素之间的距离越近,人们越倾向于将它们看作一个整体。
- 这种接近性可以是物理上的,也可以是视觉上的。
知觉群体化
- 通过将接近的元素群体化,人们可以更有效地理解和处理复杂的视觉信息。
- 接近法则帮助简化感知过程,使得视觉系统能够快速识别和组织信息。
在网页设计中,接近法则用于布局和导航设计。例如,将相关的导航链接放在一起,使用户能够快速找到所需信息;将不同内容区块分开,以提高页面的可读性和易用性。
图形设计师通过调整元素的间距来创建视觉层次和组织。例如,在信息图表中,将相关数据点放在一起,使读者能够轻松识别和比较信息。
1.2.6 泰思勒定律
泰思勒定律(Tesler’s Law),也称为复杂性守恒定律(Law of Conservation of Complexity),是由拉里·泰思勒(Larry Tesler)提出的。
这一定律指出:系统的复杂性总量是恒定的,只能通过设计来转移或隐藏,但不能消除。设计者的任务是找到最合适的方法来处理和管理这种复杂性。
换句话说,为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。
设计者可以选择将复杂性更多地留给系统处理,从而减少用户需要面对的复杂性;或者反之,让用户处理更多的复杂性。这种平衡取决于系统的目标用户和使用场景。
优秀的设计应该尽可能减轻用户的负担,使用户操作更加直观和简单,同时让系统承担更多的复杂性。通过这种方式,可以提升用户体验和系统的可用性。
比如,B 站一键三连功能,点赞、投币和收藏这些操作无法简化,正常我们需要点击三个按钮。
但我们可以长按点赞键 3 秒,即可实现一键三连。
1.2.7 防错原则
「新乡重夫」是一种日语表达,指的是遵守「新乡(しんこう)」和「重夫(じゅうふ)」的原则。
这两个原则常被用来描述在日本企业中的防错原则或者是避免犯错的态度。
Note
- 新乡(しんこう):意为“新しい”(新)和“信頼”(信仰)的结合。在工作中,这意味着要尊重和信任员工,相信他们有能力完成任务,给予他们机会去尝试新的方法和创新,而不是一味依赖传统的做法。
- 重夫(じゅうふ):意为“重要”(重)和“負担”(負)的结合。这表示公司对质量和结果的重视。在工作中,这意味着要对工作负责,将质量放在首位,时刻警惕可能导致错误的因素,以确保任务的成功完成。
防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。
通过改变设计可以把过失降到最低,该原则最初是用于工业管理的,但在交互设计也十分适用。
在硬件设计上,主机背后的各种插槽,如果长得都一样,用户很可能会插错,所以每个插槽都形状和大小都不相同。
在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。
1.2.8 奥卡姆剃刀原理
奥卡姆剃刀原理(Occam's Razor),又称为简约法则或节约法则,是一种哲学和问题解决的方法论。它由中世纪的英格兰哲学家和逻辑学家威廉·奥卡姆提出。
奥卡姆剃刀原理的核心思想是:在解释现象或提出理论时,应该首先选择最简单的解释或理论,而不是复杂的或不必要的解释。
换句话说,如果有多种解释可以解释同一现象,那么应该选择最简单的那个。
这个原理的背后是因为简单的解释通常更容易理解、验证和应用,而且更少依赖于未经证实的假设。虽然这个原则并不总是适用于所有情况,但它被广泛认为是科学研究和推理的一个重要准则,特别是在面对不确定性和多种解释的情况下。
这个原理在设计中被认为是「如无必要,勿增实体」,即如有两个功能相等的设计,那么选择最简单的。
在产品设计中,奥卡姆剃刀原理可以应用于多个方面:
- 功能设计:避免不必要的功能累赘,聚焦于核心功能,确保产品简单易用。多余的功能不仅增加开发成本,还可能使用户体验变差。
- 用户界面设计:简洁的界面设计能够帮助用户更快速、更轻松地找到所需的信息和功能。过于复杂的界面可能会让用户感到困惑和不知所措。
- 技术实现:在技术实现上,优先选择简单且高效的解决方案,而不是复杂且难以维护的方法。这样可以减少错误和维护成本,提高系统的可靠性。
- 产品定位:在产品定位和市场策略上,奥卡姆剃刀原理提醒我们要聚焦于核心用户需求,不要试图满足所有人的需求,以免丧失特色和竞争力。
通过应用奥卡姆剃刀原理,产品设计者可以创造出更具用户友好性、成本效益高且易于维护的产品。
比如,「Dou+」和「直播人气宝」两个产品,功能高度相似,且并未满足真正的需求。
1.2.9 帕累托定律
帕累托定律(Pareto Principle),又称80/20原则,是由意大利经济学家维尔弗雷多·帕累托(Vilfredo Pareto)提出的。这一原则指出,在许多事件中,大约80%的效果来自20%的原因。帕累托最初是观察到意大利20%的人口拥有80%的财富,这一观察随后被广泛应用于各种领域,包括商业管理、经济学和产品设计。
在产品设计和管理中,帕累托定律可以应用于多个方面:
- 客户管理:大约80%的销售额通常来自20%的客户。识别并重点关注这20%的高价值客户,可以显著提升公司的盈利能力。
- 产品功能:通常20%的产品功能会被用户频繁使用,而剩余的80%功能则很少被触及。因此,设计过程中应重点优化和完善这20%的核心功能,以提升用户体验。
- 问题和故障:在产品开发和维护中,80%的问题往往是由20%的原因引起的。通过识别和解决这些主要原因,可以显著提高产品的稳定性和质量。
- 时间管理:个人和团队的80%成果可能来自于20%的工作时间。高效利用这20%的时间,可以大幅提升工作效率和产出。
- 市场营销:营销活动的80%效果通常来自于20%的策略或渠道。识别并重点投入这20%的高效渠道,可以更有效地利用资源,提升营销效果。
应用帕累托定律,可以帮助产品设计者和管理者更好地分配资源,聚焦于最有影响力的方面,从而实现更高的效率和效益。
1.2.10 古登堡图法则
古腾堡原则是由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出,早在 20 世纪 50 年代,他在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,就像读书一样,由左到右,从上到下。
这其中蕴含着什么信息呢?
经过研究最终得出被后人所熟知的结论:古腾堡原则,并附上了一张图,名为「古腾堡图」。
古腾堡图将画面所呈现的内容分成四个象限:
- 第一视觉区(POA):左上方,用户首先注意到的地方
- 强休息区(SFA):右上方,较少被注意到
- 弱休息区(WFA):左下方,最少被注意到
- 终端视觉区(TA):右下方,视觉流终点
从图中可以看出,用户的视线很自然会落在第一视觉区,然后逐渐移到终端休息区。
应用古登堡图法则的设计建议:
- 关键内容优先:将最重要的内容放在初始视区,即页面的左上角,以确保用户在第一时间看到。
- 次要信息适当安排:次要信息可以放在强力区(右上角),确保用户在浏览时能顺利过渡到次要信息。
- 减少视觉杂乱:避免在弱视区(左下角)放置过多关键内容,因为用户的注意力在这个区域较低。
- 呼应信息:在终点区(右下角)放置一些呼应性或总结性的信息,确保用户在浏览完页面后能够看到。
在网页设计和布局中,古登堡图法则可以帮助设计师优化用户体验:
- 网页首页:将最吸引用户的标题、重要信息和导航链接放在左上角和右上角。
- 文章布局:开头的引言和重要段落放在左上角,补充说明和次要信息可以放在右上角,次要引用或说明性文字放在左下角,最后的结论或呼吁行动(CTA)放在右下角。
通过理解和应用古登堡图法则,设计师可以创建更符合用户阅读习惯的布局,从而提升信息传达的效率和用户体验。
1.2.11 其他定律
- 黄金分割点
- 三等分原则
1.3 交互设计优秀案例
1.3.1 软件产品
Chrome:奔跑小恐龙
这里不得不提到一个经典的彩蛋设计,谷歌 Chrome 浏览器访问网页时如果遇到网络断开,页面中就会出现一只像素小恐龙,此时按下空格键,小恐龙就开始了跑酷之旅;我们可以用空格键操控它跳跃来规避前方的仙人掌,一只小恐龙能够很好地打发你断网的无聊时间,划水解压小技巧。
404 公益:让孩子们早日回家
404 公益最早源于“NotFound Project”,是由多个公益组织联合发起的项目;它利用闲置的 404 报错页面来发布走失儿童的信息,将页面内容的丢失和儿童走失联系到一起,为那些找不到家的孩子们早日回到家人的怀抱贡献一份力量。
哈罗单车:上报故障就这么简单
哈罗单车的故障上报页面,以图形化的方式非常直观地将单车的各个部件拆解开来,用户只需点击相应模块即可完成上报,免去了繁琐的文字描述同时也提升了报错的准确性。
飞猪旅行:画个圈来寻找酒店
用飞猪地图找酒店的时候,我们可以在地图上画出希望入住的酒店区域,相较于仅通过距离来筛选酒店的方式,画圈的交互充分满足了用户自定义范围找酒店的诉求,简单高效。
淘宝:物流信息和到达时间
我们在线上购买完物品时,最想知道什么时候发货,什么时候到达,淘宝购物点击查看物流可以看见物流发出时间,预计到达时间,物流运输路线,直观的方式,清晰的视觉表达传达给用户当前物流状态,减少了用户的焦虑,给用户心理极大的安慰。对于等待,要照顾用户的情绪感觉,最大化的减少用户焦虑,清晰的表达等待时间节点,照顾用户心理。
1.3.2 硬件产品
iPhone:科技美学
每次苹果发布会 UI 设计师可能是最睡不着觉的人啦,每次发布会苹果推出全新 iPhone 时,所有的 APP 应用程序必须跟随 iPhone 的尺寸、规范等特性调整设计稿。
iPhone 4 于 2010 年 6 月 8 日发布。iPhone 4 延续了 iPhone 一代的多点触摸(Multi-touch)屏界面,并首次加入视网膜屏幕、前置摄像头、陀螺仪、后置闪光灯,相机像素提高至 500 万。
iPhone 4 将科技美学运用到了极致。
- 3.5 寸屏幕:从单手操作及每个界面的覆盖率来说,3.5 最为合适的尺寸
- 手感扎实:不锈钢框架和三明治结构的密集咬合,让人感觉像是拿着一块天生一体的石头
- Retina 视网膜屏:屏幕细腻,看不到像素点。UI 设计切图时候,要注意尺寸。比如,一个 Logo 图标是
200×200px,即logo_icon@1x.png,在苹果手机中,则需要二倍图400×400px的尺寸,即logo_icon@2x.png。 - 圆角图标:所有的应用图标都是圆角,这样可以避免用户认为会刺到手指
- 拟物设计:图标和界面全部是拟物设计,这样可以更好地让用户理解哪些是可以点击操作的
- 7mm 按钮:按钮在手机上呈现的大小都是 7mm 左右,这是因为人类手指点击区域大概是 7mm ~ 9mm
- 多点触控:不仅仅可以点手机里的按钮,还可以进行长按、滑动、捏等手势操作
Sound Tool:伸缩音响
Sound Tool 是一款音响,在触摸屏饱和产品时代,Sound Tool 致力于探索切实的交互作用。通过拉动音响来调节声音大小,目的是创建音乐的物理表示,以便人们可以与之互动。
RA:简单的台灯
RA 是一种形式简单的台灯,你在切换角度时可调整其亮度。在水平位置上,灯亮度是 0,当你开始按顺时针方向旋转灯管时,灯逐渐亮起来,直到灯管垂直时达到最亮。