如何做好按钮设计

按钮的不同分类如下：* 动作按钮* 常用按钮样式* 按钮的颜色和形状* 按钮状态和反馈* 标签按钮* 触摸屏按钮* 按钮的位置* 系统按钮* 总结 动作按钮 我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。 1_1.行为召唤（CTA / C2A）在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。 行为召唤按钮对于CTA按钮，我喜欢使用圆形按钮，这样会更引人注目。 1_2.主要操作按钮虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器，可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。主要操作按钮对于主要操作，我喜欢使用实心按钮。 1_3.次要操作按钮从“返回”的辅助按钮到“下一步”的主按钮，或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。 主按钮旁边的辅助按钮的两种设计我更倾向于使用线性按钮或文本链接作为辅助按钮。 1_4.三级按钮三级按钮通常用于其他操作，可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容，前提是它们不是主要操作。不同形式的三级按钮一般来说，人们会使用较小或较不突出的按钮样式。 常用按钮样式 下面我们将介绍常见的按钮样式，不同风格的按钮样式和他们的使用技巧。 2_1.实心按钮实心按钮是带有实心填充的按钮。 一个实心按钮 2_2.线性和幽灵按钮线性按钮和实心按钮正好相反，一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色（在白底下按钮的轮廓和文本颜色深一点更明显），将幽灵按钮视为深色（在黑底下按钮的轮廓和文本颜色浅一点更明显）。 线性按钮（左）和幽灵按钮（右） 2_3.圆形按钮圆形按钮其边缘设置为最大圆角半径。 圆形按钮 2_4.FAB（悬浮按钮）悬浮按钮是一种巧妙的设计模式，Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮，但实际上它们用在屏幕上的主要操作按钮。

接下来我们就来聊聊制定按钮规范时会遇到的一些问题，虽然只有普通按钮，但还是有很多细节值得我们思考学习。

大纲如下

1、 按钮的类型

2、 按钮的状态

3、 按钮的主次关系

4、 按钮的设计尺寸

5、 按钮的圆角

6、 按钮的文字

7、 按钮的样式一致

8、 按钮的色彩

9、 按钮的摆放位置

1、按钮的类型

按钮包括很多种，本文主要分享的是我们在设计中经常运用到的一些按钮类型。比如普通按钮、图标按钮、文字按钮、下拉按钮等等

2、按钮的状态

按钮的状态一般分为三种：正常态、不可点击状态、点击状态。

正常状态就不必多讲了。按压状态：我常用的一种方式是将按钮的不透明度改为80%- 85%:

不可点击状态，也推荐两种实现方式，一种是降低为30%的透明度，另一种是直接置灰:

3、按钮的主次关系

页面的内容信息可以通过文字的大小、颜色形成层级关系。同样按钮设计，我们可以在风格上进行区分，让主要按钮与次要按钮形成差异，达到层级结构的视觉提升，更好引导用户根据设定的轨迹进行操作。

4、  按钮的设计尺寸

4.1   合适的大小

按钮需要方便用户进行点击操作，如果用户点击失败或者误点到周边元素，就会带给用户不友好的体验。若是带有文本的按钮，只要文字大小不要小于极限值即 移动设备上 44 * 44 ，通常实现出来的按钮交互热区都会满足点击需求。

4.2 按钮的高度

每个平台都会有多种型号的按钮，我见过最多的可以分为5种：超大按钮、大按钮、中按钮、小按钮，超小按钮，这个可以根据自己平台的需要来制定多少种。每一种按钮都需要有一个特定高度，那么这个高度如何制定才比较科学呢？这里可以推荐一种方式，就是按钮的高度是文字的三倍左右，这样看起来会比较舒服：

4.2 按钮的宽度

在不同的页面中按钮的宽度是随机的，所以按钮的具体宽度我们需要具体的功能来设置。

比如在闲鱼 APP的登录页、购买页中，按钮的宽度都不是相同的。

5、  按钮的圆角

对于按钮边框来说，我们通常采用全圆角和小圆角居多，这样显得稳重大气。 一般我采用全圆角的圆角值等于按钮高度值的一半，而小圆角的圆角值通常控制在 1/4H（高度值的四分之一）以内。

同时要注意的一点是，在同一款产品中要保证所有按钮的  圆角比例是一致的，而不是圆角一致  。如果不同大小按钮的圆角都是一致的，那会显得非常别扭。

