近萬字干貨！可能是最周全的交互基礎(chǔ)知識總結(jié)

本文堪稱設計師必備的交互基礎(chǔ)知識大全，無論你是新手照舊工作多年，假如不是專業(yè)的交互設計師，對交互不夠認識的，看這篇就完全夠了。

一、交互設計是什么？

交互設計 Interaction Design 也被成為 IXD。交互設計建立起了人與計算機便捷溝通的通道，它的目標是創(chuàng)造可用性和用戶體驗俱佳的產(chǎn)品。作為 UI設計師，我們在工作之中經(jīng)常會對接交互設計師和產(chǎn)品經(jīng)理，他們具有雄厚的交互知識和經(jīng)驗。那是不是我們作為 UI設計師，就只必要埋頭做好視覺層面的工作而不必要了解交互設計了呢？當然不是，在視覺設計層面更多地考慮布局和交互原則才可以讓我們的界面更友愛，視覺設計師是交互設計中特別很是緊張的角色。

二、用戶體驗

在工作中經(jīng)常聽到 UED（用戶體驗設計）和 UCD（以用戶為中間的設計），可見互聯(lián)網(wǎng)行業(yè)特別很是正視用戶體驗，而用戶體驗絕不僅僅是要樣子悅目。有些設計師只關(guān)諦視覺層面，認為產(chǎn)品戰(zhàn)略等用戶體驗維度和本身的設計無關(guān)，那么就會和產(chǎn)品經(jīng)理等角色處于不同的世界了?！杆麄?yōu)槭裁匆疫@么改？」、「為什么這里筆墨要淺一點？」偶然不理解對方的思考角度就會造成辯論。用戶體驗（User Experience）是用戶使用產(chǎn)品的生理和感受，用戶體驗表現(xiàn)了產(chǎn)品設計以人為本的設計精神。其實早在互聯(lián)網(wǎng)出現(xiàn)之前就有「顧客先點雞就先有雞」、「顧客就是天主」這種說法，并且西方許多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經(jīng)開始進行研究用戶體驗了，可見用戶體驗對所有產(chǎn)品是多么的緊張。但是讓人摸不著頭腦的是，用戶體驗偶然特別很是田主觀。由于用戶體驗背后影響用戶的因素有人的喜愛、情感、印象、生理反應等，有些人明明有摩拜卻要走很遠找 OFO，也有人只吃肯德基而不吃麥當勞。這些選擇并不是優(yōu)越劣汰，而是有背后的緣故原由的。要想讓我們的產(chǎn)品被人喜好，我們必要研究用戶。

三、用戶研究七種方法

但用戶可能是幾百萬人呢！我們面對如許抽象的群體然后告訴本身要以他們?yōu)橹虚g設計這多么抽象啊。這么多用戶甚至偶然用戶本身的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢？

1. 用戶畫像

根據(jù)產(chǎn)品的調(diào)性和用戶群體，用戶研究團隊可以設計出一個用戶的模型，這種研究的體例被稱為用戶畫像。用戶畫像是由帶有特性的標簽組成的，通過這個標簽我們可以更好地理解誰在使用我們的產(chǎn)品。用戶畫像建立后，每個功能可以完成本身的用戶故事：用戶在什么場景下必要這個功能。如許，我們所設計的功能就會更接近用戶現(xiàn)實的必要。

比如我們?nèi)缃褚O計一個女裝購物應用，那么我們可以做這個用戶畫像：小美，在北京國貿(mào) CBD 上班，21歲，收入8000，喜好淘寶購物和電視購物。使用我們產(chǎn)品的目的是為了探求正品時尚大牌服裝進行網(wǎng)購。

• 小美由于剛卒業(yè)所以一方面喜好大牌一方面又資金短缺（啟發(fā)：我們的產(chǎn)品是不是要解決這兩個痛點？）

• 小美是時尚OL，審美很高，不喜好俗氣的設計。（啟發(fā)：界面設計是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的詬誶色？）。

