設(shè)計(jì)法則是產(chǎn)品設(shè)計(jì)的基石。雖然現(xiàn)在有很多的觀點(diǎn)認(rèn)為不要恪守設(shè)計(jì)法則，但是設(shè)計(jì)法則能夠從被提出到一直延續(xù)下來(lái)就能夠說(shuō)明其重要性。本文匯總了在產(chǎn)品設(shè)計(jì)中需要了解并且遵守的產(chǎn)品設(shè)計(jì)法則，enjoy~

80/20法則

在所有產(chǎn)品系統(tǒng)中，大部分的效果由少數(shù)幾項(xiàng)關(guān)鍵因素決定。

80/20法則的適用范圍非常普遍：

• 產(chǎn)品80%的使用，只使用了產(chǎn)品20%的功能。
• 城市80%的交通，集中在了20%的道路上。
• 企業(yè)80%的收益，歸功于20%的產(chǎn)品。
• 80%的發(fā)明，來(lái)自于20%的人口。

80/20法則有助于資源整合，可以提升設(shè)計(jì)的最大化。當(dāng)客戶適用一件產(chǎn)品，80%的時(shí)間集中在該產(chǎn)品20%的主要功能上時(shí)，那么我們的設(shè)計(jì)和測(cè)試就應(yīng)該集中在這些關(guān)鍵功能上。剩下80%的功能我們需要進(jìn)行重新評(píng)估，確認(rèn)它們的價(jià)值。我們?cè)诋a(chǎn)品設(shè)計(jì)中需要利用80/20法則評(píng)估設(shè)計(jì)中各要素的價(jià)值、劃定重新設(shè)計(jì)和優(yōu)化的范圍，做到有效的集中優(yōu)勢(shì)資源進(jìn)行設(shè)計(jì)。80%的非關(guān)鍵性功能能減則減，尤其是當(dāng)時(shí)間和資源有限的時(shí)候，更應(yīng)該把重心放到20%的關(guān)鍵性功能上。

例如，Photoshop中把最重要的工具放在了工具條上，相關(guān)的擴(kuò)展功能隱藏起來(lái)（鼠標(biāo)長(zhǎng)按可以顯示）：

美即適用效應(yīng)

人們通常覺(jué)得美的東西更適用。

“美即適用效應(yīng)”是一種心理感應(yīng)現(xiàn)象：人們認(rèn)為美好的東西更加適用。設(shè)計(jì)美好的東西從視覺(jué)上來(lái)說(shuō)更加容易接受，而且使用率也很高。美的設(shè)計(jì)能促進(jìn)人們形成正面積極的態(tài)度，并且讓人們對(duì)產(chǎn)品設(shè)計(jì)上的缺陷更具包容性。我們要永遠(yuǎn)追求美的設(shè)計(jì)。人們普遍比認(rèn)為美的東西更加實(shí)用，容易被接受并長(zhǎng)期使用。美的設(shè)計(jì)還能幫助品牌與消費(fèi)者建立正面關(guān)系。

例如，下面兩個(gè)醫(yī)院官網(wǎng)的設(shè)計(jì)，左邊的在視覺(jué)效果上更能給人們留下好的印象：

功能可見(jiàn)性原則

如果產(chǎn)品的功能可見(jiàn)性與人們感官的預(yù)期相符合，那么這個(gè)設(shè)計(jì)會(huì)有很高的接納率和使用率，同時(shí)也會(huì)被用戶認(rèn)為容易操作。例如，帶門(mén)把手的門(mén)通常都是用拉的方式去打開(kāi)的，而采用一片金屬面板代替門(mén)把手的設(shè)計(jì)則可以直接用推的方式打開(kāi)，這樣的設(shè)計(jì)會(huì)符合產(chǎn)品的功能可見(jiàn)性。

生活中常見(jiàn)物品和環(huán)境的圖像，可以明確產(chǎn)品的使用性和功能性。例如，數(shù)字界面中的按鈕圖標(biāo)和我們實(shí)際生活中常見(jiàn)的按鈕特征基本一致，因此，在用戶眼里，當(dāng)看到按鈕時(shí)就可以直接按下。產(chǎn)品的設(shè)計(jì)需要盡可能符合人們的心理預(yù)期，并且要杜絕一切不當(dāng)使用，產(chǎn)品設(shè)計(jì)要模擬人們熟悉的心理環(huán)境，來(lái)暗示和提醒產(chǎn)品使用者產(chǎn)品中各要素的使用方法和功能。

