很多時候，當你的設計遇到了挑戰，你無法客觀地回答為什么，甚至在和業務方溝通的過程中表現得很被動。

為什么行為召喚按鈕的位置在右側

通常根據人們的習慣，我們將核心行動操作都放置在右側，例如下圖核心的行為召喚按鈕都放置在右側，那為什么都要放在右側呢？

我們可以用古騰堡圖表來解釋一下。古騰堡——西方活字印刷術的發明人，順便看一下他發明的圖表，啥意思呢？就是當我們在瀏覽一個不熟悉頁面的時候，我們通常瀏覽的路徑是一個對稱的，從左上到右下的一個路徑，最終的視覺落點通常就會在這條線上。

所以我們很多的信息和操作按鈕，都是在右側。然而我們發現有些對話框卻把行動按鈕放在左側，我們來分析一下原因，像下方的對話框：

左側的是我們常規看到的一個模態彈框，彈框內右側的行動按鈕可以是確定，也是可以刪除，但是右側的彈框基于我們的猜測是希望用戶在高風險操作下，再次確認要進行的操作，所以當用戶視線移動到右邊的行動按鈕時發現它并不是想要的操作，這時用戶會對左側信息進行一次再瀏覽，確認后再選擇，很多時候用戶在進行操作的時候會下意識地進行右側點擊，所以這樣的處理方法可以避免用戶對高風險行為的誤操作。

但是話又說回來，這樣的設計其實違背了用戶的習慣和預期，所以還是要慎重考慮。

我們再來看一下高德地圖的案例， 點擊「退出」后展開兩個選項，「退出導航」在左側高亮，取消放在了右側。

那這算不算違反用戶的習慣和預期呢？我們換一種解釋，這里運用到的是「菲茲定律」，目標按鈕的大小、和手指間的距離影響用戶操作的效率

如果退出導航放在右側可以嗎？在別的場景下沒問題，但是在行車駕駛的場景中，任何的操作都需要快速?？梢栽傧胍幌聢鼍埃裁磿r候會退出導航：1.目的地已到 2.開到一半認識路了 3.導錯目的地了 4.要換交通工具了…..所以高德作為一個工具型產品，是一個核心的準則。

菲茲定律深入解讀：

為什么用戶要被「區別對待」

現在隨著大數據和人工智能的科技進步，人們日常生活也變得越來越便利，或者說人也變得越來越懶。我們不用再費盡心機尋找我們想要的，所有的內容都會跟我們的習慣、行為被智能推送，產品也越來越人性化。所以我們今天的十萬個為什么就來聊一聊個性化設計！

1. 內容個性化

個性化內容需要通過發現偏好-幫助過濾-使用 3 個步驟來看。首先內容個性化可以分為用戶偏好個性化以及用戶設置個性化，比如抖音、淘寶等應用，會根據用戶對內容的搜索、瀏覽等行為習慣的偏好進行不同的算法推送，比如抖音我最近看鑒寶和籃球比較多，所以針對這些視頻，我的完播率、播放數、點贊評論數據有變化之后，推送給我視頻內容的權重就發生了變化。

其實很多用戶不太理解，在電商應用，我已經購買過一件商品后，卻依然還是給我推送同樣類型的商品。

而用戶設置個性化比如在使用 bilibili、漫畫等應用時會在正式瀏覽前讓用戶設置自己的偏好和基礎信息幫助用戶進行更精準的推薦。

但這里有一個問題是，我們給用戶設置的選項和用戶實際本身不符，比如讓用戶選擇他的年齡，很多用戶可能覺得自己會更年輕，所以選擇年齡和實際不符，那么推送的內容是他需要的嗎？所以這里就需要根據用戶真實行為數據來進行再次的過濾。

但是如果我們就這樣把用戶所選的內容都推送給他，那效率一定很低下，所以我們會從時間、熱度和用戶自身行為權重進行排序計算，當然這些內容也并不是都用 feed 流來承載，形式可以多樣化，也包括進行分類，就像微信閱讀會推薦 3 本書，你也可以選擇點擊換一換，甚至還把推薦來源給寫出來了。

2. 場景個性化

最近看到兩個不同的界面，實屬有趣。某天我下了地鐵用支付寶掃碼出站后，頁面提示我是否要進行打車，我覺得還是挺貼心的，雖然我不需要打車但是這個場景讓我有了更加方便的選擇。

同時發現在群里有另一個小伙伴也截了這個頁面，他的界面卻是提醒他是否要租一輛共享單車！這簡直是赤裸裸的「歧視」呀。當然這個也就是和下面要講的用戶行為有關了，如果你經常騎車，他就會在這里給你推薦共享單車。

還比如高德地圖在導航的時候如果即將進入收費站，在頁面明顯的位置也會出現支付寶入口的圖標。（圖片找不到了）

3. 行為個性化

這個應該正確的說是行為導致的功能個性化，比如知乎，從之前的上下切換話題到左右切換，再演變成上下切換話題。大家用過知乎的同學知道，現在上下切換話題其實還是有些不方便的，但是知乎為了讓更多金主爸爸的廣告能露出，不得已出此「下策」。

我們在設計的過程中也有一個原則「避免功能即按鈕」的設計，在業務的背景下也被選擇性忽略，所以他做了一個懸浮可動的切換按鈕，其實在可動之前，他是固定的，是由于用戶頻繁誤操作的行為，讓知乎的設計師將它變成了可動吸附的按鈕了。這個就是行為導致的功能個性化。

再比如騰訊視頻、愛奇藝里的「只看 TA」這個功能。通過數據和用戶行為路徑的分析，發現很多用戶會在一個視頻里頻繁觀看某一個演員的片段，可能是自己喜歡的演員，可能是被其他平臺吸引過來看某個片段的用戶，這樣大量的行為讓我們發現用戶的這個高頻需求。

4. 目標個性化

最近也在體驗了一款游戲，完美世界的笑傲江湖。其實現在很多的手游都會有這樣的功能，就是會讓用戶選擇如何體驗游戲，由于玩游戲用戶時間、職業的不同，所需要體驗游戲的內容也是有區別的。

時間多的用戶更想要體驗所有內容，快速提高戰力。而女性用戶可能更想邊看風景邊玩，看唯美的畫面。如果是時間少的上班族，那么更希望能做一些性價比高的任務，不至于脫離大部隊的節奏。所以當用戶有不同目標時，產品也有相應的策略讓用戶更好地體驗產品。

為什么你設計的信息用戶看不見

很多設計師在進行信息設計的時候，通?？恐杏X和曾經嘗試過的經驗進行信息美化。但是當我們遇到需要對信息設計進行解釋的時候，理由通常很蒼白。

你無法說出為什么用戶能夠快速地瀏覽信息，只是覺得又大、又粗、又鮮艷的信息能夠被識別。所以今天我們就要來聊一聊，為什么。

首先給大家介紹一些經過研究之后的數據結論：

人類視野的空間分辨率從中央向邊緣減少。我們人類每只眼睛具有 700 萬左右的視錐細胞，它們在人眼中的分布是越靠近中央凹的區域越密集。而另外一個研究表明，邊界視覺的信息在被傳遞到大腦之前是經過壓縮的，而中央凹的視覺則不會。大概就是下 2 圖這個意思。

然后有同學會問，既然我們的邊界視覺那么差，當用戶在瀏覽界面信息的時候，為什么給用戶 3 秒鐘時間看界面他還是能夠記住頁面中的一些信息呢，或者會說為什么我們在瀏覽的時候，它不像下圖那樣只有一小圈是高清，而邊上的文字是模糊的呢。

這其實是因為大腦通過一個比較粗獷的方式，基于我們的預期，給視野進行填充，大腦也會命令你的眼睛對邊上的信息進行細節采樣。所以這是一個很快速的過程。

為什么有的人能夠一目十行就是，他的大腦能幫他補充得更多，或者說他的中央凹面積大。

但是有一個實驗是，我們通過眼動測試，當用戶的中央凹停留在一篇文章中的一個地方時，這個文字顯示的是正確的，但是隨著中央凹的移動，他周圍的文字會進行隨機的變化，他雖然能夠成功地完成閱讀，但是速度大幅下降。

比如大家看一下這個頁面的區域：

當我們掃完這個頁面也就 2-3 秒，但是如果你沒有把中央凹停留在一個信息上的時候，其實都是靠大腦對我們的預期進行的補充。而真實的情況是，你們并沒有發現頁面中錯誤的地方。

言歸正傳，為什么你的信息用戶總是看不見呢。我們又要講到邊界視覺。我們的設計如果不考慮邊界視覺，那么就會影響到能夠被識別的信息。那么邊界視覺到底有什么用呢？

1. 引導中央凹

我們剛才說了中央凹的重要性，那么我們在什么時候會把中央凹放到我們要看的信息上呢？其實就是依靠我們的邊界視覺。

邊界視覺引導中央凹，它幫助中央凹捕捉關鍵信息。我舉個例子，大家在查看一個食品包裝的生產日期的時候是怎么尋找的呢，大家的眼睛不斷地在搜索，而邊界視覺是提供了低分辨率的線索，幫助大腦，控制眼睛以線索的發現順序進行移動。

2. 捕捉運動元素

邊界視覺可以非?？焖俚牟蹲降竭\動的物體，所以在界面設計中，無法放置在核心位置的元素但又需要用戶去注意到的時候，通常就會使用動效。

那么我們要怎么做才能讓用戶關注到關鍵信息呢？

1. 將信息盡量放在中央凹或者中央凹邊上能夠被預期的位置

在小紅書很早的一個版本中，當用戶進行點贊操作后，反饋消息在頂部顯示，讓用戶無法察覺和關注到。因為邊界視覺都無法捕捉。所以當用戶在進行操作時，如果需要將狀態、文字告知用戶，就需要顯示在用戶能預期以及能被邊界視覺捕捉到的位置。

2. 使用圖標、圖片的形式標記出關鍵信息

比如在一大段的文本中，用戶無法快速的查看內容標題，我們就可以在標題前使用圖標、圖片的形式進行標記，讓邊界視覺獲取到信息之后在大腦中產生預期模型。

3. 使用動態效果吸引用戶注意

動態效果能夠快速被捕捉，甚至引導用戶的視線。比如馬蜂窩在底部進行點贊后通過動效引導用戶，告知用戶該點贊是為用戶而贊，同時讓用戶的視線又回到了頂部，可能增加用戶的停留時間。

4. 使用高亮的顏色來吸引用戶的邊界視覺進行捕捉

由于邊界視覺的搜索是線性的，所以我們必須將重點的信息進行高亮顯示，比如警告的紅色，可點擊的藍色等。

在這里再補充一個我總結出來的規律，不一定對。

大家可以看到，下方的知乎話題界面，一進入界面我們的邊界視覺立馬給我們進行信息捕捉，所以首先被關注到的是呈現藍色的文字、圖片、圖標等。

這里大家發現一個問題沒有

為什么在這個界面中上方的兩個按鈕不用色塊的形式做呢？

例如右邊這樣，很多同學在這里第一反應是這個按鈕太重了！很突兀！為什么很突兀？

既然要引導用戶為什么不做得重一點呢？那有同學又會說這樣設計會干擾用戶對其他信息的瀏覽，那么為什么會干擾對其他信息的瀏覽呢？

我猜測人眼的中央凹視錐細胞會根據界面中信息的重要程度進行調整，也就是說不同程度的強化會讓邊界視覺的捕捉能力下降。

像右側的色塊按鈕讓中央凹的視覺細胞更加聚集，而導致邊界視覺的范圍也大幅縮小，所以你們看左邊界面覺得信息優先級很清晰，但是右側的就會覺得我只看到了兩個大按鈕，而其他的信息都沒有被捕捉到。

那繼續思考一下，什么時候能用大色塊的按鈕呢？很多電商平臺的購物都是大按鈕，這個難道不會讓用戶的邊界視覺受影響嗎？

大家發現一個規律沒有，有大按鈕的頁面基本上圖片、圖標都很多，而一般都是文字的頁面，通常都不會出現大按鈕，因為出現了就會被噴太突兀了！！

這就是因為大按鈕在沒有其他更高層級信息的配合下讓邊界視覺捕捉范圍降低了，如果都是高層級的信息，那么邊界視覺的捕捉范圍就會「一視同仁」。

