必讀!使用者體驗設計指南 - KIT元件庫一站式體驗搭建

語言: CN / TW / HK

最近完成了一個公司的新專案,藉此和大家分享一些產品KIT元件庫搭建的經驗。翻閱了很多資料,大多都是介紹元件思維文章,卻很少看到真正講解從0-1、從軟體到實踐一步步如何搭建元件庫的文章。元件庫的搭建還是要從基礎開始夯實,就像建造大樓的地基,前期規則的制定和細節的把控也會為後期元件庫維護提高效率。

本文將從理論到實踐,從軟體到外掛,再到不同應用場景拆解和團隊協同的重構,一步步教你如何搭建產品KIT元件庫。也給大家帶來逆天的Anima外掛教程,元件化設計的必備外掛,目前國內還比較少有文章講到。手把手!嘴對嘴!堪稱全網最細保姆級教程!

01. 什麼是KIT元件庫?

一個成熟的設計團隊,都會為產品制定設計規範,搭建產品KIT元件庫,元件化思維也是設計師的必備思維之一。元件庫會讓團隊協作變得高效且一致,讓團隊成員專注於深耕體驗和細節,實現設計向產品賦能。極大的節省設計和開發成本,優化使用者在介面流轉間的感知差異體驗。

KIT元件庫本質上是一個集合的Sketch檔案,由原子、分子、組織、模板、頁面組成。原子理論支撐可複用、可修改、易於協同和維護。

由Google推出的當時媲美蘋果全新設計語言的Material Design,Material Design也是最為經典元件庫設計。現如今阿里的Ant Design和Element給我們提供了一套完整可複用的元件庫。

02. 為什麼要搭建元件庫?

(1)統一(Unified)

1. 團隊不同成員或新來設計師之間協同配合,保證輸出的一致性和穩定性。

2. 統一的元件庫樣式,會減輕使用者在頁面流轉間的疑惑感和理解成本,使使用者體驗得到了提高。

(2)效率(Efficientcy)

1. 減少相同模組的重複設計。一個產品功能流轉、頁面互動必定會涉及到大量的重複設計的樣式與元件。試想一下,如果每一個都重新設計將是一個巨大的時間成本浪費。

2. 如果從產品的全生命週期來看,搭建好設計中臺KIT元件庫,並與開發進行溝通,能減少前端開發樣式,將時間更多的放在功能互動體驗和專案推動上,極大提高了效率。

(3)協同(Together)

1. 建立完善的設計規範和KIT元件庫,提高元件庫優化迭代效率。元件庫團隊協同自動更新。

2. KIT元件庫一鍵修改,也可通過元件分離功能(解綁)單獨對樣式進行修改,工作中需要對設計反覆調整打磨,可進行批量一鍵更改,單個模組的單獨修改。

03. 什麼時候搭建元件庫?

什麼時候時候搭建元件庫?先定義規範都是扯淡!所謂實踐才是檢驗真理的唯一標準,“在設計開始之前就制定設計規範,是不切實際的做法,你會發現做好的規範在實際操作中是無用且白費精力的”摘自《破繭成蝶 使用者體驗設計師的成長之路》。所以元件庫中的元件必定是經過反覆修改後適合產品以及可後期可複用的。

並不是所有的設計都需要做設計規範或者KIT元件庫。元件庫的搭建本身就是一個耗費時間人力的事情,如果是一次性專案那根本就沒有必要做元件庫了。是否需要建立樣式或元件取決於該樣式或元件在後續的工作中是否會被複用或複用的頻次。也會減少前端工程師重複開發CSS樣式以及後臺資料的封裝成本。

04. 原子設計理論

原子設計是將介面設計中最小元素——原子,組合巢狀為分子、組織、模板、頁面的系統規範化設計過程。

1.  原子 Atoms

原子Atoms,我們知道是指化學反應不可再分的基本微粒。原子在化學反應中不可分割,但在物理狀態中可以分割的。原子由原子核和繞核運動的電子組成,所以原子是構成物質的最小粒子這就不對了。

