用戶思維你真的理解嗎？5000字干貨+案例幫你快速掌握！

不論你是剛剛入行還是已經從業多年的網頁設計師，在工作中，都總會問一個問題。「如何讓我的網頁或者應用更容易使用？我該怎么辦」。而我們在想這個問題的時候，常常是以一個設計師的心態去理解用戶，也就是主觀地去想用戶應該會這樣使用我的網頁。但是，以一個用戶的角度去看的話，往往和設計師是截然相反的。

現實情況往往是，設計的非常精妙的環節，很容易就被用戶直接略過了，或者是讓用戶充滿疑惑，這個問題總是，伴隨著我們的設計過程而不斷產生的，「知己知彼，方能百戰不殆」這里就需要我們，去理解用戶瀏覽網頁的時候的真實心理狀態。

這里，我們請出小紅同學，由于工作需要，他每天都會瀏覽大量的網頁，因此對網頁設計有一定的理解，但是他很難忍受設計糟糕的網頁，現在他想瀏覽網頁尋找一條新聞。

看到了第一個網頁，整體布局和信息層級劃分得一目了然，瀏覽完成后很快就尋找到了自己想要的信息了，小紅感覺到很輕松。

而當瀏覽到第二個網頁的時候，小紅就感覺有點難受了，這個網站內容密密麻麻，編排也十分混亂。瀏覽到了最后，小紅找不到自己想要的任何信息，忍不住爆了粗口。

為了安撫小紅的憤怒，我們請出這個網站的設計師，小藍同學。

小紅說找不到信息這個問題，也是我們用戶在瀏覽網頁的時候，經常遇到的困難。尤其是當一個網站的信息十分混亂的時候，這個問題就十分凸顯了。

小藍說，你看信息就在面前，這么容易找你還找不到？你再仔細找找，這里我們需要思考一下，用戶真的有那么的耐心去仔細的尋找信息嗎？

小紅繼續發火，導航在哪里？信息這么亂？分類都沒有！是不是像極了我們日常瀏覽到糟糕的網頁的時候的狀態。

小藍還是在一個設計師的視角說，信息一目了然，很輕易就可以找到信息了，為了自證清白他要演示給小紅看。

在設計師小藍的眼睛里面，這里網站早就有一個清晰的分類了，所以理所當然的用戶在瀏覽的時候，通過標題也很快就能明白，這個網站的分類都是什么。小藍甚至感覺自己是發現了一種新的網頁設計形式，還沉浸在沾沾自喜中。

但是在小紅這里看來，這里糟糕透了，毫無邏輯。作為一個用戶怎么有耐心，去一個一個理解標題，然后形成分類呢？

小藍繼續說，這個網站已經修改了很多次了，他可以輕松找到自己想要的信息。非常方便。

小紅最后還是忍不住了，以一大串問候語結束了對話，然后關閉了這個網站。

這個時候小藍是一頭霧水，什么情況，明明這么為用戶考慮了，怎么用戶就這么不明白呢？

這里我們重新看一下小藍說的話，里面全部都是以我為主，全都是一個以設計師的身份去說的話，完全沒有考慮過用戶的感受和體驗。

其實小藍的問題就在于，完全不懂用戶的思維。

設計師不該把尋找信息的責任交給用戶，而是應該最大限度地降低用戶尋找信息的難度，這樣才能最大限度地發揮網頁的功能性作用。

我們重新回到這個網頁，這個網頁的布局十分清晰，想要的信息可以快速地查找到，大大降低了用戶的查找信息的難度。

編排合理，這樣才是可以讓用戶最短時間識別，網頁內的不同模塊的內容是什么。而不是小藍的全新方法。

設計師在設計元素的時候，應該盡量減少沒有必要的干擾，不要設計反常識的一些元素。

我們瀏覽網頁大部分時間是為了尋找信息，它不像游戲那樣，我們的一些反常識的內容會給用戶帶來快樂。網頁中的反常識的部分，往往會給用戶帶來困惑和煩惱。

當我們訪問網頁的時候，每個問號都會加重我們的認知負擔，把我們的注意力從要完成的任務拉開。

也許這種干擾是很輕微的，但是它們會累積起來，尤其是總把時間花在決定什么地方能點，什么地方不能點的時候。

如果做不到一切那么自然的進行怎么辦？可以添加一些解釋信息，減少用戶的疑問。

這個網站就添加了，解釋的信息來說明這個按鈕的意思是什么。

要使網頁有效，必須在用戶第一眼看到時將信息展示出來，而要做到這一點，最好的方法是創建不言而喻的網頁，或者至少也要做到自我解釋。

現在我們知道了，想要做好一個網頁或者應用，首先應該學習如何去除主觀化，并且代入用戶的視角去進行思考。這樣的話可以讓你更好地去從一個用戶的角度，反推出怎么優化自己的產品。理解用戶會作為你長期的一個工作之一。

長此以往的去除主觀化，你就會越來越明白用戶的思維有哪些，并且針對用戶的需求和習慣，去不斷地改進和提升自己的產品。去除主觀化不僅僅作用于網頁設計，還可以拓展到方方面面，這里就需要你們去發散自己的思維了。好，除了觀念上的轉變，我們還需要知道，用戶在使用網頁時的真正習慣有哪些。