所以，為了讓一個界面的按鈕不突兀，一種方法是用和它相似級別的元素進行輔助展示，另一種方法就是降低該按鈕的視覺引導層級。

為什么用戶心流那么難設計

不知道大家是否曾經或者現在使用過某個產品，當我們在完成某一個任務或者在某個場景中時，自己的操作行為特別自然流暢，注意力也非常集中，這種感覺讓你非常的愉悅、舒適。

所以契克森米哈提出了心流的概念：個體完全投入某種活動的整體感覺，當個體處于心流體驗的過程中，會對周邊干擾視而不見，過程非常愉快且會覺得時間過得很快。

所以當我們在做交互設計時，我們追求的就是一種自然、能讓用戶進入心流的交互體驗。但是大家不要誤會了心流的概念，有些同學覺得我們在刷抖音、微博、微信就是一種心流的狀態，那就錯了。

心流并不是一種簡單的沉浸的狀態，當我們在娛樂時不過是被內容吸引了，讓你覺得沉浸只不過是你的行為操作形成了習慣，不是心流狀態。

今天我就來和大家分享一下如何通過一些方法，作出讓用戶進入心流狀態的設計，這些都是有跡可循的。

1. 用戶自信的控制感

開過車的同學都知道，左側剎車右側油門，檔在右手邊，在國內所有車都是這樣，所以我們不會搞錯。在經過一段時間的駕駛后我們更能夠清楚的了解汽車的動力、剎車等性能，所以我們會覺得這輛車的操控感覺很好。原因是他的設計符合了用戶的預期。直覺的預期、位置的預期、功能的預期以及結果的預期。舉個例子，當我給你一個任務，希望你能夠快速的進入 xxapp 進行個人頭像的設置，在這個前提條件下我們來看一下剛才說的幾個預期：

直覺預期

每個人的直覺都不同，這來源于他生活中的環境影響和習慣影響所以對于我個人的直覺來說，要完成這個任務首先必須找到最初的入口，我的直覺告訴我這個功能大概率可能出現的位置會在底部標簽中的個人中心板塊中。

位置預期

個人中心板塊的位置可能會根據信息架構而出現變動，比如抽屜導航中會出現個人中心的入口，例如滴滴。當我們進入之后會看到頭像、名字、箭頭等信息，特別是箭頭，這個圖標給人的預期是你可以繼續進入進行下一步操作，那么用戶對下一步操作的預期基本上就是會點擊箭頭或者頭像，這個也是比較明確的。或者直接來一個編輯的按鈕也是可行的，這樣就不需要用戶去猜了，但編輯的功能比較垂直了，所以到底用哪種形式，要根據內容來。

如果沒有這個箭頭，用戶一定會產生試探性的行為操作，此時內心已經有疑惑且不自信了。所以在心流交互中，明確的功能引導非常重要。

功能預期

用戶預期通過他的操作能夠達成目的，那么最基本的就是在這條路徑上的功能不能缺失以及減少其他的干擾。可以發現微信的個人中心最底部板塊有兩個熱區，并不是一塊直接進入個人中心的熱區，如果點擊名字這一整行，則會下拉引導你拍攝一段視頻。所以有時候想替換頭像以為點擊這一塊都可以進入二級，卻發現這并不是我要的功能。

結果的預期

最后當用戶進入編輯頭像頁面之后，需要關注其場景，這邊微信做的就挺好：

• 直接拍攝
• 之前拍攝或保存的圖
• 上一張頭像
• 當下我要保存這張頭像

2. 減少阻斷式的干擾

很多時候交互流程已經做的非常自然了，但是當用戶正在他的心流體驗中，突然一個模態彈框跳出打斷了用戶，令人啼笑皆非的是這個彈窗只是告訴你一個不痛不癢的信息，這就比較難受了。

而我們來看馬蜂窩當用戶在 app 中完成某些特定任務后，不會出現模態彈窗的強制干擾，而是在頂部出現一個通知 bar，這樣原本在進行任務中間階段的用戶不會受太大的干擾，可以繼續任務行為。

再例如美團外賣和餓了么，用戶在點餐時對優惠優惠的關注是特別強烈的，而是否能夠讓用戶認真的挑選菜品，我們也盡可能做到影響的打擾，就像滿減去湊單的交互形式，點擊后不跳轉，僅在當前頁面以文字形式讓用戶明白并行動，但這里去湊單很容易和去結算有誤操作。

3. 并減少不必要的操作

例如馬蜂窩自定義旅程，進行多標簽選項，當用戶在當前頁面選擇完該頁面的選項后自動幫助用戶定位到選擇日期的功能模塊中。這樣減少了用戶不必要的下滑操作，像這樣單一場景中對用戶的行為預期是比較好判斷的。

4. 閉合路徑

之前玩過很多款手游，即便是一些常用的套路，每家都能玩的不一樣，例如寶石合成、英雄裝備獲取，有些游戲能夠做到讓用戶在一個場景中不脫離。

比如寶石合成這個功能。寶石從哪里來？是否能在合成合成路徑中穿插購買的分支并再鏈接回合成場景？在包裹中進行合成和在裝備界面進行合成是否流程一樣；然而有些游戲當用戶購買完寶石后需要重新自己再打開合成界面，非常繁瑣，同時也導致了用戶消費路徑的斷裂。

再比如裝備副本獲取這個功能，這里我們看一下權利的游戲這款游戲，當我一件裝備的零部件不足需要進行掃蕩獲取，這里有兩種場景，一種是我剛好只需要這 4 個件合成 1 件，另一個是我需要更多的零部件，不僅僅這一個，所以對前者來說我達成了目的就可以返回去合成界面，而后者我可能需要更多數量的零件，但不管如何我一定還是需要返回合成界面的，然而不管是哪個場景，都必須點擊兩下關閉按鈕才能返回合成界面，所以在這個地方缺少了一個快速拉回用戶狀態的按鈕，叫做「去合成」。

當我已經完成了我的需求后，能夠讓我快速的返回合成界面，因為合成裝備才是我的最終目的，而不是刷更多的碎片。

下方的案例再解釋一下第 3  點，當用戶點擊合成之后，不要提示告知用戶數量不夠，因為你已經顯示了數量未達標，用戶想點擊的目的是讓你告訴他未達標改怎么辦，所以這里最好的處理方式就是把獲取該裝備的方法告訴用戶。

5. 恰到好處且不易發現的微交互

我們希望一個產品使用起來很自然，除了操作成習慣之后流暢外，一些幫助用戶潛意識的連貫的微交互也顯得非常重要。不需要有華麗的動畫，有時候僅僅只是一個晃動，一個速度曲線就足以合理的表達功能的語言。

文章來源：優設

您最近填寫過在線表單了嗎？

答案應該是肯定的。根據最近的研究，84% 的人每周至少會填寫一份線上表單。

雖然你可能沒有感受到，但在線填表單已經成為我們生活中不可或缺的一部分了。

其實，幾乎每個把用戶由 A 帶向 B 的線上交互都是一個網絡表單：與某個公司聯系、訂火車票、購物、訂一晚酒店等等。

網絡表單最早在 1994 年開始用于在線銷售，第一個拖拽式表單 2006 年在屏幕上出現。從那時起，表單已經成為線上交互的關鍵。

企業和客戶之間需要通過網站進行聯系，小到縣城的官網，大到國家政府網站，現在很難想像一個沒有網絡的世界。

但為什么線上表單一直備受詬?。?

當然，確實沒幾個人喜歡填表，但大多數人絕對不會介意填寫那些清晰、簡潔、設計優秀的表單。

其實這也就是癥結所在。太多的在線表單冗長、令人迷惑或讓人感到有所冒犯（有時甚至三者同時出現）。

當表單產生讓人迷惑，或提出的要求超出必要范圍時，用戶的放棄幾率就會大大增加。 有些用戶可能會放棄填寫，甚至退訂整個業務。無論是以上哪種情況，您都不會再有第二次機會。

在設計一個表單的時候，我們怎么保證用戶能填到最后一步？

「創建一個表單很簡單，難的是讓人填完它?！?

在幫助 420 萬用戶創建線上表單后，我們在 JotForm 發現了一件重要的事情，就是一些小小的改變會讓整個事情大有改觀。通常，這些改變都是從那些被放棄的表單中獲得的靈感。

例子：

• HubSpot 發現，當一份 14 頁的潛在用戶登記表，被放在一個單獨的登錄頁上時，用戶填完的可能性要高出 17%。
• Marketo 發現，一些非關鍵的填寫區域，反而讓每位潛在客戶的線索成本上漲了 25%。

表單設計成什么樣呢？應該直觀、簡單以及體驗友好。以下是一些推薦的參考方法。

第一部分：表單的主要元素

1. 歡迎填表者：標題與介紹

無論是誰，歡迎朋友的時候難道不會說「你好嗎？」我們都知道禮貌的重要性，但是在線上卻往往忽略了這一點。

歡迎頁和標題讓您有機會以一種清晰而友好的方式介紹表單和自己，而且還會留下一個良好的第一印象。

看看 BettingExpert 的數據吧：通過修改表單標題來強調「注冊理由」以后，他們的注冊率提高了31.54%。

標題是對下文最短最精的概括。用戶一般都會跳過表單內容，而且幾乎都不會仔細閱讀那種特別詳細的描述。所以用最少的文字說清楚一個表單的目的尤其重要。

標題可以簡單理解為描述被調查者對表格的期望。盡可能保持中立：要確保應答者誠實回答，而不是去滿足出題者的設想。甚至像陳述一個目標這樣簡單的事情，也可能會不知不覺地誘使應答者試圖迎合。

而且現在也需要一份清單，說明應答者應該事先準備的外部文件，沒人想中途去滿屋子找納稅證明或者護照。

如果填表需要很長的時間去完成，一定要提前告知用戶。不過如果是又快又簡單的？讓用戶感到驚喜吧(但不要冒險侮辱任何人的智力，以防萬一)。畢竟，他們能夠通過查看進度條或字段數量來推斷出這一點。

2. 放置相關的標題和副標題

一個有趣的事實：人類會在 50 毫秒內形成第一印象。重點：由于時間不夠長，他們無法仔細閱讀你的作品。

表單用戶很可能就是快速瀏覽一小部分內容，忽略大部分內容。而且有很大可能是他們正在忙著其他事情，無法集中注意力或者幾乎就沒有什么耐心，只想要快點結束。

顯然，我們無法阻止用戶，所以只能通過簡潔明了的標題來引導他們。標題絕對是個得力助手：可以將文本結構化、清晰化、保持用戶的參與度。

用戶應該可以看一眼標題就知道他們應該怎么做，而不是非得把剩下的全部看完。

測試這一點的最好方法是單獨閱讀標題，是否能讓人看懂呢？

3. 問題之間要有分隔符

分隔符很重要。就傳統表單來說，在視覺上把問題隔開以達到減少干擾的最好方法，就是使用分隔符。并不需要在視覺上做出很大的區別，區別太大反而容易分散用戶注意力。

4. 多頁面表單或單頁表單？

這主要取決于表單有幾個議題。

如果只有1，2個議題，單頁表單肯定是最佳選擇。但是如果一個表單有很多議題，那么就需要多頁表單來呈現。想象一下：用戶在面對一個似乎有成千上百議題的表單時，得有多心煩。

5. 強調「行動召喚」（CTAs，Calls-to-Actions）

成功的「行動召喚」強調的是「行動」部分：單擊這個按鈕，用戶要執行什么操作？類似「發送」，「注冊」或者「過程」之類的通用標簽并不會削弱召喚機制。描述越多越好。

為了消除不確定性，試著從用戶的角度回答一下這個問題「我想干什么？」舉個例子，如果是某項服務的調查表單，那就應該是「我需要免費咨詢」。

還需要更多證據嗎？在這類研究中，Unbounce 發現只是把「開始你的試用」換成「開始我的試用」，就提高了90% 的點擊率。

6. 標明表單中的區域

這并不是說要弄得花里胡哨的……

單選框、挑選區域和復選框之所以有效，是因為它們既簡單又常見。表單元素的標準格式等同于更好的可用性。

單選框適用于有很多選項而只有一個可選的情況。復選框用在多項選擇的情況下最好。