看，即使小美并不真實存在，但是她指引了我們的產(chǎn)品設計。接下來，我們還可以給小美增長一個頭像，在做設計時我們想象這小我就是真實存在的用戶，她會對我們的設計有什么看法。當我們完成用戶畫像之后，還可以接著設計用戶故事：小美經(jīng)常必要在工作場合穿吻合工作氣質(zhì)的衣服，也必要在約會時有晚制服之類的服裝，可是小美的收入有限，她眼光較高但是對價格過高的服裝無法承擔，她使用我們的 APP 就是為了探求正品且價格適中的服裝。那么，小美在哪里用我們的 APP 呢？這就要為小美繼承設計一個用戶使用場景了：小美在開會時可能會打開看看、在地鐵里也會欣賞、在早晨打開衣柜時也會欣賞?；菊f是碎片時間，而且是有著裝需求時。（啟發(fā)：我們是不是必要把字號調(diào)大以適應地鐵里顛簸的閱讀環(huán)境？我們是不是必要設計省流量模式免得剛剛卒業(yè)的小美花一筆偉大的流量資費？）

△ 用戶畫像

2. 用戶訪談

邀約用戶往返答產(chǎn)品的相干題目，并記錄作出后續(xù)分析。用戶訪談有三種情勢：結(jié)構(gòu)式訪談（根據(jù)之前寫好的題目結(jié)構(gòu)）、半結(jié)構(gòu)式訪談（一半根據(jù)題目一半討論）、開放式訪談（較為深入地和用戶交流，雙方都有自動權(quán)來探究）。用戶訪談設置時要細致：用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導性題目、不要使用專業(yè)術(shù)語。用戶訪談適合產(chǎn)品開發(fā)的悉數(shù)過程。

3. 問卷調(diào)查

可分為紙質(zhì)調(diào)查問卷、網(wǎng)絡問卷調(diào)查。依據(jù)產(chǎn)品列出必要了解的題目，制成文檔讓用戶回答。問卷調(diào)查是一種成本比較低的用戶調(diào)查方法。問卷調(diào)查適合產(chǎn)品策劃初期對目標人群的投放，另外細致一個題目最好收集10個問卷，也就是假如你有10個題目那么至少要收集100個問卷才是有用的。要知道不是所有人都樂意耐心地填寫問卷，很可能唐塞了事的回答會擾亂我們的判斷。

4. 焦點小組

焦點小組一樣平常有6-12人組成，由一名專業(yè)人士主持，依照訪談提要指導小組成員各抒己見，并記錄分析。并且在焦點小組的房間里會有一扇單向玻璃窗，用戶是看不到里面有誰的。而在里面坐著的通常是開發(fā)團隊，他們可以清晰地看到用戶是如何吐槽他們的產(chǎn)品的，但是他們沒有權(quán)利直接和用戶進行詮釋。焦點小組必要特別的房間和設備，主持人也必要訓練有素，焦點小組分外能夠分析出用戶在沒有我們說明的情況下如何使用我們的產(chǎn)品和對產(chǎn)品的不滿。

5. 可用性測試

通過篩選讓不同用戶群來對產(chǎn)品進行操作，同時觀察人員在旁邊觀察并記錄，可用性測試的要求是用戶不可以是互聯(lián)網(wǎng)從業(yè)者而應該是真實產(chǎn)品的用戶群體。但是可用性測試一樣平常要有一個可用的軟件版本或者原型供人測試才可以，在軟件開發(fā)的前期不適合用這個方法。

6. 眼動測試

使用特別的設備眼動儀來追蹤用戶使用產(chǎn)品時眼睛聚焦在哪里，盲區(qū)是哪里。比如一個網(wǎng)站通過眼動測試可以知道用戶的視覺會主動屏蔽網(wǎng)站的常見廣告位置，這時假如盼望進步廣告的點擊，就必要把廣告位放置于用戶聚焦時間較長的位置。眼動測試的設備比較專業(yè)，通常在小公司較難開展。

7. 用戶反饋和大數(shù)據(jù)分析

