提升按钮设计体验的三大设计原则

图片版权所属：站长之家

按钮属性解剖

按钮对于UI新手就是一个简单的长方形矩形，设计时会忽略按钮设计要注意的细节，甚至标注时候遗漏一些需要标注的参数，导致开发产生偏差，视觉还原度不好。

按钮在表面看的属性从远到近是颜色、形状、字体，但是真正的按钮属性并不止这么简单的这三个属性。

这里我以标注一个简单按钮为例，分析下按钮应考虑的属性。

由此可以推断出按钮的有六大属性：颜色／形状／字体／大小／投影／留白。

无论是几个互联网巨头的设计规范，以及最近新出的谷歌规范，能看到关于组件部分，第一个组件设计的就是按钮。

在做标注时，我们经常就会忽略一个最重要的使用规则，按钮中的内间距，还有按钮外间距，这决定了按钮跟其他元素的合理距离。

在原子理论里UI组件最基础的元素从原子开始的。

按钮就是最简单的原子，通过按钮的可继承属性（按钮高度，按钮圆角，按钮文字字号等属性）。为了排版布局的整齐和一致，其他原子（输入框、单选多选框、搜索条等）也会继承这些属性，因此按钮在设计语言的组件设计中占有举足轻重的地位。

因此当我们在设计语言中定义按钮时，一定要思考这六大属性，它不单纯影响自己的呈现，还影响了其他原子的属性。

按钮的设计原则

了解按钮设计的这六大属性，我们就能设计好按钮了么？

当然没这么简单，我归纳了三大设计原则，遵循设计原则，才能保证按钮真正实现它的商业价值和用户价值。

1. 按钮的可点性

UI界面中如果需要用户理解设计越长可用性就越差。设计必须在考虑把界面做得酷炫前，让用户知道按钮是“可点击的”。

因此按钮至少要考虑从形、色、字上创建识别为可点击的按钮。

多种形状按钮 图片来源Dribble