如何建立網站視覺層次感

⑴ 網站設計應該注意哪些視覺效果

企業網站建設是一個龐大的系統工程，網頁則是其基本元素。設計具有視覺審美的網頁，進行網頁視覺創意，是現代企業網站視覺設計的必然要求。
1．技藝融合
技是技術，藝是指藝術。二者要緊密結合，互相扶持。可以說，企業網站的視覺設計是否新穎決定了網民看到網站時所駐足的時間，在這個基礎上網站的內容才能進一步吸引網民。因此，企業應當首先認識到網站界面設計與創意是企業網站建設的重要組成部分。同時，技術是實現網頁視覺效果的基礎。設計者應主動掌握現有的各種網路技術規律，注重技術和藝術的緊密結合，窮盡技術之長，實現藝術想像，達到理想的視覺效果。
2．完善版面設計
網頁視覺設計特別講究編排和布局，國外有設計者認為網站界面設計的95％是排版。優秀的版面設計通過文字圖形的空間組合，表達出和諧與美，能夠優化閱讀，准確傳遞信息，使網站具有親和力。我們可以將平面構成中的形式美法則，如平衡、對比、調和、節奏等原則靈活應用於網站的版面設計中，使紛雜的頁面更具美感、重點突出，更加有條理。
3．色彩的和諧運用
色彩是藝術表現的視覺要素之一。瀏覽者在瀏覽網頁時，第一印象就是頁面的色彩，頁面色彩直接影響瀏覽者的閱讀興趣。在網頁設計中，應根據和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配。在企業網站的色彩設計中，我們可以根據企業CI（企業形象識別系統）中VI（企業視覺識別系統）進行標准色的選取運用，使企業整體化統一。如麥當勞的設計中，我們常可以看到標準的紅、黃色一直貫穿到企業的整體設計中。
一般而言，我們應當先確立一種主色調，以利於網站主題的表現與氣氛的烘托。然後確定和主色調類似色的輔助色，這樣有利於界面風格的統一。最後還可以選擇小面積的對比色，從而實現「大面積協調』／小面積對比」。這樣，網站在統一協調的基礎上會顯得更加活潑、生動。網站界面色彩主色調太多會顯得花哨，只有同類色而沒有對比色，網站界面色彩則顯得單調。總之，應當將色彩構成、色彩情感等知識靈活應用於網站界面設計之中。
4．媒體綜合
視覺設計者應綜合運用多種媒體元素來設計網頁，以滿足和豐富瀏覽者對網路信息的要求，這也是未來網頁藝術設計的發展方向。當然我們應盡量避免使用過多過大的圖片、動畫等，減少過度的裝飾。
5．視覺設計的統一

視覺設計的最終目的不是單純追求視覺感染力而是更好地表現網 頁的主題因此各方面的統一非常重要。首先，視覺設計要與主題相統一，視覺設計必須服務於網頁主題的表達。其次，內容與形式要統一，即整體視覺印象和內容意境的統一。視覺設計中應利用各組成部分在內 容上的內在聯系和表現形式上相呼應，並注意整體設計風格的一致性，實現視覺上和心理上的連貫。
總之，網頁的視覺設計決不是只憑感覺，必須遵循其內在的規律和基本原則。一個成功的網頁視覺設計必須做到藝術與技術的完美統一，它涉及到視聽元素的處理及網頁整體布局的規劃設計等多項內容。它以主題思想和訴求鮮明突出、形式與內容相統一、強調網站中各相關頁面的整體統一和諧為審美原則。

⑵ 如何增強網頁中的「視覺沖擊力」解析 PS筆刷吧

一個瀏覽者每天上網都要瀏覽無數網頁，一個頁面完全下載完後也許沒半分鍾就被關掉了。主要的原因是界面的整體感覺上缺少視覺沖擊力，網站的界面設計之重要性就明顯體現出來了。 提高網站的視覺沖擊力可以從兩方面來入手：
一：色彩搭配。
1、利用反差大的色調，但注意搭配起來要合理，頁面不要讓人有很臟、零亂的感覺。
2、清新自然色調，但要注意不要感覺整個網站顯得單調、輕浮。
二：框架結構。
頁面在總體上有一種整體感，但一個頁面中各個內容塊又要有一定的層次感；在每塊內容中要注意字間距與行間距的調整，給人以寬松自然的感覺。 還是那句老話：一切以客戶需求為中心。從各方面展示我的親和力，顯示網站服務的忠誠感，讓你在瀏覽我提供的信息與服務過程中輕輕鬆鬆、舒舒服服。我個人在對一個網站進行第一次接觸的時候，除了看界面，還喜歡看網站的措辭，因為這也是網站親和力的一個很重要的表現方面，這也是國內很多網站忽視的地方。

