本篇介绍通过基础组件库和项目的沉淀过程，构建成全平台通用的模版页面，通过这些模版页面，再结合业务可搭建成产品所要的设计页面。
《如何从零构建UI组件及设计规范》共分为5个系列，分别为《一：介绍篇》、《二：设计原则》、《三：全局样式》、《四：基础组件》、《五：通用模版》，
01模版-布局
页面布局的设计，需要考虑用户在浏览web页面时视觉要求，即从上至下、从左到右。
整体布局
区域：页面展示如图所示，按照功能模块区分为：①顶部导航、②左侧菜单、③页签、④头部区域、⑤内容区域。
Spec：页面各功能模块的之间的距离。
1.顶部菜单
它的定位是全局功能，也或者是系统功能的操作。
顶部与左侧菜单区别：
顶部菜单：
左侧菜单：
2.左侧菜单
不存在单独一级菜单：即使只有一个菜单，也要挂在一级菜单下面。
菜单深度控制在两层：增加菜单而减少深度的设计原则，为防止内容隐藏过深，如果二级菜单下需要显示其他内容，请使用标签页或者另增加菜单。
按照使用频率排序：菜单常规按照使用频率和重要性排列，常用的排前面，不常用的往后排；重要的放前面，反之放后面；
菜单文字需简洁：文字宽度和菜单应较为接近，字符不要超过8个字。
控制一级菜单数目：一级菜单数目不要太多，尽可能增加二级菜单。
3.页签
将用户常用的菜单功能展现出来，方便用户快速切换，并告诉用户当前所在的页面。
工作台始终存在：「工作台」页签始终存在，不可关闭，较于其他页签UI有所区别。
关闭所有页面：如果页签宽度超出1100px，那么最后则展示下拉箭头，并添加「关闭所有页面」功能。
02模板-图表
图表一般用于平台的首页，用来展示图表数据统计等。
1.图表布局
图表一般用于平台的首页，如客户平台、服务平台等首页，一般展示用来展示图表数据等。
2.柱状图
优点：一目了然地进行数据维度的增减比较；
缺点：数目太多时（超过12），分辨起来比较困难，这时则适合用折线图来进行显示。
3.折线图
适用于对趋势的展现，不建议展示每个节点，对比的主体数量建议不要超过12个，过多会让用户辨识度降低。
优点：适合对于趋势的研究；对主体的对比效果较明显；
缺点：对比主体不能太多。
4.饼图
适用于研究单个个体与整体之间的关系，找到影响整体的主要因素；一般主体数量不要超过6个，如果数量超过，可以使用一个“其他”来概括；占比从大到小，从12点钟按照顺时钟方向进行排列。
优点：很快就能看出，影响整体的头部因素有哪些，切占比比例是多少；
缺点：各因素对比效果差，特别是两个因素的占比相近的时候；影响因子较小的很容易被忽略。
5.举例说明
客户平台工作台
服务平台工作台
服务平台客服平台
03模版-列表页
查看和处理大量的条目，可对列表的条目进行新增、删除查看详情等。
1.基础布局
单列布局
从上往下堆叠，数据过滤在最上方，数据过滤后，再由总体到具体的浏览逻辑理解和分析。
浮边布局
将数据过滤模块放置在右侧隐藏，点击右侧滑出。当过滤条件过多，且操作频次极低，又不想占用水平空间时，可采用此方法。
2.一般规则
边距：所有的边距都为8px；
按钮数量：操作按钮最多6个，超过的最后使用更多下拉。
隐藏过滤器：即使没有收缩过滤器，下拉也会隐藏过滤器；
字段为空：如果列表内容为空，使用“-”替换原字段信息，不可以直接空着。
回到顶部箭头：筛选隐藏后，下拉超过两屏幕，显示回到顶部箭头；
操作按钮：导入导出按钮较为重要，为突出其重要性，与其他按钮采用分割线分开，按钮内部增加图标。
禁使用弹窗筛选：一般情况下筛选条件需要实时可见，不可以出现在两个页面上。（ps.弹窗算另一个页面，错误示范：客服平台、CRM弹窗设计）
3.模板列表
常规状态：正常表格，提供每条条目的概览信息，可查看详情。作为简易版的列表页使用。
字段过多：横屏滚动，需要将标题名称字段和操作列浮出。
多个字段合并：通过将字段进行合并，一般将合并的字段放在前列。
卡片式：不需要过滤条件，无翻页，自动加载；应用场景：用户没有特定的顺序浏览条目，将每个条目以较有吸引力的方式呈现，如服务平台的CRM企业客户、通知消息等。
右侧浮边：将数据过滤模块放置在右侧栏，当过滤条件过多，横向空间充裕时可使用。
4.头部筛选区域
不要使用弹窗查询：因为这样就不能够看到筛选的条件，如@客服平台需要修改
保留当前查询条件：每次查询保留当前查询条件；
重置按钮：当查询条件超过一行，则显示下拉，当查询条件超过6个，则提供「重置」按钮；
提供模糊查询：除设计中明确提示不需要外，需提供模糊查询及组合查询功能。
5.快速过滤选择
允许用户处理大型数据时减少可见项，帮助用户快速找到他们想要的东西，面对大量选项时作出决定。非特殊情况，只可以放同一个字段类型的筛选。
6.修改和删除
修改
删除
04模板-表单页
九曳设计规范表单有5种类别，分别为：①最基础表单、②基础表单、③步骤表单、④卡片表单、⑤标签页表单。
1.表单布局分类
F模式：是浏览不受容器限制（例如表单页设计）的一种设计方法。用户将逐行浏览内容，最后达到决定性按钮。基础表单和步骤表单采用此设计。
Z模式：用户浏览信息内容会受限容器（例如弹窗）的设计，视觉引导是从左上角开始往右下侧结尾。卡片表单和标签页表单采用此设计。
2.最基础表单
快速完成一个简单的任务，输入的信息量很少，建议6个字段以下使用。如不做说明，所有的新增表单打开一个新的页签页面。
3.基础表单
快速完成一个简单的任务，输入的信息量很少，建议6个字段以上使用。
一列字段
两列字段
4.步骤表单
需要流程组织填写的，利用步骤条告知用户流程和进度，常常在最后提交阶段需要让用户再次确认消息，并在结束后给予用户明确的结果反馈。适用于具有明确的线性逻辑任务。
5.卡片表单
一次性填写的内容非常多，不同的内容可进行归纳。或者对不同的类别采用不同的选项卡。建议20个字段以上使用。考虑编辑修改时，需要再次划入到底部，所以采用分卡片表单时，按钮放在右下脚。
6.标签页表单
方便查看切换各个类别内容修改，采用标签页设计。如CRM的客户管理设计。
7.辅助功能
新增
保存
取消
05模版-详情页
用以展示操作列条目的详情描述或修改。
1.模版类别
2.单张卡片
所有的信息内容集中在一张卡片中，通过间距来区分。使用场景：需要展示内容较少，复杂度较低的信息。
3.多张卡片
4.页面分层
使用场景：详情页内容且复杂度较高，需要拆分为多个页签，辅助用户浏览信息。如CRM企业客户管理。
5.表格式详情
某一组的字段内容过多的话，建议使用表格式样，这样做的好处能够快速定位信息。
06模版-空状态
让用户知道当前情况，并提供后续步骤的建设性指导，避免用户感到迷失和困惑。
1.元素解析
无数据空状态：首次使用没有数据。目的让用户知道需要添加数据。
用户操作空状态：根据用户操作反馈。如：搜索无结果；确认结果完成（支付完成），目的让用户知道成功的完成了某一个过程，并向用户反馈结果。
错误空状态：权限、系统、需要配置等问题。让用户知道问题所在，如果可能并提供可以纠正的操作按钮。
不要多个按钮：不要有多个按钮让用户做选择，集中在让用户需要做的主按钮上。