原來(lái)構(gòu)建設(shè)計(jì)系統(tǒng),就像搭樂(lè)高一樣!

1 評(píng)論 5910 瀏覽 6 收藏 13 分鐘

編輯導(dǎo)語(yǔ):設(shè)計(jì)系統(tǒng)的搭建有助于產(chǎn)品在設(shè)計(jì)過(guò)程中提高效率,降低設(shè)計(jì)成本,而且設(shè)計(jì)系統(tǒng)在搭建過(guò)程中并非一成不變,它往往在過(guò)程中進(jìn)行迭代和優(yōu)化。本篇文章里,作者就何為設(shè)計(jì)系統(tǒng)、以及設(shè)計(jì)系統(tǒng)的搭建策略等進(jìn)行了總結(jié),一起來(lái)看一下。

“設(shè)計(jì)系統(tǒng)” 這個(gè)詞的出現(xiàn)已經(jīng)有相當(dāng)長(zhǎng)的一段時(shí)間了。設(shè)計(jì)系統(tǒng)最初是作為標(biāo)志和品牌的標(biāo)準(zhǔn)手冊(cè)來(lái)使用和構(gòu)建的,后來(lái)出現(xiàn)在基于 CSS 框架的 Web 語(yǔ)言中,比如著名的 Twitter 的 Bootstrap 框架就是一組 UI 組件。如今,隨著原子設(shè)計(jì) [1] 方法論、采用的模式和指導(dǎo)原則的出現(xiàn),設(shè)計(jì)系統(tǒng)已經(jīng)變得越來(lái)越主流。

([1] 原子設(shè)計(jì):設(shè)計(jì)系統(tǒng)的基礎(chǔ)指導(dǎo)理論。它可以幫助網(wǎng)絡(luò)設(shè)計(jì)者建立用戶與產(chǎn)品元素互動(dòng)的關(guān)系,以及如何將它們整合到一個(gè)整體的系統(tǒng)中。)

多年來(lái),我們看到世界上的許多頂級(jí)公司都創(chuàng)造了他們獨(dú)特的設(shè)計(jì)體系。它們通過(guò)利用一套標(biāo)準(zhǔn)來(lái)創(chuàng)造一個(gè)可擴(kuò)展的、一致的創(chuàng)新性的產(chǎn)品,已經(jīng)改變了我們?cè)O(shè)計(jì)數(shù)字產(chǎn)品的方式。

Airbnb、IBM 的 Carbon、蘋果、Google 的 Material design、Shopify 的 Polaris、UBER —— 這些公司都通過(guò)自己的設(shè)計(jì)系統(tǒng)構(gòu)建了令人驚嘆的用戶體驗(yàn),同樣地,這些設(shè)計(jì)系統(tǒng)也反過(guò)來(lái)在用戶心中建立了一種統(tǒng)一的、可識(shí)別的公司形象。

一、什么是設(shè)計(jì)系統(tǒng)?What is a Design System?

雖然我們大多數(shù)人都知道設(shè)計(jì)系統(tǒng)意味著什么,但一些人發(fā)現(xiàn)它很難實(shí)現(xiàn)落地。對(duì)一些人來(lái)說(shuō),它是一個(gè)組件庫(kù),而有些人把它與樣式指南和樣式庫(kù)混淆。當(dāng)然它就像一個(gè)不斷更新的應(yīng)用程序一樣簡(jiǎn)單,每次我們使用它的時(shí)候感覺(jué)都相同。

那它是怎么實(shí)現(xiàn)的呢——當(dāng)然是一個(gè)真理:由設(shè)計(jì)和開發(fā)團(tuán)隊(duì)共同構(gòu)建的。

通常,UI 組件庫(kù)被認(rèn)為是設(shè)計(jì)系統(tǒng)的核心,但是要構(gòu)建一個(gè)可擴(kuò)展、靈活、穩(wěn)定且完全可維護(hù)的源文件庫(kù)則還有更多的工作要做。

原來(lái)構(gòu)建設(shè)計(jì)系統(tǒng),就像搭樂(lè)高一樣!

SPACE 設(shè)計(jì)系統(tǒng)(By:QED42)| SPACE Design System by QED42

