1. 網站設計應該注意哪些視覺效果
企業網站建設是一個龐大的系統工程，網頁則是其基本元素。設計具有視覺審美的網頁，進行網頁視覺創意，是現代企業網站視覺設計的必然要求。
1．技藝融合
技是技術，藝是指藝術。二者要緊密結合，互相扶持。可以說，企業網站的視覺設計是否新穎決定了網民看到網站時所駐足的時間，在這個基礎上網站的內容才能進一步吸引網民。因此，企業應當首先認識到網站界面設計與創意是企業網站建設的重要組成部分。同時，技術是實現網頁視覺效果的基礎。設計者應主動掌握現有的各種網路技術規律，注重技術和藝術的緊密結合，窮盡技術之長，實現藝術想像，達到理想的視覺效果。
2．完善版面設計
網頁視覺設計特別講究編排和布局，國外有設計者認為網站界面設計的95％是排版。優秀的版面設計通過文字圖形的空間組合，表達出和諧與美，能夠優化閱讀，准確傳遞信息，使網站具有親和力。我們可以將平面構成中的形式美法則，如平衡、對比、調和、節奏等原則靈活應用於網站的版面設計中，使紛雜的頁面更具美感、重點突出，更加有條理。
3．色彩的和諧運用
色彩是藝術表現的視覺要素之一。瀏覽者在瀏覽網頁時，第一印象就是頁面的色彩，頁面色彩直接影響瀏覽者的閱讀興趣。在網頁設計中，應根據和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配。在企業網站的色彩設計中，我們可以根據企業CI（企業形象識別系統）中VI（企業視覺識別系統）進行標准色的選取運用，使企業整體化統一。如麥當勞的設計中，我們常可以看到標準的紅、黃色一直貫穿到企業的整體設計中。
一般而言，我們應當先確立一種主色調，以利於網站主題的表現與氣氛的烘托。然後確定和主色調類似色的輔助色，這樣有利於界面風格的統一。最後還可以選擇小面積的對比色，從而實現「大面積協調』／小面積對比」。這樣，網站在統一協調的基礎上會顯得更加活潑、生動。網站界面色彩主色調太多會顯得花哨，只有同類色而沒有對比色，網站界面色彩則顯得單調。總之，應當將色彩構成、色彩情感等知識靈活應用於網站界面設計之中。
4．媒體綜合
視覺設計者應綜合運用多種媒體元素來設計網頁，以滿足和豐富瀏覽者對網路信息的要求，這也是未來網頁藝術設計的發展方向。當然我們應盡量避免使用過多過大的圖片、動畫等，減少過度的裝飾。
5．視覺設計的統一
視覺設計的最終目的不是單純追求視覺感染力而是更好地表現網 頁的主題因此各方面的統一非常重要。首先，視覺設計要與主題相統一，視覺設計必須服務於網頁主題的表達。其次，內容與形式要統一，即整體視覺印象和內容意境的統一。視覺設計中應利用各組成部分在內 容上的內在聯系和表現形式上相呼應，並注意整體設計風格的一致性，實現視覺上和心理上的連貫。
總之，網頁的視覺設計決不是只憑感覺，必須遵循其內在的規律和基本原則。一個成功的網頁視覺設計必須做到藝術與技術的完美統一，它涉及到視聽元素的處理及網頁整體布局的規劃設計等多項內容。它以主題思想和訴求鮮明突出、形式與內容相統一、強調網站中各相關頁面的整體統一和諧為審美原則。
2. 如何讓頁面有層次感
1.設計內容有主次之分
網頁上的各項元素都有自己的作用意義，我們在做網頁層次時首先考慮畫面中各元素作用，根據網頁元素的不同角色確定優先順序，有空間感和距離感以及有虛實之分並且光影層次清晰，然後進行視覺層次的構建。簡單舉例，以淘寶圖片為主，首先圖片展示出來的是商品，然後背景會搭配使用場景或者突出重點的背景圖片，其他還會增加文章說明等，在設計時要有重點分主次。
2.網頁畫面的遠近關系
網頁圖片設置上由近及遠，讓畫面用空間感，有深度，用背景圖片等襯托出層次感，然後在圖片基礎上突出重點，可以使頁面看起來更透氣，也能夠通過場景來傳遞出很強的代入感，但注意畫面搭配。
3.注意色彩的適用
網頁設計時注意色彩搭配，色彩明亮的頁面元素更容易從相對柔和的元素中脫穎而出。背景色對於網頁整體風格基調也有明顯作用。例如，淡藍色，一般代表平靜祥和，適合一些日常事物管理類軟體選擇。色彩模塊的適用及應用，在網頁設計界面元素的邏輯關系中發揮著舉足輕重的作用。
4.善用對比增加頁面層次
UI設計師在頁面設計時利用內容中的差異、對立等方面結合比較，帶入畫面做出比較，形成強烈的視覺沖擊。用對比給用戶增加畫面層次感，同樣用對比給內容做出更明顯的比較。設計元素上可以用色彩、明暗、間距、尺寸等做出差異感將頁面整體提升層次感。
5.注意網站功能
UI設計師初期常常出現的錯誤就是忽略了網站功能，為了設計出更優秀的畫面卻忽略了網站的自身左右。UI設計師在設計網頁過程中首先要了解的就是功能，整體畫面突出功能來展現出層次感也是網頁設計中突出層次感的重要方法之一，設計與功能相結合，功能融入到設計當中然後突出整體重點層次感自然展現出來。
注意事項
以上列舉了幾點網頁設計如何突出層次感，應用過程中一定要結合自身網站內容去選擇方法，不要都用上也不要亂用找適合網站的方法突出自己的設計即可。
3. 如何設計網站——對Web設計的一點總結
在最近的工作中，遇到了導航的問題，無意中發現了找出了收藏已久的《別讓我思考》，花了一周時間讀了兩遍，才清楚的理解導航對於一個產品的重要作用。也更加印證了產品圈中將用戶當做小白的理論，其實並不是在產品設計中將一切都為用戶標注出來，而是讓用戶能夠通過自己的方式更加輕松的使用產品，這樣的產品對於用戶來說必定是不言而喻的，也就是主題「別讓我思考」。下面是這次讀書的筆記，雖然這本書給我很大的啟發，但是一切需要歸於實踐，在實踐中驗證這個理論。
一、指導原則
第一章：別讓我思考---可用性第一定律
web設計的終極法則：別讓我思考，即看到一個界面應該是不言而喻，一目瞭然，自我解釋。
強迫我們思考的地方：（1）酷炫的名字或技術名詞。（2）看起來不太明顯的按鈕和鏈接
當思考時，需要權衡，權衡應該更傾向於「顯而易見」，而不行hi需要額外的思考
每個需要思考的地方會加重用戶的認知負擔，把用戶的注意力從要完成的任務上拉開
訪問網站時不需要思考的事都有什麼？
我在什麼位置？
該從哪裡開始？
他們把xx放在什麼地方？
這個項目上最重要的是什麼？
為什麼他們給它取這個名字？
如果做不到讓一個頁面不言而喻，那麼至少應該讓它自我解釋
當瀏覽網站遇到問題時，用戶會認為是自己的錯誤，而不會責怪網站
如果要讓網頁有效，它們必須在用戶第一眼看到時將自己展示出來，而要做到這一點，最好的方法是創建不言而喻的網頁，或者至少是自我解釋。
第二章：我們實際上是如何使用Web的---掃描，滿意即可，勉強應付
事實1--我們不是閱讀，而是掃描，尋找能吸引用戶注意力的文字或詞語（除新聞故事，報告，產品描述界面）
為什麼掃描？
（1）我們總是處於忙碌之中---使用web是想節約時間
（2）我們知道自己不必閱讀所有內容---尋找感興趣或手頭的任務相關的內容
（3）我們善於掃描---生活習慣，找感興趣的內容
用戶在網頁上看到什麼卻決於想看到什麼，通常為頁面的一小部分內容
吸引注意力的文字和短語是什麼？
（1）與手頭任務有關的
（2）我們當前或接下來的個人興趣
事實2---我們不作最佳選擇，而是滿意即可
用戶大多數時間不會選擇最佳選項，而是選擇第一個合理的選項---滿意策略
為什麼不尋找最佳選擇？
（1）我們總是處於忙碌之中---最佳策略時間久，滿意策略效率高
（2）如果猜錯了，也不會產生什麼嚴重的後果
（3）對選擇進行權衡並不會改善我們的機會
（4）猜測更有意思---猜測不會像權衡那麼累，猜對了，可能看到意外的內容
事實3---我們不是追根究底，而是勉強應付
勉強應付不僅限於初學者，技術專家也會在理解事物的工作原理上有著驚人的誤會
原因是什麼？
（1）這對我們來說並不重要---明白事物工作機制並不重要
（2）如果發現某個事物能用，我們會一直使用它---如果遇到更好的方法，會用好的方法，但是很少主動尋找更好的方法
如果用戶明白網站，而不是勉強應付的作用
（1）用戶更容易找到自己需要的東西，對用戶和網站都好
（2）用戶更容易理解你的網站有哪些服務---不僅僅是用戶偶然看到的
（3）引導用戶看到你希望他們看到的內容（網站上）
（4）在你的網站上，用戶會感到掌控全局，並逐漸成為老用戶
第三章：廣告牌設計101法則---為掃描設計，不為閱讀設計
吸引用戶的5個重要方面（為下方2-6部分內容）
在每個頁面上建立清楚的視覺層次
盡量利用習慣用法
把頁面劃分成明確定義的區域
明顯標識可以點擊的地方
最大限度降低干擾
建立清楚的視覺層次
視覺層次清楚的頁面的特點
（1）越重要的部分越突出
（2）邏輯上相關的部分在視覺上也相關
（3）邏輯上包含的部分在視覺上進行嵌套
一個頁面沒有清楚的視覺層次，用戶會降低掃描頁面的速度，會尋找關鍵的文字和短語，然後拼湊出感覺重要的內容和內容的組織方式，這樣會增加工作量
習慣用法是你的好幫手
web的習慣用法
（1）它們非常有用---適當使用習慣用法，讓用戶訪問更容易，減少額外學習工作原理ide成本
（2）設計師通常不願意利用它們
如果不打算使用習慣用法，需要的做法：
a.必須確定你在使用一種同樣清楚、同樣不言而喻，沒有學習曲線的方法
b.帶來很大的價值
把頁面劃分成明確定義的區域
明顯標識可以點擊的地方
降低視覺雜訊
雜訊的分類
（1）眼花繚亂---所有的信息都想吸引用戶的目光，沒有突出點
（2）背景雜訊---頁面沒有一個地方會造成過分干擾，但是這些很小的雜訊太多會惹人厭煩
第四章：動物、植物、無機物---為什麼用戶喜歡無需思考的選擇
真正的問題不是到達目標之前要點擊的次數，而是每次點擊有多難，需要多少思考，多大的不確定性來判斷自己是否在進行正確的選擇
關鍵：如果用戶需要一直在網路上進行選擇，那麼讓這些選擇變得無需思考是讓一個網站容易使用的原因
第五章：省略不必要的文字---不要在Web上寫作的藝術
有力的文字都很簡練。句子里不應該有多餘的文字，段落中不應該有多餘的句子
去掉沒人看的文字的優點有哪些？
可以降低頁面的雜訊
讓有用的內容更加突出
讓頁面簡潔，讓用戶在每個頁面上以言就能看見更多的內容，而不必滾動屏幕
需要去掉的文字是歡迎詞和指示說明
二、必須正確處理的幾個方面
第六章：街頭指示牌和麵包屑---設計導航
如果在網站上找不到方向、人們不會使用你的網站
網路導航101法則
你通常是為了尋找某個目標
你會決定先詢問還是先瀏覽
如果選擇劉蘭蘭，你將通過標志的引導再層次結構中穿行
最後，如果找不到想要的東西，你會離開
web與生活從空間角度來看的不同點
感覺不到大小
感覺不到方向
感覺不到位置
用戶使用Web導航是因為需要得知自己當前的位置
導航的用途---顯而易見的用途
幫助我們找到想要的任何東西
告訴我們現在身處何處
導航給了用戶一些固定的感覺，讓用戶感到腳踏實地
導航的其他用途---被忽視的用途
導航告訴我們當前的位置---告訴網站有些什麼，導航表現了內容，導航站點比告訴我們位置更重要
導航告訴我們如何使用網站---從哪裡開始，如何進行選擇
導航給了用戶對網站建造者信心
Web導航的習慣用法
網站ID
欄目
實用工具
指示器（指明用戶當前位置）
下一級欄目
頁面名稱
頁面導航（當前這一層的內容）
小字體版的底端導航
持久導航（或全局導航）：來描述出現在網站每個頁面的一組導航元素
持久導航應在在整個網站保持一致，使用戶只需要了解一次就夠了，減少學習成本
持久導航的五個元素
站點ID
回首頁的方式（Home）
搜索的方式
欄目
實用工具
主頁和表單不需要使用持久導航
主頁：承擔一些不同的任務，遵守一些不同的承諾，所以不需要使用持久導航
表單：在填寫表單的頁面，持久導航會產生干擾
如何設計Web導航各元素（表格下方為示例-亞馬遜）
導航元素名稱
細節點
站點ID
1.在Web上需要在每個頁面都能看到網站的名稱---頁面ID，通常在左上或靠近左上
2.網站ID代表整個網站，也就是說在當前站點結構中層次最高
3.站點ID如何出現在頁面可視層次的首要位置
（1）讓網站站點成為本頁最顯眼的內容
（2）讓網站ID涵蓋頁面所有其他元素
4.站點ID需看起來像一個站點ID---例如logo
欄目
1.欄目（或稱主導航條）是到達站點主要欄目的鏈接，結構的最頂層
2.大部分情況，持久導航也包括二級導航（當前欄目的下一級欄目清單）的顯示位置
實用工具
實用工具是到達網站中不屬於內容層次的重要元素的鏈接
返回主頁Home
1.返回主頁（Home）的按鈕需要始終可見，給用戶一種隨時可以從新開始的感覺
2.Home的用法
（1）在欄目或使用工具清單中包含一個回到主頁的鏈接
（2）在主頁之外的站點ID上小心地加上Home的字樣，讓用戶知道點擊它
搜索
1.避免混淆的方法
（1）花哨的用字
（2）指示說明
（3）選項---將選項寫下來
2.需要對低層次導航給予足夠的重視（三級導航）
頁面名稱
1.頁面名稱的注意事項
（1）每個頁面都需要一個名稱
（2）頁面名稱要出現在合適的位置
（3）名稱引人注目
（4）名稱要和點擊的鏈接一致
指示器
1.如何標記當前位置
（1）在旁邊放置一個指示器
（2）改變文字的顏色
（3）使用粗體
（4）按鈕反白
（5）改變按鈕的顏色
2.告訴用戶你所在的站點層級結構的前後關系（在網頁中的位置）
層級菜單
1.告訴用戶從主頁到當前位置的路徑（如何到達）
2.層級導航的最佳實踐方式
（1）將它們放在最頂端
（2）使用「>」對層級進行分隔
（3）使用小字體（表明是一種補充機制）
（4）使用了文字「你在這里」
（5）將最後一個元素加粗
（6）不需要把它們用作頁面名稱
標簽
1.為什麼標簽做導航是一個上佳的選擇
（1）它們不言而喻
（2）它們很難錯過（視覺上與眾不同）
（3）它們靈活
（4）它們暗示了一個物理的空間
2.注意事項
（1）正確繪制---激活的標簽頁在其他標簽頁之前
（2）顏色編碼---提高關注度
示例
如何評判一個網站設計的好
這是什麼網站？（站點ID）
我在哪個網頁上？（網頁名稱）
這個網站的主要欄目有哪些？（欄目清單）
在這個層上我有哪些選擇？（本頁導航）
我在導航系統的什麼位置？（「你在這里」的指示器）
我怎麼搜索？（搜索欄）
第七章：首先要承認，主頁不由你控制---設計主頁
主頁主要完成的任務
站點的標識和使命---告訴用戶這是什麼網站，做什麼的
站點層次---提供服務的概貌，包括內容，功能，服務是如何組織
搜索
導讀---需要有內容推介，功能推介
友情鏈接---預留空間放置廣告，交叉推廣，品牌合作
快捷方式---最常訪問的內容片段值得在網頁上放置鏈接
注冊
主頁需要滿足的抽象目標
讓用戶看到自己在尋找東西---讓用於想要的任何東西顯而易見
......還有我沒有尋找的---讓用戶看到一些精彩的內容，就算這些內容用戶沒有尋找
告訴用戶從哪開始
建立可信度和信任感
主頁的常見約束有哪些
每個人都想佔一席之地---推介內容過多
想要參與的人太多
一個尺寸要適合所有的人---普遍適用於大眾
主頁需要傳達整體形象，讓用戶一眼就能清楚你的網站是說什麼的
如何向用戶傳達網頁的整體形象
口號---靠近站點ID的地方，整個網站的描述
歡迎廣告---網站的簡要描述，在主頁的首要位置，不需要滾動屏幕就能看到
傳達信息的原則
需要多大空間就使用多大空間
但也不要使用過多的空間---保持簡短
不要把實名陳述當做歡迎廣告
最後的是進行測試
口號的注意事項
好的口號
不好的口號
清楚、言之有物
含混不清
長度適中，易讓用戶領會表達思想
太籠統
表達出網站特點和顯而易見的好處
把口號（傳達某種價值主張）和宗旨（表達某種指導原則，某個目標或某個理想）混淆起來
有個性、生動、有時候很俏皮
由於主頁獨特的職責，通常不必使用持久導航，它們之間的差異
欄目描述---主頁需要盡可能多的表現網頁內容，其他頁面不需要
不同的方向---主頁和其他頁面布局不同，主頁通常用
用於表示的空間更多---主頁上站點ID比較大，口號留有空間也較大
讓欄目的名稱保持不變，同樣的順序、同樣的文字和同樣的分組，盡可能多地保持視覺提示，同樣的字體，顏色和大小寫
下拉框存在的問題
用戶必須將它們找出來---必須找到下拉框，才能看到下拉列表
它們難以掃描
不好控制---下拉列表收縮速度難以控制
下拉框對於組織按照字母順序排列的項目比較有效
下拉框的優點是節約空間
任何共享的資源（共有區域）都會因為過度使用而遭到破壞---在主頁上增加更多的項目所得到的的和付出的並不一致，雖然給推薦欄目巨大的訪問量，但是讓主頁變得混亂，所遭受的損失將由所有欄目承擔
三、確定你沒有做錯的幾件事
第八章：農場主和牧羊人應該是朋友---為什麼Web設計團隊討論可用性是在浪費時間，如何避免這種情況
由於各自的職位不同，Web團隊成員對於好的網站設計的看法不同
通過測試將討論對錯轉移到什麼有效、什麼無效上，測試會讓我們看到用戶的動機、理解和反應的不同，從而不再讓我們堅持用戶和我們的想法相同
第九章：一天10美分的可用性測試---讓測試簡單，這樣你能進行充分的測試
焦點小組並不是可用行測試，焦點小組是在項目早期階段，用來收集用戶的意見和感覺
可用性測試主要是希望得到用戶是否知道該網站是做什麼的，並且能用它完成一項典型任務
測試的作用是什麼
如果想建立一個優秀的網站，一定要測試
測試一個用戶比不做測試好一倍
在項目中，在點測試一位用戶好過最後測試50位用戶
人們對招募用戶代表的重要性評估過高
測試的關鍵不是要證明什麼或者反駁什麼，而是了解你的判斷力
測試是一個迭代的過程
沒有什麼比現場用戶的反應更重要
尋找能夠反應目標群體的測試用戶，但別裹足不前
尋找的測試用戶可以和目標群體有差別的理由是什麼
差別的原因
例外
實際上，我們都是初學者
如果你的網站幾乎只由某一類用戶使用，且招募並不難，那就去招募
設計出的網站只有你的目標群體能使用，這通常並不是一個好主意
如果你的目標群體分為幾個明顯陣營，且各陣營有著完全不同的需求，那你至少要從每個陣營選擇用戶進行一次測試
專家通常不會介意對初學者來說很清楚的界面
如果使用你的網站需要專業的領域知識，那麼你需要在該領域中招募有專業知識的用戶
進行招募，需要注意的問題是什麼
提供合理的激勵
邀請要簡單
避免對網站（或網站背後的組織結構）進行預先討論
別不好意思請朋友幫忙
測試中遇到的問題
用戶不清楚概念
用戶找不到自己想要的字眼---網站用來組織內容的分類不符合用戶習慣；分類符合習慣但是沒有使用他們期望的名字
內容太多---減少頁面上的干擾；將需要看到的內容涉及的更加醒目
一些關於問題分類指南
問題
行為（用戶/主持）說明
正確解決方式
忽略Kayak（皮劃艇）問題
1.出現問題的人馬上發現自己偏離了原來的主題
2.用戶盡量回到原來的方向而不需要幫助
3.這種情況並沒有擾亂用戶的活動
可以忽略
抵制添加的沖動
增加一些內容，注釋，指導說明
去除某個讓人混淆的內容
不要太看重用戶對新功能的要求
抓住能夠的著的果子
1.恍然大悟型
2.便宜型
盡量實現變更
進行變更
只要你進行改變，就要仔細思考它將會影響哪些內容，當你把某些部分調整的更為突出時，想想是不是把其他內容的重要性降低了
四、大的方面和外界影響
第十章：可用性是基本禮貌---為什麼你的網站應該讓人尊敬
降低好感度的方式
隱藏我想要的信息
因為沒有按照你們的方式行事而懲罰我
向我詢問不必要的信息
敷衍我，欺騙我
給我設置障礙
你的網站看上去不專業
提高好感度的方式
知道用戶在你的網站上想做什麼，並讓網站明白簡易
告訴用戶，他們想知道的
盡量減少步驟
花點心思
（1）保證網站准確有用
（2）產生解決我的問題所需要的信息
（3）網站用清楚的方式表達
（4）組織良好，用戶可以輕松找到解決方案
知道用戶有哪些疑問，並給予解答
為用戶提供協助
容易從錯誤中恢復
如果不確定，記得道歉
總結
這本書主要講了Web設計的一些核心的原則，以及用戶在使用Web時的心理，並且基於用戶的信息，來設計Web的導航和主頁。並且結合實踐，在項目中需要不斷的進行可行性測試迭代，從而使Web可行。這樣的網站才是一個成功的網站，在符合用戶的習慣的基礎上，讓用戶能夠自行的解決問題，從而達到網站和用戶的目的。
資源類：
大家都知道，學習本身是一個特別耗費時間和財力的事情，但是為了自身發展，卻不得不學習，而且現在對於職業教育的課程特別貴，並且專業書籍也是非常貴的。雖然說是投資自己，但是對於生活來說還是較大的開銷，因此算是眾籌了，畢竟一個課程可能動則幾千塊，但是我並不貪心，所以分享的課程的價格很低，不會超過5塊錢吧，畢竟大家都是為了生活，只希望彌補一點生活壓力吧，各位加油吧
鏈接：在線教育視頻課（產品設計）
https://pan..com/s/1CqvJixlcarLewUcFYCcJWwpan..com
提取碼：afvs
俞軍產品方法論：
鏈接：
https://pan..com/s/1ws7N0ZrcuiY_GRZ8710zVQ
提取碼：lizk
梁寧產品思維30講：
鏈接：
https://pan..com/s/1KtdGjzV_cAWN8xlrMX7ENg
提取碼：tr7i
增長黑客：
鏈接：
https://pan..com/s/1T5lIjrpCu7oc5hYF1hpmag
提取碼：dpm3
4. 設計干貨～視覺表現建立信息層級【深度好文】
長文預警，建議先收藏後看！
作為視覺設計師，我們的作用除了最基本的滿足用戶審美需求，還會有品牌傳達，信息傳達，功能傳達等，其中想要信息有效的傳達給用戶，需要我們建立信息層級，而不是一股腦的丟給用戶自己理解，要做到這點有哪些視覺方法，這些方法的背後是否有理論依據，是本文的主題。
首先看下面兩張圖，左圖為相機拍攝的效果，右圖為人眼不移動時看到的效果，可以發現人眼對信息的獲取並不是一次性完成的，它不能同時產生多個焦點從而把視線停留在更多的地方，設計師需要考慮的是讓用戶通過眼球移動，按照一定的順序獲取信息，幫助獲取和理解的過程高效自然。
這個設計方法希望解決的主要是兩個問題：
1、用戶獲取和理解信息的效率
建立良好的信息層級，能讓用戶在有限的時間里，快速獲取和理解有用、感興趣的信息，並產生下一步行為；
2、設計師的專業性
設計師有意識的分析信息優先順序，了解哪些視覺表現手法可以建立信息層級及每一種方法背後的理論依據，不僅僅憑感覺做設計。
一、前期了解&分析
在開始設計前，除了對項目本身的背景目標有所了解外，視覺設計師針對具體的頁面也需要了解一些內容以幫助後面的設計有指導方向，包括頁面定位、氛圍營造、信息優先順序和用戶核心行為。
1.1、頁面定位是幫助分析頁面信息優先順序、核心行為的前提
通常有：
· 用戶是誰
· 用戶來自哪裡，即從什麼渠道來到該頁面
· 頁面內容定位，提供什麼、不提供什麼
· 頁面作用
舉個例子：
我們在設計采購直達市場新首頁時，交互通過對頁面的用戶對服務的熟知度進行分析，確定首頁的最核心目標用戶是新買家；頁面內容定位是展示市場的價值點，用戶產生的數據讓新買家對采購直達形成品牌的認知；
1.2、了解頁面需要營造的氛圍，能幫助我們判斷哪些元素能幫助達到目標，氛圍可以是內容本身，也可以通過視覺元素設計來營造，但必須注意氛圍營造不應強過用戶關注的內容本身
氛圍可能有：
· 新年主題大促
· 低折扣
· 信息鮮活
· 用戶活躍等等
以下是大促活動正式頁面，左圖延續了預熱期嘉年華的氛圍，但到活動開始階段氛圍已經不是重點，用戶更關心商品及折扣本身，右圖為調整後將氛圍的營造和類目圖片相結合，很好的解決了氛圍和內容的關系問題。
1.3、分析信息優先順序
1） 一級信息吸引用戶 ：假設用戶只會在這個頁面停留3-5秒，最能夠吸引用戶繼續瀏覽的是頁面的核心賣點，是一級信息，它必須少而精，在設計上要重點展示
2） 二級信息幫助理解 ：有了一級信息的吸引，用戶進一步了解內容而可能停留3-5分鍾，這時展示二級信息即提煉的精華內容，幫助用戶在盡量短時間內理解信息
3） 三級信息詳細了解 ：前兩類信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續停留更長的時間去詳細了解，這類信息量會更多，在設計上視覺層級會靠後，或通過交互方式展示、提供入口跳轉
1.4、分析用戶核心行為
不同類型用戶會在不同階段產生行為，我們要判斷這些行為最終導向是什麼？
比如商品詳情頁面，有些用戶在決定購買之前，會查看用戶評價、歷史交易等內容，但這些查看的行為，最終是幫助用戶判斷是否購買這個商品，所以核心行為是最終導向的購買。
有了這些分析，交互產出物文檔中會給予大模塊的信息優先順序和用戶行為優先順序，如下圖
視覺在進行細節設計前，需要對每個模塊內的具體內容進行優先順序的分析並產出如下示意圖並和交互和業務方確認，這些都是幫助視覺設計過程不偏離方向的重要產出物。
二、建立信息層級的視覺方法
視覺表現手法主要有以下幾種元素，實際設計中為了讓效果拉開主次，可能會同時使用多種方法以達到更好的效果：
· 位置
· 大小
· 距離
· 內容形式
· 色彩
2.1、位置
位置是在設計開始就會考慮的元素，人眼觀看事物時，總會遵循一些特定的規律，設計上遵循這些規律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。其中有兩條規律和位置設計元素有關：
1）當眼睛偏離視中心時，在偏離距離相等的情況下，人眼對左上的觀察最優，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為「最佳視域」。例如，網站logo、商品名、主題等重要信息，一般放在最佳視域內。當然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書寫的，這時最佳視域就是右上部。下圖是摘自摘自張帆 羅琦 宮曉東的《網頁界面設計藝術教程》對一個屏幕劃分後，用戶對不同位置不同的關注度差別：
2）第二條規律是眼睛沿水平方向運動比沿垂直方向運動快而且不易疲勞，一般先看到水平方向的物體，後看到垂直方向的物體。如下圖所示，左右的關注度差別要小於上下關注度差別，如想要體現並列的關系，左右排列會更合適；而如果要拉開差距，僅通過位置來實現，上下排列更容易達到目標。
舉個例子：如下圖時代周刊網站首頁，左側大圖是當天的焦點新聞，在信息層級上為一級信息，視覺表現上不僅面積大、內容形式用大圖，位置也放在優勢區域，可能98%的用戶會先關注到這個區域；
假如對設計稿的位置做調整如下，如果焦點新聞圖片是第一優先順序的信息，雖然它是大圖的形式，占的面積也夠大，但由於位置不在最佳視域，會被「Latest Headlines」分散一部分視線，可能只有60%的用戶先看到右側了；如果信息有主次，就要讓視覺表現上拉開差距，而不是一個接近均等的局面。
3）用戶優先關註上部，在網頁設計中有首屏的概念，首屏的信息比通過用戶拖動滾動條出現的第二、三屏層級要高
由於用戶使用的屏幕解析度不同造成首屏的高度會有差別，根據我們網站的數據，目前解析度高度為768佔多數，所以設計時會以768高度為基準，去掉瀏覽器本身的菜單等佔用的高度，實際展示給用戶的第一屏平均為600px，這個數據會根據以後目標用戶的解析度變化做相應的調整，我們在設計時可用這個數值作為首屏的參考線。
2.2、大小
在確定了模塊的位置後，我們會考慮給這模塊多大的地盤，大小會很直觀反映信息的重要等級。
有個體育海報設計的案例，涉及到四種球類運動包括足球、高爾夫球、棒球、籃球，如果按照實際大小設計會讓籃球和足球顯得更重要，為了體現體育的平等性，設計上將球的大小做了調整。
Giles Colborne的《簡約至上》書中的結論可以指導我們通過大小拉開差距：
1）重要的元素要大一些，即使比例失調也可以考慮
2）要想辦法表現出差距；如果一個元素的重要性是2，那就把它的大小做成4
還是以時代周刊首頁為例，目前的設計左側的焦點新聞圖占的面積和中間新聞圖對比拉開了差距，使得用戶容易先關注到一級信息而且不容易被周邊干擾；
我們對兩個新聞圖片的面積進行對比可以看到差距有4倍左右；
假如對界面調整如下：焦點新聞圖縮小兩倍後，可以看出視覺層級的區分就不明顯了。
除了元素本身所佔的面積會影響視覺層級，元素的細節放大程度也同樣起到作用，細節放大後，人眼會感受到元素更清晰，離眼睛更近而容易先去關注，當然前提是保證信息可被理解，如果局部細節放大但用戶不能理解信息是什麼就不能起到吸引用戶的作用；
下圖是一個模特公司的網站，首頁上隨機出現模特的照片包括面部和半身照片，放大臉部特徵後的照片保證了用戶能理解這是一個模特的形象，使得用戶會優先關注細節放大的照片。
2.3、距離
前面講到的將元素的細節放大，眼睛會感受離它更近而被優先注意到，雖然信息展現的媒介是個平面，但是通過視覺手段能體現出三維的效果，除了大小，還有其他視覺手法如下：
1）拉遠三維距離
想要達到距離被拉遠的效果，下面列舉的方法是讓信息變得不清晰，眼睛看起來無法對焦到信息上面，包括：
· 模糊元素，下圖背景的人物被模糊後，使它和兩個行動點以及右側的圖標不在一個平面上，離眼睛更遠，用戶在進行行動點和文字識別時也不會被模糊的背景所干擾
· 降低透明度也同樣可以起到作用，當有些背景圖模糊後比較難被整體感知，選擇降低透明度也能拉遠距離
· 增加半透明圖層，在界面色彩或元素比較多的情況下，僅降低透明度也可能無法拉開距離，如下圖希望突出TV購時，其他四個模塊降低透明度後由於本身色彩比較豐富而沒有明顯拉開差距，通過加上灰色的半透明圖層後，TV購以外的模塊自然的退到視線後面了。
2）拉近三維距離
· 增加投影是最常用到的讓元素看起來和其他內容不在同一平面的視覺手法，通常像彈出框、滑鼠移上後出現的浮層等由於要壓在其他信息之上，增加投影能幫助用戶聚焦在帶投影的模塊而不受下面信息的干擾
3）除了三維，二維距離對視覺層級也有影響，根據格式塔心理學接近性定律，距離較短或互相接近的部分容易組成整體；人眼對距離臨近的信息更容易先去關注，在視覺手法應用上，元素距離上一個焦點近的，視覺層級高。如下圖，第一層級的新聞焦點圖和右側的小圖片比較臨近，視線容易往右上角運動；
對距離做了調整後，雖然中間的小圖片本身比文字更吸引人，但由於焦點圖下方的標題距離更近而形成整體，視線容易先往下運動。
2.4、內容形式
確定了模塊的位置、大小和距離關系後，我們會繼續考慮內容的形式包括視頻、圖片、文字等，這里主要講我們經常使用的圖形和文字；相比起文字，圖片在抓住用戶眼球這一點上是功不可沒的，同時還能使用戶在短時間內形成形象記憶，從視覺層級上，人眼一般會先關注圖後關注文字。但僅僅這點還不夠，通過圖片抓取用戶眼球後引導視線到下一個關注點，是設計上更多會考慮的點，概括有以下表現手法：
1）方向性引導
圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢所指的方向、物體運動方向、光照方向等，這些特徵會引導人眼視線朝著設定的方向運動，從而達到視覺層級有主有次。
下圖假設中間的人物首先吸引了人的視線，為第一層級的信息，由於人眼注視方向為右側，使得用戶關注的下一個目標會轉向「coder」文字，為第二層級的信息。
下圖WHAT WE DO位置在左上角容易先被關注，同時右側的人物形象占的篇幅較大也會搶視線，但由於人物運動的方向下沒有其他信息，圖片沒有充分發揮引導的作用，用戶瀏覽起來會不太順暢
經過調整後的效果，雖然「WHAT WE DO」位置上並不在優勢區域，但通過圖片方向的引導很自然的讓人眼落在文字信息上。
2）符號引導
除了圖片，一些符號本身帶有順序和方向性，也能有效引導視線根據符號來瀏覽，包括阿拉伯數字、字母順序、時間順序、箭頭等。
下圖的排行榜前三名，雖然用戶更習慣從左到右閱讀，但由於數字的引導，視線也會被影響而按照1>2>3的順序閱讀，如果希望這樣的順序更加明顯，可以再通過放大1的圖片大小，拉開差距，結合多種視覺方法達到效果。
時間軸在界面中應用也很廣泛，人眼會受時間順序的影響去瀏覽信息，甚至會打破常規的如從左到右的瀏覽習慣，如下圖雖然2的位置更容易引導用戶優先瀏覽，但時間軸對信息的影響更明顯，一般用戶會優先查看模塊1，再根據時間先後從右向左關注模塊2。
2.5、色彩
色彩是影響用戶對界面第一印象的重要因素，色彩的應用對視覺層級的影響也能起到立竿見影的效果，總結起來人眼對色彩的關注度差別主要是以下兩點：
1）先暖色後冷色
色彩的不同色相，對人眼的刺激及產生的反映目前沒有找到絕對的先後順序，但是冷色類和暖色類色彩，是有明顯的層次差別的，如下圖，人眼一般會優先看到左側的圖片，這和我們人眼對不同波長的反映有一定關系;
從生理學上講，人眼晶狀體的調節，對於距離的變化是非常精密和靈敏的，我們能判斷出物體離我們的遠近，但是它有一定的限度，對於波長微小的差異就無法正確調節。眼睛在同一距離觀察不同波長的色彩時，波長長的暖色如紅、橙等色，在視網膜上形成內側映像；波長短的冷色如藍、紫色等，則在視網膜上形成外側映像。因此，暖色好象在前進，冷色好象在後退。
美國數字營銷公司Hubspot曾經做過一場A/B Test，用於測試不同顏色對於用戶點擊轉化造成的差異。 在圖中，左右兩個測試頁面在內容上完全一致，唯一不同的是按鈕的顏色，在超過2000人次的樣本測試中，最終紅色方案的點擊率超過綠色方案的點擊率足足21%。而在測試之前，大部分的研究員都猜測綠色方案會獲得更高的點擊，因為就直覺而言，綠色代表著通行、准許通過的意思，而紅色則更傾向於警告、阻止意味。
這個測試從一定程度上反映了暖色對用戶關注度和行動力的影響，當然並不是說為了提高點擊率就要用暖色，具體的色彩風格還是要根據產品定位來設計。
2）先高反差後低反差
除了冷暖色對眼睛的刺激不同，色彩的反差是最容易造成關注度差別的因素，在自然界動物為了生存，運用的保護色就是和反差相關，如圖中的貓頭鷹，和它生活的環境相關，毛色都進化成類似的色彩，以起到隱藏保護的作用；相反，顏色反差大就特別容易引起注視，如下黃色鬱金香中獨特的紅色
前面講到的大小、遠近都是體現能反差的視覺手段，色彩上的反差主要通過以下方法達到效果：
· 色相反差，下圖中主色調為藍色，藍色行動點和整體顏色一致，層級相對較弱，而綠色行動點和藍色在色相上的反差使得層級變高
但顏色有很多種，如何確定反差的大小？我們可以通過色相環來查看，如下圖所示，色相反差強弱取決於色相環上的距離，距離越大對比越強，反之則越弱。
· 飽和度反差和明度反差比較容易理解，而且他們有數值可以控制，兩個顏色之間飽和度或明度數值相差越大，反差也就越大，反之亦然，看看具體的實例：如以下導航圖，當前的人物icon明度較高，和低明度黑色背景形成高反差而容易先被注視
以下環狀餅圖，已完成的百分比飽和度高，和總體低飽和度形成對比，相同色相通過飽和度進行對比不僅能拉開差距形成視覺層級，同時視覺效果具有整體性
總結一下上面講到的視覺表現手法，形成表格方便大家記憶如下：
三、審視頁面視覺流
運用視覺表現手法建立信息層級後，需要設計師不斷審視用戶的瀏覽順序是否真如我們期望的層級1到2到3…，包括頁面大模塊和模塊內的瀏覽，這些瀏覽順序會在頁面上形成視覺流；
審視頁面視覺流能幫助我們判斷用戶瀏覽頁面是否順暢，瀏覽的順序是否有規律可循；如果我們的設計不能有效引導用戶的視線，用戶的瀏覽更趨向於隨機性，就難以將希望表達的信息快速傳到到位。
下面的內容主要是介紹比較典型的視覺流及每種類型的特徵，包括：
· 線性視覺流
· 導向性視覺流
· 跳動性視覺流
· 放射性視覺流
1）線性視覺流
· 橫向視覺流引導用戶視線從左到右或從右到左視覺流動，是最符合用戶視覺習慣的瀏覽方式，給人穩定可信之感。
如digg.com首頁，整體頁面和單個模塊都是典型的橫向視覺流，用戶從左到右瀏覽到邊界後，視線回掃到下一行繼續從左到右閱讀；這里會有一個橫向瀏覽最佳區域的數值，如digg選用的頁面寬度為1000px左右，每行展示3個item，用戶屏幕的解析度變大後，這兩個數值是否應該繼續增加，增加到什麼程度，是人眼獲取信息效率最高的？這個疑問我還沒有找到相應的理論或實驗支撐，後續再查找資料。
· 縱向視覺流引導用戶視線從上到下瀏覽，由於眼睛縱向的運動方式需要瞳孔不斷對焦，當縱向掃視頁面模塊時效率和橫向瀏覽相差不大，但閱讀細節時效率會變低，如縱向排列的文字，更適用於需要逐字閱讀的古詩古文；
下圖是將原來橫向視覺流的digg首頁的排版調整後，變成了縱向視覺流，除了大圖，用戶會選擇三欄的其中一列縱向瀏覽直到找到某一目標信息後，橫向瀏覽細節。
網頁界面的縱向高度限制比橫向小，因為用戶習慣上下滾動來瀏覽更多信息，當用戶還處於確定目標信息時，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息；如下圖facebook日歷界面，時間軸橫向排列時，由於寬度受限，需要橫向切換或滾動條來查看更多日期：
將時間軸方向調整為縱向，使得用戶能通過上下滾動更高效查看當月所有日期。
· 斜線視覺流能營造運動感和速度感，但由於角度傾斜使文字認知上會有一定困難，大量文字信息排列不適合這種視覺流，常用於設計中的點綴或本身信息量比較少的界面，如下圖的健身俱樂部海報；
還有網頁界面上小范圍的斜線視覺流，來體現運動感。
· 曲線視覺流，用戶視線會形成個性化的曲線，具有律動和活潑感，這種類型由於眼動幅度較大，長時間大量的運用會產生視覺疲勞，所以不適合大段文字使用，一般會結合圖形做曲線視覺流，讓用戶的視線在圖像區域稍作停留；
如下圖在曲線視覺流中配上圖片，讓視線在圖片這個節點上稍作停留並瀏覽這個節點的內容，然後繼續延曲線瀏覽。
2）導向性視覺流
如下圖所示，導向性視覺流會設計一個誘導元素吸引用戶注意，再通過誘導元素注意到目標信息；常見的誘導元素可以分為線條、形象包括人物或物品、指示符號如箭頭字母等。這種視覺流要把握好誘導元素與目標信息的主次關系，純誘導元素不宜太強，否則會削弱目標信息的傳播力度；如果能在誘導元素中包含部分目標信息，可以增加信息傳達的有效性。
如下圖管子里的紅色液體是運動的，吸引用戶沿著它運動的方向到達目標消息
前面講到的內容形式，從圖片或符號引導到下一個視覺焦點，從視覺流角度也是導向性類型，下面這兩個例子就是在頁面局部使用了導向性視覺流
3）跳動性視覺流
在性質相同或相似的信息中，選擇突出或感興趣的信息之間跳動瀏覽, 給人一種自主選擇的權利，但設計上也可以通過調整元素的強弱，不露痕跡的傳遞主次。
如前面提過的模特公司網站界面，模特的照片都是同等性質的信息，用戶瀏覽具有一定的隨機性，但通過放大和縮小人像同樣也傳遞了主次。
4）放射性視覺流
視線開端在頁面中部，使中間的元素沖擊感最強，信息傳達最明確，再形成由中部發散出去的視覺運動。
比如很多汽車網站，中間的主圖最能體現信息的核心，通過主圖再發散到上方的導航或下方的其他服務入口。
以上介紹的四種視覺流類型是比較典型的，但不代表全部，我們也可以設計出更富創意的視覺流，無論是那種路徑，用戶瀏覽是否順暢，信息是否按照主次傳遞到位，是我們要一直堅守的目標。
最後再總結一下：
1.項目前期我們需要了解頁面營造的氛圍，內容定位；和交互一起分析信息的優先順序，用戶的核心行為；前期的准備能幫助視覺設計過程不偏離方向
2. 通過位置、大小、距離、內容形式、色彩這些視覺表現方法來建立信息層級
3. 設計過程和結束都要不斷審視頁面視覺流，看看用戶瀏覽是否順暢。
我們有意識的分析用戶關注的信息優先順序，並通過視覺表現出來，是視覺設計師這個崗位很重要的職責，希望梳理的這些方法能幫助我們將這份職責做的更好，我也樂在其中，與大家共勉！
我和朋友做了一款小程序理論塢 · 打造屬於你自己的理論庫 ；有很多關於交互的術語、心理學、管理學的定律和理論， 微信掃描 下面小程序碼快速體驗！
5. 優秀的電商網站如何建設
1、站點地圖
設計網站地圖主要目標是為可以給用戶提供良好的瀏覽使用體驗，用戶必須始終知道他們所在站點的位置，如果站點太大，理想的是插入一個地圖，以便用戶更容易找到他們正在尋找的內容。
2、首頁簡約整潔
網站的主頁應立即傳達核心信息。畢竟，很少閱讀網站上的文字。相反我們快速瀏覽頁面，挑選關鍵詞，句子和圖像。
3、價值信息
當用戶訪問網站時，他們正在尋找他們感興趣的或有價值的信息。因此，我們必須考慮質量，數量並不是很重要。
4、要標新立異與眾不同
就是有一個簡單性和獨特性，才可以更快地被識別和傳達。要避免和其他標志風格相似才會更令人難忘。
5、要有視覺層次感
設計時要考慮視覺層次結構是設計的重要原則，有助於以清晰有效的方式顯示您的內容。通過正確使用層次結構，您可以從最重要的部分開始按優先展示給網站訪問者。
6、易於閱讀
可讀性是人們識別詞語，句子和短語的難易程度。當您網站的可讀性很高時，用戶將可以輕松地對其掃描或瀏覽。
6. 怎麼設計官網才能讓網站看起來比較有檔次
訪問者打開網站首先看到的是什麼？內容，內容至關重要，每個設計師都希望以最有用，最直觀的方式在其網站上展示內容。因此，為你的內容選擇布局是尤為重要的。
許多人認為，他網站的Web布局應該是獨一無二的，才能滿足需要，事實並非如此。
如果你有訪問現在流行的網站，你會發現其中有許多網站都使用相似的布局。這不是巧合，也不是出於懶惰，這是因為這些布局具有以下優點：
1.單列
單列布局在一個垂直列中顯示主要內容。此類布局可能是該列表中最簡單的布局，並且對於用戶來說是最容易導航的。訪客只需向下滾動即可查看更多內容。
盡管簡單，但單列布局在許多網站中還是很受歡迎。手機也對這種布局的普及產生了影響-單列布局非常適合手機。
2.分屏
拆分屏幕（或一個屏幕一分為二）的Web布局非常適合具有兩個相同重要性的主要內容的頁面。
3.不對稱布局
不對稱是布局兩側之間缺乏平等性。不對稱性是藝術界長期以來最喜歡的技術，最近在創建網站布局時在設計師中變得很流行。
許多人將不對稱與不平衡混為一談，但實際上，不對稱的目標是在不可能或不希望對兩個部分使用相等的權重時創建一個平衡。使用不對稱性可以產生張力和動力，並且不對稱性可以通過將用戶的注意力集中在單個對象（焦點）上來突出這一點，通過更改每個不對稱內容的寬度，比例和顏色，設計人員促使網站保持視覺吸引力。
4.紙牌網格
卡片是存放可點擊模塊的好布局-它們使設計人員能夠以可消化的方式展示大量信息。咬合大小的預覽（通常是圖像和簡短說明）可幫助訪問者找到自己喜歡的內容，並通過單擊或點擊卡片來深入了解細節。
紙牌網格最重要的一點是幾乎可以無限操作。網格的大小，間距和列數可以變化，並且卡的樣式可以根據屏幕大小而變化（可以重新排列卡以適合任何屏幕）。這就是為什麼卡片網格在響應式設計中表現如此出色的原因。
5.盒子
此布局具有一個較大的頁眉寬度框和一些較小的框，每個框占據較大框的屏幕空間的一部分。較小的盒子數可以從2到5不等。每個框都可以是一個鏈接，可鏈接到更大，更復雜的頁面。
6.特色圖片
網站布局基於以下想法：在設計中使用圖像是銷售產品最快的方法。精選圖片營造出與訪客之間的情感聯系-大而粗體的照片或物體插圖表達出鮮明的印象，並給人留下深刻的第一印象。
結論
設計網站時，請務必記住內容永遠是最重要的。該網站的主要目的仍然是發布易於消化的內容。無論你選擇使用哪種網站布局，都必須選擇一種能使你的內容脫穎而出的網站。
7. 網站建設如何優化視覺效果來提高用戶轉化
一、網站的布局要分清主次
在網站建設時我們首先要注意網站的布局，這對於用戶體驗來說非常重要。主次分明的布局對於幫助用戶更加便捷的瀏覽網站非常有效，用戶可以在最短的時間內獲取最關鍵的信息。這樣可以收獲有效的流量，獲取更多的用戶線索。
二、注意頁面內容相似性
頁面的相似性就是在頁面設計時，盡量將功能相近的內容放在一起，或是在頁面中加入相關的推薦，也可以有效提升用戶的使用體驗。
這一點已經受到了廣泛的運用，在傳統的頁面設計中，當我們看到一篇高質量的文章時，往往可以在底部發現相關推薦的功能，這一類功能可以吸引用戶的注意力，向用戶推薦相關的文章，來提升轉化率。
三、分層以及配色
讓網站充滿層次感。一個好的網頁要根據網頁中不同的元素做好分層，通過色彩以及大小的轉變都會讓網站充滿層次感。在色彩方面可以通過色調的冷暖來進行分層。在大小方面，可以吧重要信息加大加粗字體或是圖片尺寸的改變來營造層次分明的感覺。
一個層次感強的網頁可以更容易被用戶認可，有效提高用戶訪問量。
四、頁面排版
頁面排版對於整個網頁來說尤為重要，他是將頁面中的各種元素通過統一的架構來進行表現。如果網頁的排版雜亂無章，就會給用戶的瀏覽帶來很大的麻煩。要想給用戶帶來好的瀏覽體驗，排版必須清晰且突出重點。
8. 如何有效建立視覺層級
為頁面，尤其是企業網站落地頁，建立清晰的視覺層級可以確保用戶在正確的時機看到正確的信息，並且不會因無關或次要的內容而分心。
1. 在正確的時機回答正確的問題
通常來說，用戶在查看落地頁時會下意識地提出一系列問題。這些問題依次為：
這個頁面提供了什麼？（價值主張）
對我有什麼幫助？（優勢）
產品如何運作？（特點）
為什麼我要信任此頁面？（社會認同）
接下來我該怎麼辦？（行為召喚）
緊湊的頁面布局
F式布局
這個元素是否可以刪除？
如果這個元素非常有價值無法刪除，我可以隱藏這個元素嗎？
是否可以將元素減弱，放在子頁面、標簽下或者折疊面板中？
因此，頁面的視覺層級在一定程度上能夠映射用戶提出這些問題的順序是至關重要的。頁面內容以正確的結構順序展示只完成了有效視覺層級的一半，另一個挑戰是確保用戶看到最關鍵的屏幕元素。我們可以用多種方式來吸引用戶的注意力，單從視覺上來講包括但不限於：顏色、布局及交互等。
Tips：
（1）顏色——清晰的色彩體系
品牌色：延續品牌視覺感受，固化品牌形象；
轉化色：盡量選擇與品牌相對的對比色，明顯區別於品牌色，常見的轉化色為紅色、橙色等，這些色彩能夠刺激用戶進行點擊，進行有效的行為召喚。
（2）布局
緊湊的布局更能夠牢牢抓住用戶視線，有效區域寬度推薦：1180px。
F式布局是一種科學的布局方法，基本原理依據了大量的眼動研究。據此，我們習慣性的把重要元素（諸如品牌logo、導航欄、行為召喚控制項）放在左邊，而右邊一般放置一些關聯信息。
（3）交互——友好的體驗
Akob Nielsen（雅各布·尼爾森）的十大交互設計原則是廣泛的經驗法則，而不是特定的可用性指導原則。因此，我們不能把它上升為一種標准，而是應該當做一種經驗來學習，然後跟現實中的設計結合來使用。
常用的交互原則為：狀態可見、環境貼切、一致性原則、防錯及人性化幫助。
2. 簡化界面
建議通過三個問題系統地檢查落地頁上的每個元素。
如果刪除，後果是什麼？是否會比其他元素造成的認知負擔更具破壞性？如果不會，最好刪除。
3. 測試你的視覺層級
有一種便捷的方法可以測試用戶是否看到了必要的屏幕元素，這種方法叫「五秒測試」，測試過程是向用戶展示你的設計，五秒鍾後讓用戶回憶他們記住了什麼元素。