中國(guó)每年有50萬的設(shè)計(jì)畢業(yè)生，相比之下，能夠進(jìn)入大廠的寥若晨星。但所有投身于設(shè)計(jì)的設(shè)計(jì)師，都有一顆渴望成長(zhǎng)的心。《體驗(yàn)設(shè)計(jì)師入門實(shí)戰(zhàn)課程》是vivo VMIC UED 為新入職設(shè)計(jì)師量身打造的專業(yè)成長(zhǎng)課程，是UED全體講師的結(jié)晶?，F(xiàn)在，我們將這套課程整理成文章發(fā)表出來，希望給選擇并從事設(shè)計(jì)行業(yè)的你一點(diǎn)成長(zhǎng)的力量。

一、前言?設(shè)計(jì)基礎(chǔ)法則是指在設(shè)計(jì)過程中，為了達(dá)到更好的用戶體驗(yàn)，需要遵循的一些基本原則。常見的設(shè)計(jì)法則有很多，包括尼爾森10大可用性原則、約翰遜9大界面設(shè)計(jì)原則、格式塔法則等。

今天我們將著重介紹界面設(shè)計(jì)中最基礎(chǔ)、最常用的法則：「格式塔法則」與「交互設(shè)計(jì)五定律」。通過學(xué)習(xí)這些法則，可以幫助設(shè)計(jì)師更好地組織頁面元素，使頁面更加清晰、美觀、易于理解和操作。希望這些法則能夠?yàn)槟愕脑O(shè)計(jì)工作帶來幫助。

二、格式塔法則?格式塔心理學(xué)是現(xiàn)代認(rèn)知心理學(xué)的基礎(chǔ)，由三位德國(guó)心理學(xué)家(威特海默，科勒，考卡夫)創(chuàng)立，其核心觀點(diǎn)是「整體決定部分的性質(zhì)，部分依從于整體」。聽起來有點(diǎn)像是哲學(xué)概念，但是不重要，關(guān)鍵是我們需要了解的是其主張的7大基本原則，這些原則與我們的體驗(yàn)設(shè)計(jì)才是息息相關(guān)的。1、簡(jiǎn)單原則簡(jiǎn)單原則是指在人眼的認(rèn)知過程中，大腦會(huì)把一個(gè)復(fù)雜的物體分解成較為簡(jiǎn)單化的物象來理解，以降低大腦的認(rèn)知負(fù)荷。

▲簡(jiǎn)單原則

左圖可以有多種拆解方式，但大多數(shù)人會(huì)將其拆分為右側(cè)的簡(jiǎn)單方形，而非中間的復(fù)雜形狀。這體現(xiàn)了簡(jiǎn)單原則：越是簡(jiǎn)單的圖形認(rèn)知難度越低。通常來說，簡(jiǎn)單圖形的認(rèn)知難度大約為“圓≈方≤三角形＜多邊形”。

▲基本幾何體與復(fù)雜幾何體

除此之外，與過去學(xué)習(xí)到的規(guī)律相似的對(duì)象也更容易被認(rèn)知。因此在設(shè)計(jì)中使用常見的圖標(biāo)和符號(hào)，如放大鏡表示搜索、紅色表示警告等，可以幫助用戶更容易理解和使用產(chǎn)品。

知識(shí)小延展：

關(guān)于簡(jiǎn)單原則，我們提到最終是為了給大腦減少負(fù)荷，那所謂的負(fù)荷到底有幾類？如何衡量這些負(fù)荷的輕重？

答案：

負(fù)荷一般可以分為認(rèn)知負(fù)荷、操作負(fù)荷和視覺負(fù)荷三類：

1）認(rèn)知負(fù)荷指人腦在思考、記憶或計(jì)算時(shí)所消耗的能量負(fù)載，簡(jiǎn)單來說就是燒腦程度；

2）操作負(fù)荷就是因抬手、點(diǎn)擊、眼動(dòng)等運(yùn)動(dòng)所消耗的能量負(fù)載，簡(jiǎn)單來說就是操作復(fù)雜度；

3）視覺負(fù)荷是指我們?yōu)g覽一個(gè)頁面時(shí)，人眼所接受到的信息量，簡(jiǎn)單來說就是信息復(fù)雜度；

通常情況下，認(rèn)知負(fù)荷的難度最大，其次是操作負(fù)荷，視覺負(fù)荷的難度較低。舉個(gè)例子：