設(shè)計(jì)系統(tǒng)是一個(gè)不斷發(fā)展的綜合指南,它可以節(jié)省時(shí)間并為團(tuán)隊(duì)構(gòu)建便于操作的無(wú)縫的流程。創(chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)需要規(guī)則、約束和原則,這些規(guī)則、約束和原則在基礎(chǔ)、組件、內(nèi)容以及剩余的技術(shù)和設(shè)計(jì)堆棧下被細(xì)分為更小的部分。

設(shè)計(jì)師丹尼爾·伊登將設(shè)計(jì)系統(tǒng)稱為工具和人之間的交互。他將設(shè)計(jì)工具描述為與樂(lè)高積木一樣具有豐富的交互性,并主張?jiān)O(shè)計(jì)系統(tǒng)是關(guān)于人的:他們?nèi)绾蜗嗷プ饔?/strong>,如何相互理解,以及如何協(xié)同工作以實(shí)現(xiàn)共同目標(biāo)。它是由人創(chuàng)造的,被人使用的,被人體驗(yàn)的。它受到人們的挑戰(zhàn)、創(chuàng)造和破壞。

這是迄今為止對(duì)設(shè)計(jì)系統(tǒng)最人性化的定義之一,它把設(shè)計(jì)過(guò)程說(shuō)成是共同創(chuàng)造,而不是僅僅是設(shè)計(jì)結(jié)果的來(lái)源。

開發(fā)人員對(duì)設(shè)計(jì)系統(tǒng)的理解各不相同,設(shè)計(jì)師的貢獻(xiàn)也各不相同,設(shè)計(jì)作家們可能會(huì)給出不同的定義。所有的大公司、小公司或代理機(jī)構(gòu)們都有不同的價(jià)值觀和規(guī)則,以及創(chuàng)建設(shè)計(jì)系統(tǒng)的管理過(guò)程,但目標(biāo)都是一致不變的:即減少技術(shù)和設(shè)計(jì)的工作負(fù)擔(dān)。

設(shè)計(jì)系統(tǒng)不是一成不變的——它是一個(gè)不斷進(jìn)行的工作,通過(guò)開放迭代,基于規(guī)則、約束和原則這三個(gè)基石下改善、適應(yīng)和構(gòu)建代碼碼庫(kù)并開展設(shè)計(jì)。

二、規(guī)則、約束和原則?Rules, Constraints, and Principles

設(shè)計(jì)系統(tǒng)由規(guī)則、約束和原則組成。創(chuàng)建這三個(gè)構(gòu)件時(shí)要考慮到它們將如何在整個(gè)產(chǎn)品中擴(kuò)展,并創(chuàng)建一致的用戶體驗(yàn)。下面讓我們更深入地來(lái)研究這些模塊。

1. 規(guī)則

如何為組建設(shè)計(jì)工具創(chuàng)造氛圍?創(chuàng)作者和貢獻(xiàn)者如何確保每個(gè)人都在使用最新版本的設(shè)計(jì)系統(tǒng)?

規(guī)則的制定是為了讓每個(gè)人都能理解和解釋設(shè)計(jì)系統(tǒng)中的內(nèi)容。它們被細(xì)分為價(jià)值和目的,作為一種基礎(chǔ)資源,幫助團(tuán)隊(duì)中的每個(gè)人和新用戶基于現(xiàn)有的元素進(jìn)行設(shè)計(jì)。規(guī)則是一個(gè)管理體系,為設(shè)計(jì)系統(tǒng)的工作流程奠定了基礎(chǔ)。

一個(gè)系統(tǒng)就是一個(gè)框架是一份規(guī)則手冊(cè)。它會(huì)告訴你這些模式是如何協(xié)同工作的 (布拉德·弗羅斯特)。

原來(lái)構(gòu)建設(shè)計(jì)系統(tǒng),就像搭樂(lè)高一樣!

來(lái)源:Atlassian設(shè)計(jì)系統(tǒng) | Source: Atlassian Design System

規(guī)則手冊(cè)的價(jià)值部分管理著設(shè)計(jì)系統(tǒng)的流程它能將團(tuán)隊(duì)統(tǒng)一在約束和原則周圍。它是真理的源泉,是設(shè)計(jì)和代碼的記錄系統(tǒng)。目的部分定義了個(gè)人要如何利用新的元素為設(shè)計(jì)系統(tǒng)做出貢獻(xiàn)。