但在介面設計中我們所說的原子是構成介面的最小顆粒度元素,在設計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖示、分割線等。

2. 分子 Molecules

由原子按照一定的規律和目的組成的部分為分子,在介面設計中比如Button按鈕、swittch開關、非模態彈窗Toast等,可以理解為比較簡單的小元件。

3. 組織 Organisms

將不同的分子與原子組合就組成了組織。比如頭像與資訊組成的聯絡人容器卡片、Table列表、Nav-bar、Tab-bar等等。

4. 模板 Templates

將組織與分子、原子進行特定的組合就形成了模板。這一步已經能展示介面的主要功能和互動了。一般這一步得到的結果就是我們日常工作中的原型圖,產品的大致形態也慢慢清晰。所以模板可以理解成未上色的介面。

5. 頁面 Pages

最終輸出的高保真設計圖即為我們說的表現層的頁面Pages。將模板填充資訊和圖片內容,就得到了高保真設計介面。

03. KIT元件庫搭建過程詳解

以最近做的一個NFT專案為例子,展示具體搭建細節的全過程。

1.  命名規範

命名按照:一級分類 / 二級分類 / 三級分類 。例如:一級標題樣式/蘋方/常規/灰階0

其中 “/” 為層級結構分隔符,Sketch會自動識別。元件庫的搭建需要按照層級規範命名,從最外層到最內層,就像一個抽屜,每一層都對應放著東西。規範的命名會使後期呼叫維護、團隊協同變得清晰高效。

2. 樣式

(1)顏色樣式

我們設計一般都需要定義顏色樣式,一般有主色調(Main tone)、輔助色(Minor)、漸變色(Gradient)、字型的灰階度(Gray scale)等。選中你需要建立樣式的顏色,點選「外觀 - 建立」,在輸入框內輸入層級規範命名。

(2)文字樣式

定義文字樣式,文字具有字型、大小、字重、灰階等屬性,選中文字,點選【外觀-新建】,在輸入框內輸入層級規範命名。

(3)樣式切換

當我們需要切換一個定義好的文字樣式時,比如從“閱讀文字樣式”更換為“一級標題樣式”,只需要選中文字 - 點選「當前文件」下定義的文字樣式 - 點選需要更改的文字樣式即可。

(4)樣式修改 - 解綁與更新

當我們需要對定義好的文字樣式進行修改時,比如在設計的過程中突然感覺"閱讀文字樣式"字型小了點,為了優化閱讀體驗需要增大字號。

1. 單個修改 - 解綁

將文字調整更改為你需要的大小或字重,此時只對單個文字修改,不對其他文字產生影響,點選解綁,便可與定義好的樣式分離。

2. 整體同步 - 更新

將文字調整更改為你需要的大小或字重,樣式名稱後會出現 "*" 星號,此時代表未儲存,且更新按鈕啟用,點選更新按鈕則所有使用該樣式的欄位都會更改,整體同步更新。

3. 元件

元件是將元素定義為標準化可複用的集合體,對元件進行規範的命名,形成高效設計的KIT元件庫。

(1)文字元件

選中我們需要定義的文字欄位,注意!根據實際應用場景選擇合適的文字對齊方式,否則修改欄位資訊是會出錯。這裡文字選擇左對齊,點選 「建立控制元件」- 按照層級規範命名,選擇從左往右佈局 - 點選 「覆蓋層」即可對文字欄位內容進行修改。

(2)標籤元件

1. 單個標籤

當設計完標籤後,對標籤建立元件。依次選中便籤中的文字“LIMIT”、“2000份”,依次將文字選擇左對齊,步驟同上。將整個標籤打組,點選 「建立控制元件」- 按照層級規範命名,選擇從左往右佈局(這裡注意!從左往右佈局表示標籤在更改欄位資訊後,便籤左邊固定不動,從左往右自適應) - 在覆蓋層修改文字欄位資訊,庫存標籤元件自適應。

2. 標籤修改

