前言:

在设计后台产品时，大多数都是组件都是高频复用的。规范化设计、规范化开发就是绕不过去的话题了。制定一套设计语言是势在必行的。设计语言大致分为：色彩规范、字体规范、图标规范、设计原则、文案规范、布局规范、组件规范。本系列文章会分多篇梳理设计规范，以我们自己的设计沉淀和正在使用的设计语言为基础分享给小伙伴。

本篇是组件规范篇。

--内容较长，建议收藏后阅读--

一、为什么制定组件库

提高一致性

使用统一的组件库可以大幅度提升设计的一致性。

假设同一个人设计同一个系统，设计后期和设计前期设计都会产生偏差，这是因为“时间”变了，随着时间的变化，可能会忘记当时定的规范，随着个人能力的提升，也会舍弃当时的决定，采用更优秀的规范。设计趋势的变化也会推翻当时的设计。不断的推翻自己本来就是优秀的表现。

不做统一的规范，最后的结果会很神奇的。两个优秀的成员如果在没规范的情况下设计同一个系统，每一个都很优秀，但结合起来就会有偏差了。

新旧系统迭代、新旧成员的交接，都会是一致性的敌人，使用统一的组件库就会很的解决这个问题。

提高工作效率

使用组件库可以提升工作效率。不但设计可以复用，前端封装好了组件也是可以复用的。

使用的组件库之后，一般的设计就可以以拖拉拽的形式完成设计。不用再一笔一划的画每一个按钮、每一个卡片了，也不用从不同的文件里复制出想要的样式，仅仅是拖拖拽拽就能搞定。等时间长了，团队成员之间磨合的顺畅了，前端同学甚至可以通过原型图直接下手敲代码了。

多人协作

统一的组件库便于团队之间的合作。

设计团队要统一风格、统一步调。俗话说一图胜千言，使用组件库就很大程度上的解决这个问题了，还能能减少和研发之间沟通的频率，在视觉验收的时候就不用再挨个复查每个组件对样式了。

便于迭代

统一的组件库便于迭代和优化。

每次系统优化迭代之后，只需把组件优化好的样式告诉研发，就是把所有系统的内同一组件优化完成，大家都省时省力。

二、怎么搭建组件库

根据产品的需求和业务场景，先设计五六个主要页面，能表达整体感觉即可。然后再设计几种风格。团队内评审一下，选定最优风格，再向领导汇报，把每一种风格的优劣说明，让领导确认主风格。一般情况下设计合理、言词表达清晰，老板的选择和设计师的选择应该是一致的。假设不一致的话，一定问清楚为什么。很多时候是设计师得到信息不完整，所以站的角度不同，格局不一样，所以才会导致意见不一致的。

组件库的设计一定要注意“动态化”、“极限化”

把每个组件当成一个系统来设计，要考虑到最小情况、最大情况、中间情况怎么适配、操作前的样式、操作中的响应、操作后的反馈、遇到断网、弱网、数据量大的各种情况。这样的组件才是完整的。

每次变化都要及时的更新组件库，而且通知所有的人

每次一点点变化，就会吞噬整个的组件库

三、 什么时间搭建组件库

大体风格确认后，就把常见的、复用率高的组件提炼出来，就会有个基础的组件库。这时候千万别凭空想象、也不要一次性的做完所有可能要用的组件，因为后前很可那要调整。组件库是有个成长周期的，要随着项目的不断推进而一步步的完善组件库，这样的组件库才有韧性、更扎实。一般到项目进展到项目中期就会得到一套完成的组件库了

项目启动时：刚开始就先搭建组件库是非常不明智的选择，这样的行为无异于押题，而且往往押不准，后期推翻的概率非常大。

项目完成后：项目完成后搭建组件库就有点华而不实了，组件库在项目研发中的起的作用很大，更应该物尽其用。 项目完成后就会导致视觉不统一、交互不一致等问题，而且修改成本巨大，研发也不愿意在反复的修改了。对团队的资源造成很大的浪费。通常会有新的任务下达，对项目的优化就会不了了之。

四、组件库

通用类

按钮

定义：基础组件，触发新的逻辑时使用。