根據(jù)市場提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推斷。用戶反饋也是用戶研究的一個重點，用戶反饋重要是用戶通過產(chǎn)品的反饋入口自動向開發(fā)者提出的意見。

有了這些方法，我們就能更好地了解用戶和接近用戶了。但是要細致，用戶研究也是有陷阱的。比如：填寫問卷和參與調(diào)研的用戶可能并不是核心用戶；提交用戶反饋的用戶之外可能有更多沉默的用戶等。總之用戶研究是一個需要的手段，但是仍然必要產(chǎn)品團隊來對產(chǎn)品的方向做出決斷。

四、用戶如何使用產(chǎn)品

1. 使用場景

剛才我們介紹了用戶使用的場景是根據(jù)產(chǎn)品的功能和平臺決定的。電腦的使用場景是態(tài)度嚴肅，手持鼠標。而移動端則是隨時隨地使用，我們的用戶可能在地鐵里、在廁所里、在吃飯時、在上課中怕先生看到把手機藏在桌洞里、在工作中向?qū)а惨暫笸低得?、在輾轉(zhuǎn)反側(cè)睡不著的時候沒有開燈地欣賞等。這時我們要為用戶考慮，假如他們在使用我們產(chǎn)品的各種場景中有什么必要，是不是必要省流量、是不是必要調(diào)整字號、是不是必要過濾藍光、是不是必要護眼模式、是不是不方便看視頻、是不是必要緩存視頻、是不是界面目前單手不太友愛、是不是掃二維碼時必要個手電功能、是不是必要語音提示、是不是必要消滅訪問記錄。一個不考慮用戶使用場景的產(chǎn)品肯定是會遭到吐槽的。很久之前我聽同事在吃飯時抱怨過「大爺?shù)?，也不搞個提醒，清晨在地鐵里用 4G 流量以為是在家用 WIFI，效果看了一集《甄嬛傳》花了80塊錢」、「哎？你是不是清晨開會時玩游戲了？你的比分都給我們推送了哈哈哈」。

△ 我的產(chǎn)品中的用戶使用場景表格

2. 操作手勢

頁面設計所處的電腦端目前重要照舊寄托鼠標點擊來操作。鼠標點擊的最小單位甚至可以是一像素。而移動端不太一樣，移動端設備中我們使用手指來操作界面。一樣平常來說，手輔導觸區(qū)域最小尺寸為7×7mm，拇指最小尺寸為9×9mm。也就是在我們@2x設計中為88px（或44pt）。這個神奇的88PX在移動端應用很廣泛：許多表單單項的高度是88px、導航欄高度也是88px等等。那您可能會說，也舛錯吧，有些界面上的圖標看上去沒有88px啊。是的，但是那只是視覺，我們可以通過增長圖標點擊區(qū)域的體例（比如給60像素大小的圖標左右增長22像素的透明區(qū)域）來讓圖標更好點擊。萬萬在設計時不要把操作區(qū)域放得分外近，可以把所有點擊區(qū)域用88px標記看是否有重疊的情況，避免點擊一個圖標時誤點另一個圖標。除了點擊區(qū)域，移動端還可以行使各種手勢來進行各種操作的設計。重要的手勢有：

• 單點觸碰（Tap）：點擊用來選擇一個元素，類似鼠標的左鍵，是最常用的手勢。

• 拖曳（Drag）：點擊某個元素然后拖拽進行移動，類似實際生活中移動物體的感覺。

• 快速拖曳（Flick）：速度很快的拖曳操作。

• 滑動（Swipe）：水平或垂直方向的滑動，比如翻閱相冊和電子書翻閱的手勢。

• 雙擊（Double-Click）：快速點擊一個物體，通常會在放大、縮小操作中使用。

• 捏（Pinch）：兩根手指頭向內(nèi)捏，捏的動作會使物體變得更小，通常在縮小操作中使用。網(wǎng)易消息客戶端中正文網(wǎng)頁即可通過捏的動作來縮小字號。