例如，下圖中的卡片式設(shè)計(jì)，沿用了現(xiàn)實(shí)生活中信用卡的設(shè)計(jì)樣式，符合用戶的心理預(yù)期（用戶很輕易的就能識(shí)別出信用卡信息）：

意元集組

一種把不同的信息集結(jié)或歸納成模塊或單位，便于人們對(duì)信息盡心解讀和記憶的技巧。

“模塊”指的是短期記憶里的一個(gè)信息單位。意元集組的技巧是為了突破短期記憶的限制，把各種信息歸納分類(lèi)編排成幾個(gè)大單位。如果人們需要記住大量的信息，或?qū)⒁畔⒂糜诮鉀Q問(wèn)題上，此時(shí)請(qǐng)把信息分為模塊。如果個(gè)人專(zhuān)注力會(huì)受到所處環(huán)境影響時(shí)，人們的短期記憶能力也會(huì)隨之減弱，此時(shí)應(yīng)該將重要信息分為模塊，以便于識(shí)別與吸收。

例如，微信添加銀行卡時(shí)，將銀行卡號(hào)的輸入信息進(jìn)行分組（4位數(shù)字一組），方便用戶核對(duì)（記憶）賬號(hào)信息：

確認(rèn)法則

一種在生效前需要線確認(rèn)，避免失誤的技巧。

確認(rèn)的主要功能是確認(rèn)用戶的行動(dòng)或輸入是否正確，主要防止出自非本意的行為。最常見(jiàn)的確認(rèn)法則應(yīng)用出現(xiàn)在軟件顯示的對(duì)話框（例如，“您確認(rèn)要?jiǎng)h除該文件嗎？”），對(duì)話框提示用戶是否要執(zhí)行此命令，對(duì)話框信息簡(jiǎn)明扼要，要能正確詳細(xì)地傳達(dá)出操作的后果。在重要或無(wú)法挽回的操作中應(yīng)用確認(rèn)法則，盡量把錯(cuò)誤降到最低。

例如，Windows系統(tǒng)中刪除文件的確認(rèn)對(duì)話框，刪除操作很危險(xiǎn)，使用確認(rèn)法則提示用戶：

一致性法則

當(dāng)系統(tǒng)相似的部分以一致性的方法表現(xiàn)時(shí)，能更好的改善系統(tǒng)的使用性。

一致性法則包括四個(gè)部分：

• 美學(xué)一致性，指風(fēng)格與外觀的統(tǒng)一。美學(xué)的一致性能增強(qiáng)品牌識(shí)別度并且讓用戶產(chǎn)生共鳴，建立情感上的期待。
• 功能一致性，指用戶行為及其意義的一致性。讓用戶利用已有的知識(shí)了解設(shè)計(jì)的使用功能，同時(shí)也可以增強(qiáng)使用性與學(xué)習(xí)力。
• 內(nèi)部一致性，指在同一系統(tǒng)中與其他元素的一致性。內(nèi)部一致性可以讓用戶覺(jué)得產(chǎn)品是經(jīng)過(guò)細(xì)心設(shè)計(jì)的。
• 外部一致性，指與外在環(huán)境里的其他元素一致。外部一致性可以把內(nèi)部一致性的優(yōu)點(diǎn)延伸到多重獨(dú)立的系統(tǒng)。

例如，微軟的word、excel、powerpoint軟件，同樣的功能在菜單欄、工具條出現(xiàn)的位置以及圖標(biāo)樣式都是一樣的，三款軟件整體上的架構(gòu)也是一致的。

曲線偏見(jiàn)

人們對(duì)曲線造型物品的喜愛(ài)勝于對(duì)尖銳物品的喜愛(ài)。

當(dāng)人們面對(duì)尖銳的物品時(shí)，大腦中處理恐懼的區(qū)域就會(huì)被激發(fā)。人類(lèi)天生具有曲線偏見(jiàn)，包括男性和女性。曲線偏見(jiàn)適用于所有設(shè)計(jì)領(lǐng)域，我們可以利用曲線特質(zhì)創(chuàng)造積極正面的第一印象。

例如，下圖APP界面中的卡片、按鈕、圖標(biāo)等元素多以圓角或圓的樣式居多，圓角比直角更能讓用戶產(chǎn)生好感。

費(fèi)茨定律

到達(dá)目標(biāo)位置所花費(fèi)的時(shí)間取決于當(dāng)前位置與目標(biāo)之間的距離，以及目標(biāo)對(duì)象的大小。

