解决按钮的位置、顺序、视觉强调程度问题
设计目标
- 通过流畅的阅读顺序，极大程度的帮助用户快速找到每个模块的按钮区域；
- 建立逻辑清晰的对话顺序，可以帮助用户快速找到需要操作的按钮；
- 通过视觉强调程度区分操作主次。
使用场景
基础规则可以在现有的模板、组件等设计资产中提供示例方案，满足简单场景需求；为基础规则无法满足复杂的场景提供设计建议，使用者结合按钮的设计目标，参考设计建议决策出与基础规则逻辑一致的解决方案。
按钮区的位置
虽然页面（组件）看起来各不相同，但每个页面（组件）都表达了一个主题。通过对页面（组件）分析归纳，我们可以将整体布局抽象为三个模块：Header、Body、Footer。
Header：放置影响全局的操作（如：编辑、新建、下载…）
Body ：放置对其跟随内容生效的操作（如：表单场景）：
对于内容复杂度高，比如有多个分组，每个分组都有独立的操作区。这时候需要将全局操作区与 Body 区分出来。
Footer ：放置针对当前界面完结、提交、保存类含义的操作；
页脚工具栏的存在是为了要和 Body 区分别开来，如果不是为了解决这类问题，那么让按钮跟随内容，以下情况可以使用页脚工具栏：
在应用中我们遵循经典“F”“Z”网页浏览模式作为我们按钮区位置放置规则的基础指导。将按钮区放置于用户浏览路径中，便于被用户发现，并且应尽量靠近其所控制的对象；
按钮顺序
遵循左对齐从左往右阅读，右对齐从右往左阅读的基础规则。
影响按钮顺序的因素
在决策按钮默认的阅读顺序时需要考虑以下四个方面：对话习惯、方向性含义、风险操作、响应式设计，以下顺序呈现了各因素在决策时的权重。
对话习惯
按照对话习惯排列按钮。界面中的按钮阅读顺序类似于一个用户和电脑的对话过程，按照日常对话的顺序设计按钮阅读顺序更自然。
注：当用户修改了一项设置，用户最有可能的行为是保存这项变更，所以不要不要询问是否取消保存
方向性含义
具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前；我们将“上一步”“下一步”视为一组完整的方向性含义按钮，同一组方向性含义按钮不可拆分不可更改顺序，如下图：
风险操作
可能造成损失的操作，应该尽量远离常用按钮并且视觉上弱化处理，在用户触发操作前通过视觉呈现给与用户警告。
溢出的按钮
在同一个模块的按钮区中建议按钮的数量在三个以内，建议将较次要的操作使用溢出「…」的方式展示。
按钮的使用规则
综上所述将位置、顺序、视觉强调三项变量组合，可以得到一个最基础的「基础规则」用于覆盖最简单的场景：
按钮的信息层级
按钮在信息层级通过视觉表达上有三个级别：主要，次要和普通。
主要按钮：用于主行动点，在一个按钮区域中建议最多使用一个主要按钮；
次要按钮：用于次要行动点，如果我们有许多具有相似重要性的行动在同一个按钮区域/界面中，或不确定要选择哪种按钮，次要按钮是较为安全的选择；
普通按钮：用于最次级的行动点，没有主次之分。弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景。
案例验证
确定按钮区域→确定按钮顺序→为按钮添加强调，以效果通新建广告为例：
0条评论