交互設(shè)計(jì)師的重要價(jià)值在于使產(chǎn)品變得易用且人性化。這就需要我們深入學(xué)習(xí)交互設(shè)計(jì)的基本理論知識(shí)，幫助我們拆分問題，提高效率，創(chuàng)造出更好的設(shè)計(jì)。

前段時(shí)間我們發(fā)布了文章《交互設(shè)計(jì)方法和理論（上）》，反響熱烈，為了滿足廣大粉絲求知若渴的需求，我們馬不停蹄地總結(jié)了下篇，在開始正文之前，我們先來光速回顧一下上篇講的方法和理論：

一、需求挖掘理論

二、需求分級(jí)理論-通用四象限法

三、需求分級(jí)理論-KANO模型

四、需求分級(jí)理論-馬斯洛需求層次理論

五、產(chǎn)品框架設(shè)計(jì)理論-用戶體驗(yàn)五要素

六、產(chǎn)品框架設(shè)計(jì)理論-7（±2）信息塊效應(yīng)

七、產(chǎn)品框架設(shè)計(jì)理論-卡片分類法

八、界面設(shè)計(jì)理論-格式塔理論

如果你忘記了具體內(nèi)容，可在公眾號(hào)對(duì)話框回復(fù)“交互設(shè)計(jì)”即可溫習(xí)上篇哦~話不多說，我們馬上進(jìn)入今天的分享：

九、80/20原則

任何一個(gè)大型的系統(tǒng)中，大約80%的效用是由系統(tǒng)中20%的變量產(chǎn)生的。

“用戶80%的時(shí)間花在了20%的功能上?！?/p>

80/20法則又被稱為二八定律、帕累托法則（定律），也叫最省力的法則、不平衡原則。最初是19世紀(jì)末20世紀(jì)初意大利經(jīng)濟(jì)學(xué)家巴萊多發(fā)現(xiàn)的。他認(rèn)為，在任何一組東西中，最重要的只占其中一小部分，約20%，其余80%盡管是多數(shù)，卻是次要的。80/20法則被廣泛應(yīng)用于社會(huì)學(xué)、經(jīng)濟(jì)、用戶體驗(yàn)設(shè)計(jì)、企業(yè)管理等。

8020法則有助于資源整合，可以幫助設(shè)計(jì)師最大化提升用戶體驗(yàn)質(zhì)量。比如：用戶用80%的時(shí)間集中于產(chǎn)品20%的功能時(shí)，那設(shè)計(jì)師應(yīng)該集中力量對(duì)那20%進(jìn)行優(yōu)化，剩余80%應(yīng)該重新評(píng)估，確認(rèn)他們的價(jià)值。設(shè)計(jì)師可以利用此法則，對(duì)設(shè)計(jì)中的所有元素進(jìn)行重新評(píng)估，劃定重新設(shè)計(jì)與優(yōu)化的范圍，有效決定優(yōu)勢(shì)資源進(jìn)行再設(shè)計(jì)。80/20法則是不受人為直接控制的，它是自然而然形成的。

80/20 法則的核心在于分清主次，更有效地調(diào)配和整合資源。

• 占據(jù)產(chǎn)品中80%使用量的是20%的功能；
• 80％的關(guān)注度花費(fèi)在頁面的20％上；
• 80%的進(jìn)步，是來自于20%關(guān)鍵性的努力；
• 80%的產(chǎn)品誤差，源自于20%的組件；
• 企業(yè)80%的收益，來自于20%的產(chǎn)品。

有些情況下，確定至關(guān)重要的20%的構(gòu)成是容易的。通過網(wǎng)頁數(shù)據(jù)統(tǒng)計(jì)、表單提交和session cookies可以追蹤到用戶的使用行為，幫助我們了解用戶與哪些UI區(qū)域有最多的交互。

80/20法則在用戶體驗(yàn)設(shè)計(jì)中的應(yīng)用：

案例一：找出其中20%的關(guān)鍵功能做成工具條展示在主界面，其余隱藏