費(fèi)茨定律的基本概念是：目標(biāo)對(duì)象距離越遠(yuǎn)或尺寸越小，用戶精確點(diǎn)擊的困難就越大，耗時(shí)越長(zhǎng)；反之，距離越近、尺寸越大，就越容易準(zhǔn)確點(diǎn)擊，耗時(shí)越少。設(shè)計(jì)的系統(tǒng)有指向性功能的話，就要考慮使用費(fèi)茨定律。如果需要快速移動(dòng)，又有準(zhǔn)確性要求時(shí)，要把控制點(diǎn)靠近一點(diǎn)或變大。

在Windows中，縱向滾動(dòng)條上下兩端各有一個(gè)按鈕，里面的圖標(biāo)分別是向上和向下的箭頭；橫向滾動(dòng)條也是類(lèi)似。而Mac系統(tǒng)(OS X Lion之前的版本)則將左右按鈕并列在同一側(cè)，使左右導(dǎo)航的點(diǎn)擊操作所需跨越的距離大大的縮短，提高了操作效率。

由于屏幕邊緣的限制，界面頂部和底部也是容易容易定位和點(diǎn)擊的位置，不過(guò)確實(shí)沒(méi)有角落更容易，因?yàn)檫@兩個(gè)位置只在縱向上受到了約束，在橫向上依然需要用戶手動(dòng)定位；但怎樣都比邊緣以內(nèi)的元素更容易點(diǎn)擊。

彈出菜單呈現(xiàn)在鼠標(biāo)指針旁邊，可以減少下一步操作所需要的移動(dòng)距離，進(jìn)而降低操作時(shí)間的消耗。

容錯(cuò)性

設(shè)計(jì)應(yīng)該能讓用戶避免錯(cuò)誤的發(fā)生，且當(dāng)錯(cuò)誤真正發(fā)生時(shí)，能把負(fù)面影響降到最低。

設(shè)計(jì)的容錯(cuò)性有助于在錯(cuò)誤發(fā)生之前防止，而且就算錯(cuò)誤真的發(fā)生了，也能把負(fù)面影響降到最低。具有容錯(cuò)性的設(shè)計(jì)提供了安全感和穩(wěn)定性。

常見(jiàn)策略包括：

（1）功能可見(jiàn)性

設(shè)計(jì)的外觀樣式特征，會(huì)影響其使用的正確性。例如，iOS開(kāi)關(guān)控件。

（2）恢復(fù)之前的動(dòng)作

如果錯(cuò)誤發(fā)生了，可以恢復(fù)到前一步（多步）的操作。例如，Photoshop的歷史記錄工具。

（3）確認(rèn)

在執(zhí)行重要指令之前，必須明確其意圖。例如，刪除的提示窗設(shè)計(jì)。

（4）警告

標(biāo)志或提示，用來(lái)警告即將發(fā)生的錯(cuò)誤。例如，生活中的各種警告牌。

（5）幫助

能幫助基本操作、錯(cuò)誤修復(fù)的信息。例如，word激活提示窗左下角的“幫助”鏈接。

?？硕?/h2>

決策的耗時(shí)將隨著選項(xiàng)的數(shù)量及復(fù)雜度的提升而增加。

希克定律的運(yùn)用，只適用于反應(yīng)時(shí)間很短的情景。其特別適用于各類(lèi)操控系統(tǒng)。當(dāng)因系統(tǒng)出錯(cuò)而發(fā)生警報(bào)時(shí)，用戶需要在最短時(shí)間內(nèi)快速做決定。當(dāng)他們進(jìn)入心理恐慌區(qū)后，其視線會(huì)變得相對(duì)狹隘。所以，如果「反應(yīng)時(shí)間」很重要，那選項(xiàng)數(shù)量一定要控制在最少。這樣也可以加快用戶抉擇的速度。

只需要在界面上呈現(xiàn)整個(gè)流程的核心元素。比如電子商務(wù)的付款流程，沒(méi)必要將整個(gè)過(guò)程一次性顯示出來(lái)。最開(kāi)始只需要展示購(gòu)物車(chē)相關(guān)的元素，再接著顯示物流信息，最后再是注冊(cè)賬戶信息（可選）等等。例如，亞馬遜的一鍵下單就應(yīng)用了希克定律。

把相同類(lèi)別的備選項(xiàng)做適當(dāng)?shù)姆纸M，可以降低用戶選擇時(shí)所需的時(shí)間。例如，淘寶網(wǎng)等主流電商網(wǎng)站的主分類(lèi)模塊。

