作者整理了 20 條經(jīng)典原則，并通過正反例子說明這些原則在設(shè)計中是如何運用的。系統(tǒng)學(xué)習(xí) 20 條經(jīng)典原則，讓你的設(shè)計更有說服力。

簡介說明

1. 理論表述

用戶將大部分時間花在別人家的網(wǎng)站（產(chǎn)品）上，而不是你的。這意味著他們希望你的網(wǎng)站（產(chǎn)品）跟別人的有相同的操作方法和使用模式。

2. 理論背景

雅各布定律是由尼爾森十大原則的創(chuàng)立者、尼爾森諾曼集團的創(chuàng)始人之一 Jakob Nielsen 提出的。他認(rèn)為雅各布定律更像是一種自然規(guī)律，只是在描述一個事實，這個事實就是用戶在其他千千萬萬個網(wǎng)站（產(chǎn)品）上積累經(jīng)驗，學(xué)會如何使用網(wǎng)站，當(dāng)一個網(wǎng)站跟其他網(wǎng)站一致的時候用戶會立刻知道該如何操作，但如果違反了雅各布定律，那么用戶會毫不猶豫地離開。

設(shè)計案例

1. 一致的排版

雅各布定律并不是說所有頁面統(tǒng)統(tǒng)要設(shè)計成一模一樣，而是具有相同功能的頁面，盡量保持一致。這在 UI 設(shè)計的領(lǐng)域并不鮮見，尤其是一些功能性特別強的頁面，各家設(shè)計的幾乎大同小異，比如商品詳情頁。

案例1：商品詳情頁

在國內(nèi)，不論是淘寶、造作、網(wǎng)易云音樂，不論是合家歡風(fēng)格還是性冷淡風(fēng)格，甚至不論是不是電商 APP，只要涉及到商品的詳情頁面，版式都高度相似，上方是圖片，中間描述，底部懸浮的操作區(qū)域，這也是用戶最熟悉、最容易接受的排版。

2. 一致的示能

示能是《設(shè)計心理學(xué)》中引入的一個「直接知覺論」的概念，它表達(dá)了一個物體或者操作對象與人的可交互關(guān)系，我們舉個簡單的例子。

案例2：按鈕的示能與反示能

有色彩的按鈕提示著我們它「可被點擊」，這是一種示能，即：示意它能夠 xxx；同理，灰色的按鈕提示我們它「不可點擊」，這是一種反示能，即：示意它不能 xxx。

一致的示能也就是說，我們所設(shè)計的一切的元素、控件、組件，都需要符合所有互聯(lián)網(wǎng)產(chǎn)品中類似元素的示能或者反示能。因為它們代表了用戶默認(rèn)的意識，我們要順應(yīng)這種意識進(jìn)行設(shè)計，就可以減少用戶操作的阻力。

3. 一致的符號映射

簡單來說，一致的符號映射就是相同或者類似的符號/圖標(biāo)會給用戶提供相同的功能暗示。就像頁面左上角向左的箭頭（不論是哪種箭頭，只要它向左）映射的交互含義就是返回上一頁；三條杠（或兩條杠）的圖標(biāo)意味著菜單；三個圓點代表更多。

對于常見的，已經(jīng)被大范圍應(yīng)用的符號映射，就不要再標(biāo)新立異的創(chuàng)造一些奇奇怪怪的新符號來映射對應(yīng)的操作，也不要用明顯表達(dá)「另一個操作」的符號來表達(dá)「這個操作」，用戶需要的是低學(xué)習(xí)成本。

案例3：常見的符號映射

4. 一致的概念模型

最后說下概念模型，概念模型同樣是一個心理學(xué)詞匯，這種模型會對用戶提供暗示──產(chǎn)品內(nèi)某一條功能流程的使用方法。

再次以電商 APP 為例，合理的概念模型會暗示用戶要在網(wǎng)站或 APP 內(nèi)購買一件商品， 需要經(jīng)過「挑選」→「加入購物車」→「結(jié)算」→「付款」→「成功」這樣一條完整的任務(wù)流。我們所見到的電商 APP 幾乎都使用了類似的概念模型，因為這種概念模型符合用戶在現(xiàn)實中購物時積累出的心智模型。所以當(dāng)我們?nèi)ピO(shè)計一個電商 APP 的界面時，應(yīng)當(dāng)首先考慮將概念模型設(shè)計的和其他所有電商平臺一致。

在我們設(shè)計產(chǎn)品時，要先繼承最廣泛的概念模型，然后再從產(chǎn)品自身的角度出發(fā)，對其進(jìn)行完善和修改，而不是完全根據(jù)我們天馬行空的臆斷去制定流程。

注意事項

注意事項就一個，不要違反雅各布定律。這條定律不像之前的?？硕苫蛘叻拼亩捎芯唧w的使用場景和明顯的適用邊界，雅各布定律幾乎沒有邊界，用 Nielsen 本人的話來說，它描述了「How things are」，更像是「Law of nature」。

反面案例：Eclipse

△ 網(wǎng)址鏈接：https://www.eclipse.srl/

Eclipse 是 csswinner 在今年 2 月 25 日的 Daysite。網(wǎng)站的各種特效很是酷炫，剛進(jìn)入首頁，提示我可以長按鼠標(biāo)并任意拖動，效果如圖。之后問題就來了，沒有提示，沒有擁有「可點擊」示能的按鈕，我茫然了一陣，終于發(fā)現(xiàn)了問題所在：網(wǎng)站的名字是 Eclipse（日食）。那么最可能讓我進(jìn)行下去的是不是右上角的那個日食？

結(jié)果就是它，一開始我以為它是類似夜間模式的按鈕。

△ 網(wǎng)址鏈接：https://www.eclipse.srl/projects

接著我來到這個頁面，類似的尷尬再次出現(xiàn)了，除了返回，我竟然不知道該怎么進(jìn)行下去，沒有按鈕、沒有鏈接、沒有提示、沒有任何能表達(dá)「我可以點擊」的東西。

經(jīng)過了嚴(yán)密的推理和一段時間的不懈努力，終于發(fā)現(xiàn)，底部和右側(cè)的文本區(qū)域才是觸發(fā)鏈接跳轉(zhuǎn)的熱區(qū)，而左側(cè)的文本則是單純的文本，不可點擊。

回顧瀏覽這個網(wǎng)站的過程，我們可以發(fā)現(xiàn)它的示能，它的符號映射均有所欠缺。經(jīng)歷了其他無數(shù)個網(wǎng)站的洗禮，我們早已經(jīng)認(rèn)知和習(xí)慣了長得像月亮的圖標(biāo)表達(dá)的十有八九是夜間模式，能點擊的鏈接十有八九都會跟文本長得不太一樣這兩條經(jīng)驗定律，所以在使用（或單純?yōu)g覽）這個網(wǎng)站的時候我們也十有八九會遇到困難。

總結(jié)

你的頁面應(yīng)該與其余相同功能的頁面具有一致的使用模式；

沒有足夠的理由，就不要輕易嘗試標(biāo)新立異。

原創(chuàng)：?酸梅干超人

來源微信公眾號：超人的電話亭