按钮在界面设计中，属于最基础的元素分组成，按钮设计的精致，整页面的品质也会升不少的档次。今天给家分享这篇文章，主讲解设按钮时我们应该考虑哪些因素，包括视觉，哪些万能的方法及公式，能够确的制按钮的设标准，提升整设的系统性。
在设计按钮前，需要先理解按钮起到代表含义。什么地该加按钮，什么地不加按钮，在系统化设计思路需要常有讲究。常按钮在页，主要起到以下三作用：
1. 某类型功能操作
这比较常见，如些控件形态按钮，比如加减、折叠、展开，下等。这类按钮会起到些功能形态作用，常用于交互场景。所以在这类按钮设计，应弱化按钮形，强调功能，突出主体信息。
2. 下一步的确指引
当页面内容息过多后，用户容易失去息焦点，从而忘记下一步操作。息种类越多，用户权衡的间就会越久，用户选择罢及跳出的率也会越大。所以这个候，在适的地方增添按钮，能够好的引导用户进行下一步操作，提升整体操作的成功率。其次从体验层面，也一定程度能起页面动线的引导作用，比如下方的一组卡片，在增添了按钮后行动点确，非常有点击欲望~
3. 固定习惯，明确心理预期
当用户悉某个按钮能指向某个操，或者获取某类信息，长期以往用户就形成使用个按钮的习惯，样对提升复访及固定心智是非常有效果。
所以如果你认为你负责的产品或者是内容，能持续为用户带来价值，那在页面的关键节点，不如将按钮计的更醒目。这用户下次再这个按钮，固定习惯会引导持续的点击。
里我不以按钮的长相来区分按钮的类型，汉堡按钮或者别的什么的，意义不大。我主要还是想通以按钮的功能区分，来划分类型，样大家理来更为清晰。
1. 功能质按钮
类按钮见到的最，我们常用的APP里，大量充斥类按钮，类按钮到重点的功能互，帮助用户得到TA想要的信息。其次样式上面，其圆形的点击欲，更强一，看来也更点击。而方型的按钮，则显得更为正式、严谨。
式：果是圆形按钮，圆角的半径=高度的50%比合适，而果是方按钮，边角的小圆角半径控在15%以下比合适，我个人喜用10%。
2. 聚焦大按钮
这类按钮通见于一些核心页面的强指引，如登录、注册、交表单、或者是保存，等对页面全进行操作的一些按钮。需要注意的是，这类按钮只适合对页面全进行操作，而且页面中大按钮的数量宜超过2个，信息尽量需要保持聚焦。
公式：基于@2x，这类大按钮的≥72px是较合适的，通的尺寸有 80px、88px、96px，大可根据产面向的人群来定，如果页面面向的人群较为广泛，我建议采 88px 或者是 96px 的这种大号版本，毕竟操作起来更为方。
3. 吸底按钮
这类按钮的优先级，整页面属于高，页面的所信息，都将聚焦这按钮中。由于按钮吸底的，所以会一直浮页面，不受页面篇幅影响控制。
需注意的，吸底按钮一页面重的功能，或者整页面的下一指引，比如淘宝的立即购买，或者饿了么、团的立即下单，又或者常见的充界面。
公式：基于@2x，吸底的高度≥80px比较合，常见的尺寸88px、100px、112px ，按钮的小可以根据内，建议高度保持72px以比较合。这里需注意的，吸底的按钮，需产出两套设稿，一套常规稿，一套iPhoneX的配稿。iPhoneX底部控件的区域高度68px，所以iPhoneX设稿的吸底高度=常规设稿吸底高度+68px
另在设计按钮时候，也忘了补充按钮多个状态设计稿。常见状态，有以下四：
1. Normal-正常态
这个为按钮正常显示态，是正常页显示效。
2. Hover-悬浮
这个为按钮的悬浮，一只会出现在使用鼠标的候。当鼠标指针停留在按钮，按钮发出的殊反馈，则为悬浮。这类形式在移动端交互中无作用，所以移动界面计中不需要考虑这个状。
公式：正常情况 Hover 增加 10% 黑色就可以，理如下
3. Pressed-点击态
个为按钮的按压态，就是按钮在被点击或者是按压的效果。
式：在APP设计中，点击的效果我们设一个标准值让开现就。常用的值有按钮减少20%的透明度，或者增添20%的暗度，两个以。通常我建议在亮上的按钮，使用暗度叠加（增添20%的黑），在暗上的按钮，则使用透明度减少（透明度改为80%），现效果原理参考 Hover 态图
4. Disable-禁用态
当信息未填充完整，或者是某类条件未到，按钮出现不点击的状态，处禁用形式，个时，按钮就呈现禁用态。个禁用态无论是web还是app，很场用到，所以建议设定一套标准的设计规范，避免重复定义个效果。
式：禁用态尺寸及大小不变，仅使用值做区分。建议使用灰或者是不透明，常用的禁用有#CCC或者#999，需要尽能把样式做弱，避免用户做无效的点击。
在目前移动互联网设计中，虽按钮的种类很，但风变的逐渐统一，更是值及细节上的差异。从大的风来看，按钮还是分为几种类型：扁平化、轻拟物、重拟物及游戏按钮。
1. 扁平化按钮
类按钮我们设计用的最，信息简洁，操方便，形式追随功能。里也给大家分享一下我在设计扁平化按钮的一经验，比高度宽度，以及阴影的值。
公式：按钮高度，这个通常是文字字号的2.4倍然后取4的倍数整数，比如字号是24，那按钮的高度=57.6，离4倍数最近的是56，所以高度=56，圆角=10%的高度，取整后是6px。
另外如果觉得不适，也可以位往8递增或者是递减即可，例如 56、64、72、80、88 px
按钮宽度：如不是那全局按钮，常按钮宽度=最多容纳数宽度+按钮高度，好啦。是以上那个例子为例，按钮高度=56，文宽度=96，那么按钮宽度=56+96=152
2. 轻拟物按钮
这类按钮近年变的非常流行，甚至QQ、淘，都开始大面积使用，因为这类按钮在保持息简洁的同，仍然有较的点击欲，视觉上面也能够增添页面的品质。
公式：渐变方向，建议采用水渐变，重色在右侧，轻色在左侧更为适。阴色值之前就写过，不知道大家还记得，阴颜色=按钮颜色的 Alpha50%，x=0，y=按钮高度的20%，模糊值=按钮高度的50%，扩展=按钮高度的 -15%，高简，完美！
如觉这个弥散阴影太大学，也可以自己手动简单调下，不碍事。（这个公仅适用于Sketch，用PS学，也可以按照这个逻辑自研究下）
另说句，实上这个阴影公并没有什么很多依据，大多数都是我个原创结出来，简单好用。比如下这些按钮样，用了公后效大家可以自感受~
3. 拟物及游戏按钮
在些销页，按钮样常需要做比较游戏化。游戏化按钮，大部分会采取游戏场景元素，再采用拟物手法，来进打造。
通常游戏化的按钮，需重点几部分组，学过素描的同学应该会知道，立体的体，通常会几特征，分别高光，亮部，暗部，投影及反光。那么如果我们需绘制一营或者游戏场景中使用的按钮，只需保证这按钮高光，亮部，暗部，投影及反光的这些特征，然后饱满一点就，立马就可以出效果啦。
当然，我举的这几例子都基础版本，如果的丰富一些，那也问题的，这可以case by case 。
这个没有太多的公式可总结，更多的是看设计师的基础美术水平啦~~
写这篇文章的时候，突然刷到了一套新拟态的控件设风格，种眼一亮的感觉。虽然这套设视觉很层次很好看，不过感觉短时间之内，比较难面积推广，因发实起还会比较耗费本。
我把源文件保存下了，对这感趣或者好奇这种效果如何实的同学，可以下载源文件研究~~ sketch、psd、Figma 格式都。
载链接：https://pan.baidu.com/s/1RVxvnBJVX9KzvGp7QBITEg 取码:ikzs
备用下载链接：https://share.weiyun.com/mcxYXNDQ
更多新拟物的计思路：
[link https://www.uisdc.com/neumorphism-landing]
欢迎关注作者的微信公众：「UX小学」
浙公网安备33011002017549号