交互设计的基础方法和理论总结

更新时间:2018-08-16

本文系转载或参考,原文链接》

一、需求挖掘理论

需求挖掘是产品生命周期的启始阶段同时也贯穿了整个生命周期,一般包含了内部和外部挖掘。

1. 内部挖掘

在公司内部进行挖掘,比如说采用头脑风暴、组织会议、业务需求收集、运营反馈、其他部门的需求收集等方法。

2. 外部挖掘

针对真正的使用者,通过用户研究(重点在于研究用户痛点)进行挖掘,常用的用研方法有可用性测试、焦点小组、问卷调查、AB测试等。

二、需求分级理论

对需求进行合理的分解,去除伪需求,保留那些真正对产品或者设计目标有帮助的需求。常见理论有:

  • 通用四象限法
  • KANO模型
  • 马斯洛需求层次理论

1. 通用四象限法

适用场景:交互设计师收到很多需求时。方法是将需求划分到4个象限当中,按照落在各个象限的处理方式进行处理。

2. KANO模型

KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

适用场景:收集到的需求当中,确定哪些需求能显著提升用户的满意度。分为:

  • 必须具备的(Must-have)
  • 所期望的(Linear)
  • 超出预期的(Exciter)

3. 马斯洛需求层次理论

人类需求像阶梯一样从低到高按层次分为五种,分别是:生理需求、安全需求、社交需求、尊重需求和自我实现需求。(位于金字塔顶端的需求,能使利润最大化。)

适用场景:需求实现的价值有多大?可分为以下情况:

  • 生理需求:最基本的生存需求,例如,利用产品能解决最基本的生存需求,点外卖。
  • 安全需求:人身财产安全有保障,例如,在线支付安全。
  • 社交/情感需求:例如,给最爱的人买一份保险,满足情感上的需求。
  • 尊重需求:产品给予用户带来的成就感,常见例子是游戏升级。
  • 自我实现需求:用户通过产品实现了人生追求,例如,利用股票软件赚取了第一桶金。

三、产品框架设计理论-用户体验五要素

产品框架基于用户体验五要素:战略层、范围层、结构层、框架层、表现层,来进行制定。

  • 战略层:战略层主要是明确公司与用户对于产品的定位和目标,明确用户需求。
  • 范围层:范围层主要是将战略层确定的目标转化为网站提供的功能和内容。
  • 结构层:结构层主要是设计产品信息架构图,将分散的功能和内容组成一个整体。
  • 框架层:框架层主要是将抽象的架构图转化为详细的线框图,确定界面外观、导航信息及信息要素的布局。
  • 表现层:表现层主要是按照「低保真」的线框图设计出最终的产品。

四、产品框架设计理论-7(±2)信息块效应

人类头脑最好的状态能记忆含有7±2项信息块,在记忆了5-9项信息后人类的头脑就开始出错。(假如你的短时记忆像一般人那样,你可能会回忆出5~9个单位,即7±2个,这个有趣的现象就是神奇的7±2效应。这个规律最早是在19世纪中叶,由爱尔兰哲学家威廉汉密尔顿观察到的。他发现,如果将一把子弹撒在地板上,人们很难一下子观察到超过7颗子弹。)

适用场景:规范导航或者选项卡的数量和层级深度,例如,我们网站的菜单最佳数量是多少个?主要应用:

  • 导航或选项卡尽量不要超过9个
  • 如果导航或选项卡内容很多,可以用一个层级结构来展示各段及其子段,并注意其深广度的平衡。

五、产品框架设计理论-卡片分类法

卡片分类法是一种规划和设计互联网产品或者软件产品的信息构架的方法。它属于用户研究中的一种方法,简单来说就是用户来对信息卡片(或者是菜单卡片)进行归类,从而得出信息关联性的一种方法。我们最后把关联性更强的菜单放在一起,就形成了较为科学的一套信息分组。

适用场景:为我们设计导航、菜单以及分类提供帮助,例如,银行 APP 转账和查询余额两个功能是否放在一起?

六、界面设计理论-格式塔理论

人在观察和理解事物时首先会注意到一个整齐、有规律的整体,或者说,人们会自动把所见的事物在人脑中加工为一个整体。应用形式:

1. 删除

