編輯導(dǎo)語：設(shè)計(jì)原則的制定可以減少?zèng)Q策的困難，推動(dòng)設(shè)計(jì)業(yè)務(wù)的進(jìn)行。那么，如何制定符合自身產(chǎn)品定位的設(shè)計(jì)原則？本篇文章里，作者總結(jié)了最佳產(chǎn)品設(shè)計(jì)原則的幾個(gè)特點(diǎn)，并就產(chǎn)品設(shè)計(jì)原則的相關(guān)案例進(jìn)行了拆解和總結(jié)，一起來看一下。

Screenshots from Pinterest

作為 SimpleSite 的設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)人，我最近參與了一系列產(chǎn)品設(shè)計(jì)原則的制定。在此過程中，我花費(fèi)了大量時(shí)間來研究理論，學(xué)習(xí)市面上已有的優(yōu)秀產(chǎn)品，并從一些成功的公司案例中獲得啟發(fā)。

能夠?qū)⒗碚撆c具體的、現(xiàn)實(shí)生活中的案例結(jié)合對(duì)我們來說幫助很大，因?yàn)槲覀円恢痹谂Χx自己的設(shè)計(jì)原則。這就是同時(shí)也是我決定寫這篇文章的原因。它由兩個(gè)主要部分組成：

1. 最佳產(chǎn)品設(shè)計(jì)原則的 4 個(gè)特點(diǎn)：更詳細(xì)的內(nèi)容我在《設(shè)計(jì)原則指南》中也提到過。
2. 產(chǎn)品設(shè)計(jì)原則的最佳案例：如果你想從 Asana、Codecademy、Medium、Pinterest 等優(yōu)秀的產(chǎn)品中獲得靈感，請(qǐng)繼續(xù)往下看。

無論是掌握最佳產(chǎn)品設(shè)計(jì)原則的通用點(diǎn)，還是從具體案例中獲得靈感，本文都具備價(jià)值！

一、最佳產(chǎn)品設(shè)計(jì)原則的 4 個(gè)特點(diǎn)?characteristics of the best Product Design Principles

正如將在后面的案例中看到的那樣，當(dāng)涉及到產(chǎn)品設(shè)計(jì)原則的格式時(shí)，沒有放之四海而皆準(zhǔn)的標(biāo)準(zhǔn)。然而，優(yōu)秀案例似乎有一些共同的特點(diǎn)。因此在創(chuàng)建自己的一套設(shè)計(jì)原則時(shí)，可以將其作為指導(dǎo)，使這些案例能夠啟發(fā)有關(guān)設(shè)計(jì)原則的格式和措辭。

1. 限制數(shù)量

制定 3 到 5 條原則，以確保它們真正被記住和使用。如果原則過多那將無法被掌握，你和其他人都不可能記住所有這些內(nèi)容。

少量原則會(huì)使決策變得簡(jiǎn)單——過多原則會(huì)增加決策的困難性。

以 Pinterest 為例。雖然每一塊內(nèi)容都有幾個(gè)標(biāo)題和句子加以解釋，但它們也只是堅(jiān)持三個(gè)重要原則。

1）清楚

它是靠直覺而不是學(xué)習(xí)，它讓用戶感到更強(qiáng)大，它讓內(nèi)容嘗試起來更棒。

2）生動(dòng)

它是豐富多彩的，它是視覺化響應(yīng)的，它是意想不到的。

3）牢固

它是為探索而打造的，它是難以誤操作的，它是可撤回的。

2. 差異化

為什么人們選你而不是你的競(jìng)爭(zhēng)對(duì)手？你的產(chǎn)品設(shè)計(jì)原則應(yīng)該能幫助你回答這個(gè)問題。

通用設(shè)計(jì)原則適用于所有人。而你的產(chǎn)品設(shè)計(jì)原則不是。復(fù)制一個(gè)通用的設(shè)計(jì)原則并在上面貼上你的名字是多余的。應(yīng)當(dāng)避免使用像是“對(duì)用戶友好”和“讓事情變簡(jiǎn)單”這樣老生常談的語句。

捫心自問：換一種產(chǎn)品的設(shè)計(jì)原則是否正好相反？如果不是的話，它可能太普遍了，不能成為您產(chǎn)品的一個(gè)很好的差異化特點(diǎn)。

