8個(gè)實(shí)用步驟,教你執(zhí)行與落地一套設(shè)計(jì)系統(tǒng),提升設(shè)計(jì)價(jià)值
編輯導(dǎo)讀:隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展,產(chǎn)品體驗(yàn)的一致性和開發(fā)的效率越來越被重視,設(shè)計(jì)系統(tǒng)的出現(xiàn)就是為了解決這樣的問題。但在國內(nèi),設(shè)計(jì)系統(tǒng)這一塊還處于初級階段。如果做好了設(shè)計(jì)系統(tǒng)這塊的工作,是設(shè)計(jì)師體現(xiàn)自身價(jià)值的一個(gè)很重要的機(jī)會。
本文作者詳盡地分享了她們公司是如何一步一步的構(gòu)建設(shè)計(jì)系統(tǒng)的,供大家一起參考學(xué)習(xí)。
設(shè)計(jì)系統(tǒng)現(xiàn)在是常用的設(shè)計(jì)手段,你可能經(jīng)常能看到這個(gè)詞。我在之前做的一個(gè)web設(shè)計(jì)項(xiàng)目中,第一次接觸到“設(shè)計(jì)系統(tǒng)”。在 99.co 項(xiàng)目中中我僅與另外一位產(chǎn)品設(shè)計(jì)師合作,資源實(shí)在有限。不過我們認(rèn)為設(shè)計(jì)系統(tǒng)非常重要,因?yàn)樗芟O(shè)計(jì)不一致、改善設(shè)計(jì)師和開發(fā)未來的工作流程。為了推動這個(gè)項(xiàng)目,我們必須要做更多的努力。
為了更好地理解,我在這里定義一下什么是設(shè)計(jì)系統(tǒng)——具有清晰的使用規(guī)范、可重復(fù)使用的組件庫,并在設(shè)計(jì)師和開發(fā)者之間共享。它需要標(biāo)明組件應(yīng)何時(shí)使用,包括隨時(shí)可調(diào)用的代碼。
我們的設(shè)計(jì)系統(tǒng)仍在迭代中,但我仍希望通過這篇文章,能把我們的經(jīng)驗(yàn)以及一些有用的技巧和工具分享給你。
步驟:
- 檢查現(xiàn)有組件
- 學(xué)習(xí)參考優(yōu)秀的設(shè)計(jì)系統(tǒng)
- 列出組件表
- 計(jì)劃時(shí)間
- 完善組件
- 創(chuàng)建控件
- “設(shè)計(jì)”設(shè)計(jì)系統(tǒng)
- 設(shè)計(jì)系統(tǒng)落地
步驟1:檢查現(xiàn)有組件
為了全面了解我們要做的事,對產(chǎn)品中現(xiàn)有組件進(jìn)行檢查非常重要。包括每個(gè)頁面上的每個(gè)元素。這是至關(guān)重要的一步,盡管很繁瑣乏味。為此,我們截了一些圖,并使用 Trello(https://trello.com) 對其進(jìn)行整理。
Trello面板,每一列都是帶有標(biāo)簽的卡片
每一列(從上到下) 代表我們網(wǎng)站上的一個(gè)頁面,例如主頁。每一列的頁面都被截圖,并組織成卡片。每張卡片都有標(biāo)簽標(biāo)記(右側(cè)的面板),這些標(biāo)簽表示頁面中存在的每個(gè)組件。不同顏色的標(biāo)簽代表不同組件。例如復(fù)選框、單選按鈕等是數(shù)據(jù)輸入的形式,它們用綠色標(biāo)記。
通過顏色分類可以過濾出相同類型的組件
通過這種方式進(jìn)行組織,我們可以輕松地搜索特定頁面,或者使用右側(cè)面板按組件進(jìn)行過濾,并查看所有頁面上當(dāng)前的用例。它還有助于發(fā)現(xiàn)設(shè)計(jì)不一致之處。
步驟2:學(xué)習(xí)參考優(yōu)秀的設(shè)計(jì)系統(tǒng)
以下是一些標(biāo)桿級的設(shè)計(jì)系統(tǒng),我們將它們作為參考:
- [Atlassian](https://atlassian.design/)
- [Ant Design](https://ant.design/)
- [IBM](https://www.carbondesignsystem.com/)
- [Zendesk](https://garden.zendesk.com/)
- [Workday](https://design.workday.com/)
- [HubSpot](https://canvas.hubspot.co)
- [Salesforce](https://www.lightningdesignsystem.com/)
- [Shopify](https://polaris.shopify.com/)
- [Bootstrap](https://getbootstrap.com/)
- [QuickBooks](https://designsystem.quickbooks.com/)
我們想汲取這些出色的設(shè)計(jì)系統(tǒng)中的精華,看看它們是如何做的。下面介紹幾個(gè)我最喜歡的——Atlassian 和 Ant Design
Atlassian 設(shè)計(jì)系統(tǒng)
Altassian將其設(shè)計(jì)系統(tǒng)分為“品牌”,“營銷”和“產(chǎn)品”。由于不同方面的設(shè)計(jì)需要不同的準(zhǔn)則,所以要滿足各方面的需求以確保公司的設(shè)計(jì)語言一致。例如,與“產(chǎn)品”相比,“營銷”在設(shè)計(jì)漂亮的搭配時(shí)需要更多的顏色,而”產(chǎn)品” 我們一般只需要一組固定的顏色來展示不同的組件狀態(tài)。Altassian還為每個(gè)組件標(biāo)注了非常清楚的使用指引,包括不同的樣式和變化,還有使用案例。
Ant 設(shè)計(jì)系統(tǒng)
Ant Design 將其組件分為不同的部分,例如數(shù)據(jù)顯示,數(shù)據(jù)輸入,導(dǎo)航等等。這確實(shí)有助于組織和查找組件。它們在右上角展示這些錨點(diǎn)(譯者注:類似于組件的標(biāo)簽),這樣用戶無需滾動到底就可以知道每個(gè)頁面的組件內(nèi)容。每個(gè)組件的樣式和變化都預(yù)先展示,并且每個(gè)組件都是可交互的。代碼的提供也使開發(fā)人員可以快速獲得代碼,這是非常棒的用戶體驗(yàn)!
步驟3:列出組件表
在學(xué)習(xí)了其他的設(shè)計(jì)系統(tǒng)后,我根據(jù)我們在Trello上的研究和篩選標(biāo)簽,圈出了需要的模式和組件。這樣一來,我們就可以對需要走查的內(nèi)容有一個(gè)大致了解,以便我們能夠時(shí)刻跟進(jìn)并安排時(shí)間。
Google Docs上的跟進(jìn)概述
我根據(jù)功能將組件分為以下幾個(gè)部分:按鈕、數(shù)據(jù)輸入、數(shù)據(jù)顯示、反饋和導(dǎo)航。我們會不斷修訂這個(gè)表,討論完一個(gè)就勾掉一個(gè)。
步驟4:安排時(shí)間
接下來,我們根據(jù)每個(gè)人的任務(wù)分工制定了每周時(shí)間表。這有助于使參與設(shè)計(jì)系統(tǒng)的每個(gè)人都了解最新的進(jìn)度,并有助于資源分配。我們從Trello用例中最常用的組件開始。版式,顏色和布局是首要的,因?yàn)樗鼈優(yōu)楹竺嬉龅氖碌於嘶A(chǔ)。
Google Sheet 上的時(shí)間表
日常工作之外的時(shí)間有限,我們爭取每周有兩到三次對設(shè)計(jì)系統(tǒng)的討論,每次大約兩小時(shí)。當(dāng)然這是理想的情況。很多時(shí)候,產(chǎn)品設(shè)計(jì)師都被工作淹沒了,無法抽出時(shí)間。在少數(shù)情況下,我們能夠投入更多的時(shí)間來討論,并盡量彌補(bǔ)失去的時(shí)間。
除了每周討論之外,我們還在sketch上把組件作成控件,制作了設(shè)計(jì)系統(tǒng)的頁面,并讓前端人員來構(gòu)建這些頁面。我們將根據(jù)我們的進(jìn)展每周不斷更新時(shí)間表。
步驟5:完善組件
研究和討論的最終目的是完善組件,設(shè)計(jì)它們的屬性和狀態(tài),并建立準(zhǔn)則。每個(gè)組件我們都在Trello上回顧了它的使用案例,并研究最佳用法。
起初,我們在開會時(shí)研究組件。但是后來我們意識到研究并不需要兩個(gè)設(shè)計(jì)師都在場。事先各自用自己的時(shí)間研究,保證開會時(shí)的討論時(shí)間,這樣會更好。
Google Drive 里關(guān)于討論的文件
我們用Google Docs做了會議記錄,以便跟進(jìn)決策,也能回顧我們是如何做出這些決策的。有了這些筆記,我們就會想起過去的思考過程和決策,以便更好地進(jìn)行后續(xù)的決策。
步驟6:創(chuàng)建控件
隨著討論的深入,我們開始構(gòu)建樣式規(guī)范。我創(chuàng)建了文本和圖層樣式庫,并在滿足其狀態(tài)和變化時(shí)對Sketch上的每個(gè)組件進(jìn)行控件化。
Sketch上的文本和圖層樣式庫
Sketch上的組件庫
我們再一次梳理了內(nèi)容,并參考其他的UI Kits,以比較命名方式。我意識到,實(shí)際上不存在完美的命名方式,我們應(yīng)當(dāng)找到適合我們的。隨著工具的不斷更新,我們還可能要相應(yīng)地調(diào)整工作流程。
舉個(gè)例子,最近的sketch60更新,更新了組件面板和彈窗。我們之前的樣式庫命名方式是根據(jù)大小、字重、顏色、對齊方式和線條高度劃分多個(gè)層。在新版本的彈窗中,我們必須點(diǎn)擊很多次才能找到特定的樣式。
更新過的命名方式
為了適應(yīng)這次更新,我拉平了命名結(jié)構(gòu),現(xiàn)在可以通過[size] [weight] 來搜索那些帶有或不帶默認(rèn)行高的字體顏色,或通過[colour]來查看按大小和字重排序的此顏色的字體。我們的中性色色板的命名也從[Dark], [Mid] 和 [Light] 縮短為 [D],[M],和 [L],因?yàn)閺棾隹虻目臻g有限。在未來,我預(yù)計(jì)將會有更多的變化,但總體來說,這些更新肯定會提高我們的效率。
下面是一些有用的文章:
- 釋放SKETCH控件的全部潛能[Unleashing The Full Potential Of Symbols In Sketch](https://medium.com/sketch-app-sources/sketch-symbols-b36f7355414a)
- 我們都在等待SKETCH更新[The Sketch Update We’ve All Been Waiting For](https://medium.com/ux-power-tools/the-sketch-update-weve-all-been-waiting-for-plus-a-brand-new-ux-power-tools-72c405fd490d)
- Sketch58 智能布局[Sketch 58 — Smart Layout!](https://medium.com/sketch-app-sources/sketch-58-smart)
- 在SKETCH中使用智能布局[Using smart layout in Sketch](https://uxdesign.cc/sketch-smart-layout-bfc8ceeda44c)
- sketch60 新組件面板使用指南[Sketch 60 & New Components Panel — How to Use It?](https://medium.com/sketch-app-sources/sketch-60-new-components-p)
- 如何在組件中使用樣式和控件[How to work with Styles & Symbols in Sketch Components Panel](
還有好用的sketch插件:
- Find and Replace : 快速在圖層和控件中更改文本
- [Find and Replace](https://github.com/mscodemonkey/Sketch-Find-And-Replace)
- ?Shared Style Finder : 共享圖層或文本樣式搜索器
- [Shared Style Finder](https://github.com/sonburn/shared-style-finder)
- Sketch Runner : 用鍵盤更快的執(zhí)行 sketch action(宏命令)
- [Sketch Runner](https://sketchrunner.com/)
- Symbol Organizer : 按字母順序排序控件,并按控件名分組
- [Symbol Organizer](https://github.com/sonburn/symbol-organizer)
步驟7:“設(shè)計(jì)”設(shè)計(jì)系統(tǒng)
如上所述,我們希望將其他設(shè)計(jì)系統(tǒng)的精華納入我們的設(shè)計(jì)系統(tǒng)。在每個(gè)頁面的組件控件化之后,我為每個(gè)頁面設(shè)計(jì)了模型,然后給前端人員來實(shí)現(xiàn)這些頁面。
Sketch上的設(shè)計(jì)系統(tǒng)模型
我們很快就發(fā)現(xiàn)這并不理想。我們花了大力氣去做這些頁面,但資源實(shí)在有限。因此得有個(gè)工具來減少我們的工作量。以便可以將資源更好地分配給必要的事——那就是制作組件并在產(chǎn)品中實(shí)現(xiàn)它們。
找到一個(gè)可以集成到現(xiàn)有工作流程中的工具至關(guān)重要,版本控制、品牌定制等功能也很好。我們在 uxtools.co 看到了設(shè)計(jì)工具功能比較的表格。經(jīng)過考量,我們決定使用Zeroheight.
Zeroheight設(shè)計(jì)系統(tǒng)
我在每個(gè)頁面中為不同的組件和其變化都設(shè)立了使用指南,并且通過插件將sketch控件直接導(dǎo)入zeroheight??梢允褂媒换ナ紿TML代碼段和storybook組件向觀看者顯示實(shí)時(shí)組件示例,開發(fā)人員還能調(diào)用API輕松與設(shè)計(jì)保持同步。
步驟8:設(shè)計(jì)系統(tǒng)落地
與工程師、產(chǎn)品經(jīng)理和其他利益相關(guān)者的溝通在整個(gè)流程中都非常重要,尤其是設(shè)計(jì)的執(zhí)行。為了實(shí)現(xiàn)設(shè)計(jì)系統(tǒng),我們構(gòu)建新的組件,將他們鏈到zeroheight,并替換現(xiàn)有的舊組件。
Google Sheets上的計(jì)劃表
我向數(shù)據(jù)分析師核對了最常訪問頁面的情況。由于這些頁面的流量最高,因此我們決定在不同階段更新這些頁面的組件。最初的計(jì)劃是每兩周進(jìn)行一次更新。
然而作為一個(gè)初創(chuàng)公司,必須優(yōu)先考慮做功能上的工作,我們無法按計(jì)劃堅(jiān)持下去,而是做了妥協(xié)。我們正在做哪個(gè)頁面,就將新的組件替換到這個(gè)頁面上。
Zeplin上的整體風(fēng)格指南
Zeplin上的連接組件
我們用于提高設(shè)計(jì)師和開發(fā)人員之間協(xié)作的另一個(gè)工具是Zeplin,它有 整體風(fēng)格指南 和 連接組件 。正如上圖所示 ,我們將所有新的組件直接上傳到風(fēng)格指南中,開發(fā)人員就能夠?qū)⑺麄兊拇a庫和文檔來源(storybook或 github)鏈接到這些組件。這么做后,每當(dāng)開發(fā)人員在Zeplin上檢查設(shè)計(jì)時(shí),他們都可以查看這些組件的概述,并可以重復(fù)使用它們。
以上就是我們從0開始設(shè)計(jì)系統(tǒng)的方式。我們?nèi)杂性S多工作要做,但是進(jìn)展緩慢總比沒有要好。這是一個(gè)持續(xù)的挑戰(zhàn),我們將不斷總結(jié),以更好地完成需求的需求。萬事開頭難,一步一步來!
原文鏈接:https://uxdesign.cc/starting-a-design-system-in-a-start-up-3359f2d4784b
原作者:Ruiwen Tay;
翻譯:Scott;公眾號:彩云譯設(shè)計(jì)
本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
厲害