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