考慮 “[選項(xiàng)A] 優(yōu)先于 [選項(xiàng)B]” 這樣的格式，用以強(qiáng)調(diào)你的產(chǎn)品是什么或不是什么，這將有助于你對(duì)許多功能和想法說不。早期的 Medium 產(chǎn)品設(shè)計(jì)原則就是一個(gè)很好的例子：

• [方向] 優(yōu)于 [選擇]；
• [恰當(dāng)] 優(yōu)于 [統(tǒng)一]；
• [進(jìn)化] 優(yōu)于 [成品]。

“假設(shè)在一個(gè)產(chǎn)品里優(yōu)先考慮使用“選擇”、“統(tǒng)一”、“成品”等原則，那么對(duì)于 Medium 來說，這些原則恰恰則需要先被“忽略”，這才是 Medium 與其他產(chǎn)品的差異化所在?！?/p>

3. 明確的和可操作的

產(chǎn)品設(shè)計(jì)原則應(yīng)該指引你在日常工作中的行為。它們旨在消除潛在的解決方案，并指導(dǎo)你做出決策。這就要求原則不可以措辭含糊或模棱兩可。

Codecademy 的第一個(gè)設(shè)計(jì)原則就是一個(gè)很好的例子。它非常具體，且解釋了基本原理，并提供了一個(gè)具體的例子。

只創(chuàng)建一欄

如果允許，可以將所有內(nèi)容限制為單列布局 。這有助于我們專注于頁(yè)面的核心內(nèi)容，同時(shí)也使我們對(duì)原則表述有更多的控制權(quán)。在第一個(gè)響應(yīng)式設(shè)計(jì)系統(tǒng)中，我們通過縮小不同屏幕尺寸（如手機(jī)和平板電腦）之間的差異，一欄式布局也更容易實(shí)現(xiàn)。

Codecademy 通知的單列布局

4. 簡(jiǎn)潔而令人難忘

即使把原則限制在 3 條以內(nèi)，你和團(tuán)隊(duì)也無法記住那些抽象冗長(zhǎng)的原則。它們不會(huì)停留在你的腦海里，鼓勵(lì)你用某種方式思考。相反，你需要確保你的產(chǎn)品設(shè)計(jì)原則簡(jiǎn)潔、令人難忘。

Asana 展示了措辭良好的產(chǎn)品設(shè)計(jì)原則案例。以下是一些啟發(fā)靈感的方法。

1）通過清晰化來增強(qiáng)自信

無論是應(yīng)用程序中，或是團(tuán)隊(duì)內(nèi)部，發(fā)生了什么以及為什么會(huì)發(fā)生，都需要明確的表達(dá)。

2）保持一致和標(biāo)準(zhǔn) ，在合適的時(shí)機(jī)進(jìn)行創(chuàng)新

用戶應(yīng)該覺得 Asana 既傳統(tǒng)又有別于傳統(tǒng)。Asana 同時(shí)使用圖標(biāo)和文本標(biāo)簽來提高其功能的清晰度，甚至當(dāng)用戶懸停在任何可以與之交互的對(duì)象上時(shí)，也會(huì)使用提示（見下面的屏幕截圖）。他們一邊堅(jiān)持用戶熟悉的模式，一邊又探索更為新穎的設(shè)計(jì)，以便使用戶使用更為流暢。我個(gè)人很喜歡 Asana 的設(shè)計(jì)。

一個(gè) Asana 的截屏

二、產(chǎn)品設(shè)計(jì)原則的案例?The best examples of Product Design Principles

下面的產(chǎn)品是按字母順序，并非按照其設(shè)計(jì)原則的優(yōu)質(zhì)與否排序的。它們都很棒，但在格式和表達(dá)方式上卻截然不同。看看他們，在創(chuàng)建自己的設(shè)計(jì)原則時(shí)能夠激發(fā)靈感！我們將介紹以下產(chǎn)品案例：

• Asana
• Codecademy
• Degreed
• Firefox
• Medium
• Pinterest
• Windows
• Wonderbly

1. Asana

Asana為什么以及如何創(chuàng)建他們的設(shè)計(jì)原則：

1）讓用戶專注于自己的工作而不會(huì)受到干擾

用戶的注意力應(yīng)該在他們的控制范圍內(nèi)，只有與個(gè)人相關(guān)的更改才會(huì)分散用戶的注意力。

2）通過清晰性增強(qiáng)信心

無論是應(yīng)用程序中，或是團(tuán)隊(duì)內(nèi)部，發(fā)生了什么以及為什么會(huì)發(fā)生，都需要明確的表達(dá)。

