一、建立原子化組件思維
1、什么是原子化組件思維？
原子思維：原子最早是由英國化學家/物理學家約翰·道爾頓提出的，繼承古希臘原子論和牛頓微粒說，提出的原子論?；瘜W元素由不可分的微粒（原子）構成的，它在一切化學變化中是不可再分的最小單位。
原子理論同理適用于我們的設計系統中：
頁面是由原子（最小單位設計元素）、分子（基礎控件）、組織（基礎功能組件）、模版（業(yè)務定制組件）、頁面構成。
原子：原子是最基本和最小顆粒度的單位，無法進一步細分的UI元素，在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線等。
分子：原子排列組合構成了分子，在界面中多以「設計控件」的形式存在，形成相對簡單的UI組件的原子的集合。例如：導航欄、標簽欄、搜索框、按鈕、彈窗等。
組織：原子、分子排列組合形成界面離散部分的相對復雜的組件，在界面中多以「基礎組件」的形式存在，例如：內容卡片、表單頁面。
模版：原子、分子、組織按照業(yè)務需求排列組合構成了模板，在界面中也稱為「業(yè)務組件」，例如：篩選列表。
頁面：按照一定規(guī)則后排列組合而成的滿足業(yè)務需求且包含品牌屬性的一個完整「頁面」。
2、組件化的內核
設計組件不是把UI元素堆積到一個地方，然后各處集中引用這么簡單。組件化的工作方式信奉獨立、完整、自由組合。
目標就是盡可能把設計與開發(fā)中的元素獨立化，使它具備完整的局部功能，通過特定規(guī)則自由組合來構成整個產品。
獨立：一個組件就是一個獨立的產品：在制定組件的過程中要考慮到組件應用中的各個場景，降低、拆解組件中的耦合度，同時把一個組件當作一個獨立產品來設計 考慮空狀態(tài)、極端情況、尺寸變化 盡可能靈活適應各種使用場景
完整：一個完整組件構成包含三種屬性：
A.響應狀態(tài)-包含組件庫中原子的大小類型、分子的響應和組合方式、多狀態(tài)的交互；
B.行為狀態(tài)-組件中元素的與背景的組合方式、組件中不同組件拼合的層級關系、組件與用戶行為的交互；
C .數據狀態(tài)-包含組件不同的狀態(tài)枚舉：如提交中、審核中、已結束狀態(tài)。
自由：每個組件都是相互獨立的，組件間的組合方式靈活且多樣的。靈活多變的同時也要遵循統一的柵格尺寸與表達約束，最大程度上保證頁面呈現出一種有秩序的美。
二、建立設計說明指南
1、什么是設計說明指南？
針對企業(yè)級產品反復出現的設計問題，設計模式給出一般性的解決方案，實現跨應用交互一致性的有效融合。減少了不必要的認知成本，提升交互確定性和設計的效率。
考慮到需要適應各種獨特的業(yè)務場景，模式的規(guī)則具有一定的靈活性，萬變不離其宗，通過了解設計模式的構建邏輯，可以衍生出更具場景特性的解決方案。
設計模式包含以下內容：
原則：基于價值觀衍生出的一般設計技巧，包括如何高效組織信息、幫助建立用戶與界面的互動等原則性要求。
全局規(guī)則：通過規(guī)范常見的互動行為，包括導航、數據錄入、數據展示、反饋、操作、幫助等，呈現組件元素的標準用法和彈性空間，并了解如何將他們組織在一起來創(chuàng)建良好的體驗。
構圖模版：我們總結了表單、列表、數據可視化、詳情頁、工作臺、異常、結果、編輯器幾類頁面的典型解決方案，介紹每類頁面的設計目標、設計技巧以及典型頁面內容等，幫助設計師和產品經理可以快速開始構建界面。
2、服務于誰
A.設計師：交互設計時，整體流程框架或分支流程可快速復用。
B.產品經理：原型設計時，可復制并套用現有交互模式進行原型繪制，或直接引用進行開發(fā)。
C.研發(fā)人員：可作為標準交互流程的參照，統一相似流程的代碼設計方式。
3、有什么內容
前言：對這次建立設計說明指南的目的性說明；
設計概覽：描述這次調整的范圍的維度；
設計原則：基于哪些設計原則輸出設計內容；
構圖模版：頁面的構圖模版、組合控件和組合范圍；
全局規(guī)則：全局范圍出發(fā)，除了頁面構圖以外，涉及到共用組件，制定的規(guī)范；
組件：基礎控件和組織控件，甚至涉及到業(yè)務定制控件（模版）。
4、設計說明指南的輸出
《GM Design》交互設計說明指南，涉及幾十個產品線的成百上千個的功能，業(yè)務體量和復雜度極大，為了讓整體SaaS產品具備簡潔高效的一致性交互體驗，設計說明指南是設計過程中問題解決的核心方法，也是構建整個平臺或框架所要遵循的基礎和標準。
設計模式輔助設計者將業(yè)務引向實踐，并使設計更具有一般性、簡單性、一致性及穩(wěn)定性。同時，設計者也可結合不同業(yè)務情境，實現模式在一般性和特殊性的銜接并作要素與結構的調整。
最后
最后，為大家提供一份詳細的GM Design交互設計文檔，里面包含設計概覽、設計原則、構圖模版、全局規(guī)則、組件等多類B端后臺交互設計內容。
完整版交互設計說明文檔-體驗鏈接：https://lanhuapp.com/url/947cJ
大家可以在公眾號后臺回復文檔，獲取訪問密碼。
慢慢來比較快，希望對你有幫助！
原文地址：Clip設計夾（公眾號）
作者：Clippp
轉載請注明：學UI網》B端后臺產品的設計細節(jié)-設計說明指南篇
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.bjlzjm.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司