為了更短的認知適應過程，要盡可能地使用多選框或者單選框而不是下拉菜單。就像 Luke Wroblewski 說的：「下拉菜單應該是 UI中的最后選擇?！?

7. 別忘了「感謝」頁面

記住用戶是花時間的。所以千萬不要唐突結束，要記得說謝謝。

第二部分：怎么寫用戶才愿意看

以下是一些關于表單書寫藝術的小建議。

1. 言簡意賅

從形式上來說，我們都更喜歡簡單的語言，尤其是那些學者，天才和專家。那為什么還有那么多線上對話像是復讀機一樣？

「請接受來自我們最誠摯的道歉。即便如此，我們還是希望能知道您的建議。除此之外……」

像一個老學院派那樣說話只會疏遠用戶，讓他們瞠目結舌。

簡單不意味愚蠢，而是等于可讀性。這意味著最清晰的平白直述。每個詞語都應該是最短，最直接的版本，能用「不過」就別用「盡管如此」。不用行話，不寫復雜句。

你可以通過大聲朗讀來檢查連貫性。耳朵能夠聽到眼睛看不到的東西，特別是在描述那些冗長復雜概念的時候。

2. 擬人化

一份表單應該就像是你和填表者之間的對話。通過用「我」，「你」，「你的」這些代詞來擬人化。

3. 減少被動句

主動語態的表達（比如：約翰寫了一封投訴信）比被動語態（比如：一封投訴信由約翰寫出）更加有力。

被動語態會更冗長，不夠集中。

（譯者注：以下文章中帶橫線的內容適用于英語語法，不感興趣的讀者可自行跳過。）

一個被動語態句子究竟有多糟？這是兩點教訓：

• 動作的執行者不夠清晰（一封信被寫錯了）
• 這個句子的 Be 動詞（to be ,has been,was）后面跟著一個過去分詞。

還是不確定？你可以去查一下微軟 Word 可讀性標準，或者普渡大學語句方法。

4. 盡可能地刪減詞語

許多作者都會陷入這樣的思維誤區：用的詞越多，就顯得他們越聰明。其實不是這樣的。在表單編寫方面，或者說各種寫作中，刪減詞語都要比添加詞語更加有益。

「你刪掉的每一個詞，都會為你多增加一個讀者?！?

在仔細檢查不必要的詞語后，文章會更篤實，更連貫，更吸引人。

刪減重點：

• 副詞（以ly結尾）。
• 無意義的量詞（很多，大量）。
• 空洞的程度形容（副）詞（非常，特別，尤其）。
• 「that」這個詞。
• 非必要信息。
• 模糊詞（東西，少量，大量）。

5. 盡可能使用縮寫

比起完整形態（比如 cannot，is not），語句的縮寫形式（比如 can’t，isn’t）能夠讓文章看起來更簡潔，友好和易讀。

另外，還能節省文字篇幅。一份優秀的表單閱讀性都不錯。

What’s 優于 What is。很簡單。

6. 長句變短句

冗長曲折的句子容易讓人難以理解。密密麻麻的文字堆也是如此。

對于大多數讀者來說，每個句子最多 20 個單詞，每個段落最多 3 個句子，是最合適的。把每個長句都擴成兩個短句。短句實際上并不遜色。

使用空格，項目符號，表格以及打破繁瑣說明的任何其他元素，都會使您的讀者松一口氣。

7. 檢查文字

在我寫博客的過程中，我（艱難地）認識到，優秀的文章是 30％ 的寫作加上 70％ 的編輯。

當你完善了問題，精簡了文字和內容后，把表格存儲好。隔幾天再回過頭來看，你會發現有些之前沒有發現的地方還可以再改進。

第三部分：表單心理學

大多數用戶體驗的心理學原理其實都在人們的潛意識中，所以難以讓人注意到。

但是每種顏色，字體，線條和按鈕都有其用途。

日常的小規模設計可能不如十億美元的營銷活動那么引人注目。但小設計也需要花心思。而且，研究令人愉悅的設計背后的心理學機制很有意思，成本也不高。

以下是一些關鍵的心理原則，這些原則構成了設計優良的表格的堅實基礎。

1. 比較成本和收益

我們做出的每一個決定，從倒垃圾到訂婚，都要經過我們頭腦中的自動成本收益分析。一項任務的成本是否值得完成后的收益？

設計師的工作是確保用戶在感知上收益是大于成本的。

當然，成本與收益是主觀的，填表通常源于義務，而不是受訪者希望從中獲益的行為。除非給受訪者獎勵，否則無法確保收益。但是我們可以把成本降到。

降低受訪者成本的一些關鍵策略:

2. 使用文本塊

+1-919-555-2743 vs 19195552743.

哪個電話號碼會留在你的腦海里？當然是第一個。那是因為它被分塊了。

組塊是一種方便的記憶技術：我們把它用于銀行個人識別碼、社會安全號碼和儲物柜代碼。它指的是將信息排列成「塊」的過程，使內容更容易保留、處理和回憶。

研究聲稱數字 3 是幫助人們吸收和回憶信息的神奇數字。所以盡可能使用它：針對段落，列表，關鍵步驟等等。

3. 定義格式要求

如果可能，避免任意格式化規則。但如果是必要的規則，用紅色記號筆拼寫出來。填表單時，沒人愿意猜。密碼要求、語法規則、編號間距等等，如果一個字段需要特定的輸入，告訴用戶。

席克定律

如果我要舉辦一個晚宴，我總是選擇從當地一家小雜貨店購買我的配料，而不是從一個雜亂無章的超市購買。那是因為有太多的選擇往往會讓人感到麻木。這就是席克定律：它指出，隨著選項增加，做出決定的時間也在增加。

應用到用戶體驗領域，席克定律簡直就是去繁求簡的一劑良方：限制導航選擇，給用戶明確但受限的選項。因為隨著設計靈活性的增加，它的可用性會降低。少即是多。

4. 下定決心（再次）刪除

這個鏈接有什么用？還是右上角的按鈕？如果并沒有增效，那就是減效。每一個字，每一張圖片，鈴鐺圖標或者口哨圖標都不是100% 必需的，這些都會降低你表單的轉換率。

尼爾·帕特爾稱只需刪除一個字段，他的聯系人表單提交率就可以提高 26%。

正如杜魯門·卡波特曾經說過的，「我更相信剪刀，而不是鉛筆?！?

5. 減少打字需求

打字是在線表單中最耗時、最密集的部分，而且經常會導致錯誤——尤其是在手機上。用按鈕、滑塊替換文本框并使用自動完成功能，將減少工作量并提高轉化率。

6. 用條件邏輯縮短表格

根據 Marketing Insider Group 的調查，有 78％ 的互聯網用戶表示來自品牌的個人相關內容會增加他們的購買意愿。而當體驗與用戶無關時，營銷活動的效果將降低 83％。

因此，感謝條件邏輯！

條件邏輯（或「分支邏輯」）通過允許基于特定響應的附加指令——類似：「如果這樣，那么」，簡化了復雜的流程。

使用條件邏輯將不會顯示與用戶無關的問題，從而減少完成表單的時間，從而使他們不太可能放棄前面的任務。

是的，這聽起來像是常識，但是大多數表單都會向每個用戶（無論他們是誰）提出相同的問題。使用條件邏輯是雙贏的，因為通過明確定義用戶細分，可以捕獲更干凈，更有用的數據。

雙重編碼理論

我說樹時。您就會想到樹干、綠葉、樹枝。

我們的大腦就像這樣聰明：它把圖像和文字聯系在一起。

這是雙重編碼理論背后的關鍵原則，該理論指出記憶有兩個不同但相互關聯的系統，一個用于文字信息(「樹」)，另一個用于視覺信息(「樹干、綠葉、樹枝」)。

當某樣東西以兩種方式(圖像和文字)被「編碼」時，它被理解和記住的幾率比僅僅以一種方式(圖像或文字)被編碼的幾率要高。

換句話說，將單詞和圖像配對會使它們更容易記憶。兒童書籍充分利用了這一點。在設計表單時，有兩種方法可以將雙重編碼理論付諸實踐。

7. 信息可視化

我們的大腦處理圖像比處理文本快得多。使用圖標、照片、形狀等線索——無論什么有助于說明你的觀點——都會讓用戶體驗更加直觀。

表單設計應該是一致的，但這并不是說就不能加入一些小驚喜。通過使用非標準的界面元素——如可點擊的圖像和切換的滑塊——可以使表單填寫更加愉快和直觀。

8. 顏色

你知道嗎：用戶最初對產品的判斷有 90% 僅僅基于顏色？

實際上，根據營銷大師尼爾·帕特爾（Neil Patel）的說法，色彩是「購買特定產品的原因的 85％?！拐_的組合可以使讀者人數提高 40％，理解力提高 73％，學習能力提高 78％。

你不需要成為一名設計師來找出哪種配色方案和對比效果最好。像 Adobe Color CC  和 Paletton 這樣方便的程序可以幫助你選擇一個能反映你公司形象的調色板。

9. 讓表單更漂亮

我們是膚淺的生物，習慣于相信有吸引力的設計在其他方面也更好：更快、更智能、更易用。這被稱為「審美可用性效應」，漂亮的界面增加了我們的耐心和忠誠度，甚至讓我們更有同理心。

如果內容或布局不吸引人，38% 的人會停止使用頁面。換句話說，如果線上表單看起來不漂亮(也不容易填寫)，那就是浪費時間。

當然，一百個人心里有一百個漢姆雷特。但是一個簡單的界面、干凈的字體和時尚的造型絕對會贏得用戶歡心。

進度條效應

如果我們知道我們已經取得的進展，我們就更有動力去完成一項任務。特別是已經領先進度的時候，感知上的工作量會相應減少，最終達到超預期效果。美國教授約瑟夫·努內斯和澤維爾·德雷澤將這種現象總結為「進度條效應」——「當人們能看到已付出的努力時，會更有動力完成任務?！?

10. 以下是一些適用于表單的進度條效應的應用方式：

問題排列從易到難

如果表單里的問題按照從簡單到困難的順序排列(而且保持邏輯順序)，用戶將快速完成表單的初始階段。這反過來會觸發連勝效應：快速進步和動力感帶來的滿足感，讓用戶不愿意打破連勝。這意味著，當表單變得更加苛刻時，用戶會繼續堅持下去。

畫出進度條

隨時反映用戶的進度。用戶越接近目標，就越有可能完成。如果表單是多頁的，請指出還有多少頁要完成。

一份來自 Clutch 的研究表明 90% 的用戶希望在線表單能有進度條來管控他們的花費時間。

第四部分：問題、回答和分組

1. 用頭腦風暴討論題目

所有的表單的關鍵都是題目。特別是在頭腦風暴討論題目的時候，最好的就是從目標出發，倒推回來。

所以你的第一個問題就是：你的表單的目的是什么？入職表？反饋意見？研究表單？

盡可能地記下你希望從表格中獲得的信息。把它表達為題目(以問號結尾)，而不是靈光一閃。一定留足時間反復推敲。

然后，寫下一些可能的答案，這些答案可能會給你一些靈感。

最后，頭腦風暴討論這些題目，這些題目就會解答剛才提到的第一個問題。

作為調查后的回顧，寫下每個問題的回答百分比。將這些猜測與你的實際結果進行比較，會發現下一輪要注意的盲點。

這種回顧過程還有助于您的設計并節省您的時間。

關于板塊的科學

根據表單轉換率報告，表單類型直接影響表單的板塊數量。仔細考慮每一個板塊的每個問題。

現在，問問自己：你真的、確定、必須要問哪些問題？

多數情況下都不是必要的。但是，即便我們明白少即是多原則，但是真的有機會去用戶的腦子里一探究竟的時候，我們還是希望問題越多越好。

當然，這些問題的答案是很重要。但真的重要到失去用戶都在所不惜么？

你需要用戶的配合。但是每加一個板塊，他們的耐心就會失去一點。所以，在你把所有的題目和答案全列出來以后，能刪盡量刪掉?？紤]收集數據的其他方法，并考慮這個題目是否可以推導出來，或者以后再說甚至完全排除。

盡量避免可選問題。如果必須，請在表單最后列出來。

2. 正確地分組題目

將線上表單結構化是成功的關鍵。

