用一篇超详细的文章，帮你全面认识B端控件设计

第四篇我们全面认识一下B端的控件设计。

往期回顾：

B端基础控件的认识

控件一词，直译的话可以翻译成 “用来控制的元件9 B z * J | h ! v”，是我们对 B 端系统进行信息录入、更改、操作的元) m : r e f Y素。让用户可以自然、有效的完成系统功能的使用，正确使用控件元素是必要的R a W k a [ g X ?基础。

控件包含的类型、细节、规范非常多，我们先来解释一下，常见的主流控件都有哪些。

第 1，按钮类控件，在 UI 界面中应用最多的控件类型，也是理解成本最低的元素。

但是，按钮并不是只有一个矩形框中间放文字c l m / Q J ; ( :而已，还有多种细节的变体。包括但不局限于圆形、前置图标、呈现加载进程等，标签控件本质上也是按钮的一种。

第 2，表单类控件，表单是用来采集信息的控件。比如我W w O们去银行办理业务，就会让你填写一张相应的表单，里面会收集各种不同的信息。

表单类的控件，就是都要根据我们想要采集的数据，以对应的样式、交互呈现给用户。比如文本输入框、单选、复选、下拉菜单、级联选择、滑动条等等。

第 3，时间选择器，即选择某一点或K } V X ( w N k r某一段时间的控件。严格来说，它也是表单控件中的一种，之所以单独拿出来讲，是因为它是所有表单控件中最复杂的一类。

时间选择期可以选择日期、时、分、秒，也可以选择一段时间，包含大量的条件和状态判断。

第 4，面包屑控件，可以理解成是步骤或层级的表现控件，直观的反应当前页面的位置，可以进行快速的切换和返回。

第 5，页码控件，b H 6 2 C – { $ w在通过列表呈现数据项目的时候，往往一页是展示不完的，所以我们会将它切割成若干不同的页面，于是就会使用分页控件帮助用户进行页面的跳转。

第 6，导航栏，即 B 端内容模块的导航控件，通过导航栏快速切换到不同的模块。主流的 B 端项目，都会使用侧边导航的形式? i = k M Z S，也有少部分项目会使用传t ? = & Y [ z统项目的顶部导航设计。

第 7，开关，即对某判断事件进行是或否的控制元素，和手机中我们使用的开关功能一致f ~ L * X K v。

第 8，分页O a T _ S Y # v选择控件，英文是 Tabs，w 3 在T L p 3 L m 1 d我的用法里从来不把 Tab 直接翻译成 “标签” 和英文 Tag 冲突。它的功能即切换对应内容区] l L K域的控件，和手机分页器一样。

第 9，提醒类控件，用来提示、警示用户的一系列控件类型。包含类似警告弹窗、强提示、气泡、侧边提示栏等等。

以上就是我们在设计 B 端中常见o 7 ] p c 4的控件类型，有一个基本的认识，那么下面就分别讲解它们设计的要点，以及常用的参数特征。

按钮的设_ t e @ ^ Z i , }计要点

1. 按钮的尺寸

按钮是整q c & 3个 UI 中最基础的控件，学习任何一种 UI 类型的控件，都从按钮展开。在移动端中，有官方建议的合理触控x N V r 9 D区域 44pt 作为参照，来划分大、小按钮，但在网页项目中，并没有那么明确的官方建议。

所以，我们根据过往的经验，依旧先将按钮划分成大、中、小三个等级，然q ) * V后再讲解它们对应的长宽数值区间。

首先从小按钮开始说起，前面我们讲过，中文最小字号在 11px，那么最小的按钮尺寸就必然大于这个数值。所以，对于比较次要的按钮、标签，建议使用 16-28px 高的按钮。

中按钮，一般应用在一些表单确认、取消、上传等基础功能的使用上，可以使用 28-44px 高的按钮。

大按钮，就比较特殊，只有在k ^ l 4 % g登陆或者是意义非常重大的场景下（比如删除重要数据提示）才会使用，它的高通常在 44-64pxa S S d n g !，大于 64px 的按钮在 B 端项目中基本不会存在，除非有特殊的业务要求。

前面讲的都是按钮的高，那么按钮的宽怎么来的呢？按钮的宽度设置有两种，一种是定宽，一种是自适应宽度。w _ w

定宽按钮没有非常明确的# ! m h /数值标准或比例标准，基本要求就是大于等于宽。常见的定宽按钮1 0 ` w / @ {宽高比为 1:1、2a , e V:3、2:1、3:1。

虽f S S h . 7 R O U然宽度没有设限3 S t z : # ? @，但在网页和手机客户端不同，不会做出远远大于高，甚至撑满屏幕I z &的按钮，这在巨大的电脑画布中不仅不协调，而且会看4 K 3 j起来非常不像按钮。

自适应按钮则是7 _ L q n # [ @ E根据宽度K A O i P k进行伸缩的按钮类型，通g ` $ M f B过定义左右内边距的数值，来计算按钮实际的宽度。无论里面只有文字还是a * N P m Z图标文字混合，使用自适应按钮都可以完美匹配。

2. 按钮的状态

除了长宽尺寸外，还要额外关注按钮的状态。按钮并不是一个 “死” 的静态视觉D / $ l ; $元素，它本身包含了若干种不同的状态，需要通过视觉样式进行传达e P L ) u / – g。