案例二：QQ同步助手需求場(chǎng)景分析表（圖片來自于《騰訊產(chǎn)品法》）

《騰訊產(chǎn)品法》中例舉出QQ同步助手需求場(chǎng)景分析案例（如上圖所示），對(duì)于工具類的產(chǎn)品來說，產(chǎn)品要解決的「問題」很清楚，用戶在人口學(xué)、社會(huì)學(xué)方面的因素，如性別、年齡等對(duì)產(chǎn)品影響不大，所以可以選擇按「使用場(chǎng)景」來劃分用戶模型。QQ同步助手中A類換機(jī)用戶和B類備份防丟失用戶的用戶量占比分別是90%和80%，利用80%的時(shí)間集中該產(chǎn)品20%的主要功能時(shí)，那么我們的設(shè)計(jì)就要集中發(fā)力在這些關(guān)鍵功能上面，所以此兩類功能也被定義為了產(chǎn)品核心動(dòng)線。

案例三：在傳統(tǒng)的網(wǎng)站和網(wǎng)絡(luò)應(yīng)用中，使用頻率和交互頻率最高的區(qū)域被歸入20%部分。當(dāng)設(shè)計(jì)移動(dòng)界面時(shí)，只關(guān)注那20%的部分。

相比于傳統(tǒng)網(wǎng)站中所提供的豐富功能，即使此網(wǎng)站的移動(dòng)版包含20%最常用的功能，那么就可以說這個(gè)移動(dòng)版本具有了大多數(shù)重要的功能。

上圖是一個(gè)網(wǎng)站的全貌，網(wǎng)站上有一些引導(dǎo)用戶行為的區(qū)域。這個(gè)網(wǎng)站設(shè)計(jì)絕對(duì)不是全世界最差的，但總的來說不是非常的集中，并且有太多的選擇。

對(duì)比下面的移動(dòng)版頁面：

相比之下，移動(dòng)版界面非常簡(jiǎn)潔，引導(dǎo)用戶第一眼找到最重要的信息，而不是讓用戶感覺不知所措。

緊湊的移動(dòng)網(wǎng)頁應(yīng)用是一個(gè)非常好的范例。設(shè)計(jì)師將大部分的精力投入到項(xiàng)目最重要的方面。

在理解了80/20法則后，我們可以將此法則廣泛的適用于各個(gè)場(chǎng)景中，如下：

• 分析數(shù)據(jù)，確定用戶最經(jīng)常使用的那20%的功能。
• 排定優(yōu)先級(jí)。關(guān)注網(wǎng)站或app中最核心功能，并不斷強(qiáng)化。
• 統(tǒng)計(jì)出歸入20%的最常使用的功能，在此基礎(chǔ)上簡(jiǎn)化設(shè)計(jì)和布局。
• 精簡(jiǎn)80%非關(guān)鍵性功能，大膽做減法。

此外，要注意的是，當(dāng)優(yōu)化20%時(shí)創(chuàng)造了一個(gè)新功能，可能就培養(yǎng)了一個(gè)新的行為習(xí)慣，此時(shí)要改變這些行為習(xí)慣，面臨的阻力就會(huì)比較大。

十、奧卡姆剃刀原理

奧卡姆原理也被稱為“簡(jiǎn)單有效原理”，由14世紀(jì)哲學(xué)家、圣方濟(jì)各會(huì)修士奧卡姆的威廉（William of Occam，約1285年至1349年）提出。通俗稱為“如無必要，勿增實(shí)體?！币簿褪钦f：如果有兩個(gè)功能相等的設(shè)計(jì)，那么選擇最簡(jiǎn)單的那個(gè)。奧卡姆剃刀原理并不是只肯定簡(jiǎn)單的設(shè)計(jì)就是好的，也不是否定一切復(fù)雜含蓄的設(shè)計(jì)就是不好的。核心是強(qiáng)調(diào)“簡(jiǎn)單”設(shè)計(jì)比“復(fù)雜”設(shè)計(jì)更容易讓人理解，傳達(dá)效果更好，可以以小博大。

