交互设计类

尼尔森F型视觉模型

尼尔森F型视觉模型由 Jakob Nielsen于2006年提出 他指出,我们在第一次观看页面时,视线会呈 F的形状关注页面 先从顶部开始从左到右水平移动 目光再下移开始从左到右观察但是长度会相对短些 以较短的长度向下扫视,形成一个 F形状 此时我们的阅读速度较慢,更为系统和条理性 具体如图:

根据尼尔森F模型,我们可以得出几个心理暗示:

  • 用户快速扫视时,具体的文字并不重要
  • 多用小标题、短句引起阅读者注意
  • 将重要的内容放在最上边

Fitts’ Law / 菲茨定律(费茨法则)

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 DW),用数学公式表达为时间 T = a + b log2(D/W+1)。 这个原则断言,在定位时存在一个速度和精度的平衡,目标越小或距离越远需要的时间越久。这个定律在处理鼠标活动(用户把鼠标从A点移到B点)时通常表现明显。即内容越容易被点击到,它的点击率越高。 这个原则断言,在定位时存在一个速度和精度的平衡,目标越小或距离越远需要的时间越久。这个定律在处理鼠标活动(用户把鼠标从A点移到B点)时通常表现明显。即内容越容易被点击到,它的点击率越高。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

菲茨定律的启示:

按钮等可点击对象需要合理的大小尺寸。

屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

Hick’s Law / 席克定律(希克法则)

定律内容:*一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。*用数学公式表达为反应时间 T=a+b log2(n)。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。

席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

神奇数字 7±2 法则

1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

The Law Of Proximity 接近法则

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

Tesler’s Law 泰思勒定律(复杂性守恒定律)

该定律认为*每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。*如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。

Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

