交互設(shè)計(jì)七大定律：費(fèi)茨定律（Fitts’ Law）、?？硕桑℉ick’s Law ）、神奇數(shù)字7±2?法則、接近法則（The Law Of?Proximity）、新鄉(xiāng)重夫：防錯(cuò)原則、復(fù)雜性守恒定律/泰思勒定律（Tesler’s Law ）、簡(jiǎn)單有效原理/奧卡姆剃刀原理（Occam’s Razor ）。

引言

馬克吐溫說(shuō)過(guò)：當(dāng)你手里只有錘子的時(shí)候，那么看待什么問(wèn)題都像釘子。

作為 UI 設(shè)計(jì)師如果每天想著如何單純的提高自己的視覺(jué)能力，那么看待任何問(wèn)題都只能是視覺(jué)問(wèn)題。

這樣的話在工作中我們很難去說(shuō)服別人接受自己的設(shè)計(jì)提案，因?yàn)槲覀儫o(wú)法通過(guò)多維度的理論知識(shí)來(lái)佐證自己設(shè)計(jì)的合理性。

本周我們會(huì)繼續(xù)分享交互設(shè)計(jì)七大定律的其他4個(gè)理論：費(fèi)茨定律、格式塔原則、本能反應(yīng)、色彩心理學(xué)。

費(fèi)茨定律

1. 費(fèi)茨定律定義

費(fèi)茨定律我們可以簡(jiǎn)單的理解為：

1. 目標(biāo)越大，越容易點(diǎn)擊或操作；
2. 兩者的距離越近越容易操作。

2. 公式&來(lái)源

1954年，當(dāng)時(shí)擔(dān)任美國(guó)空軍人類工程學(xué)部門主任的保羅·費(fèi)茨（Paul M. Fitts）博士，對(duì)人類操作過(guò)程中的運(yùn)動(dòng)特征、運(yùn)動(dòng)時(shí)間、運(yùn)動(dòng)范圍和運(yùn)動(dòng)準(zhǔn)確性進(jìn)行了研究，提出了著名的Fitts定律。

費(fèi)茨定律的公式：t = a + b log2 (D / S + 1)，其中a，b是經(jīng)驗(yàn)參數(shù)，它們依賴于具體的指點(diǎn)設(shè)備的物理特性，以及操作人員和環(huán)境等因素。

3. 費(fèi)茨定律的應(yīng)用

a.按鈕越大越容易點(diǎn)擊

例如nice、閑魚(yú)、轉(zhuǎn)轉(zhuǎn)的發(fā)布欄按鈕，屬于產(chǎn)品的重要核心功能，放大之后擴(kuò)大了按鈕的熱區(qū)范圍并增強(qiáng)了視覺(jué)沖擊力，更加容易操作。

b.相關(guān)聯(lián)的功能按鈕放在一起更容易點(diǎn)擊

相關(guān)聯(lián)的功能經(jīng)常出現(xiàn)在底部操作欄中，我們以淘寶、網(wǎng)易嚴(yán)選、高德地圖為例，它們的底部操作欄相關(guān)聯(lián)的功能按鈕都靠在一起。

如淘寶中“加入購(gòu)物車和立即購(gòu)買”、網(wǎng)易嚴(yán)選中的“立即購(gòu)買和加入購(gòu)物車”、高德中“探路和開(kāi)始導(dǎo)航”，都是緊密相連的業(yè)務(wù)，放在一起更加容易點(diǎn)擊。

c.次要功能的按鈕可以放的小一點(diǎn)

根據(jù)功能層級(jí)的重要性，我們可以將次要的功能放小一點(diǎn)。例如淘寶中介紹詳情頁(yè)的底部，“去購(gòu)買”的功能層級(jí)明顯大于其他三項(xiàng)（點(diǎn)贊、評(píng)論、收藏）的重要性。

d.功能類型不同的按鈕要放得遠(yuǎn)一點(diǎn)

功能類型不同按鈕放在一起很容易造成誤操作，例如UC瀏覽器中詳情頁(yè)的底部，“返回”和“評(píng)論、收藏、分享”的功能類型不同，如果靠在一起則容易引發(fā)誤觸，所以相隔很遠(yuǎn)，盡量避免誤操作。

格式塔原則

1. 格式塔原則定義

格式塔理論（Gestalt）強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，認(rèn)為整體不等于部分之和，意識(shí)不等于感覺(jué)元素的集合，行為不等于反射弧的循環(huán)。

