PM：「那個……把底欄第二和第三個Tab對調(diào)一下位置吧?！?/p>

你嚇得坐到了地上：「為什么！不是一個月前評審時就定好的嗎？」

PM嘆了口氣，用八百字痛陳了客戶的壓力和他的歉意。

你哭：「有200多個頁面要改，明天評審還來得及嗎？」

PM沒有說話，只是同情地拍了拍你的肩膀……

而如果你的導(dǎo)航欄是通過組件統(tǒng)一搭建的，完成這一改動只需要1秒。

什么是組件庫

1、組件庫的概念

組件庫就是界面設(shè)計常用控件或元素的集合，從某種意義上說，交互設(shè)計線框圖的組件庫比視覺設(shè)計階段的UI組件庫價值更高。UI設(shè)計階段，不同產(chǎn)品、不同項目的常用組件即使有共通之處，也一定是不完全相同的。而在交互設(shè)計的線框圖階段，一個優(yōu)秀的組件庫可以同時在許多項目中發(fā)光發(fā)熱。

一個好的組件庫，衡量標準主要包括靈活性、復(fù)用性、全面性。靈活性指一個組件的字段、icon、配色都應(yīng)該可以靈活改寫，以應(yīng)對多樣化的需求。復(fù)用性指對于通用組件，應(yīng)當(dāng)是可以在不同項目間復(fù)用的。全面性則指一套組件庫應(yīng)當(dāng)覆蓋盡可能多的常用元素。

組件化的初衷并非提高一致性、利于團隊合作這些高大上的目的，而是人類進步的第一生產(chǎn)力——「懶」。消滅重復(fù)勞動是提高效率的主要途徑，勤勞如小蜜蜂的設(shè)計師也不例外，那么組件化就是無論交互還是UI設(shè)計中我們不得不思考的問題。

雖然之前總是強調(diào)大家不要過分關(guān)注工具，對交互設(shè)計師而言，業(yè)務(wù)目標、流程和信息架構(gòu)上的思考才是我們的核心價值所在。但這不代表工具就不需要思考和積累，一把更鋒利的工具才能幫助我們把有限的時間和精力放在上面所說的核心思考上，而不是淪為埋頭畫圖的線框仔。

2、復(fù)用性：組件庫的意義

上面說到組件化是源于「懶」，并不是說組件化的作用僅限于簡化重復(fù)操作。除了提高設(shè)計師個人的設(shè)計效率這一顯而易見的好處之外，在交互設(shè)計階段對常見的元素控件進行組件化，還有很多更深層次的意義：

1. 一致性「從娃娃抓起」：從交互稿階段開始，就讓整個項目的產(chǎn)出物具有高度的一致性，使用同一組件庫畫的每個頂欄、每個列表、每個彈框都是遵循同一規(guī)則的。
2. 與視覺設(shè)計無縫銜接：Sketch為交互設(shè)計和視覺設(shè)計階段的無縫銜接提供了最好的平臺，交互組件庫可以直接交付視覺設(shè)計師進行視覺設(shè)計，形成真正的UI組件庫（UI Kit）。
3. 有助于形成設(shè)計規(guī)范：當(dāng)UI組件庫形成后，「設(shè)計規(guī)范的積淀」——這個貫穿交互和UI設(shè)計管理工作中的老大難問題，就已經(jīng)解決了一大半了，經(jīng)過評審確認的UI組件庫可以直接作為視覺設(shè)計規(guī)范的一部分。
4. 利于團隊合作：無論是交互設(shè)計組件庫還是UI組件庫，經(jīng)過整理和完善，在項目或者團隊中推行開來，對項目內(nèi)，或者不同項目間設(shè)計成果的一致性、合作效率都大有裨益，也有助于讓整個品牌形成有效的辨識度。

既然組件化有這么多的好處，哪些元素可以進行組件化呢？其實很簡單，凡是你覺得已經(jīng)重復(fù)畫了很多次的元素，不同場景下都會用到的元素，都可以考慮將其單獨拿出來進行組件化。

3、靈活性：「Symbol套Symbol」

Sketch 41的一個讓設(shè)計效率產(chǎn)生質(zhì)變的更新就是Symbol可以內(nèi)嵌Symbol了，尺寸相同的符號可以在Symbol Override的下拉列表中直接選擇切換——想必大家已經(jīng)等這個功能很久了。

有了「Symbol套Symbol」的功能后，在組件化時進行合理的拆分和嵌套，可以讓你做出一個很”聰明“的Symbol——可以幫你「以一敵十」的那種。

雖然在第一次建立Symbol時，需要仔細考慮怎樣的拆分和嵌套是最有利于設(shè)計效率的，也許會覺得太費腦子，還不如直接畫多個Symbol方便。但當(dāng)一個通用性很強的Symbol通過各種內(nèi)嵌Symbol組合而成后，毫不夸張地說，你會發(fā)現(xiàn)它替代的是以往成十上百個Symbol的功能。