比如最常见的，就是默认、悬浮、R % _ % O X ! Y点击、不可点状态。

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

表单控件的设计

表单是一个大类，包含的控件非常多。如果我们把每个细分选项都单独挑出来讲，那可以写一本 B 端字典了。

所以，我们可以从输入框这个控件入手，优先确认输入框的尺寸基础，然后再根据它拓展出其它的相关控件元素出来。

1. 输入框的尺寸定义

输入框虽然不如按钮出现频率高，包含的尺寸规格极多，但同样也有大小之分。

常规输入框的高度在 24-48 之间，根据实际场景的需要9 r + e T，尽量以 4 的倍数来定义输入框的高度。

单行输入框宽度通常是固定的，不像按钮会向右延伸，所以输A Y F Q * | k入框的宽度需要根据对应的场景，输入内容的长度来判断，没有统一的标准，尽量不要制定远低于实际内容长度的数值即可。

虽然我们定制的输入框看上去好像就是给一个矩形背Z ` x h K景，把字体丢进去居中对齐就好。但是，开发中一个输入框实际的尺寸，是通过内部元素尺寸+内边距实现的。

所以，输入框出现多行的时[ S % L x 2 G ]候，并不是简单把原来的尺寸 x2] = u，而是先确定内部元素的行高，一个支持多行显示，默认高 36px 的输入框，行高 20，那么当出现两行的时候高 56，三行L k V高) 6 Y j 76，e u T { q以此类推。

2. 下拉菜单

输入框完成以后，那么之后的下拉菜单，在默认状态X I l 7 k下和输入框就几乎使用了一样的样式，只是增加了可以下拉的示意或图标。

在下拉w , / A 0菜单中，如果包含了列表选项，那么每个列表的高度，也可以使用相同的尺寸，而不用给出一个新的数值。

3. 单选和复选控件

接着，就是单选和复选框的设计了，如果只看视觉效果，单选复选的实际大小好像都不大，不需要和输入框有瓜葛。

这么想就不对了，实际上这类控件中，都有包含对应的选区，它的实际大小并不是我们视觉上的边缘。而我们使用的. – e实际背景选区尺寸，同样使用输 8 ! 9 1 F入框的大小来制定，并n m T E Z E { c {对内容进行居中。

比较值得新手注意的是，在设计这类控件时，单选和复选框的尺寸，要控制在 12-20px，超过 20 像素的选框会明显偏大，缺失细节感。

4. 滑动条控件

之后，就是滑动条控件的设计了。滑动条控件的样式看起来并不复杂，一般由一个圆9 S u T G 0 e `形滑块（也有方形）和一个进度条组成。

在这类控件中，进度条的粗细虽然可以自由定义，N @ I 但尽可能不要使用 1px，因为实在太细了，做的浅了看不清楚，做得深了又有很强的割裂感。

关键点在于对滑G K /块本V , ~ S身尺寸的控制上，前面我们讲过单选和复& 9 1选框的尺寸，实际上这个滑块是可以继承单选或复选框尺寸的。h & { + q I : ( 2当它们使用相同大小的时候，往往在并列、并排的时候，会让整个表单系统看起来更和谐、统一。

表单的设计，就是从输入框和基础的表单类型入手，然后再根据这些元素的尺寸拓展出后续其它表单控件的尺寸。

所] 8 . H #以，掌握这种思路，就不需要对大量的表单控件死记硬背u * S z s | 9 E，可以灵活应对不同的表单设计需求。

结尾

B 端设计的上半部分先更新到这边，下半篇会在本周内完成。这个系列更新完成以后，我们会再合并一个修订版本出来，敬请期待。

欢迎关注作者的微信公众号：「超人的电话亭」