类型：主要按钮、常用按钮、虚线按钮、文字按钮、图标按钮。

状态：共五种状态。正常、鼠标悬浮、点击、禁用、加载中。

规则：

• 一般情况下每个模块/卡片只能有一个主要按钮，其余操作常用按钮链接。
• 同一位置最多展示4个操作按钮。5个及更多操作时，使用【更多】或对其进行分组。
• 按钮内文字最少为2个字符。 建议：2≤中文字符≤6  ； 2≤英文字符≤14 。
• 按钮内文字为2-4个中文字符时，按钮大小保持不变；4个以上时，按钮高度不变，根据文字的数量相应变宽，左右各保持8px的宽度。

导航类

主要包括面包屑、步骤条、分页、标签页、下拉菜单

面包屑

定义：显示用户所处页面位置以及页面在系统层级中的位置，并能返回之前的任意页面。

规则：

面包屑是固定页面，展示页面在系统结构中的位置。

（B端对使用习惯和效率至上要求较高，所以使用位置型的面包屑导航方便。还有根据用户访问路径动态生成的路径型面包屑，同学们可根据自家业务自行选择，切勿照搬）

当层级5个及以上的层级时，只展示首位两个，中间做截断处理。

当标题字段8个及以上时，文字做省略号处理。鼠标悬浮时显示全部字段。

面包屑最后一个标题不可点击，鼠标悬浮时不改变状态

步骤条

定义：引导用户分步完成任务的路径导航。可以让用户对任务有明确的预期，也清晰地知道自己当前所在的步骤。

规则：

当任务大于2步时使用。当任务大于5步时，建议优化流程。

文字描述一行最多14个字，超过14个字后折行显示，最多显示42个字。

分页

定义：当信息条目较多时，采用分页形式分隔，每次只加载一个页面。常与表格、卡片搭配使用。

类型：基础样式、迷你样式、简易样式

规则：

当信息条目较多时，使用基础样式，可以允许用户自定义每页的数据量，以提高用户查看和检索信息的效率和灵活性。数据量可分10、20、30、40、50、100，五个等级。

迷你样式一般用于卡片或者浮层。

简易样式一般用于卡片或数据量在10页以内的表格

标签页

定义：选项卡切换组件，常用于平级数据的收纳和展现。

类型：基础样式、卡片样式、胶囊样式、竖状样式

状态：正常状态、悬浮状态、点击状态、选中状态、禁用状态、含图标状态、角标状态、含操作状态

规则：

基础标签页：引领整个页面的内容，常用于主要功能切换

卡片标签页：卡片化的样式，常用于功能切换

胶囊标签页：用于卡片内的选项切换，经常和其他组件组合使用。优先级较低。

竖状标签页：用于分类较多的选项，可以不做分类数量的限制

标签内文字最少为2个字符。 建议：2≤中文字符≤6  ； 2≤英文字符≤14 。

标签内文字为2-4个中文字符时，按钮大小保持不变；4个以上时，按钮高度不变，根据文字的数量相应变宽，左右各保持8px的宽度。当字段8个及以上时，文字做省略号处理。鼠标悬浮时显示全部字段。

标签数过多超出内容区时，增加翻页按钮。点击后更新全部标签。（例：目前是1-8页签，点击【>】后，变为9-16）。翻到末页后翻页按钮禁用。

下拉菜单

定义：一些操作或按钮可以放在下拉菜单里。

类型：基础样式、多级样式

规则：

根据页面布局可选择菜单向上后者向下弹出

菜单文字建议为4-6字，超出时文字做省略号处理。鼠标悬浮时显示全部字段。

菜单过多时，弹出内容区域纵向延伸，超出屏幕后再加滚动条

鼠标悬浮和点击都要触发菜单。可合理使用鼠标右键触发菜单。

数据录入

主要包括：输入框、单选框、多选框、选择器、开关

输入框

定义：显示用户所处页面位置以及页面在系统层级中的位置，并能返回之前的任意页面。

状态：默认状态、悬停状态、输入中状态、输入提示状态、输入正确状态、输入错误状态、悬停状态、禁用状态

规则：

对齐方式分左对齐、右对齐、垂直分布、输入框内部。根据实际业务场景适当使用