而當(dāng)你為常用的控件制作并積累了許多這些高通用性的Symbol后，一套復(fù)用性極佳的組件庫庫逐漸積淀成型后，你一定會驚嘆于把一個方案構(gòu)想呈現(xiàn)在線框圖上原來可以這么快。

4、全面性：循序漸進的積累過程

在積累一個個的組件，逐漸形成組件庫的過程中，不要想一下子做得非常全面。組件庫的積累是一個不斷在項目中補充、維護和更新的過程。而且，即使一個資深的設(shè)計師經(jīng)過幾年的工作也很難說能積累出絕對「全面」的組件庫，每個項目都有各自的特色，一個能幫我們解決70%問題的組件庫已經(jīng)算得上是復(fù)用性很棒的了。

同時，Sketch的Symbol可以通過命名中的「/」符號自動形成目錄結(jié)構(gòu)，這有助于使用組件庫的設(shè)計師快速找到想要的組件，也有助于制作或維護組件庫的人隨時審視一個類型的組件是否有重復(fù)或者不完善的情況。

以上講述了組件庫的概念和意義之后，下文將主要介紹如何構(gòu)建一套具有復(fù)用性的組件庫，即側(cè)重「庫」的層面而不是「個體」的層面——會講的是組件庫應(yīng)該涵蓋哪些類型的元素、每類元素在組件化時要考慮哪些方面、有哪些Tips需要注意，而不是一篇具體如何在Sketch中進行組件化的教程——當(dāng)然，如果有朋友對這個教程有興趣的話，后面有時間時我會考慮寫一寫。

因此，有Sketch使用基礎(chǔ)的同學(xué)閱讀本文應(yīng)該會更明白我在說什么，也更明白做出各種拆分的原因。但在組件庫中需要涵蓋的組件類型和拆分方式上，希望這篇文章對使用Axure、OG、AI、ID等工具設(shè)計交互稿的同學(xué)同樣有用。

組件庫的內(nèi)容

再優(yōu)秀的組件庫也沒法「一招鮮吃遍天」，何況Symbol數(shù)目過多會影響Sketch的流暢度。因此，一個全面的設(shè)計師或者一個優(yōu)秀的設(shè)計團隊，需要針對不同平臺和不同的產(chǎn)品類型準備不同的組件庫。

在準備針對某一產(chǎn)品類型的組件庫時，該類型的產(chǎn)品中那些口碑最好的競品，在設(shè)計規(guī)范方面自然是我們最寶貴的學(xué)習(xí)資源。例如下面這套組件庫的積累過程中，除了學(xué)習(xí)和參考iOS平臺的原生設(shè)計規(guī)范外，也部分參考了IM類的經(jīng)典產(chǎn)品——微信的設(shè)計規(guī)范。

下面，將基于我在實際項目中淺薄的個人經(jīng)驗，以其中一個iOS平臺下、適用于IM或內(nèi)容性平臺APP的組件庫作為例子，逐一介紹我認為比較常見和重要、也比較適合進行組件化的12類組件。

1. 頂部導(dǎo)航欄（含狀態(tài)欄）
2. 底欄
3. 鍵盤
4. 表單
5. 按鈕
6. 會話
7. 彈框
8. Toast
9. 上拉菜單（ActionSheet）
10. 發(fā)布
11. 內(nèi)容
12. Icon

1、頂部導(dǎo)航欄（含狀態(tài)欄）

• 建議同時準備淺色和深色兩套組件，絕大多數(shù)產(chǎn)品的需求在線框圖階段均可以通過這兩套方案滿足。
• 導(dǎo)航欄左端、右端的控件可以分別作為Symbol嵌套進導(dǎo)航欄，”加號/返回/搜索/拍照/用戶/更多“等圖標按鈕和文字按鈕可以方便地直接切換，而不用重繪整個導(dǎo)航欄。
• 導(dǎo)航欄主要需要考慮的形式包括：普通、最小化（頁面向下滾動后）、直接作為搜索欄、直接作為Tab控件等形式。
• 二級導(dǎo)航需要考慮不同形式的搜索欄（及其獲得焦點時的狀態(tài)）和Tab頁（一般同時準備分段式和標簽式兩種）。

2、底欄

