按钮篇：做好计划细节，你必要了解这些

编纂导语：按钮在我们的平常生存中非经稀有，团结按钮，用户可以晓得下一步举措该怎样举行，但是按钮若计划不妥，则约莫招致用户的错误利用，低落用户的产物使用体验。本篇文章里，作者对按钮计划举行了总结梳理，一同来看一下吧。

提及按钮，很多做计划的小伙伴是熟习的不克不及再熟习了，它是我们在计划界面时最常用、最紧张的组件之一，也是易被忽略的元素之一，以是在计划之前，做好对按钮组件的熟悉、了解十分有必要。

从我们有影象认知开头，按钮就时候在和我们打交道，墙上的电灯开关、电视机的调治按钮、遥控器的按钮等等，这些物理按钮不仅仅是当下UI按钮组件的前身，且不会散失，仍然会有很多非数字化的产物及机器装备在持续延用，不管怎样演化，基本不会离开实物参考。

按钮最吸引我们的莫过于经过简便触摸就能轻松满意本人的举动需求，按钮计划的直观性及易用性会影响着人们完成一件事变的志愿及听从。

在UI计划中，怎样完善地避开成绩、把按钮计划得更好，是每个计划师必要沉思的成绩。按钮计划的优劣，将直接干系着用户引流、触刊举动、产物转化率等至关紧张的成绩。

别的，风雅的按钮也会让整个页面的视觉提升层次。本篇文章将对按钮作出剖析，先容在计划按钮时必要偏重思索的要素及计划标准，并将实际付诸于实践。

一、按钮的作用

1. 什么是按钮

在UI计划中，按钮是一个明白指示交互举动举措的组件，主要用于触发某一个即时利用，很多时分，我们必要接纳下一步举动或前往到上一步，都要经过按钮（局部场景可用手势交互）来完成。

在视觉层面，按钮的构成看起来很简便，由一个底色块/线框加上一组案牍即可构成，但真正要将按钮计划好，仅停留在视觉层面并不严谨，其轻重、地点、色值、案牍……等每一个细节的处理都干系着用户的利用体验，底下的这几种情况各位一定有碰到过：

2. 按钮有什么用

通常，我们在计划按钮之前，必要具体了解按钮所存在的意义，何处该加、何处不应加、为什么要加，主要从以下几点来体现按钮的作用：

1）功效性利用

这种按钮很稀有，好比掀开、收起、下拉、加减等，按钮视觉较弱，重点重申该页面的功效，突出主体信息，在利用之后会产生一些交互厘革，这类按钮主要起到功效外形的作用。

2）明白引导下一步利用

当用户完成一个页面的内容添补或信息确认，就会丢失视觉核心，而下一步按钮就集聚焦视觉重心，经过案牍见告用户下一步该怎样做，稀有的有保存、下一步、付出、确定……等。

别的，用户必要完成某个职责，但同一个职责流程的信息、品种较多，这时就会通太过步调、分页的办法，并在每个步调的末了增长一个能起到上下衔接作用的按钮，明白引导用户进入下一步利用，以此来提升用户完成整个职责的告捷率。

3）培养举动习气

假如在利用某个按钮之后取得了一定的优点，且能持续为用户带来代价，那么无碍将这个按钮计划的更夺目，并在划一级但不同的场合坚持视觉的一致，持续培养用户点击习气，当用户下次再看到相似这种按钮时，惯性头脑就会引导点击。

3. 按钮的构成

在大局部的认知中，最稀有的按钮就是一个底色块加上一句案牍就完成了，殊不知一个好的按钮必要颠末很多细节的把控，才干发扬出按钮的最大作用。

比如案牍的是非/边距、容器的轻重/圆角、添补色的主/次之分……等，底下我们来看看一个按钮毕竟是由哪些属性、元素构成。

• 圆角：转达出按钮的气质，决定用户的视觉以为，最稀有的为小圆角，也有较为严谨、力气型的全直角、卡通心爱、年轻化作风的全圆角；
• 图标：用于按钮涵义的图形化笼统表达，比如加载中、编纂；
• 容器：整个按钮的载体，包容案牍、图标等元素；
• 边框：确定按钮的界限，常用于次级按钮描边；
• 案牍：用笔墨表达按钮的涵义，精简案牍；
• 背景：表达按钮的如今形态，对按钮公道的使用主体色能好效转达品牌气质；
• 投影：让按钮具有条理感，共同徐徐背景能体现出微质感的后果。

二、按钮的典范

1. 功效典范

依照功效属性分类，可将按钮典范分为流程控制和功效选项利用。

• 流程控制：稀有的传统按钮，如付出、下一步、确定、保存等，容器承载着图标、图标 案牍、案牍。
• 功效选项：开关/加减控件、标签栏/分类、形态切换等，利用之后只针对如今页面做出属性的调停，不触及流程的厘革。

2. 视觉样式（横向）

