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