在你經過頭腦風暴討論，修剪精煉得出了最終的問題清單后，就該組織他們了。用一個「主題」標題將它們組織成組和子組，比如說聯系方式，工作經驗等。

這樣一來，用戶不用去讀具體的問題就大概知道自己接下來要做什么。

3. 定義問題的邏輯序列

現在要考慮問題的順序了。按照經驗來看，主題相似的問題，就應該放在一起。

每一個問題，每一個板塊，都應該激勵用戶到下一步。大跨步似的前進會讓用戶困惑，所以要用一種一步一步引導用戶往前的模式。

用戶會通過調節對信息的流動有一種預判。比如說，「你叫什么名字？」應該在「你住在哪兒？」之前，而「介紹一下你的工作經驗？」應該再往后。

4. 決定「必填 vs 選填 vs 友好」

最好的做法是把你的表單只限于必填的問題。選填問題將毫無必要地延長表單并激怒用戶：「你從哪里聽說我們的？」 「你想收到營銷郵件嗎？」

不過對那些非強制性的但是友好的問題，將它們放在表單的末尾，作為可選的后續內容。這樣，他們會感覺不那么有侵略性，也不會影響你的轉化率。

5. 一次只問一件事

雙管齊下的題目會讓用戶覺得模棱兩可。而且——你已經猜到了——模糊的答案無法量化。

看看題目中有沒有用「和」，「或」。找到了嗎？如果有，把這個題目改成兩個。

題目越清楚，答案就越清楚。答案越清楚，數據就越清晰。

6. 提供便利

優秀的表單描繪了一條清晰的路線，通過線索、提示等引導用戶完成表單。路線越短，用戶完成的可能性就越大，所以盡可能地給用戶提供便利。

以下是比較有用的便利方法：

郵編索引

要求用戶填寫地址的時候，最好的方式是只讓他們填寫門牌號和郵編，然后使用郵編索引服務完成地址信息的其他內容。（譯者注：此條比較適用于國外。）

默認提示

默認文本提示是出現在表單字段中描述其預期值的淺色文本。只有在存在潛在歧義的情況下，才應該使用它。

字段標簽

字段標簽是出現在字段上面，關于問題性的文本。它經常都會出現，并且不應該用占位符提示來替代。人們常常為使用默認提示同時作為字段標簽，但卻引發了可用性的問題。

換句話說，你可以使用字段標簽，不用默認提示；但是不能在沒有字段標簽的情況下只有默認提示。

預設答案

大家都喜歡做選擇題。它們可以節省讀者的時間，并且易于評估。

你可以通過回答「是/否」、「單選」或「多選」來預定義答案。如果有一個你無法預測的答案，添加一個「其他」文本框讓讀者輸入一個自定義的答案。

搜索預測

在要求用戶選擇他們的國家、職業或具有大量預定義選項的其他內容時，搜索預測會減少所需的打字量(和認知負荷)。

第五部分：表單的受眾，目的以及環境

表單只完成了一般的工作。它是被動的，不是主動的。表單的效果依賴于填表者。它們需要從一開始就嵌入到框架中。

表單是交流的工具。需要兩方來參與。

因此，在設計表單時，你還需要從用戶的角度考慮……這從他們的目的和環境開始。

為什么要有人填寫你的表格？他們的目的是什么？把它們寫下來。

目的和環境息息相關，所以要讓環境在你的頭腦中具體化。他們在哪里以及如何填寫表格？在家嗎？在筆記本電腦上？在手機上？在地鐵上？

環境不僅僅是場景。關鍵是用戶能明白在他們的幫助下你的表單可以實現什么目的。

1. 知道你的受眾是誰

表單需要吸引目標受眾的注意力——那么，這些受眾由誰組成？

在泛泛人群中思考是沒有意義的。要集中你的注意力，集中在一個人身上——或者說，一個「買家畫像」比任何一個普通人群給你的信息都多。

試著描繪一個理想的用戶畫像，有工作、個性、家庭、希望和夢想。集中思考這個理想用戶群體。他們在哪里生活和工作？他們的觀點和價值觀是什么？他們與你的業務有什么關系？

如果你發現對這些理想群體來說什么是有意義的，你就離最終給你帶來高價值數據的那些問題又進了一步。

這些人就是你需要反復思考的人。這些人就是會給你答案的人。

表單視覺和結構

填表單肯定不會像過生日一樣充滿驚喜。

一致性是保持表單填寫體驗順暢的關鍵。一致就是指顏色要一致、視覺感受要一致、主題調性要一致。

你的公司形象是什么？什么短語和單詞能概括這一點？你的價值觀是什么？在 JotForm，我們注重包容性、友好度和腳踏實地——我們的語言就在傳達這些主旨。

當你定義了品牌調性后，在所有的表單中保持住——你的用戶應該感覺到他們每一步都在和同一個友好的人互動。

視覺一致性同樣重要。在整個表單中都應該用一種視覺風格(以后創建的其他表單同樣如此)。

2. 左上對齊標簽

Google 的 UX 研究人員發現，將標簽左上對齊會減少表單完成時間，因為它需要的「視覺注視」更少。

3. 避免將問題并排放置。

眼動研究表明，簡單的單列布局比并排放置的多列布局要好。

該規則的唯一例外是要求輸入日期（日，月，年）或時間（小時和分鐘）時，其中多個字段應在一行上。

4. 嘗試一頁一事

每頁一件事是一種心理技巧，定義為：

「將一個復雜的過程分解成多個小步驟，并將這些小步驟單獨用一頁來呈現?！?

本質上，用戶只需要關注一件事。一條信息、一個決定、一個問題要回答。

整潔的頁面鼓勵用戶繼續執行任務。

5. 用輸入框長度提示用戶

把輸入框的長度控制到正好能夠包含所有的輸入字符的長度（用戶可以看到填入的完整內容）。

輸入框的長度應該反映用戶預期輸入的文本量。郵政編碼或門牌號等字段應該短于地址行。

貝馬爾德研究所的可用性研究發現，如果一個字段太長或太短，用戶開始懷疑他們是否正確理解了標簽。這尤其適用于具有異常數據或技術標簽的字段，如信用卡背面的 CVV 碼。

表單設計中的錯誤和完成路徑

就像生活中一樣，填寫表格時有可能出錯就像生活中一樣，關鍵問題是發出錯誤信號并允許快速糾正。

6. 不要只靠顏色

十分之一的男性有一定程度的色盲。

當顯示驗證錯誤或成功消息時，不要依賴使用綠色或紅色文本(因為紅綠色盲相對常見)。使用文本、圖標或其他東西。JotForm Cards 用一個微動畫警告用戶，當出現錯誤時，該動畫會說「錯誤」。

7. 在同一行內指出錯誤

向用戶顯示錯誤發生的位置，并說明原因。
如果您必須使用驗證，請確保它是內嵌的(在字段的右側)，并提前報告錯誤。不要等到用戶點擊提交來報告驗證錯誤。但是同樣，內聯驗證不應該是實時的，因為這可能會在用戶完成字段之前報告錯誤。

8. 使用字段驗證

你需要一個電子郵件地址，你會收到一個沒有@符號的回復。你要求一個電話號碼，而你的回答中有一半位數不夠。

打字錯誤不應該成為表單可用性的障礙。

使用「字段驗證」來確保得到您需要的答案，例如，「答案必須包含__」

JotForm Cards 恢復錯誤輸入域名的用戶的電子郵件地址；約翰@ gnail . com 應該是 john@gmail.com。

9. 但別太苛刻

如果用戶回答的方式有很大差異(例如，用+12345678912、+44 12345678912、012345678912回答「電話號碼」)，請將其轉換為一致的格式。

第六部分：關于支付表單

什么是支付表單？

支付表單就是線上的收銀臺。它授權在線支付，驗證用戶的詳細信息，檢查資金是否可用，并確保你收到支付。

支付整合有很多優勢。他們幫助你 ：

• 銷售產品或服務；
• 在結算過程中進行復雜計算，例如增加稅收和運輸成本或減去優惠券；
• 呈現你的產品描述，如圖片、數量、顏色和尺寸選項；
• 收集固定金額的捐款和付款，或者通過訂閱服務保證周期性付款。

在設計支付形式時，遵循最佳實踐是至關重要的。以下是一些關鍵規則。

1. 限制付款步驟

Baymard 研究所分析了支付表單，發現支付過程太長或太復雜是放棄支付的主要原因之一。所以一定要分塊，分得越細越好。

2. 使用安全視覺提醒

當輸入敏感的細節，如信用卡細節時，用戶會對任何看起來可疑的東西保持高度警惕。最近的一項研究顯示，出于安全考慮，17%的購物者沒有付費就離開了頁面。

專業的支付形式讓用戶感到輕松，而任何看起來「不舒服」的東西都會讓他們感到緊張。這就是為什么你應該從頭開始構建支付表單時就保持謹慎——即使是最小的錯誤或不一致也會嚇跑用戶。

它還有助于在表單上啟用 SSL 來幫助保護數據。用戶知道所有的互動都是加密的，因此可以安心。JotForm 是最安全的數據傳輸方式:我們符合支付卡行業數據安全標準 (PCI DSS) 1級，并啟用了 SSL。

3. 清楚地解釋你為什么要求敏感信息

人們越來越關注隱私和信息安全。如果你要求必須填寫敏感信息，請確保使用字段下方的注釋文本解釋為什么需要這些信息。

4. 保存數據

讓用戶可以選擇保存他們的地址和支付信息，可以使這個過程更快、更簡單——尤其是在手機這樣的設備上。這同時也會給回頭用戶一種獎勵和忠誠的感覺。

5. JotForm添加支付集成的方式

• 第 1 步:添加你的品牌標志和定制風格。
• 第 2 步:使用鏈接按鈕輸入集成憑據，或者直接輸入。
• 第 3 步:添加產品圖像、產品細節，如數量、顏色、尺寸。
• 第 4 步:計算優惠券、稅金和運費。（你可以使用集成采購訂單來檢查通用付款字段創建的詳細信息和選項(這不需要任何憑證，因為它不會創建真正的交易)。你可以查看 Sofort 集成指南作為示例，了解整個支付過程。）
• 第 5 步:寫一封私人感謝信——自動回復郵件。

一切就緒?，F在你可以在網站、博客或社交媒體上輕松銷售你的產品。當你完成表單后…萬歲！完成了！但是……等一下。你的表單可能已經完成，但現在還不是發出去的時候…

還有最后一個步驟。

6. 發出前，測試您的表單

我們都有盲點。所以保持謹慎很重要，畢竟數據的質量決定了表單的成功。因此，需要事前檢查一下調研題目，確保答案選項的完整可靠，沒有任何遺漏。

把表單發送給家人/朋友，并要求他們記錄填寫表單需要多長時間，以及對這一連串的問題他們體驗如何。這也將有助于你下次評估表單的設計。

文章來源：優設

畫插畫可以用哪些構圖方式？他們的優缺點是什么？本文總結了9種常見的構圖方式。

框式構圖

對角線構圖

向心式構圖

對分式構圖

三角構圖

垂直線構圖

緊湊式構圖

S型構圖

三分式構圖

其中，個人認為，最為核心的是第二點：多體驗原型或產品，直到自己覺得周到為止。

文章來源：站酷

引子問題：

從眼睛進入的視覺信息，占大腦皮層中形成視覺的視覺信息的百分之多少？

這個是視覺通路的說明圖，是認知心理學的一個知識。外界信息從眼睛到LGN之后，會往兩個方向走，一個形成腹側通路另一個形成背側通路。也就是一個形成“你看到是什么”，另一個形成“這個東西離你有多遠”。

這是的研究，就是主視覺皮層那塊區域并不像我們想象的一樣，是一個簡單的、從下往上的一個回饋。它真正來自LGN的信息輸入只占到10%，LGN從眼睛獲得信息也不超過10%。你可以想一下眼睛到LGN，到大腦皮層形成視覺的過程。大腦皮層中的視覺信息90%是它自己產生的，只有10%是來自LGN。LGN當中視覺信息的90%由大腦皮層自己產生的，只有10%來自眼睛。

