在網頁設計中可以通過一些視覺的方法，實現對於用戶注意點的潛在的引導，使得用戶關注到我們希望他關注到的內容，甚至有可能以我們希望出現的瀏覽順序完成頁面的瀏覽。這種方法，我們稱之為網頁的視覺引導。
網頁的視覺引導是基於設計師對於用戶體驗的分析，利用人眼在視覺上的習慣潛移默化的引導用戶按照設計師的設計邏輯關注頁面的方法。這樣的視覺引導來源於平面設計的一些視覺規律，但由於網頁設計的獨特性又有了一些獨特的演繹
人眼是一個精密的視覺儀器，他能幫助我們捕捉到身邊視野範圍內所有的視覺信息，但這些信息如果完全捕捉下來是非常巨大的，於是大腦在視覺信息收集歸檔的過程中設置了一個“過濾”的“閥門”，撇除了那些被大腦定義為“無效”的信息，並記錄下大腦確認為“有用”的信息——網頁的視覺引導就是基於這樣一個基本規律而產生的心理行為引導。
網頁的視覺引導方法多樣，設計師在實際使用中可以根據實際情況靈活的組合使用。歸納起來的話，大致有以下這些方法：
大小的變化
人眼的視覺習慣，總是會對大的東西較為關注，而忽略掉小的東西——你看到一個大象的時候，是很難注意在大象身邊的老鼠的。
利用這個規律，在網頁排版佈局的時候，我們可以通過內容板塊的大小來引導用戶瀏覽較為重要的內容。
大小的變化，在整個網頁設計的視覺引導中是最淺顯、也是最常用的方法。這也是為什麼很多需求方，總是喜歡說：“標題放大！LOGO放大！”的原因——對於他們而言，這是他們所知的最有效的突出重點的辦法。
形狀的變化
人眼總是喜歡捕捉那些“不同”的事物。這也是所有設計最初需要遵循的規律，在一片一模一樣事物中，突然出現一個形狀不同的事物，總是會讓你下意識的會關注那個“與眾不同”的東西。
在一堆方形中，圓形總是非常突出，在一堆規則的形狀中，不規則的形狀總是惹人注目。網頁設計也是如此。在四平八穩的頁面中點綴一些不一樣的元素，不僅可以使得頁面靈動，增加形式上的趣味，更能使得需要突出的東西得到關注。
當然，所有的元素都變化了，變化也就沒有了，反而會顯得雜亂無章、亂七八糟。所以變化的運用需要拿捏住度。
顏色的變化
人眼的視覺捕捉系統是由錐狀細胞和桿狀細胞組成的。錐狀細胞負責感知光的強弱和色彩的變化，而桿狀細胞則是分辨色彩的明暗。錐狀細胞更喜歡捕捉那些色彩鮮豔有強烈刺激的顏色，而桿狀細胞則喜歡捕捉那些明暗反差大的事物。
我們在實際設計中會發現，在暗色背景下使用亮色且純度較高的文字（比如黑色背景下使用黃字）和在亮色背景下使用反差較大的純色字體（比如白底紅字），都能產生較為“醒目”的效果。並且，發光的元素，往往相較之不發光的元素，更容易引起人們的注意——這些應用便是遵循了上述的兩個規律。
需要注意的是，在實際製作中需要注意，顏色純度的運用、大小和比例是需要控制的，因為人的視覺習慣是在顏色刺激越強烈的事物上停留的時間越短，且面積越大，這個效應越明顯。所以較為強烈的色彩運用建議放在頁面上較為重要的內容上。
發光的元素可以略微使用增加頁面氣氛並強調某些局部的需要強調的元素，但運用過多，也會使得頁面滿屏花亮，毫無重點——廣告攝影課的時候，我們的老師曾經說過，最好的補光只需要一個光源，因為天上只有一個太陽。
空間的變化
關注時尚人像攝影的朋友會發現，化妝師們總是想盡一切辦法將模特的臉蛋打造的光鮮立體——立體的東西總是容易讓人留下深刻印象，因為自然環境是立體的，有了立體感，視覺上才會有空間的感覺。
在PHOTOSHOP中，有兩個較為常用的效果：浮雕與陰影。這兩個工具可以幫助我們在二維的頁面展示中製造“偽空間”的效果，這種偽空間的效果，一方面能使得頁面更有代入感和層次感，另一方面也是網頁視覺引導的方法之一——人眼總是會優先關注立體的並且看起來“近”的事物。所以在網頁設計中，我們也可以通過這種“偽空間”的錯覺讓用戶優先關注那些看起來更“近”更立體的“東西”。
當然，並非所有情況下，都是越近越能引起我們注意的，平行透視就是一個特例。平行透視最大的特點就是，能讓我們跟隨著透視的引導“聚焦”於中心點上。所以不少設計的時候，都會使用放射性的佈局，使得中心的元素能為人們關注。
另外，浮雕效果裡的“凸起”與“下凹”是具有強烈暗示意味的。當物件“凸起”的時候，我們往往覺得這個地方是“可點擊”的，所以你會發現，很多軟件界面以及網頁設計的時候，都會使用“凸起”的按鈕，而“下凹”給人的印象是“不可點擊”的，所以 “下凹”往往用類似在文字框和“按鈕被點下去”這樣的情況下——當然，需要注意的是，文字和按鈕都是灰色且灰值反差較小的按鈕，無論是“凸起”還是“下凹”都會給人“此按鈕不可點擊”的感覺，這些小細節在設計時，是尤其需要注意的。
疏密的變化
為什麼對於12像素的漢字，最適合的行高是18-24像素之間？
很多人會說，這是一個便於閱讀的行間距。的確，從閱讀的角度，低於18個像素的行間距，看起來密密麻麻非常吃力——甚至患有密集恐懼症的用戶會拒絕閱讀；而高於24個像素的行間距，又會讓人看起來空的難受，視覺焦點在換行的時候甚至會有短暫的停頓。
但是，不知道大家是否想過，為什麼我們會對閱讀有這樣的感受？究其原因，還是因為大腦對於不同密度信息採取不同的記憶方式所導致的。
大腦對於大量類似的信息，會採用“批處理”的方式進行記憶（也就是提煉出共性，記個大概），密度越大這種方式越明顯——除非你是主動採取對於某個細節的關注。而離開較遠的兩個事物，大腦又會判斷這兩個事物“沒有關聯”，於是產生注意力的斷點以便節約大腦資源。所以，這就要求網頁設計師在頁面排版佈局的時候，注意到板塊與板塊之間，元素與元素之間的合適的密度。這樣才能保證良好的閱讀和有效的視覺引導。
包裝過的標題更容易讓人注意到
前文說到過，相對於圖片而言，“標題性”的文字更容易被人記住。在人的潛意識中，總是會對“包裝精美”的東西記憶猶新——這一點在標題的包裝上也是如此。
使用合適的字體包裝，能夠讓人對於標題產生關注度和記憶點。在人腦中，對於這樣的標題，總是會貼上“重要信息”的標籤。所以在字體設計，對於網頁設計而言是較為重要的一環。好的標題設計，甚至會提升設計的檔次。
當然，標題是總領全文的東西，所以字數一定要短，便於記憶。同時，字體的包裝也應該秉承“少而精”的原則，一定要將設計包裝的精力集中在需要重點突出的信息上。
恰當的圖片能幫助“標題”積攢眼球
雖然“標題”相對於圖片更容易產生記憶。但是恰當的圖片是能“提示”大腦去關注“標題”的——如果將圖片作為“標題”的美化包裝，那這個理論就容易理解的多了。
人們在瀏覽圖片的時候，那些抽象的、風景的（尤其是像宇宙、星空這種的）、較為規律的圖形化圖片都很難引起視覺的注意力，所以這類圖片通常都會用來做桌面或者頁面、圖片背景的。而具體的事物——比如產品照片、人物（尤其是身材勻稱的美女）的照片之類的，往往更容易產生帶入感，使人有興趣對於圖片包裝下的標題產生視覺焦點。
文字、圖表相對於數字更容易獲得關注
對於大腦而言，我們更容易記住文字的內容——除了數字之外。
“一看到一大堆的數字我就頭疼”——很多人都有這種困擾。阿拉伯數字對於大腦而言並非直接記憶的對象，所以相對於文字，阿拉伯數字往往不夠直觀——當然如果你希望達到讓人感覺“雖然數不清是幾位數，但總之數字很大很大”的效果，阿拉伯數字還是有很好的效果的。
對於單一的數字，超過5位數的數字就已經很難讓人記住——就比如，你會記得自己的電話號碼，但你很難記住你朋友的手機號碼——除非你們熟到一定程度。如果這樣的數字出現一堆……哦！賣嘎達！饒了我吧！
較為好的解決方案是使用文字——畢竟文字是最接近大腦記憶的方式，簡介明瞭（一百萬總是比看1,000,000來的直接吧！）。而面對大量的數據報表，牽扯到對比、趨勢、比例、這樣的數字信息的時候，圖表化是更好的選擇。簡單的圖形，對應直觀的效果，這種情況下。相比較數字更能說清楚問題——這時候的記憶並非需要深度記憶，人們往往只需要記一個趨勢。所以與其選擇複雜的數字表單，不如使用圖表來的直接且容易記憶。
需要注意的是，圖表的製作也是有講究的。對於有連貫性的數據，儘量用折線圖這樣的方式較為合理。而有對比性卻不連貫的數據，使用柱狀圖較為合適，而比例類型的圖表則可以使用餅狀圖，圖表需要是簡單易懂且能直接說明問題的，儘量減少文字話的描述，儘量避免在一張圖裡牽扯到較為複雜的數據——如果你做過PPT那就會發現，其中的道理是相通的。
文字、圖表相對於數字更容易獲得關注
有人總結過：活動性的網頁只要做的華麗，大紅大紫，光線絢麗，再加上放滿金光閃閃的各種活動獎勵。基本上就算成功了。
不得不說，雖然讓人感覺有些投機取巧的感覺，但這仍然是一句有用的大實話——這句話前半句說得是氣氛的營造對於網頁設計的重要性。後半句則說的是暗示性的圖型元素更容易吸引人的注意。
說到這裡，也許你又在疑問：之前不是說文字“標題”比圖片更容易獲得關注麼？事實上，前一章節說的是“一般情況”下，有一般情況，自然有特殊情況了——當圖片本身的信息單一，且含有非常明確的信息的時候，往往這樣的圖片更容易被人們所關注。
什麼樣的圖片是具有暗示性？寶箱、禮盒、金條、豪車、美女（又是美女……你懂的！）之類人們比較關注的信息明確的單一事物，還有類似箭頭、點擊狀的鼠標手、視頻的播放暫停按鈕圖形等等具有心理暗示意義的圖形。這些都是暗示性的圖片元素。
當然，需要注意的是，此類圖片的應用必須要切題，否則依然會產生負效果。很多頁遊在做廣告的時候，都會用到各種暗示性的圖片，甚至有些圖片還會非常“過火”（這種行為必須強烈譴責，簡直是帶壞社會風氣）。用戶被這些圖片所吸應，點開遊戲一看，完全兩碼事，於是在連遊戲名字都沒記住的情況下就流失了——快速的帶入流量後快速的流失，任何網站都是不希望這樣的情況發生的。
一靜不如一動
網頁之所以區別於傳統平面排版很大程度上在於網頁設計的多媒體特性。對於用戶而言，動畫、視頻這樣的元素總是比靜態的圖片更容易吸引眼球的。
對於這些動態的元素，我的態度是相對謹慎的。動態效果是點睛之筆，微微有幾處效果明顯，用多了，反而會分散用戶的注意力降低關注黏度。而視頻以及其他交互的動態元素，我更喜歡被動響應的——主動幫助用戶決定某些事情的那種強制行為，在我看來是非常不友好的。——任何的視覺引導，都應該秉承非強迫性的原則，任何強制體驗的行為，在理論上都是會對視覺體驗產生風險的。
愛讀微課（iread360.com） | 色技手稿
閱讀更多 色技手稿 的文章