从构图形象中排除不重要的部分,只保留那些绝对必要的组成部分,从而达到视觉的简化。在实际创作过程中,必须留意在设计中是否添加了任何与你预期的表达相抵触的多余的东西。如果有,则应排除,以改进你设计上的视觉表达的格式塔。

2. 贴近

当各个单元一个挨着一个,彼此靠得很近的时候,可以用「贴近」这个术语来描绘这种状态,通常也把这种状态看作归类。以贴近而进行视觉归类的各种方法都是直截了当的,并且易于施行。

3. 结合

在构图中,结合就是单独的视觉单元完全联合在一起,无法分开。这可以使原来并不相干的视觉形象自然而然的关联起来,比如常用的一种设计手法——异形同构:把两种或几种不同的视觉形象结合在一起,在视觉表达上自然而然地从一个视觉语义延伸到另一个视觉语义。

4. 接触

接触是指单独的视觉单元无限贴近,以至于它们彼此粘连。这样在视觉上就形成了一个较大的、统一的整体。接触的形体有可能丧失原先单独的个性,变得性格模糊,就如在图案设计中相互接触的不同形状的单元形在视觉感受上是如此的相近,完全融为一体。

5. 重合

重合是结合的一种特殊形式。如果所有的视觉单元在色调或纹理等方面都是不同的,那么,区分已被联结的原来各个视觉单元就越容易;相反,如果所有的视觉单元在色调或纹理等方面都是一样的,那么,原来各个视觉单元的轮廓线就会消失,从而形成一个单一的重合的形状。重合,能创造出一种不容置疑的统一感和秩序性。重合各个不同视觉形象的时候,如果我们看到这些视觉形象的总体外形具有一个共同的、统一的轮廓,那么这样的重合成功了。

6. 格调与纹理

格调与纹理是由大量重复的单元构成的。两者的主要区别在于视觉单元的大小或规模,除此之外,它们基本上都是一样的。格调是视觉上扩大了的纹理,而纹理则是在视觉上缩减了的格调,因此,在不需要明确区别的情况下,我们可以同时解释格调和纹理,感知格调或纹理的视觉格式塔,总是基于视觉单元的大小和数量的多少。但在一定的场合,别的因素也可能起作用。例如,一个格式塔中视觉单元的总量大的,可以构成一种格调;但是,如果在飞机上俯瞰一整片树林,恐怕就只能将其作为一种纹理来看了。格调和纹理实际上没有严格的区分界限,当视觉单元大小及数量变到一定的量值范围,这种特性可以使格调显得像是一种纹理,也可以使纹理呈现为一种格调。或者,创造出一种格调之内的纹理,以至格调和纹理同时并存。

7. 闭合

有一种常见的视觉归类方法基于人类的一种完型心理:把局部形象当作一个整体的形象来感知。这种知觉上的特殊现象,称之为闭合。当然,我们由一个形象的局部而辨认其整体的能力,是建立在我们头脑中留有对这一形象的整体与部分之间关系的认识的印象这一基础之上的。也就是说,如果某种形象即使在完整情况下我们都是认识,则可以肯定,在其缺乏许多部分时,我们依然不会认识。如果一个形象缺的部分不多,那么可识别的细节就不足以汇聚成一个易于认识的整体形象。而假如一个形象的各局部离的太远,则知觉上需要补充的部分可能就太多了。在上述这些的情况下,人的习惯知觉就会把各局部完全按其本来面目当作单独的单元来看待。

相近(Proximity):距离相近的各部分趋于组成整体。人们通常把位置相对靠近的事物当成一个整体。

相似(Similarity):在某一方面相似的各部分趋于组成整体。人们会把那些明显具有共同特性(如形状、大小、共同运动、方向、颜色等)的事物当成一个整体。

封闭(Closure):彼此相属、构成封闭实体的各部分趋于组成整体。人会将不完全封闭的东西当成一个统一的整体,所以有些时候完全闭合是没有必要的。

连续(Continuity):我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状。我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状。

七、80/20原则

80/20法则又被称为二八定律、帕累托法则(定律),也叫最省力的法则、不平衡原则。最初是19世纪末20世纪初意大利经济学家巴莱多发现的。他认为,在任何一组东西中,最重要的只占其中一小部分,约20%,其余80%尽管是多数,却是次要的。80/20法则被广泛应用于社会学、经济、用户体验设计、企业管理等。