• 伸展（Stretch）：兩根手指向外推，實際中這種操作會使物體向外拉伸，元素可能會變得更大，通常會在放大操作中使用。網(wǎng)易消息客戶端中正文網(wǎng)頁可以通過伸展放大字號。

• 長按（Touch and hold）：手輔導擊并按住會激發(fā)另一個操作。比如同伙圈的相機圖標長按可只發(fā)筆墨。但是細致，長按不是一個常態(tài)操作，所以一樣平常不太建議用戶進行該操作。但長按操作又是有必要的，所以會把刪除、只發(fā)筆墨狀況等操作隱蔽其中。

除了用戶使用場景、點擊區(qū)域、手勢，那么還有一個影響我們設計的使用情況，就是用戶怎么拿手機很緊張。用戶可以：單手拿手機、雙手拿手機、直向拿手機、橫向拿手機。我們必要考慮這些可能發(fā)生的特性進行手勢互動的規(guī)劃與設計。比如 OFO 為了讓單手（說不定是左手照舊右手）操作方便，重要按鈕在下方并且做的很大，左右手都可以輕松點擊。而微信的許多按鈕也都是大長條，方便左右手的觸發(fā)。橫屏使用場景一樣平常是游戲、視頻等，所以一樣平常的 APP 并不支持橫屏操作（微信、付出寶、微博均不支持橫屏操作）。

五、格式塔：我們?nèi)绾握J知？

我們發(fā)現(xiàn)有些用戶在使用設計好的界面時找不到一些緊張的功能按鈕。你大概會說：「新鮮，分享功能不就在更多按鈕里面嗎？」、「用戶怎么連這個也找不到啊」。我們要來了解一下用戶是如何認知我們設計好的界面的。在初高中考試的時候您肯定見過完形填空這種格式吧，「格式塔」源自德語「Gestalt」，意即「團體」、「完形」的意思。格式塔生理學認為，我們在觀察的時候會主動腦補出一些邏輯和含義來，會讓觀察對象變成一個完備的、團體的、常見的外形。

「研表究明，漢字的序順并不定一能影閱響讀，比如當你完看這句話后之，才發(fā)這現(xiàn)里的字全是都亂的?！寡芯扛袷剿韺W對我們做互聯(lián)網(wǎng)產(chǎn)品和設計有什么用呢？掌握格式塔的理論我們就可以讓用戶按照我們安排的「劇本」來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經(jīng)過太多思考在殺毒軟件中點擊殺毒按鈕等。格式塔生理學對于我們做好體現(xiàn)層是特別很是有利的。格式塔原理重要有格式塔五大律和格式塔三大記憶律兩個知識點。

1. 接近律 law of proximity

格式塔生理學認為，人們認知事物的時候，會寄托它們的距離來判斷它們之間的關(guān)系。兩個元素越近就說明它們之間關(guān)系更強。但是接近也是有對比的，在復雜的設計中，我們要一邊考慮它們之間內(nèi)部的邏輯關(guān)系一邊來排版。

△ A組和B組由于接近律而產(chǎn)生不同地閱讀順序

△ 距離更近的信息暗示了他們有內(nèi)在的邏輯關(guān)系

2. 相似律law of similarity

認知事物時，刺激要素（比如大小、色彩、外形等要素）相似的元素我們傾向于把它們聯(lián)合在一路或者認為它們是一個種類。比如，我們能輕易的分辨出撥號網(wǎng)頁中撥號鍵和按鍵群的區(qū)別。

△ 相似的元素暗示了他們屬于一個種類

△ 類似形狀的單元會被我們?nèi)四X默認為統(tǒng)一屬類

3. 閉合律law of closure

就算沒有形狀的束縛，我們也會主動把圖形腦補完全。比如半個外形或者有缺口的外形我們不會認為是一條線，而是一個完備的外形。閉合是指一種完形的認知規(guī)律。

△ 左邊的圖中我們會認為是圓形有缺口而不是一條曲線，右邊的圖形中我們會認為是圓形被三條線截斷了而不是四個圖形

