一、建立原子化組件思維
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.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司