組件庫 | UI設計師必會的組件系統!
組件庫是一個強大的提效工具,運用的號能夠最大程度地提高我們的工作效率,從設計規范到組件庫,再到開發還原,組件庫搭建了一座橋梁。本文將從組件庫的概率、重要性、構建思維及構建流程等多方面深度解析,希望對大家有所幫助。
在設計系統中,大家最熟悉、最常用的應該就是設計組件了,它包括文字、圖標、按鈕、輸入框、表單…等一系列構成界面的小元素,而這些小元素的結合體就是筆者要講的組件庫。
合理使用組件庫能保持界面視覺效果的一致性,讓開發高度還原,還為業務帶來一致的設計語言,大大提高了團隊的工作效率。本文將從組件庫的概率、重要性、構建思維及構建流程等多方面深度解析,希望能幫到大家。
一、組件庫的基礎知識
1. 為什么需要組件庫
當我們在設計某個界面的表單時,確定好輸入框的大小、描邊、色值等屬性后,并沒有形成可復用的組件,那么在后續其他界面中需要再次用到表單,就只能重新畫、或者找到之前已做好的界面拷貝,很容易疏忽數值、混淆屬性,出錯率極高。如果需要統一調整尺寸或色值,就要每個單獨修改,對于稍大點(上百或幾百個界面表單排查)的項目來說,重復無功的勞動簡直是一場災難。
不難看出,一次性設計會將設計師淪為只忙于畫圖的工具人。若事先將已有組件形成組件庫直接調用,既能提高設計輸出效率、也能確保整體視覺效果的統一性,將省出來的時間更多投入到業務需求思考中,提升設計價值。
2. 什么是組件庫
組件庫是將界面中具有通用性的元素組件/控件進行歸納整理,形成統一規范的組件集合,以此達到快速復用、批量修改的目的。
組件庫是一個強大的工具庫,方便設計師隨時調用,對其中一個元素的修改都會將這個已調用過的組件同步更新,非常利于團隊之間協作,它通過清晰、標準化的引導幫助設計師和研發高效一致的創建大量應用,確保了用戶體驗的一致性。
3. 結合原子方法論
在2013年,前端開發工程師 Brad Forst 在《Atomic Design》一書中提到:“化學世界中,所有的物質都是由原子構成,原子組合構成分子,分子組合構成有機物,最終形成宇宙萬物”。Brad Forst認為,設計組件應該由原子、分子、組織、模版、界面5個內容層面構成,最終構建成一張完整的產品界面。
- 原子:構成界面的最基礎且不可再分的元素,可以是一種顏色、一種字體或一個圖標等。
- 分子:由兩個或兩個以上的原子組合在一起、具有明確功能性的組件,如搜索框、表單、按鈕等。
- 組織:將多個不同的分子組合在一起,形成一個完整的功能模塊,例如不同的信息版塊區域。
- 模版:通過原子、分子、組織的相互關聯而得到的模版框架,如列表頁、詳情頁等。
- 頁面:在模版的基礎上提供真實的內容并完善細節,最終形成完整的高保真界面。
關于原子方法論,這里只做簡單了解,后續會單獨出詳細的文章。
二、組件庫的作用
1. 保持一致性
在一個產品中,每個業務都要基于不同的場景去傳達信息,多樣化的場景在設計表現上會有所不同,有了組件庫的約束,就能讓團隊在既定的框架內按照統一的規范做設計,確保了輸出質量,給用戶帶來一致性的體驗。
2. 新人低成本
當團隊中有新成員加入時,不管是初入職場的設計新人、還是經驗豐富的設計老手,正式工作之前都需要花費一定的時間成本去了解項目的設計語言,而后才能跟上工作節奏,但有了成熟的組件庫作為設計參考,就能夠以最低的溝通成本、試錯成本實現快速上手。
3. 提升團隊效率
對設計師,當產品中有多個頁面使用到相同的元素或組件時,可從組件庫直接調用,減少重復性設計。對于某個組件有統一修改的需求,只要在組件庫單獨修改,已共用的組件即可同步更新,實現效率的飛升。
對開發,可以將一些常用的組件樣式進行封裝,在任何頁面有需要時直接調用,減少冗余,優化性能,既能降低不必要的工作量以及軟件包的體積,還能減少與設計之間的溝通,提升了開發效率,后期的維護也會更方便。
4. 穩固品牌形象
品牌基因的部分板塊如顏色、字體、圖標風格…等都屬于組件庫的一部分,一致性的視覺樣式能保持設計風格的統一,給用戶帶來統一的品牌印象,讓其更好的記住這個產品。
5. 遵守用戶習慣
盡量不要違背用戶的慣性思維,如綠色代表安全或通過、紅色代表錯誤或警告、看到放大鏡就想到搜索,除非合理的制造差異化或你的產品體量足以改變用戶,否則就做好承擔用戶試錯成本的損失。組件化設計能通過一致性的設計表現保持用戶固有的使用習慣,減少不必要的思考。
三、元素組件的構成
1. 顏色
顏色作為產品設計風格的基本元素,它能建立符合產品調性的視覺形象,并將界面中各信息層級關系梳理清晰,做到視覺上的平衡。首先我們需要按照功能屬性對需要用到的所有顏色進行定義,比如主體色、輔助色、中性色、功能色等,并以此提煉出漸變色和色階,然后將其分組分類命名,方便隨時調用。
2. 文字
文字樣式中主要包括字體、字號、字重和行高,針對不同的使用場景分別創建相應的字號與字重,并給文字梯度和屬性的使用方式予以描述,用表格整理歸類,再加上對應的使用說明。
其他如段間距、字距、縮進、對齊方式等屬性使用的較少,可根據實際情況而定,確定好使用頻率后再決定是否納入組件庫。
3. 圖標
繪制圖標時,需用keyline柵格來控制不同形狀的圖標大小,完成后并將其轉曲(面性),再定義好常用的顏色,在后續的開發過程中,程序可根據高保真效果圖隨時切換顏色。
4. 基礎組件
參考上述提到的原子方法論,將各個獨立元素如原子、分子、組織形成各種組件,在將這些組件進行組合、逐層嵌套,精細化整理歸類,最終形成基礎組件的創建。例如按鈕、彈窗、表單、選項控件等。
四、組件庫構建思維
1. 理解產品結構
理解產品結構可以幫助設計師快速構建組件庫的基本框架,以此為基礎對組件作出分類及權重排序。
其次不同的業務屬性,對界面布局的影響也會很大,但相同業務的結構布局基本大同小異,其組件復用性極高,并非設計師不想做差異化,而是在同行業中,相同的業務屬性對多數用戶來說已經有了一個較為成熟的結構布局,較大的變化會違背用戶常用習慣,從而導致用戶反感,得不償失,所以通過對產品結構的了解,會將更多的差異化放在組件細節上,用戶接受程度會更高。
2. 組件整理歸類
在UI層面上,可以將組件分為原生組件、擴展組件、自定義組件、封裝組件四種,原生組件與擴展組件屬于系統(Android & iOS & 小程序)自帶,將其歸類為基礎組件,自定義組件和封裝組件與產品功能有較強的關聯性,因此成為屬性組件。明確兩種定義,能幫助我們合理規劃構建組件庫的前期工作,也有利于后期調用。
原生組件:系統本省自帶的組件,例如按鈕、彈窗、導航欄等。
擴展組件:基于原生組件進行擴展,例如toast彈窗中加入圖標、導航欄中增加功能入口等。
自定義組件:忽略系統本身的組件,設計出具備產品特性的任何組件,如商品列表等。
封裝組件:根據產品使用常見,進行組合封裝的常用復雜組件,如日歷組件等。
3. 結構細分
結構細分是將本身獨立的組件打散,拆分至單一元素的最小顆粒(原子),充分提高細小組件的復用率,需要修改時,獨立調整、全局響應,而后再次整合重組,讓不同的模塊都可以交替變化。多次使用拆分、重組的方式,使最終呈現出來的組件樣式、數量成倍數增長。
4. 命名規則
合理的命名是整理和維護組件庫的重要環節之一,一方面使后續的維護更加井井有條,另一方面能卻確保已形成的組件便于設計索引與調用,如若沒有一套所謂「正確」的命名規則,即便構建組件庫的人能信手拈來,但并不符合團隊中其他成員的使用習慣,無法快速調用,最終很難達成設計共識。
整理歸類后,每一類都包含若干組件,每個組件又有若干狀態,為了體現結構層次,會在組件名稱中使用“/”(Sketch能自動識別“/”)符號分隔場景類別,并以此作為標志逐級命名,如下:
- 按鈕/主操作/大按鈕/待激活
- 按鈕/主操作/小按鈕/可操作
- 表單/輸入框/初始狀態
- ……
五、常見問題及注意事項
1. 先易用、再復用
不管是多么復雜的產品,呈現給用戶的永遠都是優秀的界面和體驗設計,而背后則是邏輯復雜的的無數行代碼。組件也是一樣,不要因為有組件庫的存在就萌生偷懶的想法,毫無節制、退而求其次的高度復用,針對特殊場景,在符合產品易用性的前提下,有必要將已復用的組件解除關聯,適當的做加/減法,也不要盲目的求復雜度或簡約性,合適最好。
2. 不要過于糾結命名
在構建組件庫的過程中,不要將過多的時間花費在組件命名上,筆者的建議是用一些通俗易懂且常用的名稱,怎么方便怎么來,類似按鈕、表單、圖標、彈窗等這些術語,基本一聽就懂,沒必要絞盡腦汁去想一些唬人、高大上的專業名詞,畢竟組件庫不是你一個人在用。
3. 組件與創意的沖突
部分設計師覺得,有了組件庫的存在,感覺拼組件就能快速完成設計需求,不僅自己沒有進步還影響設計創意。其實不然,組件是為解決設計中遇到復用性高的重復性設計需求,如字體、配色、表單等,但在一些圖形、動效、背景及界面氛圍方面可以做出亮點,這樣既能保持常用組件的一致性,又能為用戶制造意外的驚喜,所以組件庫與設計創意并沒有實質性的沖突。
4. 利用間歇維護和更新
眾做周知,項目是按照一個一個版本逐漸更新迭代的,我們可以利用每個版本之間的間隔時間去復盤之前的設計組件,不斷優化和完善組件細節,進行更新維護,避免過于陳舊影響設計效果。
六、結語
組件庫是一個強大的提效工具,充分理解并合理運用能減少很多體力勞動,從設計規范到組件庫,再到最終的開發還原,為設計與開發之間搭起了一座新的橋梁。
組件庫的建立讓內部有了統一的標注,對團隊來說,工作效率得到顯著提升的同時,一致性也得到了保障,讓設計和開發將更多時間放在打磨產品細節上,實現設計向產品賦能。
從全局考慮,完成組件庫只不過才剛剛開始,我們一定要學會整體思考,持續優化和完善組件,讓組件庫始終處于最佳狀態,將作用發揮到最大。
組件/規范系列文章至此結束,后續將不再更新,全系列共24篇,內容較為基礎,歡迎初/中級設計師隨時預覽。
專欄作家
大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。
本文原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
真不錯(蒼蠅搓手)
灌水