▲登錄頁面的迭代

在Web端設(shè)計(jì)時(shí)，手機(jī)號(hào)和短信驗(yàn)證碼同頁呈現(xiàn)是非常普遍的一個(gè)設(shè)計(jì)模式。移動(dòng)端設(shè)計(jì)興起時(shí)，這樣的設(shè)計(jì)也延續(xù)了過來，但隨著移動(dòng)端設(shè)計(jì)的發(fā)展，就逐步被更主流的拆分設(shè)計(jì)（分兩個(gè)頁面分別呈現(xiàn)手機(jī)號(hào)和短信驗(yàn)證碼）所替代。

這樣的設(shè)計(jì)對(duì)于操作負(fù)荷來說其實(shí)是沒什么變化的，主要的就是對(duì)認(rèn)知負(fù)荷的降低，達(dá)到一個(gè)頁面一個(gè)核心關(guān)注點(diǎn)的設(shè)計(jì)目標(biāo)。

2、接近性原則

又稱親密法則，就近原則或者鄰近原則，指距離相近的各部分區(qū)域組成整體，強(qiáng)調(diào)位置。

▲接近性原則

以上圖為例，當(dāng)元素之間的間距保持一致時(shí)，視覺上會(huì)顯得比較均衡，不會(huì)讓人產(chǎn)生將元素聯(lián)系起來的錯(cuò)覺。但當(dāng)元素的橫向和縱向距離發(fā)生變化時(shí)，我們的大腦會(huì)傾向于將距離較近的元素看成一個(gè)組，這就是接近性法則最直觀的體現(xiàn)。

在日常生活中，接近性法則的應(yīng)用案例有很多。例如，在進(jìn)行書籍排版時(shí)，由于橫向閱讀和縱向閱讀的版式不同，為了讓用戶能夠直觀地理解閱讀順序，我們需要增加行間距、縮小字間距，以使橫向排版和縱向排版的差異一目了然，而無需依靠具體的語義來傳遞信息。

▲書籍排版中的接近性原則

在生活中，如果不注重接近法則進(jìn)行設(shè)計(jì)，還有可能鬧出以下的笑話：

▲小炒便飯

在界面設(shè)計(jì)中，我們經(jīng)常運(yùn)用接近性原則，將屬性相同或場(chǎng)景相似的信息放在一起，以降低用戶的閱讀成本，提高用戶的感知效率。同時(shí)，我們也要盡可能將不相關(guān)的信息區(qū)分開來，避免將它們混合在一起而導(dǎo)致不必要的誤解和混淆。

▲視頻卡片

我們也可以用接近性原則來保持組件密度和網(wǎng)格布局之間的平衡。如果在組件密集的情況下，想要用戶能夠快速瀏覽內(nèi)容組，就需要增加邊距和間距寬度，使內(nèi)容的分組更明顯，以便用戶更加清晰地瀏覽信息。

▲谷歌布局建議

在設(shè)計(jì)交互流程時(shí)，也可以通過結(jié)合接近性原則，將相關(guān)的操作步驟放在一起，以提高用戶的操作效率和體驗(yàn)。

▲相關(guān)的內(nèi)容放在一起看了這么久，下面做個(gè)小測(cè)試，以下左右兩圖展示相同的信息，大家覺得哪種形式更合理？

▲測(cè)試來自網(wǎng)絡(luò)

左圖中信息間隔分布較為平均，這使得大腦試圖分組和簡(jiǎn)化信息時(shí)所需要花費(fèi)的時(shí)間更長(zhǎng)，且橫行和縱向的信息似乎都可以分組解讀，大腦需要花費(fèi)更多的精力進(jìn)行解讀。

相比之下，右圖運(yùn)用接近法則，用較大的間隔清晰地區(qū)分球隊(duì)和數(shù)據(jù)，大腦不需要再為此付出額外的精力。即使添加新的信息，也不會(huì)增加整體感知的負(fù)擔(dān)。因此右側(cè)的布局更清晰合理。

?知識(shí)小延展：

多近能成組 ？多遠(yuǎn)會(huì)分離？

答案：

接近性是相對(duì)而言的。在書籍設(shè)計(jì)中，核心間距原則是：字間距＜行間距＜段間距＜欄間距＜頁邊距。借鑒到我們的界面設(shè)計(jì)中，這個(gè)設(shè)計(jì)標(biāo)準(zhǔn)依然成立，當(dāng)有一個(gè)明顯的大間距作為對(duì)照時(shí)，小間距之間的元素就會(huì)形成一個(gè)組。