我們可以簡(jiǎn)單的理解為：整體與個(gè)體的關(guān)系，整體和個(gè)體之間并不是單一的對(duì)等關(guān)系。

2. 格式塔原則應(yīng)用

UI設(shè)計(jì)中我們主要利用格式塔原則中的：相似性原則、延續(xù)性原則、封閉性原則、鄰近原則、簡(jiǎn)單原則。

a.相似性原則

當(dāng)人們看到具有相似特征的元素會(huì)自動(dòng)將其歸為一組。元素的相似性通常參考：大小、形狀、顏色、紋理等等來(lái)去界定。

例如貝殼租房的“資訊快遞”模塊，通過(guò)矩形相似性，我們會(huì)自然的將其看作一個(gè)整體。

b.延續(xù)性原則

人的眼睛會(huì)自然的從一個(gè)物體移動(dòng)到另一個(gè)物體，同時(shí)我們也更加傾向于把部分具有一定規(guī)則的獨(dú)立的個(gè)體看成一個(gè)整體。

例如 Fancy 頁(yè)面中的活動(dòng)模塊下的功能入口 ，我們的眼睛會(huì)自然的將他們的 icon 看成一條連續(xù)的線。

再例如我們常見(jiàn)的列表設(shè)計(jì)，都是遵循延續(xù)性原則。

c.封閉的原則

人眼會(huì)自動(dòng)將帶有一定動(dòng)向趨勢(shì)的不完全閉合的圖形看做一個(gè)整體，

封閉原則的應(yīng)用十分常見(jiàn)，在工作中我們稱作為截?cái)嗍皆O(shè)計(jì)。

例如我們常見(jiàn)的橫向交互，會(huì)在屏幕右側(cè)故意露出一部分，來(lái)告訴用戶通過(guò)滑動(dòng)可以得到更多內(nèi)容。

如上圖，F(xiàn)ancy 利用橫向交互隱藏更多內(nèi)容，同時(shí)又在屏幕的右邊展現(xiàn)出一部分內(nèi)容來(lái)吸引用戶滑動(dòng)查看更多內(nèi)容。

d.鄰近原則

人們會(huì)將相鄰比較近的元素自動(dòng)歸為一組。例如微信的發(fā)現(xiàn)頁(yè)面，我們第一印象就是相互靠近就是同類型的一組功能。

e.簡(jiǎn)單原則

具有對(duì)稱、規(guī)則、平滑的簡(jiǎn)單圖形特征的各部分趨于組成整體。

例如UC瀏覽器的詳情頁(yè)和閑魚(yú)以及京東金融的首頁(yè)，整體布局都趨于對(duì)稱、規(guī)則和平滑。

本能反應(yīng)

1. 本能反應(yīng)定義

本能反應(yīng)是指：用戶第一眼見(jiàn)到產(chǎn)品時(shí)的感受，而此時(shí)用戶還沒(méi)有與產(chǎn)品產(chǎn)生交互。

2. 對(duì)本能設(shè)計(jì)的誤解

對(duì)于本能設(shè)計(jì)的時(shí)常會(huì)存在一個(gè)誤解，認(rèn)為“漂亮美觀”的設(shè)計(jì)即是本能設(shè)計(jì)，這種想法是錯(cuò)誤的。

更有趣的是人會(huì)認(rèn)為漂亮具有吸引力的界面會(huì)更加好用，用戶會(huì)對(duì)這個(gè)觀念持續(xù)很久，直至付出巨大的成本，積累了足夠的經(jīng)驗(yàn)之后才會(huì)放棄并推翻之前的理論。

本能設(shè)計(jì)實(shí)際上是情感設(shè)計(jì)的一種，在特定的情境下一起人們心理上和情感上的反應(yīng)，而不是單純的美學(xué)設(shè)計(jì)。

3. 本能設(shè)計(jì)的應(yīng)用

a.營(yíng)造出干凈漂亮，具有美學(xué)設(shè)計(jì)的界面更容易受到用戶青睞。

例如 Fancy 極簡(jiǎn)化的設(shè)計(jì)，在配圖和布局上都十分考究。

b.注重情感設(shè)計(jì)，關(guān)注細(xì)節(jié)。

本能反應(yīng)作為情感化設(shè)計(jì)的一種，我們需要處處為用戶著想，在細(xì)節(jié)上為用戶提供便利。例如淘票票中的電影詳情頁(yè)，將電影的預(yù)告片提到頂部，用戶可以直接產(chǎn)看預(yù)告片，而不是再去下拉尋找。

c.兼顧易用性，避免華而不實(shí)的設(shè)計(jì)。

