隨著一個公司團體內部的設計任務復雜化和規(guī)模化，要想確保自身輸出所有產(chǎn)品的一致性，給設計流程配置一套可參考的明確標準顯然是不可避免的趨勢，但是我們應該如何向客戶或者非設計師們說服這一決定的主要目的并非是為了偷懶減輕工作量，或者想一勞永逸后高枕無憂，同時還讓他們也加入到這一標準的建立中，共同創(chuàng)造出被公司內所有人認可的方案呢？

這篇文章就是針對這一問題很好地提供了幾種可以使用的成功策略，更好的是，它也幫助了我們加深對建立一套模塊化的設計系統(tǒng)所帶來好處的認識。

作為設計師和開發(fā)人員，我們知道一個占主導地位的（設計）系統(tǒng)能夠為公司的不同體驗輻射一致性。但有時候構建這樣一個系統(tǒng)被認為是一項極具風險的投資，并且它的價值不一定能立即可見。因此你應該采取什么樣的方式向客戶推銷一個設計系統(tǒng)？你又應該怎樣做才能說服公司將構建一個模式庫放到戰(zhàn)略路線圖之中呢？

你可以把一個公司的所有網(wǎng)站界面一頁頁打印出來，再集中到一個大展板上，來顯示公司內部是多么的四分五裂。

Dan Mall 在他「銷售設計系統(tǒng)」一文中，談到我們可以把一個公司的所有網(wǎng)站界面一頁頁打印出來，再集中到一個大展板上，來顯示公司內部是多么的四分五裂。這個例子也可以說明每次都從頭開始，一個個地搭建網(wǎng)站，沒有意義地重復造輪子，會浪費多少金錢和精力。

將這些不一致可視化，有助于發(fā)現(xiàn)和找到網(wǎng)頁中潛在的問題，但我們如何才能證明一個模塊化的設計系統(tǒng)對實現(xiàn)網(wǎng)頁的一致性有幫助呢？

畢竟設計系統(tǒng)是由一個個模塊，而非頁面構建而成的。我的經(jīng)驗告訴我，最有效的方法是向客戶展示有形的利益，而不是向他們解釋操作過程或者具體步驟。

因為客戶并不想知道原子設計、模塊化設計或者獨立模式，他們更愿意看到實際產(chǎn)出，比如一個可操作的原型或者一個包含了所有組件的界面。

圖片來源于 Brad Frost 網(wǎng)站

一種更好地展示產(chǎn)出的方法是使用 project hub（項目中心）

還有一種能更好地展示產(chǎn)出的方法是使用 project hub ① （項目中心）—— 一個可以將項目中所有重要的素材集中起來，按時間順序排列，并保持不斷更新的網(wǎng)站鏈接。這樣客戶可以通過隨時訪問它來查看項目的進程。你甚至可以給響應式原型中添加可編輯內容的屬性，來使原型中的文本變得可編輯，因此當一個項目的利益相關者想要調整文本時，她可以在任意瀏覽器中進行操作，然后通過調整窗口大小來查看文本是否也可以適用于窄屏。

當我們與其他公司合作時，我們從來不會推銷原子設計方法②，也很少推銷設計系統(tǒng)。相反，我們銷售的是一個能快速看到產(chǎn)出，（恰好）包含了模塊化設計方法論的新方案。我們“銷售”的是 項目中心和快速的周轉時間，而構建一個設計系統(tǒng)通常只存在于設計師和前端開發(fā)人員交流之中，而不是客戶需要思考的問題。

① 一個由 Brad Frost 提出，用于跟蹤設計項目進度的工具。通常是一個在線（公開或受密碼保護）形式的文件鏈接，以便團隊中每個人都可以進行訪問。

②原子設計是一種方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設計方法。

將一個設計系統(tǒng)納入到公司發(fā)展路線中的策略

有時我們不再是向客戶推銷一致性，而是要將它變?yōu)橐徽麄€公司團隊，無論市場營銷，內容管理，還是技術支持團隊，都明確的優(yōu)先考慮事項。而此時展示產(chǎn)出也同樣很有幫助，特別是因為這些產(chǎn)出可能不僅只是一組可操作的原型。Nathan Curtiss 在最近（由 Jina Bolton 精心策劃的） Clarity 會議的演講中建議，設計系統(tǒng)一定要確保扎根于一個公司團隊之中。

在他的個人經(jīng)歷中，確保一個設計系統(tǒng)在公司團隊中的成功，對提高團隊的工作效率至關重要，比如：設計系統(tǒng)能幫助各方參與者節(jié)省時間并快速獲得結果。但你要如何讓團隊去相信一些他們還沒有體驗過的價值呢？

很簡單，為他們創(chuàng)造這種價值。想象一下，如果在一塊具有不一致性體驗的展板旁，放一塊能帶來一致性體驗的展板進行對比；或者是對頁面的基本外觀（可能只是一個標題和幾個關鍵按鈕）進行重新設計來使頁面間的體驗一致，然后也打印出來，并將修改前后的兩塊展板放在一起對照會怎么樣呢？

