一、什么是功能性設(shè)計(jì)模式
1. 功能性設(shè)計(jì)模式時(shí)產(chǎn)品界面的實(shí)體化組成要素，其存在目的通常是幫助用戶完成特定的操作行為。
2. 功能性設(shè)計(jì)模式可以是簡(jiǎn)單而獨(dú)立的，也可以被組合成為更復(fù)雜的模式。
3. 功能性設(shè)計(jì)模式會(huì)隨著產(chǎn)品的發(fā)展而擴(kuò)充或調(diào)整。
4. 在項(xiàng)目早期對(duì)一些最為核心的功能性設(shè)計(jì)模式進(jìn)行定義，有助于后續(xù)設(shè)計(jì)流程的統(tǒng)一性。
5.（用戶）關(guān)鍵行為直接決定著實(shí)際界面由哪些最為核心的功能性設(shè)計(jì)模式所構(gòu)成。
二、功能性設(shè)計(jì)模式的體系化
1. 界面清查
界面清查是體系化定義工作的起點(diǎn)，大致包括界面元素的匯總及分組歸類等典型步驟。
本書中，從“目標(biāo)”（行為）的維度對(duì)界面元素進(jìn)行歸類，而非按照元素類型（按鈕、tab、下拉菜單）進(jìn)行分組。因?yàn)槭紫刃枰斫庠O(shè)計(jì)模式的目標(biāo)及運(yùn)用方式，而非它們是否應(yīng)該擁有相同的外觀。
1.1 準(zhǔn)備工作
????????1.?時(shí)機(jī)：確?，F(xiàn)有的設(shè)計(jì)當(dāng)中沒(méi)有本質(zhì)性的缺陷或明顯的可用性問(wèn)題，避免設(shè)計(jì)體系相關(guān)工作被歷史的或現(xiàn)有的重大問(wèn)題影響
????????2.?團(tuán)隊(duì)：初期的規(guī)?？刂圃?到8人比較理想。人員構(gòu)成包括設(shè)計(jì)師與前端工程師；如果有后端開發(fā)人員、內(nèi)容生產(chǎn)者或產(chǎn)品經(jīng)理能夠參與則更加理想
????????3.?打印頁(yè)面：識(shí)別出產(chǎn)品核心行為路徑所設(shè)計(jì)的最為關(guān)鍵的頁(yè)面；通常10-12個(gè)不同類型的產(chǎn)品；可以使用mock-up或現(xiàn)有頁(yè)面里的截圖；每個(gè)頁(yè)面一式兩份，一張貼墻上用于演示用戶歷程，另一張用來(lái)裁剪組件并歸類粘貼
1.2 第一步：識(shí)別關(guān)鍵行為
首先要從用戶歷程的每個(gè)階段中識(shí)別出最為關(guān)鍵的用戶需求與對(duì)應(yīng)的行為。對(duì)于由少量頁(yè)面構(gòu)成的產(chǎn)品，可以聚焦于每個(gè)界面對(duì)于較大的產(chǎn)品，首先將界面按照用戶歷程的不同階段進(jìn)行分組。
????????1.?從“行為”的角度理解設(shè)計(jì)模式：聚焦于“它用來(lái)做什么”而非“它是什么”，通過(guò)動(dòng)詞描述嘗試找到最能體現(xiàn)設(shè)計(jì)模式行為特征的說(shuō)法；
????????2.?選擇恰當(dāng)?shù)挠迷~：用于描述關(guān)鍵行為的用詞會(huì)影響我們的思維方式；對(duì)于行為的描述方式應(yīng)該聚焦于用戶的角度，而非單純處于產(chǎn)品或業(yè)務(wù)目標(biāo)；
????????3.?解構(gòu)關(guān)鍵行為：對(duì)識(shí)別出的關(guān)鍵行為進(jìn)行結(jié)構(gòu)，分解為更具體的任務(wù)，用便利貼標(biāo)注在打印稿旁邊；通過(guò)行為解構(gòu)處理出界面中具有重復(fù)性的任務(wù)。
1.3 第二步：歸類
按照行為將元素歸類。每次聚焦于一個(gè)特定的目標(biāo)任務(wù)，將所有頁(yè)面當(dāng)中用于執(zhí)行該任務(wù)的元素歸為一類。要確保元素顆粒度一致，比如避免在同一個(gè)分組當(dāng)中出現(xiàn)書籍列表與借閱按鈕這樣顆粒度完全不同的元素。
1.4 重復(fù)上述步驟，逐步降低顆粒度
逐漸降低顆粒度，深入到更基礎(chǔ)的一類元素當(dāng)中。比如按鈕、列表、圖標(biāo)等。如果某些元素又著類似的設(shè)計(jì)目標(biāo)，那么可以試著將它們歸為一類?？梢酝ㄟ^(guò)以下幾個(gè)方面來(lái)判斷這些元素的異同：
????????1.?行為一致性：相同的元素在本質(zhì)上能觸發(fā)的行為必須是一致的；當(dāng)行為有細(xì)微的差別時(shí)，也需要進(jìn)行精準(zhǔn)的定義。如按鈕與鏈接的差異需要詳細(xì)描述。
????????2.?視覺(jué)層級(jí)：對(duì)于視覺(jué)層級(jí)以及組合運(yùn)用狀態(tài)下的彼此之間的關(guān)聯(lián)也需要進(jìn)行精準(zhǔn)定義，如主按鈕與次按鈕。
????????3.?特例：通用原則之外總會(huì)有特例存在。如特殊樣式按鈕等。特例應(yīng)保持偶然性，一方面可以體現(xiàn)其在整體環(huán)境中的差異性，一方面也可以避免通用性的模式受到破壞。
2. 整理信息架構(gòu)
需要整理出信息重要及關(guān)系、統(tǒng)一組件樣式的同時(shí)明確設(shè)計(jì)時(shí)可以隱藏、展示的信息。此處的信息架構(gòu)不是整個(gè)軟件的信息架構(gòu)，而是單個(gè)組件或模塊的信息架構(gòu)。
2.1 步驟
????????1. 判斷并提取某個(gè)模塊當(dāng)中最為核心的內(nèi)容元素，并將非必要的元素標(biāo)注出來(lái)
????????2. 判斷核心元素的層級(jí)關(guān)系，進(jìn)行必要的分組
????????3. 通過(guò)草圖將信息架構(gòu)抽象地呈現(xiàn)出來(lái)
如果沒(méi)有足夠的必要去區(qū)分不同類型的內(nèi)容，便可以將它們整合為同一種模式。這種模式具有更強(qiáng)的適應(yīng)性，可以同時(shí)用于多種信息的呈現(xiàn)；但其靈活性較弱，任何樣式迭代都會(huì)同時(shí)作用于多種類型當(dāng)中。
2.2 判斷
????????1. 整合：底層內(nèi)容架構(gòu)相同的模塊
????????2. 不整合：整合后將影響其目標(biāo)實(shí)現(xiàn)
????????3. 變體：具備相同的信息架構(gòu)但不同的外觀樣式或行為方式，將其視為相同設(shè)計(jì)模式的不同變體，而不是創(chuàng)建不同的模式。通過(guò)變體對(duì)模式提供額外定義。?
2.3 命名
為模塊命名。命名需要考慮到內(nèi)容類型，但也不能被特定的內(nèi)容類型所限制。良好的命名方式體現(xiàn)著合理的復(fù)用性，并能充分體現(xiàn)其使用方式
3. 創(chuàng)建設(shè)計(jì)模式文檔
3.1 組織方式
功能性設(shè)計(jì)模式是保持增長(zhǎng)的。組件的組織方式多種多樣，可選擇的維度通常包括命名字母順序、顆粒度層級(jí)、類型（導(dǎo)航、表單元?? ?素等）、目標(biāo)等。設(shè)計(jì)模式組織方式的選擇需要經(jīng)過(guò)嘗試，才能找到最適合團(tuán)隊(duì)的方法。
? ??????1. 按字母排列
????????????（a）優(yōu)點(diǎn)：簡(jiǎn)單的列表，決策更輕松，避免分類方式的爭(zhēng)議
????????????（b）缺點(diǎn)：列表項(xiàng)數(shù)量的增長(zhǎng)導(dǎo)致管理難度增大
? ? ? ? 2. 按顆粒度層級(jí)排列（原子化設(shè)計(jì) Atomic Design）
????????????（a）優(yōu)點(diǎn)：有助于以層級(jí)構(gòu)筑的方式思考元素的復(fù)用性，組合和嵌套方式的明確定義能提升一致性
????????????（b）缺點(diǎn)：顆粒度層級(jí)的過(guò)多容易導(dǎo)致混亂
? ??????3. 按目標(biāo)排列
????????優(yōu)點(diǎn)：有助于設(shè)計(jì)師理解模塊的運(yùn)用方法
3.2 文檔化
對(duì)于小團(tuán)隊(duì)或起步階段，一開始先為最關(guān)鍵的模式添加簡(jiǎn)要的概述，在后續(xù)的迭代中根據(jù)團(tuán)隊(duì)需求將信息逐漸補(bǔ)充進(jìn)去?？梢詮膸醉?xiàng)基本信息入手：名稱、目標(biāo)、范例、變體。
????????1. 名稱：必須易于記憶，且能體現(xiàn)設(shè)計(jì)模式的目標(biāo)用途。理想情況下僅通過(guò)模式名稱就能理解其使用過(guò)方式。
????????2. 目標(biāo)：言簡(jiǎn)意駭，盡可能通過(guò)一兩句話講設(shè)計(jì)模式的定義與目標(biāo)描述清晰。還可以對(duì)內(nèi)容規(guī)格進(jìn)行必要的說(shuō)明或建議。
????????3. 范例：最理想的范例是同時(shí)提供樣式與實(shí)際代碼，連同響應(yīng)性、交互方式及動(dòng)效在內(nèi)均可做到實(shí)際演示。
????????4. 變體：以列表的形式將變體并列呈現(xiàn)出來(lái)，同時(shí)對(duì)各自的目標(biāo)用途及差異之處進(jìn)行詳細(xì)的說(shuō)明（Carbon）。
????????5. 版本信息：在相關(guān)組件文檔中記錄變更；替換掉的設(shè)計(jì)模式要做好注釋說(shuō)明。
????????6. 相關(guān)人員：帶來(lái)權(quán)責(zé)意識(shí)與榮譽(yù)感，也便于后續(xù)溝通。
????????7. 相關(guān)模式：提供相關(guān)的備選建議，確保設(shè)計(jì)是找到最適合自己需求的模式，防止重復(fù)創(chuàng)建。
以上筆記均來(lái)源與《設(shè)計(jì)體系 Design Systems》Alla Kholmatova —— C7210譯版（譯者C7210，于2018年7月至8月發(fā)布于公眾號(hào)“Beforeweb”，并非中國(guó)大陸官方引進(jìn)的譯版）有興趣的朋友可以去閱讀一下這本書的完整版。
本篇筆記純個(gè)人讀書記錄非盈利目的，禁止商業(yè)轉(zhuǎn)載或任何盈利目的傳播。