另外，?？硕刹惶m用于復(fù)雜的選項(xiàng)抉擇。如果需要大量的閱讀、研究，或者不停地思考，席克定律的參考價(jià)值就不高。

映射

控件（控制裝置）與其動(dòng)作或效果之間的映射關(guān)系良好，會(huì)讓產(chǎn)品更好用。

當(dāng)效果與預(yù)期一致，映射就是好的，或是自然的；如果效果與預(yù)期不符便被視為映射不良。好的映射主要源自設(shè)計(jì)、行為、意義中的相似性作用。當(dāng)灶臺(tái)的開(kāi)關(guān)設(shè)計(jì)與灶口相呼應(yīng)，這就是設(shè)計(jì)相似性。相似性讓控制—效果的關(guān)系變得可預(yù)期，因此很容易使用。

例如，下圖中展示的就是符合自然映射的灶口與開(kāi)關(guān)設(shè)計(jì)。

格式塔心理學(xué)

人們?cè)谟^看時(shí)，眼腦并不是在一開(kāi)始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分，而是將各個(gè)部分組合起來(lái)，使之成為一個(gè)更易于理解的統(tǒng)一體。

人們的審美觀對(duì)整體與和諧具有一種基本的要求。簡(jiǎn)單地說(shuō)，視覺(jué)形象首先是作為統(tǒng)一的整體被認(rèn)知的，而后才以部分的形式被認(rèn)知，也就是說(shuō)，我們先“看見(jiàn)”一個(gè)構(gòu)圖的整體，然后才“看見(jiàn)”組成這一構(gòu)圖整體的各個(gè)部分。

（1）簡(jiǎn)單

我們的眼睛在觀看時(shí)，眼腦并不是在一開(kāi)始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分，而是將各個(gè)部分組合起來(lái)，使之成為一個(gè)更易于理解的統(tǒng)一體。例如，以簡(jiǎn)單圖形為基礎(chǔ)的banner設(shè)計(jì)。

（2）相似

我們的眼睛很容易關(guān)注那些外表相似的物體，且不管它們的位置是不是相鄰，總是把它們聯(lián)系起來(lái)。如下圖。

（3）接近

單個(gè)視覺(jué)元素之間無(wú)限接近，視覺(jué)上會(huì)形成一個(gè)較大的整體。距離近的單個(gè)視覺(jué)元素會(huì)溶為一個(gè)整體，而單個(gè)視覺(jué)元素的個(gè)性會(huì)減弱。例如，列表之間通過(guò)留白距離的大小分割元素。

（4）閉合

人們?cè)谟^察熟悉的視覺(jué)形象時(shí)，會(huì)把不完整的局部形象當(dāng)作一個(gè)整體的形象來(lái)感知，這種知覺(jué)上的結(jié)束，稱(chēng)之為閉合。如果局部形象過(guò)于陌生或者簡(jiǎn)略，則不會(huì)產(chǎn)生整體閉合聯(lián)想。例如，選項(xiàng)卡的設(shè)計(jì)。

（5）連續(xù)

人的視覺(jué)有追隨一個(gè)方向的延續(xù)，以便把元素聯(lián)接在一起，使它們看來(lái)是連續(xù)向著特定的方向。例如，地圖應(yīng)用中導(dǎo)航時(shí)的路徑連續(xù)。

米勒定律

人們?cè)诙虝r(shí)記憶期間平均能夠記住的元素?cái)?shù)量?jī)H為7(±2)個(gè)。

當(dāng)用戶需要完成一項(xiàng)需要努力認(rèn)知的任務(wù)的時(shí)候，人的大腦可以記憶7個(gè)信息。因?yàn)槿说拇竽X在試圖記憶的同時(shí)，也在處理著各種各樣的刺激和執(zhí)行著各種不同的任務(wù)。米勒定律背后關(guān)鍵的概念在于“組塊”，意思是將不同的信息組合成一個(gè)完整的格式，比如“computer”實(shí)際上是一個(gè)大的“組塊”，被組織成知覺(jué)格式塔（格式塔心理學(xué)）。如果這些字母被重新排列了，那么將是8個(gè)單獨(dú)的信息塊兒，分組塊是信息組織的關(guān)鍵原則，也是我們用戶體驗(yàn)和組織規(guī)則的基礎(chǔ)。

