中台通用页面模板的指导规范（简要摘录）
东莞/UI设计师/1年前/1123浏览
版权
中台通用页面模板的指导规范（简要摘录）
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
Report
声明
39
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
You may like
相关收藏夹
Log in
14Log in and synchronize recommended records
39Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share
1