在設(shè)計(jì)中，我們首先要以業(yè)務(wù)和實(shí)現(xiàn)用戶的需求為主。例如貝殼租房中區(qū)域查找房源頁(yè)面右下角的低于icon，點(diǎn)擊之后展開(kāi)的地圖之后，用戶可以直觀的在的地圖上查找區(qū)域內(nèi)的房源。

色彩心理學(xué)

1. 色彩心理學(xué)的定義

色彩心理透過(guò)視覺(jué)開(kāi)始，從知覺(jué)、感情到記憶、思想、意志、象征等，其反應(yīng)與變化是極為復(fù)雜的。

色彩的應(yīng)用，很重視這種因果關(guān)系，即由對(duì)色彩的經(jīng)驗(yàn)積累而變成對(duì)色彩的心理規(guī)范，當(dāng)受到什么刺激后能產(chǎn)生什么反應(yīng)，都是色彩心理所要探討的內(nèi)容。

我們可以簡(jiǎn)單的理解為：色彩心理學(xué)是一種注重因果關(guān)系的心理學(xué)說(shuō)，側(cè)重于觀看色彩之后產(chǎn)生的感受。

2. 色彩心理學(xué)的應(yīng)用

不同的色彩在不同的地區(qū)與國(guó)家存在著不同的含義，在這里我們不會(huì)展開(kāi)的進(jìn)行詳細(xì)的論述，我們核心關(guān)注的是色彩給用戶帶來(lái)什么樣子的作用。

a.信息指示

經(jīng)過(guò)社會(huì)長(zhǎng)期的發(fā)展與培養(yǎng)，人們對(duì)色彩已經(jīng)有相對(duì)成熟的認(rèn)知，色彩能夠幫助產(chǎn)品來(lái)傳遞信息，例如綠色是“同意”的意思、紅色是“反對(duì)”的意思、橙黃色是“警告”的意思，最典型的案例就是紅綠燈。

在界面設(shè)計(jì)中我們需要在圖形化的基礎(chǔ)上結(jié)合色彩更好的準(zhǔn)確的傳遞信息，引導(dǎo)用戶。

例如貝殼租房的詳情頁(yè)中的底部操作欄，“在線咨詢”和“電話咨詢”按鈕通過(guò)添加背景色來(lái)引導(dǎo)用戶點(diǎn)擊。

b.建立印象

色彩往往能給人建立第一印象的重要因素，例如我們經(jīng)常聽(tīng)到這個(gè)界面的“配色”很高級(jí)，或者這個(gè)界面看起來(lái)很干凈等等，都是色彩為用戶的建立的第一印象。例如莫蘭迪的畫作：

Giorgio Morandi

例如每日故宮的界面設(shè)計(jì)，設(shè)色典雅，整體色調(diào)極為融合，給人一種溫潤(rùn)、典雅的感覺(jué)。

總結(jié)

最后我們?cè)倩仡櫼幌挛覀冎v的四個(gè)心理學(xué)定律：

1. 費(fèi)茨定律：目標(biāo)越大，越容易點(diǎn)擊或操作；兩者的距離越近越容易操作。
2. 格式塔原則我們提到在設(shè)計(jì)中我們主要參考“相似性原則、延續(xù)性原則、封閉性原則、鄰近原則、簡(jiǎn)單性原則”這五大原則進(jìn)行界面設(shè)計(jì)。
3. 本能反應(yīng)是指用戶第一眼見(jiàn)到產(chǎn)品時(shí)的感受，而此時(shí)用戶還沒(méi)有與產(chǎn)品產(chǎn)生交互。我們需要注意的一點(diǎn)是：美觀不等于本能設(shè)計(jì)。
4. 色彩心理學(xué)是一種注重因果關(guān)系的心理學(xué)說(shuō)，側(cè)重于觀看色彩之后產(chǎn)生的感受，同樣是情感設(shè)計(jì)中的一種。

參考鏈接：

設(shè)計(jì)法則： Fitts’ Law / 菲茨定律（費(fèi)茨法則）https://dwz.cn/hsQgzJ9O

百度百科-費(fèi)茨定律 https://dwz.cn/lh2IgJPi

百度百科-格式塔心理學(xué) https://dwz.cn/s8qz8Vjp

UI設(shè)計(jì)中的格式塔原則 https://dwz.cn/m6ZSYFED

大產(chǎn)品小細(xì)節(jié)！5分鐘了解格式塔原則 https://dwz.cn/WOQEbsX1

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

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