我們添加到“用戶界面”中的信息越多，這些信息就會(huì)變得越無(wú)效。對(duì)于初次使用的用戶來(lái)說(shuō)尤為重要，因?yàn)樗麄冞€沒(méi)有將這些信息儲(chǔ)存到他們的長(zhǎng)期記憶中，或者成了為了習(xí)慣行為。“米勒定律”同樣指出，設(shè)計(jì)過(guò)程中要有預(yù)見(jiàn)性，有適當(dāng)?shù)囊?guī)劃至關(guān)重要。當(dāng)我們不斷的為產(chǎn)品添加新的功能時(shí)，我們的產(chǎn)品界面必須能夠適應(yīng)這些新功能，而不會(huì)破壞已經(jīng)創(chuàng)建的視覺(jué)基礎(chǔ)和交互邏輯。畢竟重新建設(shè)需要大量的成本。

米勒定律告訴我們，人類(lèi)在有限時(shí)間內(nèi)處理信息的數(shù)量是有限的，信息過(guò)載會(huì)導(dǎo)致分心，從而對(duì)性能和效率產(chǎn)生負(fù)面影響。

例如，在流程設(shè)計(jì)中將復(fù)雜的流程進(jìn)行分步處理，將復(fù)雜的表單內(nèi)容按分類(lèi)進(jìn)行劃分等。

奧卡姆剃刀定律

如果要從功能相同的設(shè)計(jì)中做出選擇，那么最好選擇最簡(jiǎn)單的設(shè)計(jì)。也稱(chēng)作簡(jiǎn)單有效原理。

不必要的元素會(huì)導(dǎo)致設(shè)計(jì)效率的降低，并且會(huì)增加不可預(yù)期的后果。在設(shè)計(jì)中我們可以去掉不必要的干擾元素，這樣頁(yè)面會(huì)比較純粹、簡(jiǎn)潔。奧卡姆剃刀原理并不是只肯定簡(jiǎn)單的設(shè)計(jì)就是好的，也不是否定一切復(fù)雜含蓄的設(shè)計(jì)就是不好的。其核心是：“簡(jiǎn)單”設(shè)計(jì)，強(qiáng)調(diào)黨兩個(gè)設(shè)計(jì)方案都能達(dá)到設(shè)計(jì)目的的時(shí)候，選擇較為簡(jiǎn)單的那個(gè)。因?yàn)椤昂?jiǎn)單”設(shè)計(jì)比“復(fù)雜”設(shè)計(jì)更容易讓人理解，傳達(dá)效果更好，可以以小博大。

例如，在功能相同的前提下，我們要使用更加簡(jiǎn)潔更容易讓人理解的設(shè)計(jì)。左面的表單設(shè)計(jì)相對(duì)于右面，流程更加清晰且無(wú)干擾。

根據(jù)奧卡姆剃刀定律，我們可以采取的設(shè)計(jì)方法有：

• 只放置必要的東西：簡(jiǎn)潔的設(shè)計(jì)最重要的一個(gè)方面是只展示有作用的東西，其他的都隱藏。這并不意味著不能提供給用戶很多的信息，可以采用“了解更多”的鏈接來(lái)實(shí)現(xiàn)這些。
• 減少點(diǎn)擊次數(shù)：讓用戶通過(guò)很少的點(diǎn)擊就能找到他們想要的東西。
• 外婆規(guī)則：如果你的外婆也能輕松的使用你設(shè)計(jì)的產(chǎn)品，你就成功了。
• 減少頁(yè)面冗余：冗余的內(nèi)容只會(huì)增加用戶的識(shí)別負(fù)擔(dān)。
• 給予更少的選項(xiàng)：做過(guò)多的選擇也是一種壓力，減少選擇可以減少用戶的思維負(fù)擔(dān)，這樣就會(huì)使體驗(yàn)更順暢。

總結(jié)

以上就是一些在產(chǎn)品設(shè)計(jì)中會(huì)用到的設(shè)計(jì)法則，希望這些設(shè)計(jì)法則能為大家避開(kāi)一些設(shè)計(jì)的誤區(qū)。當(dāng)然這些并不是全部的，僅僅是一些我們常用到的，也歡迎大家在評(píng)論區(qū)寫(xiě)上你所熟知的設(shè)計(jì)法則~

#專(zhuān)欄作家#

流年，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家?；ヂ?lián)網(wǎng)產(chǎn)品設(shè)計(jì)師，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)。擅長(zhǎng)用戶體驗(yàn)設(shè)計(jì)，喜歡鉆研需求功能背后的技術(shù)實(shí)現(xiàn)方式；在成為綜合型產(chǎn)品設(shè)計(jì)師的道路上不斷努力前進(jìn)！

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖由作者提供