3）培養(yǎng)富有成效的和情感上令人滿意的人際關(guān)系

用戶感覺自己是團(tuán)隊(duì)的一部分，在團(tuán)隊(duì)中，他們可以依靠彼此來完成自身任務(wù)，并感到一同朝著一個(gè)共同的目標(biāo)前進(jìn)。

4）為快速、輕松和有意的互動(dòng)而設(shè)計(jì)

簡(jiǎn)單和普通的任務(wù)應(yīng)該是 毫不費(fèi)力且顯而易見的；復(fù)雜的任務(wù)應(yīng)該讓人感覺高效和愉快。但是快速不應(yīng)該導(dǎo)致不準(zhǔn)確。

5）在不斷的使用中發(fā)現(xiàn)每個(gè)人的能力

無論使用了多少功能，每個(gè)人都應(yīng)該清楚的知道如何使用 Asana，并通過不斷地使用增強(qiáng)個(gè)人能力。

6）保持一致和標(biāo)準(zhǔn)，并在需要時(shí)進(jìn)行創(chuàng)新

用戶應(yīng)該覺得 Asana 既傳統(tǒng)又有別于傳統(tǒng)。

2. Codecademy

1. 保持一欄空間；
2. 社會(huì)認(rèn)同感；
3. 更多對(duì)比；
4. 更少的表單；
5. 保持專注；
6. 直接操控；
7. 視覺層次結(jié)構(gòu)；
8. 視覺識(shí)別；
9. 更大的目標(biāo)；
10. 為邊緣場(chǎng)景而設(shè)計(jì)。

3. Degreed

Degreed 有一套12條設(shè)計(jì)原則，太多了，不容易回憶。同時(shí)，并不是所有的設(shè)計(jì)原則都具有最佳產(chǎn)品設(shè)計(jì)原則的共同特點(diǎn)。我在下面列出了我的最喜歡的幾條原則：

1）第 5 原則：使用戶一次專注于一項(xiàng)主要操作

通過將屏幕、關(guān)注點(diǎn)或行為集中在一個(gè)主要任務(wù)上來指導(dǎo)用戶。

果斷進(jìn)行優(yōu)先級(jí)排序，使得用戶選擇變得簡(jiǎn)單。防止分心。所有不能幫助用戶專注于主要任務(wù)的元素和樣式都會(huì)被認(rèn)為是視覺上的雜亂，和對(duì)用戶的巨大干擾。請(qǐng)注意，界面中的所有內(nèi)容都必須由用戶的大腦處理，處理的內(nèi)容越少，認(rèn)知負(fù)荷就越低。

2）第 6 原則：最小化用戶輸入用戶輸入需要花費(fèi)大量的精力和時(shí)間。

始終爭(zhēng)取最少的用戶輸入來達(dá)到目標(biāo)。用戶需要的每一個(gè)輸入都會(huì)增加用戶體驗(yàn)的摩擦，并增加放棄的機(jī)會(huì)。

3）第 8 原則：為用戶做決定不要害怕為用戶做決定。

提供更少的選項(xiàng)會(huì)給用戶更自信的感覺，因?yàn)椴挥脫?dān)心。要意識(shí)到選擇的悖論；提供大量的選擇會(huì)讓用戶感到不知所措，因?yàn)樗?她需要評(píng)估每一個(gè)選項(xiàng)是否符合他/她的目標(biāo)。

4）第 11 原則：別說 “哇”，說 “當(dāng)然”永遠(yuǎn)不要追逐 “哇效應(yīng)”。

當(dāng)產(chǎn)品設(shè)計(jì)以最好的方式解決了用戶的問題或需求時(shí)，產(chǎn)品設(shè)計(jì)就成功了。設(shè)計(jì)出高效、愉悅的產(chǎn)品，用戶的反應(yīng)是“當(dāng)然，這是顯而易見的。

4. Firefox（火狐）

注意他們?cè)?Firefox 上的做法有點(diǎn)不同，表明在 “產(chǎn)品設(shè)計(jì)原則” 的格式上沒有對(duì)與錯(cuò)。每個(gè)項(xiàng)目符號(hào)就是Firefox所稱的設(shè)計(jì)價(jià)值，以下是相關(guān)原則：

1）時(shí)刻關(guān)注你

• 用戶主導(dǎo)；
• 默認(rèn)即隱私；
• 不亂搞驚喜；
• 可行的建議。

2）用戶參與會(huì)幫我們做得更好

