你所不知道的前端系列（四）：B端产品设计系统的价值理念与模式

在企业的产品设计体系过程中，往往是“发现问题 — 分析问题 — 解决问题”的过程。

站在设计师的角度，了解产品业务、设计模式、开发落地等各个环节，全链路的深入到各个环节才能够辅助设计决策，通过定义产品的设计目标，到推动产品的商业化落地。

基于B端产品业务形态，我们通常要去衡量产品的价值体系，通过产品的用户、业务以及对应的痛点去发现用户亟待解决的问题。通过对应的问题及业务场景去定义设计（原则）行为，从而输出产品具体解决问题的方案。

对应到B端产品的设计价值观，这里定义了如下四点法则：

1、 效率

结构流程：产品结构定义清晰明确，直观明确的业务信息及操作流程；

业务语义：语言、图形表达明确，清晰准确传达业务语义，让用户快速理解的同时并作出决策；

内容识别：简洁直白，让用户快速识别，减轻用户负担。

2、 一致性

从用户行为角度来讲，基于社会生活，遵从用户行为习惯，物理世界和客观事实保持一致；从产品设计角度来讲，保持产品业务流程、框架、交互行为逻辑、视觉风格的一致性；同时，内部协同能够保证团队内部设计风格和上线的统一，提高产品整体的设计以及开发效率。

3、和谐

设计过程中，产品的布局、色彩、图形让用户易于接受的同时，同时能够给用户带来清晰的认知，并能够带来情感上的共鸣。设计目标手段不应该违背用户行为意识，遵从用户体验原则。能够创造良好的用户系统角色和产品互动，并且是友好、互不冲突的。

4、 成长

公司产品功能的增长和用户是相互依存的关系。设计者为自己创造的产品负责，提升功能、发现和挖掘产品的价值。用发展的眼光考虑产品的生命周期及持续成长的过程。

产品的成长依赖于产品用户群体增长和用户的深度使用，用户活跃度的提升反过来又依赖于产品用户体验的提升。两者相互依存，用产品自身价值赋能用户的同时才能促进自身的不断成长和发展。

万物互联，体现的不仅仅是人机共生，还有人与环境的共生。产品通过物理硬件和人发生交互的同时，也因时因地受周围环境的制约。不存在某个相互独立的个体，而是相互依存、共同发展的生态体系。

主要针对设计原则的定义，包括对应的产品设计的结构版式规则的定义和产品交互原则的定义。

对于产品的结构版式设计原理，toB产品和toC、toG大同小异，只是针对产品的分析、运营设计手段略微有些差别。这里主要定义了对齐、对比、重复、亲密性四项基本法则。详见美国作者罗宾·威廉姆斯写的《写给大家看的设计书》；里面详尽的描述了设计的四大法则，这四大原则不止是针对软件产品设计，其实可以应用到人类社会活动各项领域的设计工作。在这里仅对软件产品设计作出描述：

1、 对齐

通常在界面设计中，对齐的形式有左对齐、右对齐、居中对齐，将元素进行对齐既符合用户的认知特性，也能够引导用户的视觉流向，让用户更流畅的接收信息。界面中的对齐形式主要有：文案类对齐、表单类对齐、数字类对齐。可以通过对齐形式让产品界面整洁有序，用户视觉起点统一。

2、对比

不同元素之间通过主次、总分、状态关系的对比，形成视觉层级关系，让用户快速识别关键信息。其中，主次关系对比主要引导用户快速理解信息，并作出判断，突出重要信息或者是高频操作；总分关系对比通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感；状态关系对比通过图形、字体、颜色和不同状态实现对比，便于用户理解和区分信息。

3、重复

相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。重复元素包括图形、颜色、分隔线、空间布局、展现形式等等。

4、亲密性

互为关联的信息形成一个整体，并且彼此距离越近，形成一个统一的视觉单元，反之，则它们的距离就应该越远。通过视觉单元定义页面的层级关系和组织关系。通常亲密性主要体现在产品模块结构和内容视觉单元之间的间距关系。

B端产品通常比较注重产品的业务流程结构以及用户效率，在这里主要针对产品的交互行为层面这里主要总结了简化流程、及时反馈、可控等三大基本原则。

简化流程

业务路径直观明确，尽量减少冗余信息，便于用户快速完成业务流程。简化流程包括：内容实时可见、悬停即现和开关显示。

• 实时可见：如果某个操作非常重要，和界面内容实时关联，就应该把它放在界面中，并实时可见。

• 悬停即现：如果某个操作不那么重要，或者使用「实时可见」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。

• 开关显示：如果某些操作只需要在特定模式时显示，并且可以编辑的状态，可以通过开关来实现。

即时反馈

通过业务形态的交互让用户感知产品完成任务的行为路径，基于反馈建立产品和用户的链接。即时反馈包括控制反馈和界面反馈；

• 控制反馈：通过界面设计和交互动效让用户可以清晰感知操作路径；

• 界面反馈：用户操作后，通过界面设计元素的变化，清晰展示当前的操作状态，可分为全局提示和局部反馈。

可控

用户能够实时了解并控制当前状态，明确自己的行为目标。可控包括用户决策可控和结果可控；

• 用户决策可控：基于场景给与用户操作建议、指引或者正确的提示；

• 结果可控：用户可自由操作，包括返回、撤销、终止当前操作流程。

在我们实际工作中，基于定义的产品系统的设计价值理念以及设计模式，沉淀出来的产品规范、图形语言，组件库等设计系统化的语言，已经在实际产品中得到了验证，对于快速提升产品体系的品牌化建设以及多维度助力产品业务的发展有及其显著的促进意义。