用户界面设计准则乱炖
今天打算把一些用户界面设计准则来来一锅乱炖,整理一下。
界面设计实质上其实是为其他人类服务
真正的目的是如何让你的应用能够满足使用者的情感需求和设计需求
User interaction Design 应该改成 Human Interaction Design
本次整理将从以下几个著名的设计准则中提取,融合
- Norman
- Shneiderman
- Nielsen & Molich
- Nielsen & Mack
- Stone
- Johnson
- Apple WWDC 2017
我们可以看到最基本的三个设计原理是:
1. 可见性 Visiblity
让用户有机会确定哪些行动是合理的,以及呈现该设备的当前状态。
可见性足以解释了汉堡包菜单的弱势,用户可见此功能才有可能同其发生交互
而在这里我希望提到一个词叫做Perceivability,意思是可觉察性:
- Maximize legibility 增强清晰度
- Audible cues 提供语音帮助功能(对于视觉障碍者来说这就是他们的可见性)
- Haptic feedback 触觉反馈 (对于视觉障碍或是听觉障碍者来说,这都将加强其同应用的互动)
可觉察性包含了一种可达性(Accesibility) 的思想,我们的设计是为了所有人设计的。
- Easily obtained
- Easily used
- Easily understood
我们希望我们的APP将会是更容易掌控,更容易使用以及被人理解的。
2. 一致性 Consistancy
- Internal Consistency 内部一致性
- Visual consist 视觉一致性
- Provide cohesive 提供粘着性持续性
尽可能的减轻短期记忆的负担
3. 反馈 Feedback
关于行动的后果,以及产品或服务当期那状态的充分和持续的信息。当执行了一个动作之后,很容易确定新的状态。
界面需要时时给到用户提供反馈
- Status 当前的状态
- Completion 完成度
- Warning 警告可能的错误,从而起到预防错误的功能
- Errors 错误提示
好的反馈应该回答用户这些问题:
- 我可以做什么?
- 刚才发生了什么?
- 正在发生什么?
- 之后将会发生什么
好的交互应该能帮助人们感受到一切尽在掌握,减轻用户短期记忆的负担,帮助用户识别,诊断错误,并从中回复。
接下去我们再继续看一下基本的一些设计原则
4.路径提示 Wayfinding
一个好的界面最起码能回答用户这些问题:
- 我在哪
- 我可以去哪
- 当我到那里去了之后会发生什么
- 附近有什么
- 我如何出去
我们设计的每一个页面都需要回答这些问题
5.心智模型 Mental Model
每个人的心智模型都是不一样的
这里就需要提到另外两个模型 System Model 和 Interaction Model
系统模型和交互模型,是设计师给到的
当系统模型靠近用户的心智模型的时候,那我们就会说这个设计是intuitive自然而然的,反之则是不符合人们的感知的。
这段是在WWDC2017的上提到的, 在Norman的《设计心理学》这本书中提到的则是概念模型(Conceptual Models)和系统印象
概念模型(Conceptual Models)
概念模型通常是高度简化的说明, 告诉你事物是如何工作的 一个好的概念模型使用户能够预测自己行为的结果。
用户自身也带有概念模型
系统映像
我们把提供给用户的适用信息组合叫做”系统映像“
用户通过与产品的互动,阅读,与搜寻网上信息,参考产品提供的说明手册,这些系统映像形成用户的概念模型。
设计师应该希望用户模式与设计模式相一致,但由于设计者往往不能直接同用户交流,整个沟通的重任就由系统映像承担
在APP的使用过程中,用户几乎不可能翻看所谓的产品使用说明,用户通常通过直接与产品的互动而建设自身的概念模型。
而现在,用户基本拥有自己的概念模型-这也就是所谓的心智模型,因此我们在设计一款新应用的时候,需要考虑用户原本的心智模型(概念模型) ,而在不同平台上的用户有不同的心智模型,因此我们需要借助User guide ,以及平台UI kit 来帮助我们设计一套符合用户心智的app.
这里有一个技巧,如何你将你设计好的界面给到用户使用,他们如果无法顺利完成你给到的任务,而需要你口述去指导的话,那就说明你建立的系统模型并没有完全的符合用户的心智模型,试图将你的口述的内容转化到界面上
6.接近性 Proximity
这是格式塔原理中非常著名的一条,也很显而易见,物体之间的相对距离会影响我们感知它们是否以及如何组织在一起,互相靠近(相对于其他物体)的物体看起来属于一组,而那些距离较远的就不是。
7.分组 Grouping
分组其实和接近性息息相关
分组只是在接近的功能外加上一些图示以作区别。
8.对称 Symmetry
这也是格式塔原理中的一条:我们的视觉其实倾向于分解复杂的常见来降低复杂度。我们的视觉区域中的信息有不止一个可能的解析,但我们的视觉会自动组织并解析数据,从而简化这些数据并赋予他们对称性。
自然界中的三种对称:
- Reflection
- Rotation
- Translation
对称在界面中的应用:
9. 映射 Mapping
映射表示两组事物要素之间的关系
映射也同接近性和分组性息息相关
我们不会在客厅里开卧室里的灯,因为开关与灯的映射决定了哪个开关控制哪盏灯。
当一系列的操作是可见的,当控制和显示契合自然映射时,设备就会容易使用。
10. 示能 Affordance
”我们可以拿这个东西用来干嘛?“
指一个物理对象与人之间的关系(无论是动物还是人类,甚至机器和机器人,它们之间发生的任何交互作用) 示能是物品的特性与决定物品预设用途的主体的能力之间的关系。
如果示能和反示能不能够被察觉到,就需要标识出来。 (通过意符)
示能是存在的,即使他们是不可见的。
对于设计师来说示能得可见性至关重要:可见的示能对操控提供了有力的线索。
不需要标签或说明书的帮助,预设用途 (Perceived affordances)帮助人们了解采取什么行动来操作。
而我们把示能的符号提示功能叫做意符。
11. 意符 Signifiers
示能决定可能进行哪些操作。
意符则点明操作的位置。
示能解释了世界上作为主体的人,动物或机器如何与其他东西进行互动的可能性。一些示能是可感知的,其他则是不可见的。
意符是信号。一些意符是生活中得符号,标签和图样。
示能是人和环境之间可能的互动,有些是可见的有些不是。
预设的用途 (Perceived affordances) 经常表现为意符,但经常模棱两可。
意符是一种提示,特别告诉用户可以采取什么行为,以及应该怎么操作。 意符必须是可感知的,否则它们不起作用。
12. Progressive Disclosure
渐进式呈现(Progressive Disclosure,以下简称PD)起初是一种交互设计理念,即先把重要的信息呈现给用户,次重要的信息根据用户的需求后呈现。可用性专家Nielson(2006)把PD定义为“把高级的或者不常用的特点推迟(defer)到次要的页面(或位置)显示,让界面更易用,降低用户犯错可能性”。在移动网页设计中,因为移动终端屏幕大小所限,PD已经成为一项很重要的基础设计原则。
渐进式呈现同设计原则中的 简单化 Simplicity 有着紧密的关联, 而二八法则也告诉我们,只要用户最常用的功能只有20% ,剩下的80%功能可以无需即刻呈现,帮助用户简化做决定的流程