前言
本篇文章來源于 Qinsman的個人博客灰伟，博客地址為 http://qinsman.com/1701_idkit/
由于博客圖片階段性無法打開查看渤涌，自己之前有保存茬故，已獲得作者同意戳鹅，特意分享出來供大家參考學習
也感謝 Qinsman的分享總結(jié)
這是一篇非常棒關(guān)于如何使用組件今妄，如何命名嵌套組件的指導(dǎo)手冊菲盾，對于模塊化設(shè)計颓影，組件思維有很大幫助指導(dǎo)，期望大家能夠?qū)W以致用懒鉴，不僅走馬觀花诡挂，實際用到自己項目中去。
引子
有一天临谱，當你幾乎完成了一個項目全套的交互設(shè)計稿后璃俗。
PM：「那個……把底欄第二和第三個Tab對調(diào)一下位置吧∠つ」
你嚇得坐到了地上：「為什么城豁！不是一個月前評審時就定好的嗎？」
PM嘆了口氣抄课，用八百字痛陳了客戶的壓力和他的歉意唱星。
你哭：「有200多個頁面要改，明天評審還來得及嗎跟磨？」
PM沒有說話间聊，只是同情地拍了拍你的肩膀……
——而如果你的導(dǎo)航欄是通過組件統(tǒng)一搭建的，完成這一改動只需要1秒抵拘。
1 什么是組件庫
1.1 組件庫的概念
組件庫就是界面設(shè)計常用控件或元素的集合哎榴，從某種意義上說，交互設(shè)計線框圖的組件庫比視覺設(shè)計階段的UI組件庫價值更高僵蛛。UI設(shè)計階段尚蝌，不同產(chǎn)品、不同項目的常用組件即使有共通之處墩瞳，也一定是不完全相同的驼壶。而在交互設(shè)計的線框圖階段，一個優(yōu)秀的組件庫可以同時在許多項目中發(fā)光發(fā)熱喉酌。
一個好的組件庫热凹，衡量標準主要包括靈活性泪电、復(fù)用性般妙、全面性。靈活性指一個組件的字段相速、icon碟渺、配色都應(yīng)該可以靈活改寫，以應(yīng)對多樣化的需求突诬。復(fù)用性指對于通用組件苫拍，應(yīng)當是可以在不同項目間復(fù)用的芜繁。全面性則指一套組件庫應(yīng)當覆蓋盡可能多的常用元素。
組件化的初衷并非提高一致性绒极、利于團隊合作這些高大上的目的骏令，而是人類進步的第一生產(chǎn)力——「懶」。消滅重復(fù)勞動是提高效率的主要途徑垄提，勤勞如小蜜蜂的設(shè)計師也不例外榔袋，那么組件化就是無論交互還是UI設(shè)計中我們不得不思考的問題。
雖然之前在回答一些新人的問題時铡俐，總是強調(diào)大家不要過分關(guān)注工具凰兑，對交互設(shè)計師而言，業(yè)務(wù)目標审丘、流程和信息架構(gòu)上的思考才是我們的核心價值所在吏够。但這不代表工具就不需要思考和積累，一把更鋒利的工具才能幫助我們把有限的時間和精力放在上面所說的核心思考上备恤，而不是淪為埋頭畫圖的線框仔稿饰。
因此，在猴年的最后一篇工作小結(jié)中露泊，我想和大家一起聊聊交互設(shè)計組件庫的問題。
1.2 復(fù)用性：組件庫的意義
上面說到組件化是源于「懶」旅择，并不是說組件化的作用僅限于簡化重復(fù)操作惭笑。除了提高設(shè)計師個人的設(shè)計效率這一顯而易見的好處之外，在交互設(shè)計階段對常見的元素控件進行組件化生真，還有很多更深層次的意義：
- 一致性「從娃娃抓起」：從交互稿階段開始沉噩，就讓整個項目的產(chǎn)出物具有高度的一致性，使用同一組件庫畫的每個頂欄柱蟀、每個列表川蒙、每個彈框都是遵循同一規(guī)則的。
- 與視覺設(shè)計無縫銜接：Sketch為交互設(shè)計和視覺設(shè)計階段的無縫銜接提供了最好的平臺长已，交互組件庫可以直接交付視覺設(shè)計師進行視覺設(shè)計畜眨，形成真正的UI組件庫（UI Kit）。
- 有助于形成設(shè)計規(guī)范：當UI組件庫形成后术瓮，「設(shè)計規(guī)范的積淀」——這個貫穿交互和UI設(shè)計管理工作中的老大難問題康聂，就已經(jīng)解決了一大半了，經(jīng)過評審確認的UI組件庫可以直接作為視覺設(shè)計規(guī)范的一部分胞四。
- 利于團隊合作：無論是交互設(shè)計組件庫還是UI組件庫恬汁，經(jīng)過整理和完善，在項目或者團隊中推行開來辜伟，對項目內(nèi)氓侧，或者不同項目間設(shè)計成果的一致性脊另、合作效率都大有裨益，也有助于讓整個品牌形成有效的辨識度约巷。
既然組件化有這么多的好處尝蠕，哪些元素可以進行組件化呢？其實很簡單载庭，凡是你覺得已經(jīng)重復(fù)畫了很多次的元素看彼，不同場景下都會用到的元素，都可以考慮將其單獨拿出來進行組件化囚聚。
1.3 靈活性：「Symbol套Symbol」
Sketch 41的一個讓設(shè)計效率產(chǎn)生質(zhì)變的更新就是Symbol可以內(nèi)嵌Symbol了靖榕，尺寸相同的符號可以在Symbol Override的下拉列表中直接選擇切換——想必大家已經(jīng)等這個功能很久了。
有了「Symbol套Symbol」的功能后顽铸，在組件化時進行合理的拆分和嵌套茁计，可以讓你做出一個很”聰明“的Symbol——可以幫你「以一敵十」的那種。
雖然在第一次建立Symbol時谓松，需要仔細考慮怎樣的拆分和嵌套是最有利于設(shè)計效率的星压，也許會覺得太費腦子，還不如直接畫多個Symbol方便鬼譬。但當一個通用性很強的Symbol通過各種內(nèi)嵌Symbol組合而成后娜膘，毫不夸張地說，你會發(fā)現(xiàn)它替代的是以往成十上百個Symbol的功能优质。
而當你為常用的控件制作并積累了許多這些高通用性的Symbol后竣贪，一套復(fù)用性極佳的組件庫庫逐漸積淀成型后，你一定會驚嘆于把一個方案構(gòu)想呈現(xiàn)在線框圖上原來可以這么快巩螃。
1.4 全面性：循序漸進的積累過程
在積累一個個的組件演怎，逐漸形成組件庫的過程中，不要想一下子做得非常全面避乏。組件庫的積累是一個不斷在項目中補充爷耀、維護和更新的過程。而且拍皮，即使一個資深的設(shè)計師經(jīng)過幾年的工作也很難說能積累出絕對「全面」的組件庫歹叮，每個項目都有各自的特色，一個能幫我們解決70%問題的組件庫已經(jīng)算得上是復(fù)用性很棒的了春缕。
同時盗胀，Sketch的Symbol可以通過命名中的「/」符號自動形成目錄結(jié)構(gòu)，這有助于使用組件庫的設(shè)計師快速找到想要的組件锄贼，也有助于制作或維護組件庫的人隨時審視一個類型的組件是否有重復(fù)或者不完善的情況票灰。
1.5 讓我們開始吧
本文將主要介紹如何構(gòu)建一套具有復(fù)用性的組件庫，即側(cè)重「庫」的層面而不是「個體」的層面——會講的是組件庫應(yīng)該涵蓋哪些類型的元素、每類元素在組件化時要考慮哪些方面屑迂、有哪些Tips需要注意浸策，而不是一篇具體如何在Sketch中進行組件化的教程——當然，如果有朋友對這個教程有興趣的話惹盼，后面有時間時我會考慮寫一寫庸汗。
因此，有Sketch使用基礎(chǔ)的同學閱讀本文應(yīng)該會更明白我在說什么手报，也更明白做出各種拆分的原因蚯舱。但在組件庫中需要涵蓋的組件類型和拆分方式上，希望這篇文章對使用Axure掩蛤、OG枉昏、AI、ID等工具設(shè)計交互稿的同學同樣有用：）
2 組件庫的內(nèi)容
再優(yōu)秀的組件庫也沒法「一招鮮吃遍天」揍鸟，何況Symbol數(shù)目過多會影響Sketch的流暢度兄裂。因此，一個全面的設(shè)計師或者一個優(yōu)秀的設(shè)計團隊阳藻，需要針對不同平臺和不同的產(chǎn)品類型準備不同的組件庫晰奖。
在準備針對某一產(chǎn)品類型的組件庫時，該類型的產(chǎn)品中那些口碑最好的競品腥泥，在設(shè)計規(guī)范方面自然是我們最寶貴的學習資源匾南。例如下面這套組件庫的積累過程中，除了學習和參考iOS平臺的原生設(shè)計規(guī)范外道川，也部分參考了IM類的經(jīng)典產(chǎn)品——微信的設(shè)計規(guī)范午衰。
下面，將基于我在實際項目中淺薄的個人經(jīng)驗冒萄，以其中一個iOS平臺下、適用于IM或內(nèi)容性平臺APP的組件庫作為例子橙数，逐一介紹我認為比較常見和重要尊流、也比較適合進行組件化的12類組件。
- 頂部導(dǎo)航欄（含狀態(tài)欄）
- 底欄
- 鍵盤
- 表單
- 按鈕
- 會話
- 彈框
- Toast
- 上拉菜單（ActionSheet）
- 發(fā)布
- 內(nèi)容
- Icon
2.1 頂部導(dǎo)航欄（含狀態(tài)欄）
- 建議同時準備淺色和深色兩套組件灯帮，絕大多數(shù)產(chǎn)品的需求在線框圖階段均可以通過這兩套方案滿足崖技。
- 導(dǎo)航欄左端、右端的控件可以分別作為Symbol嵌套進導(dǎo)航欄钟哥，”加號/返回/搜索/拍照/用戶/更多“等圖標按鈕和文字按鈕可以方便地直接切換迎献，而不用重繪整個導(dǎo)航欄。
- 導(dǎo)航欄主要需要考慮的形式包括：普通腻贰、最小化（頁面向下滾動后）吁恍、直接作為搜索欄、直接作為Tab控件等形式。
- 二級導(dǎo)航需要考慮不同形式的搜索欄（及其獲得焦點時的狀態(tài)）和Tab頁（一般同時準備分段式和標簽式兩種）冀瓦。
2.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)間的快速切換西雀。
2.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)也可以進行組件化處理甚疟。
2.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)進行組件化處理衰粹。
2.5 按鈕
- 這里的按鈕特指容易組件化、也容易在各產(chǎn)品間復(fù)用的文字按鈕笆怠，而icon按鈕一般在設(shè)計相應(yīng)的產(chǎn)品時铝耻，在產(chǎn)品內(nèi)部相應(yīng)地制定規(guī)范即可。
- 對這類按鈕蹬刷，按尺寸可以分為全寬瓢捉、半寬、小型办成、表單式共4種泡态，按功能樣式同樣可以分為主要操作、次要操作迂卢、警告操作某弦、線型按鈕4種，按照以上兩個維度的組合而克，基本可以滿足一般產(chǎn)品中常見的文字按鈕需求靶壮。
2.6 會話
- 對話氣泡、時間戳拍摇、長按菜單均可以進行組件化處理亮钦。
- 對話氣泡需要考慮的情形：左還是右，行數(shù)和寬度（線框圖階段考慮一到兩行即可充活，其中兩行的寬度是穩(wěn)定的蜂莉，而一行的寬度會隨字數(shù)變化）、頭像帶不帶用戶名（一般而言混卵，右側(cè)也就是自己的頭像肯定是不帶用戶名的映穗，而左側(cè)也就是對方的頭像，需要考慮帶用戶名和不帶用戶名的兩種情況）幕随。圓角氣泡和小箭頭可以分別作為Symbol進行更靈活的組合蚁滋。
- 時間戳：主要考慮的是不同字數(shù)對應(yīng)的寬度。
- 長按菜單：以一種常見的圓角水平菜單為例赘淮，最左項的左端和最右項的右端是有圓角的辕录，中間項沒有圓角，而如果菜單只有一項時梢卸，左右兩端都有圓角走诞，因此，可以將其拆分成最左項蛤高、最右項蚣旱、中間項碑幅、全圓角共4類Symbol，同時小箭頭也作為一個Symbol塞绿，與菜單項自由組合沟涨。
- 文章推送也是一種會話的形式，同樣可以作為一個組件异吻。
2.7 彈框
- 彈框需要考慮的情形：帶不帶標題裹赴、有幾行提示文字、有幾個按鈕涧黄、帶不帶圖片篮昧，對可能用到的彈框形式均可以設(shè)計相應(yīng)的Symbol。
- 遮罩層同樣可以作為一個組件笋妥，一般準備全屏遮罩層和露出導(dǎo)航欄的遮罩層2種即可懊昨。
2.8 Toast
- 常見的Toast形式需要考慮居中型（帶icon）、頂端型（帶icon）春宣、底端型（純文字）三類酵颁。
- 帶icon的Toast，在線框圖階段準備以下4類即可應(yīng)對絕大多數(shù)場景：成功型月帝、失敗型躏惋、警告型和等待型。
2.9 上拉菜單（ActionSheet）
- 菜單標題嚷辅、普通按鈕簿姨、取消按鈕、Gap（普通按鈕組與取消按鈕之間的間距）等Symbol即可組合出滿足大多數(shù)需要的ActionSheet簸搞。其中扁位，普通按鈕需要考慮居中、居左趁俊、帶icon居左這三種形式域仇，其中主文字居左時還要考慮右端是否有描述文字。
- 此外寺擂，導(dǎo)航欄”更多”按鈕調(diào)出的下拉菜單實際上也是可以考慮組件化的控件暇务，但ActionSheet作為一個有平臺規(guī)范約束的控件，一致性和復(fù)用性較好怔软，在設(shè)計師個人的組件積淀中更有組件化的價值垦细，而對下拉菜單、分享菜單等其他形式挡逼，在有針對性地設(shè)計一個產(chǎn)品時再對其進行組件化設(shè)計也來得及蝠检。因此本文的介紹中暫不涉及這些菜單。
2.10 發(fā)布
- 這里主要指類似社交或內(nèi)容平臺中挚瘟，編輯或用戶發(fā)布的卡片式Timeline叹谁，以微信、易信等IM中朋友圈模塊為例乘盖，看似這類模塊的情形較多焰檩、難以組件化，但如果仔細按行分解的話订框，無非是以下這些元素行的組合：頭像ID行析苫、文字內(nèi)容行、鏈接內(nèi)容行穿扳、圖片內(nèi)容行（單圖衩侥、多圖）、時間地點信息行矛物、互動控件行茫死、點贊名單行（單行、多行）履羞、評論行峦萎。
2.11 內(nèi)容
- 與在Axure中習慣用一個叉號表示圖片的占位符類似，這里實際上就是將這類圖片占位符根據(jù)產(chǎn)品需要忆首，細化成多種更具體的類型爱榔，從而讓交互稿更有效地傳達設(shè)計師的意圖。
- 比較通用的可以考慮以下幾種：地圖糙及、一般性照片（風景等）详幽、飲食、圖書浸锨、人物唇聘、統(tǒng)計圖表（柱狀圖、趨勢圖揣钦、餅圖）雳灾、用戶頭像，以及音視頻的播放器冯凹。其他的可以根據(jù)自己當前產(chǎn)品的需要谎亩，自行添加。
2.12 Icon
- 當做過的產(chǎn)品比較多時我們很容易感覺到宇姚，常見的icon無非界面匈庭、社交、電商支付浑劳、檔案阱持、書影音、文字編輯魔熏、飲食衷咽、設(shè)備鸽扁、交通、天氣等類型镶骗，如果隨時整理和積累桶现，在新項目中找icon時，就可以不知不覺享受到信手拈來的快感鼎姊。
- 一般而言骡和，建議每個icon準備以下4類：淺色線性、淺色實心相寇、深色線性慰于、深色實心。
- 不過icon集不一定要全部放進項目的Symbol庫唤衫，尤其是當積累了一定數(shù)目時婆赠，Symbol數(shù)量過大會顯著拖慢Sketch的響應(yīng)速度。因此更建議icon集單獨在一個文件中積累战授，項目需要時再按需選擇即可页藻。
3 示例：用組件庫設(shè)計頁面
最后，基于第二節(jié)示例中的組件庫植兰，簡單地舉幾個通過組件繪制頁面的小例子吧份帐。頁面內(nèi)容本身不用細看，只是作為簡單的示例罷了楣导。
以下界面的所有設(shè)計都是用上面介紹的組件完成的废境。組件中所有文本都可以直接改寫成設(shè)計中需要的內(nèi)容，內(nèi)嵌的Symbol也可以通過下拉列表方便地切換筒繁，更是大大提高了組件的使用效率噩凹。
- 「聯(lián)系人」頁
頂欄、底欄組件使用示例
- 「我的收藏」頁
表單組件使用示例
- 「設(shè)置」頁
彈框組件使用示例
- 「發(fā)現(xiàn)」頁
發(fā)布組件使用示例
- 會話頁
會話組件使用示例
