UI 按钮设计的五大核心原则
超实用的UI组件设计技巧
2015年前后，随着UI行业及UI的概念逐渐进入大家的视野。当时UI设计的行业标准还没有这么高，为了迎合一些企业的需求，设计师们会重点研究按钮、以及ICON图标，界面和图标做（chao）的漂亮即可。还记得当时反复临摹，精雕细琢按钮和图标，仿佛做好了组件，就能够胜任UI设计工作。实际上当年的情况也确实如此，也因为平时本身对造型研究的比较多，所以深刻理解到辅助图形对品牌识别体系的重要性。无论是互联网行业还是传统企业。
当年的就业环境也是如此，面试的时候拿着几套图标去面基本上就可以了，大概率是能够拿到offer的。甚至有很多企业和HR也不是很懂，只要图标画的好，工作不难找。但最近几年，行业标准不断提升，内卷化加速，普遍的企业偏好，对按钮绘制型设计师的需求度呈逐渐下降趋势，如今的局面，已逐渐呈现“π”型人才or“I”型人才的小趋势，所谓“π”型人才，即是指有两项垂直领域的专业度足够深，同时专业涉及面足够广。（这里指的并非一线or专业图标绘制版块）；
单一性的图标绘制型人才，也逐渐被慢慢忽略，尤其在一些中小型企业里面，UI更多指代的是全能手。但实际上，在这里我想说的是，按钮作为贯穿全套设计稿的元素之一，虽然不起眼，但我们作为设计师是对细节有要求的，而按钮也是作为UI组件中最高频和用户交流的核心对象之一，因此按钮在UI设计中仍然是非常重要的一个环节；
------------------------------------分隔线--------------------------------------
所以，研究按钮设计还是很有必要性的，下面我将和大家分享我总结的：六大按钮设计黄金原则。进而提升按钮设计的技巧，并将理论落地于设计。
当然更细以及更全面的设计规范，在这里就不做过多延展，后续会出规范篇，在这里我们更多聊的是按钮的一些可落地、可操作的的技巧，可以通过快速掌握这些小技巧，立刻提升项目的整体质量。
一：何为按钮？
在这里有必要先简单给大家阐述一下按钮的定义，那么何为按钮呢？按钮是设计系统和产品体验的关键组成部分，不仅仅可以帮助我们快速引导、导航。且不受任何语言、地区的限制，体积也很小。一般来讲，在大多数的界面中也都需要采取某种行为才能继续，无论是下载、转发、分享等等操作，他都无处不在，看似简简单单一个小按钮，实际上非常具有挑战性。
按钮具有几个定义特征
具有代表性的按钮必备之属性：填充色、描边、边框、投影、内阴影；除此以外，他还需具备一定的安全距离。Margin值（外边界）和padding（内填充）值；
按钮的造型，可通过改变圆角半径的值，变成矩形或圆角矩形
按钮内容早期多为提示性文本，现阶段多为图形图标，或文本+图标；
给按钮添加相应的标签，如“>”、“<”，即可提升页面的转换率，影响页面的停留时长等一些用户操作
更多的还包括，文本字体的颜色及样式
以上就是关于按钮的基本定义了，下面我将和大家分享关于按钮设计的几大核心原则。
一：按钮设计的五大核心原则
识别度要高，一眼就能认出来
按钮最初的形态，或许要追溯到iphone4刚进入中国、或再往前导，功能机时代了。通过长此以往早一批设计师们（这里更精确来讲应该是工业设计师、或工程师）对于用户习惯及认知的影响已根深蒂固，用户已形成了固有的认知，养成了操作习惯。并习惯于按钮就是矩形或圆角矩形（少数椭圆形、圆形）；如果我们重新推倒重来设计一款形态新颖、奇怪的造型。恐怕用户很难快速的认出来，增加了用户上手、学习、操作成本。这是不可取的
UI中的按钮普遍扁平化处理，其实也是基于以上的理论，扁平化更加容易被精准识别，所以这也正是扁平化风曾一度流行的原因之一。扁平化设计的按钮到现在也依然是不错的选择；中规中矩，不会增加额外的操作、认知成本。但拟人化、拟物化、2.5D、立体风格也仍需要作为补充存在于数字化界面中。要根据不同的应用场景，产品调性来去做最终决定；
“打破常规”、“绝无仅有”“稀奇古怪”的按钮设计不可取、例如使用“三角形”、“六角形”“五角星”作为按钮设计，如此会更耗费用户的时间和精力来识别当前元素是否可以点击。除非你的产品定位就是如此，否则这些都是不可取的。
如果在PC端设计，又不想使用常规按钮，可以考虑使用A标签，也就是带下划线的文本链接的形式作为按钮，颜色用点缀色、辅助色为最佳，或使用常规深蓝，做显示和隐藏；
站在设计心理学角度来讲，通过长期以往的行为暗示，用户已习惯性认知，带线的就是可以点击的，而google搜索页也在不断加强和重塑我们这一行为模式；
二：按钮设计的五大核心原则
尺寸的设置
举一个工业设计上很有代表性的例子，当我们买到一部新手机时，取卡换卡的过程是否觉得很麻烦？还需要使用卡针来取卡，还有大多数的智能设备也是如此，需要通过一个小卡针才能重置或者恢复出厂设置，为什么要这么麻烦，难到手机厂商的设计师们并没有考虑到这一点吗？并不是，正是因为，设计师预判到“取卡”、“换卡”、“恢复出厂设置”等一系列操作属于低频操作行为，为了避免误操作，才如此进行设计，让用户谨慎操纵。所以孔的尺寸是很小的
但是在UI界面中按钮是属于中高频操作行为，那么他应该设置到什么尺寸更为合理呢？
在这里，我分成两个维度来分析，首先1.移动端：我们通过大量总结优秀UI设计中按钮的尺寸，以及调研人均指尖尺寸，并最终通过测量，推算出44-48px的尺寸按钮，会使操作更加流畅，误操作更少，界面中的比例更严谨，美观性更佳。如果更大，达到50px。也未尝不可，通常在设计中，我们也需要考虑到“特殊人群”，例如最近讨论比较多的“适老化”设计，在老人使用的场景下，将按钮尺寸设置在50-60px，也是可行的，但是需要注意，这里的44px为最小，60px为最大，建议不要超过极限值；
PC端，考虑到PC端一般会配合外部设备来点击，例如鼠标，而PC端一般来讲，同等分辨率的状态下屏幕更大，所以显示内容更多，而鼠标又有精准的特性，因为在PC端按钮的设计上，也会将尺寸设置的更小一点，这个也没有具体的规范，通常来讲，我们有一个最小的尺寸设置：32px左右；（B端项目，例如复选框、提交表单、“+”号弹出下拉菜单等这些按钮可能会更小一些，但一般不会小于12px；）
三：按钮设计的五大核心原则
对齐！对齐！还是对齐！
其实无论平面、网页还是移动端UI，对齐是基础，对齐是根基，对齐就是美，对齐就是一切，不管是标签、文本、段落、元素、信息模块都需要做对齐处理，它是最基础的也是设计师最容易出现的视觉问题。水平居中、垂直居中、左对齐、右对齐、顶部对齐、底部对齐、各种对齐；实际上UI对于对齐的需求度更高，单就按钮拎出来讲，一般的做法也就是最省事儿的，垂直水平居中即可。
同时需要注意的是，如果按钮中的文本是英文，要考虑使用基线对齐，还是视觉对齐。如果有大小写混写且存在字母升降序的情况，例如：Asygj，这种情况下可以考虑使用基线对齐
文本和按钮本身的比例关系同样需要引起重视，一般给到黄金比是不会错的，同样也要遵循“偶数原则”。这样才能更好的做居中。如果你的按钮宽度给的是33，那么你的文本就难以做居中对齐；
四：按钮设计的五大核心原则
质感靠光影塑造
整体画面太过于平，对象在背景上面就不容易凸显，用户看不到可单击的对象，所以可以通过投影、外发光、阴影、高光的方式塑造距离感，这和扁平化不冲突，颜色做淡一些能够让用户潜意识里明白这里是可以点击的即可。
切记：“上暗下亮做内嵌”“上亮下暗做起浮”原则；
小小的按钮里面还涉及到配色原理，使用投影的颜色最好能够和按钮本身有相互关联，无论是混合色，还是同色系、同色调都是可以考虑的，需要避免使用互补色和对比色等对比鲜明的阴影；
五：按钮设计的五大核心原则
容易阅读的标签文字
按钮标签文字推荐居中显示，但依然要预留出一些空间，段落标签按钮要保障可阅读性，功能性的优先级更高。标签顶部和标签底部预留8个像素比较合理；
按钮可在间距宽度基础之上在宽一些也是可行的。
最后总结：
总结来讲到话，做按钮设计前需要重点考虑到其功能性及美观性，包括但不限于，强化处理、凸显处理、凸显重要按钮位置，通过颜色来强化或弱化按钮设计。
按钮作为UI设计和交互设计当中贯穿始终的元素之一，既重要又容易被忽略，他是和用户交互沟通的桥梁与重要组件，也是UI设计最早期的，最为原始的交互对象之一，所以需要我们认真对待。
本篇教程制作共计花费11小时，希望能够在你的设计之路上有所帮助，感谢你耐心看到这里，谢谢 ~
完！