先將之前我們看到的網頁轉換成線框，減少這些內容對我們進行的干擾。

小藍，他在設計網頁的時候，給用戶設計了一個他自認為完美的，視覺閱讀順序。

而小紅在看的時候則是，只針對自己感興趣的東西看，整個閱讀的視覺順序，是完全無序的。這個時候設計師小藍懵了，感覺自己的完美閱讀順序被打亂了。

還是同樣的方式，將這個網頁轉換成線框的形式，減少干擾。

在瀏覽這個網頁的時候，視覺就相對來說有了一定的蹤跡可尋。而這個視覺的瀏覽順序，也基本吻合了「F」型的瀏覽順序，這個原因是什么呢？

因為這個網頁的信息的編排和劃分明確，我們在瀏覽的時候，我們的視線會自然地進行移動，最后就形成一個「F」型的網頁瀏覽

 

真相一，我們不是在一個字一個字的閱讀網頁，而是在對網頁進行一個掃描。互聯網時代基本上把我們每一個接觸互聯網的人，訓練成為了一個人肉掃描儀。

我們已經很少這樣閱讀一個網頁了，除非你在閱讀非常難明白的文獻，一個字一個字的閱讀，不僅會耗費我們大量的精力，并且浪費大量的時間。

我們在觀看網頁的時候，通常是在一目多行的狀態。

一目十行才是我們正常的閱讀方式。也就是掃描的過程。

原因是我們總是有任務在身：網頁用戶的行為更像鯊魚，他們不得不一直移動，因為我們是在尋找信息，完成自己的工作的過程。

如果靜止了一直慢慢的看一個信息，耗時又耗精力，慢慢我們的耐心就不見了，所以完全沒有必要來閱讀那些不必要的內容。

某寶也是運用這個原理，各種品類的商品混雜在一起，當我們瀏覽某寶的一個頁面的時候。

想要購買一雙球鞋，那就只會看到球鞋，而忽略了其他的東西。

同樣想買鏡子的時候，就會忽略掉其他的內容。

電車難題基本大家都聽說過，一個瘋子把五個無辜的人綁在電車軌道上。一輛失控的電車朝他們駛來，并且片刻后就要碾壓到他們。幸運的是，你可以拉一個拉桿，讓電車開到另一條軌道上。然而問題在于，那個瘋子在另一個電車軌道上也綁了一個人。

如果只給你很短的時間考慮，需要你迅即作出決定的時候，這個時候我們會有巨大的壓力，所以一定會選擇一個當時覺得滿意的答案，而不是一個最合適的答案。

電車難題有的時候很像我們瀏覽網頁的狀態，在極短的時間內去決定瀏覽那個網頁。這里同樣兩個選擇，網頁 A 信息通俗易懂，好查找，但是價值一般。網頁 B 信息專業需要自己找，但是價值較高。這個時候我們只有極短的停留時間你會怎么選擇。

通常大家都會選擇 a，這也是為什么，專業書籍價值高但是很少人閱讀，通俗讀本價值一般，但是卻很暢銷的原因。

我們再來一個版本的電車挑戰，現在你有著非常長的時間，這個時候你就可以有多重選擇了，甚至你可以去解救下面的六個人。

同樣我們時間充足時，我們也會選擇 B 網頁，去鉆研尋找出自己的需要的資料。

這里的最佳選擇其實一直是 B，而我們是因為時間的原因，更多會去選擇 A。這也是因為我們在瀏覽網頁的時候，通常沒有那么多的停留時間，找不到合適的信息，我們就會選擇退出進入別的網頁了，我們不選擇最佳，只選擇滿意就行。

而日常的生活中，我們幾乎不可能遇到電車挑戰這么極端的內容，沒有人質，甚至你可能只是拿著一個馬桶搋子路過。如果猜錯了，也不會產生什么嚴重的后果，對選擇進行權衡并不會改善我們的機會。

那我們再重新看到 AB 網頁時，我們自然就會去選擇信息編排清晰明了的 A 網頁了，B 網頁就被淘汰掉了。然后再進行掃描。

這里我先問大家一個問題。一般等價物/想象共同體/信任的代表，這個定義是指的什么東西？

其實這個是我們日常生活中最常見的錢的概念。而那個也只是錢的基本定義，展開的話更加復雜。對于我們大多數人來說，主要我們能正常使用，是否明白事物背后的運行機制并沒有什么關系。這并不是智力低下的表現，而是我們并不關心。

所以我們用戶在瀏覽網頁的時候，不會在意這個網頁的背后的運行邏輯是什么？如果沒有什么選擇的情況下，這個網站也是可以供用戶使用很久的。

但是如果有一天，無意中發現了新的網站，并且感覺這個網站更好用。

那原來的網站就會立刻在用戶的腦袋里面被刪除掉。

而后這個網站變成了首選的網站。

同理，當用戶在發現更好的 C 網站的時候。

原來的網站也就會立刻被刪除掉，幾乎不會再使用。

