网站基础控件设计原则&规范——命令按钮

1. 网站全局性设计问题整理及解决 — 命令按钮
开始
用户体验部 | UDC | 李龙

2. Contents
 前言：Why & How
 网站中命令按钮的使用情况
 问题归类
 命令按钮定义、核心功能、核心原则
 命令按钮使用原则 & 规范

3. Why?
效率 质量

4. How?
1. 尊重习惯，延续习惯，通过一致形成习惯
注： 我们不追求绝对正确，通过一致形成的习惯就是正确。
我们基于现有的情况和理解形成一致。
2. 先对现有使用情况进行整理和归类，发现问题，
针对性的辨析和解决

5. 网站中（命令）按钮的使用情况

6. 首页+搜索

7. Detail

8. 交易

9. 后台

10. 后台

11. 行业

12. …
…

13. 问题
 应用场景多
 样式很多
 层次和优先级不清晰
 状态不全
 状态语义不准确

14. 什么是命令按钮
 命令按钮：
命令按钮（command button）是用于开始一个即时操作的交互控件，通常
情况下，这个操作是重要操作。
 命令按钮的两大特征：
可发现性： 其视觉样式赋予了强烈的视觉焦点属性
功能可见性： 其视觉样式（看起来像是可以被按下的）暗示了它的使用方法

15. 使用命令按钮的核心原则
一、不要滥用可发现性 —— 用于相对重要的操作和主要的命令
二、坚持功能可见性 —— 合适的样式以及完整的翻转状态
三、标签文案准确、简短、易于理解 —— 易识别，无歧义

16. 命令按钮的设计规范 —— 1
1. 根据操作对用户的重要程度，我们把按钮分为：主要按
钮、次要按钮、轻量按钮三个层级。同一页面中按钮的层次
不要超过这三个，每个层次的按钮样式只有一种或一个系
列。
注：三个层级是基于操作对用户的重要程度来区分的，并不是基于视觉样式来
定义的
注：每条产品线需定义好本产品线所使用的三个层级的按钮（如ppt后的模板
表格），并在产品设计当中严格执行

17. 命令按钮的设计规范 —— 2
2. 任意一个命令按钮在使用中都需要具备normal、hover、这
两种状态，保持其功能可见性的完整，并给以用户良好的交
互反馈。在需要并且适当的情况下，可以增加disable、和
down（active）的状态。（以下为示例）
Normal Hover Disable Down （active）

18. 命令按钮的设计规范 —— 3
3. 建议通过发光位置变化、高亮、清晰度增强、边框增强等
方式，表达此按钮的hover状态。不要使用变暗、降低清晰度
等方式，这样的语义是不恰当的；通过去色+减弱文字与背景
对比度的方式表达按钮的disable状态
normal hover normal disable
normal hover normal disable

19. 命令按钮的设计建议
光源：光源统一来自顶部，垂直90°照射至按钮表面
光感：按钮顶部需有一像素高光，提升按钮体感
质感：亚光
剖面：按钮表面微凸，不宜给用户造成明显的弧度感
阴影：若有此效果，阴影效果必须90°垂直向下
尺寸：文字内容与按钮边框的最大、最小边距为图例中所标示

20. 与其他控件的设计辨析 — 命令按钮 & 链接
 如该命令是次要的，于当前页面的主要目的没有关系，则轻量级的命令
按钮或链接则更为合适。 （以下为示例）
 如不是基于线性流程的主要逻辑，而是导航至相关页面、显示帮助主题、
和辅助内容等，使用链接更为合适。（以下为示例）
轻量级的命令按钮：
链接：

21. 与其他控件的设计辨析 — 命令按钮 & 选项按钮
 如存在多种可能操作，且需要用户在决定前查看附加信息时，考虑将选
项按钮于命令按钮组合使用。 （以下为示例）

22. 与其他控件的设计辨析 — 命令按钮 & 分割按钮
 可以用分割按钮来组合一个命令的一组变化，尤其是当其中一个命令特
别常用时。 （以下为示例）
注1：与下来菜单或者命令菜单等控件不同的是，单击按钮的左侧部分，将直接执行
标签文本上所示的动作。
注2：在某些特定场景中，当下次操作往往与上次操作相同时，分割按钮会非常有效

23. 产品线命令按钮设计规范表格模板
按钮状态
产品线 按钮层次
normal hover disable down（active）
主要按钮
次要按钮
轻量级按钮