视觉样式有所区别，在不同的页面约莫存在划一级的权重。

• 常规按钮：最稀有的按钮，当同一个页面显现多个常规按钮时，会有主次之分；
• 虚线按钮：常用于添加、上传等利用；
• 文本按钮：仅用笔墨作为触发点，局部会用主色、右侧箭头、下划线等办法突出。

3. 层级分类（纵向）

• 高权重：带有添补色的主利用按钮，当同一个页面存在多个按钮，只允许存在一个高权重（主利用）按钮；
• 中权重：带边框表面的概述按钮，同一页面可存在多此中权重的按钮；
• 低权重：纯文本按钮，以及淡色添补 淡色笔墨的按钮，同一页面可存在多个低权重按钮。

三、按钮的形态

在计划按钮时，为了体现按钮不同的具体涵义，以及后续计划、开发的一致性，明白按钮交互样式是计划历程中不成短少的紧张构成局部。计划师必要在不干扰界面视觉的条件下，对每个按钮的样式、形态有明晰的界说，与其他元素、布局区分开来，以确保按钮的可供性。

稀有的形态主要有以下几种：

• 待激活形态：必要完成一定的利用、或有一个以上必要的前置条件后才允许交互；
• 正常形态：按钮的正常体现形态，可举行交互利用；
• 点击形态：触碰后果，表现按钮正在举行交互且未完毕，会在正常形态的基本上增长一个纯玄色不且纯透度为10%的蒙层，交互完成后，即会引发此按钮的真实作用；
• 加载形态：产生交互后没有立刻实行、或体系必要一定的时间才干实行完成；
• 禁用形态：体系默许暂不允许利用、或必要用户分开此页面去完成一定的前置条件才干使用。

四、按钮的轻重及作风

1. 按钮的尺寸

在PC端计划按钮时，由于鼠标的精准点击，我们通常会将按钮计划得小一些，同时也能让整个界面看起来愈加精致，只需不影响利用，36px~48px范围内的按钮是比力稀有的。

但挪动端的按钮计划，我们要更多的思索到物理尺寸，即手指（指尖）在利用时需占用的实践范围。

iOS的计划标准中，将按钮的最小点击地区划定为44pt，一旦小于这个数值，利用时就会显现精准度较低的情况，招致利用失误或没效。

在实践的iOS界面中，很多使用在计划按钮时并未严厉依照最小44pt的这个标准，比如很多一、二级界面的次级功效入口，有些连30pt都不到，也并未对用户形成多大的影响，约莫是对应的功效权重、用户点击频率都十分低的缘故。

另有一局部笔墨按钮，其本身永久都不成能到达最小的触控标准（触控热区加大即可），以是关于按钮的尺寸轻重并非划定得很枯燥。

费茨定律报告我们「目标尺寸越大，挪动至目标所破费的时间就越短」，以是，在满意手指触控范围的同时，还要依据所对应功效的权重占比来得当调治按钮的轻重。

不难了解，当某个元素的尺寸越大就越吸引眼球，就更容易被视觉捕捉到，也更容易被「点击」，精准度被低落的同时，也变小了用户的利用本钱。

我们以8像素栅格体系、iOS的2倍图为例，较为稀有的有：小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。

2. 按钮的作风

在UI计划中，几乎每个页面都存在按钮，样式、品种也有很多，但计划作风稀有的也就几种，比如扁平化、微质感、拟物化、新拟态（看法）……

1）扁平化按钮

通常在容器中添补一个纯色即可，没有多余的视觉干扰，利用笨重，这品种型的按钮寻常在使用中用的最多。比如：东西型使用、B端使用等。

2）微质感按钮

比拟扁平化，添补徐徐色再加上浅浅的投影，不仅能坚持信息内容的简便、让用户产生更强的利用愿望，还能让页面具有品格感，愈加耐看。比如：年轻化使用、文娱类使用、儿童使用等。

3）拟物化按钮

大多计划得很平面，3D质感、属性样式丰厚多彩，参考实际天下中的事件或摄取使用场景中的某些元素，使其愈加传神，有较强的代入感。比如：游戏类使用、H5专题、运营banner等。

4）新拟态按钮

2021年风行一时，几乎无人不知，但要想落地却不太实际，实用性不强，也只能在飞机稿中出出风头，随着时间的流逝，渐渐偃旗息鼓，不知哪天会不会经改良后再次面世（起先扁平化问世，也是几经曲折，经多年改良才渐渐被群众所承受）。现在仅有少数东西类使用使用了新拟态，比如：盘算器、AI装备控制、有道云条记等。

五、稀有误区及避坑指南

1. 主/次利用层级明白

当同一个页面显现多个按钮时，只允许存在一个主利用按钮，其他不做特别设定。固然，假如主要利用较多，也不益过多的显现次级按钮，可依据权重升级处理，以小图标或笔墨按钮的办法展现。

2. 一致样式