• 同樣，建議同時準備淺色和深色兩套底欄，以應(yīng)對絕大多數(shù)產(chǎn)品的需求。
• 以四分式的底欄為例，4種不同激活狀態(tài)可以直接命名為4-1、4-2、4-3、4-4四個Symbol，繪制不同一級頁面時可以直接切換。
• 圖標建議單獨作為內(nèi)嵌Symbol，這樣在需要修改圖標時只要修改一個地方就可以實現(xiàn)全部更新。
• 紅點提醒同樣建議作為內(nèi)嵌Symbol，需要準備共4種狀態(tài)：一位數(shù)、兩位數(shù)、無數(shù)字（小紅點）、無。除了底欄外，產(chǎn)品中任何出現(xiàn)紅點提示的地方（例如聊天列表等）都可以直接嵌入這些Symbol，實現(xiàn)4種狀態(tài)間的快速切換。

3、鍵盤

• 一般以下11種鍵盤可以滿足大多數(shù)場景使用：默認鍵盤（Default）、密碼鍵盤（ASCIICapable）、數(shù)字符號鍵盤（NumbersAndPunctuation）、數(shù)字鍵盤（NumberPad）
  搜索鍵盤（Search）、小數(shù)鍵盤（DecimalPad）、推特鍵盤（Twitter）、文本數(shù)字鍵盤（NamePhonePad，特殊在于次鍵盤，主鍵盤與默認鍵盤相同）。
• 鍵盤的Enter按鈕可能有換行（Return）、搜索（Search）、完成（Done）、發(fā)送（Send）等多種可能，因此建議單獨拆出作為Symbol嵌套在鍵盤組件中，便于切換。
• 輸入條、輸入提示、表情面板（及相應(yīng)的分頁器）在同一產(chǎn)品內(nèi)也可以進行組件化處理。

4、表單

• 需要考慮的列表項類型：單行式，雙行式（帶副標題或描述文字）、文章摘要式（純文字/圖文式）、列表標題和腳注、”查看更多“項、輸入框（單行/多行，輸入前/輸入中/輸入后）、滑塊。
• 廣義而言，與社交相關(guān)的聯(lián)系人列表、聊天列表也是表單的一種，同樣可以歸為這類組件。
• 建議作為內(nèi)嵌Symbol單獨繪制的左端元素：文字前的icon（或空白縮進）、勾選控件（單選/多選，選中/未選中）、用戶頭像（單用戶頭像/群聊頭像）等。
• 建議作為內(nèi)嵌Symbol單獨繪制的右端元素：小箭頭（向右/向上/向下）、詳細信息（居左對齊/居右對齊）、各類圖標（如用于提示的”i“圖標、如輸入框的刪除圖標等）、開關(guān)控件（開/關(guān)，可用/不可用）、星級控件。
• 列表組內(nèi)，各項之間的分隔線都是有縮進的，第一項的上分隔線和最后一項的下分隔線除外。因此，這里特別建議的是將列表項的上分隔線、下分隔線也單獨繪制為內(nèi)嵌Symbol，每條分隔線都設(shè)置全寬（Full）、縮進90/30/20（Retract90/30/20）共4個子類，加上每個內(nèi)嵌Symbol都可以設(shè)置為None（不顯示）狀態(tài)，即可應(yīng)對一個列表項出現(xiàn)在一個列表組中時的任意情況。在Sketch提供Symbol內(nèi)嵌功能前，如果要準確地呈現(xiàn)分隔線，對每一類列表項都要繪制4種可能性：位于列表組首項、位于列表組末項、位于列表組中間項、自己單獨作為一個列表組（此時上下分隔線都是全寬的），而在這一重要功能更新后，只需要靈活切換上下分隔線的Symbol即可。
• 列表項如果支持左滑操作時，也可以對正常狀態(tài)和左滑狀態(tài)進行組件化處理。

5、按鈕

這里的按鈕特指容易組件化、也容易在各產(chǎn)品間復(fù)用的文字按鈕，而icon按鈕一般在設(shè)計相應(yīng)的產(chǎn)品時，在產(chǎn)品內(nèi)部相應(yīng)地制定規(guī)范即可。

對這類按鈕，按尺寸可以分為全寬、半寬、小型、表單式共4種，按功能樣式同樣可以分為主要操作、次要操作、警告操作、線型按鈕4種，按照以上兩個維度的組合，基本可以滿足一般產(chǎn)品中常見的文字按鈕需求。

6、會話

• 對話氣泡、時間戳、長按菜單均可以進行組件化處理。
• 對話氣泡需要考慮的情形：左還是右，行數(shù)和寬度（線框圖階段考慮一到兩行即可，其中兩行的寬度是穩(wěn)定的，而一行的寬度會隨字數(shù)變化）、頭像帶不帶用戶名（一般而言，右側(cè)也就是自己的頭像肯定是不帶用戶名的，而左側(cè)也就是對方的頭像，需要考慮帶用戶名和不帶用戶名的兩種情況）。圓角氣泡和小箭頭可以分別作為Symbol進行更靈活的組合。
• 時間戳：主要考慮的是不同字數(shù)對應(yīng)的寬度。
• 長按菜單：以一種常見的圓角水平菜單為例，最左項的左端和最右項的右端是有圓角的，中間項沒有圓角，而如果菜單只有一項時，左右兩端都有圓角，因此，可以將其拆分成最左項、最右項、中間項、全圓角共4類Symbol，同時小箭頭也作為一個Symbol，與菜單項自由組合。
• 文章推送也是一種會話的形式，同樣可以作為一個組件。

