移动端按钮，我们最熟悉的陌生人

网上曾经流行这这样的一句话：我可以没有XX，但我不能没有手机。虽然是较为夸张的表达，但也印证了我们当前对于移动端设备的依赖。本次小编对移动端的按钮设计进行了一些研究，猛然发现，PC端有着键盘、鼠标等“虾兵蟹将”的辅助，而到了移动端，就只剩下了触屏点击这个“光杆司令”。如何做到优化移动端按钮设计的优化，来达到虽孤身一人，却有着千军万马的气势呢？下面我们将从如何设计移动端按钮以及具体的实例来和大家介绍。

1

如何设计移动端按钮

1 明确

1.1 形似按钮

当谈到设计按钮的UI 设计原则时，最重要的就是按钮的用途。为了实现这一目标，按钮必需要看起来像一个按钮才行。同样是按钮，不同的视觉符号（比如尺寸、形状、颜色、阴影等）会给用户不同的引导，合适的视觉符号才能帮助用户理解设计者的意图，使得元素看起来像按钮。

（很明显，有阴影、圆角的立体按钮更像一个按钮）

1.2 位置的可发现性

在为移动端设计按钮的的时候，清晰、顺从和厚度是三个主要的目标。不要让用户到处找按钮，它最好出现在用户所期望的位置。在为移动端设计按钮的的时候，清晰、顺从和厚度是三个主要的目标。

1.3 相应的操作标签

按钮上要具有准确的操作标签，这可以帮助消除模棱两可的用户指导，进而设计出无缝的体验。当按钮的文本标签上的内容写的太过于宽泛，或者使用带有误解的内容，可能会让用户感到迷惑。

2 合理

2.1 尺寸恰当

既是指按钮自身大小恰当，也是指两个按钮相比，更大的按钮应意味着更重要的交互。另外，在触摸屏按钮设计中还应让按钮适配用户的手指，按钮的设计太小了，这可能会导致用户出现误触的情况。

（右图按钮太小，会出现误触现象）

2.2 逻辑次序

按钮的顺序应该反映出用户和界面之间交互的属性，也就是说设计者应考虑用户期望在屏幕上看到什么样的顺序，或者说什么样的顺序更合理。

2.3 简单效率

这里所说的简单包含了数量和形式两个方面。数量上，当你提供太多的选择的时候，用户往往会无所适从，因此设计按钮时应尽量考虑最重要的操作，控制好优先级和复杂度。

形式上，注意按钮形状的统一，同一产品、同层级的按钮，风格、圆度要统一，反之显得页面混乱，一致性差，毫无规范。同时应避免过于花哨，否则会增加阅读难度。

2.4视觉层级

一个按钮所具有的功能越强，对用户路径就更有帮助；相反比较危险的操作，如退出、删除等，视觉上需要一定的弱化。

3 反馈

当用户点击按钮的时候，他们通常希望界面能够给予适当的反馈。因此，基于不同的操作，按钮应当给予视觉或者音频的反馈。

如果用户没有收到任何反馈的时候，他们可能会觉得界面没有收到他们的操作，从而反复点击，执行多次不必要的操作。对于某些操作，比如下载，不仅要告诉用户他们的操作执行成功了，而且要显示当前的进度。

（该按钮为用户呈现出提交过程以及提交成功的反馈）

2

移动端按钮典型与使用场景

1 大色块按钮

首先是目前使用最多的按钮样式，即扁平的填充色块加上文字或ICON，适用于绝大多数地方。由于强突出性，它非常适合用来引导用户，使客户第一时间就能锁定视觉焦点，并知道下一步的操作。

（大色块按钮的强引导性）

2 弥漫投影按钮

通常是在大色块按钮的基础上“加工”，在按钮底部添加与按钮同色或者更浅色的柔和的阴影。在大色块按钮的强突出性基础上，如果设计者还想让该按钮更突出，或者想让页面层级关系更分明，样式更靓丽，弥漫投影也许适合。

（弥漫投影能使重点更加突出）

3 渐变色按钮

在大色块基础上添加渐变效果的按钮，同大色块按钮类似，渐变色按钮的突出性和指引性也非常强，同时视觉效果也很出彩，但是也要根据产品调性来选择性的使用，渐变中的颜色也一般离不开产品的主色调。

（渐变色按钮的使用使视觉效果出彩）

4 幽灵按钮

基本上就是文字加描边的样式，幽灵按钮比起一般描边按钮更加弱化，在界面上视觉和谐度更高，但指引性不强。幽灵按钮多用于背景较为丰富的地方，它不会过于抢眼，也正因如此，它也可以与色块配合使用，使得界面的主体分明；需要大量按钮时，善用这样的样式，也不会使得界面颜色占用面积过多、过亮。

（幽灵按钮与大色块配合（左） 多按钮组合使用（右））

5 半透明按钮

顾名思义，按钮底部色块为半透明，显得比大色块按钮甚至幽灵按钮都要更加轻盈，视觉上和谐度也更高，但指引性最低。不作为指引性的按钮时，半透明按钮也可以配合大色块按钮使用，使得界面主次分明。相对地，如果仍想用它作为引导，且保持界面的和谐度，在使用半透明按钮的同时避免使用大色块按钮即可。

（半透明按钮的两种用法）

本次对于移动端按钮的介绍就先到这里，希望本文介绍的相关技术和设计思路可以增加大家对于移动端按钮设计的了解，也希望大家从本文理论和示例中可以得到一些启发。当然，按钮的设计随着时代的发展也在不断革新，感兴趣的同学也可以继续进行研究。希望本文对您有所帮助！

参考资料：

https://translate.sogoucdn.com/pcvtsnapshotorigin?url=https%3A%2F%2Fmedium.com%2Fdesigned-thought%2Fdrop-down-button-vs-split-button-f8e539fc0b78&query=&tabMode=1&noTrans=0&tfr=web&from=en&to=zh-CHS&_t=1543914947967

https://baijiahao.baidu.com/s?id=1598224518406666246&wfr=spider&for=pc

http://www.sohu.com/a/235037812_114819

http://www.sohu.com/a/235037812_114819?qq-pf-to=pcqq.group

图片均来自于网络，如对您的权益产生侵害，

请与作者联系删除，谢谢！

观点分享：崔瀛、肖瑞琪、周凡倩

责编：黄杰