以朋友圈的九宮格為例，當(dāng)圖片間距普通保持較小且間距統(tǒng)一時(shí)，其看起來是一個(gè)整體，當(dāng)我們將圖片的間距擴(kuò)大到一定程度，九宮格的整體性就被破壞了，甚至當(dāng)圖片間距足夠大時(shí)，每張圖片都像單獨(dú)的個(gè)體。

▲朋友圈九宮格

3、相似性原則

相似指的是在某一方面相似的元素趨向于形成一個(gè)組。

▲相似性法則

如上圖所示，人們會(huì)把那些明顯具有共同特性(如形狀、大小、顏色等)的事物當(dāng)成一個(gè)整體，與不具有相似視覺特征的元素相比，具有相似視覺特征的元素被認(rèn)為更加相關(guān)。

在界面設(shè)計(jì)中也有許多利用相似性法則進(jìn)行信息分組的案例。如在搜索推薦中，使用顏色來區(qū)分普通搜索詞和熱搜詞；在導(dǎo)航應(yīng)用中，同時(shí)關(guān)于同一種類型的地點(diǎn)（如車站）統(tǒng)一使用同一種圖標(biāo)，幫助用戶快速識(shí)別。

▲相似性法則應(yīng)用案例

?知識(shí)小延展：

『接近性 』VS 『相似性』誰更占主導(dǎo)？

答案：

接近性比重較大。如下圖的圓形改變形狀，甚至添加顏色，人們也會(huì)把相近的一組當(dāng)成一個(gè)整體。

▲相似與接近性對(duì)比

4、連續(xù)性原則

連續(xù)原則，又被稱為延續(xù)原則，即在直線或曲線上的元素，比不在直線或曲線上的元素更相關(guān)。

▲連續(xù)性原則

視覺系統(tǒng)在感知過程中更傾向于感知連續(xù)、整體的形式，而不是分散的碎片，通過尋找微小的共性，可以將多個(gè)不同的信息整合成一個(gè)整體。例如上圖，由于視覺慣性的作用，我們傾向于讓知覺對(duì)象的直線保持直線，曲線保持曲線。

連續(xù)性原則被廣泛應(yīng)用于界面設(shè)計(jì)和logo設(shè)計(jì)中，以提高設(shè)計(jì)的效果和用戶的體驗(yàn)。舉個(gè)例子：

▲連續(xù)性原則案例

左圖我們不會(huì)認(rèn)為是兩個(gè)殘缺的圓，而是兩個(gè)相交的圓；右圖IBM的logo 我們之所以能看出來是 IBM，就是因?yàn)槲覀冊(cè)谝曈X上看到的不是離散的線條，而是連續(xù)的圖形。

再比如在“簽到”頁面設(shè)計(jì)中，利用連續(xù)性法則將簽到獎(jiǎng)勵(lì)與進(jìn)展連接起來， 引導(dǎo)用戶持續(xù)簽到獲得獎(jiǎng)勵(lì)。除此之外，在數(shù)值趨勢(shì)圖、加載進(jìn)度、身份認(rèn)證、視頻播放進(jìn)度等場(chǎng)景下也會(huì)較多用到連續(xù)性原則。

▲簽到獎(jiǎng)勵(lì)的連續(xù)性設(shè)計(jì)

5、閉合性原則

人們?cè)谟^察熟悉的視覺形象時(shí)，會(huì)把不完整的局部形象當(dāng)作一個(gè)整體的形象來感知，這種視覺上的自動(dòng)補(bǔ)齊，稱之為閉合。如果局部形象過于陌生或者簡(jiǎn)略，則不會(huì)產(chǎn)生整體閉合聯(lián)想。

▲閉合性原則

比如圖上這些點(diǎn)，我們不會(huì)認(rèn)為這是各種零碎的點(diǎn)，而是感知到了這是一個(gè)圓的形狀。

常見的閉合方式有：形狀閉合、負(fù)形閉合、經(jīng)驗(yàn)閉合。

1）“形狀閉合”是指大腦會(huì)將形狀趨于完整的形狀閉合。