⑶ 如何增加設計層次感，讓整個設計感覺很大氣

運用分組建立層次 在設計中，相鄰的元素比分開較遠的元素會更加吸引人注意，在做設計閱讀順序時，利用設計分組是一個非常有效的方法，將不同信息進行視覺間距分組。能提升用戶對於內容上的理解。▲如上圖slack的設計，插畫引導圖和底部按鈕上面文字拉開了距離，使得內容更聚焦。第二個界面的頂部頭像和下面的文字也是通過分組形成了對比。 ▲stadium-live的產品設計上，登錄頁面按鈕為一組，頂部品牌LOGO和slogan一組，人物為一組，每組信息之間分組非常明確，互相都不會對對方視覺產生干擾，後面兩張頁面也是如此，頂部的導航，和下面表單信息，以及頭像和底部按鈕，通過分組處理，內容更加符合用戶的視覺動線。 ▲在球員定製的處理上，最右邊那張圖，通過卡片和線條分組處理，從視覺上很清晰的看見排名；哪兩個球隊之間正在進行比賽。 ▲當一組信息比較接近時，證明他們是有關聯的，如果距離比較遠，這意味著這組信息和他們是不同的，簡單來說，通過鄰近性原則創造這些關系，為信息帶來層次。 運用空白建立視覺層次 空白也是視覺設計元素，並不是留白就是空著，如果設計中留白運用合理，可以幫助用戶理解很多信息，因此任何設計都需要通過適當的負空間來傳遞信息。▲如上圖我喜歡的一個應用classpass設計非常極簡，頁面中大量運用留白來凸顯內容。 ▲classpass的設計不會使用太多的視覺元素，而是運用留白把內容進行分組，每個頁面的留白恰到好處，同時留白本身就是對信息進行區分，所以頁面中減少了很多線條使用，會更加干凈有品質感。 ▲must是一款電影軟體，整體設計非常雜志風，頁面就是通過圖文處理，以及留白空間的處理，增加對比，基本產品使用過程中你不會感覺到視覺負擔，元素之間的信息組織的非常清晰。 ▲在電影展示頁面，信息的處理，以及打分設計上，多次運用留白來處理信息層級，在設計中，當你元素周圍留白越多，它產生聚焦注意力的作用也越強，如右邊的打分頁面，幾乎所有焦點都在這個彈窗上。 ▲Artsy是一款藝術品電商網站，整個app的設計也充滿了藝術氣息，每次我設計找不到感覺的時候就會去打開看看，裡面的排版、還有設計的細節處理，都值得我學習，但我喜歡的還是他對於板式和留白空間的處理。 ▲在首頁設計，我最喜歡他相框的設計，就像欣賞美術館的一幅畫，頁面留白也非常大，襯線體和非襯線體的對比也運用的非常好。 ▲整個APP的設計被大量留白包圍，雖然現在流行各種質感，光感，C4D的設計，但是大量視覺元素會讓頁面過於飽和，如果沒有很好的視覺引導，用戶會感到不知所措。這種簡單的返璞歸真，也能讓人視覺不容易產生疲勞。 運用氛圍建立層次 ▲每個紋理的運用，有設計感的紋理從視覺感受上比簡約主義更能吸引用戶注意力，但是背景紋理的運用不能為了設計而設計，而是需要和產品內容有關系。比如紋理和文字內容、和信息是密切相關的。如上圖，是一款打車軟體，背景結合了打車的地圖，公路線路，用車場景；讓頁面對比和設計層次更加突出。 ▲Jour這款產品在設計上，背景通過有層次的氛圍紋理和質感，使得頁面氛圍感很強，層次細節更加豐富，當然在設計時候切忌對於設計氛圍過度運用，那樣會讓用戶分散注意力。 ▲其它場景上氛圍紋理的運用，卡片上通過系列插畫的塑造，頁面雖然有很多插畫，但是頁面平衡感同樣被把握的很好。用的時候需要考慮用戶在不同界面看見的元素視覺感受是一致的。 ▲氛圍除了圖形，其實色彩也是很重要一種方式，我很喜歡的ASANS的設計，在背景上就是運用了一些幾何圖形的肌理效果讓整個空間感更加豐富，這些幾何圖形豐富細節的同時也讓整個內容更加凸顯。 ▲如上圖是裡面一個注冊登錄場景，界面中，除了背景灰色底紋通過幾何圖形來烘托視覺層次，同時在插畫上也非常巧妙，用戶輸出時，完成後，整個插畫到品牌圖形的連貫變化體驗非常好。 ▲Sift是一款新聞類閱讀產品，這類型產品設計一般就是文字排版，設計簡約為主，但是sift運用了一種大膽的設計，背景氛圍上採用一些點線底紋的肌理效果，和內容結合的平衡感把握的很不錯。 ▲Lugg是一款貨車APP有點像國內的貨拉拉，整個設計氛圍感也非常強，運用的全插畫設計，從引導頁，到核心功能頁面的設計都能看見完整插畫的運用，是我目前見過運用插畫氛圍作為主設計最好的產品。 ▲感興趣的同學可以去美國蘋果商店下載使用，頁面中增加氛圍是一種增加層次很好用的方式，但是同樣需要注意好視覺平衡，不要本末倒置。 運用字體對比建立層次 ▲運用襯線字體和非襯線字體對比是非常常用的方式，如上圖運用了Adelle Sans和Tiempos這兩款字體的對比讓頁面內容結構非常清晰 ▲上圖官網的設計，干凈的排版，通過字體大小、字型進行對比，體現出視覺層次。 字體的選擇本身也是設計中很重要的因素，好的設計不僅能提升設計品質，同時也能讓頁面視覺層次更加分明。

