后台产品设计规范

一、基础框架Basic

1. 页面布局Layout

页面布局元素包括顶栏、侧边栏、主要区域和底栏。

几种常见的页面布局方式：

国字形布局

优点：页面容纳内容很多，信息量大。

缺点：页面拥挤，不够灵活。

T型布局

T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。

优点：页面结构清晰，主次分明

缺点：规矩呆板，如果不注意细节色彩，很容易让人看之无味。

标题正文型布局

这种布局的最上方是标题或广告等内容，下面是正文，一般用于显示文章页面、新闻页面和一些注册页面等。

特点：简洁明快，干扰信息少，较为正规。

左右型布局

左右型布局是一些大型论坛和企业经常使用的一种布局结构。左侧一般主要为导航栏，右侧则放置网站的主要内容。

优点：视觉冲击力强。

缺点：很难将两部分有机地结合起来。

几种常见的页面布局方式

2.色彩Color

主色：主题颜色、用于顶栏等的背景色。

辅助色：除了主色外的场景色，不同使用场景颜色不同。如操作成功时的提示文字颜色等。

中性色：用于文本、边框等的颜色。

中性色使用规范

3.字体Typography

不同层级的文字字号、行间距可能都会不同，有了规范可保持整体的一致性，降低沟通成本和了解成本。

字体使用规范

4.边框Border

可设置各级边框的样式。

边框使用规范

5.按钮Button

可规定按钮样式、尺寸、色号等。

按钮使用规范

6.图标Icon

相同图标需统一。

7.其他规范

1.筛选条件一行显示几列；

2.上下左右内边距值；

3.原型页面尺寸等。

二、引导类Navigation

1. 导航菜单NavMenu

样式1：顶栏

样式2：固定侧栏

样式3：可折叠侧栏:

2. 面包屑Breadcrumb

样式1：首页/列表页/新增

样式2：首页>列表页>新增

面包屑样式

3. 标签页Tabs

1.是否为选项卡样式

2.是否有动态增减

3.标签页的位置（上下左右）

4. 步骤条Steps

1.横式还是竖式

2.是否显示状态，如初审中、复审中等

3.是否有描述，如初审中（初审由XXX角色的用户完成…）

4.是否带图标

步骤条样式

5. 下拉菜单Dropdown

1.触发对象：按钮或文字

2.触发方式：hover激活或click激活

下拉菜单样式

三、表单元素Form

1. 单选框Radio

1.样式1:

单选样式1

2.样式2：

单选样式2

2. 多选框Checkbox

1.样式1：

多选样式1

2.样式2：

多选样式2

3. 输入框Input

1.单一型输入还是复合式输入

2.是否带单位

3.是否带联想输入

4.是否有提示文字

输入框样式

4. 计数器InputNumber

1.设置精度

2.设置增减幅度

计数器样式

5. 选择器Select

1.是否有搜索

2.是否支持多选

3.备选项是否分组

4.是否显示禁用选项

选择器分组样式

6. 级联选择器Cascader

1.是否有搜索

2.是否支持多选

3.是否仅显示最后一级

4.是否每一级都可单独选择

7. 时间选择器TimePicker

1.固定时间点或范围

2.精确时间点或范围

8. 日期选择器DatePicker

日期选择器样式

9. 开关Switch

开关样式

10. 滑块Slider

滑块样式

11. 上传Upload

1.上传文件展示类型：平铺展示或列表展示

2.上传类型：点击上传、拖拽上传

上传样式

12. 评分Rate

1.是否允许出现半颗星

2.是否出现文字

3.是否将不同分值设置为不同颜色

评分样式

四、数据展现

1. 表格Table

1.有无斑马线、有无边框、有无特殊颜色行/值

2.表头是否固定、列是否固定、表格是否固定高度、是否有多级表头

3.是否有选中某行的效果、有无多选全选、是否可排序、是否可筛选

4.悬浮数据时是否可显示额外内容、是否可展开行、是否需要合计

表格样式

2. 树形控件Tree

1.控件中是否可以选择

树样式

3. 分页Pagination

1.是否显示省略号

2.是否显示总条数

3.是否可调整每页显示条数

4.是否可直接跳转至某页

分页样式

4. 标签Tag

是否可移除，是否可新增。

可移除标签样式

5. 进度条Progress

1.线型/环形进度条

2.百分数内显/外显/不显

进度条样

6. 标记Badge

标记样式：数字/其他文本/小红点

五、通知Notice

1. 警告Alert

非浮层元素，不会自动关闭的提示。

1.是否带图标

2.是否带标题文案

3.是否可关闭

警告样式

2. 加载Loading

1.加载图标样式

2.是否带文字

加载样式

3. 消息提示Message

主要用于主动操作后的反馈提示。

4. 弹框MessageBox

复杂、慎重的提示用弹框表现，如删除、提交等。

5. 通知Notification

悬浮出现在页面角落，显示全局的通知提醒消息。弹出位置；是否带图标；是否可自动关闭。

通知样式

大部分样式参考各网站前端样式库，部分图片来源于网络，侵删。