按钮包含非常广泛，界面中无处不在。大家都体验过：按钮看似很简单，但在设计时也常纠结该用什么按钮样式吧？本文在对按钮简单介绍后，会列举多个平台对按钮的样式，可作为设计过程中的参考。

按钮按样式可分为：悬浮按钮、 填充按钮、线性按钮、图标按钮、 文字按钮。

一般，同样大小和颜色的情况下，视觉强弱排序为：悬浮按钮＞填充按钮＞ 线性按钮＞ 图标按钮＞ 文字按钮。

一般功能越重要的按钮用视觉强度越强的样式。（按钮的视觉强度还可以从位置、颜色、大小、投影、纹理等方面调节。）

1.因为悬浮按钮始终悬浮在界面上，不随界面的滑动而变化，对下部内容有一定的遮挡，如此重要的位置，必须是重要的功能按钮，且该功能贯穿整个界面，是用户随时可能点击的。

如：百度地图大量使用了悬浮按钮（因为用户在使用地图的过程中常多方位拖动地图，悬浮按钮对界面的遮挡变得无足轻重，反而最大程度上的节省了空间）：

2.UI设计中最常使用的按钮样式是填充按钮、线性按钮和文字按钮，以及它们的组合形式。

按视觉强度：填充按钮＞线性按钮＞ 文字按钮 ，有颜色的＞黑白灰的。

在按钮的组合中，文字按钮往往在填充按钮和线性按钮的右侧。

顺便讲一下按钮组合的位置：

a.按用户的操作习惯，一般右边是比较容易操作的区域，因此右边常放推荐用户点击的按钮。如游戏中途退出，确认退出弹窗往往是“取消”按钮放右边，确认按钮在左边。

b.按钮组合的位置应该居中、靠右、靠左还是……？

以下摘自优设网文章：

关于按钮组合的位置，作者测试结果是：方案A、B、C、D、F的完成时间和满意度都较好，E则不佳。据此，我们可以在符合界面的操作场景下放心大胆的设计我们的按钮位置了，但记得两个按钮不要离得太远，不要给用户造成不必要的困扰。

3.图标是另一种最常见的按钮，图标的样式亦多种多样，列举一些比较常见的风格：线性图标、断线图标、扁平图标、长投影图标、2.5D图标、写实图标等。

通常人类对图形的敏感度大于文字，因此图标是一个非常好的表意方式，即可以言简意赅，又可以丰富界面设计。图标也可以配合文字一起使用，更加明确按钮含义。

——————————以下是按钮参考（均来自网络）——————————

推荐阅读《关于ZAO——聊聊按钮设计 》：https://www.zcool.com.cn/article/ZMTAyODE5Ng==.html

—————————————————————————————————

ps，分享一下写作心得：本来这篇很久之前写过了，但是因为平台没有保存草稿功能，当我编辑到快完成时，由于某些原因，网页失效……当时内心万马奔腾，于是就停更了很久。但心里一直记挂着我的这个承诺，就是要把规范的这部分写完。最近得闲，重新审视了一下自己的工作，决定把这些漏网之鱼赶快补上。

尽管这些非常基础，未必多有价值，但自己总结的过程，是一次次从内心的确认，当看到一篇篇文章成稿，小小成就感升起。改变就是从这种鸡毛蒜皮的小事开始的。

之后会把数据类、反馈类、布局类、字体、图标这几大类写完。

Powered by Froala Editor