01 项目背景
华为流程 IT 内部存在大量 PC 端系统,各项目界面风格不一、组件重复造轮子。目标是沉淀一套内部 PC 端设计规范,让设计与前端有共同语言,新页面"拼组件即可用",从源头减少一致性损耗。
02 我的角色
担任规范主笔:色彩、字体、栅格、组件与页面模板的定义与文档化。
03 规范构建流程
- 盘点现状:收集各内部系统的界面,提炼重复出现的模式与冲突点;
- 定义 Token:将色彩、字号、间距、圆角抽象为可复用的设计变量;
- 沉淀组件:以高频组件(表格 / 表单 / 弹窗 / 步骤条)为优先,定义状态与交互;
- 文档化:输出可检索的规范文档与页面模板,降低新项目启动成本。
04 规范核心内容
色彩:主色蓝 #009AFF 体现智能 / 安全 / 专业;辅助色绿 #00C483、橙 #FF8803、玫红 #FA045A、紫 #4C20FA、青 #2BD2FF;灰阶从标题 #333333 到页面背景 #F5F6F5 共 8 级,每级明确用途(禁用 / 分割线 / 边框 / 容器背景)。
字体:iOS 中文苹方、Android 跟随系统原生、英文数字 Helvetial;行高为字号的 1.4 倍。
字号体系:T1 18pt 一级标题 / 模块标题 → T5 10pt 辅助说明,五级递进、适用范围明确。
栅格与间距:【占位:栏数 / 槽宽 / 基础间距 8px 的倍数体系描述】。
核心组件:【占位:表格 / 表单 / 弹窗 / 步骤条等组件清单与状态】。
落地方式:【占位:是否提供 Sketch 组件库 / 前端代码库,规范如何被强制或推荐采用】。
【占位:补图——色彩规范页、文字规范页、组件示例】
05 成果与价值
- 规范覆盖【占位:N 个】内部项目;
- 新页面设计 / 前端搭建效率提升【占位:定性或定量描述】。
【占位:如有可公开的数据来源,在此注明】