6、  按钮的文字

按钮文字和边框的设计要预留一定的留白，不要做“舍不得”的设计，使得按钮给人感觉很拥挤。如果你把控不好可以分析一些按钮的负空间获取经验，看看文字大小和负空间之间是否存在某种比例关系。找到这个比例关系运用到按钮设计中，也许会让你的设计显得更加成熟稳重。

建议按钮的文字一般  不要超过6个汉字  。

7、  按钮的样式一致

在同一页面中  按钮的样式要形成一致  ，不要给用户造成理解上的成本。

8、  按钮的色彩

颜色部分比较简单，一般会选用规范体系的颜色即可。但像红色或者橙色多为行动刺激作用，不适合在非品牌色的时候滥用。浅灰色或者低饱和度的色系会带有不可用、禁用、失效等属性，需要酌情选择。

9、  按钮的摆放位置

按钮的摆放位置通常要  结合用户的视觉感受、与用户操作习惯  进行摆放。

好了，以上就是关于按钮规范的分享，希望能帮助大家提供一些思路和灵感，欢迎交流！

1.要与品牌相符

按钮要和品牌一致，颜色、视觉风格要和Logo差不太多。你可以从Logo中借鉴形状、材质、风格等等。如果Logo是圆形的，那么按钮也可以试试圆形以及其他能够引起行为召唤的形状。

形状、色彩、材质、图案、字体，都能影响到用户浏览的体验。

如果一款界面扁平化色彩占主导，那么尽量不要使用拟物风格的按钮。当然，如果你基本功过关，可以试试进行风格混合，色彩、形状、效果、各种装饰手段都可以试一试。

2. 要与上下文内容相符

跟上一条其实差不多，快别再用”套件PSD”了，虽然它们看起来效果很棒，但那是别人的设计，放在你的界面中可能有点”驴唇不对马嘴”了!要记住，界面中”内容为王”，可不是”为了按钮漂亮而进行设计”!

3. 确保按钮用于足够的对照

很多界面设计深受苹果影响，很多UI套件一看便知，按钮在其中可能会显得不甚显眼。补救措施是利用色彩、大小、留白、字体来提高按钮的视觉表现力，从而引导用户交互。

重要的按钮需要做出强调

4. 可以考虑圆角或者直角的按钮

如果界面元素中很多都是圆角的，那么按钮不妨做成直角的，这样对照感就会很强烈，能够引起行为召唤。

5. 次要的UI元素可稍微削弱

一些次要的UI元素或者按钮可以通过减少装饰性的方式进行削弱，以突出主要按钮。

更少的阴影效果，更不明显的斜面和见面，这样就能突出主要元素了。

削弱其他UI元素=突出主要元素(超级按钮)

6. 按钮的边框

我们看到的大多数按钮都有边框。如果你的按钮比背景颜色深，那么使用深色边框会显得非常好看/可爱，无边框效果也不错。如果按钮比背景颜色浅，那么无边框会显得特别杂乱，唯有使用深色的边框才能让按钮看起来”精神饱满”。

7. 要谨慎对待模糊的阴影

我个人有一条”阴影定律”，讲的是：当元素比背景颜色浅的时候，投影效果最佳，元素比背景颜色深的时候，那么阴影要慎重使用。

这跟边框有点像。这条定律很好用，其他UI元素也适用。

模糊的阴影在浅色背景下效果较好，深色背景下阴影效果都不错。

8. 多利用符号/图标

就比如说箭头，绝对要比文字的描述更直观。

箭头朝右，可能意味着离开此页。箭头朝下，可能意味着打开下面的内容，或者打开下面的菜单。

9. 分清主、次、第三重要

如果你的界面功能点很多，那么就很有必要设计一套主要、次要、第三重要的按钮。

主要按钮视觉表现力最强，次要稍弱，第三重要按钮比次要还要差一点。可以修改这些样式：颜色、阴影、大小、留白、装饰手段等等。

10. 按钮一定要有反馈状态

这一点很容易被忽略，那就是按钮在操作中一定要有反馈，让用户明白发生了什么。因为用户会按照真实生活建立认知模型，如果你的按钮反应不似真实用户，用户会感到失落。

通过一些简单的CSS调整，诸如阴影，边框、渐变便能实现反馈效果。

默认状态、悬停状态、点击状态、忙碌状态、失效状态