在界面設(shè)計(jì)中經(jīng)常用形狀閉合的方式，來提示用戶界面外隱藏的內(nèi)容。如下左圖中，新游預(yù)約模塊的第二個(gè)卡片僅露出了以一小部分，但大腦會(huì)將露出的這一小部分卡片閉合成一個(gè)完整的卡片，由此提示用戶旁邊隱藏者更多內(nèi)容。右圖中問題卡片也是同理。

▲形狀閉合案例

2）“負(fù)形閉合”是指畫面中的負(fù)形（留白）會(huì)形成用戶熟悉的形象，被當(dāng)做整體感知。負(fù)形閉合，多用在LOGO，海報(bào)等藝術(shù)設(shè)計(jì)中。

▲負(fù)形閉合案例

3）“經(jīng)驗(yàn)閉合”是利用人們已經(jīng)累積新的認(rèn)知習(xí)慣，來進(jìn)行內(nèi)容的傳達(dá)。

選項(xiàng)卡的設(shè)計(jì)便是經(jīng)驗(yàn)閉合的典型按鈕。一開始的選項(xiàng)卡都是有明確的邊界線的，利用邊界線的界定，讓用戶把它認(rèn)知為一個(gè)整體，但隨著扁平化設(shè)計(jì)的發(fā)展，到后來已經(jīng)省略成完全不帶邊界線的Tab設(shè)計(jì)了，用更少的視覺元素表達(dá)，減輕人在圖形識(shí)別上的精力消耗。這種選項(xiàng)卡可能對(duì)初期接入互聯(lián)網(wǎng)產(chǎn)品的用戶來說，有一定的理解門檻的，需要一定的經(jīng)驗(yàn)積累，所以才叫經(jīng)驗(yàn)閉合。

▲經(jīng)驗(yàn)閉合案例

講了這么多，我們?cè)賮砜匆粋€(gè)網(wǎng)上很火的小測(cè)試，以下圖片中你看到的是什么字？

▲閉合性原則的小測(cè)試

這個(gè)測(cè)試就是閉合性原則的一個(gè)應(yīng)用，它也從側(cè)面告訴我們想讓閉合性原則起作用，需要把握一個(gè)“度”。如果缺失的部分是很容易補(bǔ)全的，閉合就會(huì)發(fā)生；當(dāng)缺失的太多，或缺失的形式很難理解、需要努力思考，閉合發(fā)生的可能就很小。就像一開始案例里的小點(diǎn)，很容易就會(huì)發(fā)生閉合，變成圓形。但是在這個(gè)小測(cè)試中，就會(huì)有不同答案發(fā)生。

?知識(shí)小延展：

『連續(xù)性 』和 『閉合性 』 有什么關(guān)系？

答案：

連續(xù)性原則強(qiáng)調(diào)方向，重在信息方向的指引；閉合性原則強(qiáng)調(diào)始終，重在信息的完整性（開始與結(jié)束）。

▲連續(xù)性與閉合性的區(qū)分

6、主體與背景原則

主體與背景原則是指大腦將視覺區(qū)域分為主體和背景，主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其余則是背景。

▲主體與背景原則

如上圖所示，左圖大腦看上去就會(huì)感覺是一個(gè)白色的方形疊在藍(lán)色的背景中，白色的方塊一下就吸引了我們的注意力，右圖則相反。這是因?yàn)榇竽X通常認(rèn)為構(gòu)圖中最小的物體是圖形主體，而更大的物體則是背景。

在界面設(shè)計(jì)中，利用主體背景法則，營(yíng)造一種空間感，給用戶帶來視覺引導(dǎo)，讓用戶快速感知重要的信息內(nèi)容。主體和背景的區(qū)別可以從以下兩個(gè)方面來控制：

1）場(chǎng)景大?。何覀儍A向于將處于大場(chǎng)景中的中間小區(qū)域部分視為主體，而大場(chǎng)景視為背景，比如在應(yīng)用開屏中，利用大小對(duì)比，突出應(yīng)用logo或slogan信息；

2）層級(jí)關(guān)系：如果在同一個(gè)平面中，我們傾向于將處于視覺第一層級(jí)的物體視為主體。比如重要信息的彈窗提示，以及弱化背景從而突出內(nèi)容等。

▲主體與背景原則案例

7、共同命運(yùn)原則

無論元素之間的距離有多遠(yuǎn)，或者它們看起來有多不同，如果它們一起運(yùn)動(dòng)或變化，它們都被認(rèn)為是相關(guān)的。

