2020-1-13 資深UI設計者
很多時候，當你的設計遇到了挑戰(zhàn)，你無法客觀地回答為什么，甚至在和業(yè)務方溝通的過程中表現(xiàn)得很被動。
通常根據(jù)人們的習慣，我們將核心行動操作都放置在右側(cè)，例如下圖核心的行為召喚按鈕都放置在右側(cè)，那為什么都要放在右側(cè)呢？
我們可以用古騰堡圖表來解釋一下。古騰堡——西方活字印刷術(shù)的發(fā)明人，順便看一下他發(fā)明的圖表，啥意思呢？就是當我們在瀏覽一個不熟悉頁面的時候，我們通常瀏覽的路徑是一個對稱的，從左上到右下的一個路徑，最終的視覺落點通常就會在這條線上。
所以我們很多的信息和操作按鈕，都是在右側(cè)。然而我們發(fā)現(xiàn)有些對話框卻把行動按鈕放在左側(cè)，我們來分析一下原因，像下方的對話框：
左側(cè)的是我們常規(guī)看到的一個模態(tài)彈框，彈框內(nèi)右側(cè)的行動按鈕可以是確定，也是可以刪除，但是右側(cè)的彈框基于我們的猜測是希望用戶在高風險操作下，再次確認要進行的操作，所以當用戶視線移動到右邊的行動按鈕時發(fā)現(xiàn)它并不是想要的操作，這時用戶會對左側(cè)信息進行一次再瀏覽，確認后再選擇，很多時候用戶在進行操作的時候會下意識地進行右側(cè)點擊，所以這樣的處理方法可以避免用戶對高風險行為的誤操作。
但是話又說回來，這樣的設計其實違背了用戶的習慣和預期，所以還是要慎重考慮。
我們再來看一下高德地圖的案例， 點擊「退出」后展開兩個選項，「退出導航」在左側(cè)高亮，取消放在了右側(cè)。
那這算不算違反用戶的習慣和預期呢？我們換一種解釋，這里運用到的是「菲茲定律」，目標按鈕的大小、和手指間的距離影響用戶操作的效率
如果退出導航放在右側(cè)可以嗎？在別的場景下沒問題，但是在行車駕駛的場景中，任何的操作都需要快速?？梢栽傧胍幌聢鼍?，什么時候會退出導航：1.目的地已到 2.開到一半認識路了 3.導錯目的地了 4.要換交通工具了…..所以高德作為一個工具型產(chǎn)品，是一個核心的準則。
菲茲定律深入解讀：
現(xiàn)在隨著大數(shù)據(jù)和人工智能的科技進步，人們?nèi)粘Ｉ钜沧兊迷絹碓奖憷?，或者說人也變得越來越懶。我們不用再費盡心機尋找我們想要的，所有的內(nèi)容都會跟我們的習慣、行為被智能推送，產(chǎn)品也越來越人性化。所以我們今天的十萬個為什么就來聊一聊個性化設計！
1. 內(nèi)容個性化
個性化內(nèi)容需要通過發(fā)現(xiàn)偏好-幫助過濾-使用 3 個步驟來看。首先內(nèi)容個性化可以分為用戶偏好個性化以及用戶設置個性化，比如抖音、淘寶等應用，會根據(jù)用戶對內(nèi)容的搜索、瀏覽等行為習慣的偏好進行不同的算法推送，比如抖音我最近看鑒寶和籃球比較多，所以針對這些視頻，我的完播率、播放數(shù)、點贊評論數(shù)據(jù)有變化之后，推送給我視頻內(nèi)容的權(quán)重就發(fā)生了變化。
其實很多用戶不太理解，在電商應用，我已經(jīng)購買過一件商品后，卻依然還是給我推送同樣類型的商品。
而用戶設置個性化比如在使用 bilibili、漫畫等應用時會在正式瀏覽前讓用戶設置自己的偏好和基礎(chǔ)信息幫助用戶進行更精準的推薦。
但這里有一個問題是，我們給用戶設置的選項和用戶實際本身不符，比如讓用戶選擇他的年齡，很多用戶可能覺得自己會更年輕，所以選擇年齡和實際不符，那么推送的內(nèi)容是他需要的嗎？所以這里就需要根據(jù)用戶真實行為數(shù)據(jù)來進行再次的過濾。
但是如果我們就這樣把用戶所選的內(nèi)容都推送給他，那效率一定很低下，所以我們會從時間、熱度和用戶自身行為權(quán)重進行排序計算，當然這些內(nèi)容也并不是都用 feed 流來承載，形式可以多樣化，也包括進行分類，就像微信閱讀會推薦 3 本書，你也可以選擇點擊換一換，甚至還把推薦來源給寫出來了。
2. 場景個性化
最近看到兩個不同的界面，實屬有趣。某天我下了地鐵用支付寶掃碼出站后，頁面提示我是否要進行打車，我覺得還是挺貼心的，雖然我不需要打車但是這個場景讓我有了更加方便的選擇。
同時發(fā)現(xiàn)在群里有另一個小伙伴也截了這個頁面，他的界面卻是提醒他是否要租一輛共享單車！這簡直是赤裸裸的「歧視」呀。當然這個也就是和下面要講的用戶行為有關(guān)了，如果你經(jīng)常騎車，他就會在這里給你推薦共享單車。
還比如高德地圖在導航的時候如果即將進入收費站，在頁面明顯的位置也會出現(xiàn)支付寶入口的圖標。（圖片找不到了）
3. 行為個性化
這個應該正確的說是行為導致的功能個性化，比如知乎，從之前的上下切換話題到左右切換，再演變成上下切換話題。大家用過知乎的同學知道，現(xiàn)在上下切換話題其實還是有些不方便的，但是知乎為了讓更多金主爸爸的廣告能露出，不得已出此「下策」。
我們在設計的過程中也有一個原則「避免功能即按鈕」的設計，在業(yè)務的背景下也被選擇性忽略，所以他做了一個懸浮可動的切換按鈕，其實在可動之前，他是固定的，是由于用戶頻繁誤操作的行為，讓知乎的設計師將它變成了可動吸附的按鈕了。這個就是行為導致的功能個性化。
再比如騰訊視頻、愛奇藝里的「只看 TA」這個功能。通過數(shù)據(jù)和用戶行為路徑的分析，發(fā)現(xiàn)很多用戶會在一個視頻里頻繁觀看某一個演員的片段，可能是自己喜歡的演員，可能是被其他平臺吸引過來看某個片段的用戶，這樣大量的行為讓我們發(fā)現(xiàn)用戶的這個高頻需求。
4. 目標個性化
最近也在體驗了一款游戲，完美世界的笑傲江湖。其實現(xiàn)在很多的手游都會有這樣的功能，就是會讓用戶選擇如何體驗游戲，由于玩游戲用戶時間、職業(yè)的不同，所需要體驗游戲的內(nèi)容也是有區(qū)別的。
時間多的用戶更想要體驗所有內(nèi)容，快速提高戰(zhàn)力。而女性用戶可能更想邊看風景邊玩，看唯美的畫面。如果是時間少的上班族，那么更希望能做一些性價比高的任務，不至于脫離大部隊的節(jié)奏。所以當用戶有不同目標時，產(chǎn)品也有相應的策略讓用戶更好地體驗產(chǎn)品。
很多設計師在進行信息設計的時候，通?？恐杏X和曾經(jīng)嘗試過的經(jīng)驗進行信息美化。但是當我們遇到需要對信息設計進行解釋的時候，理由通常很蒼白。
你無法說出為什么用戶能夠快速地瀏覽信息，只是覺得又大、又粗、又鮮艷的信息能夠被識別。所以今天我們就要來聊一聊，為什么。
首先給大家介紹一些經(jīng)過研究之后的數(shù)據(jù)結(jié)論：
人類視野的空間分辨率從中央向邊緣減少。我們?nèi)祟惷恐谎劬哂?700 萬左右的視錐細胞，它們在人眼中的分布是越靠近中央凹的區(qū)域越密集。而另外一個研究表明，邊界視覺的信息在被傳遞到大腦之前是經(jīng)過壓縮的，而中央凹的視覺則不會。大概就是下 2 圖這個意思。
然后有同學會問，既然我們的邊界視覺那么差，當用戶在瀏覽界面信息的時候，為什么給用戶 3 秒鐘時間看界面他還是能夠記住頁面中的一些信息呢，或者會說為什么我們在瀏覽的時候，它不像下圖那樣只有一小圈是高清，而邊上的文字是模糊的呢。
這其實是因為大腦通過一個比較粗獷的方式，基于我們的預期，給視野進行填充，大腦也會命令你的眼睛對邊上的信息進行細節(jié)采樣。所以這是一個很快速的過程。
為什么有的人能夠一目十行就是，他的大腦能幫他補充得更多，或者說他的中央凹面積大。
但是有一個實驗是，我們通過眼動測試，當用戶的中央凹停留在一篇文章中的一個地方時，這個文字顯示的是正確的，但是隨著中央凹的移動，他周圍的文字會進行隨機的變化，他雖然能夠成功地完成閱讀，但是速度大幅下降。
比如大家看一下這個頁面的區(qū)域：
當我們掃完這個頁面也就 2-3 秒，但是如果你沒有把中央凹停留在一個信息上的時候，其實都是靠大腦對我們的預期進行的補充。而真實的情況是，你們并沒有發(fā)現(xiàn)頁面中錯誤的地方。
言歸正傳，為什么你的信息用戶總是看不見呢。我們又要講到邊界視覺。我們的設計如果不考慮邊界視覺，那么就會影響到能夠被識別的信息。那么邊界視覺到底有什么用呢？
1. 引導中央凹
我們剛才說了中央凹的重要性，那么我們在什么時候會把中央凹放到我們要看的信息上呢？其實就是依靠我們的邊界視覺。
邊界視覺引導中央凹，它幫助中央凹捕捉關(guān)鍵信息。我舉個例子，大家在查看一個食品包裝的生產(chǎn)日期的時候是怎么尋找的呢，大家的眼睛不斷地在搜索，而邊界視覺是提供了低分辨率的線索，幫助大腦，控制眼睛以線索的發(fā)現(xiàn)順序進行移動。
2. 捕捉運動元素
邊界視覺可以非?？焖俚牟蹲降竭\動的物體，所以在界面設計中，無法放置在核心位置的元素但又需要用戶去注意到的時候，通常就會使用動效。
1. 將信息盡量放在中央凹或者中央凹邊上能夠被預期的位置
在小紅書很早的一個版本中，當用戶進行點贊操作后，反饋消息在頂部顯示，讓用戶無法察覺和關(guān)注到。因為邊界視覺都無法捕捉。所以當用戶在進行操作時，如果需要將狀態(tài)、文字告知用戶，就需要顯示在用戶能預期以及能被邊界視覺捕捉到的位置。
2. 使用圖標、圖片的形式標記出關(guān)鍵信息
比如在一大段的文本中，用戶無法快速的查看內(nèi)容標題，我們就可以在標題前使用圖標、圖片的形式進行標記，讓邊界視覺獲取到信息之后在大腦中產(chǎn)生預期模型。
3. 使用動態(tài)效果吸引用戶注意
動態(tài)效果能夠快速被捕捉，甚至引導用戶的視線。比如馬蜂窩在底部進行點贊后通過動效引導用戶，告知用戶該點贊是為用戶而贊，同時讓用戶的視線又回到了頂部，可能增加用戶的停留時間。
4. 使用高亮的顏色來吸引用戶的邊界視覺進行捕捉
由于邊界視覺的搜索是線性的，所以我們必須將重點的信息進行高亮顯示，比如警告的紅色，可點擊的藍色等。
在這里再補充一個我總結(jié)出來的規(guī)律，不一定對。
大家可以看到，下方的知乎話題界面，一進入界面我們的邊界視覺立馬給我們進行信息捕捉，所以首先被關(guān)注到的是呈現(xiàn)藍色的文字、圖片、圖標等。
這里大家發(fā)現(xiàn)一個問題沒有
為什么在這個界面中上方的兩個按鈕不用色塊的形式做呢？
例如右邊這樣，很多同學在這里第一反應是這個按鈕太重了！很突兀！為什么很突兀？
既然要引導用戶為什么不做得重一點呢？那有同學又會說這樣設計會干擾用戶對其他信息的瀏覽，那么為什么會干擾對其他信息的瀏覽呢？
我猜測人眼的中央凹視錐細胞會根據(jù)界面中信息的重要程度進行調(diào)整，也就是說不同程度的強化會讓邊界視覺的捕捉能力下降。
像右側(cè)的色塊按鈕讓中央凹的視覺細胞更加聚集，而導致邊界視覺的范圍也大幅縮小，所以你們看左邊界面覺得信息優(yōu)先級很清晰，但是右側(cè)的就會覺得我只看到了兩個大按鈕，而其他的信息都沒有被捕捉到。
那繼續(xù)思考一下，什么時候能用大色塊的按鈕呢？很多電商平臺的購物都是大按鈕，這個難道不會讓用戶的邊界視覺受影響嗎？
大家發(fā)現(xiàn)一個規(guī)律沒有，有大按鈕的頁面基本上圖片、圖標都很多，而一般都是文字的頁面，通常都不會出現(xiàn)大按鈕，因為出現(xiàn)了就會被噴太突兀了??！
這就是因為大按鈕在沒有其他更高層級信息的配合下讓邊界視覺捕捉范圍降低了，如果都是高層級的信息，那么邊界視覺的捕捉范圍就會「一視同仁」。
所以，為了讓一個界面的按鈕不突兀，一種方法是用和它相似級別的元素進行輔助展示，另一種方法就是降低該按鈕的視覺引導層級。
不知道大家是否曾經(jīng)或者現(xiàn)在使用過某個產(chǎn)品，當我們在完成某一個任務或者在某個場景中時，自己的操作行為特別自然流暢，注意力也非常集中，這種感覺讓你非常的愉悅、舒適。
所以契克森米哈提出了心流的概念：個體完全投入某種活動的整體感覺，當個體處于心流體驗的過程中，會對周邊干擾視而不見，過程非常愉快且會覺得時間過得很快。
所以當我們在做交互設計時，我們追求的就是一種自然、能讓用戶進入心流的交互體驗。但是大家不要誤會了心流的概念，有些同學覺得我們在刷抖音、微博、微信就是一種心流的狀態(tài)，那就錯了。
心流并不是一種簡單的沉浸的狀態(tài)，當我們在娛樂時不過是被內(nèi)容吸引了，讓你覺得沉浸只不過是你的行為操作形成了習慣，不是心流狀態(tài)。
今天我就來和大家分享一下如何通過一些方法，作出讓用戶進入心流狀態(tài)的設計，這些都是有跡可循的。
開過車的同學都知道，左側(cè)剎車右側(cè)油門，檔在右手邊，在國內(nèi)所有車都是這樣，所以我們不會搞錯。在經(jīng)過一段時間的駕駛后我們更能夠清楚的了解汽車的動力、剎車等性能，所以我們會覺得這輛車的操控感覺很好。原因是他的設計符合了用戶的預期。直覺的預期、位置的預期、功能的預期以及結(jié)果的預期。舉個例子，當我給你一個任務，希望你能夠快速的進入 xxapp 進行個人頭像的設置，在這個前提條件下我們來看一下剛才說的幾個預期：
直覺預期
每個人的直覺都不同，這來源于他生活中的環(huán)境影響和習慣影響所以對于我個人的直覺來說，要完成這個任務首先必須找到最初的入口，我的直覺告訴我這個功能大概率可能出現(xiàn)的位置會在底部標簽中的個人中心板塊中。
位置預期
個人中心板塊的位置可能會根據(jù)信息架構(gòu)而出現(xiàn)變動，比如抽屜導航中會出現(xiàn)個人中心的入口，例如滴滴。當我們進入之后會看到頭像、名字、箭頭等信息，特別是箭頭，這個圖標給人的預期是你可以繼續(xù)進入進行下一步操作，那么用戶對下一步操作的預期基本上就是會點擊箭頭或者頭像，這個也是比較明確的。或者直接來一個編輯的按鈕也是可行的，這樣就不需要用戶去猜了，但編輯的功能比較垂直了，所以到底用哪種形式，要根據(jù)內(nèi)容來。
如果沒有這個箭頭，用戶一定會產(chǎn)生試探性的行為操作，此時內(nèi)心已經(jīng)有疑惑且不自信了。所以在心流交互中，明確的功能引導非常重要。
功能預期
用戶預期通過他的操作能夠達成目的，那么最基本的就是在這條路徑上的功能不能缺失以及減少其他的干擾。可以發(fā)現(xiàn)微信的個人中心最底部板塊有兩個熱區(qū)，并不是一塊直接進入個人中心的熱區(qū)，如果點擊名字這一整行，則會下拉引導你拍攝一段視頻。所以有時候想替換頭像以為點擊這一塊都可以進入二級，卻發(fā)現(xiàn)這并不是我要的功能。
結(jié)果的預期
最后當用戶進入編輯頭像頁面之后，需要關(guān)注其場景，這邊微信做的就挺好：
很多時候交互流程已經(jīng)做的非常自然了，但是當用戶正在他的心流體驗中，突然一個模態(tài)彈框跳出打斷了用戶，令人啼笑皆非的是這個彈窗只是告訴你一個不痛不癢的信息，這就比較難受了。
而我們來看馬蜂窩當用戶在 app 中完成某些特定任務后，不會出現(xiàn)模態(tài)彈窗的強制干擾，而是在頂部出現(xiàn)一個通知 bar，這樣原本在進行任務中間階段的用戶不會受太大的干擾，可以繼續(xù)任務行為。
再例如美團外賣和餓了么，用戶在點餐時對優(yōu)惠優(yōu)惠的關(guān)注是特別強烈的，而是否能夠讓用戶認真的挑選菜品，我們也盡可能做到影響的打擾，就像滿減去湊單的交互形式，點擊后不跳轉(zhuǎn)，僅在當前頁面以文字形式讓用戶明白并行動，但這里去湊單很容易和去結(jié)算有誤操作。
例如馬蜂窩自定義旅程，進行多標簽選項，當用戶在當前頁面選擇完該頁面的選項后自動幫助用戶定位到選擇日期的功能模塊中。這樣減少了用戶不必要的下滑操作，像這樣單一場景中對用戶的行為預期是比較好判斷的。
之前玩過很多款手游，即便是一些常用的套路，每家都能玩的不一樣，例如寶石合成、英雄裝備獲取，有些游戲能夠做到讓用戶在一個場景中不脫離。
比如寶石合成這個功能。寶石從哪里來？是否能在合成合成路徑中穿插購買的分支并再鏈接回合成場景？在包裹中進行合成和在裝備界面進行合成是否流程一樣；然而有些游戲當用戶購買完寶石后需要重新自己再打開合成界面，非常繁瑣，同時也導致了用戶消費路徑的斷裂。
再比如裝備副本獲取這個功能，這里我們看一下權(quán)利的游戲這款游戲，當我一件裝備的零部件不足需要進行掃蕩獲取，這里有兩種場景，一種是我剛好只需要這 4 個件合成 1 件，另一個是我需要更多的零部件，不僅僅這一個，所以對前者來說我達成了目的就可以返回去合成界面，而后者我可能需要更多數(shù)量的零件，但不管如何我一定還是需要返回合成界面的，然而不管是哪個場景，都必須點擊兩下關(guān)閉按鈕才能返回合成界面，所以在這個地方缺少了一個快速拉回用戶狀態(tài)的按鈕，叫做「去合成」。
當我已經(jīng)完成了我的需求后，能夠讓我快速的返回合成界面，因為合成裝備才是我的最終目的，而不是刷更多的碎片。
下方的案例再解釋一下第 3 點，當用戶點擊合成之后，不要提示告知用戶數(shù)量不夠，因為你已經(jīng)顯示了數(shù)量未達標，用戶想點擊的目的是讓你告訴他未達標改怎么辦，所以這里最好的處理方式就是把獲取該裝備的方法告訴用戶。
我們希望一個產(chǎn)品使用起來很自然，除了操作成習慣之后流暢外，一些幫助用戶潛意識的連貫的微交互也顯得非常重要。不需要有華麗的動畫，有時候僅僅只是一個晃動，一個速度曲線就足以合理的表達功能的語言。
文章來源：優(yōu)設