国产视频一二三四区_国产伦视频一区二区三区_五月天久久狠狠_欧美一区二区三区日韩_97在线观看免费高_欧美成人在线免费视频_美女久久网站_中国女人做爰视频_国产精品久久久久久久浪潮网站_乱熟女高潮一区二区在线_国产一区二区在线影院_91超碰在线免费观看

不知道大家看過《網球王子》這部動畫片沒有？里面有一位叫手冢國光的選手，非常擅長通過回球的旋轉變化和回球路線，引導對手以他所希望的方式，將球回擊到他所希望的回球位置，堪稱網球界的魔術師。

同樣的，在網頁設計中，我們也可以通過一些視覺的方法，實現對用戶注意點的潛在引導，使得用戶關注到我們希望他關注到的內容，甚至有可能以我們希望出現的瀏覽順序完成頁面的瀏覽。這種方法，我們稱之為網頁的視覺引導。

網頁的視覺引導是基于設計師對于用戶體驗的分析，利用人眼在視覺上的習慣

潛移默化的引導用戶按照設計師的設計邏輯關注頁面的方法。這樣的視覺引導來源于平面設計的一些視覺規律，但由于網頁設計的獨特性又有了一些獨特的演繹。在這一小節，我們就來解密如何利用網頁的視覺引導來完成這樣的視覺魔法。

人眼是一個精密的視覺儀器，它能幫助我們捕捉到身邊視野范圍內所有的視覺信息，但這些信息如果完全捕捉下來是非常巨大的，于是大腦在視覺信息收集歸檔的過程中設置了一個“過濾”的“閥門”，撇除了那些被大腦定義為“無效”的信息，并記錄下大腦確認為“有用”的信息——網頁的視覺引導就是基于此規律而產生的心理行為引導。

網頁的視覺引導方法多樣，設計師在實際使用中可以根據實際情況靈活的組合使用。歸納起來的話，大致有以下這些方法。

1．大小的變化

人眼的視覺習慣，總是會對大的東西較為關注，而忽略掉小的東西。你看到一個大象的時候，是很難注意在大象身邊的老鼠的。

利用這個規律，在網頁排版布局的時候，我們可以通過內容板塊的大小來引導用戶瀏覽較為重要的內容。

大小的變化，在整個網頁設計的視覺引導中是淺顯、也是常用的方法。這也是為什么很多需求方，總是喜歡說“標題放大！LOGO放大”的原因——對于他們而言，這是他們所知的有效地突出重點的辦法。

2．形狀的變化

人眼總是喜歡捕捉那些“不同”的事物，這也是所有設計初需要遵循的規律，在一片一模一樣事物中，突然出現一個形狀不同的事物，總是會讓你下意識地關注那個“與眾不同”的東西。

在一堆方形中，圓形總是非常突出；在一堆規則的形狀中，不規則的形狀總是惹人注目。網頁設計也是如此，在四平八穩的頁面中點綴一些不一樣的元素，不僅可以使得頁面靈動，增加形式上的趣味，更能使得需要突出的東西得到關注。

當然，所有的元素都變化了，變化也就沒有了，反而會顯得雜亂無章、亂七八糟。所以變化的運用需要拿捏住度。

3．顏色的變化

人眼的視覺捕捉系統是由錐狀細胞和桿狀細胞組成的。錐狀細胞負責感知光的強弱和色彩的變化，而桿狀細胞則是分辨色彩的明暗。錐狀細胞更喜歡捕捉那些色彩鮮艷有強烈刺激的顏色，而桿狀細胞則喜歡捕捉那些明暗反差大的事物。

我們在實際設計中會發現，在暗色背景下使用亮色且純度較高的文字（比如黑色背景下使用黃字）和在亮色背景下使用反差較大的純色字體（比如白底紅字），都能產生較為“醒目”的效果。并且，發光的元素往往相較不發光的元素，更容易引起人們的注意——這些應用便是遵循了上述兩個規律。

在實際制作中需要注意，顏色純度的運用、大小和比例是需要控制的，因為人的視覺習慣是在顏色刺激越強烈的事物上停留的時間越短，且面積越大，這個效應越明顯。所以較為強烈的色彩運用建議放在頁面上較為重要的內容上。