▲共同命運(yùn)原則

這里的共同命運(yùn)針對(duì)的是運(yùn)動(dòng)的物體。與接近性原理和相似性原理相像，都與我們的視覺系統(tǒng)會(huì)有著給對(duì)象進(jìn)行分組來感知事物的傾向相關(guān)。

共同命運(yùn)強(qiáng)調(diào)的是方向，當(dāng)元素的運(yùn)動(dòng)、方向具有共同運(yùn)動(dòng)形式或者某種規(guī)律使，我們會(huì)將其視為為彼此相關(guān)的一個(gè)群組或整體。

▲共同命運(yùn)原則案例

8、小結(jié)

以上是界面設(shè)計(jì)中常用的格式塔法則，包括簡(jiǎn)單性原則、接近性原則、相似性原則、連續(xù)性原則、閉合性原則、主體與背景原則以及共同命運(yùn)原則。

簡(jiǎn)單原則要求設(shè)計(jì)簡(jiǎn)潔明了，接近性原則要求將相關(guān)元素放在一起，相似性原則要求相似元素使用相同的視覺形式，連續(xù)性原則要求將相關(guān)元素放在相鄰的位置，閉合性原則要求將相關(guān)元素組成一個(gè)封閉的形狀，主體與背景原則要求將主體與背景進(jìn)行清晰的區(qū)分，共同命運(yùn)原則要求相關(guān)元素表現(xiàn)出相似的運(yùn)動(dòng)狀態(tài)。這些原則可以幫助設(shè)計(jì)師更好地組織和呈現(xiàn)信息，提升用戶的使用體驗(yàn)和效率。

二、交互設(shè)計(jì)5定律交互設(shè)計(jì)5定律是結(jié)合交互設(shè)計(jì)時(shí)常見的過程目標(biāo)：少、快、好、省，總結(jié)對(duì)應(yīng)的5個(gè)常用設(shè)計(jì)定律：

少——奧卡姆剃刀原理、米勒定律

快——多爾蒂門檻

好——雅各布定律省——能省則省原則

1、奧卡姆剃刀原理

奧卡姆剃刀原理指的是“如無必要，勿增實(shí)體” 。不必要的元素會(huì)增加認(rèn)知的負(fù)擔(dān)，降低瀏覽的效率，而且會(huì)增加不可預(yù)測(cè)后果發(fā)生的機(jī)率。

▲?案例：三星遙控器&小米遙控器

如上圖的遙控器，以前很多遙控器上面布滿了密密麻麻的按鍵，這類遙控器的學(xué)習(xí)成本比較高，且使用時(shí)很容易誤操作。而小米遙控器在傳統(tǒng)遙控器上進(jìn)行了優(yōu)化，僅保留最核心的操作，去除一切不需要的按鈕，這就是奧卡姆剃刀原理的一個(gè)典型應(yīng)用。

在界面設(shè)計(jì)中采用奧卡姆剃刀原則，簡(jiǎn)化頁面元素和布局，避免過多的圖形和文字，以保持頁面的清晰度和易用性。如下圖的瀏覽器界面，當(dāng)其他網(wǎng)絡(luò)搜索服務(wù)商試圖在其網(wǎng)站上增加廣告與特別功能時(shí)，谷歌仍堅(jiān)持簡(jiǎn)單有效的設(shè)計(jì)。

▲?案例：谷歌瀏覽器&其他瀏覽器

在實(shí)際的工作中，我們往往很容易就犯下未遵循奧卡姆剃刀原理的錯(cuò)誤，比如我們之前外銷瀏覽器改版后，在啟動(dòng)頁增加了新功能引導(dǎo)，結(jié)果引導(dǎo)頁上線后，搜索滲透率與搜索量都下降顯著。同樣在活動(dòng)設(shè)計(jì)時(shí)，為了告訴用戶怎么操作，增加了一串長(zhǎng)的功能引導(dǎo)，結(jié)果也導(dǎo)致了用戶的大量流失。這個(gè)反面案例也告訴我們?cè)谧龉δ芤龑?dǎo)時(shí)一定要謹(jǐn)慎，沒有必要不要增加。

▲?案例：新功能引導(dǎo)

日常設(shè)計(jì)中怎么應(yīng)用奧卡姆剃刀原理呢？

1）如果要從功能相同的設(shè)計(jì)中做出抉擇，最好選用最簡(jiǎn)單的設(shè)計(jì)；

