Design Systems 02 - 什麼是 Design Principles

5key發表於2017-11-30


上週我們開啟了一個新的期刊系列「Design System」,第一期就收到了很多會員好評反饋。說實話有點超出了我的預期,沒想到這麼多人對這個主題感興趣,感謝大家的支援,也歡迎大家繼續給我提意見。

第一期我們主要介紹了 Design System 的組成,以及這些概念的定義。接下來的幾周內我將繼續以這些概念展開進行詳細講解,今天我們先從 Design Principle 開始。

宣告:本系列週刊並非「Design Systems」的翻譯,而是基於本書結構框架的讀書筆記和經驗總結。依然推薦大家閱讀原書,週刊內容可以作為理解輔助。

Design Principle

Design Principle,其中文翻譯是設計原則。在上期週刊中我們給出過定義:Principles 是一系列的規則、指導以及設計中的注意事項。它是我們構建一套 Design System 的起點,用於解決業務、使用者體驗中的問題,引導設計往既定的方向前進。

Principle 最為重要的目標就是確保所有參與到產品設計中的每一個人有著共同、明確的目標,並以此作為標準為產品推進過程中的每一個決策的判斷依據。換句話說 Principle 是整個產品設計的起點,它應該被理解並融入到設計的過程中,比如 Component、Pattern。

Principles 之間的差異

如果你也關注 Design System,應該已經看過很多相關的案例。Material Design 、Lightning、Carbon、MailChimp… 這些不同 Design Systems 所提出的設計原則似乎有很多類似,但又有很多不同。哪一個才是正確的?哪一個適合自己?

這個問題的答案其實沒有絕對,正如我們前面所提及的 Design Principle 是為了解決當前產品的問題而產生的。這裡有一個很重要的資訊,這個產品是什麼?

通常情況下我們都是在考慮為自己所服務的產品來制定相應的 Principle,所以網路上每一個 Design System 所提出的 Principle 都具備參考意義,但不一定適合自己,我們更需要的是通過這些案例來理解的它們是如何推導以及形成的思路。

通常來說我會將 Design Principle 分為業務型和抽象型兩類。比如 Visa、SAP 和 Material Design、Fluent。

上圖右側是 SAP 的 Fiori Design,它強調的基於角色、愉快的、一致連貫的、簡單和適應的。如果你對 SAP 的業務有一些瞭解(甚至是它的使用者),你應該不難理解這些關鍵詞對於 SAP 使用者的重要性。這些關鍵詞與 SAP 的業務特性有著非常密切的關聯,甚至說做不好這些點他們的使用者將不會願意繼續選擇他們的產品。

相比而言 Material Design 給出的 Principles 就比較抽象了,似乎很有道理但似乎又什麼都沒說。作為一款作業系統級的語言,它更多的是提供一個土壤,卻又不知道下一個新出現的產品會是什麼樣。他們更需要的是賦予整個環境一個完整的世界觀,一個經得起推敲(Material)的世界觀。

Material Design 這類 Design System 很重要,我們需要去學習研究它,不過更多是站在其平臺(iOS 也一樣)進行產設計。對於 Principles 的研究,我們更應該放在這些偏業務的型別上。畢竟我們很難(也不一定需要)建立一個世界觀,但做好一款產品是迫切需要的。

如何評判一個 Design Principles 的好壞

抽象型的 Principles 本就不多,它們大多都有著完整的世界觀,是經得起推敲的。所以我們還是將重點關注到業務型 Principles 上。

01.來源於業務

既然是業務型,它們就必定會存在差異性。Visa 和 SAP 都有著自己完整的 Principles,但由於業務特性就會有著明顯的差異。

Visa(上圖右)在其新發布的 Design Systems 中提出了「Design Everywhere」的理念。作為一個國際化的產品,如何在全球使用者的不同裝置上快速、安全的完成支付、資金管理操作是他們最為重要的目標和方向。而 SAP 作為企業內部解決方案提供商則更關注於角色、操作的連貫性等目標。

簡單、有效、輕量這些我們常見的關鍵詞沒有錯,沒有人會質疑這些在產品設計中的通用規則,這也是每一個產品都應該做到的。但一個稱職的 Principles 首先是需要服務於業務及其使用者的痛點,基於解決問題的角度出發。

