如何利用設(shè)計(jì)系統(tǒng)實(shí)現(xiàn)設(shè)計(jì)規(guī)?；?/h2>

三分設(shè)

2019-10-16

2 評(píng)論 3342 瀏覽 13 收藏 14 分鐘

這篇文章匯集了來(lái)自 Google，Spotify，Stealth Startup 和 Gigster 的設(shè)計(jì)領(lǐng)頭人們分享了他們對(duì)于設(shè)計(jì)系統(tǒng)的看法，以及對(duì)系統(tǒng)未來(lái)的預(yù)測(cè)。

為了實(shí)現(xiàn)快速迭代，設(shè)計(jì)團(tuán)隊(duì)需要有一個(gè)單一事實(shí)來(lái)源① ，來(lái)生成規(guī)?；?UI 語(yǔ)言和流水線式的 UX 規(guī)范。這種集中化的設(shè)計(jì)語(yǔ)言也可以保證品牌在不同渠道和平臺(tái)的接觸點(diǎn)上，都能提供一致性的用戶(hù)體驗(yàn)。

因此，通過(guò)建立一個(gè)包含了設(shè)計(jì)模式、規(guī)則和 UX 規(guī)范的信息庫(kù)（即設(shè)計(jì)系統(tǒng)），就可以避免當(dāng)產(chǎn)品規(guī)?；瘯r(shí)不一致性的產(chǎn)生。

那么，這些系統(tǒng)如何幫助實(shí)現(xiàn)設(shè)計(jì)規(guī)模化？尤其在技術(shù)不斷發(fā)展的當(dāng)下 —— 它們是如何應(yīng)對(duì)像語(yǔ)音聊天平臺(tái)這樣不斷更新的界面呢？

①在信息系統(tǒng)設(shè)計(jì)和理論中，單一事實(shí)源（SSOT）是構(gòu)建信息模型和相關(guān)數(shù)據(jù)模式的一種方式，即任何的數(shù)據(jù)元素都在同一個(gè)地方存儲(chǔ)（或編輯）。通常這一概念被公司用作其信息結(jié)構(gòu)的一部分，來(lái)保證公司成員在做出商業(yè)決策時(shí)依賴(lài)的是同一個(gè)數(shù)據(jù)。

設(shè)計(jì)系統(tǒng)的必要性

“如今設(shè)計(jì)所面臨的問(wèn)題不是缺乏技術(shù)或者人才，而是一個(gè)設(shè)計(jì)系統(tǒng)。因?yàn)楫?dāng)你想從只有幾個(gè)設(shè)計(jì)組件的界面擴(kuò)展到一個(gè)擁有成熟模式的平臺(tái)時(shí)，設(shè)計(jì)無(wú)法直接通過(guò)增加人手來(lái)實(shí)現(xiàn)規(guī)?；?，這樣做的結(jié)果只會(huì)是使問(wèn)題更加復(fù)雜化…… ”

—— Vikram Babu，Gigster 產(chǎn)品設(shè)計(jì)師

設(shè)計(jì)系統(tǒng)只是一個(gè)起點(diǎn)。

一個(gè)全面的設(shè)計(jì)語(yǔ)言需要覆蓋整個(gè)用戶(hù)旅程，理解產(chǎn)品背后的服務(wù)設(shè)計(jì)可以幫助我們快速掌握用戶(hù)與產(chǎn)品的所有接觸點(diǎn)。設(shè)計(jì)系統(tǒng)帶來(lái)了可預(yù)測(cè)和一致性的用戶(hù)體驗(yàn)，同時(shí)也在新技術(shù)和新平臺(tái)的交織下伴隨著產(chǎn)品不斷地進(jìn)步。

Chris Messina 完美地表述了這一觀點(diǎn)：“設(shè)計(jì)系統(tǒng)就像是針對(duì)品牌熟悉的產(chǎn)品領(lǐng)域，繪制出的一張便捷、集中化，并且不斷進(jìn)化的地圖，為品牌探索新的領(lǐng)域指明方向。”

通過(guò)設(shè)計(jì)系統(tǒng)進(jìn)行戰(zhàn)略性思考，設(shè)計(jì)團(tuán)隊(duì)可以建立一個(gè)可規(guī)?；目蚣埽瑥亩鴦?chuàng)造出能夠快速迭代和輸送新體驗(yàn)的實(shí)用性產(chǎn)品。

“設(shè)計(jì)系統(tǒng)提供了一個(gè)共享平臺(tái)，方便人們用來(lái)創(chuàng)作，并合力打造出一個(gè)精心設(shè)計(jì)的結(jié)果?！?/p>

