05 按钮样式

1. 尺寸

在移动端，按钮尺寸根据手指触摸屏幕的最小点触区域，平均长度在10-14mm之间，指尖的长度为8-10mm，所以10mm x 10mm就是一个最小触摸目标尺寸。在iOS 人机交互规范里面的 44*44 最小点触面积，就是手指点触的最小尺寸。所以我们可以根据这个在不同设备不同 PPI 时处理尺寸，在移动端设定点触尺寸的最小点触区域大小来设置按钮尺寸的大小。

web端或者其他终端则需要根据实际使用场景及比例来调整对应的尺寸大小和高度。

在对比了多家线上产品尺寸，常规的按钮整理了一个大致范围：

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

2. 圆角

按照按钮的造型我们可以对其风格做大致分类：

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

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

3. 风格

线框

渐变风格

3D按钮（带阴影）：

凸起按钮：

长阴影按钮

光晕效果按钮：

带图标按钮

按钮组：

block按钮，宽度根据页面整体安全宽度变化

环绕效果按钮：

表单按钮：

以上是今天的分享

作者：就不，公众号：猪三的日常

本文由 @就不 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash， 基于CC0协议