B端后台产品的设计细节-设计说明指南篇
关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第111篇文章分享
这样的工作模式引发的副作用如：“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现，变成一个急待解决的问题。
什么是原子化组件思维？
原子思维：原子最早是由英国化学家/物理学家约翰·道尔顿提出的，继承古希腊原子论和牛顿微粒说，提出的原子论。化学元素由不可分的微粒（原子）构成的，它在一切化学变化中是不可再分的最小单位。
原子理论同理适用于我们的设计系统中：
页面是由原子（最小单位设计元素）、分子（基础控件）、组织（基础功能组件）、模版（业务定制组件）、页面构成。
原子：原子是最基本和最小颗粒度的单位，无法进一步细分的UI元素，在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。
分子：原子排列组合构成了分子，在界面中多以「设计控件」的形式存在，形成相对简单的UI组件的原子的集合。例如：导航栏、标签栏、搜索框、按钮、弹窗等。
组织：原子、分子排列组合形成界面离散部分的相对复杂的组件，在界面中多以「基础组件」的形式存在，例如：内容卡片、表单页面。
模版：原子、分子、组织按照业务需求排列组合构成了模板，在界面中也称为「业务组件」，例如：筛选列表。
页面：按照一定规则后排列组合而成的满足业务需求且包含品牌属性的一个完整「页面」。
组件化的内核
设计组件不是把UI元素堆积到一个地方，然后各处集中引用这么简单。组件化的工作方式信奉独立、完整、自由组合。
目标就是尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，通过特定规则自由组合来构成整个产品。
独立：一个组件就是一个独立的产品：在制定组件的过程中要考虑到组件应用中的各个场景，降低、拆解组件中的耦合度，同时把一个组件当作一个独立产品来设计 考虑空状态、极端情况、尺寸变化 尽可能灵活适应各种使用场景
完整：一个完整组件构成包含三种属性：
A.响应状态-包含组件库中原子的大小类型、分子的响应和组合方式、多状态的交互；
B.行为状态-组件中元素的与背景的组合方式、组件中不同组件拼合的层级关系、组件与用户行为的交互；
C .数据状态-包含组件不同的状态枚举：如提交中、审核中、已结束状态。
02 建立设计说明指南
什么是设计说明指南？
针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。减少了不必要的认知成本，提升交互确定性和设计的效率。
考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，万变不离其宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。
设计模式包含以下内容：
原则：基于价值观衍生出的一般设计技巧，包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。
全局规则：通过规范常见的互动行为，包括导航、数据录入、数据展示、反馈、操作、帮助等，呈现组件元素的标准用法和弹性空间，并了解如何将他们组织在一起来创建良好的体验。
构图模版：我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案，介绍每类页面的设计目标、设计技巧以及典型页面内容等，帮助设计师和产品经理可以快速开始构建界面。
服务于谁
A.设计师：交互设计时，整体流程框架或分支流程可快速复用。
B.产品经理：原型设计时，可复制并套用现有交互模式进行原型绘制，或直接引用进行开发。
有什么内容
前言：对这次建立设计说明指南的目的性说明；
设计概览：描述这次调整的范围的维度；
设计原则：基于哪些设计原则输出设计内容；
构图模版：页面的构图模版、组合控件和组合范围；
全局规则：全局范围出发，除了页面构图以外，涉及到共用组件，制定的规范；
设计说明指南的输出
《GM Design》交互设计说明指南，涉及几十个产品线的成百上千个的功能，业务体量和复杂度极大，为了让整体SaaS产品具备简洁高效的一致性交互体验，设计说明指南是设计过程中问题解决的核心方法，也是构建整个平台或框架所要遵循的基础和标准。
最后
最后，为大家提供一份详细的GM Design交互设计文档，里面包含设计概览、设计原则、构图模版、全局规则、组件等多类B端后台交互设计内容。
完整版交互设计说明文档-体验链接：https://lanhuapp.com/url/947cJ
大家可以在公众号后台回复文档，获取访问密码。
获取方式：
添加微信, 邀你进设计成长群🌟
🔥文章合集