它在整個(gè)團(tuán)隊(duì)中建立了共同的語(yǔ)言和溝通交流,這反過(guò)來(lái)又創(chuàng)造了更好的溝通、理論以及自信和樂(lè)觀的精神。

2. 約束

創(chuàng)建和維護(hù)一個(gè)有效的設(shè)計(jì)系統(tǒng)是一個(gè)挑戰(zhàn)。因?yàn)橐龀鲈S多小的決策,比如:應(yīng)該定義多少種字體?我們應(yīng)該如何構(gòu)建顏色的使用模式?我們?cè)谀耐V??設(shè)計(jì)系統(tǒng)中的約束有助于簡(jiǎn)化每一個(gè)決定,提供一些限制和更多可能性。

約束定義了顏色的使用、聲音、布局、多媒體、排版、數(shù)據(jù)可視化、表單設(shè)計(jì)、移動(dòng)端行為等一般準(zhǔn)則。它們?cè)谡麄€(gè)設(shè)計(jì)系統(tǒng)中利用其獨(dú)特的差異化和品牌特征元素,使每個(gè)數(shù)字觸點(diǎn)成為統(tǒng)一的體驗(yàn)。

原來(lái)構(gòu)建設(shè)計(jì)系統(tǒng),就像搭樂(lè)高一樣!

來(lái)源:Atlassian設(shè)計(jì)系統(tǒng) | Source: Atlassian Design System

當(dāng)設(shè)計(jì)師從約束、限制和可能性的共同點(diǎn)出發(fā)去設(shè)計(jì)和構(gòu)造界面時(shí),用戶總是能夠知道當(dāng)他們與產(chǎn)品交互時(shí)他們將體驗(yàn)到什么。

從用戶體驗(yàn)的角度來(lái)看,用可擴(kuò)展的共同的一致的約束條件來(lái)設(shè)計(jì)界面能為用戶帶來(lái)熟悉感。從技術(shù)角度來(lái)看,約束意味著可以使得開發(fā)人員的效率更高、可擴(kuò)展性更強(qiáng)、重復(fù)工作更少。

3. 原則

設(shè)計(jì)系統(tǒng)的原則提供了最初似乎沒(méi)有看到的問(wèn)題的答案。設(shè)計(jì)和開發(fā)團(tuán)隊(duì)經(jīng)常以他們自己的一套基本標(biāo)準(zhǔn)來(lái)運(yùn)作,用于評(píng)估設(shè)計(jì)的質(zhì)量是否能夠維持一致的數(shù)字化用戶體驗(yàn)。但是,當(dāng)我們創(chuàng)建一個(gè)統(tǒng)一的設(shè)計(jì)系統(tǒng)時(shí),將所有標(biāo)準(zhǔn)統(tǒng)一成為共同原則變得非常重要。

如何去定義必要的原則?如何知道什么是不可缺少的,什么是不穩(wěn)定的?你怎么知道這些是能夠指導(dǎo)你的愿景和目標(biāo)的原則?

設(shè)計(jì)系統(tǒng)的原則對(duì)每個(gè)人來(lái)說(shuō)都是可重復(fù)使用的標(biāo)準(zhǔn)。這些原則應(yīng)該取代本能的標(biāo)準(zhǔn),讓人們能夠共同理解如何去塑造用戶體驗(yàn)。因此我們必須制定設(shè)計(jì)原則,以幫助解決從頭到尾設(shè)計(jì)軟件的復(fù)雜性!

IBM 的 Carbon 設(shè)計(jì)系統(tǒng)將其原則定義為結(jié)果背后的意圖。他們相信偉大的體驗(yàn)會(huì)給用戶帶來(lái)有意義的結(jié)果,會(huì)直擊用戶的內(nèi)心。要設(shè)計(jì)出優(yōu)秀的用戶體驗(yàn),你必須了解它們是如何組合在一起的,以及它們?yōu)槭裁茨軌蛟诟顚哟紊嫌|動(dòng)人們。

原來(lái)構(gòu)建設(shè)計(jì)系統(tǒng),就像搭樂(lè)高一樣!