△ 界面設計中露出一半內(nèi)容，閉合律讓我們感知右邊還隱蔽著更多內(nèi)容

4. 延續(xù)律law of continuity

在知覺過程中人們每每傾向于使知覺對象的直線繼承成為直線，使曲線繼承成為曲線，也就是視覺的慣性。行使延續(xù)律我們可以讓用戶操作界面時不經(jīng)過思考就點擊一個固定的位置。

△ 深諳延續(xù)律的流氓軟件

5. 成員特征律law of membership character

假如我們有許多同樣的按鈕，如何讓某個更緊張的按鈕凸起但是仍然讓用戶感知照舊按鈕呢？那就要用到成員特征律了。成員特征律賦予了集體中某一個元素特別的一些刺激元素從而凸起它。

△ 獨特的形狀暗示了它與別的元素有不同的功能

△ 撥號網(wǎng)頁中撥號鍵與微博發(fā)布微博圖標都與其他按鈕不同

6. 記憶律：我們?nèi)绾斡洃洠?/strong>

接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔生理學家沃爾夫?qū)ν涱}目所作的經(jīng)典性研究得出了格式塔的三大記憶律。沃爾夫?qū)嶒灂r要求實驗體觀看樣本圖形并記住它們，然后在不同的時間里根據(jù)記憶把它們畫出來。效果發(fā)實際驗體在不同的間隔時間畫出來的圖像都有不同。偶然再現(xiàn)的圖畫比原來的圖畫更簡單更有規(guī)則，偶然原來圖畫中明顯的細節(jié)在再現(xiàn)時被更加凸起了。還有的比原來的圖像更像某些別的我們都很認識的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律：「水平化」、「尖銳化」、「常態(tài)化」。

△ 哪個圖形才是精確的？（圖片來源：網(wǎng)絡）

• 水平化leveling：水平化是指在記憶中我們趨向于削減知覺圖形小的不規(guī)則部分使其對稱；或趨向于削減知覺圖形中的詳細細節(jié)。

• 尖銳化sharpening：尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中，人們每每強調(diào)知覺圖形的某些特性而忽視其它詳細細節(jié)的過程。在有些生理學家看來，人類記憶的特性之一，就是客體中最顯明的特性在再現(xiàn)過程中每每被夸大了。

• 常態(tài)化normalizing：常態(tài)化是指人們在記憶中，每每根據(jù)本身已有的記憶痕跡對知覺圖形加以修改，即一樣平常會趨向于按照本身認為它好像應該是什么樣子來加以修改的。

六、情感化設計是什么？

了解格式塔會讓我們把界面做得吻合用戶的生理預期，讓用戶能夠顯明地找到他應該找到的操作?？墒怯脩翎莘鹫张f不開心，由于用戶覺得界面不悅目。您是不是也會陷入如許的矛盾：可用性緊張照舊美感更緊張？怎么樣能夠讓我們設計的界面又好用還漂亮呢？情感化設計最先由唐納德·A·諾曼博士提出，指的是設計中情感在所處于的緊張地位以及如何讓用戶把情感投射在產(chǎn)品上來解決可用性與美感的矛盾。情感化設計是在捉住用戶細致、誘發(fā)情緒反應以進步實行舉動的可能性的設計。比如紅色且偉大的購買按鈕能夠偶然識地捉住用戶的細致、可愛萌萌的卡通可以緩解用戶網(wǎng)絡不好時的焦慮等等。情感化設計有三個水平，它們是遞進關(guān)系，分別是：本能水平（正視設計形狀）、舉動水平設計（正視使用的樂趣和服從）、反思水平設計（正視自我形象、小我寫意、記憶）。

1. 本能水平

我們都是視覺動物，對形狀的觀察和理解是出于我們本能的。本能水平的設計就是刺激用戶的感官體驗，讓別人細致到我們的設計。這個階段的設計會更加關(guān)注形狀的視覺結(jié)果。比如各大電商網(wǎng)站的專題網(wǎng)頁設計，更加看重抓眼球和表面的刺激。

2. 舉動水平

