UI界面设计规范

UI界面设计规范说明：本规范旨在统一UI界面设计标准，规范设计流程，确保产品界面视觉一致性、交互合理性及用户体验连贯性，适用于所有产品UI设计、开发、测试及迭代工作，为设计人员提供明确指引，为跨岗位协作提供统一依据，兼顾规范性与灵活性，助力提升设计效率、降低开发成本，同时强化产品品牌辨识度。一、设计核心原则UI界面设计需遵循“用户为中心、一致性、易用性、可扩展性”四大核心原则，所有设计细节均需围绕原则展开，平衡视觉美观与实际操作体验，兼顾不同终端、不同场景的适配需求。用户为中心：贴合目标用户使用习惯，简化操作流程，减少认知成本，优先满足用户核心需求，避免冗余设计；针对不同用户群体（如新手/资深用户），提供适配的操作逻辑与视觉引导，确保各类用户都能高效完成操作。一致性原则：视觉风格、控件样式、交互逻辑、文案规范保持统一，包括色彩、字体、间距、图标、动效等，避免用户在使用过程中产生混淆，同时保障产品在不同页面、不同终端（PC端、移动端）的连贯性。易用性原则：操作流程简洁直观，关键功能突出，反馈及时明确；界面布局清晰有序，信息层级分明，让用户快速找到所需功能，降低操作难度；避免复杂交互，核心操作步骤不超过3步。可扩展性原则：设计规范需预留迭代空间，适配产品后续功能升级与场景拓展，兼顾规范的严谨性与设计的灵活性，特殊场景（如营销活动）可在规范基础上适度调整，避免过度约束设计创新。二、基础设计规范（一）栅格系统规范栅格系统是界面布局的基础，用于规范页面元素的排列、间距与对齐，确保界面整洁有序，适配不同屏幕尺寸，提升响应式适配效率。PC端栅格：采用12列栅格布局，栅格总宽度1920px（主流屏幕适配），左右边距各120px，列间距24px；可根据页面复杂度，灵活拆分栅格（如2列、3列、4列），所有模块、控件均需对齐栅格线，避免错位。移动端栅格：采用6列或8列栅格布局，适配主流移动端屏幕（375px、414px、390px），左右边距16px，列间距12px；最小设计单位为4px，界面中所有间距（模块间距、文本间距、控件间距）均需为4px的倍数，保证布局均匀协调。特殊场景：弹窗、浮层、卡片等独立组件，需遵循自身内部栅格逻辑，同时与页面整体栅格对齐，确保视觉统一。（二）色彩规范色彩规范明确界面各元素的色值与使用场景，兼顾品牌识别、视觉层次与用户体验，避免色彩杂乱，同时考虑无障碍适配（如色盲、色弱用户）。品牌色：

主色：定义1个核心主色（如#1890FF），用于品牌标识、核心按钮、关键强调元素，传递产品核心气质；辅助色：搭配2-3个辅助色（如#0FC6C2、#722ED1），用于次要按钮、图标、提示信息等，丰富视觉层次，辅助主色呈现；色值规范：所有色彩均需标注十六进制（#XXXXXX）、RGB（R,G,B）两种色值，渐变色彩需标注起始色、结束色及渐变角度，确保设计与开发一致。功能色：用于区分不同功能状态，色值统一，不可随意更改：成功色：#52C41A（用于成功提示、完成状态）；警告色：#FAAD14（用于警告提示、待处理状态）；错误色：#F5222D（用于错误提示、异常状态）；信息色：#1890FF（用于普通提示、说明文字）；禁用色：#C9C9C9（用于禁用状态的按钮、控件、文本）。中性色：用于界面背景、文本、边框等，构建清晰的视觉层次：

背景色：#FFFFFF（纯白，主背景）、#F5F7FA（浅灰，次要背景）、#E8EBF0（深灰，卡片/模块背景）；文本色：#1D2129（标题文本）、#4E5969（正文文本）、#86909C（辅助文本）、#C9CDD4（占位文本）；边框色：#E8EBF0（普通边框）、#DCE0E6（强调边框）。夜间模式：单独制定夜间模式色值对应表，主色、功能色适当调整（降低亮度、提高对比度），背景色采用#1D1D1F，文本色采用#F5F5F7，确保夜间使用时不刺眼、可读性强。（三）字体规范字体规范统一界面文本的字体、字号、行高、字重，确保文本可读性，同时保持视觉一致性，适配不同终端的显示效果。字体选择：优先使用系统默认无衬线字体，兼顾跨平台兼容性：

PC端：微软雅黑、思源黑体、Roboto；移动端：iOS（SanFrancisco）、Android（思源黑体）；特殊说明：不可使用花哨字体，品牌名称可使用定制字体，需确保所有终端均可正常显示。字号与行高：

PC端：标题（20px，行高28px，字重600）、副标题（18px，行高26px，字重500）、正文（14px，行高22px，字重400）、辅助文本（12px，行高18px，字重400）；移动端：标题（18px，行高26px，字重600）、副标题（16px，行高24px，字重500）、正文（14px，行高22px，字重400）、辅助文本（12px，行高18px，字重400）；规范要求：字号、行高不可随意调整，同一层级文本保持一致，行高为字号的1.4-1.6倍，确保可读性。文本样式：