奥卡姆剃刀原理(Ockham's Razor)是由14的世纪哲学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出的一个原理。 这个原理是告诫人们“切勿浪费较多东西去做用较少的东西同样可以做好的事情。”后来以一种更为广泛的形式为人们所知,即*“如无必要,勿增实体。”*

8020法则

  1. 定义:在所有大系统中,高达80%的效果是由仅占20%的关键因素决定,在实际操作中发现,关键变量占10-30%不等。适用范围普遍,适用互不相关的事物影响。
  2. 8020法则有助于资源整合,可以帮助提升设计最大化。比如:客户用80%的时间集中于产品20%的功能时,那设计与检测应该集中于那20%,剩余80%应该重新评估,确认他们的价值。设计师可以利用此法则,对设计中的所有元素进行重新评估,划定重新设计与优化的范围,有效决定优势资源进行再设计,80%非关键能减则减,时间与资源有限时,不要试图改进与优化那80%。
  3. 应用例子:图形用户界面把大部分功能隐藏在功能菜单(降低视觉复杂性),常用功能难以找到(增加操作复杂性),所以应把20%关键功能放在功能菜单中(工具条的使用)。

前卫与亲近(MAYA法则)

  1. 成功的设计可以从很多方面界定:功能、美学角度、适用性等,如果我们从商业绩效也就是销售量来定义设计的成功,可以从两个变量取得平衡:亲切熟悉+独一无二。MAYA法则就是帮助我们找到这两个变量的平衡契合点,所以一个设计如果可以结合让人感到熟悉+新奇的感受,就能够提升设计的成功。此法则应用于:面向大众对象的产品,用户是大众,而非专业设计师和艺术家。
  2. 用户喜欢熟悉的东西(曝光效应:物品或环境的吸引力会随着曝光次数的增加而增加),也喜欢新奇的设计。人们对新奇的关注与记忆大于典型性。此法则认为最理想的做法是:兼顾熟悉性和新奇性。 对用户来讲:最新奇但依旧可辨识的物品或环境,最富美学吸引力。
  3. 应用例子:设计的演变虽然一直有创意新奇的设计,但是都在从前被大众接受的设计渐渐演变而来,而非完全脱离重新创造,因此新奇的设计+过去设计的熟悉感,会使得用户具有吸引力和接受能力。图标、界面的演变。

图示:IOS不同版本的设计元素的对比,可以看出,虽然新版具有新奇性,但是仍然可以找到以前版本的熟悉感受。

信噪比(常用于信息设计)

  1. 同一显示中,相关信息与无关信息的比例就是信噪比。在信息的创造、传达、接收过程中,信息的形式会递减,无关信息会增加。如何使得信噪比高,从而达到优秀的设计目标?可从两方面看:信号最大化或噪音最小化。
  2. 信号最大化:清楚的传达信息,高效率的呈现信息可以使得信号最大化。简单的设计可以带来极小的效能负荷,让用户专注于资料的意义。比如,没有用正确的图表呈现特定资料数据,基本会扭曲资料原意,所以正确的设计决策非常重要,必要时应进行测试。 还有一种方法,及时强调信息的关键方面,也可以减少信号递减的现象。比如:强调或备援识别,凸显产品的重要性。
  3. 噪音最小化:去除或减少不必要的元素,每一个不必要的数据项目、图标、线条、图案,都会让用户从重要元素上分心。每个设计元素的使用应该适当,一旦过多就是噪音。
  4. 应用:图表、表格设计的演变。 图示:左侧的图表无关信息元素比较多,图示的图案多样,表格的边框又粗又重,这会使得“噪音”增加。右侧是优化后的图表,减去了无关信息,用清楚明了的图示表示资料内容。

序列效应

  1. 在列举信息时,排在最前和最后的元素,比排在中间的更容易让人记住。
  2. 对排在开头的信息产生加强的回想效果,称为:初始效应,人们有时候会把最前面的信息储存在长期记忆中。排在结尾的信息产生加强的回想效果,称为:时近效应。时近效应适用于听觉刺激。初始效应适用于视觉刺激。
  3. 在列举信息元素时,如果列举信息属于视觉性,那么把重要的信息放在最前面;如果是听觉性,就放在最后面。如果是用户必须做决定,并且是最后一项出现后马上做决定,那么就将想要用户做决定的信息放置最后,以便增加获选概率,否则放在最前面。
  4. 应用例子:比如在很多app产品设计时,个人账户与设置基本放在页面的最前面和最后面,这体现着产品信息的序列关系,重要次序,所以在进行设计时,可以在信息排序上遵循序列效应。 当然还有一些产品想对用户进行引导操作,也可以利用这个法则,将信息放置最前或最后。

古腾堡图表法

古腾堡图表法又称 Diagonal Balance(对角线平衡的和谐状态),设计理念缘自 Johannes Gutenburg(欧洲活字印刷术的发明者)应用于印刷的古腾堡图表。它指出: 人们在浏览页面或布局时视线趋于从左上角移动到右下角,具体如图

古腾堡图表法说明我们观看页面的视线并不是镜面对称的,我们需要在设计中避免出现此类错误但绝不是墨守成规,将页面的 Logo放置在左上角而主体向右下角延伸,左下和右上作为视觉的盲点可以添加辅助元素

成本效益

  1. 设计中,用来评估新功能/新元素出现的新增成本的最后财务回收状况。 如果与设计的互动成本>收益,则是不良设计,反之是优秀设计。
  2. 成本效益可以衡量设计的品质。如:网页下载的时间常见说法不超过十秒,但是,接受下载时间的长短,更多与网页提供的效益有关,如果网页具有合理效益,其实可以抵消超过十秒的下载成本。所以,可以通过改进设计品质来降低互动成本(设计能够提供效益)。
  3. 让产品继续进行应该效益>=成本,让产品更好,应该让效益尽可能的大于成本。应该从效益与成本两个方面工作:成本限制 或者 效益增加。所以不能仅仅考虑成本限制范围,也应该考虑互动效益成本。
  4. 应用例子:loading页设计:用成本效益来考虑,为什么loading页设计多样,不只是因为“有趣”这么简单的理由,有趣只是用户的直观感受。这种设计的应用实质可以用成本效益解释,等待的时间可以当做是成本,在技术无法缩短合理的等待时间时,成本就相当于无法降低,那么想要产品更好,需要从效益入手,设计可以带来效益,那么就需要改进等待页的设计。所以现在的loading页、进度条、错误页等等设计都体现能带来效益的创意互动。

Ant design 十大设计原则

  1. 亲密性 Proximity
  2. 对齐 Alignment
  3. 对比 Contrast
  4. 重复 Repetition
  5. 直截了当 Make it Direct
  6. 简化交互 Keep it Lightweight
  7. 足不出户 Stay on the Page
  8. 提供邀请 Provide Invitation
  9. 巧用过渡 Use Transition
  10. 即时反应 React Immediately

包豪斯运动

形式追随功能,去除干扰和装饰。

Skeumorphic设计理念

花费很大的力气来指向或模仿真实世界的功能。

LEMErS(人机交互五大原则)

超预期用户体验5要素:

  • 易学(Learnability):次使用某个功能时,用户能否很容易完成基本任务?
  • 高效(Efficiency):一旦用户学会了这个功能,他们能否很快完成任务?
  • 易记(Memorability):若有一段时间不使用程序了,再重新使用时,用户能否很快恢复到原来的使用水平?
  • 纠错力(Errors):使用某个功能时,用户会犯多少错误?他们能否快速地纠正错误?
  • 愉悦度(Satisfaction):使用这个功能时,用户的愉快程度如何?

界面8黄金法则(Ben Shneiderman)

  1. 努力做到连贯
  2. 允许频繁使用系统的用户使用快捷方式
  3. 提供信息反馈
  4. 为关闭这一动作设计对话框
  5. 提供简单的设计处理
  6. 应该方便用户取消某个操作
  7. 用户应掌握控制权
  8. 降低短期记忆荷载

防错原则

通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。

渐进式呈现 (Progressive Disclosure)

用户想将注意力集中到手上的事上,尽量少分心,但如有必要又能深入到细节当中。

用途

用于减轻不知所措的感觉。

解决方案

用最少的信息描述当前的事。

将复杂的及很少用到的选项移出主界面,只显示最重要的信息,逐步显示其它信息和选项,这样便于控制界面的复杂度。

本模式有很多使用示例。最简单的应用方式之一为显示更多链接,它提示用户查看关于某事物的更多信息。

说明

减少杂乱、混乱和认知性的工作负荷,聚焦用户注意力,在不同的界面上使用本模式,简单的、复杂的、抽象的、具体的,不断提高使用经验。

本模式将高级的或很少使用的功能放在次级界面上,减少用户对当前事项的认知负荷,避免分心,便于学习使用应用系统,降低出错率。

显示与用户当前活动相关的信息或功能,必要情况下才显示其它信息,让用户关注手上的事儿。隐藏复杂的或很少使用的功能,使应用系统界面去混乱化。只在需要时才显示其它信息,让用户在一个界面上进行复杂、多个步骤的 操作。

第一步仅显示关键信息,但又可以进行下一步。用户完成一个步骤后,显示进行下一步需要的信息,并保持前面步骤的信息,允许用户修改这些内容。与向导模式差不多,用户在当前步骤中输入的内容会影响下一步中的行为。

BBC 双钻模型

改良版双钻模型

最后更新: 22 days ago