如果我們覺得這個庫存標籤設計的不滿意,或者還需新增倒計時標籤、已售標籤,那怎樣又該怎麼做的?

第一步:這時我們新建一個Sketch檔案,命名為「 *** KIT 元件庫」。選中標籤圖示複製,將圖示貼上到新建檔案內,注意!此時需要給圖示新增合適的畫板,並按規範命名。

第二步:將Sketch檔案儲存到桌面,拖動到「首選項-元件庫」內。

第三步:選中元件,回車可進入控制元件(元件)頁面,可直接呼叫定義好的控制元件,進行修改。

Tips:這裡畫板的作用是

(1)畫板是用來規範固定元件位置和大小的,成套系的KIT Library需要建立畫板。

(2)畫板元件在建立後,呼叫時只固定大小和邊界。

(2)如果只是做較少的介面,較少的複用的樣式,就可以不用做畫板。

3. 多個標籤

當頁面需要不止一個標籤時,就需要新增標籤,通常為左右或上下佈局。若直接增加一個標籤修改欄位,文字標籤不會自適應。 和之前操作一致,將新建的標籤新建元件後,可實現標籤文字自適應。

4. Sketch素材呼叫

繼續新增商品作者元件、價格元件。點選右邊覆蓋層可修改文字欄位。點選文字右邊小icon可呼叫Sketch自帶的資料。

(3)容器元件整合

將前面定義好的所有元件整合到容器中,形成可直接複用的商品資訊容器元件。

第一步:呼叫定義好的閱讀文字樣式,注意!直接拖過來即可,文字框的長度左右拉到合適的左右間距,這裡不需要動文字框的高度,否則會出錯。將底部容器(卡片)的收起到合適的高度

第二步:選中整體打組,建立元件。注意! 此時選擇從上向下佈局。

第三步:選中整體,在右側覆蓋層可對文字進行編輯,輸入文字欄位,此時容器高度實現自適應。

(4)元件的拆解與重構

頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合巢狀重構為組織、模板和頁面。

(5)Anima外掛

如果上下同時有卡片的情況該怎麼呢? 當然,我們完全可以將它們一起定義元件,但有沒有其他更便捷,更靈活的方法呢?這裡跟大家介紹Anima外掛的使用,會使得大家在搭建元件庫時變得更加靈活高效。

Anima外掛為一款線上自動響應式的外掛,其中的STACK與PADDING功能簡直是Sketch設計必備,簡直逆天。

1. PADDING功能

新建一個文字,當點選PADDING後,會自動生成一個底板,選中底板可對其進行編輯,更改顏色、原角度等。在PADDING輸入框內可輸入距離上下左右的邊距。此時注意文字的對其方式,左對齊一般適合標籤使用較多,而居中對齊適合一般的居中按鈕,如立即支付、立即報名等。

2. STACK功能

將三個標籤分別打組,再全選整體打一個組,點選STACK,選擇左右排版和居中對齊,輸入你需要的間距。此時Anima外掛最牛的STACK功能就是可以雙擊選中任一個標籤,拖拽可改變排列順序,鬆手後還可以自適應。

06. 團隊協同

將元件都定義在新建的Sketch檔案中,將檔案發給你的團隊其他成員。步驟同上。

第一步:新建一個Sketch檔案,命名為「 *** KIT元件庫」,將元件都建立在新建檔案內。

第二步:將Sketch檔案傳送給團隊其他成員,拖動到Sketch「首選項-元件庫」內。

第三步:直接呼叫定義好的元件。

共享元件庫個人使用 Sketch Cloud,但元件庫有更新Sketch右上角會有提示,及時溝通更新即可。

07. 總結

以上為最近專案的一些基本元件的搭建全過程,由於專案涉密做了脫敏處理,因此只做部分展示,基本囊括了大家設計中常見的元件定義方法和原理。希望大家能夠靈活運用,觸類旁通、舉一反三,也希望給大家一些幫助和啟發。

需要Anima外掛的小夥伴可留下郵箱地址,我會發給你呦~

Powered by Froala Editor