标签文字建议2-6个字，每行最多显示5个字，超过5个折行显示，最多2行。

输入文字过多后，建议使用多行文本框

单选框

定义：对于一组可选项进行单项选择。

状态：正常状态、悬停状态、选中状态、禁用状态

规则：

选项最少2个，最多5个。大于5个时建议使用选择器展示。

将单选按钮和文本包含在一起设置为点击区域

设置其中常用的或有设计倾向的选项设置为默认选中状态。

若是十分慎重操作则不建议设置默认选项，以免导致误操作。

多选框

定义：对于一组可选项进行单项选择。

状态：正常状态、悬停状态、选中状态、半选状态、禁用状态

规则：

选项最少2个，最多5个。大于5个时建议使用选择器展示。

将多选按钮和文本包含在一起设置为点击区域

选择器

定义：当选项过多时，使用下拉菜单展示并选择内容。

类型：基础样式、级联样式、多选样式、分类样式

状态：初始状态、悬停状态、完成状态、禁选状态、禁用状态

规则：

下拉框的宽度根据文字的宽度自适应。最多的文字有多少，下拉框就多宽。

下拉框的高度根据选项的多少自适应。尽量一次性都展示出来。（类似于PS里顶部的“菜单”、“编辑”，第一次可能会费力些，时间一长会形成“肌肉记忆”，这种形式更受B端用户青睐）

不可用的菜单项用禁用状态展示，不能隐藏。以便让用户知道“该选项不是没刷新出来，也不是去掉了，是不能选择”。

当使用多选样式时，选项过多且超出下拉框时用省略号展示，鼠标悬浮显示全部，并可以进行删除操作。

开关

定义：开关选择器。

类型：开启样式、关闭样式

状态：可用状态、禁用状态、加载中状态

规则：

两种状态为互斥状态，左侧是彩色为开启状态、右侧是灰色为关闭状态

开关为轻量级操作，切换状态后结果立即生效，无需再次确认（隐喻生活中的开关）。若是关键性操作，则采用按钮或者其他选择器

时间选择器、日期选择器、数字选择器、穿梭框等暂时略过

反馈

主要包括：警告提示、全局提示、通知、文字提示、弹窗

警告提示

定义：常用于页面顶部的公告，需要向用户告知的信息提示。

类型：成功公告、通知公告、警告公告、错误公告

样式：不可关闭提示、可关闭提示、带图标提示、带辅助文字提示

规则：

警告提示始终展现，不会自动消失。用户可以手动关闭

建议一行最多展示30个字，超过30个字换行显示。

属于轻量级的展示形式，不会打断用户的操作

全局提示

定义：全局展示操作反馈信息。轻量级提示方式。

类型：成功反馈、通知反馈、警告反馈、错误反馈、加载中反馈

规则：

在顶部居中显示，持续3s后自动消失。

第一个提示未消失时，第二个提示的位置在第一个提示下方。第一个提示消失后，第二个提示上移，依此类推。

提示框范围200px--480px；提示框左右留有外间距。文字居右显示，超出提示框范围后折行显示。

通知

定义：全局展示通知提醒信息，应用于系统推送或者比较复杂的通知内容

样式：有图标通知提醒框、无图标通知提醒框、有图标和按钮的通知提醒框

类型：成功通知、通知通知、警告通知、错误通知

规则：

在页面右上角显示，通知持续5秒后自动关闭，也可点击关闭icon关闭。

通知提示框宽度固定，高度自适应。

文字提示

定义：文字提示气泡框、在鼠标悬停时显示。

规则：

鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。

方向根据页面空隙自适应。

弹窗

定义：当用户进行当前流程时，不希望跳转页面而打断工作进行，可以采用对话框的形式进行相应操作。

样式：小型对话框、大型对话框

规则：

小型对话框适用于简洁的确认类的对话框，常用于询问客户。

大型对话框适用承载复杂类、信息量较多的内容。

对话框宽度固定，高度在一定区间内自适应。设置最小高度和最大高度。内容小于最小高度时，内容留白显示。超过最大高度时，内容滚动显示 。

下篇更新【图标规范】篇

Powered by Froala Editor