Ant Design 设计原则与价值观

  发表于 2019 年 04月 02 日

  共 2.4k 字     预计需要 8 分钟      被浏览  

本文整理自Ant Design Documents文档,供个人参考学习使用。

  1. 自然
    • 在行为执行中,利用行为分析、人工智能、传感器、元数据等一系列方式,辅助用户有效决策、减少用户额外操作,从而节省用户脑力和体力,让人机交互行为更自然;
    • 在感知和认知中,视觉系统扮演着最重要的角色,通过提炼自然界中的客观规律并运用到界面设计中,从而创建更有层次产品体验;同时,适时加入听觉系统、触觉系统等,创建更多维、更真实的产品体验。
  2. 确定
    • 保持克制:聚焦最有价值产品功能打磨,使用尽量少的设计元素表达;
    • 面向对象的方法:探索设计规律,将其抽象成对象,增强界面设计的灵活性和可维护性,减少设计者的主观干扰;
    • 模块化设计:将复杂或重复出现的局部封装成模块,提供有限接口与其他模块互动,减少系统复杂度,增强可靠性及可维护性。

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. 即时反馈

『即时反应』的重要性体现在交互之后立即给出反馈。

就像『牛顿第三定律』所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

  • 查询模式
    • 自动完成:用户输入时,下拉列表随之匹配。
    • 实时搜索
  • 反馈模式
    • 实时预览:在用户提交之前,先了解系统如何处理他的输入。
    • 解决错误最好的办法,就是不让错误发生。
    • 进度指示:当一个操作需要一定时间完成时,就需要即时告知进度,保持与用户的沟通。 常见的进度指示:『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性,展示不同类型的进度指示。
    • 点击刷新:告知用户有新内容,并提供按钮等工具帮助用户查看。
    • 定时刷新:无需用户接入,定时展现新内容。

11. 关于视觉

看这里



设计      文摘 设计原则

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!

Growing with confidence, no fear of sorrow.