• 調(diào)研幫助我們的非核心社區(qū)提供了發(fā)言權(quán)；
• 讓用戶從智能的默認(rèn)設(shè)置開始使用產(chǎn)品；
• 定制化不僅僅是可見的，還有隱形的；
• 邀請(qǐng)更多個(gè)性的人參與，他們不僅是用戶。

3）一起玩，更好玩

• 用戶擁有決策權(quán)和控制權(quán)；
• 使你選擇的服務(wù)簡(jiǎn)單易用；
• 為用戶提供最佳建議。

4）活力

• 讓用戶感覺屏幕后有真人與其溝通；
• 有趣的工具更易使用；
• 幽默和奇思妙想；
• 有態(tài)度，有觀點(diǎn)。

4）精工細(xì)作

• 另請(qǐng)參閱我們的視覺設(shè)計(jì)指南；
• 視覺和感受在多平臺(tái)上的延展；
• 可感知的品質(zhì)至關(guān)重要。

5）全球化

全球化意味著本土化！

6）平衡有力和簡(jiǎn)單

• 80 / 20 / 2：默認(rèn)界面極盡簡(jiǎn)單，而在需要時(shí)輕松定制。
• 追求讓用戶易于理解，而不是追求界面的簡(jiǎn)潔。

7）通情達(dá)理的網(wǎng)站

• 關(guān)注用戶的任務(wù)和情境；
• 很多任務(wù)在實(shí)際操作時(shí)需要其他工具配合瀏覽器；
• 快速訪問你想去的網(wǎng)站、你想完成的任務(wù)；
• 不要用技術(shù)用語，用戶難以理解。

8）卓越性能

• 性能是客觀的，而用感受性能是主觀的；
• 一個(gè)愉悅的用戶更自如地使用產(chǎn)品。

5. Medium

請(qǐng)注意，這些在回復(fù)中被稱為 “……我們?cè)?Medium 精心設(shè)計(jì)的一些早期設(shè)計(jì)原則”。他們不一定是正式的和最終的，但仍然是一個(gè)偉大的靈感來源。

1）[方向] 優(yōu)于 [選擇]

當(dāng)我們?cè)O(shè)計(jì) Meidum 的編輯器時(shí)，我們總是提到這個(gè)原則。我們特意提供了布局、字體、顏色的選擇指南和引導(dǎo)。引導(dǎo)用戶比讓用戶做選擇更適合我們的產(chǎn)品，因?yàn)槲覀兿Ｍ脩裟軐Ｐ膶懽?，而不是分心于選擇字號(hào)、顏色這些事。

2）[恰當(dāng)] 優(yōu)于 [統(tǒng)一]

這條似乎有所爭(zhēng)議，但是當(dāng)我們的應(yīng)用再多終端上應(yīng)用，其目的很明確——我們?cè)敢膺m當(dāng)打破一致性，只為了我們的產(chǎn)品能更好的適用不同的操作系統(tǒng)、設(shè)備或其他環(huán)境。

3）[進(jìn)化] 優(yōu)于 [成品]

在 Mudim 上面分享草稿、撰寫回復(fù)和留下筆記可以佐證這一點(diǎn)。Meidum 中的內(nèi)容應(yīng)該是反碎片化的，應(yīng)該隨著用戶的使用不斷進(jìn)化。我們可沒打算為互聯(lián)網(wǎng)印刷成品書籍。

6. Pinterest

對(duì)于每一個(gè)原則的完整描述，以及它們是如何在 Pinterest 所說的“基礎(chǔ)”上變得更具可操作性的，請(qǐng)查看本文。

1）清楚

它是靠直覺而不是學(xué)習(xí)，它讓用戶感到更強(qiáng)大，它讓內(nèi)容嘗試起來更棒。

2）生動(dòng)

它是豐富多彩的，它是視覺化響應(yīng)的，它是意想不到的。

3）牢固

它是為探索而打造的，它是難以誤操作的，它是可逆的。

7. Windows

Windows 有 8 個(gè)設(shè)計(jì)原則，所以對(duì)他們的員工來說可能太多了。但是它們都是高質(zhì)量的！

1）減少概念以增加信心

• 你提供了一個(gè)新概念嗎？為什么？有必要嗎？
• 你能去除不必要的概念嗎？
• 你做的區(qū)分是有意義的嗎？
• 用戶體驗(yàn)是否延續(xù)了相同的概念？

2）小事有好有壞

