图片版权所属:站长之家
按钮对于UI新手就是一个简单的长方形矩形,设计时会忽略按钮设计要注意的细节,甚至标注时候遗漏一些需要标注的参数,导致开发产生偏差,视觉还原度不好。
按钮在表面看的属性从远到近是颜色、形状、字体,但是真正的按钮属性并不止这么简单的这三个属性。
这里我以标注一个简单按钮为例,分析下按钮应考虑的属性。
由此可以推断出按钮的有六大属性:颜色/形状/字体/大小/投影/留白。
无论是几个互联网巨头的设计规范,以及最近新出的谷歌规范,能看到关于组件部分,第一个组件设计的就是按钮。
在做标注时,我们经常就会忽略一个最重要的使用规则,按钮中的内间距,还有按钮外间距,这决定了按钮跟其他元素的合理距离。
在原子理论里UI组件最基础的元素从原子开始的。
按钮就是最简单的原子,通过按钮的可继承属性(按钮高度,按钮圆角,按钮文字字号等属性)。为了排版布局的整齐和一致,其他原子(输入框、单选多选框、搜索条等)也会继承这些属性,因此按钮在设计语言的组件设计中占有举足轻重的地位。
因此当我们在设计语言中定义按钮时,一定要思考这六大属性,它不单纯影响自己的呈现,还影响了其他原子的属性。
了解按钮设计的这六大属性,我们就能设计好按钮了么?
当然没这么简单,我归纳了三大设计原则,遵循设计原则,才能保证按钮真正实现它的商业价值和用户价值。
UI界面中如果需要用户理解设计越长可用性就越差。设计必须在考虑把界面做得酷炫前,让用户知道按钮是“可点击的”。
因此按钮至少要考虑从形、色、字上创建识别为可点击的按钮。
多种形状按钮 图片来源Dribble