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