2023年B端通用界面设计法则-Dashboard、表格页、表单页、详情页

B端通用界面设计法则——Dashboard、表格页、表单页、详情页许多产品经理和设计师在设计B端产品界面的时候不知道该怎么办，今日笔者给大家汇总了一些B端典型界面及其设计原则，关心大家从容应对界面设计。

2）新手引导

使用场景：

当新用户第一次使用产品时，为了削减用户的困难和快速完成用户的任务，新手引导页可以将核心操作链路呈现给用户。

核心功能：

产品介绍、核心功能使用手册、相关内容指引。

设计建议

引导步骤尽量掌握在3-5步。引导语尽量简短并阐明要义。可以添加视频学习窗口，关心用户快速上手。

3）监控页

使用场景：

监控页是数据可视化页面中的一种，它通过一系列对数据高度概括的图表来呈现系统的核心指标；指标监控页的使用者通常是管理者（即决策者），他们需要看到系统整体的运行状态，监控全局数据，从而调整自己的决策。

核心功能：

关键指标统计。

设计建议：

展现决策者关注的核心指标，并将重要模块靠前展现。使用合理的图表呈现数据。图表配色要符合数据的特性，例如警示用黄色。允许用户可以下钻查看详情。

4）分析页

使用场景：

分析页也是数据可视化页面中的一种，它通过对系统多维度的具体分析来展现系统的状况，从而使使用者可以发觉问题，并尽早找出解决方法。

监控页重在总览，而分析页重在明细，因此，分析页的使用者通常是执行者。

核心功能：

关键指标明细分析。

设计建议：

展现执行者关注的明细指标，并将重要模块靠前展现。使用合理的图表呈现数据。明细数据模块不宜过多，5-9个为宜。

2）左树右表页

使用场景：

左树右表页的界面布局基本与全表格页差不多，只不过其多了一颗左侧的树来关心用户导航。

核心功能：

导航树、多字段筛选、操作区、表格区、分页器。

设计建议：

导航树上的文字尽量展现完整，便于用户定位信息。导航树的层级不行太深，掌握在4层以内。

3）上下表格页

使用场景：

上下表格页是表格嵌套表格幻化过来的，通常上表格为主表，下表格为子表，子表展现了主表中某条数据的详情。

核心功能：

多字段筛选、操作区、表格区、分页器。

设计建议：

主表数据对应的子表数据需要符合规律且呈现清楚。若主表和子表均数据量大，则需要都加入筛选条件。

4）左右表格页

使用场景：

左右表格页与上下表格页有异曲同工之妙，左右表格页通常左表为主表，右表为子表。

核心功能：

多字段筛选、操作区、表格区、分页器。

设计建议：

由于表格左右布局，表格列不宜过多，尽量不消失滚动条。左右表格区分要明显，保证信息正确归属。

5）折叠表格页

使用场景：

折叠表格页的消失通常是页面上表格的信息需要分组，每一张表格呈现一类信息。

核心功能：

分组、操作区、表格区、分页器。

设计建议：

建议加上分组的标题及描述信息。每个表格为一个模块，建议模块可全部绽开与全部折叠。

2）高级表单页

使用场景：

高级表单页通常需要用户填写大量的信息，这样大型而简单的数据录入任务需要被拆解为多个部分进行。

核心功能：

分组/卡片分组、表单项、操作按钮区。

设计建议：

任务的分组需要有层层递进关系，而不是无序的分组。假如任务分组过多，最好不要超过5组，在2-5组之间较为合适，可以采纳锚点定位的方式来关心用户定位信息。

3）分步骤表单页

使用场景：

当表单填写有相应的步骤挨次时，采纳分步骤表单较为合适。

核心功能：

步骤条、表单项、操作按钮区。

设计建议：

若步骤间有很明确的挨次关系，需在相关位置进行明确的提示。若有些步骤为非必填，建议也做出合理的呈现。步骤不宜过多，在2-5项为宜。

4）带树表单页

使用场景：

当表单块归属不同的分类时，需要使用带树表单页去处理。

核心功能：

导航树、表单项、操作按钮区。

设计建议：

分类超过10项，且分类标题内容较长时，建议使用树导航。分类带有层级时，建议使用树导航。

2）高级详情页

使用场景：

高级详情页需要展现的内容量较大，且简单度高，需要拆分为多组来关心用户扫瞄信息。

核心功能：

卡片、分组、详情信息。

设计建议：

分组维度要合理，保证一个维度讲一件事情。若分组模块大于5项，建议使用锚点定位。

3）可编辑详情页

使用场景：

详情页中有部分字段由于业务需要，会进行修改。

核心功能：

详情信息、可编辑信息。

设计建议：

可编辑字段通常有两种状况，一种为常显编辑，一种为点击编辑。用户对常显编辑字段操作时，页面需要对是否