▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

轉(zhuǎn)自：TCC 翻譯情報局

編輯：章欣怡

共 5543 字，預(yù)計閱讀 14 分鐘

在進(jìn)行產(chǎn)品設(shè)計的時候，有沒有定義過你自己的設(shè)計原則？產(chǎn)品設(shè)計原則是指引你在日常工作中的行為，并指導(dǎo)你做出決策。本篇文章會向大家介紹最佳產(chǎn)品設(shè)計的四個特點以及產(chǎn)品設(shè)計原則的最佳案例，在創(chuàng)建自己的一套設(shè)計原則時，可以將這些優(yōu)秀案例作為指導(dǎo)，能夠啟發(fā)有關(guān)設(shè)計原則的格式和措辭，為大家?guī)砀嗟膸椭?/span>

Screenshots from Pinterest

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

能夠?qū)⒗碚撆c具體的、現(xiàn)實生活中的案例結(jié)合對我們來說幫助很大，因為我們一直在努力定義自己的設(shè)計原則。這就是同時也是我決定寫這篇文章的原因。它由兩個主要部分組成：

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

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

最佳產(chǎn)品設(shè)計原則的 4 個特點

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

1. 限制數(shù)量

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

“少量原則會使決策變得簡單 —— 過多原則會增加決策的困難性。”

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

1）清楚：它是靠直覺而不是學(xué)習(xí)，它讓用戶感到更強大，它讓內(nèi)容嘗試起來更棒；

2）生動：它是豐富多彩的，它是視覺化響應(yīng) 的，它是意想不到的；

3）牢固：它是為探索而打造的，它是難以誤操作的，它是可撤回的。

2. 差異化

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

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

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

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

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

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

3. 明確的和可操作的

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

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

只創(chuàng)建一欄

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

Codecademy 通知的單列布局

4. 簡潔而令人難忘

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

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

通過清晰化來增強自信

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

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

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

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

一個 Asana 的截屏

產(chǎn)品設(shè)計原則的案例

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

Asana
Codecademy
Degreed
Firefox
Medium
Pinterest
Windows
Wonderbly

1. Asana

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

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

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

2）通過清晰性增強信心

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

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

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

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

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

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

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

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

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

2. Codecademy

1）保持一欄空間

2）社會認(rèn)同感

3）更多對比

4）更少的表單

5）保持專注

6）直接操控

7）視覺層次結(jié)構(gòu)

8）視覺識別

9）更大的目標(biāo)

10）為邊緣場景而設(shè)計

3. Degreed

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

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

通過將屏幕 、關(guān)注點或行為集中在一個主要任務(wù)上來指導(dǎo)用戶 。果斷進(jìn)行優(yōu)先級排序，使得用戶選擇變得簡單。防止分心。所有不能幫助用戶專注于主要任務(wù)的元素和樣式都會被認(rèn)為是視覺上的雜亂，和對用戶的巨大干擾。請注意，界面中的所有內(nèi)容都必須由用戶的大腦處理，處理的內(nèi)容越少，認(rèn)知負(fù)荷就越低。

2）第 6 原則：最小化用戶輸入用戶輸入需要花費大量的精力和時間。

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

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

提供更少的選項會給用戶更自信的感覺，因為不用擔(dān)心。要意識到選擇的悖論；提供大量的選擇會讓用戶感到不知所措，因為他/她需要評估每一個選項是否符合他/她的目標(biāo)。

4）第 11 原則：別說 “哇”，說 “當(dāng)然”

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

4. Firefox（火狐）

注意他們在 Firefox 上的做法有點不同，表明在 “產(chǎn)品設(shè)計原則” 的格式上沒有對與錯。每個項目符號就是 Firefox 所稱的設(shè)計價值，以下是相關(guān)原則：

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

- 用戶主導(dǎo)

- 默認(rèn)即隱私

- 不亂搞驚喜

- 可行的建議

2）用戶參與會幫我們做的更好

- 調(diào)研幫助我們的非核心社區(qū)提供了發(fā)言權(quán)

- 讓用戶從智能的默認(rèn)設(shè)置開始使用產(chǎn)品

- 定制化不僅僅是可見的，還有 隱形的

- 邀請更多個性的人參與，他們不僅是用戶

3）一起玩，更好玩

- 用戶擁有決策權(quán)和控制權(quán)

- 使你選擇的服務(wù) 簡單易用

- 為用戶提供最佳建議

4）活力

- 讓用戶感覺屏幕后有真人與其溝通

- 有趣的工具更易使用

- 幽默和奇思妙想

- 有態(tài)度，有觀點

4）精工細(xì)作

- 另請參閱我們的視覺設(shè)計指南

- 視覺和感受在多平臺上的延展

- 可感知的品質(zhì) 至關(guān)重要

5）全球化

- 全球化意味著本土化！

6）平衡有力和簡單

- 80 / 20 / 2：默認(rèn)界面極盡簡單，而在需要時輕松定制。

- 追求讓用戶易于理解，而不是追求界面的簡潔。

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

- 關(guān)注用戶的任務(wù)和情境

- 很多任務(wù)在實際操作時需要其他工具配合瀏覽器

- 快速訪問你想去的網(wǎng)站、你想完成的任務(wù)

- 不要用技術(shù)用語，用戶難以理解

8）卓越性能

- 性能是客觀的，而用戶感受性能是主觀的

- 一個愉悅的用戶更自如的使用產(chǎn)品

5. Medium

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

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

當(dāng)我們設(shè)計 Meidum 的編輯器時，我們總是提到這個原則。我們特意提供了布局、字體、顏色的選擇指南和引導(dǎo)。引導(dǎo)用戶比讓用戶做選擇更適合我們的產(chǎn)品，因為我們希望用戶能專心寫作，而不是分心于選擇字號、顏色這些事。

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

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

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

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

6. Pinterest

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

1）清楚

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

2）生動

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

3）牢固

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

7. Windows

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

1）減少概念以增加信心

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

2）小事有好有壞

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

3）擅長 “看” 和 “做”

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

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

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

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

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

6）個性化，而不是定制

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

7）重視體驗的生命周期

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

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

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

8. Wonderbly

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

1）成為講故事的人

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

2）加入我們的俱樂部

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

3）優(yōu)化體驗

利用流暢的布局和能夠兼容不同設(shè)備的方法為每種類型的用戶創(chuàng)造最佳體驗。不斷努力為客戶簡化旅程。利用本地特色推廣產(chǎn)品，探索新技術(shù)。

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

我們的客戶不僅是技術(shù)嫻熟的城市媽媽，還有數(shù)碼新手的祖父母。我們必須為每種類型的客戶提供簡單、有效和有回報的客戶體驗。幫助人們做出正確的決定，并引導(dǎo)他們在任何需要的地方進(jìn)行購買。

?? 我們一起聊設(shè)計 ???♂?

微信行業(yè)交流群

期待與更多優(yōu)秀設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準(zhǔn)時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號三分設(shè)的粉絲）

推薦課程

星標(biāo)公眾號方法

點開下方公眾號 ?? 點擊右上角【...】 ?? 設(shè)為星標(biāo)

原創(chuàng)精選｜如何制定產(chǎn)品的設(shè)計原則？設(shè)計總監(jiān)帶你一起從經(jīng)典案例中總結(jié)經(jīng)驗