PM：「那個(gè)……把底欄第二和第三個(gè)Tab對調(diào)一下位置吧。」

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

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

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

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

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

什么是組件庫

1、組件庫的概念

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

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

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

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

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

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

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

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

3、靈活性：「Symbol套Symbol」

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

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

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

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

4、全面性：循序漸進(jìn)的積累過程

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

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

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

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

組件庫的內(nèi)容

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

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

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

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

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

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

2、底欄

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

3、鍵盤

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

4、表單

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

5、按鈕

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

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

6、會(huì)話

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

7、彈框

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

8、Toast

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

9、上拉菜單（ActionSheet）

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

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

10、發(fā)布

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

11、內(nèi)容

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

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

12、Icon

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

一般而言，建議每個(gè)icon準(zhǔn)備以下4類：淺色線性、淺色實(shí)心、深色線性、深色實(shí)心。

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

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

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

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

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

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

作者：Qinsman

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