發光的元素可以增加頁面氣氛并強調某些局部重要元素，但運用過多，也會使得頁面滿屏花亮，毫無重點。廣告攝影課的時候，我老師曾經說過，好的補光只需要一個光源，因為天上只有一個太陽。

4．空間的變化

關注時尚人像攝影的朋友會發現，化妝師們總是想盡一切辦法將模特的臉蛋打造得光鮮立體——立體的東西總是容易讓人留下深刻印象，因為自然環境是立體的，有了立體感，視覺上才會有空間的感覺。

在Photoshop中有兩個常用的效果：浮雕與陰影。這兩個工具可以幫助我們在二維的頁面展示中制造“偽空間”的效果，一方面能使得頁面更有代入感和層次感，另一方面也是網頁視覺引導的方法之一。人眼總是會優先關注立體的并且看起來“近”的事物，所以在網頁設計中，我們也可以通過這種“偽空間”的錯覺讓用戶優先關注那些看起來更“近”更立體的“東西”。

當然，并非所有情況下，都是越近越能引起我們注意的，平行透視就是一個特例。平行透視大的特點就是，能讓我們跟隨著透視的引導“聚焦”于中心點上。所以做設計時經常使用放射性的布局，使得中心的元素能為人們關注。

另外，浮雕效果里的“凸起”與“下凹”是具有強烈暗示意味的。當物件“凸起”的時候，我們會覺得這個地方是“可點擊”的，所以你會發現，很多軟件界面以及網頁設計的時候，都會使用“凸起”的按鈕，而“下凹”給人的印象是“不可點擊”的，所以 “下凹”往往用在類似文字框和“按鈕被點下去”這樣的情況下。需要注意的是，文字和按鈕都是灰色且灰值反差較小的按鈕，無論是“凸起”還是“下凹”都會給人“此按鈕不可點擊”的感覺。

5．疏密的變化

為什么對于12像素的漢字，適合的行高是18~24像素之間？

很多人會說，這是一個便于閱讀的行間距。的確，從閱讀的角度，低于18個像素的行間距，看起來密密麻麻非常吃力——甚至患有密集恐懼癥的用戶會拒絕閱讀；而高于24個像素的行間距，又會讓人看起來空的難受，視覺焦點在換行時甚至會有短暫的停頓。

但為什么我們會對閱讀有這樣的感受？究其原因，還是由于大腦對于不同密度信息采取不同的記憶方式所導致的。

大腦對于大量類似的信息，會采用“批處理”的方式進行記憶（也就是提煉出共性，記個大概），信息密度越大這種方式越明顯，除非你主動關注某個細節。而離開較遠的兩個事物，大腦又會判斷這兩個事物“沒有關聯”，并產生注意力的斷點以便節約大腦資源。所以，這就要求網頁設計師在頁面排版布局的時候，注意板塊與板塊之間，元素與元素之間的密度要合適，這樣才能保證良好的閱讀和有效的視覺引導。

6．包裝過的標題更容易讓人注意到

前文說到過，相對于圖片而言，“標題性”的文字更容易被人記住。在人的潛意識中，總是會對“包裝精美”的東西記憶猶新——這一點在標題的包裝上也是如此。

使用合適的字體包裝，能夠讓人對標題產生關注度和記憶點。在人腦中，對于這樣的標題，總是會貼上“重要信息”的標簽。所以字體設計對于網頁設計而言是

很重要的一環。好的標題設計，甚至會提升設計的檔次。

當然，標題是總領全文的東西，所以字數一定要短，便于記憶。同時，字體的包裝也應該秉承“少而精”的原則，一定要將設計包裝的精力集中在需要重點突出的信息上。

7．恰當的圖片能幫助“標題”積攢眼球

雖然“標題”相對于圖片更容易產生記憶，但是恰當的圖片是能“提示”大腦去關注“標題”的。如果將圖片作為“標題”的美化包裝，那這個理論就好理解了。

人們在瀏覽圖片的時候，那些抽象的、風景的（尤其是像宇宙、星空這種的）、較為規律的圖形化圖片都很難引起視覺的注意力，所以這類圖片通常都會用來做桌面或者頁面的背景。而具體的事物，比如產品照片、人物（尤其是身材勻稱的美女）照片之類的，往往更容易產生帶入感，使人有興趣對于圖片包裝下的標題

產生閱讀興趣。

8．文字、圖表相對于數字更容易獲得關注

