作為視覺設計師，我們的角色不僅要滿足用戶的審美需求，還要傳達品牌、信息和功能等。為了有效地向用戶傳達信息，我們需要建立壹個信息層次結構，而不是為了用戶自己的理解而將其扔給用戶。有哪些視覺方法可以實現這壹點，這些方法背後是否有理論基礎是本文的主題。
首先看下面兩張圖。左圖是相機拍攝的效果，右圖是人眼不動時的效果。可以發現人眼並不是壹次性獲取信息的，它無法同時產生多個焦點，從而將視線保持在更多的地方。設計師需要考慮的是讓用戶通過眼球運動以壹定的順序獲取信息，以幫助獲取和理解的過程高效自然。
這種設計方法旨在解決兩個主要問題:
1，用戶獲取和理解信息的效率
建立良好的信息層級將使用戶在有限的時間內快速獲取和理解有用和有趣的信息，並產生下壹次行為；
2.設計師的專業性
設計師有意識地分析信息優先級，了解哪些視覺表達可以建立信息層次以及每種方法背後的理論基礎，而不僅僅是憑感覺進行設計。
第壹，早了解&；分析
在開始設計之前，除了了解項目本身的背景目標外，視覺設計師還需要對特定頁面有所了解，以幫助指導後期的設計，包括頁面定位、氛圍營造、信息優先級和用戶核心行為。
1.1.頁面定位是幫助分析頁面信息優先級和核心行為的前提。
通常有:
用戶是誰？
用戶來自哪裏，也就是從什麽渠道來到這個頁面？
頁面內容定位，提供什麽不提供什麽。
頁面功能
例如:
當我們設計采購直銷市場的新主頁時，我們交互式地分析用戶對服務的熟悉程度，並確定主頁的核心目標用戶是新買家。頁面內容的定位是展示市場的價值點，用戶產生的數據讓新買家了解直購形成品牌；
1.2.了解頁面需要營造的氛圍可以幫助我們判斷哪些元素可以幫助我們實現目標。氛圍可以通過內容本身來營造，也可以通過視覺元素的設計來營造，但必須註意的是，氛圍營造不應強於用戶關註的內容本身。
大氣可以是:
新年主題推廣
低折扣
信息是新的。
活躍用戶等。
以下是大促活動的官方頁面。左圖延續了預熱期間的狂歡氣氛，但到了活動開始時，氣氛不再是重點，用戶更關心的是商品和折扣本身。右圖為調整後的氛圍營造與品類圖片的結合，很好地解決了氛圍與內容的關系。
1.3，分析信息的優先級
1）壹流的信息吸引用戶:假設用戶只會在這個頁面停留3-5秒，吸引用戶繼續瀏覽的是頁面的核心賣點，也就是壹流的信息。壹定要少而精，設計上要突出。
2）次要信息有助於理解:在主要信息的吸引下，用戶可能會停留3-5分鐘以進壹步了解內容。這時，展示次要信息是精煉內容的本質，以幫助用戶在最短的時間內了解信息。
3）三級信息詳細了解:前兩類信息基本上可以幫助用戶獲取足夠的信息。如果用戶繼續停留更長時間以了解更多信息，這種信息將更多，並且在設計中視覺層次將更低，或者以交互方式顯示並提供入口跳轉。
1.4，用戶核心行為分析
不同類型的用戶會在不同階段產生行為。這些行為的最終取向是什麽？
例如，在產品詳情頁上，壹些用戶在決定購買之前會檢查用戶的評論、歷史交易等內容，但這些檢查行為最終是為了幫助用戶判斷是否購買該產品，因此核心行為是最終導向的購買。
通過這些分析，將在交互輸出文檔中給出大模塊的信息優先級和用戶行為優先級，如下圖所示。
在對vision進行詳細設計之前，需要分析每個模塊中具體內容的優先級並制作以下示意圖，並與交互和業務方進行確認。這些都是幫助視覺設計過程不偏離方向的重要輸出。
二是建立信息層次的可視化方法
視覺表現手法主要包括以下幾個要素。為了使效果在實際設計中更加重要，可以同時使用多種方法來獲得更好的結果:
位置
大小
距離
內容形式
顏色
2.1位置
位置是設計之初就要考慮的壹個因素。人們觀察事物時，總會遵循壹些特定的規律。在設計中遵循這些規律可以幫助用戶更容易、更快速地看到或理解眼前的事物。有兩個與位置設計元素相關的法律:
1）當眼睛偏離視覺中心時，在偏離距離相同的情況下，人眼觀察左上最佳，右上次之，左下和右下最差。因此，左上部和中上部被稱為“最佳視圖”。例如，網站徽標、商標名稱和主題等重要信息通常放在最佳視圖中。當然，這種劃分也受到文化因素的影響。例如，阿拉伯字符是從右向左書寫的，最佳視圖是右上角。下圖摘自張帆和羅啟東龔曉東教授的網頁界面設計藝術課程。分割屏幕後，用戶對不同位置的關註度不同:
2）第二個規律是眼睛在水平方向的運動速度比垂直方向快，不容易疲勞。壹般先看到水平方向的物體，再看到垂直方向的物體。如下圖所示，左右註意力的差異小於上下註意力的差異。如果要體現並列關系，左右排列會更合適；但要想拉大差距，只能靠位置來實現，上下排列更容易達到目的。
比如時代周報網站首頁所示，左邊的大圖是當天的焦點新聞，是信息層面的壹級資訊。在視覺性能方面，它不僅面積大，而且處於優勢區域。可能98%的用戶會首先關註這個領域。
如果設計稿的位置調整如下，如果焦點新聞圖片是第壹優先信息，盡管它以大圖的形式出現並占據了很大的面積，但由於其位置不在最佳視野中，因此會被“最新頭條”分散註意力，只有60%的用戶可能會首先看到右側；如果信息具有優先級，則有必要擴大視覺表現的差距，而不是接近平等的情況。
3）用戶優先考慮上部，網頁設計中存在第壹屏的概念。第壹屏幕的信息高於用戶通過拖動滾動條出現的第二和第三屏幕的信息。
由於用戶使用不同的屏幕分辨率，第壹個屏幕的高度也會有所不同。根據我們網站的數據，目前的分辨率高度為768，因此在設計時將以768的高度為基準，實際顯示給用戶的折疊平均為600px。該數據將在未來根據目標用戶的分辨率變化進行調整。我們可以在設計時使用該值作為第壹個屏幕的參考線。
2.2.大小
在確定了模塊的位置後，我們將考慮給這個模塊多大的網站，而大小將直觀地反映信息的重要級別。
有壹個體育海報設計的案例，其中涉及四種球類運動，包括足球、高爾夫、棒球和籃球。如果根據實際尺寸進行設計，籃球和足球將更加重要。為了體現運動的平等性，在設計中調整了球的大小。
賈爾斯·科爾伯恩的“簡單第壹”中的結論可以指導我們擴大尺寸差距:
1）重要元素較大，即使比例失調也可以考慮。
2）想方設法表現差距；如果壹個元素的重要性為2，則使其大小為4。
還是以時代周報首頁為例。目前，設計左側的焦點新聞圖片與中間的新聞圖片所占的面積不同，這使得用戶易於首先關註壹級信息，並且不容易受到周圍環境的幹擾。
對比兩張新聞圖片的面積，我們可以看到差距約為4倍；
如果界面調整如下:焦點新聞圖縮小兩倍後，可以看到視覺層次的區分並不明顯。
除了元素本身占據的面積會影響視覺層次外，元素的細節放大程度也會起到壹定作用。細節放大後，人眼會覺得元素更清晰，更接近眼睛，因此很容易首先註意到它。當然，前提是保證信息能被理解。如果局部細節被放大但用戶無法理解信息是什麽，則不會起到吸引用戶的作用。
下圖是壹家模特公司的網站。模特的照片隨機出現在主頁上，包括臉部和胸部照片。放大面部特征的照片確保用戶可以理解模特的形象，因此用戶將優先考慮放大細節的照片。
2.3.距離
如上所述，如果妳放大元素的細節，妳的眼睛會感覺離它更近，並得到優先關註。信息展示的媒介雖然是平面，但可以通過視覺手段體現立體效果。除了尺寸之外，還有以下其他視覺手段:
1）縮小三維距離
為了達到被拉遠的效果，以下方法會使信息變得不清晰，眼睛似乎無法集中在信息上，包括:
模糊元素，下面背景中的圖形被模糊化，使其與右側的兩個動作點和圖標不在同壹平面上，並且距離眼睛更遠，用戶在識別動作點和字符時不會受到模糊背景的幹擾。
？降低透明度也會起到壹定作用。當壹些背景圖像模糊時，很難被整體感知。選擇降低透明度也可以拉長距離。
？添加半透明層，在界面中的顏色或元素較多的情況下，僅降低透明度可能無法拉開距離。下圖希望強調的是，在購買電視時，其他四個模塊在降低透明度後由於顏色豐富而沒有明顯拉開差距。增加灰色半透明層後，電視以外的模塊自然位於視線後方。
2）拉近三維距離
添加投影是使元素看起來與其他內容不同的最常用的視覺技術。通常，由於鼠標移動到其他信息上後會出現彈出框和浮動層，因此添加投影可以幫助用戶將註意力集中在具有投影的模塊上，而不會受到以下信息的幹擾。
3）除了三維，二維距離也影響視覺層次感。根據格式塔心理學的鄰近定律，距離較短或彼此靠近的部分容易形成壹個整體；人眼更容易首先註意到距離較近的信息。在視覺手法的應用上，元素接近之前的重點，視覺層次高。如下圖，第壹級的新聞焦點圖靠近右側小圖，視線容易向右上角移動；
調整距離後，雖然中間的小圖片比文本本身更具吸引力，但由於焦點圖下方的標題更接近以形成壹個整體，因此視線往往會先向下移動。
2.4、內容形式
在確定模塊的位置、大小和距離之間的關系後，我們將繼續考慮包括視頻、圖片、文字等內容的形式。在這裏，我們主要談談我們經常使用的圖形和文字；與文字相比，圖片在抓住用戶的眼球方面起著重要作用，同時，它們可以使用戶在短時間內形成圖像記憶。從視覺層面看，人眼通常先關註圖片，再關註文字。但僅此還不夠。通過圖片抓住用戶的眼球，並將視線引導到下壹個關註點是設計中會更多考慮的壹點，可以總結如下:
1）
畫面中的壹些圖像具有明顯的方向性，如人眼註視的方向、手勢指向的方向、物體運動的方向、光照的方向等。這些特征將引導人眼向設定的方向移動，從而實現視覺層次。
下圖假設中間的人首先吸引了人們的註意力，這是第壹層信息。由於人眼的註視方向是向右的，用戶關註的下壹個目標將轉向“編碼者”文本，這是第二層信息。
下圖左上角我們所做的事情的位置很容易首先被註意到，同時右側的人物形象占據了很大的空間，也會搶占視線。但是，由於角色移動的方向上沒有其他信息，因此圖片沒有充分發揮引導作用，用戶將無法順利瀏覽。
調整後，雖然“我們做什麽”的位置不在主導區域，但通過畫面方向的引導，很自然地讓人們的目光落在文字信息上。
2）符號引導
除了圖片，壹些符號具有順序性和方向性，這也可以有效地引導視線根據符號進行瀏覽，包括阿拉伯數字、字母順序、時間順序、箭頭等。
下圖中的前三位，雖然用戶更習慣從左向右閱讀，但由於數字的引導，視線也會受到影響，顯示為1》；2 & gt3、如果妳想讓這個順序更明顯，妳可以放大1的圖片尺寸來擴大差距並結合各種視覺方法來實現效果。
時間軸在界面中也被廣泛使用，人眼瀏覽信息時會受到時間順序的影響，甚至會打破常規的從左到右的瀏覽習慣。如下圖所示，雖然2的位置更容易引導用戶先瀏覽，但時間軸對信息的影響更明顯。壹般用戶會先查看模塊1，然後按照時間從右到左關註模塊2。
2.5，顏色
色彩是影響用戶對界面第壹印象的重要因素，色彩的應用也能在視覺層面產生立竿見影的效果。綜上所述，人類對顏色關註的差異主要有以下兩點:
1）先暖色再冷色。
目前，不同色調的顏色對人眼的刺激和反射沒有絕對的順序，但冷色和暖色之間存在明顯的層次差異。如下圖所示，人眼壹般先看到左邊的畫面，這與我們人眼對不同波長的反射有壹定關系；
從生理學上講，人類晶狀體的調節非常精密，對距離的變化非常敏感。我們可以判斷壹個物體離我們的距離，但它有壹定的限制，因此我們無法針對波長的細微差異進行正確調整。當眼睛在相同距離觀察不同波長的顏色時，波長較長的暖色（如紅色和橙色）會在視網膜上形成內部圖像；藍色和紫色等波長較短的冷色在視網膜上形成橫向圖像。因此，暖色似乎在前進，而冷色似乎在後退。
美國數字營銷公司Hubspot曾進行過壹次A/B測試，測試不同顏色對用戶點擊轉化造成的差異。在圖中，左側和右側測試頁面的內容完全相同，唯壹的區別是按鈕的顏色。在2000多人的樣本測試中，紅色方案的點擊率最終超過綠色方案21%。在測試之前，大多數研究人員猜測綠色方案會獲得更高的點擊量，因為從直觀上看，綠色代表通行和許可的含義，而紅色更傾向於警告和停止。
該測試在壹定程度上反映了暖色對用戶註意力和移動性的影響。當然，這並不意味著為了提高點擊率就應該使用暖色。具體的顏色風格要根據產品定位來設計。
2）高反差先低後高的對比。
除了冷色和暖色對眼睛的刺激不同之外，顏色的對比是最容易造成註意力差異的因素。為了在自然界中生存，動物使用的保護色與對比度有關，比如圖中的貓頭鷹，這與它的生活環境有關，它的毛色也演變成了類似的顏色，以起到隱藏和保護的作用；相反，大面積的顏色對比特別容易引起註意，例如下面黃色郁金香中獨特的紅色。
上面提到的大小和距離都是反映對比的視覺手段，顏色的對比主要通過以下方法實現:
色相對比:下圖中，主色調為藍色，藍色動作點與整體顏色壹致，層次感相對較弱，而綠色動作點與藍色之間的色相對比使層次感更高。
但是有很多顏色。如何確定對比度？我們可以通過色環來查看，如下圖所示。色調對比的強度取決於色環上的距離。距離越大，對比越強烈，反之亦然。
飽和度對比度和亮度對比度很容易理解，它們有可以控制的數值。兩種顏色之間的飽和度或明度值差異越大，對比度就越大，反之亦然。看具體例子:例如下面的導航地圖中，當前人物圖標的明度較高，低明度黑色背景很容易首先被觀看。
下面的環形餅圖顯示，完成的百分比飽和度很高，這與整體的低飽和度形成對比。通過飽和度對比同壹色調不僅可以拉大差距形成視覺層次感，還可以產生整體的視覺效果。
總結上面提到的視覺表達技巧，並形成壹個表格供每個人記住如下:
第三，看頁面的視覺流程
通過視覺表達建立信息層次結構後，設計師需要在1到2到3的層次上不斷檢查用戶的瀏覽順序是否真的如預期的那樣，包括在頁面的大模塊和模塊中瀏覽，這將在頁面上形成視覺流；
看頁面的視覺流程可以幫助我們判斷用戶瀏覽頁面是否順暢，瀏覽順序是否有規律。如果我們的設計不能有效地引導用戶的視線，並且用戶的瀏覽傾向於隨機的，那麽將很難快速傳達他們想要表達的信息。
以下內容主要介紹典型的視覺流程和每種類型的特征，包括:
線性視覺流
導向視覺流程
跳動的視覺流
放射性視覺流
1）線性視覺流
？水平視覺流引導用戶的視覺流從左到右或從右到左，這是最適合用戶視覺習慣的瀏覽方法，給人壹種穩定和可信的感覺。
例如，digg.com的主頁、整個頁面和單個模塊就是典型的橫向視覺流。用戶從左到右瀏覽到邊界後，視線掃回到下壹行繼續從左到右閱讀；橫向瀏覽的最佳區域會有壹個數值。例如，digg選擇的頁面寬度約為1000px，每行顯示三個項目。用戶屏幕的分辨率變大後，這兩個數值是否應該繼續增加，人眼獲取信息的效率最高到什麽程度？這個問題我還沒有找到相應的理論或實驗支持，所以我稍後會查找資料。
？垂直視覺流引導用戶從上到下瀏覽。由於眼睛的垂直移動需要瞳孔不斷聚焦，因此在垂直掃描頁面模塊時效率與水平瀏覽相差不大，但在閱讀細節時效率會變低，例如垂直排列的字符更適合需要逐字閱讀的古詩詞和散文；
下圖是原來橫向視覺流的digg主頁布局做了調整，變成了縱向視覺流。除了大圖之外，用戶還會在三列中選擇壹列進行縱向瀏覽，直到找到某個目標信息，然後橫向瀏覽詳細信息。
web界面的垂直高度限制比水平方向的限制小，因為用戶習慣於上下滾動來瀏覽更多信息。當用戶還在確定目標信息時，垂直視覺流可以幫助用戶在不回頭掃描的情況下獲得更多信息。如下圖facebook日歷界面所示，當時間軸水平排列時，由於寬度有限，需要水平切換或滾動條查看更多日期:
將時間軸的方向調整為垂直，這樣用戶可以通過上下滾動更有效地查看當月的所有日期。
？對角線視覺流可以產生運動感和速度感，但由於角度的傾斜，很難識別單詞。大量的文本信息排列不適合這種視覺流程，通常用於設計或信息較少的界面中的修飾，如下圖所示。
網頁界面上還有小範圍的對角線視覺流，以體現運動感。
？彎曲的視覺流，用戶的視線會形成個性化的曲線，從而具有節奏感和活潑感。這種類型的眼球運動較大，長時間使用會造成視覺疲勞，因此不適合大段文字。壹般會結合圖形做壹個彎曲的視覺流動，讓用戶的視線在圖像區域停留壹會兒；
如下所示，將圖片添加到曲線視覺流中，讓眼睛停留在圖片節點並瀏覽該節點的內容，然後繼續沿著曲線瀏覽。
2）引導視覺流程
如下圖所示，引導式視覺流會設計壹個誘導元素來吸引用戶的註意力，然後通過誘導元素註意到目標信息；常見的誘導元素可以分為線條、包括人或物體的圖像以及箭頭字母等指示器。這種視覺流要把握誘導要素與目標信息的主次關系，單純的誘導要素不宜過強，否則會削弱目標信息的傳播力；如果誘導元素中可以包含壹些目標信息，則可以提高信息傳遞的有效性。
如下圖所示，管中的紅色液體正在移動，吸引用戶沿著其移動方向到達目標消息。
上面提到的內容形式，從圖片或符號到下壹個視覺焦點，從視覺流的角度來看也是壹種引導型。以下兩個例子是在頁面的本地部分使用引導式視覺流。
3）跳動的視覺流
在具有相同或相似性質的信息中，它通過選擇突出或感興趣的信息賦予人們自主選擇的權利，但在設計中，它也可以通過調整元素的強度來傳遞而不顯示痕跡。
例如，在上文提到的模特公司的網站界面中，模特的照片都是同壹性質的信息，用戶的瀏覽在某種程度上是隨機的，但它也通過放大和縮小肖像來傳達優先級。
4）放射性可視流量
視線從頁面中間開始，使中間的元素具有最強的沖擊力和最清晰的信息傳遞，然後形成從中間發散的視覺運動。
例如，在許多汽車網站中，中間的主地圖最能反映信息的核心，然後通過主地圖傳播到上面的導航或下面的其他服務入口。
上述四種類型的視覺流是典型的，但它們並不代表全部。我們還可以設計更有創意的視覺流。無論哪種路徑，用戶瀏覽是否順暢，信息是否按照優先級傳遞到位都是我們的目標。
最後，總結壹下:
1.在項目前期，我們需要了解頁面營造的氛圍和內容定位；結合交互分析信息的優先級和用戶的核心行為；前期準備可以幫助視覺設計過程不偏離方向
2.通過位置、大小、距離、內容形式和顏色等視覺表達方法建立信息層次。
3.在設計過程中和結束時，我們應該不斷檢查頁面的視覺流程，看看用戶瀏覽是否順暢。
我們有意識地分析用戶關註的信息優先級，並將其可視化地展示出來，這是視覺設計師職位非常重要的職責。我希望這些方法可以幫助我們更好地履行這壹職責，我也很喜歡並鼓勵妳！
我和朋友做了壹個小程序理論塢，建立自己的理論庫？；有很多關於互動、心理學和管理學的術語、定律和理論。微信掃描下方小程序碼快速體驗！