兰亭妙微ui设计公司分享：随着 UI 工程化、自动化开发逐步普及，传统图文版 UI 设计规范仅支持人工查阅，无法被开发工具、编译程序自动识别解析。设计产出与代码实现之间长期存在信息断层，带来规范落地难、还原度偏差、沟通成本高等一系列痛点。
为打通从设计规范到工程代码的完整链路，本文分为两大模块展开论述： 第一部分立足真实项目落地诉求，梳理 B 端 UI 核心设计原则，完整拆解全局规范、通用组件、基础控件的设计逻辑、尺寸约束、色彩规则与适用边界，输出一套严谨可读的人工设计规范，作为标准化文档的内容基础。 第二部分以这套 UI 规范为底座，结合 OpenCode 工具的解析语法、字段识别规则，对设计内容做结构化重构，定义design.md标准化文档的格式、排版与字段拆分，完成人工文档向机器可识别配置文件的转换。借助design.md，OpenCode 可自动读取设计参数，联动生成基础代码与静态资源。
本文基于公司内部《UI 设计规范 V1.0》复盘 B 端组件设计体系。如果把 B 端页面比作建筑楼房，组件就是整套系统的地基。吃透组件底层逻辑与落地约束，是高效开展 B 端设计的前提。
全文从六大设计原则、页面布局体系、字体色彩体系、通用组件规范四大模块展开，适用于公司全部自研产品，作为 UI、产品、前端、测试的统一协作准则，以此实现产品视觉体验统一、提升设计开发效率、降低跨岗位沟通损耗。文中配套规范样例、优化前后对比，直观呈现各组件标准形态与落地效果。
设计规范目标
- 保持产品视觉风格统一
- 提升设计输出效率
- 减少跨角色无效沟通
- 使用人群：UI 设计师 / 产品经理 / 前端开发 / 测试工程师
整套 UI 规范建立在六项通用设计准则之上，页面布局、色彩运用、组件排布都必须遵循：统一性、易用性、亲密性、对齐、对比、重复，这是界面美观、交互合理的底层基石。
布局适配 1920p、1440p、1366p、1280p 主流桌面分辨率，采用24 列自适应栅格系统。主流页面框架分为左右布局、上下布局两种。所有尺寸严格遵循8 像素设计基准（尺寸取 8 的整数倍）。
界面中控件尺寸、内外边距、模块间距优先使用 8px 的整数倍：8、16、24、32px…… 细微场景允许使用 4px（8 的二分之一），尽量避免 5/7/9/13 等非标准奇数像素。
左侧导航栏 + 右侧内容区。导航展开状态固定 200px，收起状态 64px；面包屑导航栏固定高度 40px；右侧内容区域跟随屏幕分辨率自适应缩放。
顶部导航栏 + 下方内容区。顶部导航栏固定高度 60px，面包屑栏固定高度 40px，下方内容区域自适应页面宽度。
栅格系统保障多分辨率下布局一致性，B 端后台优先采用24 列自适应网格，支持 1/2/3/4/6 列自由组合布局。
完整色板由主色调、辅助色、中性无彩色三部分组成，一套产品仅设置一个主色。
注意：避免把主色大面积用作页面背景或大段正文文字，维持页面视觉平衡。
#333333 一级文字：大标题、导航、正文重点；#666666 二级文字：小标题、次级说明；#999999 提示文字：备注、占位、次要辅助信息。B 端组件如同建筑零件，每个组件都要明确定义样式、交互状态、适用场景与边界，避免设计师自由发挥造成还原问题。
B 端高频交互控件，分为填充按钮、线性按钮、文字按钮三大类；每种按钮包含：默认、悬停、点击、禁用四种交互状态。
属于辅助导航，告知用户当前所处页面位置，支持快速回退上级页面，层级之间常用>作为分隔符号。本文采用标签式面包屑，包含静态、移入、当前选中三种状态；标签高度 28px，标签之间间距 10px，外部边距 16px。
多用于表格列表，实现分批次加载数据，降低接口读取压力。分为基础分页、长版分页、简约分页、迷你分页；基础样式建议最多展示 5 个页码，避免数字过多造成视觉混乱；长版用于数据量极大的业务。
注意区分不同交互状态，规避用户误操作。
覆盖单日选择、年份选择、起止时间区间选择。今日日期浅蓝标识，选中日期实心蓝底；区间选择支持单栏拼接、双栏独立布局。
开关切换后应当即时生效，不要搭配确认 / 取消弹窗。用户心智模型是点击开关直接改变状态，增加确认步骤会混淆生效逻辑，切换后给出即时状态反馈即可。
场景严格区分：圆形单选框用于互斥选项；方形多选框用于可多选集合。 统一具备三种状态：默认、选中、不可选。
适合展示多层级结构，节省页面空间；缺点在于复杂业务下维护成本较高，选型时需要结合业务复杂度评估维护代价。
实现在同一页面内快速切换不同数据集，拓展单页承载能力，偏向导航属性，多用于不同分类数据切换。
表单标签三种排布方案： a. 标签居左，放置输入框左侧（容易视觉不齐，不推荐） b. 标签居左，放置输入框上方 c. 标签右对齐，放置输入框左侧（推荐 B 端常规表单） 表单内部全部间距尽量遵守 8px 倍数原则，统一对齐逻辑。
实现两组列表之间数据迁移，左侧选中项移动至右侧，右侧数据也可以回退至左侧，仅做交互视图，原始选项集合保持不变。
hover 触发，移出消失，不可承载操作；支持 12 个弹出方向，依附于触发按钮。
点击或 hover 唤起，支持承载大段文本与操作按钮，适合内容较多的浮层场景。
用于大批量结构化数据展示，支持排序、筛选、搜索、分页、行操作，是 B 端后台的核心容器组件。
四种固定类型：常规提示、成功、警告、失败。
以上完整梳理了 B 端 UI 的核心设计原则、布局栅格、字体色彩、全套通用组件规范，明确各组件设计逻辑、尺寸约束、视觉样式、适用边界，搭建一套可读、可落地、跨岗位统一执行的 B 端人工设计规范。
但传统图文规范只能供人阅读，无法被自动化工具解析，很难真正打通设计‑代码的工程闭环。因此，我们会在这套人工规范基础上，对全部规则做结构化重构，适配 OpenCode 识别规则，搭建机器可读的design.md文档，完成从 “人工设计规范” 向 “工程化解析规范” 的升级落地。
