这是知果日记的第 149 期分享
在企业级 B 端设计体系中，基础资产基本涵盖了构建数字界面的高频基础类元素， 有了这些元素，体验设计师可以更专注于设计创意、商业思考。数字界面基础资产包括全局视觉、图标库、基础组件、通用区块、典型界面这五部 分。全局视觉为用户提供了数字界面统一、和谐的视觉体验，它是最原子级的东西，包括了颜色、间距、阴影等内容，有了它们，我们才能向上构建其他资产。图标也叫 icon，它是对现实世界的概括、抽象、隐喻。图标品质的优劣，直接影响到界面整体的美观度和识别度，因此，如何提升图标品质，是设计体系需要去解决的问题。B 端数字界面由大大小小的组件构成，它们之间通过互相联动来协助用户完成相应的业务目标。这些组件一部分非常通用，可以说 10 个产品中有 9 个产品都会用到，那么这部分组件就可以被抽取出来，放到公共池子里供所有产品调用，我们称之为基础组件。通用区块介于基础组件及典型界面之间，其功能比基础组件大，但比典型界面小，其是由不同基础组件构建而成的。如表格区域上方的查询条件区块就是很典型的通用区块。有了基础组件和通用区块还不够，我们还需要典型界面来为 B 端数字界面高度一致的视觉体验保驾护航，其最重要的作用是提供了 B 端数字界面布局的一般性通用方法。我们当时准备梳理企业级典型界面，有很大一部分原因在于产品设计人员拿到了企业级基础组件库后，依然不知道如何才能设计出符合设计规范的数字界面。以下是我梳理的典型界面类型，共计7大类。在《B端体验设计：企业级视角的系统化方法》一书中，对典型界面有更全面地讲解。 | |
| |
| 全表格页、左树右表页、上下表格页、左右表格页、折叠表格页 |
| 基础表单页、高级表单页、分步骤表单页、带树表单页、锚点表单页、嵌套型分步骤表单页 |
| |
| |
| |
| 基础成功结果页、高级成功结果页、基础失败结果页、高级失败结果页 |
下面，我们来看看典型界面的具体情况吧，我选了Dashboard、表格页、表单页、详情页。🌻 01
Dashboard
Dashboard页通常作为产品的首页出现，产品内各种重要的数据和信息都会展现在Dashboard上。用户可以通过点击Dashboard上的卡片或卡片上某条数据，快速链接到详情，这大大缩短了用户获取信息的路径。产品团队也可以通过Dashboard页，向用户传递产品迭代、运营活动等内容。Dashboard是由承载不同内容的卡片组成的，每块卡片的内容都要独立，不该交叉。Dashboard上所呈现的数据最重要的就是该数据是否为用户真实所需，如果统计数据不对用户产生任何价值，那还不如不统计，否则会干扰用户。了解用户需要使用Dashboard的核心目标，为用户通过Dashboard达到数据详情页提供最短的路径导航。1.1、工作台
将用户需要待办的事项、事项处理的进度等都完整的展示出来，方便用户随时查看，提升用户的工作效率。1、展示与使用角色日常工作相关模块，并且将重要模块放在首屏。2、总模块数量尽量控制在 5-9 个。3、不同的角色需求不同，应提供基于角色的差异化视图。1.2、新手引导
当新用户第一次使用产品时，为了减少用户的困难和快速完成用户的任务，新手引导页可以将核心操作链路展现给用户。1.3、监控页
监控页是数据可视化页面中的一种，它通过一系列对数据高度概括的图表来展现系统的核心指标。指标监控页的使用者通常是管理者（即决策者），他们需要看到系统整体的运行状态，监控全局数据，从而调整自己的决策。1、展示决策者关注的核心指标，并将重要模块靠前展示。1.4、分析页
分析页也是数据可视化页面中的一种，它通过对系统多维度的详细分析来展示系统的情况，从而使使用者可以发现问题，并尽早找出解决办法。监控页重在总览，而分析页重在明细，因此，分析页的使用者通常是执行者。1、展示执行者关注的明细指标，并将重要模块靠前展示。🌻02
表格页
表格页可以处理大量的数据条目，同时可以导航至对应数据的详情页。在表格页中，用户可以查询自己所需要的数据条目，以及对比数据条目、新增数据条目、删除数据条目等。表格页通常由查询区、按钮区、表格区、分页器等模块组成，要保证模块间层次合理与清晰。表格页中最大的模块为表格区，该区域由列组成，列由数据构成，列中的数据格式展现要符合业务及用户的需求，例如“星期三”不能表现成“星期3”。对齐方式合理的数据，有利于用户定位数据、分析数据。通常数据对齐方式为数值右对齐，文本左对齐，特殊情况居中对齐。2.1、全表格页
全表格页是最常见的产品界面，全表格页主要由筛选条件、按钮区、表格区、分页器组成。表格区是表格页中的主角，当界面数据只需要一张表呈现的时候，使用全表格页。1、将重要的字段和用户使用频率较高的字段放置在表格靠前的位置。3、表格中的时间、状态、操作栏等，以及其他业务规定的字段，需保持完整展示。4、表格上方的筛选条件一次性展示不宜过多，建议3-8个左右。2.2、左树右表页
左树右表页的界面布局基本与全表格页差不多，只不过其多了一颗左侧的树来帮助用户导航。1、导航树上的文字尽量展示完整，便于用户定位信息。2.3、上下表格页
上下表格页是表格嵌套表格幻化过来的，通常上表格为主表，下表格为子表，子表展示了主表中某条数据的详情。1、主表数据对应的子表数据需要符合逻辑且展现清晰。2、若主表和子表均数据量大，则需要都加入筛选条件。2.4、左右表格页
左右表格页与上下表格页有异曲同工之妙，左右表格页通常左表为主表，右表为子表。1、由于表格左右布局，表格列不宜过多，尽量不出现滚动条。2.5、折叠表格页
折叠表格页的出现通常是页面上表格的信息需要分组，每一张表格展现一类信息。2、每个表格为一个模块，建议模块可全部展开与全部折叠。🌻03
表单页
表单页是用于信息添加和录入的页面类型，用户根据系统的要求将必填字段信息填写完成，从而提交给系统，由系统接收并输出信息。通过选择合理的数据录入控件，及通过合理的信息组织形式，帮助用户可以快速完成数据录入的任务。表单页面中，每个表单项都要做到自身体验的明确与好用，例如针对一些有通用值的表单项建议设置默认值，针对必填项要明确标明，针对表单项标题、错误提示要明确传达含义。表单录入完后，允许用户进行返回、取消、清空、保存等操作，并且操作后提供明确的反馈，例如保存成功、保存失败等。3.1、基础表单页
表单项较少，表单信息直接平展即可，表单录入任务简单且快速。2、在界面空间有限时，表单项可多个组合在一行中，进行多列排列，建议不超过3列。3、表单项对齐方式一致，保证用户视线流舒适，高效完成数据录入。4、表单整体要保持在用户合理操作范围，居左或居中。3.2、高级表单页
高级表单页通常需要用户填写大量的信息，这样大型而复杂的数据录入任务需要被拆解为多个部分进行。1、任务的分组需要有层层递进关系，而不是无序的分组。2、如果任务分组过多，最好不要超过5组，在2-5组之间较为合适，可以采用锚点定位的方式来帮助用户定位信息。3.3、分步骤表单页
当表单填写有相应的步骤顺序时，采用分步骤表单较为合适。1、若步骤间有很明确的顺序关系，需在相关位置进行明确的提示。3.4、带树表单页
当表单块归属不同的分类时，需要使用带树表单页去处理。1、分类超过10项，且分类标题内容较长时，建议使用树导航。
🌻04
详情页
详情页的作用是向用户展示一个对象的完整信息，它的主要作用是帮助用户信息浏览，同时允许对详情页整体的数据或某部分数据发起编辑等操作。针对信息较少的详情，平铺展示即可；针对信息量大的详情，需进行合理组织，保证层级分明。针对详情信息的模块化组织，要求尽量模块的结构相似，减少复杂性，降低用户的理解成本。4.1、基础详情页
基础详情页信息量较少，信息复杂度低，直接平铺展示即可。4.2、高级详情页
高级详情页需要展示的内容量较大，且复杂度高，需要拆分为多组来帮助用户浏览信息。4.3、可编辑详情页
1、可编辑字段通常有两种情况，一种为常显编辑，一种为点击编辑。用户对常显编辑字段操作时，页面需要对是否编辑过做出适当反馈。在企业级 B 端设计体系中，基础资产的典型界面是一个非常重要的部分。我们如果能做到对B端通用型界面了然于胸，那么在面对用户需求时才能从容应对，举一反三。不断总结和抽象，是我们应对各种需求的不二法宝。
我在实际工作中会一边做业务体验，一边搭建典型界面规范，然后等产品相对稳定后，再一次统一整理典型界面规范，将其作为一套团队内部的设计指南手册，提供给大家查阅和使用。
推荐阅读：
噔噔噔，知果带着她的《B端体验设计：企业级视角的系统化方法》来啦
6个有效思维 | 编写清晰的B端交互说明规范（附栗子）
编写一份友好的交互说明文档要注意哪些
【个人成长】一生不长，关注内心，与值得相伴
从「7+」方面提升B端产品体验的全局意识
我的新书《B端体验设计：企业级视角的系统化方法》中，对如何系统化构建B端产品体验设计能力做了全面地讲解，读后你会发现“用对思路和方法，设计B端产品用户体验不再难！”原价108，限时59
现在下单购买有福利哦，看这儿 ↓ ↓ ↓
具体福利见下图 ![]()