本文整理自Ant Design Documents文档,供个人参考学习使用。
- 自然
- 在行为执行中,利用行为分析、人工智能、传感器、元数据等一系列方式,辅助用户有效决策、减少用户额外操作,从而节省用户脑力和体力,让人机交互行为更自然;
- 在感知和认知中,视觉系统扮演着最重要的角色,通过提炼自然界中的客观规律并运用到界面设计中,从而创建更有层次产品体验;同时,适时加入听觉系统、触觉系统等,创建更多维、更真实的产品体验。
- 确定
- 保持克制:聚焦最有价值产品功能打磨,使用尽量少的设计元素表达;
- 面向对象的方法:探索设计规律,将其抽象成对象,增强界面设计的灵活性和可维护性,减少设计者的主观干扰;
- 模块化设计:将复杂或重复出现的局部封装成模块,提供有限接口与其他模块互动,减少系统复杂度,增强可靠性及可维护性。
1. 亲密性
信息之间关联性越高,距离就该越近,反之,距离应该越远。亲密性的根本目的是实现组织性,使页面结构和信息一目了然。
- 纵向间距关系:通过不同间距区分信息层次;
- 横向间距关系:为了适应不同尺寸屏幕,横向采用栅格布局排布,保证布局灵活性。
2. 对齐
在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。
- 文案类对齐:页面字段或段落较短时,确定一个统一的视觉起点;
- 表单类对齐:冒号对齐能让内容锁定在一定范围内,提高填写效率。
- 数字类对齐:建议数值取相同有效位数,右对齐。
3. 对比
增强视觉效果,同时在不同元素之间建立有组织的层次结构,让用户快速识别关键信息。
- 主次关系对比:突出的方法不局限于强化重点项,也可是弱化其他项。
- 在一些需要用户慎重决策的场景中,系统应该保持中立,不能替用户做出诱导用户的判断。
- 总分关系对比:通过排版、字体、大小等方式突出层次感,区分总分关系,使页面更有张力和节奏感。
- 状态关系对比:通过改变颜色、增加辅助形状等方法实现状态关系对比。
- 静态对比
- 动态对比
4. 重复
相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。
5. 直截了当
正如 Alan Cooper 所言:『需要在哪里输出,就要允许在哪里输入』。这就是直接操作的原理。eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。
- 页内编辑:
- 单字段行内编辑,当「易读性」比「易编辑性」重要时,可使用「单击编辑」。
- 当「易读性」为主,同时又要突出操作行为「易编辑性」时,可使用文字链/图标编辑。
- 多字段行内编辑。
- 拖放
6. 足不出户
能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。
变化盲视(Change Blindness) :指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》
心流(Flow) :也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
- 覆盖层:二次确认覆盖层,避免滥用Modal进行二次确认,应该勇敢让用户尝试,给机会「撤销」即可。
- 详情覆盖层:列表中,通过「悬停」或「点击」某个区块,在当前页加载该条列表项的更多信息。
- 输入覆盖层:直接进行少量字段输入。
- 嵌入层:列表嵌入,显示某条列表的详情信息,保持上下文不中断;
- 流程处理:
- 渐进式展现
- 配置程序
- 弹出框覆盖层
7. 简化交互
根据费茨法则(Fitts’s Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。
- 实时可见工具:如果某个操作非常重要,就应该把它放在界面中,实时可见。
- 悬停即现工具:如果某个操作不那么重要,或者使用『实时可见工具』过于啰嗦会影响用户阅读时,可以在悬停在该对象上时展示操作项。
- 开关显示工具: 如果某些操作只需要在特定模式时显示,可以通过开关来实现。
- 可视区域≠可点击区域: 在使用 Table 时,文字链的点击范围受到文字长短影响,可以设置整个单元格为热区,以便用户触发。
当需要增强按钮的响应性时,可以通过增加用户点击热区的范围,而不是增大按钮形状,从而增强响应性,又不缺失美感。
8. 提供邀请
很多富交互模式(eg:『拖放』、『行内编辑』、『上下文工具』)都有一个共同问题,就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。
意符(Signifiers) :一种额外的提示,告诉用户可以采取什么行为,以及应该怎么操作;必须是可感知(eg:视觉、听觉、触觉等)。——摘自《设计心理学 1 》
可供性(Affordance) :也被翻译成『示能』,由 James J. Gibson 提出,定义为物品的特性与决定物品用途的主体能力之间的关系;其中部分可感知(此部分定义为 Perceived Affordance),部分不可感知。——摘自《设计心理学 1 》
- 静态邀请:
- 文本邀请
- 白板式邀请
- 未完成邀请
- 漫游探索邀请
- 动态邀请:以响应用户在特定位置执行特定操作的方式,提供特定的邀请。
9. 巧用过渡
人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。
- Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。
- Receding: 与当前页无关的信息元素应采用适当方式移除。
- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
10. 即时反馈
『即时反应』的重要性体现在交互之后立即给出反馈。
就像『牛顿第三定律』所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。
虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。
- 查询模式
- 自动完成:用户输入时,下拉列表随之匹配。
- 实时搜索
- 反馈模式
- 实时预览:在用户提交之前,先了解系统如何处理他的输入。
- 解决错误最好的办法,就是不让错误发生。
- 进度指示:当一个操作需要一定时间完成时,就需要即时告知进度,保持与用户的沟通。 常见的进度指示:『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性,展示不同类型的进度指示。
- 点击刷新:告知用户有新内容,并提供按钮等工具帮助用户查看。
- 定时刷新:无需用户接入,定时展现新内容。