这些UI 设计规范及其基础元素规范，让团队协作效率翻番

UI（用户界面）设计规范是产品视觉呈现与交互体验的核心准则，它如同设计领域的 “法典”，不仅能保障多终端、多版本界面的一致性，降低团队协作中的沟通成本与重复工作量，更能让用户在使用过程中形成稳定的操作预期，提升产品的易用性与好感度。一套科学、全面的 UI 设计规范，需要从基础元素、交互布局到文档管理进行系统性构建，每个环节都需兼顾细节与实用性。

一、基础设计元素规范：奠定界面视觉一致性的基石

基础设计元素是 UI 界面的 “原子”，包括色彩、字体、图标、组件等，这些元素的规范设计直接决定了界面的视觉风格与识别度，是确保产品整体视觉统一的核心。

1. 色彩系统规范：传递产品调性与保障视觉无障碍

色彩是产品给用户的第一视觉印象，合理的色彩系统不仅能传递产品定位与调性，还需满足无障碍使用需求，确保所有用户都能清晰识别界面信息。

色彩分类与色值定义：

主色：作为产品的核心识别色，需与产品定位深度契合。例如，金融类产品常用 #1E88E5（蓝色）传递安全、信任的调性；医疗类产品常用 #4CAF50（绿色）象征健康、生命；娱乐类产品则可采用 #FF5722（橙色）展现活力、热情。主色需明确标注 HEX、RGB、CMYK 三种色值，确保在不同场景（屏幕显示、印刷物料）下色彩一致，同时定义主色的不同明度变体（如主色 70%、50%、30% 明度），用于不同层级的背景、边框等元素。

辅助色：用于强调关键交互元素（如按钮、标签、通知），需与主色形成协调且有对比的关系，避免与主色冲突。辅助色通常设置 2-3 种，如主色为蓝色时，可搭配 #FFC107（黄色）作为警告类辅助色、#F44336（红色）作为错误类辅助色、#4CAF50（绿色）作为成功类辅助色。每种辅助色同样需定义完整色值与明度变体，且明确使用场景，例如错误提示文本、按钮边框需用红色，成功状态的图标、提示框需用绿色。

中性色：用于文本、背景、分割线等基础元素，需形成清晰的层级区分。中性色通常从白色到黑色过渡，设置 5-7 个色阶，如 #FFFFFF（纯白，用于卡片背景）、#F5F7FA（浅灰，用于页面背景）、#E5E6EB（中灰，用于分割线）、#86909C（深灰，用于辅助文本）、#1D2129（近黑，用于正文文本）。需注意中性色的明度差，确保相邻色阶有明显区分，同时文本与背景的对比度需符合 WCAG 2.1 AA 级标准 —— 正文文本（字号≥14px）对比度不低于 4.5:1，大标题文本（字号≥18px 或字重≥700）对比度不低于 3:1，避免因对比度不足导致用户阅读困难。

色彩使用原则：同一界面中，主色、辅助色的使用面积需控制，主色占比建议不超过 30%，辅助色占比不超过 15%，中性色占比不低于 55%，避免色彩过于杂乱；不同模块（如首页、详情页、个人中心）可在统一色彩系统基础上，通过辅助色的细微差异进行区分，但需保持整体风格一致。

2. 字体系统规范：保障阅读流畅性与信息层级清晰

字体是界面信息传递的核心载体，字体系统的规范设计需兼顾可读性、美观性与平台适配性，确保用户能快速获取信息，同时感知界面的整洁与专业。

字体家族选择：

移动端：优先选择系统默认字体，避免因字体加载问题影响体验。iOS 系统常用 “苹方 - 简”，Android 系统常用 “思源黑体”，鸿蒙系统常用 “HarmonyOS Sans”；若需自定义字体，需选择笔画清晰、易识别的无衬线字体（如 “阿里巴巴普惠体”），且字体文件大小需控制在 500KB 以内，避免占用过多内存。