2）只放置必要的元素；

3）減少點(diǎn)擊次數(shù)；

4）減少段落個(gè)數(shù)；

5）提供用戶更少的選項(xiàng)；

6）讓新用戶輕松使用。

2、米勒定律

人們工作記憶平均能記住的元素?cái)?shù)量?jī)H為4±1。所以設(shè)計(jì)時(shí)若選項(xiàng)較多，就需要對(duì)選項(xiàng)進(jìn)行分類和分組。

我們來做個(gè)小測(cè)試，你能在30秒內(nèi)快速記住這串?dāng)?shù)字嗎？

再換成以下的圖呢？你能記住幾個(gè)？

第二張數(shù)字僅是對(duì)內(nèi)容進(jìn)行了分組，就可以提升瀏覽和記憶的效率，這其實(shí)就是米勒定律的一個(gè)應(yīng)用。在交互設(shè)計(jì)中，我們可以經(jīng)常利用米勒定律，來減少用戶的認(rèn)知負(fù)荷，提高信息的易讀性。

那日常設(shè)計(jì)中具體怎么應(yīng)用米勒定律呢？

1）控制信息呈現(xiàn)數(shù)量。例如，在一個(gè)導(dǎo)航欄中，將導(dǎo)航項(xiàng)控制在5個(gè)以內(nèi)，可以讓用戶更容易找到他們需要的信息。

2）分組、分段展示信息。例如，在登錄頁面中，將手機(jī)號(hào)碼按照344的間隔區(qū)分，可以讓用戶更容易識(shí)別手機(jī)號(hào)信息。

▲?案例：登錄頁手機(jī)號(hào)分段顯示

3）保持設(shè)計(jì)一致性，避免用戶需要重新學(xué)習(xí)和適應(yīng)不同的設(shè)計(jì)。例如，在一個(gè)應(yīng)用程序中，將相同的操作和功能使用相同的視覺形式，可以讓用戶更容易理解和使用。

3、多爾蒂門檻

系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。

上世紀(jì) 70 年代后期，計(jì)算機(jī)研究人員依然認(rèn)為計(jì)算機(jī)可以花費(fèi)兩秒的時(shí)間對(duì)使用者的操作做出反饋，因?yàn)樗麄冋J(rèn)為人們大概正好需要兩秒時(shí)間來決定下一步的操作，所以 2s（2000ms）一度成為了當(dāng)年計(jì)算機(jī)響應(yīng)時(shí)間的標(biāo)準(zhǔn)值。直到 1979 年計(jì)算機(jī)的算力開始大幅提升，也有了足夠的能力在 2000ms 內(nèi)做出響應(yīng)，這時(shí) IBM 的研究員 Walter Doherty 進(jìn)行了一系列研究來評(píng)估算力的增長(zhǎng)對(duì)生產(chǎn)力的影響。

研究結(jié)果表明，計(jì)算機(jī)的響應(yīng)速度直接影響了使用者做出下一個(gè)決定所要花費(fèi)的時(shí)間（這個(gè)時(shí)間被稱為用戶響應(yīng)時(shí)間），換句話說，計(jì)算機(jī)相應(yīng)的時(shí)間越長(zhǎng)，用戶就要花費(fèi)越多的時(shí)間來思考和決定下一步的操作。

不僅如此，Doherty 還認(rèn)為響應(yīng)速度低于 400ms 的系統(tǒng)或者程序，會(huì)讓人上癮。放在當(dāng)下的環(huán)境來看，這當(dāng)然只是一句比較夸張的話，但是結(jié)論是需要我們重視的，程序的響應(yīng)時(shí)間，務(wù)必在 400ms 之內(nèi)。

▲?不同速度啟動(dòng)demo（注：請(qǐng)務(wù)必挨個(gè)觀察）

多爾蒂門檻給出了響應(yīng)時(shí)間的上限參考，而后續(xù)的研究則提供了更為細(xì)致的響應(yīng)標(biāo)準(zhǔn)。一般來說，元素點(diǎn)擊反饋間隔控制在0.1s左右 (0.14s以內(nèi))、元素入場(chǎng)退場(chǎng)時(shí)長(zhǎng)控制在0.2s左右(225ms~195ms)、頁面轉(zhuǎn)場(chǎng)時(shí)長(zhǎng)控制在0.3s 左右(300~400ms)是比較合適的。

