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