“會哭的孩子有奶吃”這是老以輩常說的話,孩子哭了,父母就知道孩子餓了;把這句話運用于網頁設計中,突出網站中的主題元素,才能夠吸引用戶的注意。那么如何能夠確保你的品牌標志設計真夠有效的傳播呢?只有讓你的設計更富有層次,更精彩!讓網頁從視覺上虜獲用戶的心!
那么問題來了,富有視覺層次的網頁可以從哪些方面突出呢?
視覺層次結構的一個最重要的功能是幫助作品建立一個焦點,當觀眾開始瀏覽你設計作品時給他們一個入口點,并且讓他們能夠看到你要展示的最重要的信息在哪里。
讓我們回顧一些不同的方式,通過突出我們的設計元素,來創建一個清晰的具備焦點和動態的視覺層次:
1.使用大小來加強(或削弱)可見性
把最大的設計元素最吸引眼球。擴大一個對象的大小(其尺寸)和規模(它與其他對象的大小關系)是提高它視覺重要性最簡單直接的方法。
另一方面,一些設計元素沒那么重要或者你想把它弱化,可以通過減小它的大小來使它不那么明顯,以此來降低它的視覺層次。
就像任何的設計準則一樣,平衡和適度都是關鍵。一個太大的視覺焦點會毀掉一個設計,而一個太小的次要信息則會損害其可用性。
2.色彩和對比度:對觀眾注意力直接的吸引
在視覺上最能引起我們注意的就是色彩,特別是當它被有意圖地用在特別重要的信息傳達或者圖像當中。比如像紅色或者黃色這樣明亮的色彩,不管它是出現在道路兩旁的交通標志上還是掛在當地咖啡館門頭上的招牌上,我們都很難不去注意到它。
然而,如果你想把彩虹當中出現的所有顏色都用于設計中,當你忽略其中任何一種顏色都有可能影響視覺層次的構建。這也是我們提倡帶使用盡可能少的顏色并且帶有目的性的使用它的關鍵原理所在。
從另一個角度來說,在色彩和對比度的設計上,也有很多創造性的方法可以應用于引導觀眾的視線,包括:
色溫:色彩可以是冷的(就像藍色和綠色),暖的(例如紅色、橘色和黃色),也可以是中性的(比如黑色、白色、灰色,有些時候出現的棕色或米色)。色溫的混搭,特別是出現高對比度的時候,能夠產生很大的視覺吸引力。
色值:顏色的色值指的展示為顏色的亮或暗。像色溫一樣,不同色值的顏色可以通過互相搭配,產生戲劇性的效果,而相似的色值的顏色則會有更均等的視覺重量。
飽和度:一個極其純的顏色,其明度是100%飽和,越接近灰色,就越不飽和。采用明亮的或柔和的顏色(一種單一的顏色或者與別的顏色相配合)是在設計中實現高對比或者低對比的重要策略。
03. 排版的層次結構:從3個層次來組織你的設計
對于任何以文字為主的設計,文字排版層次是視覺層次中一個不可忽視的部分。若想了解文字排版層次最基本的概念,只要去想想那些報紙或者雜志文章里面的標題,子標題和正文。
這個將文字分為3層次的方法能用個任何的設計里面(從名片到網站)。讓我們在更詳細的了解一下每個層次并看看他們通常可能被用在哪里。
第一層次:一般來說,你排版中的第一層次會是最重要的內容,這些內容應該是你設計中最容易被看到的元素
第二層次:第二層次的元素一般是為了整合你的設計,或者把相關的信息鏈接起來。它們不能跟你的第一層級的元素一樣出眾,但是應該很清楚的指導閱讀者區分設計中不同的部分和引導讀者。
第三層次:對于一個文字的排版,第三層次一般是指完整的信息,目的或者是設計的細節。它可以是長的或者短的(比如一整片文章,一個簡短的注釋,一個簡介)。但是這部分主要考慮其強烈的可讀性,即使文字的大小看起來稍微小。
04. 字體:仔細選擇字樣類別和風格
排版層次不是文字排列時需要考慮的唯一一個方面。您的字體本身的外觀 – 字體類別(無襯線,襯線字體,腳本,或裝飾)和樣式(粗體,斜體,小盤股等) – 這些因素決定是否造就好的設計
可以把字體想象作為人格類型。你知道有些是響亮而華麗的,有些是安靜,但有趣的,其他的一些是靈活的,適用在什么地方,取決于跟誰搭配。
適當地使用這些特性(使之與你項目中的內容相匹配),并有策略地提升你的設計。雖然排版層次將整合你的設計,使之便于瀏覽,文體的選擇則有助于提升設計的整體氣質,并創建一個自然的強調方式。
5.間距:讓你的布局平衡、流暢以及焦點明確
通常,在設計中最容易忽視的卻很重要的原則是白色區域的大小和留白手法。當你在你的設計布局中沒有提前為留白區域做準備,尤其是你努力去填充盡可能多的信息的時候,很大可能你最終會得到一個亂七八糟、混亂不堪的設計。這是因為留白在你的設計中是能夠幫你分離組織元素,讓其看起來有條理,布局平衡的必要元素。
你可能之前看到過:一個網站或傳單被信息、文字和圖像塞得滿滿的,你甚至不知道你應該從哪開始看起。不要創造出像那樣在瀏覽順序上雜亂無章的設計,這樣會趕走你的來訪者。
時刻計劃著空白區域,這是至關重要的事,如:
·讓瀏覽者的眼睛有一片休憩的區域以及暢游設計的路徑。
· 將版面分為幾部分(這樣做一方面能保持良好的間距,另一方面是能減少空間,從而把相關內容連接的更緊密)
06.構圖:確定你的設計結構
你能通過我們之前提到的一些技術方法制作的布局來引導訪問者,但是,大部分設計更受益于整體結構或者組織規律——這就是我們熟知的構圖。
藝術家已經使用構圖技巧已經有幾個世紀了,它們大部分還在今天使用。讓我們來看一看一些最常用的構圖方法。
三分法:三分法是一種動態的構圖方法,你的焦點預先不是放在中心點上。
相反,這條規則把整體布局分成一個網格,(三條相同距離的水平線和三條相同距離的垂直線)然后,把焦點放在一條線上,或者放在四個相交點其中一點上。
奇數法則:這個法則告訴我們3往往更好。一個創意的周圍有一個奇數的對象(或許焦點被其他兩個或者四個項目圍繞,如下)總是比一個偶數在視覺上看起來更有趣和令人高興。
隱藏的韻律:這會是一個非常有效的指明重要信息和提供簡明設計方案的技巧。怎樣創造這種具有動感的設計?視覺導向線。
導向線不必是實實在在的線條(即使它們可以是實實在在的線條)。它們或以實物、形狀、重疊式設計元素、正負形交疊的狀態出現,或者其余任何能創造一種定向運動的形式。
最常見的除水平的、垂直的,對角的導向線以外,還有S曲線、Z字形線。Z字形線性版式是一種普及的網頁布局基礎,是利用”Z”的形狀為閱讀模式的方式。
建立明確的視覺層次在你的設計項目中的重要性。當然,過多的強調點很容易會破壞整個視覺的層次效果。視覺強調不能使用在過多的設計元素中。否則,所有的東西都變得一樣了。當所有的東西都被突出,那也就意味著沒有一樣東西能夠被突出。層次建立的基礎是要強調某些元素,同時削弱某些元素。
,