设计原则及组件详解

随着 UI 工程化、自动化开发模式不断普及，传统图文形式的 UI 设计规范仅能满足人工查阅使用，无法被开发工具、编译程序自动识别解析，设计与代码开发之间长期存在信息断层，设计规范落地效率低、还原偏差大等问题日渐突出。为打通设计规范向工程代码流转的链路，本文分为前后两大板块开展研究与阐述。

第一部分从项目实际落地需求出发，梳理整套 UI 设计核心原则，逐项拆解全局通用组件、基础控件的设计逻辑、尺寸约束、配色规则与使用边界，形成完整、严谨的人工可读 UI 设计规范体系，作为后续标准化文档编制的理论依据与内容源头。

第二部分以前述成型的 UI 设计规范为基准，围绕 OpenCode 工具的文件解析语法、字段识别规则，对原有设计内容进行结构化重构，完成标准化design.md文档的格式定义、内容排版与字段拆分，实现设计规范从人工阅览文档向机器可识别配置文件的转化，依托design.md让 OpenCode 能够自动读取设计参数、联动生成基础代码与资源文件。

本次分享基于 2024 年我司编制的《UI 设计规范 V1.0》，和各位设计同仁共同复盘 B 端组件设计规范。如果把 B 端页面设计比作建造楼房，那组件便是整栋建筑的地基，吃透组件的设计逻辑与落地用法，是高效做设计的关键。

本文以我们公司内部 UI 规范为蓝本，从六大设计原则、页面布局、字体色彩、全品类通用组件四大维度逐一拆解。这份规范面向公司所有自研产品，是 UI、产品、前端、测试通用落地准则，以此实现产品视觉统一、提效设计开发、降低跨岗位沟通损耗；全文搭配规范样例与优化前后对比图，具象化展示各类组件标准形态与落地效果。

系统适配 1920p、1440p、1366p、1280p 多分辨率，整体采用24 栅格自适应布局，页面分为左右、上下两大主流页面框架，栅格由 Margin 边距、Column 列、Gutter 列间隔三要素组成，全部尺寸遵循8 像素设计原则（尺寸为 8 的整数倍）。

界面内所有控件尺寸、内外边距、模块间距优先使用「8px 的整数倍」（8、16、24、32…），极小细节可用 4px（8 的 1/2），禁止出现 5/7/9/13 这类非标准奇数像素。

适配多倍图，杜绝半像素发虚 移动端 @1x/@2x/@3x/@4x 缩放： 8×2=16、8×3=24、8×4=32，全部整数，不会出现 0.5px 模糊锯齿；换成 10px：10×3=30 没问题，但细分 5px 时多倍率极易出小数像素。 8 是 2³，可不断二分 8→4→2→1，既能做大模块留白，又能拆分细微间距，兼顾粗细层级。 主流屏幕分辨率大多能被 8 整除，跨设备、跨端（安卓 /iOS/ 网页）排版对齐更统一。

左侧导航 + 右侧内容区组合；导航展开固定宽度 200px，收起宽度 64px；面包屑导航栏固定高度 40px，右侧内容区域根据屏幕分辨率自动自适应缩放。

Margin（边距）：页面内容距离容器左右边缘留白，产品统一使用 16px/24px，遵循 8 倍数值；计算有效布局区域时，需剔除边距后再均分列宽。

页面内容距离容器左右边缘留白，产品统一使用 16px/24px，遵循 8 倍数值；计算有效布局区域时，需剔除边距后再均分列宽。

电脑端固定 24 列栅格，单列宽度跟随屏幕分辨率自适应，可自由组合 1/2/3/4/6 列布局。

列与列中间空隙，全局固定 16px。

12px（备注、次要提示）、14px（正文、菜单、表格）、16px（小标题、导航文字）、24px（页面大标题），配套固定行高，区分标题、正文、备注层级。

作为产品品牌基准色，是全平台使用频次最高的色彩，应用于品牌 LOGO、顶部导航、功能按钮、关键高亮及重点标签，主导产品整体视觉风格，一套设计规范仅设定一个主色。色彩体系由主色调、辅助色、中性无彩色（黑白灰）共同构成完整产品色板，主色选型需结合所属行业属性综合敲定，下面结合我司产品实例展开说明。

Web 主色调原色多用于品牌 LOGO、导航栏、核心操作按钮、选中标签及关键内容高亮，衍生浅色用于标签底色与轻提示模块，深色用作按钮悬浮、点击等交互状态，使用中避免大面积填充页面背景和正文大段文字，把控页面视觉平衡。

两个辅助色分别用于产品导航栏背景色以及表头背景色，其它三色为成功反馈、警示反馈、错误反馈，分别用于成功提示提交、信息警告、错误提醒等场景。

文字颜色三种分别为正文颜色（用于一级导航标题/一级文字/大标题/正文）色值为

、二级文字（用于用于二级文字/二级标题/小标题等）色值为

、提示信息文字（用于用于次要文字/提示文字/三级等）色值为

按钮是后台产品进行交互设计的重要元素，提供给用户进行点击操作，在视觉上是最引人注目的控件，具有一定的视觉受范性，常用按钮可分为填充按钮，文字按钮以及线性按钮。按钮的交互状态包括默认、悬停、点击和不可用。