舉動水平是功能性產(chǎn)品必要看重的。一個產(chǎn)品是否達到了舉動水平，要看它是否能有用地完成義務，是否是一種有樂趣的操作體驗。良好舉動水平設計的四個方面：功能，易懂性，可用性和物理感覺。比如好用的記事本APP 等。

3. 反思水平

反思水平的設計與用戶長期感受有關(guān)，這種水平的設計建立了品牌感和用戶的情感投射。反思水平設計是產(chǎn)品和用戶之間情感的紐帶，通過互動給用戶自我形象、寫意度、記憶等體驗，讓用戶形成對品牌的認知，培養(yǎng)對品牌的忠誠度。馬洛斯理論把人的需求分成心理需求、安全需求、社交需求、尊重需求和自我實現(xiàn)需求五個條理。我認為反思水平的設計就是提供應用戶歸屬感、尊重、自我實現(xiàn)。比如 Google 每逢節(jié)日就會有一些吻合節(jié)日化的設計、網(wǎng)易嚴選的空狀況也會有品牌感的表現(xiàn)等。

△ 淘寶空狀況中的情感化設計

4. 情感化設計的表達

• 畫面：畫面是情感化設計的重點，讓錯誤網(wǎng)頁或者空狀況都成為一幅可愛的插畫。

• 應景：讓用戶在我們的產(chǎn)品中體驗到一些和真實世界一樣的氛圍轉(zhuǎn)變。

• 游戲感：沒有人喜好做義務。試著讓用戶完成的義務變成游戲吧。比如每次登錄加金幣，有充足的金幣就可以獲得什么稱號。

• 沖突：沖突特別很是能夠勾起人的情緒，營造一個競爭或者對抗的氛圍，讓用戶感覺本身置身在一個比賽或者格斗中一樣。

• 講故事：給產(chǎn)品和無聊的圖像一些故事內(nèi)容，畢竟沒有人膩煩講故事。

• 隱喻：用一些大家理解，隨處可見的事物表達一些無趣、生澀的概念。

• 互動：給用戶和其他用戶多制造互動機會，比如排行榜、保舉等，不要讓用戶感覺孤獨。

七、交互八原則

當我們了解了產(chǎn)品五要素（產(chǎn)品設計的維度題目）、格式塔生理學（用戶如何認知的題目）、情感化設計（如何讓用戶寫意的題目）后，我還要給您介紹一大堆地交互原則。這些交互原則會幫助我們設計出更好用的界面，當然也可以幫助我們講出如許設計的緣故原由。不拿出一些理論怎么能夠讓別人佩服你的設計，對舛錯？

1. 費茨定律（Fitts’Law）

費茨定律指的是：光標到達一個目標的時間，與當前光標所在的位置和目標位置的距離（D）和目標大?。⊿）有關(guān)。它的數(shù)學公式是：時間 T = a + b log2(D/S+1)。這個定律是由保羅.菲茨博士（Paul M. Fitts）提出的所以得名。菲茨定律在許多領(lǐng)域都得到了應用，分外是在互聯(lián)網(wǎng)設計中尤為深遠。我們行使費茨定律估算用戶移動光標到鏈接或者按鈕所需的時間，時間越短越高效。比如有一個按鈕在左下角，我們的操作可以細分為兩個階段：第一個階段大范圍移動到左下方向，然后再做微調(diào)到達這個按鈕之上。所以這個時間受按鈕和鏈接所在位置與按鈕和鏈接大小影響，也就是說我們在做設計時要考慮光標默認會放在哪里、我們的鏈接按鈕是不是太小了。

△ 費茨定律說明距離越短、目標大小越大，那么光標到達目標越快

△ 費茨定律在頁面設計中的使用

△ OFO 和蘋果音樂APP 都將按鈕放置手指最容易點擊的區(qū)域并且按鈕充足大

2. ?？硕桑℉ick’s Law）