PC 端：Windows 系统常用 “微软雅黑”“宋体”，macOS 系统常用 “苹方 - 简”“Helvetica”，网页端需设置字体 fallback（如font-family: "微软雅黑", "苹方-简", sans-serif），确保在不同系统下都能正常显示；办公类、工具类产品可选择偏正式的字体，娱乐类、社交类产品可选择偏活泼的字体，但需避免使用过于艺术化、识别度低的衬线字体（如 “楷体”“隶书”）用于正文。

字号与层级定义：

页面标题：移动端字号通常为 20-24px，字重 700（加粗）；PC 端字号通常为 24-28px，字重 700，用于页面顶部的一级标题（如 “首页”“订单详情”），需与正文有明显区分，突出页面核心主题。

模块标题：移动端字号 16-18px，字重 600；PC 端字号 18-20px，字重 600，用于页面内各模块的二级标题（如 “推荐商品”“最近订单”），引导用户关注模块内容。

正文文本：移动端字号 14-16px，字重 400（常规）；PC 端字号 14-16px，字重 400，用于核心信息的传递（如商品描述、订单信息），是界面中使用频率最高的字号，需确保阅读舒适，行高设置为字号的 1.5-1.8 倍（如 14px 字号行高 21-25px），避免文本过于拥挤或松散。

辅助文本：移动端字号 12-13px，字重 400；PC 端字号 12-13px，字重 400，用于补充说明信息（如按钮下方提示、输入框占位文字），颜色需使用中性色中的深灰色（如 #86909C），与正文形成区分，行高设置为字号的 1.4-1.6 倍。

字体使用禁忌：同一界面中，字体家族数量不超过 2 种，避免风格混乱；字号层级不超过 4 级，防止信息层级模糊；禁止使用斜体、下划线（链接除外）装饰正文文本，避免影响阅读效率。

3. 图标规范：提升功能识别效率与视觉统一性

图标是界面中的 “视觉语言”，通过简洁的图形传递功能含义，规范的图标设计能让用户快速理解功能，减少操作成本，同时提升界面的简洁度与美观度。

图标风格统一：根据产品定位确定图标风格，且全程保持一致。扁平化风格（无渐变、无阴影）适用于大多数互联网产品，简洁易识别；线性风格（以线条勾勒图形，线条粗细统一）适用于工具类、办公类产品，显得专业、精致；面性风格（以填充色块为主，边缘圆润）适用于社交类、母婴类产品，显得亲切、活泼。例如，线性图标线条粗细需统一为 2px（移动端）或 2.5px（PC 端），面性图标圆角弧度需统一为 4px 或 8px，避免同一界面中出现多种风格的图标。

图标尺寸与比例：

导航图标：用于底部导航栏、侧边导航栏，移动端尺寸通常为 24×24px，PC 端尺寸为 28×28px，图标内部图形需居中放置，与边框间距不小于 2px，确保视觉平衡。

功能图标：用于按钮、列表项、工具栏，移动端尺寸 18×18px-22×22px，PC 端尺寸 20×20px-24×24px，需根据所在元素的大小调整，避免图标过大或过小导致不协调。

状态图标：用于提示状态（如加载中、成功、失败），移动端尺寸 16×16px-20×20px，PC 端尺寸 18×18px-22×22px，图标需简洁明了，让用户一眼能识别状态含义。

图标状态定义：明确图标在不同交互状态下的视觉表现，确保用户能感知操作反馈。默认状态（未点击时）使用中性色（如 #86909C）；hover 状态（鼠标悬浮或手指触摸时）使用主色或辅助色（如 #1E88E5）；选中状态（已激活时）使用主色，且可添加边框、背景等装饰（如底部添加 2px 宽的主色横线）；禁用状态（不可点击时）使用浅灰色（如 #E5E6EB），且图标透明度降低至 50%，明确传递 “不可操作” 的信号。

4. 组件规范：实现交互逻辑统一与设计复用