以下案例節(jié)選自《交互設(shè)計(jì)：若無必要，勿增實(shí)體》和《交互設(shè)計(jì)原理之奧卡姆剃刀原理》）

案例一：

在Amazon Prime的案例中，左邊的方案用邊框區(qū)分每個(gè)項(xiàng)目卡，并在項(xiàng)目卡之間加了水平分割線。邊框并沒有帶來任何附加的價(jià)值，反而在視覺上增加了分割感，破壞了簡(jiǎn)潔的界面語言。相比之下，一條簡(jiǎn)單的分割線就能完成區(qū)分模塊的作用，并且還增加了更多的空間去羅列更多的項(xiàng)目。

案列二：

在日常的設(shè)計(jì)中，經(jīng)常會(huì)有產(chǎn)品經(jīng)理這樣說，“你看這邊這么空，我們不如放點(diǎn)引導(dǎo)性的圖文唄”。這時(shí)設(shè)計(jì)師估計(jì)要抓狂了，這簡(jiǎn)單的流程為什么要搞這么復(fù)雜。

分析如下，在增加流程以外的內(nèi)容，勢(shì)必會(huì)對(duì)用戶操作進(jìn)行干擾，降低表單填寫效率，并且可能會(huì)導(dǎo)致無法預(yù)期的后果(用戶關(guān)閉頁面)。

在功能性頁面設(shè)計(jì)過程中，我們需要知道在這個(gè)頁面用戶行為是什么？流程內(nèi)的引導(dǎo)盡量弱化于主流程。流程外的內(nèi)容，沒有必要不要增加。這一點(diǎn)其實(shí)很重要，簡(jiǎn)單的頁面讓用戶一眼就能找到他們自己感興趣的內(nèi)容，讓他們看起來更舒服，更能專心于你要表達(dá)的內(nèi)容上。而復(fù)雜的頁面會(huì)讓訪客一時(shí)找不到信息的重點(diǎn)，也分散了訪客的注意力。

遵從奧卡姆剃刀原則，科學(xué)設(shè)計(jì)簡(jiǎn)單頁面的方法：

（1）只放置必要的東西

簡(jiǎn)潔頁面最重要的一個(gè)方面是只展示有作用的東西，其他的都沒有。這并不意味著你不能提供給用戶很多的信息，你可以用“更多信息”的鏈接來實(shí)現(xiàn)這些。

（2）減少點(diǎn)擊次數(shù)

讓你的用戶通過很少的點(diǎn)擊就能找到他們想要的東西，不要讓他們找一個(gè)內(nèi)容找得很累。

（3）“外婆”規(guī)則

如果你的外婆（其他老點(diǎn)的人）也能輕松的使用你的頁面，你就成功了。

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

每當(dāng)你的網(wǎng)頁增加一段，頁面中主要的內(nèi)容就會(huì)被擠到一個(gè)更小的空間。那些段落并沒有起到什么好的作用，而是讓顧客們知道更多他們不想了解的東西。

（5）給予更少的選項(xiàng)

用戶希望在瀏覽網(wǎng)頁的時(shí)候思考的少一點(diǎn)。我們?cè)谡故緝?nèi)容的時(shí)候要努力減少用戶的思維負(fù)擔(dān)，這樣就會(huì)使瀏覽者使用更順暢，心態(tài)更平和。

十一、菲茨定律 / Fitts’ Law

從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來決定，到目標(biāo)的距離和目標(biāo)的大小（上圖中的D與W），用數(shù)學(xué)公式表達(dá)為時(shí)間T = a + b log2(D/W+1)。

T=移動(dòng)設(shè)備所需時(shí)長(zhǎng)；a,b是經(jīng)驗(yàn)常量；D=設(shè)備起始位置和目標(biāo)位置的距離；W=目標(biāo)的寬度大小。

菲茨定律的啟示：