希克定律是指一小我面臨的選擇（n）越多，所必要作出決定的時間（T）就越長。它的數(shù)學公式是：反合時間 T=a+b log2（n）。在我們的設計中假如給用戶的選擇更多，那么用戶所必要做出決定的時間就越長。比如我們給出用戶菜單-子菜單-選項，那么用戶可能會很糾結(jié)；假如我們簡化成菜單-選項，就會削減用戶做選擇的時間。

△ 用戶反合時間和選擇數(shù)量的關(guān)系

△ 我們應該削減用戶的選擇

3. 7±2法則

讓我們先玩?zhèn)€游戲，請記憶下面的筆墨，一分鐘后移開視線：

掙 多 久 可 貓 風 師 裊 崩 六 酒 望

如今閉上眼睛想一下剛才的筆墨您能回憶幾個？也許是五個到九個之間。1956年美國科學家米勒對人類短時記憶能力進行了研究，他細致到年輕人的記憶廣度大約為5到9個單位之間，就是7±2法則。這個法則對我們做界面設計的啟迪就是假如盼望用戶記住導航區(qū)域的內(nèi)容或者一個路徑的順序，那么數(shù)量應該控制在七個左右，比如蘋果和站酷網(wǎng)站的導航個數(shù)。另外，移動端底部 Tab 區(qū)域最多也是五個，而網(wǎng)頁中的八大金剛圖標也是八個。

△ 蘋果、站酷、Dribbble 等網(wǎng)站導航數(shù)量悉數(shù)是7±2

4. 泰思勒定律（Tesler’s Law）

這個定律是說產(chǎn)品固有的復雜性存在一個臨界點，超過了這個點過程就不能再簡化了。我們只能將這種復雜性轉(zhuǎn)移。比如我們假如發(fā)現(xiàn)網(wǎng)頁的功能是必須的，但當前的網(wǎng)頁信息過載，那么就必要將次要的功能收起或者轉(zhuǎn)移。

△ Dribbble 網(wǎng)站導航將更多功能收起在一個透露表現(xiàn)更多的圖標內(nèi)

5. 防錯原則

一個表單是必要填寫完畢后方可提交的。但是用戶偶然會漏填或者忘掉填寫，這時用戶點擊提交會怎么樣？很可能有些選項會被清空（比如密碼選項基于安全考慮會清空 cookies）那么用戶還得重新填寫。這時解決辦法是在用戶沒填寫完之前把按鈕設置一個看起來不能點擊的樣式，用戶想提交時彈窗：您還有內(nèi)容沒有填寫完哦，然后把用戶定位在沒填寫完的項目，讓那個表單高亮。（是不是真的做到以用戶為中間啦？）再比如推特只許可用戶填寫140個字，但用戶一寫爽了每每會超出140個字那怎么辦？解決辦法是給他在旁邊倒數(shù)還能寫幾個字。看，這些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯誤所做的努力，防錯設計就是要削減錯誤操作所帶來的災禍。錯誤的提醒當然必要設計師的設計了?？墒谴蟾拍恢烙行╁e誤提醒含糊，用戶并不知道到底錯的是哪里，下一步該怎么辦。比如僅僅登錄功能就可能會有效戶名錯誤、密碼錯誤、網(wǎng)絡超時、延續(xù)三次輸入密碼錯誤、用戶名為空等不同的錯誤，而有些產(chǎn)品僅僅給出「出錯了」，那么用戶當然會不知所措了。正向的例子比如一次我在登錄 Google Mail 時輸錯了密碼，它提醒「密碼輸入錯誤，提醒：您在1個月前悛改密碼」。

△ BOO！APP 輸入密碼時卡通會蒙住眼睛，輸錯時也會有提醒

6. 奧卡姆的剃刀法則（Occam’s Razor）

奧卡姆的剃須刀法則重要就是說我們做產(chǎn)品時功能上不可以太繁瑣，應該保證簡潔和工具化。比如產(chǎn)品中為用戶提供了珍藏功能是否就不必要喜好了？提供了喜好是否不必要點贊了？肯定保證功能上的脅制。

△ QQ 將更多功能收起到了頭像和加號圖標中