做一下乘法，你就會發現，即使是眼睛看到的數據信息完全進入大腦皮層，它至多只能占到10%，如果他不是至多10%的話，有可能眼睛實際進入大腦皮層的數據信息只有1%。也就是說大腦主要是在生產信息，而不是在接受信息。所以你應該把你的精力用于研究那90%左右的信息是怎么產生的、它是什么樣的規律。

1. 《UI設計與認知心理學》一書的主要內容和結構

本書的結構第一從設計實現角度來講比例構圖、構建頁面的具體結構、柵格系統、組織原則等等。

第二部分是主要的部分，從第八章一直到十六章是從認知智能的角度，就是你怎么處理信息的角度去做這個交互設計。第十章這里頭有一個叫模因論，模因論就是把模因類比成基因。

第十三章和第十六章寫的就更抽象一些，第十三章主要是講人工智能的基礎，第十四章是講應用，第十五章就是和今天話題有相關的地方，就是VR、5G這些，第十六章是我研究生畢業論文，我個人認為沒寫完，又寫了一遍，是從心理學角度去闡述，為什么我們設計和國外的設計是不一樣的。

2. 舉例認知與UI設計

我們先有一個感性認識，認知與UI設計有什么關系？這其中有兩點。

第一個就是古騰堡定律與內隱記憶。古騰堡定律，大家都聽過吧，（注：該法則描述了一個理論：人的眼球移動規律趨向于從上到下，從左到右，在視覺區域中，左上角通常為視覺起始點，右下角為視覺終點，而右上和左下是視覺落盲點。）也就是F形閱讀。這是尼爾森·諾曼在2006年產出的一個結論，即人瀏覽頁面的方式會形成一個F型的路徑。

但是有個公司叫EyeQuant，他們是做一些眼動儀及其研究的。他們統計了大概是15萬張前六秒人的注意力的熱區圖，它形成了大概這個結果。

EyeQuant就說尼爾森·諾曼的結論可能不太對，它不是F型的，他給出了很多結果。

你會發現這個圖很多時候是居中或者是中間等等。于是EyeQuant公司的研究結論就是：有太多因素影響眼球運動，不用把F型法則當做金科玉律。他們在官網上發了一個帖子，這是他們這結論，底下是論文的網址，大家也可以自己看一下文章，判斷一下EyeQuant說的對不對。

我們來了解一下古騰堡定律，如果大家不了解，我先來解釋一下。古騰堡是一個德國人，他發明了獨立印刷術，他認為人的閱覽瀏覽頁面的規律是從左上到右下的。左上是第一注意區，然后是右下，另外兩個區域是最容易被人忽略掉的。

上方是熱力圖，大家可以看一下，這兩個圖其實是有關聯的，熱力圖和古城堡定律大家注意看，最關鍵的點都是左邊。比如當你做web導航的時候，你一般會把導航放到左上角，很少有人放在右上角。跟我們閱讀習慣是相關的。讀書寫字都是從左開始的，所以熱力圖表現出來并不是徹底的居中或者是在右下，左邊還是一個很重要的位置。第二點是2006年的互聯網產品形態和現在互聯網產品形態是不同的，過了十幾年了，拿現在的數據說以前的事情，有效性是有限的。

另外，有幾個反例它是沒法解釋的。大家有沒有關注過阿拉伯語的網站，你會發現它的導航是倒過來的。我看了之后我以為是有個鏡子，它其實是正確的，因為阿拉伯文是從右向左書寫的。通過以上，我們可以認識到古騰堡定律其實還是起作用的，它是根據你的書寫的方向形成的。

有關網頁布局的規律，應該是：同時受到古騰堡定律以及產品自身因素的影響。那么EyeQuant公司做的那個研究有沒有價值呢？是有價值的，它確實是往中間偏了，但是這是和產品的特性有關，因為06年之后越來越多電商的頁面，包括純展示的東西越來越多了，居中構圖的情況也越來越多，很多吸引注意的圖片放到中心位置了，所以它會影響整個觀感。

古騰堡定律在認知心理學里實際就是內隱記憶。內隱記憶就是：無法通過有意識的過程而接觸的知識。舉個例子，騎自行車大家都會吧。如果我跟你說有本書教騎自行車，你看完了就能學會，這不可能對吧，你需要自己練習騎。你學會了之后，當你要教別人，你也沒辦法通過語言告訴他，你只能說你必須得練，這個就是內隱記憶。

生活當中有一個體驗，我相信所有人都會有，就是不管是用是安卓還是iOS都會有一個問題，就是比如你把A左邊的應用刪了，iOS系統會讓后面的應用自動補位，它會把A應用推到第一個位置，結果就是你每一次想要打開A應用時候很容易點錯。這也是內隱記憶在起作用。

這是內隱記憶的分類，有四種。騎自行車與古騰堡定律和第一種程序性記憶比較相關。第二種是知覺表征系統，大家聽說過無意識設計吧，這就和知覺啟動是相關的。條件反射就不用說了，巴甫洛夫的狗玩搖鈴它就流口水。非聯想學習中的習慣化和敏感化是什么意思呢？就是比如說你家里有一個空氣凈化器，打開的時候你會感覺它發出的噪音很明顯，但是過一段時間你又不太注意它的噪音了，就是習慣化。

敏感化是什么呢？煙塵和污染的空氣非常刺激呼吸道，所以一旦霧霾 ，呼吸道不好的人就會非常敏感，非常難受。比如說北京的霧霾，一開始可能不太注意到它，但是在北京待十年的結果是只要看天，我就能估算出這個pm2.5是多少值，正負不超過50，非常精準。比如一看今天這個天氣情況，我猜污染指數有150，一查手機大概130左右。這就是敏感化，你對這個刺激的信息處理會變得更快。

畫表情的秘訣，這個是其中一個例子，它涉及到一塊腦區叫梭狀回面孔區。大家可以看一下，這些表情有一個什么樣的共同點。

大多數的表情是沒鼻子的，或者鼻子特別小。再看一下這兩張圖片，有什么明顯差異么？

這兩個照片差異非常明顯，這個叫撒切爾效應。這時候你感覺還行，兩個人可能眼睛不太一樣，但是當把照片導過來的時候，反差就特別大，你就感覺右邊那不是個人，對吧？

這叫面孔倒立效應，只有正立的時候，才能有效識別面孔。就是必須得形成倒三角你才能有效識別一張面孔。鼻子并不參與三角區的方向判定。

你會發現插座也會被當成表情，面孔倒立效應的基礎是部分神經的特異化，部分神經元是專門用來處理面部信息的，識別人的情緒對人的認知是很有作用的?？焖俚嘏袛嘁粋€人的情緒，對社會化動物來說非常關鍵。有一塊腦區專門處理人臉識別，識別情緒。

以上大家可以形成一個大概印象，就是認知心理學可能會和你的設計相關聯，也說明了認知科學對UI的指導性，這是我的一個觀點。右邊是它的邏輯事實，書中盡量去證明這個觀點。

3. 認知科學對UI設計的指導性

第一，廣義的設計概念。想證明認知科學對UI設計的指導性，得先說清廣義設計概念。我對它的定義是解決問題的目的與恰當方式的綜合。

你想解決這個問題是吧？方式的綜合前面還有一個恰當，我強調這個恰當。

第一個先說他目的性，比如說你設計一個汽車、設計一個界面、設計一個流程，是有目的的，不是無目的的。第二是設計是解決問題的恰當手段，設計是你要找一個恰當的解決方法。比如你累了怎么辦，你可以造個沙發、設計個躺椅。還有各種各樣的方式，哪一種方式是最恰當的方式，是設計出來的。這都是各種各樣能解決你累了的一個手段，但是你一定要找到那個最合適的。

這個之后我們還要定義一下UI的概念，這也是我個人的觀點和定義。就是解決虛擬界面信息傳輸問題的目的與恰當方式的綜合。

我是交互設計師，我沒有用比如說交互或者視覺這個概念，因為我認為這個概念有些窄，并不是說我區分不了視覺設計師和交互設計師。別人問你如何區分交互設計師和UI設計的時候，你就用一句話就能區分：你和界面之間有沒有一次以上的信息互動？如果有，那就是交互要介入，如果沒有一次就夠了，基本就是視覺的活。

傳統設計的目的、主題和體驗公式。首先傳統設計處在兩個過程的中間，第一個是“人-自然“中間，也就是人造物，就是你要通過你設計的工具去改造自然。種個地、開個礦等，你設計這個東西是在告訴別人怎么用。比如說不能把門把手放到轉軸的內側，他一定放到轉軸的外側，這個門把手就是在提示我們怎么去操作這門，怎么推這個門。這是基于材料及其加工工藝的造型理論。

另一個就是設計處在“人-人造物-他人“的認知過程中間。它所具有的特性是示能性與自我定位。比如說我穿衣服，你會發現我沒有一個紅色和綠色的衣服，我喜歡穿藍色，黑色等，這實際是對自己身份認識的一種構建，向別人傳達出一種信息的設計物。傳統設計都會包含這些信息，你住什么地方，穿什么衣服，看什么書，都會有這兩個作用。

這是史上特別著名的穿絲襪的潮男叫路易十四。你會發現這個東西就是在兩方面表達出傳統設計的作用，第一個就是示能性。高跟鞋的形狀一定是后邊開口前面是收口的，因為你要把腳放進去。高跟提高你的身高。這個執杖寬頭的地方是用來放手的，窄頭的地方是用來杵地的。傳統設計的主題是基于材料及其加工工藝的造型理論與設計實踐，這是我的觀點。我本科是學工業設計的，讀研究生的時候也是學工業設計的，我發現我做的所有的事情都是圍繞造型和工藝的造型理論。

舉幾個例子，輪胎演化過程、手機演化過程，你會發現材料的變化，造型的變化。

再來看一個深刻的例子。

這是一個著名的女設計師設計的，她為什么能做成這個東西？是因為她做這個東西的時候，出現了新的數學工具來幫助建筑造型，很多原有的建筑學派不愿意用這套東西，但是她非常激進，要用的數學工具來處理這個造型，才能做成這個建筑。

包括大家現在坐的車，你會發現曲面的車越來越多，車越來越漂亮，是因為數字化之后，加工的工藝更好了，能做出特別漂亮的曲面。原來為什么紅旗特別貴？因為那是老師傅用錘子敲出來的，不是像現在數控技術就把它弄出來的。勞斯萊斯也都是敲出來的，所以很貴，想做很好看的曲面成本極高，但現在就成了很容易的一個事情。

傳統設計的體驗公式就是E=e*n，e是衰減的。e就是每一次使用的體驗，比如說手機，你拿到手機的時候是一個體驗，是一個e，用了多少次，n就是幾。比如說我做一個椅子，用一次是e，用了多少回，它的乘積是整個體驗。n是不會變的， e是唯一的關鍵，而且他每一次都一樣。所以傳統設計里對它的造型會非?？粗?，到底表現出什么東西，好不好用，會特別關鍵。

我再說一下UI設計的目的、主題和體驗公式，UI設計的目的和傳統設計不一樣的地方是，它示能性更主要，自我定位更次要。我舉一個例子，馬云想用支付寶，不好意思，他也得跟我們用的一樣。不管多有錢的人都好，還是只能用Facebook不太可能為這個人單獨設計出一款來。也就是說UI設計是絕對平等的，只能說買個皮膚，你可以花錢，但大多數情況下，它的主體功能是不區分消費能力的，所有人用的支付寶都是一樣。不管這個人多窮、多有錢。

所以UI設計更主要的是通過界面來告訴你這個東西怎么用，是比自我定位更重要的。所以我們主要考慮的是界面能不能告訴用戶是干嘛用的，怎么用，這是最關鍵的。這和傳統設計不一樣，傳統設計因為有材料成本的問題，一定會涉及到選擇和自我定位的關系的問題。

UI的設計體驗公式就是E=a*b*c*…*n。這里為什么用乘法而沒用加法呢？大家知道有一個叫迷失度的一個概念，它是形容網頁體驗中，如果a是零的話，后面做再好也沒有用。比如說用戶找不到入口，到界面這卡在這了，這界面如果是0.1，那后邊所有的轉化率就全是0.1乘以這個系數。所以它并不要求每一個頁面達到百分之百，但是它強調整體乘積一定是一個高值，比如說這個頁面的轉化率提高了，提高3%，下一頁面降低5%，它是一個乘積的關系，每個頁面都很重要，它是一個拉長的一個體驗公式。最后乘以一個使用次數。

