权重|做好设计细节，你需要了解这些( 二 )

背景：表达按钮的当前状态，对按钮合理的使用主体色能有效传播品牌气质；

投影：让按钮具有层次感，配合渐变背景能体现出微质感的效果。

二、按钮的类型1. 功能类型按照功能属性分类，可将按钮类型分为流程控制和功能选项操作。

流程控制：常见的传统按钮，如支付、下一步、确定、保存等，容器承载着图标、图标+文案、文案。
功能选项：开关/加减控件、标签栏/分类、状态切换等，操作之后只针对当前页面做出属性的调整，不涉及流程的变化。

文章插图
2. 视觉样式（横向）视觉样式有所区别，在不同的页面可能存在同等级的权重。

常规按钮：最常见的按钮，当同一个页面出现多个常规按钮时，会有主次之分；
虚线按钮：常用于添加、上传等操作；
文本按钮：仅用文字作为触发点，部分会用主色、右侧箭头、下划线等方式突出。

文章插图
3. 层级分类（纵向）

高权重：带有填充色的主操作按钮，当同一个页面存在多个按钮，只允许存在一个高权重（主操作）按钮；
中权重：带边框轮廓的概述按钮，同一页面可存在多个中权重的按钮；
低权重：纯文本按钮，以及浅色填充+浅色文字的按钮，同一页面可存在多个低权重按钮。

文章插图
三、按钮的状态在设计按钮时，为了体现按钮不同的具体含义，以及后续设计、开发的统一性，明确按钮交互样式是设计过程中不可缺少的重要组成部分。设计师需要在不干扰界面视觉的前提下，对每个按钮的样式、状态有清晰的定义，与其他元素、布局区分开来，以确保按钮的可供性。
常见的状态主要有以下几种：

文章插图

待激活状态：需要完成一定的操作、或有一个以上必要的前置条件后才允许交互；
正常状态：按钮的正常显示状态，可进行交互操作；
点击状态：触碰效果，表示按钮正在进行交互且未结束，会在正常状态的基础上增加一个纯黑色不且透明度为10%的蒙层，交互完成后，即会引发此按钮的真实作用；
加载状态：产生交互后没有立即执行、或系统需要一定的时间才能执行完成；
禁用状态：系统默认暂不允许操作、或需要用户离开此页面去完成一定的前置条件才能使用。

四、按钮的大小及风格1. 按钮的尺寸在PC端设计按钮时，因为鼠标的精准点击，我们通常会将按钮设计得小一些，同时也能让整个界面看起来更加细腻，只要不影响操作，36px~48px范围内的按钮是比较常见的。
但移动端的按钮设计，我们要更多的考虑到物理尺寸，即手指（指尖）在操作时需占用的实际范围。
iOS的设计规范中，将按钮的最小点击区域规定为44pt，一旦小于这个数值，操作时就会出现精准度较低的情况，导致操作失误或无效。

文章插图
在实际的iOS界面中，很多应用在设计按钮时并未严格遵循最小44pt的这个标准，例如很多一、二级界面的次级功能入口，有些连30pt都不到，也并未对用户造成多大的影响，可能是对应的功能权重、用户点击频率都非常低的原因。
还有一部分文字按钮，其本身永远都不可能达到最小的触控标准（触控热区加大即可），所以关于按钮的尺寸大小并非规定得很死板。
费茨定律告诉我们「目标尺寸越大，移动至目标所花费的时间就越短」，所以，在满足手指触控范围的同时，还要根据所对应功能的权重占比来适当调节按钮的大小。
不难理解，当某个元素的尺寸越大就越吸引眼球，就更容易被视觉捕捉到，也更容易被「点击」，精准度被降低的同时，也减少了用户的操作成本。
我们以8像素栅格系统、iOS的2倍图为例，较为常见的有：小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。

文章插图
2. 按钮的风格在UI设计中，几乎每个页面都存在按钮，样式、种类也有很多，但设计风格常见的也就几种，例如扁平化、微质感、拟物化、新拟态（概念）……
1）扁平化按钮
通常在容器中填充一个纯色即可，没有多余的视觉干扰，操作简便，这种类型的按钮一般在应用中用的最多。例如：工具型应用、B端应用等。