《如何从零构建UI组件及设计规范》共分为5个系列，分别为：介绍篇、设计原则、全局样式、基础组件、通用模版。本篇介绍了九曳供应链平台经常使用到的22个组件，总结了平台对于这些组件的定义、组成、使用规则、使用场景及注意事项，以及产品在设计时所要遵循的规范。
Ps. 本文约11000个字，90张图片，内容较多，建议收藏后阅读。
- Button 按钮Link 链接Radio 单选框Checkbox 复选框Input 输入框Select 选择Switch 开关DateTime 日期时间Upload 上传Transfer 穿梭框Form 表单Table 表格Tag 标签Pagination 分页Message 轻提示Notification 警告通知Modal 弹窗Dropdown 下拉菜单Tabs 标签页Steps 步骤Tooltip 文字提示Special 特殊组件
1.2 一般规则据研究，次要按钮和主要按钮的左右差异可以忽略不计，但是保持产品、系统的一致性更为重要。
按钮位置：主按钮在右侧，所有的辅助按钮显示在左侧。九曳规范的【次要/主要】按钮顺序是按照设计规范来，前后应始终遵循。完成相同或相近的功能按钮放置在一起，减少鼠标移动的距离。
按钮文案：文字简短，6个字以内，以动词为主，表述清楚操作按钮会发生什么，例如创建、保存、删除等，不能出现反问、否定等词汇。
错误使用：不要将按钮用作导航元素。如果需要跳转到新的页面，可使用文字按钮。
文字按钮：当按钮标签过长（超过6个中文字符），导致视觉出现问题时，建议该用链接文字；按钮需要嵌在文本中时，应该使用链接文字；当命令是次要的，应该用链接文字；
图标+按钮：有图标的按钮会给人权重较高，需要引导用户去点击它可使用，如导入导出等。
三个按钮：在极少数，需要三个按钮的情况下。除最右边的是主要按钮，其他两个都是次要按钮。如果三个按钮具有的权重都差不太多，那么三个都应该是辅助按钮。
删除无法轻易撤销，通常是永久性的。如果对象将不存在，需要警告用户任何不利的后果，例如数据丢失。
删除后：用户删除数据后，返回其列表页面时，需要对列表的数据进行动画处理，并消息成功提示；如果删除失败，需要发出通知告知用户删除失败。
弹窗删除：高影响。数据很重要、新建非常耗时麻烦、删除的内容有大量数据、关联其他的重要项目等。
气泡窗删除：低影响。新建很容易、操作需要连续删除多个内容等。
图标禁用样式：默认禁用状态是通过降低透明度的来设置的。
组件：50%透明度；
文本：25%透明度；
图标：50%透明度。
至少需要 3个 以上的按钮，更多可以包括任意操作。
删除位置：一般将破坏性的才做放到最后，比如删除。
排序：按照重要的、使用频率高低来顺序，但也需要合乎逻辑。
文案：和正常按钮一样，使用动词作为操作的词汇，不要使用句式。
按钮数量：至少3个以上操作才可使用「更多」。
按钮文案：文字要以动词为主，表述清楚操作按钮会发生什么，例如创建、保存、删除等。具体详见「标准词汇库」。
按钮文案：文字要简短，不要超过6个字，同时需要清楚说明操作按钮时会发生什么。
不同尺寸按钮：相邻的放置不同尺寸的按钮不可以放在一起。
列表页按钮应用
突出的方法，不局限于强化重点项，也可以通过视觉单元的形式（通过改变间距亲密性）。
在一些选项上，或者需要慎重决策的场景，设计应该保持中立，不要去诱导客户去点击某个按钮，所以如果需要突出一项或者更高频的操作，可以通过间距做设计。
2.2 一般规则不要使用图标作为链接；链接文字字符一般不受限制，但也不可过多；如果链接文字特别长，但便于用户理解，也必须精简，以防止文本换行；链接文字应当与目的地的标题一致；避免使用术语“单击此处”，链接文案需要结合目标站点名称，使用有意义的描述性标签。
避免使用术语“单击此处”，链接文案需要结合目标站点名称，使用有意义的描述性标签。
3.2 举例说明默认选择：一组单选按钮应该默认选择一个选项。如果没有默认选择，切勿显示它们。
4.2 事项全选复选框：当页面存在多个同类内容的复选框时，需要提供全选的功能，要求：
勾选全选，则选中当前页面所有记录；去掉当前页面某个记录的勾选，则全选也去掉勾选；刷新页面后，自动去掉已勾选的记录及全选的勾选。标签位置：复选框和标签保持一行，并始终显示在左侧。
5.2 常用输入框形式输入框形式有4中，分别是顶对齐、右对齐、左对齐和隐藏标签，这里只推荐前两种，使用方法如下：
- 简易表单：顶部对齐，字段少于4个，或者字段名称字数多；较复杂表单：右边对齐，字段数量较多，4个以上，默认推荐使用该对齐方式。标签名称尽可能不要超过6个字，超过的用“……”显示。
必填项：
界面的必填项必须以红色 * 标识出来；当必填项没有填写时，在光标移走时，文本框下方以“请输入…”红色文字来标识；当界面排列较紧时，如果必填项没有填，可通过消息提示来提醒。输入框操作：
数字输入框 在输入非法值时直接给予提示；当输入的内容达到了字段的长度限制时，不显示新输入的字符，并提示不允许再输入。验证和错误：
验证可以简化流程，并让用户在填写表单时保持简洁。有关完整指南，参阅表单使用页面。
字符数
文本字段和文本区域需要有字符数限制，输入框长度一般为最大最大输入内容。如果是段落字符计数器超过字符限制，则提示用户字符超过限定数量。
输入框样式
输入框高度：40px、32px、24px 三种高度，默认使用32px。
输入框长度：输入框的长度尺寸需严格按照规定的尺寸来，80px、120px、160px、240px、320px。
搜索输入框
数字输入框
6.1 一般规则默认显示：择下拉框不存在默认值时，则默认为“请选择”，当有默认值，则显示默认值，比如：所有、全部等。
验证方式：验证有助于简化流程，用户在填写表单时出现错误，应实时提醒。
可多选：适用性较广的基础多选，用 Tag 展示已选项。
单选可搜索：利用搜索功能快速找到选项。
选择和下拉组件看起来相似，但它们具有不同的功能。两者基础代码也不同。一个是可以根据需要设置下拉菜单组件的样式，而选择组件的外观可以使用浏览器所自带的。
选择：用户从选项表选择一个（或多个）并用于数据的提交组件。
下拉菜单：对面页面的内容进行过滤、排序或操作等。
7.1 一般规则内容：操作切换，阐明该操作执行后的结果。
8.2 错误案例使用分隔符：使用“-”作为分隔符；日期为个位数时，需要用“0”补齐；表达时间范围时，用“至”作为连接。
使用分隔符：如果日期是用中文，那么表达时间范围时，用“-”作为连接。
日期格式：日期、星期与时刻一起使用时，格式为「日期 时刻」、「日期 星期 时刻」。
9.2 拖拽上传把文件拖入到指定区域上传，且支持点击上传。文件上传需要明确文件的大小和文件格式，例如：文件大小不超过5M，文件仅支持PDF.ZIP.EXL等。
一般用于图片文件上传，用户可以点击缩略图放大或者删除。当上传图片数量到达限制后，上传按钮消失。
使用场景：一般用于上传面单、头像等。
- 用户可以一次选择一个或多个文件上传。默认情况下，可以接受任何文件类型，如果有需要添加参数以验证特定的文件类型。单击添加文件的操作后将触发浏览器的上传窗口。用户选择要上传的文件后，浏览器特定的上传文件窗口将关闭，并且这些文件将显示在“添加文件”指定的区域。文件发生的任何错误应显示为内联错误 Alert。
11.2 表单对齐方式默认推荐类型右对齐，普遍适用于绝大多数场景。如果一个页面需要展示两栏及以上，采用左对齐。考虑海外场景的话，使用顶对齐。
表单结构：表单应该帮助用户尽快的完成其目标，所以不要使用竖列排版布局。
默认焦点：打开一个新表单，光标默认停在第一个待输入的文本框中。
表单按钮：不要将按钮放在表单的正中间，当前采用的是简易表单按钮放在左边，复杂表单按钮放在右下角并浮层。
表单验证：用户单击文本字段以外的位置时，失去焦点显示验证，并将错误提醒显示在组件的下方。
不要长篇大论：表单项的标题、提示不要使用不易理解的词汇或大篇文字，造成理解成本过高。
12.2 字段过多字段合并：头部重新加一个名称，前面列可以多放字段，缺点是占用行高。
滚动条左右滑动：需注意第1列和最后操作列固定浮层，尽可能避免左右滑动。
默认样式：默认展示样式，有当前页+总页+总条目数量+分页按钮组成。
延迟加载：不注重内容的数量，需要用起来更方便一些，使用场景：新闻公告通知等。
排序数据表有三种状态：没有排序（arrows）,向上排序（arrow-up）,向下排序（arrow-dowm）。
图标指示当前的排序状态，并且在激活排序后显示。
全局操作：表格工具栏保留用于全局表格操作，例如表格设置，隐藏过滤器，设置表格数据。
图标大小：该区域可添加关于表格功能的图标，图标大小为16×16。
图标数量：建议表格工具icon数量不超过5个。
数字对齐：无论表格大小，不要将内容单元格居中；名称、标题和文本向左对齐，数字右对齐。
文字链接：将所有的操作链接放到最后操作列中。
计量单位：计量单位默认放在表头，并右对齐。
字段过多：字段过多尽可能采用合并的方式。
13.2 标签分类基础标签：正常情况下，采用基础标签。
轻标签：分类内容重要性很低，可采用轻标签。
内容标签：如选择输入框、详情页信息内容等。
不可用矩形标签：不要使用矩形作为标签，会让用户误以为是按钮。
14.2 分页器分类基础分页器：默认分页器，一般情况下表格都需要展示。
可跳转分页器：除特殊要求，一般不提供输入具体页数查询。
小型分页器：一般用于详情页内部。
15.2 举例说明成功提示：如表单创建成功，则需要简要提示。
16.2 警告提示-使用规则警告提示的消息持续存在，直到用户关闭或者问题解决。一般与字段结合使用，解决表单输入的错误问题。
如果需要显示多个子类型：
使用规则：
用户注意的紧迫性排序的：错误 > 警告 > 信息 > 成功。表单中，警告提示通知显示在表单的上方。警告提示不可覆盖其他内容。如有可能，并为用户提供清晰的后续步骤。如有多个警告提示，不是一个接一个的显示，而是全部显示，比如：显示多个错误警告。各警告提示分析：
错误：阻止用户继续操作，直到消除错误。警告：通知操作可能会产生的意外结果，持续显示到用户关闭，可继续执行任务。提示：提供操作无关要的其他信息，不需要进一步的操作，不显示图标。成功：确认操作完成，不需要进一步的操作。16.3 警告提示 – 使用案例横幅通知：标语占据界面的顶部，和模块页面宽度保持一致。警告提示持续存在，直到问题解决或被用户关闭。放置在相关内容的顶部，通知消息不要覆盖其他内容，其包含的链接重新上传。
通知提示位置：显示页面的右下角，如有多个可进行覆盖。通知消息展示重要消息，不是很重要通知消息，不需要强吸引用户的注意力，放入导航栏消息中。
短期任务或者需要提醒用户注意的重要信息时，对话框效果最好。与导航到新页面相比较，对话框不容易迷失方向。
缺点：对话框是破坏性的，强制吸引用户的注意力，在一般工作流程中，应当谨慎使用，否则会严重影响心流体验。如九曳平台需要客户关注公众号，以便能够及时获取作业消息，这是一条非常重要希望客户能够及时获取到的通知消息。
17.2 模态窗 – 注意事项不可以：
不要嵌入链接：不要在模态窗访问其他页面的信息。不要显示大量信息：模态窗本身显示的信息有限，不要显示复杂或大量数据。不要嵌套：不可以在模态窗打开另一个模态窗。解决方案：第一种则是第一个任务的时候，就不要用模态；第二种则第二个模态框可采用气泡框。不可整页：正常模态框的宽度最大不超过600px，九曳平台所推荐的表单模态框宽度为400px和500px。使用场景：
简易表单：字段数量少于6个。需要立即回复：使用对话框来阻止用户继续其他进程的信息。紧急/重要信息：告知用户当前工作的紧急消息，通常用于报告系统错误、传达用户操作的后果或告知用户平台紧急发布的消息等。需要做决断：确认用户的决定。如果该操作具有破坏性或不可逆性，则使用危险按钮。17.3 模态窗 – 新增表单模态框主要显示关键信息或请求完成用户工作流程所需的输入，九曳平台推荐字段少于6个也可使用。
元素解析：
- 标题：标题应需要简短，不要超过6个字，需要描述对话框的任务或详细信息放到下方的内容中。主体：包含模态窗任务所需的信息。它包括消息文本和组件，模态应包含和当前任务有关的内容。输入框、选择和日期组件如不做要求，都采用右对齐。按钮：包含完成或取消对话框任务所需操作按钮。关闭：关闭
X图标将关闭对话框而不提交任何数据；点击除窗口意外其他位置将自动关闭；按Esc关闭。遮罩层：遮盖页面内容的屏幕叠加层。
危险模式是用于破坏性或不可逆的一种特殊类型。在危险模式下，用危险按钮替换主按钮，它们通常用于发生重大影响时用作确认操作的确认，如果操作不正确，将导致严重的数据丢失。
删除选择：根据其重要性和使用频率来选择。
消息确认：互动。需要用户确认信息，可包含多个按钮。
简易表单：输入数据后保存表单，一般包含取消/主按钮。
不要使用链接：弹窗在任务中属于中间过渡过程，需要用户处理完当前状态，所以不要使用链接让用户跳转到其他页面以致用户中断当前的工作流程。
18.2 左侧菜单左侧菜单：左侧菜单由「组标题+菜单选项」构成。
选择和下拉组件看起来相似，但它们具有不同的功能。两者基础代码也不同。一个是可以根据需要设置下拉菜单组件的样式，而选择组件的外观可以使用浏览器所自带的。
选择：用户从选项表选择一个（或多个）并用于数据的提交组件。
下拉菜单：对面页面的内容进行过滤、排序或操作等。
19.3 容器案例容器使用除横过来作排序，也可以列作排序，注意列排序不需要加分割线区分。
可改变样式，会有更好的使用体验，如图为「页面页签导航」和「快速时间导航」。
20.3 步骤竖排竖排步骤一般用于任务、工作流情况。为排版需要步骤数量超过6个，也可竖排。
21.2 使用案例图标提示：用于描述图标按钮的作用或作用效果，文字要尽可能简短。
文字解释：帮助解释文字或者某个图标的意思，如图所示。
22.2 日历用于显示日期，下图为预约仓库的剩余量。
参考文章
在整理九曳设计规范的过程中，参考和学习了大量平台和一些优秀的文章，不一定都能够全部列举！
《Uniform Design System》（by: Hudl）《Carbon Design System》（by: IBM）《Clarity Design System》（by: MIT）《Element》《Ant Design》《An Extensive Guide To Web Form Usability》（by: Justin），讲述Web表单可用性的重要以及怎么使用。《Design better data tables》（by: Andrew Coyle），怎么设计让数据表结构有着更好的用户体验。《如何优化数据表格设计》（by: Meng）《如何设计复杂信息架构产品》（by: 尤文文）《web表格设计攻略》（by: 张鹏涛TAO）《提高表格可读性的一些技巧》（b: founderdesign）#相关阅读#如何从零构建UI组件及设计规范（一）：介绍篇
如何从零构建UI组件及设计规范（二）：设计原则
如何从零构建UI组件及设计规范（三）：全局样式
本文由 @徐银高 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议
上一篇：Apple 的设计哲学：网页篇