我們再回到認知心理學，我家有三本到四本心理學的書，來看看他們每個人是怎么定義認知心理學的。

斯騰伯格所著的是一本賣得比較好的書，大家可以看一下，認知心理學規定了研究范疇是什么，這是斯滕伯格寫的，他認為認知心理學就是研究人如何覺知，學習、記憶和思考問題的。

下面這本書是三個人合著的，他們壓根沒有給認知心理學一個明確的定義，只是提到這是有關于思考者的心智的科學。但是他說的不是很具體，而是寫了一堆研究對象，你把它抽象一下，會發現關鍵詞實際和斯坦伯格的是一樣，覺知、學習、思考、語言。

再來看第三個，艾森克和基恩干脆就沒定義認知心理學是什么東西，他說現在這個東西是一個特別廣泛的研究領域。

這三本書里頭有兩本書的第二章叫認知神經學，有一本是在第一章的第三部分叫認知神經學。我原本為我的書取名叫《認知與UI設計》，就是這個原因。很難把認知心理學和認知神經學切得特別開，它們的聯系實際是很廣泛的。

UI設計圍繞覺知、注意、記憶與識別會有一些簡單的例子。

視覺組織原則，這個是格式塔閉合原則，這是從神經學層面解釋格式塔的閉合原則。就是有一個未封閉的圖形，大家可以看到左邊，你知道他是未封閉的，包括有那種特別的那種三角，有兩個半圓，三個半圓，我們會把它腦補成一個閉合的圖形，這個是有神經學基礎的。

有個叫赫布定律，這個是什么意思呢？兩個神經元如果彼此之間互相刺激，他的神經的突觸就會變多，它表現在除了突觸增多還有髓鞘增厚，都會使神經之間的聯系變得更緊。

細胞集合的定義就是，人對信息整個識別過程是這樣的，過去你接受過原始刺激，你會記住它，比如說右邊這個完整的圓，你第一次看到這個圓，會形成刺激，再看這個圓又形成刺激，它會形成一個完整的赫布集合。等你再看到左邊這個不完整的圓的時候，就是一個不完整的刺激，它會激活原來形成的赫布集合，讓你產生錯覺認為它是原來的完整的狀態。識別和記憶是一體的。記得越少，識別越快。

意識和注意的模型與用戶體驗是相關聯的。真正進入到意識的信息是少之又少的。因為人的視覺能看到的只是可見光。在一個很長的光譜中，視覺信息只占這么一點。人對視頻信息的感知還有個體偏向，人對紅黃藍的敏感程度是不一樣的，它只對部分色彩更敏感一些，更窄。

信息有一部分是無意識的，比如說心跳的聲音，在環境特別安靜的時候，你能聽見心跳的聲音，但是當你注意力在別的地方時，你會過濾掉它，心跳聲就不進入你的意識了，但它實際是一直在發生的。

你要建立一個概念，就是用戶能注意到的事情，是整個界面里頭很小的一部分，大部分他什么都記不住，因為他沒空。短時記憶的容量是非常少的，比如說讓你記電話號碼，一般大家都是以443或者344地記，會把它切割成幾個塊，這樣會更容易記一些。

下面這是《藝術與視知覺》這本書里的一個實驗。左上角的圖案是他們用來做實驗的圖。你會發現這個圖是一個特別擰巴的形狀，首先它是不閉合的，不是完整對稱的，設計師看到會非常不舒服。這個圖是怎么做實驗的呢？就是把這個圖給你閃一下，就給你0.2秒或者0.3秒?？赐曛笞屇慊貞?，回憶這個圖是怎么構成的？右邊這七種是大家回憶的，它有一個共同的特征，就是把它規律化。這個不是有意進行的，是你與生俱來的能力。把一個不規則的東西記成一個規則東西，是你本來的能力。

我們再看一下，我們把這個時間拉長，你會發現很有趣，第一個是字母A的演化。這原來是頭牛，公元前1800年恐怖谷銘文里的文字，長得像左上角第一個。后邊的人畫牛很費勁，識別它、記憶它很費勁。就把它簡化，簡化，最后就變成拉丁字母。每一次他都在丟失視覺信息，每次都在不停的丟失識別，使它更規整。26個字母基本都是按照這種原理出現的，只不過它是一個特別長時間，跨度上千年，變成這種結果。

第二個是中國的魚紋，這是李澤厚的書《美的歷程》里的截圖。你可以發現魚紋的演化過程也這樣，開始魚紋真的是條魚，后來這個魚變成對稱性了，上下對稱的。到最后它已經不是魚了，花了幾百年時間變成這個樣子。

谷歌的logo也是一樣的規律。不停地進行簡化，不停地進行識別。識別和記憶是一體的。每次記憶時一定會丟失信息，不管記什么東西一定會丟信息。記憶的東西比看的東西更少，當再識別的時候是拿剩下的東西來識別。這也是和人的認知相關的。

4. 科學研究的范式。

要想研究一個東西，得有一個合理的思維的過程，才能產生正確的思維的結果。思維能力和思維形式會決定思維產出。

我們看一下概念和命題，這是柏拉圖的三段論。我舉個例子，大前提是希臘人是勇敢的人。小前提是雅典人是希臘人，結論是雅典人是勇敢的人！這是一個特別標準的三段論推理，大前提小前提，不停地縮小集合的范圍，得到這個結論。

但是問題是什么？這個語境里頭我沒有解釋這幾個概念：雅典人的概念是什么？如果你注意土耳其的地圖，你會發現愛琴海那一塊靠近土耳其大陸的很多島是希臘的，特洛伊現在應該是更靠近土耳其一些。雅典人的概念就是伯羅奔尼撒半島上一個地區的人叫雅典人，但整個希臘實際是一個特別寬泛的概念，它并不是原來的半島，而是把周邊很多島嶼，甚至靠近羅馬的島都擴到希臘地域里，所以這是一個問題。希臘人的概念又是什么？我也沒說。我盡管做了推理，我沒說勇敢的人的概念是啥。有個壞人在行兇，你用聲音制止了還是用行動，能不能作為判斷這個人是否勇敢的標準？在你說出一個推理命題的概念的一剎那，實際上已經把這個東西表達出來，但是在這個命題里是沒有說的。

我說得有點繞，其實我想表達的意思是：做推理的時候，推理里的概念，你是不可能在這個推理里頭說出來的。你想把這個概念進行規定的時候，還得通過其他語言和其他概念來說這個概念。比如說我們學的數學幾何，是基于歐幾里得的五大公理，五大公設。有了這個東西，才有推理和判斷的基礎，它是先于命題存在的。如果不對UI進行定義，如果不對設計進行定義的話，我寫這本書就是一個很扯的一個事情，因為并沒有形成自己的觀點和基礎。只有形成觀點和基礎了，才能圍繞這個東西進行推理，哪些是合理的哪些是不合理的。先有概念和命題，才有后邊理論和假說。

要判斷一個理論靠不靠譜，需要符合邏輯三恰。

第一個要邏輯自洽，就是你不能自己打自己的臉，你需要自圓其說。事實與邏輯相符，就是一個觀點在你的學說里是兼容的，不能出現邏輯矛盾。

邏輯它恰是什么呢？你提出這個理論和其他理論不能產生矛盾，除非你能證明理論錯了，或者在某些條件不適用，這個理論才是靠譜的，你不能和原來既有的公理產生沖突。

邏輯續洽是什么？就是新的場景、新的案例用這個理論還能解釋的通滿足這三條才是好理論，缺一條都不行。

5. 視角

這一章是從邏輯的視角去看一看，這套理論對不對。從認知的角度考慮設計對不對。認知角度本身對不對。

第一個叫邏輯自洽，在認知理論內部沒有矛盾。

我舉一個案例。這里有兩個圖，大家第一眼看上去它是怎么構成的？我用等式表示出來。會有人第一眼看上去認為它是最上方的方式或者是最下方的方式構成的嗎？沒有人會說這個圖形是用這兩個更復雜的方式構成的。但是你想沒想過，為什么你第一眼看上去就是按中間這兩個等式的方式構成的。因為這樣理解認知成本，如果把一個你沒見過的東西或者一個復雜的東西展示給你看，一定是按照你的記憶，還原成你接觸過的最簡單的一個構成。它會降低你認知的成本，如果記成奇怪的形狀，一定會使你記憶成本更高。

第二，認知一定是要符合演化論。

人們對演化論的誤解之一，就是認為越快越強越好，其實不是，而是適應。可能你更強、更聰明、更快，但是適應不了環境。

比如說為什么色盲基因還存在？

男性里頭大概有7%-10%，女的還少一點。按理來說我們應該認識更多色彩，為什么色盲還存在？外界信息變成視覺信息主要是靠視錐細胞，它比較密，是在中凹附近。眼動追蹤的時候，也主要靠中凹移動來看東西。視感細胞對色彩并不敏感，但是對明暗敏感。色盲在夜間視力很好，比如說晚上要偷襲獵物，或者是偷襲敵人，有色盲的部落會派出這些人，這些人夜間視力更好，會給種群帶來生存優勢。所以色盲基因沒有消失是有意義的。非洲有一種鐮刀形紅細胞貧血病也是一個案例，擁有這個基因的人不容易得瘧疾。但是如果沒有瘧疾情況下，他容易貧血、容易患各種各樣的病。

現實視角的邏輯續洽，第一個就是能預測新的設計趨勢，第二是解釋新的實驗現象。

第一個是扁平化是趨勢而不是潮流。這個用左上角的一個圖一下就能解釋清楚。雞尾酒的杯子一定是透明的。我們做的界面很多時候就是那雞尾酒的杯子，大家能理解扁平化是什么原因了吧？因為網速越來越快了，各種各樣酷炫的東西越來越多，信息量越來越大，就相當于雞尾酒里有顏色的酒，顏色越來越多。如果用一個不透明的杯子，或者透明度不夠好的杯子，看不出里頭的顏色。所以扁平化是一個趨勢，不是潮流。

這是我前兩天看到的一個帖， 2019年發的一個論文，叫圖標樣式對可用性的影響。大家可以自己去翻這個論文，很有意思。

測試結果是：最不易識別的是最右邊這組。中間是識別度比較高的，這個解釋特別簡單：過度簡化導致識別困難。意思是簡化信息的時候，不是一減到底就是好。比如說前面的例子從牛到A的過程，你不能上來就給埃及人拿了一個A，他不認識。Instagram改版為什么受到熱議？因為它突然之間扁平了，沒有漸進過程，咣嘰就變成一個特別扁平的圖標，它的紋理和它的圖形都發生了變化，所以識別上會特別不舒服。我舉過一個例子，比如說你慈祥的老母親整成了張柏芝或者是高圓圓，你一定不會認為這是一件好事，你會感覺很難接受。

第二個測試結果是這次識別度高的是右邊的，中間的識別度是低的。測試結果是多數面型icon識別比線型icon更容易識別。這個是格式塔的描述方式，有陰影的圖形只在內部成立，外部行成不了輪廓。線性圖形則正好相反，是兩向輪廓。

比如說我們看蘋果圖標，你不管它是從第一版還是到最后一版，他都是面性圖標。

因為蘋果是個球，它是個實體，這個輪廓在蘋果內部成立，就類似于這種感覺。后邊是有陰影的，有外部的，因為你要聚焦，后邊東西會虛化掉。它只在內部成立。

面形圖標普遍比線性圖標識別要快，只有三個反例，只有三個反例需要解釋。

第一個圖，咱先不看虛擬的，你會發現這兩個圖標線性識別度高，原因是因為它表面有條紋，這兩個圖中圾桶和鑰匙都有條紋，所以用線性來表達的時候，效果更好。其他圖標的實體都是曲面，不是條紋。沒有參差不齊的邊緣，而是曲面，是單向輪廓形成的。因此線型圖標更容易辨認。

感受野是人的視錐細胞和神經節細胞的一個聯系，不管刺激中心區域、刺激整體、刺激邊緣都會有反應。和感受野關聯的是神經節細胞，人類眼睛有很多神經節細胞，但這些細胞不是完全均等的點，而是一組點圍繞一個中心形成一個組合一樣的結構，外邊一圈組合，中間有幾個組合。