設(shè)計(jì)可以被規(guī)?；?/h2>

“簡(jiǎn)單來(lái)說(shuō)：設(shè)計(jì)系統(tǒng)使團(tuán)隊(duì)成員的意見(jiàn)達(dá)成一致，因此他們的共同產(chǎn)出能體現(xiàn)出這種意向性。”

—— Stanley Wood，Spotify 設(shè)計(jì)總監(jiān)

當(dāng) Spotify 設(shè)計(jì)總監(jiān) Stanley Wood 在 2012年剛加入他的設(shè)計(jì)團(tuán)隊(duì)時(shí)，他對(duì) Spotify 不同產(chǎn)品中所包含元素的不一致性感到震驚。由于重新設(shè)計(jì)不能在保留原有設(shè)計(jì)方向的基礎(chǔ)上消除這種不一致性，他決定依靠自己來(lái)找到可行的解決方案。

他提出一個(gè)問(wèn)題：“有什么辦法可以讓一個(gè)集中了多個(gè)時(shí)區(qū)、項(xiàng)目，甚至是具有相互競(jìng)爭(zhēng)性質(zhì)的設(shè)計(jì)師團(tuán)隊(duì)能更好地合作，創(chuàng)造出具有一致性體驗(yàn)的產(chǎn)品？”

2013年，團(tuán)隊(duì)建立了一系列的原則來(lái)規(guī)范設(shè)計(jì)和實(shí)現(xiàn)成員間的意見(jiàn)共享。意識(shí)到真正的挑戰(zhàn)來(lái)自于對(duì)這些原則的維護(hù)，團(tuán)隊(duì)將這些原則變成了 Spotify 自己的設(shè)計(jì)語(yǔ)言 GLUE②，被公司的每一個(gè)成員所使用。Stanley 指出，作為一種匯集了相同樣式和組件的設(shè)計(jì)工具，UI 工具包對(duì)于 Spotify 每一個(gè)項(xiàng)目的啟動(dòng)是必不可少的。

②GLUE：a Global Language for a Unified Experience，即一種為了打造一致性體驗(yàn)的全球化語(yǔ)言。

Spotify 指南第一版

“設(shè)計(jì)系統(tǒng)改變了我們看待問(wèn)題的角度，它為設(shè)計(jì)師提供了一個(gè)共享的平臺(tái)，用來(lái)創(chuàng)作并合力打造出一個(gè)精心設(shè)計(jì)的結(jié)果。而不再是兩個(gè)設(shè)計(jì)師面對(duì)同一個(gè)問(wèn)題，沒(méi)有任何目的性地提出完全不同的解決方案?！?/p>

“這不僅給我們帶來(lái)了更高的效率，更重要的是，它也讓我們能站在用戶(hù)的視角看待問(wèn)題?！?Stanley 說(shuō)。

切實(shí)可行的設(shè)計(jì)規(guī)模化

Gigster 的產(chǎn)品經(jīng)理 Vikram Baru，正在構(gòu)建一種設(shè)計(jì)系統(tǒng)，旨在幫助改善從設(shè)計(jì)到開(kāi)發(fā)環(huán)節(jié)中的溝通交流，以及規(guī)范 Gigster 進(jìn)行原型測(cè)試時(shí)所用的可用性原則 。

為了避免同一個(gè)項(xiàng)目中不同經(jīng)驗(yàn)等級(jí)和專(zhuān)長(zhǎng)的設(shè)計(jì)師們之間的差異，Vikram 的團(tuán)隊(duì)對(duì)已有的前端框架進(jìn)行了研究，開(kāi)發(fā)出一個(gè)與 React 里組件相對(duì)應(yīng)的 Sketch 庫(kù)。

“現(xiàn)在我們繪制出的原型界面，其中超過(guò)75%的界面具有良好的名稱(chēng)和規(guī)范化的 Sketch 符號(hào)，開(kāi)發(fā)人員可以通過(guò) React Storybook快速編譯?！?/p>

“通過(guò)這種方式，我們的設(shè)計(jì)和前端開(kāi)發(fā)工作已經(jīng)實(shí)現(xiàn)了真正的自動(dòng)化生產(chǎn)，因此即使是一個(gè)小團(tuán)隊(duì)也能有精力專(zhuān)注在像故事板和敘事性體驗(yàn)等其他事情上?！?/p>

如何利用已經(jīng)建立的心理模型和設(shè)計(jì)語(yǔ)言帶來(lái)全新的體驗(yàn)