也許你還沒注意，設計師和開發(fā)人員就已經(jīng)興奮地對其他更多的 UI 組件進行規(guī)范化了。

測量并提供可操作的數(shù)據(jù)

顯然，視覺設計是非常主觀的，因此引入指標和數(shù)據(jù) —— 比如轉換率 —— 比其他任何方式都能更有效地闡明論點。

定義一個包含了多種體驗（例如：一個用戶先從登錄頁面進入，然后瀏覽商品，提交訂單，并在自己手機的本地應用程序中查看物流狀態(tài)）的用戶旅程，然后記錄針對這些體驗的用戶訪談結果，并展示給利益相關者。

或者更好的是，你可以邀請他們來直接觀察訪談的過程。接著快速繪制出一個原型再進行一次用戶訪談，并保證兩次訪談中其他條件的一致，比較并清楚記錄下你的結果。如果這些結果遠低于你的預期，你最好繼續(xù)迭代你的設計，直到能獲得滿意的結果。

解決痛點

如果第一種方法沒有效果或者并不適用，你可以試試去尋找公司內的痛點。不一致的視覺體驗通常是由于背后使用的系統(tǒng)不一樣——大部分情況是因為使用了十分過時的系統(tǒng)。當然，這些系統(tǒng)之間或多或少還是有所聯(lián)系的，就算這種聯(lián)系可能只是為了監(jiān)測銷量或者把控質量。

或者有時我們可以花點時間來回顧一下客戶支持部門中積壓的工作和技術/設計上亟待解決的問題：通常與資深的客戶支持人員進行一次簡短交流，對揭示損害轉換率或者用戶參與性的常見痛點極有幫助。然后你可以專門針對這些痛點，找到一個方式——可以通過使用一個具有一致性的設計系統(tǒng)——來解決它們。再次強調，主要關注產(chǎn)出結果而不是操作過程。

優(yōu)先考慮最不可見的一致性

然而，無論是利益相關者還是忠實用戶都不會喜歡重大的，具有顛覆性的，或者 “大爆炸式“ 的新設計——不管它們與之前設計具有多么無可挑剔的一致性——對于那些多年來一直使用該網(wǎng)站的用戶來說都是弊大于利的。

因此比起進行一次翻天覆地的設計改革，我們是不是可以規(guī)定并使用不同級別的一致性？

這些級別可以從最不可見的一致性（行間距、印刷比例）到最可見的一致性（按鈕、圖標、排版）進行分布，很顯然在項目最開始階段 “可見” 級別的一致性甚至不用被提及。

在用戶訪談同時進行短時間設計沖刺

實現(xiàn)幾張關鍵頁面的初級一致性并不困難。但隨著項目的復雜化，這一任務可能會讓人望而生畏。這時為了保證效率并快速地獲得結果，最好的辦法是設計沖刺：一個用來回答關鍵性商業(yè)問題，由設計、原型繪制和用戶測試組成的五天設計流程。

圖片來源：https://www.gv.com/sprint/

設計沖刺采用了一個通過設計、原型繪制和用戶測試來回答關鍵性商業(yè)問題的概念。

一旦在公司范圍內解決問題時，無論是規(guī)范用戶體驗還是優(yōu)化前端，我們都不會有太多的時間來獲取有價值的結果。根據(jù)具體情況，我們會盡早地進行用戶訪談，通常在第三天就會安排上 4 次緊湊的用戶訪談。

原則很簡單：消除干擾并創(chuàng)建約束條件，以便在用戶訪談之中就能進行創(chuàng)造。理想狀態(tài)是，下午 1 點我們先進行 15 分鐘的用戶訪談，然后接下來 1.5 小時內——我們依據(jù)直覺和談話內容——來修改設計方案，因為 2 點半我們有另一個15分鐘的用戶訪談。

第二次訪談結束之后，我們會再花 1.5 小時進行第二次迭代，并在下午 3 點準時開始第三次的用戶訪談。只有在整個團隊都按計劃推動進程的情況下，你才能在用戶測試之前完成所有訪談工作。因此這意味著每位成員都必須能夠當機立斷出下一個沖刺環(huán)節(jié)要完成的工作。

顯然，你可能需要一個計時器來避免你的安排被打亂。另外，既然用戶就在現(xiàn)場，在團隊思考下一個迭代版本的時候，你還可以再安排幾場其他的用戶測試。

用網(wǎng)頁應用程序輻射一致性

但是你要如何戰(zhàn)略性的選擇優(yōu)先針對哪些組件進行設計沖刺呢？

比如：對于一家提供多種體驗，覆蓋從內容驅動型網(wǎng)站（如介紹一家酒店），到任務驅動型網(wǎng)頁應用程序（如預訂房間，帳戶管理），再到本地應用程序（如預訂房間，帳戶管理 ）等多種系統(tǒng)的公司，能為它的整體“性質”帶來一致性的最佳方案是什么？

