B端后台产品的设计细节-设计说明指南篇

深圳/UX设计师/4年前/523浏览

版权

B端后台产品的设计细节-设计说明指南篇

B端产品往往拥有复杂的业务逻辑且页面量级巨大，快速迭代也会引发频繁的变动以及并行概率的增加。

说明：B端产品往往拥有复杂的业务逻辑且页面量级巨大，快速迭代也会引发频繁的变动以及并行概率的增加，需要设计师与开发能够快速的产出方案保证上线。这样的工作模式引发的副作用如：“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现，变成一个急待解决的问题。B类产品中存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容，那么是不是可以通过这种方式从现在的模式中，解绑一下呢？

背景：传统的页面产出流程是瀑布流式的 -一个工作流程中会涉及到不同的PM、设计师及前端工程师。部分项目在时间紧张的情况下会出现分批交付并行开发的情况、如此多的角色共同参与一个项目下，合作方如果没有紧密咬合、足够的沟通，将会导致大量重复性的工作，增加项目周期、管理难度。

建立原子化组件思维

一、什么是原子化组件思维

原子思维：原子最早是由英国化学家/物理学家约翰·道尔顿提出的，继承古希腊原子论和牛顿微粒说，提出的原子论。化学元素由不可分的微粒（原子）构成的，它在一切化学变化中是不可再分的最小单位。

原子理论同理适用于我们的设计系统中：

我们的页面是由原子（最小单位设计元素）、分子（基础控件）、组织（基础功能组件）、模版（业务定制组件）、页面构成的

【原子】：原子是最基本和最小颗粒度的单位，无法进一步细分的UI元素，在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。

【分子】：原子排列组合构成了分子，在界面中多以「设计控件」的形式存在，形成相对简单的UI组件的原子的集合。例如：导航栏、标签栏、搜索框、按钮、弹窗等。

【组织】：原子、分子排列组合形成界面离散部分的相对复杂的组件，在界面中多以「基础组件」的形式存在，例如：内容卡片、表单页面。

【模版】：原子、分子、组织按照业务需求排列组合构成了模板，在界面中也称为「业务组件」，例如：筛选列表。

【页面】：按照一定规则后排列组合而成的满足业务需求且包含品牌属性的一个完整「页面」。

二、组件化的内核

设计组件不是把UI元素堆积到一个地方，然后各处集中引用这么简单。组件化的工作方式信奉独立、完整、自由组合。目标就是尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，通过特定规则自由组合来构成整个产品。

【独立】：一个组件就是一个独立的产品：在制定组件的过程中要考虑到组件应用中的各个场景，降低、拆解组件中的耦合度，同时把一个组件当作一个独立产品来设计考虑空状态、极端情况、尺寸变化尽可能灵活适应各种使用场景

【完整】：一个完整的组件构成包含了三种属性

A.响应状态：包含组件库中原子的大小类型、分子的的响应方式、组合方式、多状态的交互

B.行为状态：组件中元素的与背景的组合方式、组件中不同组件拼合的层级关系、组件与用户行为的交互

C .数据状态：包含组件不同的状态枚举：如提交中、审核中、已结束状态

【自由】：每个组件都是相互独立的，组件间的组合方式灵活且多样的。灵活多变的同时也要遵循统一的栅格尺寸与表达约束，最大程度上保证页面呈现出一种有秩序的美。

建立设计说明指南

一、什么是设计说明指南

针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。既减少了不必要的认知成本，又能够提升交互确定性和设计的效率。考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，万变不离其宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。设计模式包含以下内容：

【原则】：基于价值观衍生出的一般设计技巧，包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。

【全局规则】：通过规范常见的互动行为，包括导航、数据录入、数据展示、反馈、操作、帮助等，呈现组件元素的标准用法和弹性空间，并了解如何将他们组织在一起来创建良好的体验。

【构图模版】：我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案，介绍每类页面的设计目标、设计技巧以及典型页面内容等，帮助设计师和产品经理可以快速开始构建界面。

二、服务于谁

A.设计师：交互设计时，整体流程框架或分支流程可快速复用。

B.产品经理：原型设计时，可复制并套用现有交互模式进行原型绘制，或直接引用进行开发。

C.研发人员：可作为标准交互流程的参照，统一相似流程的代码设计方式。

三、有什么内容

·前言：对这次建立设计说明指南的目的性说明；

·设计概览：描述这次调整的范围的维度；

·设计原则：基于哪些设计原则输出设计内容；

·构图模版：页面的构图模版、组合控件和组合范围；