中台通用页面模板的指导规范（简要摘录）
东莞/UI设计师/2年前/1290浏览
版权
中台通用页面模板的指导规范（简要摘录）
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
当前文章的中台通用页面模板为：【G-Common页面模板】，是基于中台基础组件、区块/高级组件，提供基于通用功能 及典型业务场景的页面模板示例，为页面搭建提供可参考的规范指导。
内容：
基于“G-Common UI Kits 基础组件”、且有源自业务的“G-Common通用页面模板案例”，输出一份可指导产品、设计师乃至开发的页面设计规范。包含内容为：
1）系统页面框架/布局、2）通用样式、3）页面模版概设（页面布局及内容分区模型、区块功能、UI样式，及使用场景概述）、4）区块/高级组件的使用规范…
文档目录：
背景：
仅G-Com Web端通用页面模版案例/示例页面，不足以完全指导业务在页面搭建过程中需要面临的设计问题；
将页面模版示例页面以“页面及内容模型”的方式，细化页面内容的布局、功能、样式及使用场景等，系统、有效地指导业务落地通用页面模版规范！
目的与范围
目的
1）补齐基础组件缺失的页面搭建参考规范：
【G-Common页面模板】是基于中台基础组件（及其高级组件），提供基于通用功能 及典型业务场景的页面模板示例，为页面搭建提供可参考的规范指导；
2）助力业务场景的标准化和统一：
统一、标准化的页面模板帮助产品、设计师、开发者等角色高效的完成企业级产品的设计和研发，通过统一规范降低沟通成本， 提高开发效率；同时助力解决当前存在的各业务场景、体验不一致的问题。
应用范围
当前【G-Com页面模板】规范文档主要面向平台为【
WEB
端】，主要适用于B端类系统和产品。
使用对象
产品&设计师：
【G-Common页面模板】将具有典型特性的业务场景提取出来，帮助各业务的产品 设计在类似的业务场景下形成统一的页面搭建指导。
开发：
【G-Com页面模板】规范文档会输出具有典型特性的业务场景，及相关的代码演示案例，当产品选用了当前规范文档提供的页面或组件模版时，可方便前端快速复制和调用相关的案例演示代码。
正文开始：↓↓↓
一、全局样式
1、Color 色彩2、Layout布局2.1、栅格系统2.2、布局模式，及页面适配框架3、Font 字体（略，请见规范文档详情）4、Icon 图标（略，请见规范文档详情）5、阴影（略，请见规范文档详情）6、骨架屏（略，请见规范文档详情）
1、Color 色彩
用于UI界面的色彩搭配体系，包括：品牌主色、功能色、辅助色。
1.1、品牌色
需要在界面中强化品牌意识、体现“品牌”特性的UI用色，非必要。
1.2、功能色
带“功能”特性可用作功能提示、可明确UI界面信息及状态的UI用色，包括：功能默认色、成功色、失败色、预警色等。
1.3、辅助色
除“品牌主色”、“功能色”之外的UI用色，可平衡、差异于主色，常见辅色应用在项目数据图表、系统插画等的配色使用中。
1.4、中性色
中性色包含了黑、白、灰，是页面中文字、背景常用的颜色，合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。中性色在落地的时候是按照透明度的方式实现的。在中性色落地实现的时候，建议图标 / 文字颜色采用透明度实现，其他情况建议使用中性色色值实现。
此外，同一产品中，G-Common UI建议使用同一套灰阶。比如，组件使用冷调灰，字体建议同样使用冷调灰；但允许业务设计师根据需要替换灰阶，且组件支持灰阶全局替换。
灰阶使用建议：
◎
冷调灰：
“冷调灰”的灰阶偏蓝，可应用于蓝调（或主色为冷色系颜色时）的系统环境渲染中；
◎
中性灰：
① “中性灰”的灰阶由黑色叠加透明度生成的色阶（Alpha & Fill），可应用于不需要考虑环境色渲染的系统UI搭建中；
② 因未配置“暖调灰”，当主色为暖色系颜色时，可使用“中性灰”
1.5
、中台业务色彩系统设计（仅作业务参考方案）
设计背景：品牌组已输出品牌色彩系统下的各业务线配色范围，而中台只有一套中台研发的UI配色，缺少其他业务线的
UI
配色方案和指导！
ps：通常各业务的品牌主色作为其UI主色（历史原因，部分业务已存在品牌色）
1.5.1
、配色方案一：中台组件标准配色及应用
通过主色/品牌色扩展出360°UI色环，360°UI色环的取色可选择24/36/48/72标准色卡，从标准色卡中选取UI配色，当前配色方案为：
①
主色
+
②
四大功能色
+
③
主色互补色
+ ④ 主色类似色
+ ⑤ 主色互补色的同类或类似色；
附：配色方法参考来自网络：设计系统中颜色规范如何建立？方法帮你总结好了
第一步、梳理中台UI标准配色的调性
（明度趋势）
颜色的
HSB
色值中，调整
饱和度
和
明度
，使各个颜色感官明度保持一致，维持视觉统一性。
明度
/
亮度的量化及计算公式：
颜色的亮度数值？ 根据国际电联 BT.601 规定的 RGB 到卢马换算公式我们可以获取颜色的亮度数值：
Y=0.299*R+0.587*G+0.114*B
，颜色中红绿蓝的值对亮度的影响并非
1:1:1
，而是接近
3:6:1
，绿色含量越多，亮度越大。
转换为百分百亮度:
Y/255*100
经过竞品的
UI
配色收集，总结360°UI色环的明度趋势为：
1）黄绿之间达到最高峰值，蓝紫色为最低值域；
2）高峰区间亮度差异幅度大，其他区间相对缓和；
3）曲线图允许有些微升降波动，整体以饱和度S、明度B的缓和过度为佳。
已知中台UI主色
{
#
3081F2
;
} ，生成24色卡（15°色相环取色），通过校验【
饱和度
】和【
明度
】得出标准24色卡
第二步、取主辅色
在
【24色卡/色环】
上根据主色选取出其他辅助色：
●
主色：
1
；
●
主色的互补色（180°）：
1
；
●
主色的类似色（±30°）：
2
；
●
主色的互补色的同类色（±
15°
）和类似色（±
30°
）：4取1
同类色：指色相性质相同，但色度有深浅之分的一对颜色。是色相环中15°夹角内的颜色。类似色：色环上色相（Hue）相差30°以内的颜色（类似色冷暖一致，色调统一和谐，情感特性一致，色相过渡也柔和自然，是非常自然的配色方案。）邻近色：在24色相环上相距60°以内（属于中对比度的色相组，以看成色相间隔扩大的类似色）对比色：在24色相环上相距120°～180°互补色：在24色相环上相距180°
● 关于【功能色】的应用：
1）仅作功能提示使用（绿：完成/成功提示；黄：预警；红：报错）；
2）既可用作功能提示，也可作为辅色应用在项目数据图表、系统插画等的配色使用中。
第三步、生成颜色序列
调整
HSB
色值中的
S
（饱和度）和
B
（明度）值：
S 值以S/5递减，B 值以(100-B)/5递增，获取浅色序列：【S1=S0-S0/5；B1=B0+(100-B0)/5】 ；S 值以(100-S)/5递增，B 值以B/5递减，获取深色序列：【S2=S1+(100-S1)/5；B2=B1-B1/5】
我们此处的主辅色的生成颜色序列采用的便是这种【调整HSB值】的生成方式，并将其规则做成中台颜色序列生成工具，支持在线自动生成序列颜色。
第四步、同理生成其他八大业务UI配色
（略）
总结
●
缺陷：
① UI配色中的主辅色色值仍需人工取色，只有色阶支持在线生成，无法一键生成所有配色 ；
② 各业务间色相取值未统一，不利于后期统一维护或形成整套的配色系统
●
成果：
① 输出一套验证可行的业务配色效果案例；
② 沉淀出一份基于中台组件配色调性的取色方法论！
●
优化方向参考：
基于方案一的主辅色取色规则和明度趋势调性，生成的中台色环/色卡由原来的【24色卡】升级为【48色卡】或【72色卡】，限制业务自由定制UI主色，业务UI配色均来自同一套【中台色环/色卡】中
2、Layout布局
2.1
、删格系统
搭建布局系统需要考虑灵活度和设计效率。比如24栅格与16栅格，不同的列数决定了栅格体系的灵活程度，同时也决定了页面的布局方式。栅格体系越灵活，页面的布局方式就越多，可以满足更多不同的界面排版要求，但在应用的时候也就稍微复杂一些。复杂度和灵活度是两个负相关的变量，在实际应用中要去结合实际情况去选择合适的列数。
布局系统可以协助进行页面级整体布局，保持整体的一致性，并提高设计效率。
1、屏幕宽度基准尺寸为1440px，1200px可作为最小兼容宽度，1920px及以上可作为大屏场景；2、PC端栅格外边距（margin）统一为24px；槽间距（gutter）统一为16px；3、在上下布局、内容较为简单的页面使用16栅格，左右布局内容较为复杂如中台等使用24栅格；
2.2
、布局模式，及页面适配框架
页面导航布局模式：
2.2.1、自适应布局
简述：【自适应布局】让页面元素随着视窗的伸缩而进行对应的适配变化。适用于一般的 “B端系统网站”。又称：百分比自适应（尺寸自适应）：
附：
网络适配参考方案：
⛔️响应式与自适应
响应式与自适应对比：
二、通用样式
一些在页面搭建过程中会常用到、或容易用错的通用组件/区块，此处会对其部分重点需要注意的样式和用法的进行列举说明。
1、页面主要构成结构1.1、全局导航1.2、顶部栏1.3、系统窗口页签1.4、面包屑1.5、内容区域（必选）2、【弹出框】的选择3、【标题栏】的布局及应用4、【表单】类型及选择
1、页面主要构成结构
应用范围：
当前页面布局/构成主要针对“纵向导航系统布局（典型）”，通常用于典型的 “B 端通用系统网站”。
（“门户型官网”一般采用【版心自适应】布局，如【MO 门户】暂不在当前应用范围）
1.1
、全局导航
系统全局导航/一级导航为【主侧导航】，位置在页面左侧（而不是顶部）
功能及交互：
①
主侧导航支持收展，即【宽
/
窄导航】之间的切换；
②
导航菜单支持分层分级：导航展开时，菜单支持分层分级：树菜单+分类管理；
③
支持嵌入菜单提示信息（功能嵌入），如：【Badge】包含不限于新消息、新内容、新单据的处理提示等；【呼吸灯】包含不限于新功能提示、动态更新等；
1.2
、顶部栏
位置在页面顶部，仅作为系统的局部导航/标题或工具栏，由业务侧配置其是否存在；
1.3
、系统窗口页签
页签，是在同一个浏览器界面同时打开多个页面，用标签的形式显示，点击不同标签就可以切换到不同页面。
1.4
、面包屑
反映当前页面在网站结构中的位置，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。
1.5
、内容区域（必选）
内容区域需要根据承载的具体内容区分内容的布局场景，通常分为：
①
通栏自适应布局；
②
分栏自适应布局；
③
宫格卡片布局
2
、弹出层的选择
2.1
、【弹出层】类型
G-Common UI
库（
Web
）的弹出层常见类目：
2.2
、应用场景及载体、和大小
A.
🔲
“6.1 Dialog
对话框”
宽幅大小管理：
B.
🔲
“6.13 Drawer
抽屉”宽幅大小管理：
3
、【标题栏】的布局及应用
常见标题栏分类：
a. 标准工具栏
b. 文本标题栏
：
文本标题栏提供两种尺寸样式： 1）大号标准标题栏（Normal）；2）小号标准标题栏（Small）；
c. 组合式标题栏
：
为左侧文本标题与右侧功能控件组合使用的场景，左右内容垂直居中；
d. 门户卡片标题规范
：
面向门户工作台，其卡片标题请遵循门户平台卡片标题规范，详情请对齐并移步查看《门户卡片规范》
标题栏通常分左右两侧分别布局，左侧一般是标题和主要功能，右侧放置次要功能。
需注意左右两侧功能区之间的安全留白距离：
4
、
【表单】类型及选择
【
典型表单
】一般指典型、通用的编辑表单，通常应用于简单、纯粹的【新建】页面/窗口中的表单布局中。
【
分组表单
】一般用于B端有大量编辑表单诉求的场景中。
三、区块
-
高级组件
（2022年9月～12月，Helen_HE主导）（参与人员：Yang、Helen_HE、Hui、nono、小智、赵公子、JinTing、ZhengYi、PD）（⛔️内容较繁复此处仅作简览预告，详情请见规范文档或询主设：Helen_HE）
定义：
【高级组件】指
G-Common
高阶的组件模版，可基于中台基础组件二次封装的高频/复杂场景的模块化/区块化组件，为复杂/高频/通用的业务场景提供的功能更全面精细的模块化解决方案。
背景：
G-Com组件在业务开发侧的使用覆盖率不高；
2022年G-Com组件1.0为基础组件建设对业务的提效效果不够明显：基础组件未与业务场景耦合，业务侧调用后提效效果不显；
各业务线和各产品间的组件应用效果差异明显；
目标：
1）【高级组件】和【页面模版】会补充中台业务场景的缺失；
2）为业务场景提供统一的UI规范。
内容：
4
大类高级组件，含：高级搜索/过滤、高级导航、高级表格、其他高级数据管理；
约
16
个大型组件，如：标签选项卡、高级过滤列表、高级过滤抽屉、手风琴或二级菜单面板主侧导航、树结构、Hamburger、高级表格、手风琴折叠列表、数据看板、相册图集、甘特图等；
其中包含
60+
以上个功能点，大大小小细节功能已超
200+
明确高级组件的 IT 落地方案：
两端一致性实施原则：
PC端、移动端 两端设计提案遵循“一致性”的设计原则和目标，以便确保上线产品在全平台的场景和用户感知的一致性，同时也提前为后期Web端的全端响应能力的升级做过渡…
区块组件UI样式预览：
四、页面模版
（2023年2月～5月，Helen_HE主导）（参与人员：Helen_HE、Hui）（⛔️内容较繁复此处仅作简览预告，详情请见规范文档或询主设：Helen_HE）
【G-Common页面模板】（以下简称“页面模版”）是基于G-Common组件搭建的典型页面模板示例，当前规范中“页面模版”仅面向
WEB
端，主要适用于B端类系统和产品。
内容载体形式：
内容常见高级载体为“新页面”、“弹窗”、“抽屉”等，当前模版规范主要针对“新页面”的模版内容，即“页面模版”，如业务侧需要变更载体则自行调整容器组件。
1
、列表页
列表页可以查看和处理大量的条目，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。
设计目标：帮助用户更高效的查看、处理、查找条目。
容器/载体形式：A. 新页面；B.弹窗； C. 抽屉
以下皆以【新页面】的载体形式进行例举阐述，【弹窗】和【抽屉】内列表内容咱不在此列
页面模版之【通用列表】的配置能力：
组件功能组合、配置，形成模板化区块和页面
通过【低代码】平台赋予页面模版中组件是否显示及细节功能配置的能力。组件的样式暂不在此处页面模版中直接配置，需前往“组件配置”中进行组件样式调整
列表页
内容区块
可配置内容预览：
1）【数据过滤】组件类型及配置预览；2）【数据列表】的内容
2
、表单页
在企业级产品使⽤中，⽤户需要经常添加、编辑信息，常使⽤表单的⽅式收集和传达信息，提交给系统使用或引导用户进行应用设置，清晰的表单设计可有效提升⽤户的使⽤体验。
附：我过去两年的“中台组件建设”主要都在做什么？
略，请见下一篇《2023年主要工作回顾》：https://www.zcool.com.cn/article/ZMTYwNzY5Mg==.html
搭建中后台企业级设计体系
（规范背景）
：
G- Common
是面向企业“PHX计划”提供的一套中后台企业级设计系统，为PHX相关产品提供设计指导原则和工具，促进研发部门协作效率提升
G- Common 1.0
的基础建设：
主导中台Web端基础UI库的样式校验与封装，负责基础组件在企业内部业务应用场景的验证、探索等，通过完善中台组件库助力完成一套组件系统初步的雏形成果输出。
01基础UI库的样式校验，及UI组件的补充02基础UI库的.Sketch Library 封装03基础UI库 VUE 2.0 &3.0的UI走查04中台业务色彩系统设计
G- Common 2.0
的升级建设：
因为
G- Common 1.0
只有基础组件库
，无法囊括
UED
中台的所有
UI
规范，且无法高效满足业务侧实际的组件调用诉求，故而开展的
G- Common 2.0
升级建设。
05【模版库】区块组件的场景规范06【模版库】高级组件的设计提案07通用模版（区块&页面等）的指导规范
14
举报
声明
40
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
14登录即可同步推荐记录哦
40登录即可加入我的收藏
评论登录即可评论想法
分享分享
1