用户界面设计交互规范手册

用户界面设计交互规范手册一、手册说明（一）编制目的本手册旨在规范产品用户界面（UI）交互设计流程，统一设计语言，提升用户体验一致性与操作流畅度。通过明确设计原则、模块规范及工具使用方法，减少设计理解偏差，助力设计师、开发人员高效协作，最终实现产品功能与用户需求的精准匹配。（二）适用范围本手册适用于Web端、移动端（iOS/Android）等数字产品的界面交互设计场景，涵盖需求分析、原型设计、视觉还原、测试优化等全流程环节。设计人员、产品经理、开发工程师可依据手册规范开展工作。二、交互设计核心原则（一）一致性原则内涵说明：保证同一产品内交互逻辑、视觉样式、术语表达的一致性，降低用户学习成本。包括视觉元素（颜色、字体、图标）的统一、操作逻辑（如返回逻辑、提交方式）的统一、反馈机制（如成功/失败提示样式）的统一。示例：所有表单输入框的聚焦状态均采用蓝色边框+浅蓝色背景，错误提示统一采用红色文字+左侧感叹号图标。（二）反馈及时性原则内涵说明：用户操作后需在0.5-1秒内给予视觉、文字或动效反馈，明确操作结果，避免用户产生疑惑。常见反馈形式：按钮：按钮变色或缩放动效；提交表单：加载动画+“提交中”文字提示；操作成功：绿色对勾图标+“操作成功”toast提示；操作失败：红色叉号图标+具体错误说明（如“手机号格式不正确”）。（三）容错性原则内涵说明：允许用户犯错并提供便捷的纠错路径，减少操作挫败感。实现方式：重要操作设置二次确认（如删除数据前弹出“确定删除吗？”）；表单输入提供实时校验并引导修正；提供撤销功能（如文本编辑的“撤销”按钮）。（四）可控性原则内涵说明：让用户始终清晰自身操作位置及当前状态，可自主决定操作流程。关键点：导航栏明确当前页面位置（如“首页>个人中心>编辑资料”）；步骤式操作显示当前进度（如“1/3完成信息填写”）；中断操作可随时返回（如取消填写表单返回上一页）。三、核心交互模块规范（一）表单设计规范1.典型应用场景用户注册、登录、信息编辑、问卷调研等需收集用户数据的场景。2.实施步骤步骤1：需求分析与字段梳理明确表单收集的信息类型（文本、数字、选项、文件等），区分必填项（*）与选填项，按用户填写习惯排序（如先简单后复杂，先必填后选填）。步骤2：结构布局设计单列表单：字段较少（≤5个）时采用，如登录表单（手机号/密码、登录按钮）；多列表单：字段较多（＞5个）时采用，如注册表单，按“账户信息-个人资料-安全设置”分组；步骤表单：字段过多或逻辑复杂时采用，分步展示并保留进度（如“填写基本信息>设置密码>完成注册”）。步骤3：视觉样式定义输入框：高度统一为40px（移动端48px），圆角4px，默认边框#DCDFE6，聚焦边框#409EFF；标签：左对齐，字号14px，颜色#606266，与输入框间距8px；按钮：主要按钮高度40px，背景色#409EFF，文字白色；次要按钮高度40px，背景色白色，边框#DCDFE6，文字#606266。步骤4：交互逻辑验证输入时：实时校验（如手机号输入11位后自动校验格式）；失焦时：提示字段错误（如密码不足6位显示“密码长度至少6位”）；提交时：校验必填项，全部通过后触发提交逻辑。3.表单设计要素对照表设计要素规范要求示例输入框高度Web端40px，移动端48px登录手机号输入框高度40px必填项标识标签后红色*号（字号14px，颜色#F56C6C）手机号标签：“手机号*”错误提示样式红色文字（#F56C6C），字号12px，输入框下方8px，左侧配感叹号图标“请输入正确的11位手机号”提交按钮禁用状态背景色#C0C4CC，文字颜色#FFFFFF，不可注册按钮未填写必填项时置灰4.关键执行要点避免表单字段冗余，仅收集必要信息；下拉选项≤5个时优先使用下拉框，＞5个时使用搜索选择框；文件限制大小及格式，并提前提示（如“支持JPG/PNG格式，大小不超过2MB”）。（二）按钮设计规范1.典型应用场景页面操作入口（提交、取消、跳转）、功能触发（搜索、筛选、分享）等场景。2.实施步骤步骤1：功能分类与层级定义主要按钮：核心操作（如“立即购买”“提交”），视觉突出；次要按钮：辅助操作（如“取消”“返回”），视觉弱化；危险按钮：破坏性操作（如“删除”“退出登录”），采用红色系警示。步骤2：视觉规格统一圆角：与容器风格统一，通常4px（或容器圆角半径）；内边距：水平16px，垂直8px（移动端水平24px，垂直12px）；字体：14px，粗体400（主要按钮）/500（次要按钮）。步骤3：交互状态设计状态主要按钮次要按钮危险按钮默认状态背景#409EFF，文字#FFFFFF背景#FFFFFF，边框#DCDFE6，文字#606266背景#F56C6C，文字#FFFFFF悬停状态背景#66B1FF，文字#FFFFFF背景#F5F7FA，边框#C0C4CC，文字#606266背景#F78989，文字#FFFFFF状态背景#3A8EE6，文字#FFFFFF背景#ECF5FF，边框#409EFF，文字#409EFF背景#E63946，文字#FFFFFF禁用状态背景#C0C4CC，文字#FFFFFF背景#F5F7FA，边框#E4E7ED，文字#C0C4CC背景#FBC4C4，文字#FFFFFF步骤4：区域适配Web端最小区域为48px×48px（文字不足时通过内边距扩展）；移动端最小区域为44px×44px（与iPhone标准按钮一致）。3.按钮状态规范表按钮类型默认状态悬停状态状态禁用状态主要按钮#409EFF/#FFFFFF#66B1FF/#FFFFFF#3A8EE6/#FFFFFF#C0C4CC/#FFFFFF次要按钮#FFFFFF/#606266#DCDFE6边框#F5F7FA/#606266#C0C4CC边框#ECF5FF/#409EFF#409EFF边框#F5F7FA/#C0C4CC#E4E7ED边框危险按钮#F56C6C/#FFFFFF#F78989/#FFFFFF#E63946/#FFFFFF#FBC4C4/#FFFFFF4.关键执行要点一页面上主要按钮不超过1个，避免操作分散；危险按钮需与普通按钮保持视觉距离，误触；禁用状态需明确不可（如表单未填写完整时提交按钮置灰）。四、设计工具表格使用指南（一）设计交付表格规范1.表格用途用于记录界面设计元素的具体参数（尺寸、颜色、字体等），作为设计师与开发人员沟通的依据，保证设计还原度。2.绘制步骤步骤1：确定表格列必选列：设计模块、元素名称、类型、尺寸、颜色、状态、交互行为、备注；可选列：标注页码、设计稿、更新日期。步骤2：定义字段规范设计模块：按功能划分（如导航栏、表单、弹窗）；元素名称：唯一标识（如“Logo”“手机号输入框”）；类型：按钮、输入框、图标、文字等；尺寸：包含宽、高（单位px）、间距（单位px）；颜色：十六进制值（如#409EFF）、RGB值（如64,158,255）；状态：默认、悬停、禁用等；交互行为：跳转、输入校验、弹窗触发等。步骤3：填写示例数据设计模块元素名称类型尺寸（宽×高）颜色状态交互行为备注导航栏Logo图标128×64px#303133默认跳转首页PNG格式，透明背景注册表单手机号输入框输入框320×40px边框#DCDFE6聚焦实时校验手机号格式占位符“请输入手机号”提交按钮立即注册按钮120×40px背景#409EFF默认提交表单数据悬停时背景加深3.使用步骤创建：在协作工具（如飞书文档、腾讯文档）中按规范列创建表格；填写：设计师完成视觉设计后，提取元素参数填写表格，关联设计稿；审核：产品经理核对功能逻辑，开发工程师确认参数可行性；更新：设计修改后同步更新表格，标注版本号（如V2.0）及修改说明。（二）交互逻辑表格规范1.表格用途梳理用户操作路径、触发条件及反馈结果，用于验证交互流程完整性，避免逻辑漏洞。2.绘制步骤步骤1：确定表格列必选列：操作环节、触发条件、触发元素、反馈形式、结果状态；可选列：异常处理、相关页面、优先级。步骤2：填写示例数据（以“忘记密码”流程为例）操作环节触发条件触发元素反馈形式结果状态异常处理输入手机号打开忘记密码页手机号输入框默认状态，无提示等待输入输入非11位提示格式错误获取验证码手机号格式正确获取验证码按钮按钮置灰，倒计时60秒验证码已发送超过每日限制提示“发送次数过多”输入验证码倒计时进行中验证码输入框输入4位后自动跳转验证成功/失败验证码错误提示“验证码不正确”重置密码验证码正确重置密码按钮跳转登录页，提示“密码重置成功”密码已更新密码不符合规则提示“需为8-20位字母数字”3.使用步骤梳理流程：根据用户故事或需求文档，绘制操作流程图；拆分环节：将流程拆分为最小操作单元，对应表格行；验证闭环：检查每个操作环节是否有触发条件、反馈及结果，保证无遗漏；评审更新：组织团队评审逻辑漏洞，更新表格后同步至需求池。五、特殊场景处理规范（一）加载状态设计1.场景分类首次加载：页面首次打开时的数据加载（如首页信息流）；操作加载：用户触发操作后的等待反馈（如“提交”后接口请求）；下拉刷新：移动端下拉手势触发的内容更新。2.设计要点加载时长：单次加载≤3秒，超过3秒需显示进度条及预估剩余时间；视觉反馈：骨架屏优于纯动画（如“数据加载中…”文字+旋转图标），骨架屏需模拟真实布局；中断入口：长加载场景提供“取消”按钮，允许用户中断操作。3.加载状态规范表场景类型适用元素动画时长文案提示示例首次加载整个页面1-2秒“加载中…”骨架屏+顶部进度条提交操作按钮区域1秒“提交中…”按钮显示旋转图标并禁用下拉刷新移动端列表顶部0.5秒“松开即可刷新”下拉时显示箭头，松开后显示骨架屏（二）错误提示设计1.错误类型分类输入错误：表单字段填写不规范（如手机号格式错误、密码为空）；系统错误：后端接口异常、网络中断（如“500服务器错误”“网络连接失败”）；权限错误：用户无操作权限（如“无权限访问该页面”“账号已冻结”）。2.设计要点位置：输入错误提示在对应输入框下方；系统错误提示在页面居中或操作区域顶部；文案：具体明确，避免“操作失败”等模糊表述（如“手机号需为11位数字”）；解决建议：系统错误需提供解决方案（如“网络异常，请检查连接后重试”）。（三）空状态设计1.应用场景无数据、无权限、无网络等无内容展示的场景（如“暂无订单”“搜索无结果”）。2.设计要点图标：使用与场景相关的轻风格图标（如“无订单”用购物车空置图标）；文案：标题（说明当前状态）+描述（引导用户操作，如“去下单”）；操作入口：提供明确的操作按钮（如“立即购买”“重新搜索”）。3.空状态结构表组成要素设计要求示例（“暂无收藏”）图标线条风格，尺寸80×80px空心星星图标标题字号18px，颜色#303133“暂无收藏内容”描述文案字号14px，颜色#606266，2-3行“收藏喜欢的内容，方便随时查看”操作按钮主要按钮样式，文字“去发觉”跳转商品列表页用户界面设计交互规范手册六、核心交互模块规范（一）下拉菜单设计规范1.高频应用场景筛选条件选择（如“价格排序”“商品分类”）、多选项切换（如“显示列设置”“语言切换”）等需折叠/展开交互的场景。2.设计步骤拆解步骤1：触发方式定义触发：菜单在区域下方展开，其他区域或菜单项后关闭（如“个人中心下拉菜单”）；悬停触发：鼠标悬停时展开，移开后延迟200ms关闭（适用于工具类菜单，如“格式设置”）。步骤2：层级结构设计单层菜单：选项≤7个时采用，如“性别选择：男/女/未知”；多层菜单：选项＞7个或存在子分类时采用，如“商品分类>数码产品>手机”，需通过箭头图标标识层级。步骤3：视觉规范细化元素参数要求示例菜单容器背景白色，边框#E4E7ED，圆角4px，最小宽度160px价格筛选菜单：180px宽菜单项文字字号14px，颜色#606266，左内边距16px，右内边距40px“价格从高到低”分割线颜色#E4E7ED，高度1px，上下间距8px多层菜单项间添加分割线子菜单箭头右侧8px处，灰色三角形图标（8px×8px）“商品分类”项右侧显示箭头步骤4：交互状态控制默认：菜单项背景白色，文字#606266；悬停：背景#F5F7FA，文字#409EFF；禁用：背景#F5F7FA，文字#C0C4CC，鼠标指针变为“not-allowed”。3.下拉菜单参数控制表设计要素规范值特殊场景处理最大高度300px（超出显示滚动条，滚动条宽度6px）选项过多时按常用项置顶多层菜单缩进每层缩进16px最多支持3层，超3层建议单独页面反馈延迟菜单项后100ms关闭含子菜单的父项不关闭移动端适配全屏遮罩层，遮罩关闭菜单项高度≥48px，便于触摸4.关键避坑指南避免在一个页面上同时使用多个下拉菜单，防止操作冲突；菜单项文字长度保持一致，最长不超过12个字（超出显示号）；涉及危险操作的下拉菜单（如“删除”“删除”）需二次确认。（二）弹窗交互设计规范1.核心应用场景信息确认（如“删除提示”）、表单填写（如“新增地址”）、内容展示（如“图片预览”）等需中断用户当前操作的场景。2.设计执行流程步骤1：弹窗类型分类模态弹窗：必须用户响应才能继续操作（如“提交确认”），背景遮罩透明度0.5；非模态弹窗：允许用户操作背景内容（如“操作提示”），无遮罩或透明度0.3；全屏弹窗：移动端独占，如“图片预览”“H5活动页”。步骤2：尺寸与布局规范弹窗类型宽度范围高度控制布局结构桌面端模态400px-800px（以内容定）不超过屏幕80%标题+内容+按钮（居中对齐）移动端模态90%（屏幕宽）屏幕高度80%标题+内容+按钮（底部居中）全屏弹窗100%100%自定义布局，无固定标题栏步骤3：动画与关闭逻辑动画：弹出时从0.8倍缩放至1，持续300ms；关闭时反向动画；关闭方式：模态弹窗：关闭按钮、确认/取消按钮、遮罩层；非模态弹窗：关闭按钮、3秒后自动消失。步骤4：文案规范≤15字，字号18px，颜色#303133（如“删除数据”）；内容：≤40字，字号14px，颜色#606266（如“删除后无法恢复，是否确认？”）；按钮：确认按钮文字用动词（如“确认删除”），取消按钮用“取消”。3.弹窗状态规范表弹窗元素默认状态激活状态关闭状态遮罩层黑色，透明度0.5黑色，透明度0.5渐隐消失弹窗容器白色背景，圆角8px，阴影02px12pxrgba(0,0,0,0.1)白色背景，圆角8px，阴影02px12pxrgba(0,0,0,0.15)向下缩放消失确认按钮#409EFF背景，白色文字#3A8EE6背景，白色文字无变化取消按钮白色背景，#606266边框#ECF5FF背景，#409EFF边框无变化4.关键执行要点重要操作弹窗（如删除、支付）需单独设计，避免与普通提示弹窗混淆；移动端弹窗按钮间距≥16px，防止误触；表单弹窗需保留用户已输入内容，关闭后未提交时恢复原状。（三）导航设计规范1.场景分类与适配顶部导航：一级页面入口，如“首页-分类-购物车-我的”；侧边导航：管理后台等复杂场景，如“用户管理-订单管理-系统设置”；底部导航：移动端核心功能切换，如“首页-发觉-消息-个人”。2.设计步骤详解步骤1：层级与数量控制顶部导航：一级类目≤5个，超过时可收纳至“更多”下拉菜单；侧边导航：一级菜单≤7个，二级菜单无限制（需折叠收起）；底部导航：图标+文字，核心功能3-5个（如4个：首页、联系人、发觉、我）。步骤2：视觉规范统一导航类型图标尺寸文字大小选中状态未选中状态顶部导航20×20px（文字图标）14px，加粗文字#409EFF，下边框2px文字#303133，无边框侧边导航16×16px14px，常规左侧3px蓝色竖条+文字#409EFF文字#606266，无竖条底部导航24×24px10px图标#409EFF，文字#409EFF图标#909399，文字#909399步骤3：交互逻辑定义当前页面：导航项不可（顶部导航高亮，底部导航图标+文字变色）；页面跳转：后延迟300ms跳转，避免连续；面包屑导航：显示层级关系，可快速返回上一级（如“首页>列表详情>评价”）。步骤4：移动端适配要点底部导航栏高度56px（图标+文字垂直居中）；长按导航项显示提示文字（如“个人中心”）；左右滑动可切换标签页时，顶部需添加滑动指示器。3.导航状态控制表操作行为顶部导航变化底部导航变化异常处理页面跳转新页面导航项高亮，原页面恢复目标标签页切换至激活状态页面白屏时保持原导航状态返回操作返回页面导航项自动高亮标签页同步切换禁止无限返回，设置返回上限搜索触发导航栏收起，展开搜索框导航栏收起，键盘弹出搜索完成后恢复原导航4.关键执行要点导航文字需与页面标题一致，避免用户认知偏差；侧边导航支持折叠/展开，默认展开一级，收起后仅显示图标；新功能上线时，若在导航栏添加入口，需用“NEW”标签提示（持续1周）。（四）列表设计规范1.常见应用场景数据展示（如“订单列表”“商品列表”）、消息通知（如“私信”“系统通知”）等需批量呈现内容的场景。2.设计步骤拆解步骤1：列表类型选择单行列表：仅展示核心信息（如“订单列表：订单号、状态、金额”）；多行列表：需展开详细信息（如“商品列表：图片、名称、价格、销量”）；卡片列表：视觉密度低，适合展示图文信息（如“资讯列表：标题、摘要、配图”）。步骤2：单元格结构定义列表类型必含元素可选元素最小行高单行列表左侧图标/文字，右侧操作按钮次要信息（如时间）Web端48px，移动端56px多行列表图区、标题、副标题、价格标签、销量、评分Web端80px，移动端88px卡片列表图区、标题、描述、操作按钮数据统计（如“100+人已购买”）Web部120px，移动部132px步骤3：交互规则设定选中状态：后背景#F5F7FA，保持至其他项；滑动删除：移动端左滑显示“删除”按钮（红色），滑动距离≥按钮宽度时触发；加载更多：滚动到底部时显示“加载中…”，加载完成提示“无更多数据”。步骤4：视觉参数统一元素规范要求示例分割线颜色#E4E7ED，高度1px，列表项底部订单列表每行底部添加分割线圆角卡片列表圆角8px，单/多行列表无圆角商品卡片列表圆角8px图片列表图尺寸60×60px（统一裁剪为正方形）订单商品图片60×60px文字颜色标题#303133，副标题#909399，辅助信息#C0C4CC订单金额用#F56C6C（红色）突出3.列表交互控制表交互行为触发条件反馈形式限制条件选中单击列表项背景色变化，显示勾选图标支持多选时按住Ctrl长按操作移动端长按1秒弹出操作菜单（复制、分享）仅支持特定内容类型下拉刷新移动端下拉超过50px骨架屏加载每分钟最多刷新5次滑动排序长按后上下拖动实时交换位置仅支持固定列表项排序4.关键执行要点列表项文字需左对齐，数字/金额右对齐；图片加载失败时显示占位图（灰色+“加载失败”文字）；列表数据为空时，优先显示空状态（参考“特殊场景处理”章节）。七、设计工具深化应用指南（一）原型评审表规范1.表格核心价值通过结构化记录原型问题及解决路径，保证交互方案在开发前达成共识，减少返工成本。2.表格绘制与使用步骤步骤1：表格列定义列名说明填写要求模块名称原型所属功能模块如“用户注册流程”页面/流程具体页面编号或流程节点如“注册-步骤1：填写手机号”问题描述原型存在的交互/视觉问题需具体描述（如“手机号输入框无实时校验”）严重程度问题影响范围严重（阻塞性）、一般（体验影响）、轻微（细节优化）责任人问题解决负责人设计师/产品经理/开发工程师解决方案问题修改建议需包含修改前后对比或草图完成时限解决截止日期如“2024-XX-XX”步骤2：填写示例数据模块名称页面/流程问题描述严重程度责任人解决方案完成时限用户注册注册-步骤1：手机号输入无格式校验，易输入错误一般张三添加实时校验，错误时提示“请输入11位手机号”2024-03-15支付流程支付-确认订单删除按钮无二次确认严重李四添加“删除商品”弹窗，确认后执行删除2024-03-10个人中心个人中心-编辑资料头像无进度提示轻微王五添加进度条，完成后提示“成功”2024-03-20步骤3：评审流程会前：设计师提前3天分享原型，填写评审表初稿；会中：团队逐项讨论问题，明确解决方案及责任人；会后：设计师更新原型，同步修改评审表，标注“已解决”。（二）测试用例表规范1.表格核心用途覆盖用户操作全流程的正向/异常场景，保证开发交付后功能无遗漏，交互体验达标。2.表格结构与填写规范步骤1：表格列定义列名说明填写要求用例编号唯一标识（如“TC-001”）按模块+序号编排，如“REG-001”测试模块功能所属模块如“表单提交”“按钮”测试场景用户操作场景描述如“用户输入错误手机号后获取验证码”前置条件测试开始前的准备状态如“已打开注册页面，手机号输入框为空”操作步骤详细操作流程需按序号描述（1….2.输入…）预期结果期望的反馈或状态需与需求文档一致实际结果测试后的真实反馈测试后填写，与预期对比是否通过验证结果（通过/不通过）根据预期与实际结果判定步骤2：填写示例数据（以“表单提交”为例）用例编号测试模块测试场景前置条件操作步骤预期结果实际结果是否通过REG-001表单提交输入必填项后提交手机号、密码、验证码已填写正确1.“立即注册”按钮提示“注册成功”，跳转登录页提示成功，跳转登录页通过REG-002表单校验必填项未填写时提交手机号为空，密码、验证码已填写1.“立即注册”按钮手机号输入框下方提示“手机号不能为空”未提示错误不通过REG-003异常处理网络中断时提交表单手机号、密码、验证码填写正确，断网1.断开网