應(yīng)用程序 Hire 的設(shè)計(jì)負(fù)責(zé)人，來(lái)自 Google 的用戶(hù)體驗(yàn)設(shè)計(jì)總監(jiān) Sara Ortloff Khoury ，向我們闡述了設(shè)計(jì)規(guī)模化有時(shí)候就是將自己產(chǎn)品的現(xiàn)有功能變得更加突出和貼合實(shí)際，并趕超其他競(jìng)品，為終端用戶(hù)提供更好的價(jià)值。她的設(shè)計(jì)團(tuán)隊(duì)通過(guò)觀察自身已有用戶(hù)的行為來(lái)獲得靈感，而不是建立一個(gè)全新的UI語(yǔ)言。

Hire

通過(guò)統(tǒng)一使用 Google 自己的簡(jiǎn)單、易操作的效率工具 Material 設(shè)計(jì)系統(tǒng)，Sara 團(tuán)隊(duì)提高了應(yīng)用程序的易操作性和熟悉性。即 Sara 所說(shuō)的：利用一樣的設(shè)計(jì)系統(tǒng)創(chuàng)造出完全不一樣的體驗(yàn)。

“為了獲取有關(guān)矛盾來(lái)源的第一手資料，我們的團(tuán)隊(duì)花了大量時(shí)間觀察來(lái)自幾百家公司的團(tuán)隊(duì)是如何合作篩選、面試和招聘人才的。同時(shí)在這之中，我們也了解到求職者是如何尋找工作的?！?/p>

我們發(fā)現(xiàn) Google 工具在整個(gè)招聘階段中普遍地被許多公司和求職者使用。例如：Gmail（谷歌郵箱）被用于求職者和招聘團(tuán)隊(duì)間的溝通交流，Google 日歷被用于商定面試的日期，Hangouts Meet（谷歌電話）被用于遠(yuǎn)程面試，Google Docs 和 Sheets （谷歌文檔和表格）被用于追蹤求職者和進(jìn)程。

“全球化設(shè)計(jì)語(yǔ)言帶來(lái)的影響甚至可以大到激發(fā)出全新的產(chǎn)品。”

通過(guò)這項(xiàng)調(diào)查，我們知道了招聘團(tuán)隊(duì)喜歡使用 GSuite （谷歌應(yīng)用套餐）—— 因此我們就在 GSuite 中設(shè)計(jì)了一款應(yīng)用程序，不僅讓客戶(hù)可以繼續(xù)使用他們喜歡的工具，并且彌補(bǔ)了 GSuite 作為招聘工具中的不足，為其增加了新的商用價(jià)值。

通過(guò)利用 Google 效率工具現(xiàn)有的心理模型和已被全球化認(rèn)可和使用的 Material 設(shè)計(jì)語(yǔ)言，Sara 團(tuán)隊(duì)成功地發(fā)布了應(yīng)用程序 Hire —— 一款為解決一個(gè)核心問(wèn)題而整合多個(gè)具有相同設(shè)計(jì)系統(tǒng)的應(yīng)用程序。

Sara 團(tuán)隊(duì)已經(jīng)向我們證明為用戶(hù)服務(wù)的設(shè)計(jì)系統(tǒng)不僅能被規(guī)?；夷芗ぐl(fā)出新的，并能被輕松采用的解決方案。

設(shè)計(jì)語(yǔ)言的未來(lái)

設(shè)計(jì)的一個(gè)重大轉(zhuǎn)變，也是設(shè)計(jì)師們應(yīng)當(dāng)肩負(fù)起的職責(zé)，是語(yǔ)音聊天界面的出現(xiàn)，它帶來(lái)了對(duì)強(qiáng)大的內(nèi)容營(yíng)銷(xiāo)策略的需求。Chris Messina 指出這一任務(wù)已經(jīng)從市場(chǎng)營(yíng)銷(xiāo)人員身上，快速轉(zhuǎn)移到了設(shè)計(jì)團(tuán)隊(duì)的肩上。作為 Uber 的高級(jí)設(shè)計(jì)師，Chris 使用過(guò)公司內(nèi)部的設(shè)計(jì)語(yǔ)言，并見(jiàn)證了 UI 設(shè)計(jì)作為一門(mén)實(shí)踐和學(xué)科的演變。

“投入到設(shè)計(jì)系統(tǒng)中的想法和精力，顯然在提高設(shè)計(jì)師的進(jìn)步和合作效率，特別是當(dāng)下，需要跨越多樣化場(chǎng)景進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)就產(chǎn)生了明顯的益處?！?/p>