根據(jù) Nathan Curtis 所說，由于網(wǎng)頁應用程序最具可追蹤性、交易性和實用性，并被證明能很好地指導設計系統(tǒng)的構建。最有效的方法是 “用網(wǎng)頁應用程序輻射影響力”，或者說是，“優(yōu)先實現(xiàn)核心產(chǎn)品的一致性，并以此為中心向營銷類網(wǎng)站和本地應用程序傳遞影響力” 。

圖片來源：https://twitter.com/sophshepherd/status/715611781733834752

Nathan Curits 在 Clarity 大會上提出我們應該用網(wǎng)頁應用程序，而不是網(wǎng)站或者本地應用程序來輻射一致性。

這的確有一定道理。比方說，網(wǎng)頁應用程序無論是與本地應用程序還是與網(wǎng)站之間都要比一個內容驅動的營銷類網(wǎng)站和一個功能驅動的本機應用程序之間有更多的共同點。所以把握網(wǎng)站中關鍵或核心的組件，就相當于同時把握了分布在整個體驗中的所有重復性模塊，在所有“屬性”中“輻射”。值得我們試試。

為設計系統(tǒng)制作一張 PDF 工作表

③在開始構建設計系統(tǒng)前，我們需要讓整個團隊達成共識。為此團隊可以先召集所有成員共同完成一張兩頁的 PDF 工作表（或 INDD③）來定義系統(tǒng)中所需要的部件、產(chǎn)品和人員。制作這張表單的目的在于收集數(shù)據(jù)，最終幫助團隊決定構建系統(tǒng)的戰(zhàn)略和優(yōu)先事項。顯然它也會被用在接下來的研討會之中。

③ InDesign文件（ InDesign Document ）的縮寫。

一張兩頁 PDF 工作表示例（部分），其作用是為團隊開始構建一個設計系統(tǒng)達成共識。

組件剪裁研討會

為了完成表單，Nathan 建議召集盡可能多的項目成員到同一個房間，參與一場組件剪裁研討會 —— 打印出所有的界面，邀請每個人來分別識別和剪裁上面的組件，再對它們進行分組和命名，從而生成一份團隊共享的詞匯表。FutureLearn 的交互設計師 Alla Kholmatova 也鼓勵設計師和前端開發(fā)人員都參與到這樣的研討會中。

圖片來源：Alla Kholmatova

在一場組件剪裁研討會中，團隊成員正在對組件進行剪裁和分組。

除了剪裁和命名組件之外，Alla 還建議將這些組件類別賦予不同的抽象名稱來表明它們的優(yōu)先級和功能，包括了 “助手”（不能獨立存在的組件，如 “回復” 功能的按鍵），“橋梁”（作為連接器的組件，如面包屑導航④ 或者分頁），以及 “單行本”（可以被看作一個完整獨立單元的組件，如一個 “hero”⑤ 框）。

④ 一個用來顯示用戶在網(wǎng)站或者網(wǎng)頁應用程序中位置的輔助導航系統(tǒng)。

⑤ 在網(wǎng)頁中指一個位于網(wǎng)頁最突出，最中心地方的獨立組件，通常是一個首頁中占據(jù)全屏的頂圖，其中可能包含文本，按鈕等其他元素。

組件的分組和命名

圖片來源：Alla Kholmatova

你還可以在 Slack 中添加一個組件并邀請整個團隊來對其命名和分組。你甚至還可以讓用戶也參與到組件剪裁、分類和命名的過程中，即使是以特別不正式的形式，比如就在一家最近的星巴克里。

總結

但這樣做真的值得嗎？每個網(wǎng)站都一定要有一個設計系統(tǒng)嗎？我們是否應該遵從我們對一致性和可預測性設計模式的癡迷，使它們在不同用戶體驗接觸點上保持重復呢？我并不能確定。

但我知道模塊化的響應式方法對于以下公司非常有利：

1. 提供的體驗中包含了大量的相似組件；
2. 希望解決移動設備碎片化和維護問題的公司是極具價值的。這也正是設計系統(tǒng)的用武之地。

坦白說，我還沒有遇到一個會真的對原子設計方法或模塊化命名研討會感興趣的客戶。但每個人都會對能節(jié)省時間的功能，以及更快更好的產(chǎn)出產(chǎn)生強烈的好感。因此下次如果你再碰到有人還沒有意識到模塊化方法的好處時，試著用項目中心，可操作的數(shù)據(jù)，已解決的痛點和無間隙的迭代這些有形的利益和產(chǎn)出來說服他們，而不要用你的操作過程。這樣你才更有可能成功。

原文作者：Vitaly Friedman

原文地址：https://www.smashingmagazine.com/2016/05/design-systems-responsive-design-sell-output-not-workflow/

編譯作者：大團子，上海，在讀研究生評審指導

編輯整理：三分設運營編輯皮皮

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

題圖來自Unsplash，基于CC0協(xié)議