下圖的這個就類似視網膜上的結構，神經節也是類似這種結構。當環境同時變亮的時候，刺激比較弱。同時變黑的時候，刺激也比較弱。只有在交界點的時候，反應最強烈。想象一下，當我們看到一個物體的輪廓的時候，細胞對它的反應最大，就形成一條邊。這個實際上就是卷積核，人工智能卷積核就是模擬感受野形成的一個原理。

內積就是矩陣內的數字一個一個互相乘，乘完之后形成一個結果。卷積核模擬感受野的原理是：數字矩陣就相當于一個卷積核從最左邊一直掃到最后一排，會形成不同的數值。比如說這個是我們要看的圖像，比如說黑的會計算成1，白的會計算成0。用卷積核掃一遍就相當于在模擬人眼睛看到的東西，黑白區域之間就會形成一條邊，就是我們所看見的輪廓。

這就是我們眼睛看到東西的原理，比如說我們現在做視覺識別，也是用這種特別簡單的技術。卷積核實際是模擬人的感受野。

關鍵點是神經學是怎么解釋面形圖標和線性圖標的不同的。當你看到全亮的東西和全暗東西的時候是有差異的。卷積核掃一圈之后，計算機會認為這個里頭的東西和外頭東西是一樣的。對它刺激是一樣的。所以只對邊緣有認識。但人的神經比較特殊，它自帶一個數值，它能識別出暗和亮。所以當你看一個面形圖標的時候，你對輪廓里面黑色部分的認知和對輪廓外白色認知是不一樣的，這叫單側型的輪廓，而不是雙側型的。當你看到線性圖標的時候，類似于計算機的感覺，但是你看到面形圖標的時候，是人的感覺。

文章來源：UXren

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在我看來，界面設計的視覺層面主要可以分為三個維度來解析：信息傳遞、視覺美化、創意創新。

本文對幾種常見的異常狀態進行設計總結，其中介紹了不同異常狀態的表現形式以及我們應展現的設計狀態與規范。

異常狀態多在特殊場景下出現，比如服務器異常、網絡異常等，因為異常狀態出現的概率是較低的，所以異常狀態也常常會被忽略，等到實際碰到的時候才會意識到原來還有這種狀態……

作為交互設計師，在完成主流程設計后，也應該考慮到異常場景。

從全局性出發，我們可以預先考慮到產品將會碰到的異常狀態，針對不同的異常狀態制定相應的設計規范，在后續的設計需求中直接復用即可。

下面對幾種常見的異常狀態進行設計總結。

一、網絡異常

1. 原因

網絡異常的原因主要有以下兩種原因：

（1）網絡連接權限

針對某App的網絡連接權限可以通過手機進行設置，可設置為關閉應用使用數據，或者只允許應用在WLAN下使用，或者允許應用在WLAN與蜂窩網絡下均可使用。

所以以下均屬于網絡異常的情況：

• 關閉應用使用數據，在流量或WI-FI環境下打開App
• 只允許應用在WI-FI下使用，但在流量環境下打開App

（2）網絡連接狀況

在斷網（打開飛行模式）、弱網（手機信號差）的情況下， 也無法正常獲取數據。

2. 處理方式

當網絡異常時，用戶點擊進入新頁面或在當前頁進行操作時，App會通過異常狀態缺省頁或交互反饋來告知用戶當前異常狀態和解決方案。主要分為兩種情況：

（1）當用戶操作進入App新的頁面時，常以缺省頁的形式提醒用戶當前網絡異常。當應用檢測到有可用網絡時，缺省頁將自動刷新頁面內容。

比如網易云音樂在無網絡連接下，進入新頁面時，缺省頁以簡單的文案告知無網絡的基礎原因，通過查看詳情來告知用戶解決方案以及引導如何解決問題。

美團、騰訊視頻等，引導用戶檢查網絡權限設置和稍后再嘗試刷新頁面，稍后再試是因為弱網環境是暫時的，比如在地鐵上高鐵上或者某處手機信號接收較差的地方。

（2）當用戶點擊操作當前頁面時，比如上拉加載頁面、下拉刷新頁面，點贊、關注等操作時，常以toast或對話框的形式提示用戶。

比如網易云音樂，網絡異常情況下下拉刷新或上拉加載頁面均進行對話框提示，并引導用戶檢查網絡權限設置。

美團外賣，無網絡連接環境下，在我的訂單頁面進行評價操作，會進行toast提示。

二、流量警告

前面說完網絡異常的設計規范，接下來就不得不提到流量警告的場景。

對于需要消耗大量流量的應用：

（1）在流量環境下進行需要消耗大流量的操作，比如播放/下載音視頻等，頁面會進行流量警告。比如網易云音樂在流量環境下打開MV。

（2）在WI-FI環境下切換到流量環境時通常應用會主動暫停進程并進行流量警告，并在頁面上告知用戶原因，讓用戶選擇是否繼續進程。

比如網易云音樂、愛奇藝、芒果TV、BiliBili等音視頻娛樂App，在以上2種場景下，在視頻畫布上進行告知讓用自己選擇是否繼續播放，同時也提供按鈕入口讓用戶辦理業務可免流量進行播放。其中，芒果TV和BiliBili的繼續播放按鈕還貼心地告知了用戶將要消耗的流量值。

對以上兩種場景的處理方式進行歸納，均為流量警告方式。

三、網絡異常和流量警告適用場景快速查詢

總結完網絡異常和流量警告的設計規范，我們知道其中影響因素包含：網絡連接權限、網絡連接狀況以及網絡環境的變化，下面做一個小總結，以便快速查詢。

在總結之前強調一下，網絡權限設置是針對某App，連接Wi-Fi和流量是針對手機（所有應用）。以iOS為例，設置截圖如下：

情況一：當前網絡環境不變化

情況二：當前網絡環境發生變化

針對以上情況，表現狀態為“網絡異?！保瑒t參照網絡異常的設計規范；表現狀態為“流量警告”，則參照流量警告的設計規范。

四、服務器異常

服務器出錯的情況是較少出現的，若出現服務器異常，其異常的時間也較為短暫。

一般不提示具體原因，處理方式為進入新頁面的話則以缺省頁（文案或是文案+插畫）的形式進行提示+重試按鈕，例如，進入小米金融貸頁面時服務器出現異常，缺省頁提示錯誤原因同時提供重試按鈕。

點擊操作的話則以toast或對話框的形式進行提示并重試，比如下圖的段友app，服務器出錯，刷新頁面后進行toast提示；前段時間超級火的zao應用，朋友圈火爆傳播，一度造成服務器訪問過載，制作視頻的時候應用給出了對話框提示。

五、加載失敗

1. 原因

在數據加載過程中，導致異常的原因可能是：
1、網絡異常導致加載失敗

2、服務器請求數據失敗導致加載失敗

2. 處理方式

1、如果是因為網絡異常導致加載失敗，處理方式參照網絡異常的設計規范。

2、如果是服務器請求數據失敗，處理方式參照服務器異常的設計規范。

六、空狀態

1. 原因

空狀態就是指頁面當前無內容，主要在以下場景下會出現空狀態的情況：

1. 無權限，某些界面和功能會針對不同的角色設定不同的使用權限，無權限訪問的頁面會出現空狀態的情況
2. 搜索無結果，搜索無相應結果會進行空狀態提示
3. 初始內容為空，例如無瀏覽記錄、無收藏、無購買記錄、無訂單記錄、無下載記錄等
4. 內容被刪，若內容允許被清空，內容清空后會回到初始前的空狀態

2. 處理方式

當前頁面為空一般會提示用戶當前頁面為空狀態，同時也可能會做適當的引導。

針對空狀態的場景，主要采取以下幾種設計原則：

（1）用戶無權限

一般在B端產品中會碰到這種場景，通常來說，若用戶無權限訪問某功能模塊的話，處理方式一般是將該功能模塊對用戶進行隱藏。

若有其他原因不能隱藏對應功能模塊，處理方式為缺省頁面（文案或是文案+插畫），但文案要足夠明確，告知無權限的用戶該如何處理才能訪問，一般是聯系管理員添加權限。

（2）搜索無結果
搜索無結果的處理方式一般有兩種處理方式，一種是缺省頁面（文案或是文案+插畫），另一種是在第一種的基礎上加上相關推薦。具體用哪一種根據設計目標來決定。

比如網易云音樂搜索音樂無結果直接用文案告知。豆瓣搜索書影單無結果以插畫+文案的形式展示結果。美團搜索不到相應的內容，應用直接推薦其他商家刺激用戶購買。

另外也有應用會添加一些引導操作收集用戶數據來優化搜索，比如微信讀書找不到相關的數據，在頁面的底部提供一個入口讓用戶填寫書籍名稱和作者，基于用戶的反饋數據，微信讀書在后續書城書目的收錄工作中，就可以優先收錄用戶搜索率較高的書籍了，在優化搜索的同時也提供了用戶反饋訴求的入口。

（3）初始內容為空

需要用戶進行操作產生內容的頁面，初始狀態一般為空，和搜索無結果的處理方式類似，有2種處理方式，一種是缺省頁面（文案或是文案+插畫），另一種是在第一種的基礎上加上快捷入口或推薦內容，其目的都是在于引導用戶進行操作從而產生數據。具體用哪一種還是根據設計目標來決定。

直接用缺省頁面告知方式上，例如網易云音樂，個人未發布相關動態，該動態頁面直接用簡短的文案告知用戶暫無相關動態。

提供快捷入口上，比如微信讀書，用戶未加入書籍到書架時，進入書架頁面，會有一句話文案引起用戶共鳴，另外附上找書按鈕方便用戶快捷進入書城進行找書。

如果通過用戶瀏覽記錄和搜索行為等能夠分析出用戶的興趣愛好，進行精準推送，那在空狀態頁面進行推薦引導也不乏是一種很好的嘗試。比如網易云音樂、騰訊視頻和美團均有采取該方式。

網易云音樂里頭我從未購買或領取過數字專輯，該頁面也是無數據的，網易云音樂在頁面底部進行了數據專輯的推薦，具體的推薦算法不太清楚，我覺得可以是銷售量較大的專輯，或者根據我個人的搜索和瀏覽記錄進行相關推薦，最后通過埋點數據分析通過推薦引導購買是否提高了專輯購買率。

（4）內容被刪除

頁面內容被刪除區分場景說明。

第一種是需要用戶操作產生內容的頁面，用戶也可以通過刪除將頁面內容清空。

對于該場景，當頁面內容被用戶清空后，頁面內容為空，處理方式和初始狀態為空類似，以缺省頁（文案或是文案+插畫）的形式告知或在此基礎上加上快捷入口或用戶推薦。

比如清空網易云音樂中我的下載列表所有單曲、清空騰訊視頻我的緩存視頻，清空微信讀書的書架，清空后的狀態和初始狀態是一致的。

另一種場景是的頁面入口依然存在，但二級頁面內容已經被刪除了，二級空頁面的設計處理方式是以缺省頁（文案或是文案+插畫）的形式告知，文案信息告知用戶內容已被刪除。

例如某微信訂閱號的文章發布記錄中的某篇文章已經被刪除，點擊進入二級頁面后的提示如下：

七、功能重建

功能已上線，后期進行產品升級或迭代功能正在開發中，功能入口沒有進行關閉還是允許用戶訪問，通常會在用戶進入該頁面之后進行對話對話框提示，告知原因。

總結

以上對幾種常見異常狀態的設計規范進行了總結，相對正常狀態，異常狀態較為少見，容易忽略，大家可以參照以上規范進行異常狀態設計和優化調整。后面碰到其他異常狀態，我會繼續補充。

文章來源：人人都是產品經理

本文從什么是場景化、場景化設計的案例、為什么要基于場景化做設計和如何進行場景化設計 4 個方面為你完整梳理場景化設計思維的知識點。

什么是場景化設計

「場景」在百度百科里的定義是：戲劇、電影中的場面，泛指情景。情景又指：

• 感情與景色
• 情形、景象
• 環境：假設是在這個情景。

在戲劇或影視劇里，場景由人物，時空，事件（行為），環境（社會環境和自然環境）等要素構成。

