UI界面中的按钮设计总结

一天，领导丢过来个需求，要求改一下页面上的一个按钮。小陈想，按钮简单啊，很快就画好发过去了，没想到被领导打回来说不行！

小陈看着自己做的按钮，一脸茫然，这个按钮饱满诱人还亮晶晶的，怎么就不行了呢？

是不是初入职场的你也遇到过类似的问题呢，下面将从以下三点来分析，希望能帮助到大家。

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

一、按钮的设计要点

1.1、按钮的设计尺寸

根据 iOS 和 Android 给出的建议，在界面设计中，按钮尺寸至少高于 5.5 毫米（36 pt），否则用户点击时会较为困难；iOS 提出的44 pt，Android 提出 48/56 pt，都是用于特定场景下，具体情况还需具体分析；

按钮尺寸一般有2种设计形式：

1）按钮长度固定，文字长度变化

2）按钮长度根据文字长短而变化，这种情况文字距离按钮上下左右边距一般成一定比例关系

1.2、按钮的形状样式

1）按钮形状：按钮设计时，需要根据产品属性和界面风格设计合适的形式，按钮形状主要有直角、小圆角、全圆角三种样式。

直角按钮：直角具有严谨、力量、高端的特点。适用于金融类、奢侈品类产品中，给人严谨安全、高端的感觉，符合产品调性。例如京东金融

小圆角按钮：小圆角具有稳定、中性的感觉。适用于用户跨度较大的常规类产品中，例如微信、滴滴。

全圆角按钮：全圆角具有活泼、年轻、安全的特点。适用于儿童类、年轻化、娱乐类、购物类的产品中，具有亲和力，拉近与用户之间的距离。例如淘宝、京东、爱奇艺。

2）按钮样式：按钮样式主要分为面形、线性、文字加图标、文字按钮等，视觉优先级：面性>线性>文字

1.3按钮的状态变化

在界面设计中需要考虑按钮不同状态的设计，从而提高用户操作流畅度。移动端常用的按钮可以分为正常状态、按压状态、禁用状态三种。

其中，正常状态展示的是APP的主色；按压状态在正常态的基础上叠加15%不透明度的黑色#000000蒙版；禁用状态是设置灰色或者将正常状态设置45%不透明度。

通过上图的对比可以发现，都是不可点击，纯灰色按钮更像是禁止且不会被可用的状态。而使用品牌色，降低不透明度，可加强用户对该产品按钮的认知。且暗示用户该按钮满足条件即可被点击，所以个人觉得第二种方案会更合理。

另外，根据现在网络速度的发达，按压状态慢慢被忽略。