主/次利用按钮要一致样式，用户需利用时，尽约莫地变小其思索及选择时间，按钮应该迎实用户固有认知及惯性头脑，节流时间本钱，提高利用听从。

3. 圆角值

在大大多界面计划中，我们通常所见到按钮照旧小圆角和全圆角居多，也有局部按钮完全直角，必要依据产物的行业属性与气质来选择最切合的圆角典范。不管怎样，尽力制止大圆角（卡片除外）按钮，不方不圆、不三不四的，显得不够成熟也不佳看。

1）小圆角

小圆角按钮的圆角值通常控制在高度的1/5、1/6，儿童典范的使用也有1/4（较大）的，并非相对值。假如习气使用8像素网格，依据按钮的尺寸轻重，直接将圆角值安稳在8px、16px、24px（较大）这几个数值，能变小计划组件的数目，也利于开发做组件封装后续调用。

2）全圆角

全圆角按钮的圆角值安稳为高度的1/2，大概在软件的圆角设置中直接将数值拉到极限。

3）直角

不设圆角值，在PC端较为稀有，也有局部较为严谨的挪动端使用使用直角按钮。

4. 按钮中的笔墨

按钮中的笔墨要便于用户了解，不克不及过于生疏或绕口，用户碰到不易了解的信息会产生怀疑，乃至误导用户招致利用失误从而形成丧失。除此之外，笔墨还必要精简，不克不及过多或折行且能公道地引导用户完成利用。

上图的案牍歧义就很分明，自以为智慧的计划师想要挽留用户，刻意将主次按钮样式对换，渴望用户利用不告捷，那么用户在必要取消订单时就疑惑了，毕竟是点击「确定」照旧主利用按钮「取消」才干取消告捷呢？大概稍加思索，用户也能反响过去，但无疑增长了选择难度、思索时间及利用本钱。

5. 笔墨与按钮比例

按钮中的笔墨太大或太小都市影响用户对信息吸收的听从，轻重比例必要适中。笔墨太大会以为很拥堵（跟各位衣服买小了以为一样），没有呼吸感，要给笔墨周围留下充足的空间，同时笔墨太小会显得吝啬，看起来也会比力费力，拦阻于信息吸收。

6. 按钮与其他组件的区分

计划好按钮组件之后，页面中的其他组件或元素要与按钮有很分明的区别，制止让用户产生不必要的曲解。

7. 弹窗主/次按钮的地点

在弹窗中，主按钮是在左？照旧在右？

这是一个争论不休的成绩，那么不争了，在挪动端的弹窗计划中，主按钮靠右就行了，不一定相对准确，但相对不是错的。依据观察数据体现，单手使用右手利用手机的用户比左手利用手机的用户量高，且用户也有一定的熟悉，左侧为上一步、右侧为下一步，顶部左侧为前往，右侧为保存或确定。

8. 无停滞计划

可拜候性是按钮计划最紧张目标之一，不仅要样式一致，还应符实用户的认知，让用户能快速知晓这个元素可否点击？点击之后会产生什么？乃至有种一见仍旧的以为。假如将按钮样式计划的与用户认知有较大的偏差，不易于用户了解。

9. 变小使用禁用按钮

在表单计划中，大局部都必要用户完成一定职责之后才干正常利用下一步按钮，在完成之前，需少用禁用按钮，在前方有讲到「待激活形态」，即在按钮中添补浅浅的主体色等候用户完成职责激活。

通常体系默许不允许利用或存在时间限定会用到添补为灰色的禁用按钮，即使云云，也要尽力让体系将其隐蔽，万不得已的情况下必要在按钮四周分析情况，以免使用不妥惹起用户的负面心情。

10. 投影的使用

在给按钮添加投影时，选择灰色或纯玄色加调停不同明度即可满意基本后果，但假如想要更好的视觉体验，可以基于按钮本身的色值来调停，让投影后果看起来更温馨，跟页面更搭。

别的，切勿过分使用投影，宁缺毋滥，若按钮的投影太深，看起来粗糙脏乱，还不如不必，颜色较浅的按钮尽力不使用投影，不然约莫会影响按钮的识别度，让这个页面看起来不够清新。

六、总结

关于计划师来说，按钮作为计划组件之一，有很多细节容易被忽略，我们必要对每一个微小的元素举行深化思索，如论任何轻重组件，都必要做到不断改进，才干给用户带来更好的使用体验。

一篇文章不敷以道出按钮计划的精华，还必要我们一同举行更多的发掘，渴望本篇文章能带给小伙伴们一些启示，下篇「图标」文章再见。

#专栏作家#

大漠飞鹰；群众号：能量眼球，各位都是产物司理专栏作家。努力于产物需求的驱动、产物体验的发掘，使用计划的伎俩为受众用户带来更好的体验，即顺眼、好用。

本文原创公布于各位都是产物司理，未经允许，克制转载

题图来自Unsplash，基于 CC0 协议