分享一份B端交互设计规范

摘要 - B端交互设计规范

产品经理必须具备模型思维，能够利用成熟的解决方案模型来提高设计效率和实现标准化。本文主要分享了B端交互设计规范，包括列表页、表单页、详情页、导航栏等组件的设计规范，这些组件能适用于80%以上的应用场景。

列表页

列表页适用于展示大量数据，并提供排序、搜索等交互功能。它由查询表格页组成，包括筛选区和表格区两部分，支持响应式布局。表格默认展示50条数据，内容区域可滚动，视觉样式上筛选区和表格区间距一致，背景为白色。

表单页

表单页用于信息录入，分为基础表单页和索引表单页。基础表单页适用于简单任务，布局包含表单区和按钮区，主按钮为“保存”。索引表单页适用于内容繁多且可分类的任务，布局包含菜单区、表单区和按钮区，菜单区域和按钮区域提供了数据校验和保存的交互逻辑。

详情页

详情页用于展示对象的完整信息，主要用于信息浏览。页面分为上下两个区域，上部分为通栏形式展示基础属性信息。交互逻辑上，按钮组应靠右对齐，表格可显示省略信息，并提供悬浮提示。

导航栏

导航栏作为网站的核心导航元素，提供页面之间的跳转功能。侧边导航支持二级菜单，顶部导航适用于全局性的类目和功能，顶部-侧边布局则结合两者的特点，适用于应用型网站。

面包屑、数据筛选区和表格

面包屑用于展示页面层级结构，数据筛选区用于设置展示数据的筛选条件。表格用于展示结构化数据，包含表头、内容区和编辑区等部分，支持复杂的数据展示和操作。

文案设计规范

文案设计应遵循清晰、准确、严谨、简洁、一致的原则。常用文案需要统一性，如新建、编辑、删除等操作。标点符号应根据情况恰当使用，金额、时间和数据脱敏等均有特定的显示规范。文案基本原则强调以用户为中心，语言简练易懂。