标题文本：加粗（字重600），使用主色或中性色中的标题色；正文文本：常规字重，使用中性色中的正文色，避免使用过多色彩；强调文本：可使用主色或加粗样式，用于突出关键信息，不可大面积使用；占位文本：使用中性色中的占位色，字号与正文一致，不可使用过于鲜艳的颜色。（四）间距与圆角规范间距规范：遵循最小设计单位（4px），所有间距均为4px的倍数，确保界面布局均匀、呼吸感适中：

页面级间距：页面内模块之间间距24px、16px；组件级间距：组件内部元素间距12px、8px；文本间距：标题与正文间距12px，正文与辅助文本间距8px。圆角规范：统一圆角尺寸，避免圆角杂乱，增强界面柔和度：

大圆角（8px）：用于卡片、弹窗、面板等大型组件；中圆角（4px）：用于按钮、输入框、图标等小型控件；特殊情况：圆形控件（如头像、图标）圆角为自身尺寸的50%，不可使用不规则圆角。三、控件设计规范控件是UI界面的核心元素，包括按钮、输入框、图标、标签等，规范控件样式、状态与交互逻辑，确保控件易用、统一，降低用户认知成本。（一）按钮控件按钮类型与样式：

主按钮：使用主色，白色文本，圆角4px，默认高度40px，宽度根据文本自适应（最小宽度100px）；次按钮：白色背景，主色边框与文本，圆角4px，高度40px，宽度自适应；文本按钮：无背景、无边框，仅显示文本（主色或正文色），无固定高度，宽度自适应；图标按钮：仅显示图标，无背景（hover时显示浅灰背景），尺寸40px×40px，图标居中。按钮状态：每个按钮需包含4种核心状态，样式统一：

默认状态：常规样式，无额外效果；hover状态：主按钮、次按钮背景色加深5%，文本按钮、图标按钮显示浅灰背景；点击状态：主按钮、次按钮背景色加深10%，按钮轻微下沉（偏移1px）；禁用状态：使用禁用色，文本色变为#C9C9C9，不可点击、无hover效果。使用规范：页面内主按钮不超过1个，用于核心操作；次按钮用于次要操作，数量不超过3个；按钮文本简洁明了，字数控制在2-6字，避免换行。（二）输入框控件基本样式：白色背景，边框色#E8EBF0，圆角4px，高度40px，内边距左右12px；输入文本为正文色，占位文本为占位色，字号14px。输入框状态：

默认状态：常规样式，边框为普通边框色；聚焦状态：边框变为主色，显示轻微阴影（box-shadow:0002pxrgba(24,144,255,0.2)）；错误状态：边框变为错误色，下方显示错误提示文本（12px，错误色，间距4px）；禁用状态：背景色#F5F7FA，边框色#C9C9C9，文本色#C9C9C9，不可输入。特殊输入框：

带图标的输入框：图标位于左侧，与文本间距8px，图标尺寸16px×16px；带清除按钮的输入框：输入内容后，右侧显示清除图标（×），点击可清除输入内容；多行输入框：高度自适应（默认高度60px），可手动调整高度，内边距上下8px、左右12px。（三）图标规范图标样式：统一采用线性图标（描边粗细2px），风格简洁、统一，避免复杂细节；图标尺寸统一为16px×16px、24px×24px，根据使用场景选择，不可随意调整尺寸。图标色彩：

常规图标：使用正文色（#4E5969）；强调图标：使用主色或功能色；禁用图标：使用禁用色（#C9C9C9）。使用规范：

图标与文本搭配时，图标位于文本左侧，间距8px，对齐方式居中；功能图标语义统一，如“添加”用“+”、“删除”用“×”、“编辑”用“铅笔”，不可随意替换；所有图标需来自同一套图库（如AntDesignIcons、ElementPlusIcons），命名统一（如icon-add、icon-edit），便于开发调用与维护。（四）其他常用控件标签：圆角4px，高度24px，内边距左右8px，文本12px；分为普通标签（浅灰背景、正文色）、强调标签（主色背景、白色文本）、状态标签（功能色背景、白色文本）。分页器：默认每页显示10条数据，分页按钮尺寸32px×32px，选中状态使用主色，未选中状态使用正文色，禁用状态使用禁用色；支持“上一页”“下一页”“首页”“尾页”快速切换，页码最多显示5个（当前页居中）。复选框与单选框：

复选框：方形（16px×16px），选中时显示主色对勾，未选中时显示边框；单选框：圆形（16px×16px），选中时显示主色圆点，未选中时显示边框；与文本搭配时，控件位于文本左侧，间距8px，对齐方式居中。四、组件设计规范组件由多个控件组合而成，规范组件样式与交互逻辑，确保组件可复用、可扩展，提升设计与开发效率，常见组件包括导航组件、表单组件、弹窗组件等。（一）导航组件顶部导航：

PC端：高度64px，左侧显示品牌Logo，中间显示导航菜单（最多6个