視覺布局層次是塑造優秀數字産品的基礎，它能讓内容以更加有效的方式被組織到一起，使其更容易被了解。視覺層次對于使用者體驗的影響很大，資訊的組織架構是否清晰直覺，将直接影響到整體的導航和浏覽互動。
對于藝術留學的同學們來說，布局不僅僅用在互動設計、網頁設計中，在其他專業的排版中也十分重要。那麼布局怎麼做到不單調而有層次？看看Dribbble的大神設計師 Czékmány Zoltán教給大家的設計技巧，正在為作品集制作而發愁的小夥伴們可以借鑒參考哦！
結合使用者浏覽模式建構層次
使用者的浏覽模式中最常見的兩種浏覽模式就是F型浏覽模式和Z型浏覽模式。
使用者在浏覽新聞和部落格等内容量較大的網站頁面的時候，會采用F型模式來快速掃視，定位自己感興趣的内容。使用者會先橫向掃視，然後視線向下移動，再橫向浏覽。整個視線的軌迹類似于字母F，而使用者會在掃視過程中不斷找到自己感興趣的關鍵詞或者内容。
Z型浏覽模式則主要發生在不那麼複雜的頁面當中，甚至于其中都不會包含太多的文本内容，使用者會快速地從左到右從上到下浏覽，整個視覺軌迹類似字母Z。
了解這些使用者浏覽模式，你就可以根據實際狀況，有意識地将關鍵的元素放置在使用者掃視最多的節點上，引起使用者的注意。
用不規則邊緣營造質感
即使是簡單的左右布局，在元素不多的情況下，也可以使用參差而不規則的邊緣來打破整齊的邊緣，打破簡單而死闆的感覺，讓頁面擁有更加自然的感覺，提升質感。
恰到好處的對比式配色
橙色+黑色的搭配和經典的黃黑配色一樣，對比槍類，視覺沖擊力足夠。兩種對比色加上中性的白色，讓整個頁面的配色擁有層次感。圖檔元素沿用了相同的配色，而頁面正中間的文本采用了半透明的白色，讓頁面層次更加豐富。
打破邊界的視覺元素
同樣是經典而簡約的布局，左邊文本右邊圖檔，設計師隻是簡單的吧圖形元素從圖檔中提取出來，就打破了常見圖檔素材的邊界感。底部的深色導航不僅具備功能性，而且讓整個網頁布局看起來豐富而又不讓人覺得複雜。
使用強調細節的視覺素材
文本簡單的居中排布，标題和正文大小對比明顯，足夠簡單了。而真正讓網頁顯得不那麼單調靠的是左側細節豐富的半邊人臉。人臉本身會更容易引起使用者的注意力，加上面部毛發和皮膚的質感，賦予頁面以資訊量，又沒有讓布局複雜化。
巧妙使用字型組合
依然是簡單的左右式布局，左側圖檔并未貼邊使用，邊緣留白讓圖檔和背景之間增加了層次。右側文本标題，并未使用單一字型，而是采用了風格不同的兩種字型進行搭配，風格不同，排布上卻互相補充，錯落而協調，讓頁面一下子活了起來。
大膽增加色彩
在控制視覺層次的時候，色彩所起到的作用也是不可替代的。在很多時候，色彩能夠幫助用明白哪些元素是核心。在整個配色當中，色彩通常有着強弱之分。大膽的色彩諸如紅色和橙色，就比相對弱一些的白色和淺灰要來的顯眼，設計師常常使用醒目的顔色來高亮顯示關鍵性的内容。在使用色彩建構層次的時候，關鍵在于層級的控制，有對比才有層次。
靈活使用重疊的色塊元素
色彩疊加是最近幾年非常流行的設計技法。色塊并不一定要覆寫整個頁面，即使隻是覆寫部分的圖檔元素也可以達到增加層次的作用。和圖檔部分重疊的藍色還打破了邊界，視覺上從簡單走向參差不平衡，進而讓布局打破了呆闆的感覺。
嘗試錯落重疊的圖檔
頁面配色不用複雜，使用對比色+中性色的搭配，黃黑兩色+白色。兩張帶有色彩疊加的圖檔錯開排布，很簡單就讓頁面有了活躍的氛圍，前後對比也清晰直覺。錯開的位置露出功能性的按鈕和連結，非常巧妙。
讓圖檔發聲，圍繞圖檔設計
高清大圖作為視覺主體，但是隻有它是否有點單調呢？标題文本可以結合圖檔内元素的前後景關系，插入進去，輔助性的連結可以放在圖檔的邊角（注意對比度），功能性的連結，則可以用頂部導航和側邊欄來承載，布局簡單但内容豐富。
圖檔和圖形元素的結合
粉色和白色的搭配幾乎是整個網頁中唯二的色彩，而從圖檔中提取的圖檔置于頁面中間似乎又太單調了。在背景加入圓形的背景烘托，不僅讓作為視覺焦點的圖檔素材被圖形拘束起來，顯得整齊，而且起到了增加層次的作用。
留白同樣是需要掌控的視覺元素
首先留白不單純隻是元素和元素之間的空域，它同樣是用來建構布局的視覺元素。留白的重要性在于，它可以使得被留白包圍的元素被使用者注意到，尤其是關鍵性的互動控件。通過控制留白的疏密，設計師能夠讓不同的元素之間的親疏關系展現出來，而大量的留白還能讓關鍵性的、需要強調的特定元素，醒目地呈現在使用者面前。換句話來說，用好了留白，自然也就能自如地控制UI的層次感。
利用黃金比例
黃金比例是1:1.618，被認為是最具美感的視覺比例，在自然界當中幾乎無處不在，而許多美麗的自然景觀和生物奇觀，大多都和黃金比例有着或深或淺的關聯。許多設計師喜歡在布局架構中使用黃金比例，它能使得布局有輕重，又顯得足夠協調。
巧妙使用栅格
栅格是設計師控制布局的關鍵性工具之一，布局在不同的環節發揮着不同的作用，而控制視覺層次，同樣有用。栅格有助于将不同的元素控制在不同的比例大小之下，保持合理的距離，控制留白。總體上，栅格對于層次的控制是非常有效的。
3層級的資訊展示
在螢幕上浏覽網頁的時候，3個層級的資訊能夠讓頁面看起來豐富，但是資訊的呈現又足夠清晰有條理，主要和核心的資訊最容易吸引使用者的注意力，這是第一個層級；易于掃視的文本内容以标題和副标題的形式呈現，幫助使用者對于内容有基本的了解，而正文和說明則将内容更為具體地展現出來，供使用者仔細閱讀。
看完這些設計技巧，是不是已經躍躍欲試了呢，在作品集最後的沖刺階段，用這些技巧為自己打造一份完美作品集吧！
-END-