7. 防呆原則

有一個聞名的交互書籍叫作《Dont make me think》，翻譯過來就是不要讓我思考。這句話一向在我做設計時響起：不要認為用戶是專家！偶然我們會覺得，點擊漢堡包圖標當然就是菜單啊！這個按鈕長按不就會調(diào)出XX功能了嘛。但是我們忘掉了通俗用戶可能并不理解什么是漢堡包圖標、什么是抽屜式導航、什么是長按、雙指滑動。更何況通俗用戶并不會研究我們的 APP，在他們眼中我們的產(chǎn)品只是浩繁工具中的一個，我們何德何能認為本身的產(chǎn)品是值得用戶花時間學習的？肯定要把交互和設計做得簡單，并且讓用戶在別的地方「學習」過。每個網(wǎng)頁強調(diào)一個緊張的功能而不要讓用戶做選擇題。這些都是有用防呆的好方法。防呆和不要讓我思考都講的是我們的設計要天然而然。

△ 運動APP KEEP 的網(wǎng)頁中總有一個按鈕是凸起的

8. 防止不耐煩原則

用戶是很容易不耐煩的，你還記得你多少次看著視頻加載條罵人嗎？假如我們必要用戶等待載入信息，肯定要給一個有情感化的設計提醒，避免用戶產(chǎn)生焦慮。 比如許多游戲（決戰(zhàn)平安京、王者榮耀等）加載時都會出現(xiàn)主角跑步的小動畫，美團等 APP 下拉刷新時也會有幾幀的動畫來安慰用戶。動畫要好于蘋果默認提供應開發(fā)的「轉(zhuǎn)菊花」，由于卡通形象更有親和力。但是彷佛還不夠，用戶必要掌控感，「哎？它一向加載，是不是死機了？」為了防止用戶沒有掌控感，我們可以為用戶設計加載條或者加載提醒。加載狀況條很遺憾許多都是假的甚至是重復的，緣故原由是其實要正確判斷加載了多少M的素材的代碼更占資源！我們原本想安慰用戶等待加載的時間竟然會變得更長，那當然不行啦。于是許多時候我們會做一個假的加載狀況條來安撫用戶，我想您肯定看過反復加載的加載條吧！加載條下的文案其實也是可以變得特別很是有情感化設計感受的，比如通常是：加載場景資源、加載素材如許的文案，但是有些APP必要很長加載時間時會給出如許的文案：導演正在預備、女主角預備化妝了、攝像師打開了燈光。是不是更加好玩啦？

△ 美團和網(wǎng)易嚴選的加載動畫

總結(jié)

交互知識其實關(guān)鍵還要在應用和分析。一方面，我們可以在工作中積累經(jīng)驗，賡續(xù)地思考如何和同事配合一路研究進步產(chǎn)品在使用時的體驗；另一方面，我們也要經(jīng)常積累一些產(chǎn)品使用時發(fā)現(xiàn)的交互。建議大家平時可以收集你覺得不錯的情感化設計或者微交互，比如發(fā)現(xiàn)餓了么在下雨天送貨時會有電閃雷鳴和雨滴的設計；OFO 和滴滴打車在不同節(jié)日也會把地圖找車里的圖標換成節(jié)日相干的圖標；BOO！APP 在輸入密碼時小怪獸會捂住眼睛；WPS 在晚上寫作時會提醒你開啟過濾藍光的護眼模式等等。一個好的設計師肯定是懂得交互的設計師，也應該是特別很是仔細的設計師，也應該是懂得為用戶著想的設計師。

迎接關(guān)注作者的微信公眾號：「西見」

圖片素材作者：Luc Chaissac

更多圖趣分享的交互類教程文章：

網(wǎng)易資深設計師ToB產(chǎn)品的6條交互設計經(jīng)驗

http://irelandcustomcontracting.com/Tutorial/di3941.html

設計實戰(zhàn)案例！談談網(wǎng)易嚴選企業(yè)購的交互設計

http://irelandcustomcontracting.com/Tutorial/di3957.html