隨著數(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ì)素材免費下載!