來(lái)源:Carbon設(shè)計(jì)系統(tǒng) | Source: Carbon Design System

在寫下設(shè)計(jì)系統(tǒng)的原則時(shí),團(tuán)隊(duì)?wèi)?yīng)該關(guān)注以下幾點(diǎn):

  • 個(gè)人指導(dǎo)并決策這一原則能使團(tuán)隊(duì)更快達(dá)成一致。它們應(yīng)該作為共同的支柱,在整個(gè)產(chǎn)品中創(chuàng)造和諧和凝聚力。
  • 隨著產(chǎn)品的發(fā)展,設(shè)計(jì)系統(tǒng)會(huì)隨著時(shí)間的推移而修改,設(shè)計(jì)系統(tǒng)的原則應(yīng)該協(xié)調(diào)整個(gè)團(tuán)隊(duì),并幫助團(tuán)隊(duì)成員跟進(jìn)修改的速度。
  • 指導(dǎo)設(shè)計(jì)系統(tǒng)的原則應(yīng)該為如何處理和解決用戶體驗(yàn)問(wèn)題提供一個(gè)具有明確清晰的過(guò)程
  • 它們應(yīng)該要有助于加快設(shè)計(jì)系統(tǒng)的構(gòu)建并消除不必要的摩擦。
  • 它們應(yīng)該在每一步中明確預(yù)期,幫助解決問(wèn)題,讓團(tuán)隊(duì)能夠?qū)W⒂谑稚系墓ぷ鳎槐負(fù)?dān)心下一步該做什么。
  • 它們應(yīng)該以一致的語(yǔ)氣和語(yǔ)調(diào)來(lái)寫,整個(gè)設(shè)計(jì)系統(tǒng)也應(yīng)該如此。

設(shè)計(jì)系統(tǒng)的原則具有一系列明確定義的過(guò)程、指導(dǎo)方針和標(biāo)準(zhǔn),每個(gè)都有不同的目標(biāo)。作為相互依存的實(shí)現(xiàn)層次,在一起使用時(shí),可以提高解決問(wèn)題的幾率。

三、總結(jié)?Conclusion

治理系統(tǒng),即支持創(chuàng)建設(shè)計(jì)系統(tǒng)的流程程,有助于幫助理解每個(gè)團(tuán)隊(duì)成員的角色和責(zé)任,在正確的時(shí)間引入正確的人,使每個(gè)人的參與都有利于產(chǎn)出的質(zhì)量。

管理體系能夠從一開始就決定投入時(shí)間來(lái)設(shè)置規(guī)則、約束和原則,這一點(diǎn)很重要。雖然大多數(shù)公司都有比你預(yù)期的更多的人來(lái)掌握話語(yǔ)權(quán),但從產(chǎn)品的角度來(lái)看,所有三個(gè)模塊都應(yīng)該用相似的基調(diào)和表達(dá)方式來(lái)編寫。通過(guò)擁有一個(gè)真理源泉以及構(gòu)造堅(jiān)固的基石,你可以為用戶提供一種極其優(yōu)秀和一致的體驗(yàn)。

這就是它的工作原理:就像玩樂(lè)高一樣,一塊積木可以被添加到許多構(gòu)造形態(tài)中,積木是保持不變的,但玩家每次都會(huì)使用不同的方式來(lái)構(gòu)造新的設(shè)計(jì),并釋放約束。同樣,設(shè)計(jì)系統(tǒng)的積木(即基石)可應(yīng)用于設(shè)計(jì)和產(chǎn)品構(gòu)造的各個(gè)層面,用多種方式設(shè)置、構(gòu)建出不同的樣式,每次都能產(chǎn)生一個(gè)新的設(shè)計(jì)。

本文翻譯已獲得作者的正式授權(quán)(授權(quán)截圖如下)

原來(lái)構(gòu)建設(shè)計(jì)系統(tǒng),就像搭樂(lè)高一樣!

 

作者:Priyanka J

原文:https://uxplanet.org/the-building-blocks-of-a-design-system-ee0d99c6f093

譯者:彭祎婕;審核:吳鵬飛、李澤慧、張聿彤;編輯:孫淑雅

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我們來(lái)找茬:作者授權(quán)的地址和你貼上去的原文地址不一樣

    來(lái)自上海 回復(fù)