如何著手做好ui的設(shè)計系統(tǒng)?

隨著數(shù)字產(chǎn)品逐漸成熟,許多知名企業(yè)為了加速開發(fā)流程,導入設(shè)計系統(tǒng)的觀念,讓產(chǎn)品團隊目標一致。

1. 檢視目前開發(fā)流程

在了解設(shè)計系統(tǒng)(Design System)前,可以運用這三大問題檢視目前流程。不論你是開發(fā)者或是設(shè)計師,是否曾經(jīng)遇過以下情況:

a. 沒有效率的開發(fā)流程

設(shè)計團隊里的資源不透明,一而再,再而三重復設(shè)計相同的元素,增加設(shè)計投入成本(人力及時間)。

圖1. 重復設(shè)計界面浪費設(shè)計師/開發(fā)者的時間跟精力

 

b. 不一致的界面元素/互動體驗

由于快速的開發(fā)過程,或是時間緊湊,導致在設(shè)計時沒有考慮規(guī)?;?、或者沒有時間測試就將產(chǎn)品推入市場。不一致的元素會讓用戶產(chǎn)生困惑,花更多時間上手,可能因此放棄使用你的產(chǎn)品。

圖2. 不一致的界面導致使用者無限困惑

 

c. 對設(shè)計產(chǎn)出沒有信心

由于沒有設(shè)計規(guī)范,對于自己設(shè)計的互動界面,抱持著懷疑的心態(tài)。

圖3. 因為沒有規(guī)范,對于自己的解決方法沒有信心

 

如果你曾遇到以上三種情境困擾著,或是正想著:

“如何擴展團隊和增長產(chǎn)品,同時提升開發(fā)團隊效率及提供一致的使用者經(jīng)驗?”

也許,設(shè)計系統(tǒng)Design System是解決辦法之一。

2. 設(shè)計系統(tǒng)(Design System)是什么?

設(shè)計系統(tǒng)并不是一個新觀念,可以回溯于早期2013年Brad Forst提出的Atomic Design。Google Material Design在2014年大放異彩,2016年Airbnb開始進行創(chuàng)建設(shè)計系統(tǒng)。陸陸續(xù)續(xù),許多知名公司包含Salesforce , Atlasssian , Shopify對外公布產(chǎn)品的設(shè)計系統(tǒng),讓大眾認識設(shè)計系統(tǒng)的概要及推廣設(shè)計規(guī)?;?scalability)。

市面上有許多解釋,我個人比較喜歡Karri的說法:

“ Set of shared and integrated patterns and principles that define the overall design of a product ”

— Karri Saarinen, Principle Designer at Airbnb

設(shè)計系統(tǒng)是定義產(chǎn)品整體的設(shè)計,由一組共享、整合的元素及原則所組成。

如果以實體產(chǎn)品形容的話,你可以把它想像成樂高(Lego)。每個元件都是可以合成的模組,擁有千變?nèi)f化的樣式。由一個產(chǎn)品中心管控每個元件的品質(zhì),更改版本時也能夠一并更新,讓設(shè)計跟開發(fā)可以規(guī)?;?。

圖4. 可以設(shè)想Design System是樂高中心,每個人可以自由組合

 

3. 為什么需要設(shè)計系統(tǒng)?

3.1市場/平臺逐趨成熟

由于數(shù)字產(chǎn)品的市場越來越飽和,大眾對產(chǎn)品的品質(zhì)要求更高

3.2建立產(chǎn)品一致性

不但是在單一產(chǎn)品之內(nèi),包含在不同平臺及裝置間的轉(zhuǎn)換(iOS, Andriod, Saas, Mobile Web, iPad, or TV, etc),都希望能建立產(chǎn)品的連貫性

3.2加速開發(fā)過程

由于有中央控管的設(shè)計系統(tǒng),成員可以隨時領(lǐng)取元素、同步更新,減少設(shè)計與開發(fā)反覆確認的過程

3.4擴張產(chǎn)品團隊

設(shè)計系統(tǒng)是由有清楚規(guī)范、一系列可重復利用的元素所組成,當產(chǎn)品模組化,可延展性就增加了

3.5專注于解決真正的問題

還記得煩惱下拉選單的樣式一整個下午嗎?或是與開發(fā)者討論要多幾個pixel的間隔、反覆確認的過程嗎?設(shè)計系統(tǒng)讓團隊的每個人可以加速構(gòu)思到生產(chǎn)的過程,專注于大方向的用戶體驗。

但設(shè)計系統(tǒng)并不是適合每個團隊的,如果你現(xiàn)在身處一個小型、快速發(fā)展的公司,也許為了加速擴張、爭取市占率,那么擁有設(shè)計系統(tǒng)可能會綁手綁腳的,不過能將設(shè)計系統(tǒng)的觀念放在心上,對于未來發(fā)展十分重要。

圖5. 市場成熟,用戶對產(chǎn)品的門檻更高,更需要設(shè)計系統(tǒng)來維系產(chǎn)品品質(zhì)

4. 設(shè)計系統(tǒng)團隊組成

由于設(shè)計系統(tǒng)是持續(xù)更新的系統(tǒng),定義產(chǎn)品的基石,組成成員可能包含:

用戶體驗設(shè)計師UX Designer

視覺設(shè)計師Visual Designer

動效設(shè)計師Motion Designer

內(nèi)容寫手Content Copy

