用户界面（UI）设计规范与标准手册

用户界面（UI）设计规范与标准手册一、手册概述与适用范围本手册旨在统一产品用户界面（UI）的设计语言与视觉呈现，保证不同页面、功能模块的设计风格一致性，提升用户体验与开发协作效率。适用于产品团队中的UI设计师、交互设计师、前端开发人员及产品经理，覆盖从需求分析到设计落地的全流程规范指引。手册内容将根据产品迭代持续更新，由设计负责人*审核后发布。二、核心设计原则1.一致性原则视觉统一：颜色、字体、图标、间距等视觉元素需在全局保持一致，避免同一功能在不同页面呈现差异。交互统一：相同操作（如按钮、表单提交）的反馈逻辑（如加载动画、成功提示）需保持一致，降低用户学习成本。2.易用性原则符合用户习惯：控件布局、操作流程需遵循用户认知习惯（如“返回”按钮置于左上角，“确认”按钮置于右侧）。信息层级清晰：通过字号、颜色、间距区分信息优先级，保证用户快速获取核心内容。3.可访问性原则无障碍设计：图标需配合文字说明，按钮最小区域不小于48×48px，文字与背景对比度不低于4.5:1（符合WCAG2.1AA标准）。适配特殊需求：支持屏幕阅读器、高对比度模式，保证视障用户可正常使用核心功能。4.灵活性原则模块化设计：组件需支持不同场景的灵活组合（如按钮可搭配图标或单独使用），适应页面功能扩展。动态适配：界面需适配不同设备尺寸（手机、平板、桌面端），保证核心内容在各类终端清晰可见。三、基础视觉规范3.1颜色系统3.1.1颜色定义色系色值（HEX）使用场景说明主色#1890FF品牌核心色，用于按钮、图标、重要提示辅助色-成功#52C41A成功状态（如操作成功、成功提示）辅助色-警告#FAAD14警告状态（如信息校验提醒、操作风险提示）辅助色-错误#F5222D错误状态（如表单填写错误、操作失败）中性色-文本主色#262626主要文本内容（如标题、）中性色-文本次要色#595959次要文本（如说明文字、时间戳）中性色-边框色#D9D9D9边框、分割线中性色-背景色#F5F5F5页面背景、卡片背景3.1.2颜色使用禁忌禁止将主色与辅助色（如红色、绿色）直接搭配使用，避免视觉冲突；背景色与文字颜色对比需满足无障碍标准，避免浅色背景配浅色文字（如白色背景配#D9D9D9文字）。3.2字体规范3.2.1字体定义字体类型字号（px）行高使用场景字重标题-大2432页面主标题（如“个人中心”）Medium标题-中1824模块标题（如“账户信息”）Medium标题-小1622卡片标题、列表项标题Medium-主1420内容（如说明文字、列表项）Regular-次要1216辅助文字（如“请输入密码”）Regular数字1420金额、数量等关键数据Medium3.2.2字体使用规则中文字体优先使用“PingFangSC”“MicrosoftYaHei”，英文字体优先使用“Arial”“Helvetica”；标题与的行比建议为1.5:1，保证文字阅读舒适度；禁止在界面中使用斜体、艺术字体（除品牌标识外），避免影响信息识别。3.3图标规范3.3.1图标设计原则风格统一：采用线性图标（2px描边），圆角半径统一为2px，无多余装饰；语义明确：图标需直观表达功能含义（如“返回”用左箭头，“设置”用齿轮）；尺寸规范：标准尺寸为16×16px、24×24px、32×32px，按钮内嵌图标建议使用24×24px。3.3.2常用图标示例（表格）功能名称图标示例（文字描述）尺寸（px）使用场景返回左向箭头（圆角矩形包裹）24×24页面顶部导航栏确认对勾（圆形背景）24×24操作成功提示删除垃圾桶（线性轮廓）16×16列表项删除操作加载中旋转圆圈（3个点动态）24×24数据加载状态3.4间距与网格系统3.4.1间距定义间距类型数值（px）使用场景说明超小间距4图标与文字组合、边框内边距小间距8组件内边距、行间距中间距16卡片间距、模块间距大间距24页面边距、标题与间距超大间距32独立功能区域间距（如弹窗内边距）3.4.2网格系统搭建以8px为基准单位，页面整体采用12列网格布局，保证元素对齐整齐；列宽计算公式：(页面宽度-间距总和)÷12，例如375px宽度的手机端，单列宽度为(375-11×8)÷12≈23px。四、组件设计规范4.1按钮组件4.1.1按钮类型与样式类型尺寸（宽×高，px）字号（px）背景色文字颜色圆角（px）使用场景主按钮120×4014#1890FF#FFFFFF4核心操作（如“提交”“确认”）次按钮120×4014#FFFFFF#1890FF4次要操作（如“取消”“返回”）文字按钮自适应14透明#1890FF0低操作风险（如“查看更多”）危险按钮120×4014#F5222D#FFFFFF4危险操作（如“删除”“退出”）4.1.2按钮状态设计默认状态：背景色与文字颜色如上表所示，无阴影；悬停状态：主按钮背景色加深至#40A9FF，次按钮边框颜色加深至#40A9FF；状态：主按钮背景色加深至#096DD9，按钮整体下移1px（模拟按压效果）；禁用状态：所有按钮背景色为#F5F5F5，文字颜色为#D9D9D9，无交互效果。4.1.3按钮设计步骤明确操作优先级：根据业务逻辑确定按钮类型（主/次/危险）；选择尺寸与样式：根据按钮内容长度确定自适应宽度或固定宽度（不超过屏幕宽度的70%）；添加交互反馈：设计悬停、禁用状态的视觉变化；适配场景：若按钮需搭配图标，图标置于文字左侧或右侧，间距为8px。4.2输入框组件4.2.1输入框样式定义类型尺寸（宽×高，px）边框颜色背景色圆角（px）占位符颜色单行输入框自适应×40#D9D9D9#FFFFFF4#BFBFBF多行输入框自适应×100#D9D9D9#FFFFFF4#BFBFBF4.2.2输入框状态反馈默认状态：边框颜色为#D9D9D9，占位符字体为12px，颜色为#BFBFBF；聚焦状态：边框颜色变更为#1890FF，输入框底部出现2px蓝色下划线；错误状态：边框颜色变更为#F5222D，右侧显示错误提示图标（×16px），文字颜色为#F5222D；禁用状态：背景色为#F5F5F5，边框颜色为#D9D9D9，无法输入。4.2.3输入框设计注意事项输入框宽度需根据输入内容类型设定（如手机号输入框宽度适配11位数字）；多行输入框需显示输入字符数限制（如“最多输入200字”）；禁止在输入框内直接使用placeholder传递重要信息（如“密码”需单独设置标签）。4.3弹窗组件4.3.1弹窗结构定义区域名称尺寸（宽×高，px）背景色字体说明弹窗容器自适应×自适应#FFFFFF圆角8px，阴影04px12pxrgba(0,0,0,0.1)标题栏100%×56#FFFFFF标题字号16px，文字颜色#262626内容区域100%×自适应#FFFFFF字号14px，行高20px按钮区域100%×56#FFFFFF按钮间距16px，居中排列4.3.2弹窗类型与样式类型标题栏颜色内容区域提示图标按钮组合使用场景信息弹窗#FFFFFF蓝色信息图标（i）确认按钮普通提示（如“操作成功”）确认弹窗#FFFFFF黄色警告图标（!）确认/取消按钮需用户二次确认（如“是否删除”）错误弹窗#FFFFFF红色错误图标（×）确认按钮操作失败（如“网络异常”）4.3.3弹窗设计步骤确定弹窗类型：根据提示内容选择信息/确认/错误弹窗；设定弹窗尺寸：内容不超过屏幕宽度的80%，高度不超过屏幕高度的70%；布局结构：标题栏居中显示，内容区域文字左对齐，按钮区域右对齐（确认按钮在左，取消在右）；添加动画效果：弹窗出现时从屏幕缩放显示，消失时反向缩放消失，动画时长300ms。五、页面布局规范5.1整体布局结构页面采用“顶部导航+内容区+底部导航”的经典结构，具体占比：顶部导航栏：高度56px，包含返回按钮、页面标题、操作按钮（如“编辑”）；内容区域：高度自适应，根据页面内容滚动，最小高度为屏幕高度-顶部导航栏-底部导航栏；底部导航栏：高度56px，包含3-5个核心功能入口（如“首页”“我的”），图标+文字组合，居中排列。5.2内容层级规范层级视觉表现使用场景一级层级标题24px，#262626页面主标题（如“订单详情”）二级层级标题18px，#262626模块标题（如“收货信息”）三级层级14px，#595959说明文字、列表项内容四级层级辅助文字12px，#BFBFBF时间戳、提示语5.3留白原则内容区域与页面边距保持16px（手机端）或24px（桌面端）；模块之间间距为16px，卡片内边距为16px；图片与文字间距为8px，避免元素拥挤。六、多端适配规范6.1设备类型与断点定义设备类型屏幕宽度（px）设计稿尺寸（px）适配原则手机端≤576375×812垂直布局，单列显示平板端577-1024768×1024网格布局，双列/三列显示桌面端≥10251920×1080水平布局，多列显示6.2适配步骤确定基准设计稿：优先以手机端375px宽度为基准设计核心页面；栅格化布局：使用网格系统划分内容区域，保证不同端下元素对齐；弹性适配：文字、间距使用rem单位（1rem=16px），按钮、图片使用vw单位或百分比宽度；测试验证：在不同设备上查看页面效果，调整错位、溢出等问题。七、版本管理与更新流程7.1版本记录模板版本号更新日期更新人更新内容说明审核人V1.02024-03-15*首次发布，定义基础规范*V1.12024-04-20*新增弹窗组件规范，优化颜色系统*V2.02024-06-10*增加大屏端适配规范，更新组件库*7.2更新流程需求提出：设计团队根据业务需求或用户反馈提出规范更新申请；方案设计：由UI设计师*撰写更新方案，包含新旧规范对比与设计示例；评审确认：组织产品、开发、测试团队评审方案，通过后由设计负责人*审核；发布与培训：更新手册版本，同步通知团队，必要时开展培训会议。八、附录：常见问题解答Q1：按钮文字长度超过10个字符