• 按鈕等可點(diǎn)擊對(duì)象需要合理的大小尺寸。
• 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，
• 出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。
• ?要讓不常用或危險(xiǎn)的UI元素難以被點(diǎn)擊。

案例一：Mac OS X默認(rèn)將底欄（Dock)放到了屏幕的最下方；這樣的話底欄就變得“無限可選中”

案列二：

用戶拖拽想要?jiǎng)h除的應(yīng)用到頂部刪除，頂部W無窮大，增加了用戶操作效率和精準(zhǔn)度。

十二、席克定律

核心就是，一個(gè)人面臨的選擇越多，做出決策需要的時(shí)間就越多。

所以在設(shè)計(jì)中，我們要思考的是，怎樣最小最優(yōu)化設(shè)計(jì)選項(xiàng)，太多的選項(xiàng)會(huì)延長(zhǎng)用戶做決策的時(shí)候，甚至對(duì)一些“選擇困難戶”來說，會(huì)直接或簡(jiǎn)介導(dǎo)致他們?nèi)蝿?wù)失敗。席克定律揭示了，頁面中的選項(xiàng)是如何影響用戶決策的速度和易用性。定義的范圍很廣泛，因?yàn)椴皇菧y(cè)量物理反應(yīng)或技術(shù)扮演的角色，而是測(cè)量決策的心理過程。

在設(shè)計(jì)過程中，可將席克定律作為重要的參考設(shè)計(jì)原則。當(dāng)開始畫線框圖時(shí)，看看功能樹“鏈接1、鏈接2、鏈接3…”，然后看下在流程中用戶需要做的所有決策。（最好是解決掉這些決策）

如果原型填滿，不要害怕多次使用操作召喚按鈕。當(dāng)設(shè)計(jì)師組織選項(xiàng)、拉開選項(xiàng)間距、改變背景顏色、或者使用紋理時(shí)，正在突出設(shè)計(jì)的某個(gè)選項(xiàng)的同時(shí)其他的選項(xiàng)已經(jīng)被弱化。這就是為什么設(shè)計(jì)不僅僅是修飾頁面或是突出某個(gè)按鈕。我們必須聰明的使用設(shè)計(jì)所帶來的影響力，這樣才能嚴(yán)格限制用戶需承擔(dān)的決策數(shù)量。

案列：Foursquare上的探索功能由無限的可能性變成了一個(gè)簡(jiǎn)單的設(shè)置選項(xiàng)。

Foursquare的探索功能簡(jiǎn)單的提供各種篩選項(xiàng)，減少手動(dòng)輸入。來訪者被鼓勵(lì)使用簡(jiǎn)單的服務(wù)：在輸入框中輸入想要的內(nèi)容，然后點(diǎn)擊屏幕上唯一的按鈕。當(dāng)然，設(shè)計(jì)的核心是Foursquare知道他的用戶對(duì)他們當(dāng)前位置的周圍事物感興趣，因?yàn)檫@項(xiàng)服務(wù)就是關(guān)于分享和探索用戶的周圍環(huán)境。所以，默認(rèn)的搜索當(dāng)前用戶所在區(qū)域是個(gè)安全的賭注。其次，超過十億的數(shù)據(jù)點(diǎn)起到很到的作用。用這么大的一組信息，F(xiàn)oursquare在后臺(tái)可以做很多事情來猜測(cè)用戶真正對(duì)什么感興趣。

總結(jié)

交互設(shè)計(jì)師的重要價(jià)值在于使產(chǎn)品變得易用且人性化。這就需要我們深入學(xué)習(xí)交互設(shè)計(jì)的基本理論知識(shí)，幫助我們拆分問題，提高效率，創(chuàng)造出更好的設(shè)計(jì)。

相關(guān)閱讀

交互設(shè)計(jì)方法和理論（上）

來源：喜馬拉雅XUED（ID：ximalaya_XUED）

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

題圖來自 Pexels，基于 CC0 協(xié)議