對于大腦而言，我們更容易記住文字的內容——除了數字之外。

“一看到一大堆的數字我就頭疼”——很多人都有這種困擾。阿拉伯數字對于大腦而言并非直接記憶的對象，所以相對于文字，阿拉伯數字往往不夠直觀。當然如果你希望達到讓人感覺“雖然數不清是幾位數，但總之數字很大很大”的效果，阿拉伯數字的效果還是很好的。

對于單一的數字，超過5位數以后就很難讓人記住。比如，你會記得自己的電話號碼，但你很難記住你朋友的手機號碼，除非你們熟到一定程度。如果這樣的數字出現一堆……哦！天啊！饒了我吧！

一個好的解決方案是使用文字——畢竟文字是適合大腦記憶的方式，簡潔明了（一百萬總是比看1000000來得直接吧）。而面對大量的數據報表，牽扯到對比、趨勢、比例這樣的數字信息的時候，圖表化是更好的選擇。簡單的圖形，對應

直觀的效果，這種情況比數字更能說清楚問題。這時候并不需要深度記憶，人們往往只需要記一個趨勢。所以與其選擇復雜的數字表單，不如使用圖表來的印象深刻。

需要注意的是，圖表的制作也是有講究的。對于有連貫性的數據，盡量用折線圖這樣的方式較為合理。而有對比性卻不連貫的數據，使用柱狀圖較為合適，而比例類型的圖表則可以使用餅狀圖，圖表需要是簡單易懂且能直接說明問題的，盡量減少文字性的描述，盡量避免在一張圖里牽扯到較為復雜的數據——如果你做過PPT那就會發現，其中的道理是相通的。

9．暗示性的圖形元素更容易獲得矚目

有人總結過：活動性的網頁只要做得華麗，大紅大紫，光線絢麗，再加上放滿金光閃閃的各種活動獎勵，基本上就算成功了。

不得不說，雖然有些投機取巧的感覺，但這仍然是一句有用的大實話。這句話前半句說得是氣氛的營造對于網頁設計的重要性，后半句則說的是暗示性的圖型元素更容易吸引人的注意。

說到這里，也許你又在疑問：之前不是說文字“標題”比圖片更容易獲得關注嗎？事實上，前一小節說的是“一般情況”下，有一般情況，自然有特殊情況了。當圖片本身的信息單一，且含有非常明確的信息的時候，往往這樣的圖片更容易被人們所關注。

什么樣的圖片具有暗示性？寶箱、禮盒、金條、豪車、美女（又是美女……你懂的！）等人們比較關注的信息明確單一的事物，還有類似箭頭、點擊狀的鼠標手、視頻的播放暫停按鈕圖形等具有心理暗示意義的圖形，這些都是暗示性的圖片元素。

當然，需要注意的是，此類圖片的應用必須要切題，否則依然會產生負效果。很多頁游在做廣告的時候，都會用到各種暗示性的圖片，甚至有些圖片還會非常“過火”（這種行為必須強烈譴責，簡直是帶壞社會風氣）。用戶被這些圖片所吸應，點開游戲一看，完全兩碼事，于是在連游戲名字都沒記住的情況下就流失了——快速的帶入流量后快速的流失，任何網站都不希望這樣的情況發生的。

10．一靜不如一動

網頁之所以區別于傳統平面排版很大程度上在于網頁設計的多媒體特性。對于用戶而言，動畫、視頻等元素總是比靜態的圖片更容易吸引眼球。

對于動態元素，我的態度是謹慎的。動態效果是點睛之筆，但用多了反而會分散用戶的注意力，降低關注黏度。而視頻以及其他交互的動態元素，我更喜歡被動響應的——主動幫助用戶決定某些事情的強制行為，在我看來是非常不友好的。任

何的視覺引導，都應該秉承非強迫性的原則，任何強制體驗的行為，在理論上都是有風險的視覺體驗。

如果你耐著性子讀到這里，是不是有一種：“網頁設計是一門科學”的感覺？——這是我一直掛在嘴邊的一句話。隨著所謂的WEB2.0時代的來臨，大家越來越多的開始關注用戶感受，用戶體驗這個詞也以越來越高的頻率被人們掛在嘴邊。在下一小節里，我們就來說說，用戶體驗究竟是個怎樣的事物。