• 什么是被多數(shù)人認(rèn)為或者經(jīng)?？吹降闹匾?“小事”？
• 你在解決什么小問題？
• 少做為佳。
• 不要把你經(jīng)歷中的小事刪掉。
• 計(jì)劃周密的細(xì)節(jié)。
• 修復(fù)小錯(cuò)誤。

3）擅長(zhǎng) “看” 和 “做”

• 你最擅長(zhǎng)什么？它的外觀是否反映了它的優(yōu)點(diǎn)？
• 用戶看到的第一件事是否反映了用戶體驗(yàn)的偉大之處？
• 用戶體驗(yàn)是否符合預(yù)期？
• 用戶能做什么是顯而易見的？
• 你只提供必要的步驟嗎？

4）解決分心問題，而不是發(fā)現(xiàn)問題

• 減少分心。
• 不要讓特性相互競(jìng)爭(zhēng)。
• 提交新功能。
• 這些不是可發(fā)現(xiàn)性差的解決方案：在 “開始” 菜單中固定圖標(biāo)；在桌面上放置圖標(biāo)；在通知區(qū)域中放置圖標(biāo)；使用消息通知；初體驗(yàn)很重要；使用引導(dǎo)。

5）在旋鈕和問題之前的 UX

• 調(diào)低用戶的質(zhì)疑聲。
• 僅詢問一次。
• 不需要配置便可收獲價(jià)值。
• 問題是否已經(jīng)詢問過？
• 尋找整合的機(jī)會(huì)。

6）個(gè)性化，而不是定制

• 該功能是否允許用戶表達(dá)自己的元素？
• 你是否區(qū)分了個(gè)性化和定制？
• 個(gè)性化設(shè)置必須是一個(gè)新功能，還是可以利用現(xiàn)有的功能和信息（例如用戶的位置、背景圖片或色塊）？

7）重視體驗(yàn)的生命周期

• 考慮所有階段的用戶體驗(yàn)：安裝和創(chuàng)建；首次使用和定制；經(jīng)常使用；管理和維護(hù)；卸載或升級(jí)。
• 像使用了 12 個(gè)月一樣體驗(yàn)一遍。它是否有：現(xiàn)實(shí)的內(nèi)容；真實(shí)的體積。

8）時(shí)間很重要，所以為忙碌的人們打造

• 所有的用戶體驗(yàn)原則同樣適用于 12 英寸和 20 英寸的屏幕尺寸。
• 不要打斷別人。
• 為啟動(dòng)和停止附加說明（快速返回，不妨礙其他用戶體驗(yàn)）。
• 為獲取和失去連接附加說明。
• 性能 是普遍用戶體驗(yàn)的殺手。

8. Wonderbly

看看 Wonderbly 的設(shè)計(jì)系統(tǒng)，其中使用了這些原則。

1）成為講故事的人避免雙方交談。

通過反映客戶的需求和愿望，同時(shí)給他們帶來愉快的旅程，從而給客戶留下更深刻的印象。吸引觀眾將推動(dòng)銷售和忠誠(chéng)度。通過統(tǒng)一內(nèi)容、社區(qū)和商業(yè)，我們可以激勵(lì)人們與我們一起探索、互動(dòng)和購(gòu)物。

2）加入我們的俱樂部

在我們的網(wǎng)站中創(chuàng)建產(chǎn)品、功能和品質(zhì)，從而給客戶帶來信任感。倡導(dǎo)可發(fā)現(xiàn)性、可靠性和可信度將減少整個(gè)體驗(yàn)中的不確定性。可靠性將使客戶從一次性購(gòu)買者變成終身購(gòu)買者。

3）優(yōu)化體驗(yàn)利用流暢的布局和能夠兼容不同設(shè)備的方法為每種類型的用戶創(chuàng)造最佳體驗(yàn)。

不斷努力為客戶簡(jiǎn)化旅程。利用本地特色推廣產(chǎn)品，探索新技術(shù)。

4）老年人優(yōu)先

我們的客戶不僅是技術(shù)嫻熟的城市媽媽，還有數(shù)碼新手的祖父母。我們必須為每種類型的客戶提供簡(jiǎn)單、有效和有回報(bào)的客戶體驗(yàn)。幫助人們做出正確的決定，并引導(dǎo)他們?cè)谌魏涡枰牡胤竭M(jìn)行購(gòu)買。

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

作者：Christian Jensen

原文：https://uxdesign.cc/learn-from-the-best-product-design-principles-3ca706ac7ccb

譯者：張宇旸；審核：徐曼鷺、李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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