互聯網中的「場景」我把它分為兩類，一類是為了實現用戶目標而產生的場景，這種類型的場景需要明確用戶目標，可能并不需要涵蓋用戶是怎么實現目標的。這類場景指根據用戶的精準需求，為其提供精準服務，用明確的差異化服務給用戶提供一個使用產品的動機。比如微博和微信，微信定位是熟人社交，微博則是陌生人社交。另一類是更加精細化的場景，這類場景需要明確用戶操作流程。本文主要針對第二類場景展開。

場景化設計指基于對場景的分析，得出用戶痛點與需求，結合前后場景預判用戶目標，通過設計提高用戶效率，給予用戶驚喜與感動。

場景要素包括：4W+1H，即Who人、When時間、Where地點、What事件 、How環境，什么人，在什么時候，在什么地方，做了什么事情，所處的環境如何。其中 Where 又包括線上地點和線下地點，線下指現實中的定位，可以通過手機信號塔數據（GPS），Wifi 連接等獲?。痪€上指用戶所處的具體頁面。

如：用戶（who）早上上班（when）在地鐵上（where）看電子書（what），地鐵上人多嘈雜且操作不方便（how）。再比如用戶（who）中午（when）在辦公室里（where）點外賣（what），肚子很餓還不知道吃什么（how）。五要素就像口訣，幫助我們全面快速地描述場景。

有哪些場景化設計的例子

為幫助大家更好的理解場景化設計，這里基于上面提到的場景五要素舉一些例子。

人是變量：用戶不同，看到的信息不同。隨著大數據和智能推薦技術的普及，越來越多的產品通過挖掘不同用戶的喜好，生成用戶畫像，為每位用戶提供「千人千面」的個性化內容。這樣的產品大家都很熟悉，比如抖音，淘寶，微博，今日頭條。

時間是變量：時間不同，看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」，當在出行類 app 上定好行程后，MIUI11 就會自動將該行程記錄在負一屏顯示并同步日歷，同時會根據出行的時間點，在通知欄實時更新提示：

再比如在 Google Maps 的 app 里開啟導航時，如果目的地在預計到達時間還沒有開門，或者快要/已經關門了的話，會有個彈窗提醒。

還有螞蟻森林的頁面會根據用戶打開的時間進行變化（白天與夜晚模式）等等，這些都是充分考慮了場景中時間這一變量，才有如此暖心的設計。

地點是變量：同一個用戶，在不同地點看到的信息不同。比如，大眾點評APP當用戶從常住地北京（where）定位成非常住地杭州（where）時，根據用戶的上個場景與當前場景預測用戶可能處于旅游狀態，從而預測用戶下一步的目標是在杭州「吃喝玩樂」，所以首頁和攻略頁的內容都發生了變化，為用戶推薦旅行地的「吃喝玩樂」。

環境是變量：不同環境看到的信息不同，比如設備環境發生變化時：iOS13 中的備忘錄頁面，將「添加」按鈕移到了右下角。為什么？因為手機屏幕越來越大，把按鈕從右上角移到右下角，更有利于用戶單手操作。

再比如：我們在駕駛環境下，要保持注意力集中，避免或減少分心駕駛導致的交通事故，所以基于駕駛環境，iOS11 上線了駕駛模式功能。當 iphone 與車內的 USB 或藍牙連接，或 iphone 感知到人的移動速度時，iphone 就會自動進入駕駛模式，在該模式下，任何人發短信，我們都不會收到提示，對方會收到「我正在駕駛，稍后回復您」的自動回復。同時，iphone 會追加一條短信，提示對方只要回復「緊急」關鍵詞，我們就能立刻接收到他們的消息提示。

為什么要基于場景做設計？

通過上面的舉例想必大家已經了解到了基于場景做設計的好處。由于與用戶的空間相隔，設計師無法感知用戶在真實場景中使用產品的具體情況。通過場景化設計的方法，對用戶使用場景進行分析與預期，可以幫助設計師找到用戶與場景的內在聯系，探索新的功能及交互方式。

怎么進行場景化設計

可以概括為以下四步。

1. 根據用戶使用流程和行為路徑窮盡場景

根據用戶的使用流程和行為路徑列舉場景，這里以乘坐飛機（手機購票）為例，列舉乘坐飛機涉及到的關鍵場景：

• 乘客（who）在航旅縱橫頁面（where）購票（what），航班多查找起來麻煩（how）。
• 乘客（who）起大早拖著疲憊的身體（how）在去往機場的路上（where），又遇到早高峰堵車，內心焦躁煩悶（how）。
• 起飛前（when）乘客（who）在機場（where）過安檢（what），安檢流程復雜，又檢測出不符合登機規定的物品，讓人心煩，手忙腳亂（how）。
• 起飛前（when），乘客（who）在候機口（where）候機（what），人多嘈雜，沒有座位，還背著繁重的行李，還要時刻關注航班信息（how）。
• 起飛前40分鐘（when），乘客（who）背著行李排著隊（how），將登機牌（紙質/電子）和身份證出示給工作人員（what），工作人員（who）站在入口處（where）開始檢查每位乘客的登機牌和身份證（what）。
• 檢完票后（when），乘客（who）拿著身份證和登機牌，背著行李（how）乘坐擺渡車（what），擺渡車上嘈雜、擁擠（how）。
• 下擺渡車后（when），乘客拿出登機牌，背著行李（how）排隊檢票登機（what），工作人員（who）站在飛機前（where）開始檢查每位乘客的登機牌（what）。
• 在起飛前30分鐘（when），乘客（who）登機（what），背著行李在狹窄擁擠的通道里（how）尋找自己的座位（what）。找到座位后，將沉重的行李艱難的（how）放到上方的置物架上（what）。放好行李后，坐到自己的座位上（what），系好安全帶（what），調節座椅靠背（what），等待飛機起飛（what）。
• 飛行過程中（when），氣流導致飛機顛簸，乘客感到恐慌不適（how）。飛行過程中，乘客通過看電影，看書，睡覺打發時間（what）。
• 到達目的地（when），乘客（who）從高處置物架上（how）取下行李（what），拿著沉重的行李（how）排隊下飛機（what）。此時乘客對目的地的天氣等其他情況都不清楚。
• 乘客走出飛機到達航站樓后，在陌生的機場（where），跟著標牌指示艱難的找到自己的行李（what）。拿著行李跟著指示牌（how）困難的找出口（what）。

通過對關鍵場景的詳細描述，我們將摸不著的用戶場景像過電影一樣在眼前一一呈現，有利于我們發現很多想不到或者通過調研得不到的細節，幫助我們發現用戶真正的痛點與需求，洞察設計機會點。

2. 根據場景挖掘機會點

完成了第一步的場景列舉，我們對流程中涉及的場景有了深刻的了解。下一步就是對場景的判斷與分析，挖掘機會點。機會點挖掘有兩個方向，一是通過分析當前場景存在的痛點和需求挖掘機會點，二是通過對用戶下一步目標的預判尋找機會點。

通過分析當前場景存在的痛點和需求挖掘機會點

支付寶「朋友」界面，當用戶輸入某數值時，輸入框上方會自動顯示「給對方轉賬***元」按鈕，用戶可點擊該按鈕完成轉賬。這是因為經常有用戶誤以為輸入數值發送即完成了轉賬，導致很多尷尬的狀況出現?；谠搱鼍跋碌耐袋c與需求，支付寶做了這個改進，貼心又好用。

iOS 系統在切換 APP 操作時，會將一些金融類 APP 虛化，以此來保證用戶信息安全。這一設計細節也是充分考慮了用戶在切換 APP 時的場景，解除了用戶在公告場合擔心被窺屏而泄露個人財富信息的擔憂。

還有，當我們用耳機聽音樂或播放視頻時，拔下耳機，聲音就會自動停掉，這樣就算在安靜的場合聽音樂或者看視頻，耳機不小心掉下來也不會發出尷尬的聲音，這些都是充分考慮了用戶當前使用時的場景，才做出如此貼心的設計。

通過對用戶下一步目標的預判尋找機會點

第二個方法是通過對用戶當前場景的分析，預判用戶下一步的行為與目標，從而尋找當前場景的機會點。

如何預期用戶下一步目標？有三個方法：

• 通過成組動作進行預期，如復制→粘貼，編輯→保存。
• 通過用戶認知流程預判，如，瀏覽時反向滑動→結束瀏覽/回到頂部；再比如谷歌翻譯在發音時，第一遍是正常語速，第二遍語速變慢，第三遍又恢復到常速。是不是很貼心，很符合用戶期望？
• 通過產品使用流程進行預期，如訂外賣→取外賣→評價。

在谷歌瀏覽器，當我們打開多個瀏覽窗口時，通常需要手動一個個地關閉標簽頁。chrome 充分考慮到了用戶的使用場景，當用戶關閉一個標簽頁時，預期用戶會關閉下一個標簽頁，所以當關閉一個標簽時，相鄰標簽會自動靠近，保證關閉的按鈕始終位于鼠標的當前位置，這樣用戶就不用移動鼠標關閉下一個標簽頁，提高了用戶的使用效率。

3. 機會點轉化為落地的設計方案

在將機會點轉化為具體的設計時，有兩個可作為依據的設計原則，分別為，情感化。

實現有以下幾個方法：

行動點前置

通過對用戶下一目標的預測，將用戶目標在當前場景展示，縮短操作流程，達到的目標。如淘寶首頁的 tab 欄會根據每個用戶的瀏覽記錄預測用戶目標，千人千面個性化展現，縮短了用戶查找商品的路徑，提高商品購買效率。

行動點置換

還是拿淘寶舉例，淘寶底部的第一個導航，當用戶滑動首頁下方的商品流時，該按鈕由首頁變成置頂。

行動點相關提示

意思是根據用戶當前目標或下一步目標進行相關的提示。如支付寶朋友頁面，當上滑時，會出現「找人轉賬」的提示，點擊進入朋友列表的純凈模式（去掉了服務通知等跟轉賬無用的列表），提高了用戶尋找的效率。

再比如，網易郵箱，當郵件中提到附件，但是沒有上傳附件時，點擊發送后，系統彈出下方的提示，解決了用戶常常忘記添加附件的困擾。

突出行動點

根據用戶當前目標或下一步目標突出關鍵按鈕，幫助用戶快速找到關鍵操作，吸引用戶點擊，降低了用戶思考成本，提升效率。運用這個方法進行設計的例子太多了，比如淘寶的商品詳情頁用紅色突出購買按鈕等。

直接執行

根據用戶當前目標或下一步目標直接執行。比如滴滴的掃一掃界面，當檢測到光線較暗時，手電筒會自動打開，提高了掃一掃的效率。

情感化

唐納德·諾曼在《情感化設計》中提到設計的三個層次，分別為：本能的設計，行為的設計，反思的設計。情感化設計是能打動人的，它能傳遞感情，勾起回憶，給人驚喜，情感化設計是幫助產品與用戶之間建立情感的紐帶，能強化用戶對品牌的認知，培養對品牌的忠誠度。

情感化設計的步驟依次為：提煉影響產品的的情感指標→聚焦用戶對產品的情感訴求→產出設計方案→驗證設計價值（來源于周姮—知乎螞蟻金服體驗技術部的一次分享）。

在谷歌表格每列的開頭依次輸入「Pride」五個字母后，表格會變成彩虹樣式。

網易云音樂在用戶生日時會變成「生日快樂」的蛋糕樣式，點擊進去的音樂列表，第一首歌是生日歌，讓人心里暖暖的。

4. 設計檢驗

最后一步就是設計方案的驗證，設計方案能否幫助用戶縮短操作流程？降低用戶思考成本？幫助用戶地完成任務？是否能打動用戶給他們帶來驚喜與溫暖？通過可用性測試及上線后的數據反饋，幫助我們更好的優化設計方案。

總結

1. 什么是場景化設計？

場景五要素：4W+1H，即Who人、When時間、Where地點、What事件 、How環境，什么人，在什么時候，在什么地方，做了什么事情，所處的環境如何。

2. 有哪些場景化設計的例子？

3. 為什么要進行場景化設計？

4. 怎么進行場景化設計？

• 根據使用流程和行為路徑窮盡場景
• 根據場景挖掘設計機會點
• 將機會點轉化為落地的設計方案
• 設計檢驗

轉自：站酷-嗚嗚吉良斯基