顶部导航聚焦产品全局板块分类，承担平台大模块快速切换、系统公共功能入口作用；

左侧导航归属对应大分类下的子级菜单，承载页面细分功能，二者上下配合，实现系统层级清晰的页面跳转，优化用户查找功能的效率。

面包屑最为辅助和补充的导航方式，它能让用户知道在系统后台或应用中所处的位置并能方便地回到原先的地点。最常见的面包屑样式是：横向的文字链接，由大于号“>”分开，这个符号也暗示了他们的层级关系。其实就是一个导航、路标的作用。告知用户在哪儿，且可以快速回到上几级导航。

面包屑分为标签型、文字型两类，这里我选择的是标签类，面包屑标签分别有三种状态：静态、移入状态、当前状态。除过边距

，标签与标签之间的距离大小为

标签的高度为

。

主要用在表格列表类型的页面比较多，分页的好处就是当你打开表格页的时候，其实只加载第一页。为了减少前端数据接口的读取压力。分页器从样式上分为基础分页器、自定义页数分页器、简约版分页器、迷你分页器

最简单的下拉选择样式，直接平铺可选择的选项内容

支持左右分层、树形分层展示

多选标签回显，超长选项 hover 气泡展示完整内容

这里要注意的是下拉状态在不同操作下所表达的菜单状态，减少用户在操作当中出现的误操作，其次减少不必要的操作试错。

单选多选选择器则要注意的是选项的字数限制，以及下拉框中所选的选项展示字数。选项中字数限制根据业务而定而已选在下拉框中的选项隐藏部分的内容在hover状态下可根据气泡卡片展示齐全。

包含单日选择、年份选择、起止区间选择三种样式；选中日期实心蓝底，今日日期浅蓝标识，起止日期分单栏拼接、双栏独立等布局。

蓝框表示默认今天日期，帮助用户尽快定位选择，而实心蓝框则为选定日期

蓝框表示默认今日年份，帮助用户尽快定位选择，而实心蓝框则为选定年份

这里总结了三种样式，有组合样式、单分日期、混合日期

开关不要与确定、取消一起用。因为大部分用户的心智模型和使用习惯，切换开关后立即生效，给了一个确认开关按钮，用户会不清楚是否生效。所以给及时的反馈更符合他的使用习惯。

：单选/多选框看是简单又常见的组件，但是在实际项目中运用时也需要做到细致的区分，选项只支持单选时我们就采用合适的圆形单选框，支持多选时就采用方形的多选框，做好单选和多选的场景区分注意组件的状态区分：单选/多选框的样式虽然简单，但是也有3种显示状态：默认、选中、不可选

树结构可以清晰的展示层级关系，并且节约空间，但是在一些复杂的需求中，树结构比较难维护，所以在选择组件时也需要考虑实际业务场景和维护成本。

标签页也可以帮助用户在一个页面内速切换不同类型内容，提升单个页面整体的拓展性。多用于不同类型数据集合的切换，导航的属性更强。

输入框有5种状态，常规态、hover态、激活态、失焦态（激活后，鼠标移出或者点击回车）、不可用态。

自动关联当输入关键词之后下拉框会自动浮现出有关关键词相关联的内容，当输入的关键词没有相关内容会反馈用户无搜索结果。

长文本输入框的状态，常规态、hover态、激活态、字数超出规定范围

默认文本标签以右对齐方式位于输入框左侧，并将用户使用过程中的各种状态样式考虑进来。各元素间距尽可能遵循以 8px 为增量单位的规则。

. 左对齐文本标签居于输入框左侧 （避免视觉上的参差不齐，不推荐使用 a ）

. 左对齐文本标签居于输入框上方

. 右对齐文本标签居于输入框左侧

注意表单的排列对齐关系一级合理布局表单的摆放位置

穿梭框选择要穿梭的内容。穿梭后左侧列表就消失到右侧显示。只是做交互，整体的选项是一致的。右侧穿梭过去的数据，也可以再穿梭回左侧。

这边要注意的是拖入上传的状态变化，将文件拖入框内则框内颜色变为浅蓝色，给予用户的正确反馈!

不管上传的是文件还是图片，上传之后会显示文件名以及八叉，鼠标移入之后文件名之后卡片浮动

鼠标移入时出现，移出时小时，不承载任何操作。一共有12个方向，根button不同位置。hover状态

鼠标点击/移入时出现，适合文字较多的情况，可以承载相应的操作。

使用场景： 当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

提示类型有且仅有 4 种形式，常规、成功、预警、失败。

综上，本章完整梳理了我司B端UI设计的核心原则、页面布局规则、字体色彩体系与通用组件设计标准，明确了各类组件的设计逻辑、尺寸约束、视觉规范及实际使用边界，搭建起一套适配公司全自研产品、可支撑多岗位协同落地的标准化UI规范体系。至此，整套

的B端设计规范已完整成型。

但传统图文式设计规范仅适用于人工查阅与参考，无法被自动化开发工具识别与解析，难以真正实现设计与代码工程的无缝联动。因此，在本章既定的UI规范基础上，下文将进一步对所有设计规则进行结构化、标准化重构，适配OpenCode识别逻辑，完成可被机器读取的

规范文档搭建，实现从“人工设计规范”到“工程化可解析规范”的升级落地。