⑷ 如何讓頁面有層次感

1.設計內容有主次之分
網頁上的各項元素都有自己的作用意義，我們在做網頁層次時首先考慮畫面中各元素作用，根據網頁元素的不同角色確定優先順序，有空間感和距離感以及有虛實之分並且光影層次清晰，然後進行視覺層次的構建。簡單舉例，以淘寶圖片為主，首先圖片展示出來的是商品，然後背景會搭配使用場景或者突出重點的背景圖片，其他還會增加文章說明等，在設計時要有重點分主次。
2.網頁畫面的遠近關系
網頁圖片設置上由近及遠，讓畫面用空間感，有深度，用背景圖片等襯托出層次感，然後在圖片基礎上突出重點，可以使頁面看起來更透氣，也能夠通過場景來傳遞出很強的代入感，但注意畫面搭配。
3.注意色彩的適用
網頁設計時注意色彩搭配，色彩明亮的頁面元素更容易從相對柔和的元素中脫穎而出。背景色對於網頁整體風格基調也有明顯作用。例如，淡藍色，一般代表平靜祥和，適合一些日常事物管理類軟體選擇。色彩模塊的適用及應用，在網頁設計界面元素的邏輯關系中發揮著舉足輕重的作用。
4.善用對比增加頁面層次
UI設計師在頁面設計時利用內容中的差異、對立等方面結合比較，帶入畫面做出比較，形成強烈的視覺沖擊。用對比給用戶增加畫面層次感，同樣用對比給內容做出更明顯的比較。設計元素上可以用色彩、明暗、間距、尺寸等做出差異感將頁面整體提升層次感。
5.注意網站功能
UI設計師初期常常出現的錯誤就是忽略了網站功能，為了設計出更優秀的畫面卻忽略了網站的自身左右。UI設計師在設計網頁過程中首先要了解的就是功能，整體畫面突出功能來展現出層次感也是網頁設計中突出層次感的重要方法之一，設計與功能相結合，功能融入到設計當中然後突出整體重點層次感自然展現出來。
注意事項
以上列舉了幾點網頁設計如何突出層次感，應用過程中一定要結合自身網站內容去選擇方法，不要都用上也不要亂用找適合網站的方法突出自己的設計即可。

⑸ 如何增強網站的視覺沖擊力

一個瀏覽者每天上網都要瀏覽無數網頁,一個頁面完全下載完後也許沒半分鍾就被關掉了(我就經常這樣)。主要的原因是界面的整體感覺上缺少視覺沖擊力(除非你的網站真有很獨特的內容,可以忽略界面,但想想國內網站的內容有多少真正原創且很有吸引力的呢) 網站的界面設計之重要性就明顯體現出來了。 提高網站的視覺沖擊力可以從兩方面來入手： 一.色彩搭配. 1.利用反差大的色調,但注意搭配起來要合理,頁面不要讓人有很臟,零亂的感覺; 2.清新自然色調.但要注意不要感覺整個網站顯得單調,輕浮。 二.框架結構. 頁面在總體上有一種整體感，但一個頁面中各個內容塊又要有一定的層次感;在每塊內容中要注意字間距與行間距的調整,給人以寬松自然的感覺。 還是那句老話:一切以客戶需求為中心.從各方面展示我的親和力,顯示網站服務的忠誠感,讓你在瀏覽我提供的信息與服務過程中輕輕鬆鬆.舒舒服服。 我個人在對一個網站進行第一次接觸的時候,除了看界面,還喜歡看網站的措辭,因為這也是網站親和力的一個很重要的表現方面.這也是國內很多網站忽視的地方。

