选择器|B 端设计( 二 )

所以，我们根据过往的经验，依旧先将按钮划分成大、中、小三个等级，然后再讲解它们对应的长宽数值区间。
【选择器|B 端设计】首先从小按钮开始说起，前面我们讲过，中文最小字号在 11px，那么最小的按钮尺寸就必然大于这个数值。所以，对于比较次要的按钮、标签，建议使用 16-28px 高的按钮。
中按钮，一般应用在一些表单确认、取消、上传等基础功能的使用上，可以使用 28-44px 高的按钮。
大按钮，就比较特殊，只有在登陆或者是意义非常重大的场景下（比如删除重要数据提示）才会使用，它的高通常在 44-64px，大于 64px 的按钮在 B 端项目中基本不会存在，除非有特殊的业务要求。

文章插图
前面讲的都是按钮的高，那么按钮的宽怎么来的呢？按钮的宽度设置有两种，一种是定宽，一种是自适应宽度。
定宽按钮没有非常明确的数值标准或比例标准，基本要求就是大于等于宽。常见的定宽按钮宽高比为 1:1、2:3、2:1、3:1 。

文章插图
虽然宽度没有设限，但在网页和手机客户端不同，不会做出远远大于高，甚至撑满屏幕的按钮，这在巨大的电脑画布中不仅不协调，而且会看起来非常不像按钮。
自适应按钮则是根据宽度进行伸缩的按钮类型，通过定义左右内边距的数值，来计算按钮实际的宽度。无论里面只有文字还是图标文字混合，使用自适应按钮都可以完美匹配。

文章插图
2. 按钮的状态除了长宽尺寸外，还要额外关注按钮的状态。按钮并不是一个 “死” 的静态视觉元素，它本身包含了若干种不同的状态，需要通过视觉样式进行传达。
比如最常见的，就是默认、悬浮、点击、不可点状态。

文章插图
除此以外，当按钮本身加入更多的功能、内涵以后，我们都需要根据它的使用场景来考虑对应的状态，如下载按钮，有些平台点击下载需要一个比较长的加载过程，于是这个Loding的动画就可以在按钮中进行呈现，表示下载请求正在处理，而不是让用户以为这是一个无效的按钮。

文章插图
三、表单控件的设计表单是一个大类，包含的控件非常多。如果我们把每个细分选项都单独挑出来讲，那可以写一本 B 端字典了。
所以，我们可以从输入框这个控件入手，优先确认输入框的尺寸基础，然后再根据它拓展出其它的相关控件元素出来。
1. 输入框的尺寸定义输入框虽然不如按钮出现频率高，包含的尺寸规格极多，但同样也有大小之分。
常规输入框的高度在24-48之间，根据实际场景的需要，尽量以4的倍数来定义输入框的高度。

文章插图
单行输入框宽度通常是固定的，不像按钮会向右延伸，所以输入框的宽度需要根据对应的场景，输入内容的长度来判断，没有统一的标准，尽量不要制定远低于实际内容长度的数值即可。
虽然我们定制的输入框看上去好像就是给一个矩形背景，把字体丢进去居中对齐就好。但是，开发中一个输入框实际的尺寸，是通过内部元素尺寸+内边距实现的。

文章插图
所以，输入框出现多行的时候，并不是简单把原来的尺寸x2，而是先确定内部元素的行高，一个支持多行显示，默认高 36px 的输入框，行高20，那么当出现两行的时候高 56，三行高 76，以此类推。