02.實用可行

我們在前面提到過,Principles 的作用是給予解決問題的實際指導,能夠用於作為產品設計決策中的依據。那麼我們就不能只管推導產出,這把“尺”是否好用同樣非常重要。書中有一個非常形象的案例,我們不妨再提出來分享一下。

關於「簡潔」這個關鍵詞,聽來絕對沒錯,但應該如何去定義呢?基於它我們可以有兩種不同的說法:Make it simple、No needless parts。

「Make it simple」 聽起來很不錯,沒有人可以說它不對。簡單、易用應該是每一個產品都應該努力的目標,但這似乎不夠清晰。究竟多簡單才是簡單?我們如何去衡量它?

相較之下 「No needless parts」則更加的“有力度”。每一個元素(從大到小)都應該有存在的目的,為解決使用者的問題而服務。如果你解釋不了這個元素對於產品的正向作用,那麼它可能就不應該出現在這裡介面上。

“這個是否簡單”,這個問題對於每個人都可能有不一樣的答案,這會讓整個判斷變得不夠客觀。相反“這個是否必須?”則更容易判斷,可以落實到介面上的每一個元素上。

我們需要 Principles 具備指導意義,所以它不應該只是一個好聽的關鍵詞,而是需要更實際的去表達它的意義,為設計的過程提供可操作的參考意見。

03.優先順序區分

我們所接觸到的 Principles 一般都會有 4 到 5 個關鍵詞,它們代表著產品在不同維度上的目標。但這些標準之間也應該有著優先順序的差異。試想一下如果當某個介面上效率和美觀出現衝突時應該如何處理? 這個時候一個好的 Principles 應該同樣也能給出答案。

最好的案例就是 Salesforce 的 Lightning Design System。Lightning 的 Principle 是清晰、高效、一致、美觀,但對於這四個關鍵詞他們定義了優先順序,美觀不能超越效率和一致性、清晰甚至成為他們絕對第一的關鍵詞。

Principles 的目標是統一思想,也是提升決策的效率,但業務的複雜度往往會帶來很多無法預估的情況。就像一個頁面上的核心 CTA 不宜超過 2 個一樣 Principles 也需要有優先順序的差異,當出現“衝突”時最重要的那一個是需要最先被保障的。

04.易於記憶

問問團隊裡小夥伴,看看他們腦海中的 Principles 是什麼。如果沒有人能記住或是有所偏差則說明我們的定義是有問題的。要讓大家能夠牢記,首先 Principles 需要基於業務、問題來進行制定讓大家能夠產生共鳴;其次還需要我們在日常的討論、決策中經常去使用它。

Airbnb 的 Principles 是(Unified、Universal、Iconic、Conversational),這個原則深深的植入了他們每一個設計中。每次涉及到新元件的設計,他們都會將這些關鍵詞帶入到設計中,看看自己的設計是否滿足 Principles 的要求。

“When we design a new component, we want to make sure it addresses all four of those. If we didn’t have a set of principles it would be difficult to agree on things. We want to make sure each piece lives up to it.”

— Roy Stanfield, principal interaction designer, Airbnb

人的記憶是有限的,通常一組關鍵詞超過 4 個就會難以記憶。所以我們需要儘可能的控制在 3 到 5個,並且確保它們易於記憶。這方面 Spotify 做得很有意思,它們的 Principles 是 TUNE(tone、usable、necessary、emotive),翻譯成中文是“曲子、曲調”,這個正好貼切與它們的業務,也非常的容易記憶。

前面我們討論了什麼是 Principles,如何去定義它的好壞,我們可以嘗試著去理解、拆分你的業務或是競爭對手。在餘下的全文中我們將繼續討論如何著手,開始建立符合自己業務的 Design Principles。

Design System 是 PinDesign 週刊的一個新系列,基於「Design Systems」這本書結構框架的讀書筆記和經驗總結。希望將自己的感受和經驗分享給大家,輔助大家的閱讀。

加入 PinDesign 會員,獲取本期主題「什麼是 Design Principle」的全文內容及前兩期週刊的贈送。

點選領取 PinDesign 會員計劃 50 元優惠券

Design System 往期回顧:

  1. 什麼是 Design System

相關文章