欢迎来到
分享一份B端交互设计规范
984 2024-06-15
我们非常重视原创文章，为尊重知识产权并避免潜在的版权问题，我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容，访问作者的公众号页面获取完整文章。
查看原文：分享一份B端交互设计规范
文章来源： 文章摘要
模型思维与B端交互设计规范
产品经理需要具备模型思维，将成熟的解决方案抽象并标准化，以提高效率和设计规范性。本文通过分享B端交互设计规范，涵盖常见组件与页面设计，帮助产品经理解决80%的场景问题。
列表页设计规范
列表页主要展示大量结构化数据，支持筛选、排序、分页等操作。页面分为导航模块与内容模块，其中内容模块包含筛选区和表格区。筛选区用于设置查询条件，表格区负责展示数据。规范要求适配不同屏幕宽度，视觉样式需保持模块间距统一（16px），背景色为白色透明，圆角为2px。
表单页设计规范
表单页用于信息录入或任务创建，分为基础表单页、索引表单页和分步表单。基础表单页适用于简单任务，索引表单页适用于分类归纳内容较多的场景，分步表单通过线性流程组织信息。交互逻辑包括保存、取消、以及切换步骤，视觉样式统一，按钮区固定。
详情页与导航设计规范
详情页展示对象信息，允许编辑操作。布局分为上下两部分，Tab标签可实现信息分类。导航部分包括侧边导航、顶部导航和面包屑，侧边导航支持二级菜单，顶部导航适合全局功能，面包屑用于路径指引与层级定位。
筛选区与表格使用规范
筛选区用于设置数据筛选条件，支持搜索、重置和高级筛选。表格用于展示结构化数据，支持排序、固定表头、分页等功能。视觉样式需保证字段展示简洁，状态类字段以UI样式展示，重要数据采用高亮或状态区分。
控件与组件设计规范
文章提供了输入框、选择器、日期选择器、动态增减器等常用控件的交互与视觉规范。例如，输入框需支持格式校验与提示，选择器需支持直接选择与模糊搜索，日期选择器需支持快捷方式选择。
弹窗与提示框设计规范
弹窗用于避免页面跳转，提升操作效率，包括内嵌表单弹窗与表格弹窗。气泡确认框适合不可撤销操作的二次确认，Tooltip用于信息提示，与问号图标搭配使用。
文案设计与数据展示规范
文案设计需清晰、简洁、一致，采用平等语气。数据展示遵循脱敏处理规则，日期、数值等格式规范统一。例如，空数据用“-”表示，金额保留两位小数，表格中数值差异较大时采用万、亿单位。
想要了解更多内容？
查看原文：分享一份B端交互设计规范
文章来源： 
白皮书上线
