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

B端基础控件的认识

控件一词，直译的话可以翻译 “用控制的元件”，我们对 B 端系统行信息录入、改、操作的元素。让用户可以自然、效的完系统功能的使用，确使用控件元素必的基础。

控件包含的类、细节、规范非多，我们先来解释一，见的流控件都有哪些。

 1，按钮类控件，在 UI 界面中应用最的控件类型，也是理成最低的元素。

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

第 2，表类控件，表是用来采集息的控件。比如去银行理业，就会让你填写一张相应的表，面会收集各种不同的息。

表单类控件，是都要根据我们想要采数据，以应样、交互呈现用户。比如文本输入框、单选、复选、下菜单、级联选择、滑动条等等。

第 3，时选择，即选择某或某段时控件。严格来说，它也是表单控件，所以单独拿出来讲，是为它是所有表单控件最复杂类。

时间选择可以选择日、时、分、秒，也可以选择一段时间，包含的条件状态判断。

第 4，面包屑控件，可以理解骤或层级的表控件，直观的反应当页面的置，可以行速的切换返回。

第 5，页码控件，通过列表呈数据项目的时候，往往一页展示不完的，所以我们会将它切割若不同的页面，于就会使用分页控件帮用户行页面的跳转。

第 6，导航栏，即 B 端内模块的导航控件，通过导航栏速切换到不同的模块。主流的 B 端项目，都会使用侧导航的形式，也少部分项目会使用传统项目的顶部导航设。

第 7，关，即对某判断事件行或否的控制元素，手机中我们使用的关功能一致。

第 8，分页选择控件，英文 Tabs，我的用法里从不把 Tab 直接翻译 “标签” 英文 Tag 冲突。它的功能即切换对应内区域的控件，手机分页器一样。

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

以就我们设 B 端中常见的控件类型，一基本的认识，那么下面就分别讲解它们设的点，以及常用的参数特征。

按钮的设计要点

1. 按钮尺寸

按钮是个 UI 最基础控件，学习任何 UI 类型控件，都从按钮展开。在移动端，有官议合理触控区域 44pt 作为参照，来划分大、小按钮，在网页项目，并没有那么明确官议。

所以，我们根据过往的验，依旧先将按钮划分、中、小三级，然后再讲解它们对应的宽数区间。

首先从小按钮开始说起，前面我们讲过，中最小字号在 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，以此类推。

2. 拉菜单

输入框成后，那么之后的拉菜单，在默认状态和输入框就几乎使了一样的样式，只是增了可拉的示意或图标。

在拉菜单中，如果包含了列表项，那么每个列表的，可使相同的尺寸，而给一个的数值。

3. 单选复选控件

接，就单选复选框的设了，如果只看视觉效果，单选复选的实际小好都不，不需输入框瓜葛。

这么想就对了，实际上这类控件中，都有包含对应的区，它的实际大小并是我们视觉上的边缘。而我们使的实际背景区尺寸，同样使输入框的大小来制定，并对容进行中。

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

4. 滑条控件

之后，就是滑条控件的设计了。滑条控件的样式看起来并复杂，一般由一个圆形滑（有方形）和一个进条组成。

在类控件中，进度条的粗细虽以自由定义，但尽能不要使用 1px，因为在太细，做的浅看不清楚，做得深又有很强的割裂感。

关键点在于对滑块本身尺寸的控制上，前面讲过选和复选框的尺寸，实际上这个滑块是可以继承选或复选框尺寸的。当它使用相同大的候，往往在并列、并排的候，会让整个表系统起来更和谐、统一。

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

所以，掌握这思路，不需要大量表单控件死记硬背，可以灵活应不表单设计需求。

结尾

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

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