组件是界面中可重复使用的 “功能单元”，如按钮、输入框、弹窗等，规范的组件设计能减少重复设计工作，确保不同页面的交互逻辑一致，提升用户操作的连贯性。

按钮组件：

类型区分：根据重要程度分为主要按钮、次要按钮、文本按钮。主要按钮（核心操作，如 “确认支付”“提交订单”）采用主色填充，文字为白色，圆角弧度 4px-8px，hover 时主色明度降低 10%，点击时添加轻微阴影（如box-shadow: 0 2px 8px rgba(0,0,0,0.1)）；次要按钮（次要操作，如 “取消”“返回”）采用白色背景、主色边框，文字为主色，圆角弧度与主要按钮一致，hover 时背景色变为浅灰色（如 #F5F7FA）；文本按钮（辅助操作，如 “忘记密码”“查看更多”）无背景、无边框，文字为主色或中性色，hover 时文字颜色加深或添加下划线，避免占用过多界面空间。

尺寸定义：移动端按钮高度通常为 44px-48px，宽度根据文字长度自适应（最小宽度 80px）；PC 端按钮高度 36px-40px，宽度最小 100px，确保手指或鼠标能轻松点击，避免按钮过小导致操作失误。

输入框组件：

基础样式：默认状态下，输入框边框为中性色（如 #E5E6EB），高度移动端 44px、PC 端 36px，圆角弧度 4px，占位文字颜色为浅灰色（如 #C9CDD4），字号 14px；聚焦状态下，边框变为主色，且添加 1px 宽的主色阴影（如box-shadow: 0 0 0 2px rgba(30,136,229,0.2)），明确提示用户当前操作焦点。

状态处理：输入错误时，边框变为红色（如 #F44336），右侧添加错误图标（如 “×”），下方显示红色错误提示文本（字号 12px），说明错误原因（如 “手机号格式不正确”）；输入成功时，边框变为绿色（如 #4CAF50），右侧添加成功图标（如 “√”）；禁用状态下，输入框背景色为浅灰色（如 #F5F7FA），文字颜色为灰色（如 #86909C），且不可点击输入。

弹窗组件：

布局结构：弹窗由标题区、内容区、按钮区三部分组成。标题区文字字号 16px-18px，字重 600，居中或左对齐，右侧可添加 “关闭” 图标（18×18px）；内容区文字字号 14px，行高 1.6 倍，与标题区间距 16px，用于展示弹窗核心信息（如确认提示、表单内容）；按钮区位于弹窗底部，主要按钮在右、次要按钮在左，按钮间距 16px，与内容区间距 24px，确保操作逻辑清晰。

交互规则：弹窗弹出时需添加背景遮罩（黑色，透明度 50%），阻止用户操作底层界面；点击遮罩或 “关闭” 图标时，弹窗关闭（需确认是否保留用户输入内容，如表单弹窗需提示 “是否放弃修改”）；按钮点击后，弹窗需有关闭动画（如渐隐、缩放），提升交互体验。

二、交互与布局规范：打造符合用户预期的操作体验

交互与布局是 UI 设计的 “骨架”，规范的交互逻辑能让用户操作流畅自然，合理的布局能让界面信息清晰有序，两者结合才能打造出 “好用” 的产品界面。

1. 交互逻辑规范：遵循用户习惯，减少认知成本

交互逻辑需基于用户的日常使用习惯与心理预期设计，避免让用户思考 “如何操作”，确保每一步操作都符合直觉，降低认知负担。

基础交互规则：

页面跳转：点击列表项（如商品列表、订单列表）时，跳转至对应的详情页，且跳转时有过渡动画（如右滑进入）；详情页顶部需设置 “返回” 按钮，点击后返回上一页，且保留上一页的滚动位置，避免用户重新查找；跨模块跳转（如从首页跳转至个人中心）时，需确保跳转目标明确，避免用户迷失在页面层级中。