7、彈框

• 彈框需要考慮的情形：帶不帶標題、有幾行提示文字、有幾個按鈕、帶不帶圖片，對可能用到的彈框形式均可以設(shè)計相應(yīng)的Symbol。
• 遮罩層同樣可以作為一個組件，一般準備全屏遮罩層和露出導(dǎo)航欄的遮罩層2種即可。

8、Toast

常見的Toast形式需要考慮居中型（帶icon）、頂端型（帶icon）、底端型（純文字）三類。帶icon的Toast，在線框圖階段準備以下4類即可應(yīng)對絕大多數(shù)場景：成功型、失敗型、警告型和等待型。

9、上拉菜單（ActionSheet）

菜單標題、普通按鈕、取消按鈕、Gap（普通按鈕組與取消按鈕之間的間距）等Symbol即可組合出滿足大多數(shù)需要的ActionSheet。其中，普通按鈕需要考慮居中、居左、帶icon居左這三種形式，其中主文字居左時還要考慮右端是否有描述文字。

此外，導(dǎo)航欄”更多”按鈕調(diào)出的下拉菜單實際上也是可以考慮組件化的控件，但ActionSheet作為一個有平臺規(guī)范約束的控件，一致性和復(fù)用性較好，在設(shè)計師個人的組件積淀中更有組件化的價值，而對下拉菜單、分享菜單等其他形式，在有針對性地設(shè)計一個產(chǎn)品時再對其進行組件化設(shè)計也來得及。因此本文的介紹中暫不涉及這些菜單。

10、發(fā)布

• 這里主要指類似社交或內(nèi)容平臺中，編輯或用戶發(fā)布的卡片式Timeline，以微信、易信等IM中朋友圈模塊為例，看似這類模塊的情形較多、難以組件化，但如果仔細按行分解的話，無非是以下這些元素行的組合：頭像ID行、文字內(nèi)容行、鏈接內(nèi)容行、圖片內(nèi)容行（單圖、多圖）、時間地點信息行、互動控件行、點贊名單行（單行、多行）、評論行。

11、內(nèi)容

與在Axure中習(xí)慣用一個叉號表示圖片的占位符類似，這里實際上就是將這類圖片占位符根據(jù)產(chǎn)品需要，細化成多種更具體的類型，從而讓交互稿更有效地傳達設(shè)計師的意圖。

比較通用的可以考慮以下幾種：地圖、一般性照片（風(fēng)景等）、飲食、圖書、人物、統(tǒng)計圖表（柱狀圖、趨勢圖、餅圖）、用戶頭像，以及音視頻的播放器。其他的可以根據(jù)自己當(dāng)前產(chǎn)品的需要，自行添加。

12、Icon

當(dāng)做過的產(chǎn)品比較多時我們很容易感覺到，常見的icon無非界面、社交、電商支付、檔案、書影音、文字編輯、飲食、設(shè)備、交通、天氣等類型，如果隨時整理和積累，在新項目中找icon時，就可以不知不覺享受到信手拈來的快感。

一般而言，建議每個icon準備以下4類：淺色線性、淺色實心、深色線性、深色實心。

不過icon集不一定要全部放進項目的Symbol庫，尤其是當(dāng)積累了一定數(shù)目時，Symbol數(shù)量過大會顯著拖慢Sketch的響應(yīng)速度。因此更建議icon集單獨在一個文件中積累，項目需要時再按需選擇即可。

示例：用組件庫設(shè)計頁面

最后，基于第二節(jié)示例中的組件庫，簡單地舉幾個通過組件繪制頁面的小例子吧。頁面內(nèi)容本身不用細看，只是作為簡單的示例罷了。
以下界面的所有設(shè)計都是用上面介紹的組件完成的。組件中所有文本都可以直接改寫成設(shè)計中需要的內(nèi)容，內(nèi)嵌的Symbol也可以通過下拉列表方便地切換，更是大大提高了組件的使用效率。

1. 「聯(lián)系人」頁

   頂欄、底欄組件使用示例：
   

2. 「我的收藏」頁
   表單組件使用示例：
   
3. 「設(shè)置」頁
   彈框組件使用示例：
   
4. 「發(fā)現(xiàn)」頁
   發(fā)布組件使用示例：
   
5. 會話頁
   會話組件使用示例：
   

作者：Qinsman

本文由@Qinsman 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，請勿轉(zhuǎn)載。