起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識全面解析：設計師需要了解的交互知識（下）
文章主要分成上下兩個部分，這是文章的下半部分，本文全面解析設計師需要了解的一些交互知識，如果你還不是很清楚，那就一起來看看~
六、記憶律：我們如何記憶？
接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律，格式塔心理學家沃爾夫對遺忘問題所作的經典性研究，得出了格式塔的三大記憶律。沃爾夫實驗時要求實驗體觀看樣本圖形并記住它們，然后在不同的時間里根據記憶把它們畫出來。
結果發現：實驗體在不同的間隔時間畫出來的圖像都有不同，有時再現的圖畫比原來的圖畫更簡單更有規則，有時原來圖畫中顯著的細節在再現時被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。
沃爾夫把這三種記憶規律稱之為格式塔三大記憶律：“水平化”、“尖銳化”、“常態化”。
哪個圖形才是正確的？（圖片來源：網絡）
- 水平化leveling：水平化是指在記憶中我們趨向于減少知覺圖形小的不規則部分使其對稱；或趨向于減少知覺圖形中的具體細節。
- 尖銳化sharpening：尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中，人們往往強調知覺圖形的某些特征，而忽視其它具體細節的過程。在有些心理學家看來，人類記憶的特征之一，就是客體中最明顯的特征在再現過程中往往被夸大了。
- 常態化normalizing：常態化是指人們在記憶中，往往根據自己已有的記憶痕跡對知覺圖形加以修改，即一般會趨向于按照自己認為它似乎應該是什么樣子來加以修改的。
七、情感化設計是什么？
了解格式塔會讓我們把界面做得符合用戶的心理預期，讓用戶能夠明顯地找到他應該找到的操作?？墒怯脩艉孟襁€是不開心，因為用戶覺得界面不好看。
您是不是也會陷入這樣的矛盾：可用性重要還是美感更重要？怎么樣能夠讓我們設計的界面又好用還漂亮呢？
情感化設計最先由唐納德·A·諾曼博士提出，指的是：設計中情感在所處于的重要地位，以及如何讓用戶把情感投射在產品上，來解決可用性與美感的矛盾。
情感化設計是在抓住用戶注意、誘發情緒反應以提高執行行為的可能性的設計。比如：紅色且巨大的購買按鈕能夠無意識地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網絡不好時的焦慮等等。
情感化設計有三個水平，它們是遞進關系，分別是：本能水平（重視設計外形）、行為水平設計（重視使用的樂趣和效率）、反思水平設計（重視自我形象、個人滿意、記憶）。
1. 本能水平
我們都是視覺動物，對外形的觀察和理解是出于我們本能的。本能水平的設計就是刺激用戶的感官體驗，讓別人注意到我們的設計，這個階段的設計會更加關注外形的視覺效果。比如：各大電商網站的專題頁面設計，更加注重抓眼球和外觀的刺激。
2. 行為水平
行為水平是功能性產品需要注重的，一個產品是否達到了行為水平，要看它是否能有效地完成任務，是否是一種有樂趣的操作體驗。
優秀行為水平設計的四個方面：功能、易懂性、可用性和物理感覺。比如：好用的記事本APP等。
3. 反思水平
反思水平的設計與用戶長期感受有關，這種水平的設計建立了品牌感和用戶的情感投射。反思水平設計是產品和用戶之間情感的紐帶，通過互動給用戶自我形象、滿意度、記憶等體驗，讓用戶形成對品牌的認知，培養對品牌的忠誠度。
馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求五個層次。我認為反思水平的設計就是提供給用戶歸屬感、尊重、自我實現。比如：Google每逢節日就會有一些符合節日化的設計、網易嚴選的空狀態也會有品牌感的體現等。
淘寶空狀態中的情感化設計
4. 情感化設計的表達
- 畫面：畫面是情感化設計的重點，讓錯誤頁面或者空狀態都成為一幅可愛的插畫。
- 應景：讓用戶在我們的產品中體驗到一些和真實世界一樣的氛圍變化。
- 游戲感：沒有人喜歡做任務。試著讓用戶完成的任務變成游戲吧。比如：每次登陸加金幣，有足夠的金幣就可以獲得什么稱號。
- 沖突：沖突非常能夠勾起人的情緒，營造一個競爭或者對抗的氛圍，讓用戶感覺自己置身在一個比賽或者格斗中一樣。
- 講故事：給產品和無聊的圖像一些故事內容，畢竟沒有人討厭講故事。
- 隱喻：用一些大家理解，隨處可見的事物表達一些無趣、生澀的概念。
- 互動：給用戶和其他用戶多制造互動機會，比如：排行榜、推薦等，不要讓用戶感覺孤獨。
八、交互八原則
當我們了解了產品五要素（產品設計的維度問題）、格式塔心理學（用戶如何認知的問題）、情感化設計（如何讓用戶滿意的問題）后，我還要給您介紹一大堆地交互原則。這些交互原則會幫助我們設計出更好用的界面，當然也可以幫助我們講出這樣設計的原因。不拿出一些理論怎么能夠讓別人信服你的設計，對不對？
1. 費茨定律（Fitts’Law）
費茨定律指的是：光標到達一個目標的時間，與當前光標所在的位置和目標位置的距離（D）和目標大小（S）有關。
它的數學公式是：
時間 T = a + b log2(D/S+1)
這個定律是由保羅.菲茨博士（Paul M. Fitts）提出的所以得名。菲茨定律在很多領域都得到了應用，特別是在互聯網設計中尤為深遠。我們利用費茨定律估算用戶移動光標到鏈接或者按鈕所需的時間，時間越短越高效。
比如：有一個按鈕在左下角，我們的操作可以細分為兩個階段：第一個階段大范圍移動到左下方向，然后再做微調到達這個按鈕之上。
所以這個時間受按鈕和鏈接所在位置與按鈕和鏈接大小影響，也就是說我們在做設計時要考慮光標默認會放在哪里、我們的鏈接按鈕是不是太小了。
費茨定律說明距離越短、目標大小越大，那么光標到達目標越快。
費茨定律在網頁設計中的使用
OFO和蘋果音樂APP都將按鈕放置手指最容易點擊的區域并且按鈕足夠大
2. ?？硕桑℉ick’s Law）
?？硕墒侵敢粋€人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。
它的數學公式是：
反應時間 T=a+b log2（n）
在我們的設計中如果給用戶的選擇更多，那么用戶所需要做出決定的時間就越長。比如：我們給出用戶菜單-子菜單-選項，那么用戶可能會很糾結；如果我們簡化成菜單-選項，就會減少用戶做選擇的時間。
用戶反應時間和選擇數量的關系
我們應該減少用戶的選擇
3. 7±2法則
讓我們先玩個游戲，請記憶下面的文字，一分鐘后移開視線：
掙 多 久 可 貓 風 師 裊 崩 六 酒 望
現在閉上眼睛想一下剛才的文字您能回憶幾個？
大概是五個到九個之間。
1956年美國科學家米勒對人類短時記憶能力進行了研究，他注意到年輕人的記憶廣度大約為5到9個單位之間，就是7±2法則。這個法則對我們做界面設計的啟迪就是——如果希望用戶記住導航區域的內容或者一個路徑的順序，那么數量應該控制在七個左右。
比如：蘋果和站酷網站的導航個數。另外，移動端底部Tab區域最多也是五個，而頁面中的八大金剛圖標也是八個。
蘋果、站酷、Dribbble等網站導航數量全部是7±2。
4. 泰思勒定律（Tesler’s Law）
這個定律是說產品固有的復雜性存在一個臨界點，超過了這個點過程就不能再簡化了，我們只能將這種復雜性轉移。比如：我們如果發現頁面的功能是必須的，但當前的頁面信息過載，那么就需要將次要的功能收起或者轉移。
Dribbble網站導航將更多功能收起在一個表示更多的圖標內
5. 防錯原則
一個表單是需要填寫完畢后方可提交的，但是用戶有時會漏填或者忘記填寫，這是用戶點擊提交會怎么樣？
很可能有些選項會被清空（比如：密碼選項基于安全考慮會清空cookies），那么用戶還得重新填寫。這時解決辦法是在用戶沒填寫完之前，把按鈕設置一個看起來不能點擊的樣式，用戶想提交時彈窗：您還有內容沒有填寫完哦，然后把用戶定位在沒填寫完的項目，讓那個表單高亮。（是不是真的做到以用戶為中心啦？）
再比如：推特只允許用戶填寫140個字，但用戶一寫爽了往往會超出140個字那怎么辦？
解決辦法是給他在旁邊倒數還能寫幾個字。看，這些都是我們為了防止用戶操作出現錯誤所做的努力，防錯設計就是要減少錯誤操作所帶來的災難，錯誤的提示當然需要設計師的設計了。
可是也許您不知道有些錯誤提示含糊，用戶并不知道到底錯的是哪里，下一步該怎么辦。比如：僅僅登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、連續三次輸入密碼錯誤、用戶名為空等不同的錯誤，而有些產品僅僅給出“出錯了”，那么用戶當然會不知所措了。
正向的例子，比如：一次我在登錄Google Mail時輸錯了密碼，它提示“密碼輸入錯誤，提示：您在1個月前改過密碼”。
BOO！APP輸入密碼時卡通會蒙住眼睛，輸錯時也會有提示
6. 奧卡姆的剃刀法則（Occam’s Razor）
奧卡姆的剃須刀法則主要就是說我們做產品時功能上不可以太繁瑣，應該保證簡潔和工具化。比如：產品中為用戶提供了收藏功能是否就不需要喜歡了？提供了喜歡是否不需要點贊了？一定保證功能上的克制。
QQ將更多功能收起到了頭像和加號圖標中
7. 防呆原則
有一個著名的交互書籍叫作《Dont make me think》，翻譯過來就是不要讓我思考。這句話一直在我做設計時響起：不要認為用戶是專家！不要認為用戶是專家！
有時我們會覺得，點擊漢堡包圖標當然就是菜單啊！這個按鈕長按不就會調出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是抽屜式導航、什么是長按、雙指滑動。
更何況普通用戶并不會研究我們的APP，在他們眼中我們的產品只是眾多工具中的一個，我們何德何能認為自己的產品是值得用戶花時間學習的？
一定要把交互和設計做得簡單，并且讓用戶在別的地方“學習”過，每個頁面強調一個重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法，防呆和不要讓我思考都講的是我們的設計要自然而然。
運動APP KEEP 的頁面中總有一個按鈕是突出的
8. 防止不耐煩原則
用戶是很容易不耐煩的，你還記得你多少次看著視頻加載條罵人嗎？
如果我們需要用戶等待載入信息，一定要給一個有情感化的設計提示，避免用戶產生焦慮。 比如：很多游戲（比如：決戰平安京、王者榮耀等）加載時都會出現主角跑步的小動畫，美團等APP下拉刷新時也會有幾幀的動畫來安慰用戶。
動畫要好于蘋果默認提供給開發的“轉菊花”，因為卡通形象更有親和力。但是好像還不夠，用戶需要掌控感，“哎？它一直加載，是不是死機了？”
為了防止用戶沒有掌控感，我們可以為用戶設計加載條或者加載提示。加載狀態條很遺憾很多都是假的甚至是重復的，原因是其實要精確判斷加載了多少M的素材的代碼更占資源！
我們本來想安慰用戶等待加載的時間竟然會變得更長，那當然不行啦。于是很多時候，我們會做一個假的加載狀態條來安撫用戶。
我想您一定看過反復加載的加載條吧！加載條下的文案其實也是可以變得非常有情感化設計感受的，比如通常是：加載場景資源、加載素材這樣的文案，但是有些APP需要很長加載時間時會給出這樣的文案：導演正在準備、女主角準備化妝了、攝像師打開了燈光。
是不是更加好玩啦？
美團和網易嚴選的加載動畫
總結
交互知識其實關鍵還要在應用和分析。
- 一方面，我們可以在工作中積累經驗，不斷地思考如何和同事配合一起研究提高產品在使用時的體驗；
- 另一方面，我們也要經常積累一些產品使用時發現的交互。
建議大家平時可以收集你覺得不錯的情感化設計或者微交互，比如：發現餓了么在下雨天送貨時，會有電閃雷鳴和雨滴的設計；OFO和滴滴打車在不同節日，也會把地圖找車里的圖標換成節日相關的圖標；BOO！APP在輸入密碼時小怪獸會捂住眼睛；WPS在晚上寫作時（沒錯就是現在）會提示你開啟過濾藍光的護眼模式等等。
一個好的設計師一定是懂得交互的設計師，也應該是非常細心的設計師，也應該是懂得為用戶著想的設計師。
相關閱讀：
作者：郗鑒，公眾號：西見
來源：https://www.zcool.com.cn/article/ZNjk4NTIw.html
本文由 @郗鑒 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖作者提供
馬克先