# Web-UI组件开发规范

# 1. 元素

# 1.1 按钮

按钮

按钮表示一项操作（或一系列操作），单击按钮将触发相应的业务逻辑。按钮规范用来指导用户所需要的操作，防止用户出错。本产品提供了主按钮、次按钮、弱按钮、文本/图标按钮 4 种类型，并提供了默认、悬浮、禁用、加载、警示 5 种状态。

4 种类型

主按钮

主要操作按钮，用来强调或推荐的用户行为，一个部分最多—个主按钮，一般情况下用默认属性。
次按钮

表示常规操作，用于一系列没有优先级的操作。
弱按钮

表示不重要的操作，一般用来希望用户忽略的操作。
文本/图标按钮

低强调和轻量型操作，一般用在表格中的操作。

图标提供视觉辅助，单独出现一般是空间较小时，此时图标要符合用户习惯和预期；和文本同时出现时，相互补充来表示按钮的含义。

5 种状态

默认

每种类型按钮进入页面后的显示状态。
悬浮

鼠标悬浮到按钮时的显示状态。
禁用

按钮不可点击操作的显示状态。
加载

按钮点击后出现的显示状态，表示进行时。
警示

用来警示用户操作的显示状态。

按钮组

存在多个按钮时，如果浏览顺序是从左向右，则按照重要度优先级从左向右展示（主要/次要/弱化/次要），从右向左浏览反之。
存在多个按钮时，可以进行聚类分组，然后采用下拉展示的形式（按照重要性顺序），例如导出多种格式。
存在多个按钮时，如果平铺展示可以使用间距或者分隔符对按钮分类展示。
存在多个按钮时，大于 2 个建议使用 16px 间距，只存在两个按钮时，建议使用 40px 间距。

按钮文案

按钮文案应该清晰表达当点击后会发生什么，要与上下文相关（确定、登录、发布）。
按钮文案尽量使用动词。
文案要简洁，字数尽量控制在 4 个字内，且保持一致。

1721641815545

# 1.2 文字

文字系统

文本是用户理解应用程序内容和完成工作的主要渠道，设计良好的字体系统将大大提高用户的阅读体验和工作效率。为此在设计中尽量遵循以下两点：

首先，要建立系统的设计思维：主要、次要、辅助、标题、显示和其他类型的字体以统一的方式进行规划。然后根据具体情况进行必要的微调。建立系统的设计方法有助于提高横向字体登录的一致性，提高字体使用的成本效益，避免不必要的样式浪费。

其次是，少即是多原则：视觉设计应该用尽可能少的样式来实现。避免无意义地使用大量字体比例、颜色和字体大小来强调视觉或对比度关系。

字体系列

本产品默认使用微软雅黑作为系统使用字体，另外为了兼容不同平台和设备，保证屏幕上文本的可读性，也提供了一组替代字体库，确保用户使用友好、稳定和专业。

@font-family ："Arial","Helvetica"," Microsoft YaHei","PingFang SC","I5FAEI8F6Fl96C5I9ED1" , "sans-serif"；

字号大小

确保基于显示屏阅读距离（50 cm）和最佳阅读角度（0.3）的大多数常见显示器上的最佳用户阅读效率，基本字体大小设定为 14px。其他字号规范如下：

1721642659072

字号行高

确保基于显示屏阅读距离（50 cm）和最佳阅读角度（0.3）的大多数常见显示器上的最佳用户阅读效率，基本字体大小设定为 16px，标题类行距为 1.6；段落字体大小设定为 14px，行距为 2.0，段后间距 40px。

1721642797222

文本链接

为了确保文本阅读符合内容无障碍设计（对比度必须达到 4.5 ：1，但禁用色除外），经测试制定如下链接规范：

1721642946976

# 1.3 switch 开关

切换

用于切换单个选项的状态。当用户切换“开关”时，它将直接触发状态更改。“开关”的内联标签应清晰显示，例如禁用/启用、不允许/允许等。

使用场景

需要表示两种状态或开关状态之间的切换。
switch 和 checkbox 之间的区别在于，切换时 switch 将直接触发状态更改，而 checkbox 通常用于状态标记，它应与提交操作一起出现。

1721643278502

# 1.4 下拉菜单

下拉列表

下拉菜单方便了页面功能的展示，它允许用户从选项列表中选择一个或多个值，最大程度上为选项数量提供了灵活性。选项之间以某种逻辑关系排序列出，内容要完全展示。

使用场景

当有多个选项可供选择时，可以将选项放置于下拉列表中。通过悬停或单击触发下拉列表后选择对应的选项进行相关操作。

下拉选项大于 2 个时使用。
最小宽度 120px，最大宽不限，但原则上选项文案控制在 8 个字内。

