設計系統Sprint 4：設計原則

Marcin Treder@UXPin的CEO。

UX設計師，認知心理學家，企業家。專註於產品開發的未來：http：//uxpin.com

作者介紹：我是Marcin，現在是全棧式UX設計平台-UX Pin的共同創始人兼首席執行官。在本系列文章中，我將彙報UXPin創建設計系統的歷程和原因，我們構建了設計系統、設計控制項庫，公用調色板，規定了管理基本設計風格屬性的方法。

·今天，我們將回顧一下，如何以設計原則為基礎加強我們設計系統。

·如何在不同的設計模式中選擇正確的樣式，使它在不同功能模塊中扮演同一角色？

·如何使設計決策在設計系統的不同模式和部分之間保持一致？

·如何在不依賴系統後續版本發布的情況下，最大程度地保持正在進行的項目的一致性？並將這種需求傳達給產品團隊？

我們越糾結於這些基本問題，我們就越開始感到不知所措。

這種受限於設計決策的感覺讓我想起了2015年末我們為UXPin帶來全新視覺美感的努力。

2015/2016年UXPin採用了的一套美學規範，作為新的設計原則

·確立設計原則 - 過程

2015年開始使用UXPin的新版本過程中帶來了大量的設計挑戰。我們必須協調多個設計師和開發人員，同時提供多個反饋源（可用性測試，客戶服務反饋，銷售反饋，數據分析，多變數分割測試），當然還有利益相關者的不同意見。

我們的設計團隊很快就協商出想要做出哪些架構變更。基於廣泛的用戶研究，我們確切知道我們期望在新界面中看到什麼。這個新界面的美學規範講述的是完全不同的故事。

該項目的主要視覺設計師和我有不同的審美感覺。在每一次設計評審中，我們自始至終都對審美進行主觀討論，可是它並沒有給我們帶來任何效果。為了克服這個問題，我們決定把我們的討論提升到更高的層次--談論原則。採用一個簡單的過程來建立我們的設計原則：

1. 查找產品進行類比。

首先通過參考您的產品類別之外的熟悉產品來討論原則（例如，不要讓你的SaaS（Software as a Service）應用程序引用其他SasS應用程序 - 這會觸發無意識的抄襲而不是設計）。你想讓你的產品感覺像是一輛白色的保時捷，還是一輛紅色的法拉利？你想讓它看起來像經典的布勞恩音響系統嗎？或者你覺得它應該更像是飛機的駕駛艙？開始列出這些類比產品，並思考每個選擇背後的原因。

2. 在類比產品中查找設計原則。

通過查看你的類比產品清單，想想是什麼讓這些產品成為現在的樣子?他們是否帶來熟悉感？直覺？還是他們也許通過豐富的選擇表明了無盡的可能性？列出你認為每種類比產品都是正確選擇的原因。

3. 通過現有的用戶研究使類比產品方案變得真實。

查看你選擇的原因列表，並標記可以連接到現有用戶研究結果的內容。用戶抱怨界面臃腫，並且您希望您的產品與原始iPod一樣簡單嗎？用戶是否指出並非所有關鍵特徵都很容易使用，並且你正在考慮構建一種能夠帶來空戰駕駛艙品質的東西？標記用戶研究的參考資料（最好鏈接到研究結果和來源）。

4. 建立價值聲明。

將你分析出的類比產品和整理的原因，從用戶研究中最常提到的內容開始進行分類，消除那些沒有被用戶提及的因素（如果你十分關心研究中沒有提到的內容那就保留它）。嘗試通過制定價值聲明來重寫清單：我們希望我們的產品像[ 您的類比產品 ]，因為它[ 分析出的原因 ]，對[ 我們的用戶/我/我們很重要]。例如：「我們希望我們的產品像80年代的白色保時捷911一樣，因為它帶來了永恆質量的感覺，對我們非常重要」，或者「我們希望我們的產品像HarmanKardon Soundstick Speakers一樣，因為它們現代和簡約，我們的客戶經u常提到我們的產品看起來過時了，界面臃腫，帶有不必要的功能「。你就明白了這種方。

5.概括你的原則

現在，簡單地拿出所有的價值陳述並刪除參考的類比產品（你可以將其保留在說明中），以使設計原則更具說服性。

完成這五個簡單步驟之後，我們的設計原則就準備好了！

.UXPin設計原則

1. 沒有分心。界面上的每一個冗餘部分（線條，按鈕，陰影，動畫）都是分心的來源。因此，應該消除這個問題，以便為用戶創造出具有良好架構和鼓舞人心的設計工具。

2. 以設計為中心。UXPin的設計應該以為用戶設計為中心。我們的界面應該像是有透明度一樣不引人注意。

3. 自適應的界面。UXPin的界面應該根據使用情況而操作。所有"非靈活性"功能都應該保持完全隱藏狀態，直到用戶可以使用它們（沒有不活動的按鈕和鏈接！）

4. 空間。UXPin的界面應該營造平靜的氛圍，引發用戶的創造力。這種氛圍可以通過在每個界面周圍留下很多空間來塑造。雜亂的界面是產生皮質醇和腎上腺素的壓力的來源，都會阻礙我們的創造力。

5. 靈感。UXPin設計應該有創造性，同樣的，不能成為其他SaaS應用程序設計的衍生物。我們應該通過最好的類比產品帶給我們的靈感，來創造出原創美學系統（我們的一些靈感來源：鋼筆試點消失點亞光黑色，揚聲器的HarmanKardon音響棒，電唱機寶碟音響公司，音箱DALI Zensor）。