前端開發(fā)者Front-end Dev

產(chǎn)品經(jīng)理Product Manger

當然,非常重要的是要取得各方共識,及說服管理者投入資源,在這里不多做說明,有興趣的朋友可以觀看Design systems — Zero to one。

圖6. 設(shè)計系統(tǒng)的核心成員

5. 如何著手?

萬事起頭難,根據(jù)每個團隊會有不同的方法,本文分享個人在公司里推廣設(shè)計系統(tǒng)的過程。大致上有六個階段:

Seed種子期:心中有設(shè)計系統(tǒng)的概念

Collect搜集:搜集現(xiàn)有產(chǎn)品UI元素

Categorize分類:將現(xiàn)有UI元素分類

Discovery探索:設(shè)計探索所有可能性

Framing定義:收斂定義設(shè)計系統(tǒng)基本架構(gòu)

Solution & Collaboration開發(fā)&合作:與開發(fā)者進行開發(fā)

現(xiàn)況說明:產(chǎn)品的設(shè)計規(guī)范Style Guide是由兩年前的另位設(shè)計師所制定,自從產(chǎn)品上市后用戶持續(xù)增長、在短時間開發(fā)更多的功能,過去的設(shè)計規(guī)范大多已不適用。

圖7. 設(shè)計系統(tǒng)開發(fā)的六個階段

5.1 Collect 搜集

截圖、截圖、再截圖Screenshot all the components across products

首先,請不留情面地對你的產(chǎn)品截圖,包含整個頁面跟單一元件,目的是找出用戶體驗不同的元件。不論是花一個小時、一個早上、或是一整天,你會發(fā)現(xiàn)原來不一致的界面比你想像的還要多(總共24個頁面及100個元件)。

產(chǎn)生原因包含:不同界面由不同的設(shè)計師經(jīng)手、在開發(fā)過程為了方便快速,使用現(xiàn)成的線上元件等。

圖8. 光是下拉選單,目前產(chǎn)品內(nèi)就有不同的形式?

5.2 Categorize 分類

尋找相同的界面元素Pattern hunting

將截圖的各元素分類,試著從小處著手,以下是簡略的歸納:

圖9. 歸納過后的元件清單

5.3 Discovery 探索

a. 搜集現(xiàn)有設(shè)計(外部& 內(nèi)部) Gather current design (external & internal)

這部分可以分成向外尋找、向內(nèi)探索:

向外尋找External:尋找市面上類似的產(chǎn)品,搜集喜歡的界面元素。由于這次的產(chǎn)品為SAAS,主要的參考對象為:Dropbox , Shopify , Typeform , etc.

向內(nèi)探索Internal:試著搜集過往的設(shè)計,找尋潛在的可能性。這些設(shè)計可能是已開發(fā)、待開發(fā),甚至是歸檔的都有成為設(shè)計系統(tǒng)的藍圖。

圖10. 以上是曾經(jīng)設(shè)計過的prototype,可以做為設(shè)計系統(tǒng)的藍圖

b. 選一個界面進行思考Hijack a project

你可以選擇一個正在進行的專案著手,或是最讓你討厭的畫面、最有感覺的都可以。這階段發(fā)散越廣越好,可以先回顧先前整理的元件以及靈感來源,盡可能的創(chuàng)作。

而我選擇用戶使用時間最長的活動頁面,重新構(gòu)思設(shè)計系統(tǒng)的可能性。

圖11. 選擇一界面進行設(shè)計,發(fā)想的越廣越好

5.4 Framing 定義

提煉設(shè)計Refine Design

考量到桌面版及行動裝置呈現(xiàn),選擇使用卡片式的UI,并減少圖片的面積,讓活動主題和相關(guān)資訊更突出。

定義架構(gòu)Define Guideline

有了以上的大方向后,這階段是一個關(guān)鍵的精密制作過程。你可以定義一個元素、元件,或是模組,考慮到不同的使用情境、在不同頁面的呈現(xiàn),除了在Sketch設(shè)定Symbol之外,可以使用Google Doc做詳細的敘述,以下是一部分的文件:

圖12. 定義的設(shè)計規(guī)范

5.5 Solution & Collaboration 開發(fā)&合作

最后的大步驟就是和前端工程師一起定義設(shè)計系統(tǒng),由于我們產(chǎn)品是SAAS平臺,主要使用React。

圖13. 反覆溝通的過程是為了確保Design System可以走得長遠、易維系

 

6. 結(jié)論Conclusion

恭喜你看完這篇落落長的文章,希望能用輕松的方式讓大家認識設(shè)計系統(tǒng)Design System,了解設(shè)計系統(tǒng)的使用時機、優(yōu)點,及設(shè)計過程。

“ Design systems are always evolving , and the way you share and encourage adoption of new iterations will evolve along the way as well.”

– Diana Mounter, Design Systems Manager at GitHub

設(shè)計系統(tǒng)是持續(xù)演變的,不斷分享、鼓勵采納,有助于新的迭代。

每一個公司都是獨特的,不只是產(chǎn)品,還有團隊跟環(huán)境,設(shè)計系統(tǒng)必須綜合考慮所有的因素。Airbnb的設(shè)計系統(tǒng)不代表是適合你的。如果你還在煩惱如何開始著手Design system的話,希望這篇文章對你有幫助!

每天更新,
全站高品質(zhì)素材免費下載!