<listing id="rn17l"></listing>
<var id="rn17l"><dl id="rn17l"><progress id="rn17l"></progress></dl></var>
<var id="rn17l"></var>
<var id="rn17l"><strike id="rn17l"></strike></var>
<var id="rn17l"></var>
<cite id="rn17l"></cite>
<menuitem id="rn17l"></menuitem>
<menuitem id="rn17l"></menuitem>
<var id="rn17l"><dl id="rn17l"></dl></var> <var id="rn17l"><strike id="rn17l"></strike></var>
<var id="rn17l"></var><var id="rn17l"></var>
品牌咨詢電話 4001-607-668

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CRAP 分別是,對比(contrast)、重復(repetition)、對齊(alignment)和相近(proximity)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先繪制版面網格。

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

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

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

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

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

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

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

放大的觀察一下。

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

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

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

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

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

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

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

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

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

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

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

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

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

現在就與思拓客服交流

4001-607-668

您也可進行在線咨詢或預約項目顧問

无码少妇一区二区三区免费