6. 交互 一致性。界面組件，圖標，字體應該都是一致的，以創建可預測的用戶體驗。

7. 可預測的體系結構。UXPin的架構必須是可預測和自然的。功能應放置在正確的環境中，以便新用戶輕鬆發現。可預測體系結構示例：頁面的設置應放置在頁面旁邊。

我們開始將這些設計原則作為我們設計決策的基準，並且是在設計評審期間衡量自己的工具。例如，我們會問自己，從架構的角度來看，特定的界面解決方案是否足夠可預測，以及它是否會以負面方式干擾用戶的設計項目。設計原則在整個設計過程中提供了快速反饋。

我們也使用這些原則向整個團隊和利益相關者解釋我們的決定。設計原則對於奠定設計決策基礎而不涉及太多令人困惑的細節非常有用。Luke Wroblewski之後引用：

「設計原則是任何軟體應用的指導。他們將產品的關鍵特徵定義並傳達給廣泛的利益相關者，包括客戶，同事和團隊成員。設計原則闡明了所有決策都可以衡量的基本目標，從而使項目的各個部分朝著一個整體邁進。」

「Design principles are the guiding light for anysoftware application. They define and communicate the key characteristics ofthe product to a wide variety of stakeholders including clients, colleagues,and team members. Design principles articulate the fundamental goals that alldecisions can be measured against and thereby keep the pieces of a projectmoving toward an integrated whole.」

我們的原則對於為UXPin帶來新的審美非常重要，並且這些原則很快成為我們思考UXPin界面方式不可分割的一部分。隨後的所有項目都反映了我們的原則所表達的思路，即使我們在設計評審期間沒有直接提及它們。

設計原則開始在潛意識層面上工作，直到我們必須做出更基礎明確的設計決策--將影響整個產品界面的決策。在這個新的背景下，我們開始面對熟悉的問題分歧。然而，潛意識過程在項目工作中運行良好，在設計系統工作期間卻失敗了。

面對這個新的挑戰，我們必須將設計原則帶回到我們的意識中，並用它提醒我們的團隊。我們必須集中我們的設計原則，並確保它們不僅在所有項目中佔據優勢，而且在我們的設計系統的所有部分也佔據優勢。

如何實現？這很簡單 -? 設計原則必須成為設計系統的一部分。

UXPin的設計原則被提供給我們設計系統的其他部分

.設計系統中的設計原則

現在你可以說我們我們熱愛設計原則。在UXPin中，它是一種經過驗證的武器，可以解決以下問題：

·無盡的主觀討論

·設計要求不明確

·在最基本的層面不一致

但不知何故，大多數設計系統根本不包含設計原則。根據我們的研究，略高於40％的公開可用系統包括都包含設計原則。

在這40％中，我們有一些最全面的設計系統：

Salesforce Lightning設計系統包含一套通用的高級設計原則：

·明晰

·效率

·一致性

·美觀

Salesforce照明設計系統的設計原則

Google材質設計原則的設計方法非常簡約，主要關注材質設計如何與通用設計系統一樣獨特。他們的原則是：

·採用材質比擬設計

·醒目的，圖形，有策劃性的設計

·給動效提供意義

Google材料設計 ?- 設計原則

Apple iOS有一套非常詳細和特定的原則：

·審美的完整性

·一致性

·有導向性的操作

·反饋

·隱喻

·用戶控制

Apple iOS設計原則

從Material Design設計真正屬性的一系列規則中，到SalesforceLightning 系統中的一系列鼓舞人心的聲明，再到iOS人類指南中對優秀設計的精確和嚴格定義。正如你所看到的，構建一套設計原則的方法各不相同。

UXPin的一些原則指出了我們所有界面所期望的特定設計決策（例如，可預測的架構原則，要求在相似的情況下採取相對應的行動），其他則具有更普遍的特質，旨在啟發設計靈感（例如原則的靈感）。

那麼，哪種設計原則才是正確的呢?

. 什麼是好的設計原則？

不存在一種規範製作設計原則的方法，良好的原則是對團隊使用有意義的原則。由任何組織或由設計運營團隊管理的設計原則存在的理由是為用戶和產品提供服務。如果你的團隊從根本上拒絕使用這套原則，或者簡單地忽略它們，他們就失去了整個價值。在處理設計原則時，您必須與團隊核對並測試您準備的內容的實用性。

如果您和您的團隊對於值得採用的總體方向感到不確定， Joulee創建了一套巧妙的啟發式方法，以達到一套完整的設計原則：

「另一方面，一套很好的設計原則可以做到以下幾點：

1.有助於解決有關具體設計決策的實際和現實問題。

2.適用於整個設計決策階段，我們今天可以想到的甚至將來會出現的問題。

3.賦予人們「為什麼」的人性化意識，讓每個人都很容易理解，包括非設計師。

4.即使是持有不同觀點的理性的人都可以同意的有優先順序的觀點

5.它通常與有說明性的例子結合在一起，說明該原則如何適用於特定的決策。「

概要

雖然設計原則並不是設計系統中最典型的部分，但我強烈建議您考慮它們。擁有更好的理論基礎，並通過一系列設計原則可以更有意義地指導團隊創建和持續實踐設計系統。

譯者：Sumayezi

微交互翻譯小組翻譯，如有任何問題，請指正！

·End·

微交互∣細節設計成就卓越產品

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！