⑹ 如何有效建立視覺層級

為頁面，尤其是企業網站落地頁，建立清晰的視覺層級可以確保用戶在正確的時機看到正確的信息，並且不會因無關或次要的內容而分心。

1. 在正確的時機回答正確的問題

通常來說，用戶在查看落地頁時會下意識地提出一系列問題。這些問題依次為：

• 這個頁面提供了什麼？（價值主張）

• 對我有什麼幫助？（優勢）

• 產品如何運作？（特點）

• 為什麼我要信任此頁面？（社會認同）

• 接下來我該怎麼辦？（行為召喚）

因此，頁面的視覺層級在一定程度上能夠映射用戶提出這些問題的順序是至關重要的。頁面內容以正確的結構順序展示只完成了有效視覺層級的一半，另一個挑戰是確保用戶看到最關鍵的屏幕元素。我們可以用多種方式來吸引用戶的注意力，單從視覺上來講包括但不限於：顏色、布局及交互等。

Tips：

（1）顏色——清晰的色彩體系

品牌色：延續品牌視覺感受，固化品牌形象；

轉化色：盡量選擇與品牌相對的對比色，明顯區別於品牌色，常見的轉化色為紅色、橙色等，這些色彩能夠刺激用戶進行點擊，進行有效的行為召喚。

（2）布局

• 緊湊的頁面布局

緊湊的布局更能夠牢牢抓住用戶視線，有效區域寬度推薦：1180px。

• F式布局

F式布局是一種科學的布局方法，基本原理依據了大量的眼動研究。據此，我們習慣性的把重要元素（諸如品牌logo、導航欄、行為召喚控制項）放在左邊，而右邊一般放置一些關聯信息。



（3）交互——友好的體驗

Akob Nielsen（雅各布·尼爾森）的十大交互設計原則是廣泛的經驗法則，而不是特定的可用性指導原則。因此，我們不能把它上升為一種標准，而是應該當做一種經驗來學習，然後跟現實中的設計結合來使用。

常用的交互原則為：狀態可見、環境貼切、一致性原則、防錯及人性化幫助。

2. 簡化界面

建議通過三個問題系統地檢查落地頁上的每個元素。

• 這個元素是否可以刪除？

如果刪除，後果是什麼？是否會比其他元素造成的認知負擔更具破壞性？如果不會，最好刪除。

• 如果這個元素非常有價值無法刪除，我可以隱藏這個元素嗎？

• 是否可以將元素減弱，放在子頁面、標簽下或者折疊面板中？

3. 測試你的視覺層級

有一種便捷的方法可以測試用戶是否看到了必要的屏幕元素，這種方法叫「五秒測試」，測試過程是向用戶展示你的設計，五秒鍾後讓用戶回憶他們記住了什麼元素。

⑺ 優秀的電商網站如何建設

1、站點地圖

設計網站地圖主要目標是為可以給用戶提供良好的瀏覽使用體驗，用戶必須始終知道他們所在站點的位置，如果站點太大，理想的是插入一個地圖，以便用戶更容易找到他們正在尋找的內容。

2、首頁簡約整潔

網站的主頁應立即傳達核心信息。畢竟，很少閱讀網站上的文字。相反我們快速瀏覽頁面，挑選關鍵詞，句子和圖像。

3、價值信息

當用戶訪問網站時，他們正在尋找他們感興趣的或有價值的信息。因此，我們必須考慮質量，數量並不是很重要。

4、要標新立異與眾不同

就是有一個簡單性和獨特性，才可以更快地被識別和傳達。要避免和其他標志風格相似才會更令人難忘。

5、要有視覺層次感

設計時要考慮視覺層次結構是設計的重要原則，有助於以清晰有效的方式顯示您的內容。通過正確使用層次結構，您可以從最重要的部分開始按優先展示給網站訪問者。

6、易於閱讀

可讀性是人們識別詞語，句子和短語的難易程度。當您網站的可讀性很高時，用戶將可以輕松地對其掃描或瀏覽。

⑻ 網頁頁面設計的時候沒有層次感，請問怎麼可以加強一下

