起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何制定產品的設計原則？設計總監帶你一起從經典案例中總結經驗
編輯導語：設計原則的制定可以減少決策的困難，推動設計業務的進行。那么，如何制定符合自身產品定位的設計原則？本篇文章里，作者總結了最佳產品設計原則的幾個特點，并就產品設計原則的相關案例進行了拆解和總結，一起來看一下。
Screenshots from Pinterest
作為 SimpleSite 的設計團隊負責人，我最近參與了一系列產品設計原則的制定。在此過程中，我花費了大量時間來研究理論，學習市面上已有的優秀產品，并從一些成功的公司案例中獲得啟發。
能夠將理論與具體的、現實生活中的案例結合對我們來說幫助很大，因為我們一直在努力定義自己的設計原則。這就是同時也是我決定寫這篇文章的原因。它由兩個主要部分組成：
- 最佳產品設計原則的 4 個特點：更詳細的內容我在《設計原則指南》中也提到過。
- 產品設計原則的最佳案例：如果你想從 Asana、Codecademy、Medium、Pinterest 等優秀的產品中獲得靈感，請繼續往下看。
無論是掌握最佳產品設計原則的通用點，還是從具體案例中獲得靈感，本文都具備價值！
一、最佳產品設計原則的 4 個特點?characteristics of the best Product Design Principles
正如將在后面的案例中看到的那樣，當涉及到產品設計原則的格式時，沒有放之四海而皆準的標準。然而，優秀案例似乎有一些共同的特點。因此在創建自己的一套設計原則時，可以將其作為指導，使這些案例能夠啟發有關設計原則的格式和措辭。
1. 限制數量
制定 3 到 5 條原則，以確保它們真正被記住和使用。如果原則過多那將無法被掌握，你和其他人都不可能記住所有這些內容。
少量原則會使決策變得簡單——過多原則會增加決策的困難性。
以 Pinterest 為例。雖然每一塊內容都有幾個標題和句子加以解釋，但它們也只是堅持三個重要原則。
1）清楚
它是靠直覺而不是學習，它讓用戶感到更強大，它讓內容嘗試起來更棒。
2）生動
它是豐富多彩的，它是視覺化響應的，它是意想不到的。
3）牢固
它是為探索而打造的，它是難以誤操作的，它是可撤回的。
2. 差異化
為什么人們選你而不是你的競爭對手？你的產品設計原則應該能幫助你回答這個問題。
通用設計原則適用于所有人。而你的產品設計原則不是。復制一個通用的設計原則并在上面貼上你的名字是多余的。應當避免使用像是“對用戶友好”和“讓事情變簡單”這樣老生常談的語句。
捫心自問：換一種產品的設計原則是否正好相反？如果不是的話，它可能太普遍了，不能成為您產品的一個很好的差異化特點。
考慮 “[選項A] 優先于 [選項B]” 這樣的格式，用以強調你的產品是什么或不是什么，這將有助于你對許多功能和想法說不。早期的 Medium 產品設計原則就是一個很好的例子：
- [方向] 優于 [選擇]；
- [恰當] 優于 [統一]；
- [進化] 優于 [成品]。
“假設在一個產品里優先考慮使用“選擇”、“統一”、“成品”等原則，那么對于 Medium 來說，這些原則恰恰則需要先被“忽略”，這才是 Medium 與其他產品的差異化所在?！?/p>
3. 明確的和可操作的
產品設計原則應該指引你在日常工作中的行為。它們旨在消除潛在的解決方案，并指導你做出決策。這就要求原則不可以措辭含糊或模棱兩可。
Codecademy 的第一個設計原則就是一個很好的例子。它非常具體，且解釋了基本原理，并提供了一個具體的例子。
只創建一欄
如果允許，可以將所有內容限制為單列布局 。這有助于我們專注于頁面的核心內容，同時也使我們對原則表述有更多的控制權。在第一個響應式設計系統中，我們通過縮小不同屏幕尺寸（如手機和平板電腦）之間的差異，一欄式布局也更容易實現。
Codecademy 通知的單列布局
4. 簡潔而令人難忘
即使把原則限制在 3 條以內，你和團隊也無法記住那些抽象冗長的原則。它們不會停留在你的腦海里，鼓勵你用某種方式思考。相反，你需要確保你的產品設計原則簡潔、令人難忘。
Asana 展示了措辭良好的產品設計原則案例。以下是一些啟發靈感的方法。
1）通過清晰化來增強自信
無論是應用程序中，或是團隊內部，發生了什么以及為什么會發生，都需要明確的表達。
2）保持一致和標準 ，在合適的時機進行創新
用戶應該覺得 Asana 既傳統又有別于傳統。Asana 同時使用圖標和文本標簽來提高其功能的清晰度，甚至當用戶懸停在任何可以與之交互的對象上時，也會使用提示（見下面的屏幕截圖）。他們一邊堅持用戶熟悉的模式，一邊又探索更為新穎的設計，以便使用戶使用更為流暢。我個人很喜歡 Asana 的設計。
一個 Asana 的截屏
二、產品設計原則的案例?The best examples of Product Design Principles
下面的產品是按字母順序，并非按照其設計原則的優質與否排序的。它們都很棒，但在格式和表達方式上卻截然不同?？纯此麄儯?strong>在創建自己的設計原則時能夠激發靈感！我們將介紹以下產品案例：
- Asana
- Codecademy
- Degreed
- Firefox
- Medium
- Windows
- Wonderbly
1. Asana
Asana為什么以及如何創建他們的設計原則：
1）讓用戶專注于自己的工作而不會受到干擾
用戶的注意力應該在他們的控制范圍內，只有與個人相關的更改才會分散用戶的注意力。
2）通過清晰性增強信心
無論是應用程序中，或是團隊內部，發生了什么以及為什么會發生，都需要明確的表達。
3）培養富有成效的和情感上令人滿意的人際關系
用戶感覺自己是團隊的一部分，在團隊中，他們可以依靠彼此來完成自身任務，并感到一同朝著一個共同的目標前進。
4）為快速、輕松和有意的互動而設計
簡單和普通的任務應該是 毫不費力且顯而易見的；復雜的任務應該讓人感覺高效和愉快。但是快速不應該導致不準確。
5）在不斷的使用中發現每個人的能力
無論使用了多少功能，每個人都應該清楚的知道如何使用 Asana，并通過不斷地使用增強個人能力。
6）保持一致和標準，并在需要時進行創新
用戶應該覺得 Asana 既傳統又有別于傳統。
2. Codecademy
- 保持一欄空間；
- 社會認同感；
- 更多對比；
- 更少的表單；
- 保持專注；
- 直接操控；
- 視覺層次結構；
- 視覺識別；
- 更大的目標；
- 為邊緣場景而設計。
3. Degreed
Degreed 有一套12條設計原則，太多了，不容易回憶。同時，并不是所有的設計原則都具有最佳產品設計原則的共同特點。我在下面列出了我的最喜歡的幾條原則：
1）第 5 原則：使用戶一次專注于一項主要操作
通過將屏幕、關注點或行為集中在一個主要任務上來指導用戶。
果斷進行優先級排序，使得用戶選擇變得簡單。防止分心。所有不能幫助用戶專注于主要任務的元素和樣式都會被認為是視覺上的雜亂，和對用戶的巨大干擾。請注意，界面中的所有內容都必須由用戶的大腦處理，處理的內容越少，認知負荷就越低。
2）第 6 原則：最小化用戶輸入用戶輸入需要花費大量的精力和時間。
始終爭取最少的用戶輸入來達到目標。用戶需要的每一個輸入都會增加用戶體驗的摩擦，并增加放棄的機會。
3）第 8 原則：為用戶做決定不要害怕為用戶做決定。
提供更少的選項會給用戶更自信的感覺，因為不用擔心。要意識到選擇的悖論；提供大量的選擇會讓用戶感到不知所措，因為他/她需要評估每一個選項是否符合他/她的目標。
4）第 11 原則：別說 “哇”，說 “當然”永遠不要追逐 “哇效應”。
當產品設計以最好的方式解決了用戶的問題或需求時，產品設計就成功了。設計出高效、愉悅的產品，用戶的反應是“當然，這是顯而易見的。
4. Firefox（火狐）
注意他們在 Firefox 上的做法有點不同，表明在 “產品設計原則” 的格式上沒有對與錯。每個項目符號就是Firefox所稱的設計價值，以下是相關原則：
1）時刻關注你
- 用戶主導；
- 默認即隱私；
- 不亂搞驚喜；
- 可行的建議。
2）用戶參與會幫我們做得更好
- 調研幫助我們的非核心社區提供了發言權；
- 讓用戶從智能的默認設置開始使用產品；
- 定制化不僅僅是可見的，還有隱形的；
- 邀請更多個性的人參與，他們不僅是用戶。
3）一起玩，更好玩
- 用戶擁有決策權和控制權；
- 使你選擇的服務簡單易用；
- 為用戶提供最佳建議。
4）活力
- 讓用戶感覺屏幕后有真人與其溝通；
- 有趣的工具更易使用；
- 幽默和奇思妙想；
- 有態度，有觀點。
4）精工細作
- 另請參閱我們的視覺設計指南；
- 視覺和感受在多平臺上的延展；
- 可感知的品質至關重要。
5）全球化
全球化意味著本土化！
6）平衡有力和簡單
- 80 / 20 / 2：默認界面極盡簡單，而在需要時輕松定制。
- 追求讓用戶易于理解，而不是追求界面的簡潔。
7）通情達理的網站
- 關注用戶的任務和情境；
- 很多任務在實際操作時需要其他工具配合瀏覽器；
- 快速訪問你想去的網站、你想完成的任務；
- 不要用技術用語，用戶難以理解。
8）卓越性能
- 性能是客觀的，而用感受性能是主觀的；
- 一個愉悅的用戶更自如地使用產品。
5. Medium
請注意，這些在回復中被稱為 “……我們在 Medium 精心設計的一些早期設計原則”。他們不一定是正式的和最終的，但仍然是一個偉大的靈感來源。
1）[方向] 優于 [選擇]
當我們設計 Meidum 的編輯器時，我們總是提到這個原則。我們特意提供了布局、字體、顏色的選擇指南和引導。引導用戶比讓用戶做選擇更適合我們的產品，因為我們希望用戶能專心寫作，而不是分心于選擇字號、顏色這些事。
2）[恰當] 優于 [統一]
這條似乎有所爭議，但是當我們的應用再多終端上應用，其目的很明確——我們愿意適當打破一致性，只為了我們的產品能更好的適用不同的操作系統、設備或其他環境。
3）[進化] 優于 [成品]
在 Mudim 上面分享草稿、撰寫回復和留下筆記可以佐證這一點。Meidum 中的內容應該是反碎片化的，應該隨著用戶的使用不斷進化。我們可沒打算為互聯網印刷成品書籍。
6. Pinterest
對于每一個原則的完整描述，以及它們是如何在 Pinterest 所說的“基礎”上變得更具可操作性的，請查看本文。
1）清楚
它是靠直覺而不是學習，它讓用戶感到更強大，它讓內容嘗試起來更棒。
2）生動
它是豐富多彩的，它是視覺化響應的，它是意想不到的。
3）牢固
它是為探索而打造的，它是難以誤操作的，它是可逆的。
7. Windows
Windows 有 8 個設計原則，所以對他們的員工來說可能太多了。但是它們都是高質量的！
1）減少概念以增加信心
- 你提供了一個新概念嗎？為什么？有必要嗎？
- 你能去除不必要的概念嗎？
- 你做的區分是有意義的嗎？
- 用戶體驗是否延續了相同的概念？
2）小事有好有壞
- 什么是被多數人認為或者經?？吹降闹匾?“小事”？
- 你在解決什么小問題？
- 少做為佳。
- 不要把你經歷中的小事刪掉。
- 計劃周密的細節。
- 修復小錯誤。
3）擅長 “看” 和 “做”
- 你最擅長什么？它的外觀是否反映了它的優點？
- 用戶看到的第一件事是否反映了用戶體驗的偉大之處？
- 用戶體驗是否符合預期？
- 用戶能做什么是顯而易見的？
- 你只提供必要的步驟嗎？
4）解決分心問題，而不是發現問題
- 減少分心。
- 不要讓特性相互競爭。
- 提交新功能。
- 這些不是可發現性差的解決方案：在 “開始” 菜單中固定圖標；在桌面上放置圖標；在通知區域中放置圖標；使用消息通知；初體驗很重要；使用引導。
5）在旋鈕和問題之前的 UX
- 調低用戶的質疑聲。
- 僅詢問一次。
- 不需要配置便可收獲價值。
- 問題是否已經詢問過？
- 尋找整合的機會。
6）個性化，而不是定制
- 該功能是否允許用戶表達自己的元素？
- 你是否區分了個性化和定制？
- 個性化設置必須是一個新功能，還是可以利用現有的功能和信息（例如用戶的位置、背景圖片或色塊）？
7）重視體驗的生命周期
- 考慮所有階段的用戶體驗：安裝和創建；首次使用和定制；經常使用；管理和維護；卸載或升級。
- 像使用了 12 個月一樣體驗一遍。它是否有：現實的內容；真實的體積。
8）時間很重要，所以為忙碌的人們打造
- 所有的用戶體驗原則同樣適用于 12 英寸和 20 英寸的屏幕尺寸。
- 不要打斷別人。
- 為啟動和停止附加說明（快速返回，不妨礙其他用戶體驗）。
- 為獲取和失去連接附加說明。
- 性能 是普遍用戶體驗的殺手。
8. Wonderbly
看看 Wonderbly 的設計系統，其中使用了這些原則。
1）成為講故事的人避免雙方交談。
通過反映客戶的需求和愿望，同時給他們帶來愉快的旅程，從而給客戶留下更深刻的印象。吸引觀眾將推動銷售和忠誠度。通過統一內容、社區和商業，我們可以激勵人們與我們一起探索、互動和購物。
2）加入我們的俱樂部
在我們的網站中創建產品、功能和品質，從而給客戶帶來信任感。倡導可發現性、可靠性和可信度將減少整個體驗中的不確定性。可靠性將使客戶從一次性購買者變成終身購買者。
3）優化體驗利用流暢的布局和能夠兼容不同設備的方法為每種類型的用戶創造最佳體驗。
不斷努力為客戶簡化旅程。利用本地特色推廣產品，探索新技術。
4）老年人優先
我們的客戶不僅是技術嫻熟的城市媽媽，還有數碼新手的祖父母。我們必須為每種類型的客戶提供簡單、有效和有回報的客戶體驗。幫助人們做出正確的決定，并引導他們在任何需要的地方進行購買。
本文翻譯已獲得作者的正式授權（授權截圖如下）
作者：Christian Jensen
原文：https://uxdesign.cc/learn-from-the-best-product-design-principles-3ca706ac7ccb
譯者：張宇旸；審核：徐曼鷺、李澤慧、張聿彤；編輯：孫淑雅
本文由@TCC翻譯情報局 翻譯發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
