想让按钮设计更精致？收下这20条超实用的技巧

按钮产品界面中非常重的元件之一，按钮作用户引流行动触发都至关重的。如何把按钮设计做到最好，是设计师需要断探索的问题，把控好每一个细节才每一个元件更精致。

本文家梳理总结了 20 条设按钮时需避免的问题，希望这些设细节思考帮完避问题，把按钮设到好。

按钮设计强弱表现

整产品设中我们根据信息传递的优先级对按钮设行主次区分，设表达强弱差异。按钮设可以通过小、填充、描、色相、饱度的不同行强弱差异，不同强弱的差异表出按钮的级：行动触发、主、次、辅、禁用。

圆角设置要合理

对于按钮边框来说，我们通采全圆角和小圆角多，这样显得稳重大气。而大圆角按钮并非可，只是相对较，会显得按钮方圆的，设计表现显得够成熟。

全圆角的圆角于按钮高度的一半，小圆角的圆角我们通常控制 1/4H（高度的四分之一）以内（仅人参考，并非绝对）。

投影设置要用对色彩关系

给一个有彩色系按钮设置投影时，择无彩色系（如黑色）达到效果，只是为了得到更好的视觉效果，户感官体验。我们可尝试基于按钮本身色相来确定投影颜色，这样得到的效果会显得更干净清爽。

投影的使用勿过度泛滥

虽投影的运用以使按钮更有次感，但是也需要根据具情况慎用。比对一浅按钮来说也许投影反而降低按钮的识别度，使得按钮境显得不够干净清爽。

给按钮文字一点呼吸感

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

按钮设计别让用户思考

按钮存在是为了引导用户进引导操作，而不是让用户其生困惑。按钮设计让用户思考这是啥，是否可以击，需要简洁明了此操作进指引。如你设计按钮样与“标准”异太大，用户会生疑惑，影响使用体验。

样式表达的一致性

当设元素规范统一时，用户操作过程中的理解本低，一致性也因此力的可用性原则之一。我们设按钮的时候注意样式表达的一致性，比如：按钮形状、色彩义、风格特征，这样会使得我们的设可用性强。

箭头运用不是字符输入

一些初入职场的设计师会偷懒直接字符输入形成按钮需箭头，这样的表达方式自然显得粗糙些。箭头要当成图标来进行设计，控制好箭头的粗细和字笔画的粗细值接，这样显得更有细节和态。

按钮设计主次分明

通信息对比才能形成主次之分，按钮设计需要在风上进行区分，达到次结构的视提示。主要的按钮需要和次要的、辅助的形成差异，最大化突出主按钮的视效果，更的引导用户根据设定的轨迹进行操。

按钮设计不要让用户误解

在整个项目计规范中，需要避免让用户把非按钮状的内容进行误判。在确定好按钮式征之后，不要在其它景运用其式征或者类似的风格征，这会让用户产生错误的认知，因而进行无用的操作。

按钮文本表达要言简意赅

在进按钮文本思考时候，尽量减少符和单词数量，内容表言简意赅，要能够准确传信息识度即可。有时候也不定需要文本，图标可以传递信息可以考虑文本减少，也许可以让界呼吸感更强。

按钮文本设置切勿换行

单行文字的可读性高，如果出换行就会降低可读性。我们设按钮的时候，确保文本内一行之内显示，如果设空间不足考虑文本内的精简。

特殊场景要灵活转变

按钮的并非固定变，同机或者特殊场景的考虑需要灵转变。如 iPhone X 等类的机，由于需要预留页控制器的位置，在设计按钮的时候需要考虑上中的过渡衔接，这样才带给户更好的感官体验。

按钮大小要便于点击

按钮需要方便用户进行点击操，果用户点击失败或者误点到周边元素，就带给用户不的验。若是带有文的按钮，只要文字大小不要小极值，通常现出来的按钮互热区满点击需求。

如果是纯 icon 的按钮，除了按钮大小需要控制合适外，要确保交互热区够满足点击区域要求。

同属板块按钮大小一致

在同属板块内的按钮设计，我们以通按钮的强弱来现级关系，不要让按钮大小不一，样视平衡受到影响。

按钮设计考虑文本最大值

稍注细节的计也不会让文本的长度超过按钮宽度，这是一个非常显的错误。但是按钮文本变得长是遇见过的，个字即可表达的思却使用了过多修饰词。在进行按钮文本思考的候，要根据最佳的视觉效果定一个最大值，不要任其无限制发挥，这会使得最终的视觉效果大折扣，甚至响用户官体验。

保持按钮可读性

按钮设计需要考虑在不环境下适应度，确保用户可以目了然发现它。现在很多品都适配了深色主题模，按钮配色不能考虑白色或者浅色背景下运用，需要考虑大多数背景下适配。在进色选择时候，始终保持按钮与背景高比度和可读性。

按钮去文本是否合理

关于按钮文本的设置需结合信息传递的识别性准确性，虽然纯图标显得设简洁方，但需考虑图形否可以准确的表达其含义，不会让用户出误解或者错误的认知。所以，按钮去文本需根据文案表的含义判断，如果不需辅解释也能判断出按钮的意思，那么简洁的设表达效果。

正确判断按钮颜色选择

色彩在设计中是最直观的体现，同的颜色会传递同的性格，带给户认知差异。而按钮的颜色择并非随性发挥，需要结合牌色和辅助色作判断。

通常比较统一的标准采用品牌色作部分按钮的颜色，遇到一些需差异化的按钮会选择辅色表达，色或者橙色多行动刺激作用，不合非品牌色的时候滥用。浅灰色或者低饱度的色系会不可用、禁用、失效属性，需酌选择。

按钮位置结合用户体验

引导户作择的按钮应该放在左边还是右边，根据操作系统的同引起了设计师们的争议。如 Windows 系统习惯将确认按钮放在左边，而苹果系统却择了放在右边，户系统的习惯会影响行为的适应。过要是在移端个人倾向于将引导户作择的按钮放在右边，更有利于户点击（特殊人群这里需要除外）。

时候了防止用户误操作，我们会将确认操作的按钮左，通过力设让用户再次确认。所以，一方面我们结合操作系统的习惯，另一方面也结合用户习惯，将按钮合的置，便于用户操作。

小结

作为设计师来说，对每一个细小的元素进行深入思考和总结，才我们设计更好的解决方案。一枚小小的按钮设计，背后有很多需要探索的东西，本为大总结了 20 条经验，相信还有更多值得梳的细节，期待更多设计伙伴挖掘。

文中观点日常设验总结，可结合实际况选择性运用，希望可以给家多思考。