段時間我一直在說設計需要有層次感，這種層次感可能有很多類型，比如色彩的層次感，或是元素的層次感。當一個設計缺乏層次感的時候頁面所表現出來的無非是兩種可能，一種是單調，一種是花哨。在設計中我們常常陷於對於某一種色彩或是某一種效果的偏愛，而這種情況會使我們的設計缺乏長久的生命力。並且我們自己在審美上會局限於對這種偏愛的執著從而影響我們的進步。而這種偏執也常會導致我們的設計缺乏層次感。

那麼層次感通常表現在什麼地方呢？在以前寫的《色彩解答》系列中第一篇就講過關於色彩的層次，在那篇文中有講到用「黑、白、灰」去分析色彩的層次。我們在設計的時候可能會使用一種色彩把整個網站做出來，結果發現這單一的色彩做出來的效果讓我們的網站變得很單調，很土氣。有時就算是多用了色彩也一樣的土氣，網站使用的色彩並沒有層次感，也沒有對比。都處在相似的灰度上，所以網站看起來就灰頭土臉的。當然我們還可以使用高對比純色塊來做設計，（韓國的網站有很多都是這種手法）這種手法有討巧的地方，因為相對來說比較簡單，但是同樣也比較容易被抄襲。但這樣的設計缺乏生命力，作為一種風潮，也有點像是快餐，誰都能復製得了。不需要任何的文化作為基墊。當然並不是說這種手法就真的一無是處，這種只能作為一種手法來應用，不能當作是萬用靈葯到處使。

光用文字來說必然是感覺不到的。那麼我們來看看這張圖。

我們看到IBM的設計色彩並不多，但是層次感就卻是有了。他這里有黑色、淡藍色、白色、其中黑色與淡藍色之間的對比較為吸引眼球。並且我們發現黑色是純黑、而淺藍色卻是屬於高亮的那種。這種強對比對人的視覺是有一定吸引力的。並且黑白灰三者都有了。加上三者之間的比例並非均等的。而我們在設計的時候通常會使用一些灰度相近的色彩放在一起，並且飽和度也不高，所以最後出來的作品只能是灰頭土臉。這樣的網站我就不找例子了，找誰的來說誰也不開心。當然也包括我自己。呵呵，大家可以去我的作品集去找找，一定有那種灰頭土臉的東西。

另外我們還可以看到IBM這次新的設計比原來的設計更有立體感，這就是我上面所說的元素層次。這種層次感拉開了瀏覽者的視覺深度，使得我們的網頁不再平面。雖然也不是3D的效果，但是我相信2D的效果必然會成為網頁設計的一個新的趨勢。通過2D模擬出視覺立體感，會使得網頁設計更有張力，內容也更為豐富。

而在純色塊的布局之中色彩鮮艷的圖片更加顯得醒目。這又是一種視覺層次，也可以說是復雜與簡單的對比！設計沒有什麼一定的規律，這里包含的因素有很我。設計得好與不好，重要的是在於設計師對於這個世界的理解有多寬廣。所以設計師不能只光顧著加強自己的製作技巧，更要不斷的積累自己的文化知識。不斷的增加自己的厚度，那樣才能設計出更多精彩的作品。

⑼ 設計干貨～視覺表現建立信息層級【深度好文】

長文預警，建議先收藏後看！

作為視覺設計師，我們的作用除了最基本的滿足用戶審美需求，還會有品牌傳達，信息傳達，功能傳達等，其中想要信息有效的傳達給用戶，需要我們建立信息層級，而不是一股腦的丟給用戶自己理解，要做到這點有哪些視覺方法，這些方法的背後是否有理論依據，是本文的主題。

首先看下面兩張圖，左圖為相機拍攝的效果，右圖為人眼不移動時看到的效果，可以發現人眼對信息的獲取並不是一次性完成的，它不能同時產生多個焦點從而把視線停留在更多的地方，設計師需要考慮的是讓用戶通過眼球移動，按照一定的順序獲取信息，幫助獲取和理解的過程高效自然。

這個設計方法希望解決的主要是兩個問題：

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. 設計過程和結束都要不斷審視頁面視覺流，看看用戶瀏覽是否順暢。

我們有意識的分析用戶關注的信息優先順序，並通過視覺表現出來，是視覺設計師這個崗位很重要的職責，希望梳理的這些方法能幫助我們將這份職責做的更好，我也樂在其中，與大家共勉！

我和朋友做了一款小程序理論塢 · 打造屬於你自己的理論庫 ；有很多關於交互的術語、心理學、管理學的定律和理論， 微信掃描 下面小程序碼快速體驗！