按钮圆角
按钮尺寸还有最后一个属性,就是按钮的圆角设置了。矩形的边角有三种类型,即直角矩形、圆角矩形、半圆矩形。
为矩形设置圆角,是为了让按钮看起来有一定的圆润感不会显得太尖锐,这种圆角的数值赋予要适当,只要超出了一定的范畴,就会对视觉的和谐产生影响,我习惯称呼为——半圆不圆,如下图右侧的错误案例。
所以,我们在设计圆角的过程中,一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围,不大于高度的 1/4。例如,一个24pt的圆角矩形,圆角的尺寸就应该不大于 6pt,如上图的效果。
以上就是按钮相关尺寸定义的说明,当然,在真实的设计需求中可能遇到很多无法满足的情况,这就需要大家多做尝试了。
2. 输入框
输入框也是我们比较常用的元素之一,它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框,以及首页上方的搜索栏了。
输入框的使用高度尺寸,常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤,比如我用下面同学的案例做个演示。