B 端 UI 标准化落地指南:兰亭妙微详解设计原则与全品类组件体系

2026-7-20    涛涛 设计思维

 

兰亭妙微设计实战分享

随着政企管理系统、后台平台的工程化开发普及,传统零散的 UI 设计文档已难以适配前端自动化开发流程,设计产出与代码落地之间长期存在还原偏差、沟通低效、视觉不统一等痛点。兰亭妙微深耕 B 端系统设计多年,服务金融、政务、制造类后台项目时发现,一套完整、可落地、可机器解析的标准化规范,是打通设计与开发链路的核心抓手。本文结合团队自研《B 端 UI 设计规范 V1.0》,从六大底层设计原则、栅格布局、字体色彩、通用组件四大维度完整拆解,搭建一套适配 UI、产品、前端、测试多岗位协同的统一设计标准。

image.png

一、六大底层设计原则,规范界面底层逻辑

整套 B 端 UI 体系依托统一性、易用性、亲密性、对齐、对比、重复六大准则搭建,所有页面与组件均需以此为基准。
 
统一性要求全项目色值、字号、栅格、组件样式完全复用,禁止为单页面破坏整体视觉体系;易用性以业务效率为核心,简化操作路径,开关、单选等组件做到操作即时反馈,无需多余确认步骤;亲密性依靠 8px 基准间距划分信息区块,关联内容缩小留白,无关模块拉开距离,快速区分页面层级;对齐规范统一表单、卡片、文字排布流向,降低阅读负担;对比依靠色彩、字号粗细区分主次信息,突出核心操作按钮;重复统一图标、按钮、间距规则,减少用户学习成本。六大原则相互配合,兼顾界面美观与业务使用效率。

image.png

二、标准化布局体系:8px 栅格与双框架页面结构

为适配 1280p 至 1920p 多分辨率屏幕,团队统一采用 24 列自适应栅格,所有尺寸遵循 8 像素基础单位,细微控件可使用 4px 细分,杜绝非标准奇数像素。8px 体系能够完美适配移动端多倍图缩放,避免界面发虚锯齿,同时可无限二分拆分,兼顾大模块留白与细微间距调节,跨设备、跨端排版高度统一。
页面分为左右、上下两大主流框架:左右布局为左侧导航 + 右侧内容区,导航展开宽 200px、收起 64px,顶部面包屑固定 40px;上下布局采用顶部 60px 导航栏 + 下方自适应内容区。栅格由页面边距、24 等分列、16px 固定列间隔三要素构成,边距统一 16px/24px,有效内容区域剔除边距后均分列宽,自由组合 1/2/3/4/6 列布局,适配各类数据展示页面。
文字层级形成四级固定字号体系:12px 用于备注提示,14px 作为表格、菜单正文,16px 为小标题与导航文字,24px 承载页面大标题,搭配专属行高,清晰区分信息轻重。色彩体系分为主色、辅助反馈色、三级文字色,主色用于按钮、导航、高亮标签,衍生深浅色适配交互状态;辅助色覆盖成功、警告、错误提示;文字采用 #333 一级正文、#666 二级标题、#999 辅助提示,保障文本可读性与色彩对比度合规。

三、全品类通用组件标准化规范

组件是 B 端系统的基础原子,兰亭妙微将后台高频控件统一制定尺寸、状态、使用场景,覆盖交互、导航、数据录入、数据展示、提示类全品类组件。
 
交互类组件包含按钮、开关、单选多选框:按钮区分填充、线性、文字三类,覆盖默认、悬停、点击、禁用四种状态;开关采用即时生效逻辑,无需二次确认;单选圆形、多选方形,区分默认、选中、不可用三类状态。
 
导航类组件涵盖侧边菜单、顶部导航、面包屑、Tab 标签:面包屑采用标签式分层展示,清晰标注用户当前页面位置;Tab 标签用于单页面多类型数据切换,提升页面拓展性。
 
数据录入组件包含输入框、下拉选择器、日期选择、表单、穿梭框、上传控件:输入框区分基础文本、联想搜索、长文本三种,覆盖常规、激活、失焦、禁用状态;下拉支持单层、树形、多选标签回显样式;日期选择支持单日、年份、起止区间选择;表单统一标签对齐规则,优先采用右对齐标签布局,降低填写失误率。
 
数据展示组件以表格、树形控件为核心,表格承载海量结构化业务数据,配套分页组件实现数据分片加载;树形组件清晰展示多层级业务分类,节省页面空间。

image.png

 
提示类组件包含文字气泡、气泡卡片、警告提示:气泡仅展示注释信息,气泡卡片可承载操作按钮;警告提示分为常规、成功、警告、错误四类,适配全场景信息提醒。

四、规范工程化升级:从人工文档到机器可读配置

完整的视觉组件规范仅能满足人工查阅,无法支撑自动化开发。兰亭妙微在基础 UI 规范之上,对全部尺寸、色值、组件参数进行结构化拆分,输出标准化 design.md 配置文件,适配 OpenCode 解析规则,工具可自动读取设计 Token,一键生成前端基础代码与素材资源,消除设计与开发的信息断层。

结语

标准化 UI 规范的核心目标,是统一产品视觉、提升设计输出效率、减少跨岗位无效沟通。六大设计原则搭建底层逻辑,栅格与色彩奠定视觉基础,标准化组件统一交互表现,工程化文档打通设计落地链路。对于 B 端后台产品而言,规范并非束缚设计的框架,而是兼顾业务效率、用户体验与开发成本的高效工具。兰亭妙微在项目落地中始终坚持先标准化、再业务化,用可复用、可量化的设计体系,打造兼顾美观、高效、易维护的企业级界面。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档