80/20法则有助于资源整合,可以帮助设计师最大化提升用户体验质量。比如:用户用80%的时间集中于产品20%的功能时,那设计师应该集中力量对那20%进行优化,剩余80%应该重新评估,确认他们的价值。设计师可以利用此法则,对设计中的所有元素进行重新评估,划定重新设计与优化的范围,有效决定优势资源进行再设计。80/20法则是不受人为直接控制的,它是自然而然形成的。

▲ 其中20%的关键功能做成工具条展示在主界面,其余隐藏

在理解了80/20法则后,我们可以将此法则广泛的适用于各个场景中,如下:

  • 分析数据,确定用户最经常使用的那20%的功能。
  • 排定优先级。关注网站或app中最核心功能,并不断强化。
  • 统计出归入20%的最常使用的功能,在此基础上简化设计和布局。
  • 精简80%非关键性功能,大胆做减法。

八、奥卡姆剃刀原理

奥卡姆原理也被称为“简单有效原理”,由14世纪哲学家、圣方济各会修士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。通俗称为“如无必要,勿增实体。”也就是说:如果有两个功能相等的设计,那么选择最简单的那个。奥卡姆剃刀原理并不是只肯定简单的设计就是好的,也不是否定一切复杂含蓄的设计就是不好的。核心是强调“简单”设计比“复杂”设计更容易让人理解,传达效果更好,可以以小博大。

在Amazon Prime的案例中,左边的方案用边框区分每个项目卡,并在项目卡之间加了水平分割线。边框并没有带来任何附加的价值,反而在视觉上增加了分割感,破坏了简洁的界面语言。相比之下,一条简单的分割线就能完成区分模块的作用,并且还增加了更多的空间去罗列更多的项目。

在功能性页面设计过程中,我们需要知道在这个页面用户行为是什么?流程内的引导尽量弱化于主流程。流程外的内容,没有必要不要增加。这一点其实很重要,简单的页面让用户一眼就能找到他们自己感兴趣的内容,让他们看起来更舒服,更能专心于你要表达的内容上。而复杂的页面会让访客一时找不到信息的重点,也分散了访客的注意力。

遵从奥卡姆剃刀原则,科学设计简单页面的方法:

1. 只放置必要的东西

简洁页面最重要的一个方面是只展示有作用的东西,其他的都没有。这并不意味着你不能提供给用户很多的信息,你可以用“更多信息”的链接来实现这些。

2. 减少点击次数

让你的用户通过很少的点击就能找到他们想要的东西,不要让他们找一个内容找得很累。

3. “外婆”规则

如果你的外婆(其他老点的人)也能轻松的使用你的页面,你就成功了。

4. 减少段落的个数

每当你的网页增加一段,页面中主要的内容就会被挤到一个更小的空间。那些段落并没有起到什么好的作用,而是让顾客们知道更多他们不想了解的东西。

5. 给予更少的选项

用户希望在浏览网页的时候思考的少一点。我们在展示内容的时候要努力减少用户的思维负担,这样就会使浏览者使用更顺畅,心态更平和。

九、菲茨定律 / Fitts’ Law

从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的D与W),用数学公式表达为时间T = a + b log2(D/W+1)。

T=移动设备所需时长;a,b是经验常量;D=设备起始位置和目标位置的距离;W=目标的宽度大小。

菲茨定律的启示:

  • 按钮等可点击对象需要合理的大小尺寸。
  • 屏幕的边和角很适合放置像菜单栏和按钮这样的元素。
  • 出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。
  • 要让不常用或危险的UI元素难以被点击。
▲ 用户拖拽想要删除的应用到顶部删除,顶部W无穷大,增加了用户操作效率和精准度

十、席克定律

核心就是,一个人面临的选择越多,做出决策需要的时间就越多。所以在设计中,我们要思考的是,怎样最小最优化设计选项,太多的选项会延长用户做决策的时候,甚至对一些“选择困难户”来说,会直接或简介导致他们任务失败。席克定律揭示了,页面中的选项是如何影响用户决策的速度和易用性。定义的范围很广泛,因为不是测量物理反应或技术扮演的角色,而是测量决策的心理过程。

总结

交互的核心要点在于完成用户目标,而且随着场景的不同,目标、任务和行为可能会产生变化。这就需要我们深入学习交互设计的基本理论知识,通过这些理论可以帮你创造出更好的设计。