滑动操作：移动端下拉时，列表页面触发 “下拉刷新”（显示加载动画，如旋转的图标），刷新完成后提示 “更新成功”；上拉至页面底部时，触发 “上拉加载更多”（显示 “加载中” 文字或动画），无更多数据时提示 “已显示全部内容”；左滑列表项（如消息、订单）时，显示操作按钮（如 “删除”“编辑”），按钮宽度 80px-100px，点击按钮后执行对应操作（需添加确认提示，避免误操作）。

按钮交互：点击按钮时，需有即时反馈（如颜色变化、轻微缩放），让用户感知 “已点击”；若操作需要耗时（如提交表单、加载数据），需在按钮上显示加载动画（如圆形旋转图标），且按钮禁用，防止重复点击；操作完成后，需给出结果提示（如成功提示 “提交成功”，失败提示 “网络错误，请重试”），提示时长 2-3 秒，自动消失（重要提示需用户手动关闭）。

特殊场景交互：

空状态：当页面无数据时（如首次使用、数据删除后），需显示空状态界面，包含空状态图标（如购物车空图标、订单空图标）、提示文本（如 “暂无订单，快去下单吧”）、引导按钮（如 “去首页购物”），引导用户进行下一步操作，避免界面空白让用户困惑。

异常状态：网络错误时，显示网络错误图标、提示文本（如 “网络连接失败，请检查网络”）及 “重试” 按钮，点击 “重试” 后重新请求数据；数据加载失败时，显示失败图标、提示文本（如 “数据加载失败，请稍后重试”）及 “重试”“反馈” 按钮，方便用户解决问题或反馈问题。

2. 布局规范：栅格系统为基础，信息层级分明

布局需基于栅格系统设计，确保界面元素对齐统一，同时通过信息层级的区分，引导用户关注核心内容，提升信息获取效率。

栅格系统设计：

移动端：采用 12 列栅格系统，列宽自适应屏幕宽度，列间距（gutter）16px，左右边距（margin）16px；例如屏幕宽度 375px 的手机，每列宽度 =(375-16×2-16×11)÷12=(375-32-176)÷12=167÷12≈13.9px，确保列宽均匀，元素对齐时无偏差。

PC 端：采用 24 列栅格系统，列宽固定（如 80px），列间距 24px，左右边距 48px；例如屏幕宽度 1920px 的电脑，总宽度 = 24×80+23×24+2×48=1920+552+96=2568px（超出屏幕宽度时，页面可横向滚动，但核心内容需在 1200px 内显示，确保大多数用户无需滚动）；栅格系统需在设计工具（如 Figma、Sketch）中预设，设计师直接使用栅格对齐元素，避免手动调整导致的偏差。

页面布局原则：

信息层级：核心信息（如商品图片、标题、价格）放置在页面的视觉焦点区（移动端上半部分，PC 端左侧或上半部分），次要信息（如商品详情、评价）放置在下方或右侧，辅助信息（如客服入口、版权信息）放置在页面底部，通过位置、大小、颜色的差异，引导用户优先获取核心信息。

元素间距：组件间的间距（如按钮与输入框、模块与模块）需统一，移动端常用间距 8px、16px、24px、32px，PC 端常用间距 12px、24px、36px、48px，避免间距杂乱导致界面拥挤；文本与图标的间距为 8px（移动端）、12px（PC 端），确保两者搭配协调，不重叠、不疏远。

适配规则：移动端优先采用垂直布局，将信息按重要程度从上到下排列，避免横向滚动；PC 端优先采用左右分栏布局（如左侧导航栏、右侧内容区），充分利用屏幕宽度；平板设备（如 iPad）需兼顾移动端与 PC 端的布局特点，横屏时采用左右分栏，竖屏时采用垂直布局；布局适配时，需确保关键元素（如按钮、输入框）不被遮挡，文字不溢出，避免影响使用。

三、文档与管理规范：确保规范落地，提升团队效率

UI 设计规范不仅需要 “设计”，更需要 “落地”，完善的文档与管理机制能确保规范被团队所有成员理解并执行，避免规范成为 “纸上谈兵”。

