App设计体系之按钮

1、类型

按钮类型包括填充按钮、描边按钮、切换按钮、文本按钮，权重依次降低。

2、表现形式

按钮的表现形式包括文字+背景、icon+背景、文字+icon+背景、纯文字、纯icon、文字+icon。

“icon+文字+背景”的按钮不仅需要注意icon在文字前面，还需注意按钮内容(icon+文字)的视觉平衡，像上图的“+ 按钮”，因为“+”相较于“按钮”在视觉要“轻”，所以内容(“+ 按钮”)要往左偏移一些，具体偏移量根据实际调整。

3、状态

关于禁用状态的按钮

禁用状态的按钮使用品牌色，通过降低不透明度来表示禁用，此类按钮也称为「召唤类按钮」，暗示该按钮需满足条件才可被点击。

登录注册页，当输入了正确格式的电话号码，“获取验证码”由禁用状态转换为可点击状态，输入了验证码后，“登录”按钮由禁用状态转换为可点击状态。

通过颜色来定义按钮意义，比如删除是红色，起到警示作用。

4、大小

Android 的按钮规范建议最小尺寸是 48dp*48dp，iOS的最小点击范围是44pt*44pt

优先从高度入手，再去定义宽，按钮内容的最大宽度(W)应该大于最大高度(H)的 2～3 倍，W=2*H～3*H。

按钮圆角的范围，不大于高度的 1/4。

5、按钮优先级

复杂界面包含多个按钮时，应先定义优先级再决定表现形式，权重最高的是 「定金支付」，权重最低的是「前往新品页」。

权重以按钮高度区分

高权重：40-56pt

中权重：24-40pt

低权重：12-24pt