如今聊天類(lèi)應(yīng)用程序的活躍用戶(hù)數(shù)量已經(jīng)高于了傳統(tǒng)強(qiáng)勢(shì)的社交類(lèi)應(yīng)用程序

這些多樣化的設(shè)計(jì)場(chǎng)景，包括了有時(shí)我們需要使用一些用戶(hù)不可見(jiàn)的隱藏圖層和上下文本，尤其是在語(yǔ)音界面的設(shè)計(jì)中。而這些不可見(jiàn)元素的體驗(yàn)也是要被慎重考量的。同時(shí)，為了設(shè)計(jì)能夠適應(yīng)快速變化場(chǎng)景的需求，我們必須開(kāi)始思考設(shè)計(jì)語(yǔ)言的未來(lái)。

“設(shè)計(jì)不僅僅只是視覺(jué)，如今它還包括了聲音、表達(dá)方式以及潛在的發(fā)展方向?！?/p>

—— Stealth Startup 產(chǎn)品部長(zhǎng) Chris Messina

伴隨人工智能的出現(xiàn)開(kāi)始形成一條倫理和道德標(biāo)準(zhǔn)，設(shè)計(jì)出能帶來(lái)最佳語(yǔ)音聊天體驗(yàn)的方案和 用戶(hù)體驗(yàn)?zāi)Ｊ剑彩窃O(shè)計(jì)師正面臨的新挑戰(zhàn)。未來(lái)的設(shè)計(jì)語(yǔ)言可以堅(jiān)守“以人為本”這一設(shè)計(jì)原則，來(lái)確保設(shè)計(jì)師可以填補(bǔ)產(chǎn)品有用性和侵犯性之間的鴻溝。

Sara Ortloff Khoury 十分感興趣設(shè)計(jì)將會(huì)在語(yǔ)音和人工智能界面發(fā)展的帶動(dòng)下如何進(jìn)化，她指出，用戶(hù)體驗(yàn)專(zhuān)業(yè)人員必須要深入學(xué)習(xí)智能系統(tǒng)的實(shí)際運(yùn)作知識(shí)，才能確保他們能夠解決滿足人類(lèi)需求的實(shí)際問(wèn)題。

“為了能在設(shè)計(jì)需要規(guī)?；瘯r(shí)成功地提供解決方案，用戶(hù)體驗(yàn)專(zhuān)業(yè)人員必須快速了解并適應(yīng)人工智能和機(jī)器學(xué)習(xí)對(duì)產(chǎn)品設(shè)計(jì)帶來(lái)的與日俱增的影響?！?/p>

“由于技術(shù)進(jìn)步的發(fā)展和智能化，從用戶(hù)的立場(chǎng)出發(fā)變得越來(lái)越重要?！盨ara 補(bǔ)充道。

無(wú)論是界面還是體驗(yàn)，品牌體驗(yàn)都需要先了解一個(gè)產(chǎn)品或者品牌想傳達(dá)什么樣的感受。無(wú)論技術(shù)如何，在實(shí)現(xiàn)使用目的的同時(shí)，這一體驗(yàn)給用戶(hù)帶來(lái)怎樣的感受才是未來(lái)設(shè)計(jì)語(yǔ)言應(yīng)該考慮的首要目標(biāo)。

因此，這種對(duì)目的和感受的關(guān)注，以及設(shè)計(jì)于無(wú)形之中的趨勢(shì)，都要求設(shè)計(jì)系統(tǒng)能夠提供大量的應(yīng)用場(chǎng)景及配套解釋?zhuān)瑏?lái)告訴我們?nèi)绾螌⒁粋€(gè)既定的設(shè)計(jì)原則應(yīng)用于新出現(xiàn)的技術(shù)當(dāng)中。

“在直接實(shí)施一個(gè)系統(tǒng)之前先解釋其背后的原因。”

—— Vikram Babu，Gigster 產(chǎn)品設(shè)計(jì)師

 

原文作者 ：Jess Thoms

原文地址：https://www.invisionapp.com/inside-design/scale-design-systems/

編譯作者：大團(tuán)子，在讀研究生

評(píng)審指導(dǎo) | TCC委員團(tuán) | 胖魚(yú)、呵呵、彈跳編輯整理 | 三分設(shè)運(yùn)營(yíng)編輯 | 九十九

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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

收藏已收藏{{ postmeta.bookmark }} 點(diǎn)贊已贊{{ postmeta.postlike }}

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App

1年初級(jí)設(shè)計(jì)規(guī)模化