1. 规范文档：清晰易懂，便于查阅

规范文档是团队协作的 “工具书”，需详细记录所有规范内容，且结构清晰、语言简洁，让设计师、开发人员、产品经理都能快速找到所需信息。

文档结构：

前言：说明规范的目的、适用范围（如适用于产品的移动端 APP、PC 端网页）、版本信息（如 V1.0，更新时间 2025.11.07），让读者快速了解规范的基本情况。

基础元素规范：分章节详细描述色彩、字体、图标、组件的规范，每个章节包含 “设计原则”“具体规范”“使用示例” 三部分，例如色彩章节需说明色彩选择原则，列出每种颜色的色值与使用场景，附上色彩在界面中的应用截图。

交互与布局规范：说明交互逻辑的设计原则，列出基础交互规则与特殊场景处理方式，附上交互流程图（如页面跳转流程、按钮操作流程）；布局章节说明栅格系统的参数，列出不同设备的布局规则，附上布局示例图（如移动端首页布局、PC 端详情页布局）。

附录：包含规范的更新日志（记录每次更新的内容与时间）、常见问题（如 “如何新增组件”“规范与实际需求冲突时如何处理”）、资源链接（如设计资源库、图标库的下载链接），方便读者解决疑问。

文档工具与维护：使用 Figma、Sketch 或在线文档工具（如语雀、飞书文档）制作规范文档，Figma/Sketch 文档可直接嵌入设计示例，方便设计师参考；在线文档可支持实时更新与评论，团队成员可提出修改建议。规范文档需定期维护（如每季度更新一次），新增功能或调整设计时，需同步更新规范，并通知团队所有成员（如通过邮件、团队群），确保大家使用最新版本的规范。

2. 资源管理规范：统一资源库，实现设计复用

设计资源库是规范落地的 “载体”，包含组件库、图标库、图片库等，统一的资源管理能让设计师快速调用资源，减少重复设计，同时确保开发人员获取的资源与设计规范一致。

资源库构建：

组件库：在 Figma 或 Sketch 中构建可复用组件库，将按钮、输入框、弹窗等组件封装为 “主组件”，设置可修改属性（如颜色、文字、尺寸），设计师使用时只需在 “主组件” 基础上调整属性，无需重新绘制；组件库需按模块分类（如 “基础组件”“表单组件”“导航组件”），便于查找。

图标库：将所有图标按功能分类（如 “导航图标”“功能图标”“状态图标”），存储为 SVG 格式（矢量图，放大不失真），并标注每个图标的名称、尺寸、使用场景；图标库需与规范中的图标规范保持一致，更新图标时同步更新规范文档。

图片库：收集产品常用的图片资源（如背景图、Logo、默认头像），统一存储在云端（如阿里云 OSS、腾讯云 COS），图片需压缩处理（如 JPG 格式压缩至质量 70%，PNG 格式使用 TinyPNG 压缩），减少加载时间；图片库需标注图片的尺寸、用途、版权信息，避免使用侵权图片。

资源库版本管理：使用版本控制工具（如 Figma 的版本历史、Git）管理资源库，每次更新资源时创建新版本，并记录更新内容（如 “新增订单状态图标”“优化按钮组件样式”）；开发人员获取资源时，需下载对应版本的资源包，避免因资源版本不一致导致设计与开发效果差异；同时，设置资源库的访问权限（如设计师有编辑权限，开发人员有查看下载权限），确保资源安全。

UI 设计规范不是 “束缚”，而是帮你 “省时间、少踩坑” 的工具。刚开始做规范可能要花点时间，但后面不管是自己迭代版本，还是新人接手，都能快速上手，团队协作也不会因为 “设计不统一” 吵架。

如果你的项目还没有规范，不如从今天开始，先把色彩、字体这两个基础模块理清楚，慢慢完善 —— 好的设计，从来都是 “规范 + 细节” 堆出来的。