中后台设计指南
推荐TDesign 企业级设计体系
简介：开源体系的基础上打造具有自身品牌特色且好⽤的产品，秉承包容、多元、进化、连接的价值观。
附录：https://tdesign.tencent.com
搭建整体框架
在明确系统功能分类和结构后，先选择合适的页面导航和布局，建立基础的中后台框架。
什么是中后台系统
中台系统主要指：响应前后台业务，实现双端的集中管理和价值提取，支持业务创新和精细化运营的数据处理系统。
后台系统主要指：对前端网站信息和数据进行管理的系统，主要面向企业内部的运营和管理人员。
在 Web 前端设计当中，中台与后台具有同质性，可看作同一类型来思考设计方法。通过 框架 提供的组件能力快速搭建好用的中后台系统，通常可以分三步：选择合适的页面框架-设计页面间的任务流程-合理使用组件。
中后台页面框架
页面框架由「页面导航」与「页面布局」两部分组成。
页面导航
导航是指：在页面中引导用户找到功能和理解信息层级，可分为整站导航与区域导航两大类。
| 导航分类 | 定义 | 相关组件 |
|---|---|---|
| 整站导航 | 对整个网站系统的最大颗粒度模块的引导，也称为全局导航或总导航。 | 导航菜单 |
| 区域导航 | 对某一模块下的页面，进行引导和分类的导航，也称为情景导航。 | 固钉 、锚点、面包屑、下拉菜单、分页、步骤条、选项卡 |
页面布局
页面布局是指：将导航和信息内容在页面中进行合理安排和分布，由「栅格」和「布局」组成。
不同布局的选择依据，通常为：1 功能模块的数量。2 功能与功能之间的相关性。
一般有3种布局方式：上下布局、左右布局、混合布局。
上下结构的布局
主要特征：导航在上信息内容在下的布局。横向导航空间有限，左右点击效率低。
何时使用：1 功能模块数量较少时（一般小于 9 个）。2 各模块间关联较弱、需要做明确区分或无需频繁切换时。
左右结构的布局
主要特征：导航在左信息内容在右的布局。纵向空间具有较好延展性，上下点击效率高。
何时使用：1 功能模块数量较多时。2 各模块间有一定相关性、或需要在模块间频繁切换时。
混合结构的布局
主要特征：将上下、左右相结合的综合布局。横纵空间优势互补，在展示和操作上都具有较好的延展性和包容性。
何时使用：1 功能模块数量较多时。2 各模块间有父子或交叉关系、 需要按层级展示时。
常见的中后台页面
中后台系统常见的页面模板
| 典型页面模板 | 相关高频任务 |
|---|---|
| 仪表盘 | 数据筛选与查询、效果预览、新手指引 |
| 列表页 | 数据筛选与查询、表格批量操作、数据导入、效果预览、状态流转、任务引导 、新手指引 |
| 表单页 | 数据筛选与查询、任务引导、效果预览、新手指引 |
| 详情页 | 数据筛选与查询、状态流转、数据导入、效果预览 |
| 结果页 | 状态流转、新手指引、任务引导 |
| 个人页 | 新手指引、效果预览 |
| 登录页 | 新手指引、任务引导 |
如何设计高频任务
明确整体框架和页面布局后，根据业务场景，对相关任务流程进行设计。
中后台产品虽服务不同业务，但存在非常同质化的高频任务，掌握这些任务的设计方法，可有效提高中后台的交互体验。
数据筛选与查询
按所需条件或类型选择需要的数据项、或查询数据结果的任务。常应用于「仪表盘 」「列表页」。
A 查询后生效
何时使用：当用户对数据查询范围有明确针对性，需要对数据进行一系列筛选过滤的使用场景时，可使用查询器进行一次性提交生效。
核心流程：选择条件 - 触发查询 - 获得结果数据 - 清空条件
相关组件：时间选择器 、日期选择器 、输入框 、选择器 、按钮 、表格 等
B 立即生效
何时使用：当数据查询范围较为随机，用户需要反复、多次修改条件时，可实时显示筛选结果，来提高查询效率。
核心流程：条件选择 - 获得结果数据 -条件修改 - 获得结果数据
相关组件：时间选择器 、日期选择器 、输入框 、选择器 、按钮 、表格 等
其他场景：折叠条件
何时使用：当筛选项过多，全部显示会增加用户信息识别效率，可只显示高频选项，其他选项折叠，需要时自定义展开。
核心流程：展开条件 - 条件选择 - 获得结果数据
相关组件：时间选择器 、日期选择器 、输入框 、选择器 、按钮 、表格 等
图示：隐藏固定选项的条件
图示：隐藏固定选项的条件
其他场景：条件模版保存与调用
何时使用：当用户的筛选需求个性化较强，需要根据自身需要使用筛选项时，提供可自定义保存的筛选器。
核心流程：条件选择 - 保存为模版 -模版调用
相关组件：时间选择器 、日期选择器 、输入框 、选择器 、按钮 、表格 等
表格批量操作
对报表中的多项数据进行统一操作的任务。常应用于「列表页」。
A 所见即所得
何时使用：当批量操作按钮为主要或高频操作时，无论是否已选择数据，均在页面给用户见即所得的操作预期。
核心流程：选择要操作的内容 - 进行操作 - 显示操作结果
相关组件：表格、按钮、多选框、下拉菜单、全局提示 等
B 选择后触发
何时使用：当页面已有主要按钮，批量操作为次级或非高频操作时，可在选择数据后显示操作区。
核心流程：选择要操作的内容 - 进行操作 - 显示操作结果
相关组件：下拉框 、多选框 、输入框 、选择器 、按钮 等 、表格
效果预览
当编辑或改变的数据未最终生效时，提前用户了解编辑或改变的数据效果的任务。常用于「仪表盘 」「 结果页 」「 详情页 」 。
A 异步触发
何时使用：当需要配置或调整的元素较多、或实时刷新效果有延迟，需要集中预览效果时。常在页面整体出现预览。
核心流程：填写表单/或配置项-点击预览-进行预览
相关组件：表单、按钮、输入框、上传、下拉菜单、单选框、多选框、选择器 等
B 同步预览
何时使用：在配置设置项或信息元素过程中，需要实时关注最终效果、或观察配置项变化时。常用在页面局部出现预览。
核心流程：填写表单/设置项-进行预览
相关组件：表单、按钮、输入框、上传、下拉菜单、单选框、多选框、选择器 等
新手指引
为新用户提供功能介绍或使用说明等信息的指引性任务。是在任意页面都会经常出现的基础任务。
A 阻断式指引
何时使用：当需要用户必读、或在指引过程中不建议用户做其他操作时，让用户聚焦关注指引内容。
核心流程：触发引导 - 逐步查看引导 - 结束引导
相关组件：对话框
B 非阻断式引导
何时使用：当指引内容为辅助说明、或需要在操作界面的同时查看指引时，让用户可选择的使用指引。
核心流程：触发引导 - 逐步查看引导 或 忽视引导继续操作界面 - 结束引导
相关组件：气泡确认框、弹出层、文字提示
其他场景：主动触发引导
何时使用：当指引内容较多、或用户需要反复查看时，可提供用户可主动触发的入口。
核心流程：触发引导 - 选择任务 - 进入引导 - 逐步查看引导 - 结束引导
相关组件：气泡确认框、弹出层、文字提示、对话框 等
数据导入
将本地数据导入到中后台系统中的任务。常应用于列表页 。
A 逐个文件导入
何时使用：当需要轻量快速导入数据并显示结果、或待导入的数据格式较集中时，可逐个快速导入。
核心流程：触发导入 - 选择要导入的一个文件 - 开始导入 - 收到导入结果
相关组件：按钮、上传、全局提示、表格、列表、文字提示 等
B 批量文件导入
何时使用：当待导入的数据较复杂、或数据文件有多个，可批量上传后，再导入需要的数据。
核心流程：触发导入 - 选择上传文件的方式 - 批量上传文件 - 确认批量文件的上传结果 - 导入文件
相关组件：按钮、上传、全局提示、表格、列表)、对话框 等
状态流转
在使用某条数据项的过程中，对该项数据的状态进行调整或变化的任务。常应用于「列表页 」「 详情页 」「结果页 」。
A 通过详情进行状态流转
何时使用：当单条信息内容较多或较复杂时，需要用户查看信息详情、明确详情内容内容后，再进行状态流转决策。
核心流程：在列表中选定数据项 - 查看数据详情 - 选择要流转的状态 - 确定流转 - 显示流转结果
相关组件：步骤条、表格、表单、下拉菜单、按钮 等
B 通过列表摘要进行状态流转
何时使用：当单条信息内容较少，在标题或摘要中即可了解，或无需校验详情内容即可进行状态流转决策时。
核心流程：在列表中选定数据项 - 选择要流转的状态 - 显示流转结果
相关组件：列表、表格、下拉菜单、按钮 等
任务引导
当用户需要完成某个任务或使用某项功能时，为用户提供必要的指导或说明的任务。常应用于「详情页 」「结果页」。
A 任务开始前的引导
何时使用：当任务较复杂、或任务执行前需做必要准备时，给用户相关引导或提示。
核心流程：查看引导内容 - 按引导执行任务
相关组件：文字提示、对话框、步骤条、卡片、按钮 等
B 任务结束后的引导
何时使用：当任务结束后，其结果与另一任务相关、或任务完成后的数据会触发其他操作时，给用户后续操作的引导或提示。
核心流程：执行任务 - 查看任务结果引导 - 选择是否根据引导执行下一任务
相关组件：文字提示、对话框、步骤条、卡片、按钮 等