1721643607290

# 1.5 页码

分页

使用分页可以将一个长列表分成多个页面，一次只能加载一个页面。

使用场景

加载/渲染所有数据需要很长时间时，可以使用分页实现。
如果想通过页面来浏览数据的时候，可以使用分页。

1721700726711

# 1.6 气泡提示

消息提示

对用户的操作作出轻量的全局反馈。一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），浮层的静态展现形式。

使用场景

普通信息、成功信息、警示信息、错误信息、帮助信息和加载中等类型的全局反馈提示。
一般是用户主动操作出发，使用简洁文字描述操作反馈。

使用规则

交互：顶部居中显示并自动消失，默认显示 3s，可根据实际情况更改时长。

1721700854864

# 1.7 徽标

徽标

UI 中用来表示数值或状态描述的的提示性符号。通常情况下出现在通知或用户头像附近，制造视觉焦点，引导用户。一般用作未读数量外，也会用作更新提示、新功能等 UI 设计元素。

使用规则

无需具体数值提示时，仅显示徽标。
使用带有数值徽标时，数量为 0 时，不显示。
使用带有数值徽标时，1 位数背景为圆形。
使用带有数值徽标时，最大两位数，超出后显示为 99+，宽度自适应。
使用有非数值徽标时，最多 4 个字符，宽度自适应。

组件

1721721493401

注意： 根据提示重要级别，提供了 4 种样式，一个页面至多出现两个一级重要提示。

使用展示

1721644005645

# 1.8 面包屑

面包屑

用来显示层次结构中的当前位置。它允许返回层次结构中较高的级别。面包屑根据具体使用场景，可以使用“I” “>”两种形式表示层级关系，一般情况下“I”在文件层级时使用，“>”在页面结构时使用。

使用场景

当系统在层次结构中有两个以上的层时。
当您需要通知用户其所在位置时。
当用户可能需要导航回更高级别时。

组件

1721644178449

# 1.9 单选

单选框

单选按钮允许用户从多个选项中仅选择一个值。无选项不应该太多，因为所有选项默认对用户可见，因此用户可以通过比较进行选择。单选按钮必须多于两个选项，通常少于五个。

使用场景

用于在多个备选项中选中单个状态。
和复选框的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

1721654899518

# 1.10 复选

复选框

用于从多个选项中选择多个值。

使用场景

复选框通常与状态的提交操作一起工作。
单个复选框可以表示两种状态的切换，与使用 Switch 在两个状态之间切换相同。不同之处在于，开关将直接触发状态更改，但复选框只是将状态标记为已更改，需要提交。

1721655012965

# 1.11 输入框

输入

输入是数据输入的基本和常见方式，它为用户提供了一个文本可编辑组件。数据输入是检索对象信息的重要交互方式，因为用户会频繁添加、更改或删除信息。文本输入和选择输入的多种方式帮助用户更清楚、更高效地完成交互。所以应该注意为新用户提供可选项，通过“良好的默认值”、“结构化格式”、“提示”、“输入提示”等方法避免用户对空输入进行胡乱猜测。

使用场景

需要用户在表单字段中输入。
需要搜索输入。
下面规范中的输入框包含元素较多，使用时可以根据场景选择展示/隐藏部分区域。

1721655173853

# 2. 布局

# 2.1 间距

间距主要用来设定元素、卡片、模块之间的距离，主要实现形式有内边距和外边距两种方式。通过统一间距使用规范，能够保证页面删格布局及自动布局的规范性，从而让页面视觉更加统一。此外对研发工程师来讲，更有利于规范代码，保证页面快速稳定运行。

1721698702769

# 2.2 间距系列

根据平台框架及删格系统，间距急于 4px 进行倍数使用，常用间距值为 4px / 8px / 16px / 24px / 40px，根据特殊场景，可以使用 12px / 20px / 36px / 48px，不建议使用超过 48px 的间距。

1721698766750

# 3. 图标

# 3.1 图标

系统中可使用图标按钮，或者配合文字进行使用。图标的选用要符合功能，图标尺寸建议为 14px / 16px / 18px / 20x / 22px 等偶数尺寸。

1721698905570

# 4. 颜色

# 4.1 颜色

品牌色使用规范

品牌颜色是用来体现产品特征和传达想法的最直观的视觉元素之一。选择颜色时，了解品牌颜色在用户界面中的使用方式非常重要。在基本调色板中选择主色，我们建议从第六种颜色的浅深度中选择色板作为主色。研学平台 Web5.0 的品牌颜色来自基础调色板的蓝色，其十六进制值为 1A5EFF，应用场景包括：关键动作点、操作状态、重要信息突出显示、图形等场景。

1721699149403