而 C 網站就會變成首選網站。

而這個其實是用戶使用網站的效率逐步提升的過程，舍棄之前不好的難用的網站。選擇更好的網站，一步一步的遞進。這也就從反方向促使，網頁設計師要不斷地去優化自己的網站，從而保留住更多的用戶。

網頁設計主要是面向用戶的，只有充分的了解了，用戶的實際對網頁的看法和用法，我們才能更好的去優化自己的網頁作品。在工作的時候，很多的小伙伴其實很難接到一個藝術類型的網站，或者是一個變化形式很多的網站。

我們大多數的時候，接手的都是一些很普通的網站，這個時候，是需要設計師合理地將網頁的信息傳遞出來給用戶，而不是給用戶創造多大的視覺沖擊。信息的有效傳遞永遠在網頁設計中一直處于一個非常重要的地位，接下來我給大家講解一個，CRAP 設計理論，在你們日常的網頁設計中，只要合理地使用這個理論，就可以更好地編排出，信息清晰明了的網頁。

CRAP 分別是，對比（contrast）、重復（repetition）、對齊（alignment）和相近（proximity）。

這個網頁是接下來我們要修改的網站，是不是有一種小紅憤怒的感覺呢？信息混亂并且區塊的劃分也十分的紊亂。不利于我們去查找自己想要的信息。

對比的定義是，避免版面上的元素過于地相似，可以使用字號大小的對比，文字與圖片的對比，重要信息與次要信息的對比。

為了減少雜亂信息對大家的干擾，我把這個部分轉換成了線框的形式，更利于大家觀察。

截取的這個部分，大家有發現嗎？這個板塊的標題、內文的標題以及內文，字號基本上是一致的。這樣我們在閱讀的時候，視覺識別會產生紊亂，難以閱讀。

這里我們只需要調整一下線框的粗細度，整個的信息層級就可以很快區分出來了。

調整后信息就變得更好的識別了。

將線框轉換成文字，信息的層級就可以立馬展現出來。

與原來的文字形式進行對比，信息的識別度提高了很多。

對齊則要求版面上的項目不能隨意地安排，一個版面上每個元素應該與其他元素有某種視覺上的關聯性。這樣會讓這個版面更整潔、更精致。

整件作品中，可以重復使用相同的視覺元素。包括字號大小，文字組的形式、空間配置等。重復有助于整體的架構安排，也可以強化一致性。在網頁設計中，往往大量地出現重復類型的設計。

老樣子，我們提取線框進行觀察。

這里的文字是一個沒有對齊的狀態，我們在觀看的時候，就感覺十分凌亂。

只需要稍微調整一下，讓他們向右對齊，是不是在視覺上就整齊了很多

這樣在我們瀏覽網頁的時候，信息就可以很好地傳遞出來了。

右側這個部分其實就是在不斷重復的過程。

最后一個原則就是相近。版面上相關聯的項目要進行分組，這樣原來零散的項目就會變成一個整體，可以將不同的信息區分開。減少雜亂，讓用戶清楚地了解整個網頁的架構。

按照這個網頁架構，對其重新進行了標記，我們會發現，原來的網頁中，明明是重要的 A 部分，占比竟然小于 A1 這個部分，這個架構明顯是有問題的。

重新調整后，突出了A 與? A1 的信息的層級，下方 B 與 C 上下排列 這樣更適合用戶的瀏覽習慣。根據相近的原則，不同的信息模塊，距離要遠一些。讓用戶瀏覽的時候，視覺是一個「F」型。

首先繪制版面網格。

這個網格的可視范圍是 1200px。

根據網格置入圖片和線框圖，觀察效果。

根據線框圖添加文字，整體的信息變得清晰明了。添加橫線區分信息，信息層級就凸顯出來了。

放大的觀察一下。

接著添加按鈕的部分。這里按鈕使用的線框轉實色的動效，可以非常容易地讓用戶進行操作。

而右排的文字則是使用，加下劃線的動效，方便用戶點擊跳轉頁面。

這里也是繼續前面的步驟，將我們編排好的文字置入，網頁中的按鈕的形式大小以及字號的大小對比，依然是依照重復的原則，增加網頁的整體性。

置入最后一個部分的內容，整個網頁的框架就已經做好了。

置入圖片后和原來的網站進行對比，信息的有效傳遞性大大的提升。根據我們前面的原則，原來的網頁也就不會在用戶的選擇范圍內了。

一個網頁設計師在工作的過程中，應該多去以一個用戶的心態去設計和調試自己的網頁，可以大大的提高自己的網頁的實用性。如果很難做到去主觀化，可以邀請幾個用戶進行實際操作，進行可用性的實驗，同樣也可以很好地理解用戶的思維習慣。

總結起來就是，網頁設計是以用戶為主體的設計。在設計的過程中，牢記 CRAP 的設計原則，這樣會讓你的網頁，在不出現大的錯誤的同時，還能提升信息的有效傳遞性，留住更多的用戶的群體。好的，那我們的課程今天就到這里了，我們下期見，拜拜。

拓展閱讀：

歡迎關注研習設的微信公眾號：「Yanxishe2017」