4、雅各布定律

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

雅各布定律是由尼爾森十大原則的創(chuàng)立者、尼爾森諾曼集團(tuán)的創(chuàng)始人之一 雅各布·尼爾森提出的。他認(rèn)為用戶在其他千千萬萬個(gè)網(wǎng)站（產(chǎn)品）上積累經(jīng)驗(yàn)，學(xué)會(huì)如何使用網(wǎng)站，當(dāng)一個(gè)網(wǎng)站跟其他網(wǎng)站一致的時(shí)候用戶會(huì)立刻知道該如何操作，但如果違反了雅各布定律，那么用戶會(huì)毫不猶豫地離開。

舉個(gè)例子，在電商網(wǎng)站的商品詳情頁中，都將商品圖片信息放在上面，商品價(jià)格放在商品圖下方，加入購物車與下單操作常駐在頁面下方。在進(jìn)行商詳頁改版時(shí)一般會(huì)延續(xù)這種設(shè)計(jì)模式，再基于產(chǎn)品自己的特色進(jìn)行改善，而不是完全從0開始定制。使用相似設(shè)計(jì)模式的優(yōu)勢(shì)是用戶在使用產(chǎn)品時(shí)無需重新學(xué)習(xí)。

▲?案例：商品詳情頁的設(shè)計(jì)模式

雅各布定律不只是強(qiáng)調(diào)與其他產(chǎn)品保持設(shè)計(jì)模式的一致性，產(chǎn)品自身的一致性也很重要。這種一致性包括：一致的排版、一致的示能、一致的符號(hào)映射、一致的概念模型等，以提高用戶的使用效率和體驗(yàn)。

▲?按鈕的示能與反示能、常見的符號(hào)映射

5、能省則省原則

包括省心、省力、省時(shí)三個(gè)部分：

省心是指設(shè)計(jì)符合視覺認(rèn)知原理，符合行業(yè)設(shè)計(jì)習(xí)慣。這與格式塔法則、雅各布定律有一定的相似之處。

省力是指幫用戶降低操作的難度。我們可以結(jié)合費(fèi)茨定律來降低用戶操作的難度和時(shí)間。費(fèi)茨定律指出從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來決定，到目標(biāo)的距離、目標(biāo)的大小。距離越短，操作越省力，所需的時(shí)間也就越短；目標(biāo)越大，操作也越省力，時(shí)間也越短。

▲?費(fèi)茨定律

省時(shí)包括縮減物理時(shí)間和加速心理時(shí)間?？s短物理時(shí)間可以通過簡(jiǎn)化操作路徑、減少加載時(shí)間等方式達(dá)成。加速心理時(shí)間一般應(yīng)用在加載等需要用戶較長(zhǎng)等待的場(chǎng)景中，通過動(dòng)效的方式降低等待的焦慮。

▲ 縮短驗(yàn)證碼校驗(yàn)的操作路徑

▲ 加載動(dòng)效

6、小結(jié)

以上就是交互設(shè)計(jì)5定律：奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、能省則省原則，設(shè)計(jì)時(shí)可以根據(jù)不同的設(shè)計(jì)目標(biāo)與策略，結(jié)合這些原則進(jìn)行設(shè)計(jì)，以提高用戶的使用體驗(yàn)。

結(jié)語如威廉·斯特倫克（William Strunk）所說：“優(yōu)秀的設(shè)計(jì)師有時(shí)會(huì)無視設(shè)計(jì)法則，但當(dāng)他們這樣做的時(shí)候，通常會(huì)有一些補(bǔ)償性的措施。除非你確定你能做得那么好，否則最好還是遵守這些法則?！?/p>

設(shè)計(jì)法則相當(dāng)于我們?nèi)粘Ｉ钪械某ＷR(shí)，每一個(gè)法則背后都蘊(yùn)含著很多優(yōu)秀的案例和設(shè)計(jì)思考。作為設(shè)計(jì)師，去學(xué)習(xí)并掌握設(shè)計(jì)基礎(chǔ)法則是能力進(jìn)階的必經(jīng)之路，它能夠提高設(shè)計(jì)決策時(shí)的效率。但是在實(shí)際項(xiàng)目中，我們還需要綜合考慮各種因素，靈活運(yùn)用設(shè)計(jì)法則，以創(chuàng)造出最符合產(chǎn)品需求和用戶需求的設(shè)計(jì)。