按钮对于UI新手就是一个简单的长方形矩形，设计时会忽略按钮设计要注意的细节，甚至标注时候遗漏一些需要标注的参数，导致开发产生偏差，视觉还原度不好。
按钮在表面看的属性从远到近是颜色、形状、字体，但是真正的按钮属性并不止这么简单的这三个属性。
这里我以标注一个简单按钮为例，分析下按钮应考虑的属性。
由此可以推断出按钮的有六大属性：颜色／形状／字体／大小／投影／留白。
无论是几个互联网巨头的设计规范，以及最近新出的谷歌规范，能看到关于组件部分，第一个组件设计的就是按钮。
在做标注时，我们经常就会忽略一个最重要的使用规则，按钮中的内间距，还有按钮外间距，这决定了按钮跟其他元素的合理距离。
在原子理论里UI组件最基础的元素从原子开始的。
按钮就是最简单的原子，通过按钮的可继承属性（按钮高度，按钮圆角，按钮文字字号等属性）。为了排版布局的整齐和一致，其他原子（输入框、单选多选框、搜索条等）也会继承这些属性，因此按钮在设计语言的组件设计中占有举足轻重的地位。
因此当我们在设计语言中定义按钮时，一定要思考这六大属性，它不单纯影响自己的呈现，还影响了其他原子的属性。
了解按钮设计的这六大属性，我们就能设计好按钮了么？
当然没这么简单，我归纳了三大设计原则，遵循设计原则，才能保证按钮真正实现它的商业价值和用户价值。
以上各种形状都可以运用到按钮上，当然其他不一样的形状。
例如圆角矩形基础上做适当的变化，按钮属性还是可识别的。
色，常见的App按钮根据品牌主题色有着不同色彩。
字，作为按钮的信息引导，必须存在文字或图形符号引导用户交互，否则就不是按钮。
无论是什么颜色什么形状的按钮，必须有关键文字描述或者图标解释，就无法构成按钮元素。
我们设计按钮时不能只设计一种状态，在交付给研发前要把常见的几种交互都设计好。
按钮的重要性体现在按钮文字引导／按钮大小／按钮周围留白以及按钮所处的位置，按钮数量的控制。
按钮要设计合理，才能有良好的引导性，用户才能正确明白按钮的操作功能。
如果按钮文字表达不清晰，用户会误解。
一个引人注目的引导性按钮通常足够大，可快速找到，但又不能太大，以免影响干扰内容阅读。
根据格塔式原理，亲密性高低不同的组件，根据留白不同产生不同的关联性。文案跟按钮之间的间距适当缩小，能让用户明白他们之间关联，让按钮区别与其他组件。
不论是网页还是APP，按钮一般处在信息正下方，或信息右下方便于用户的右手操作原则。
（1）如果按钮过多，不分主次，用户就会疑惑不知道如何操作
注意避免同饱和不同颜色的按钮出现，一个用填充颜色（重），一个描边颜色跟随主要按钮颜色（轻）。
（2）如果按钮场景有特殊情况，就需要设计合适场景的按钮
按钮的操作是不可逆的操作应该赋予更多的视觉重量，用户可能并不明白危害性而下意识操作，或者误点了操作。
按钮在不同背景下呈现情况不同，因此要考虑浅色按钮样式。
同样存在不同使用场景中，按钮要设计多种尺寸以适应不同的场景需求，小、中、大、特大等等。
设计趋势随时在变，按钮的风格也时刻在变化，唯一不变的就是按钮的六大属性以及作者为大家总结的三大设计原则。
按钮的设计是UI设计规范中最简单的一环，但是同时也是最重要的一环。
希望各位大家在工作中学会巩固自己的知识，以小见大，在追求不同的设计风格趋势的同时，别忘了UI设计最基础的基本功之一：保持风格的统一性，从一个简单的按钮设计开始。
本文由@凌凌原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
版权声明：本站所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请举报，一经查实，本站将立刻删除。