“按钮”这个元素在app或网页中随处可见，使用场景也是多种多样的。今天就来说说吧~

什么是按钮

关于Button的官方概念描述就不多说了。在我的理解中，按钮是“用户界面的可点击和可触发的即时操作媒介”。

02按钮类型

就按钮类型而言，有四种类型的按钮:主按钮、辅助按钮、虚线按钮和链接按钮。主按钮在同一操作区域最多出现一次。

从承载媒介来区分，有文字型的、图标型的、几何型的从样式来区分，有线型的、面型的。从组合方式来区分有组合按钮和单个按钮

这里主要描述和区分几何按钮为常规按钮。

03按钮状态

按钮分为:

常规(normal/primary)悬浮（hover）点击（click）不可点击（disabled）

一般主按钮可以选择符合产品调性的按钮颜色，而浮动按钮(PC状态)和点击按钮则需要给出一定的视觉反馈。我常用的方法是在悬停状态层顶部覆盖15%透明度的白色，在点击状态层顶部覆盖15%透明度的深色。

当状态被禁用时，它可以变灰。

04按钮属性

根据属性分为四种类型:

危险:删除/移动/修改权限等危险操作一般需要二次确认。比如微信表情的删除。红色警告，需要二次确认。

Ghost:用于背景颜色复杂的地方，常用于首页/产品页面等展示场景。

禁用:当动作点不可用时，通常需要写解释，灰显或禁用。

加载:用于等待反馈时的异步操作，也可以避免多次提交。

 

05按钮样式

1.规模

在移动端，根据手指触摸屏幕的最小触摸面积，按钮尺寸平均为10-14毫米，指尖长度为8-10毫米，因此10毫米x 10毫米是最小触摸目标尺寸。在iOS人机交互规范中，44*44的最小触摸面积是手指触摸的最小尺寸。因此，我们可以根据不同设备PPI不同时的处理大小，通过设置移动端触摸大小的最小触摸区域大小来设置按钮的大小。

web终端或其他终端需要根据实际使用场景和比例调整相应的尺寸和高度。

在比较了许多在线产品的尺寸后，传统按钮整理出了一个大致的范围:

移动端：按钮高度35px-50px之间，字号13pt-17pt，圆角4-8web端：按钮高度24px-48px，字号12-18，圆角6-10其他端则需根据具体的场景比例来调整。

2.圆角

根据按钮的形状，我们可以大致将它们的样式分类:

直角：严肃、专业、力量、高端（奢侈品、健身、金融）；0-12圆角：通用、中性、用户范围广（社交）；全圆角：年轻、活泼、亲切（儿童、娱乐、购物）；多边形：少见、个性、科技感、文艺；

根据产品风格，选择不同的圆角角度，突出产品的特点

3.风格

三维线框模型

渐变样式

3D按钮(阴影):

凸起按钮:

长阴影按钮

发光效果按钮:

带图标的按钮

按钮组:

块按钮，宽度根据页面的整体安全宽度而变化

环绕效果按钮:

表单按钮:

以上是今天的分享