2020-2-21 資深UI設(shè)計者
在日常的設(shè)計工作中,版式即一個畫面的骨架,也是視覺傳達的重要組成部分,版式整體的活躍程度也能起到改變畫面基調(diào)的作用,這也就是為什么很多作品看似很「簡單」,但卻不失設(shè)計感的原因。如何把原本比較中規(guī)中矩的版式結(jié)構(gòu)通過設(shè)計手法將其差異化、提升設(shè)計感、增強活躍度,這樣做的目的是為了打破墨守成規(guī)的形式,提升用戶停留時間,以及畫面的趣味性,所以本期就和大家一起總結(jié)一些常用增強版式活躍度、提升版式設(shè)計感的設(shè)計手法。
色塊疊壓法,顧名思義就是改變色塊的擺放方式,可以分為兩類,第一類是色塊與色塊之間的疊壓。通過色塊與色塊之間的非常規(guī)擺放形式,打破原本常規(guī)的版式結(jié)構(gòu),增強其形式感、活躍度。下面我們舉個例子:
通過上下對比,我們不難發(fā)現(xiàn),下側(cè)畫面整體版式結(jié)構(gòu)更跳躍,直白地說就是不死板,而且形式感更強,給人的感覺也更舒服、有趣味性;而上側(cè)畫面的整體感受并不是說不合理,只不過相對比而言,這種結(jié)構(gòu)形式很常見,版式結(jié)構(gòu)變化性不高,形式感和設(shè)計感也稍有欠缺,那么造成這種現(xiàn)象的原因是什么呢?
色塊疊壓的形式在很多優(yōu)秀作品中也是很常見的,這種手法對于版式結(jié)構(gòu)的重組、改變也是最直觀的一種。比如:
通過色塊之間的相互疊壓,形成了打破常規(guī)的效果,使得頁面版式的跳躍性更強。
第二類是色塊與主體的疊壓方式,通過色塊與主體物或者產(chǎn)品之間的相互疊壓作用,營造出非常規(guī)的設(shè)計形式,從而提升版式整體的靈活度以及設(shè)計感。舉個例子:
這里運用的就是將主體物與色塊之間相互疊壓的手法,形成了一定的前后關(guān)系,而且這里主體處色塊最大作用還是打破常規(guī)的版面形式,目的是在視覺上給人以更加新穎、更具形式感的感受,且雖然做了結(jié)構(gòu)上的改變,但并沒有影響到主體信息的傳達。切記,不能一味地追求非常規(guī)而忽略了設(shè)計本質(zhì)問題,一定要合理運用。
當作品版式不夠活躍的時候,我們可以嘗試刻意改變某處的局部信息,將其放大,提升視覺變化的對比性,因為放大的元素其本身就具有很強烈的視覺沖擊力以及裝飾性,比如大號字體、數(shù)字、圖形等等,所以局部放大的手法在頁面版式設(shè)計中也是很常用的一種表達形式。比如:
將主體的某一處細節(jié)或者某一局部放大處理,與原本偏常規(guī)布局形成了鮮明的對比關(guān)系,對頁面整體而言也起到了很好的打破版式關(guān)系的作用。試想一下:當用戶前面一直在瀏覽比較常規(guī)的布局結(jié)構(gòu)時,突然有 1-2 處這樣非常規(guī)的處理模塊,會很大程度上提升頁面對于用戶視覺的沖擊力,給用戶留下更深刻的印象,同時也使得作品整體的版面結(jié)構(gòu)更加富有跳躍性。
還有另外一種局部放大形式,即在放大的基礎(chǔ)上故意按照非常規(guī)的形式擺放,往往也能起到很好的打破版面布局的作用,只不過這種形式在使用時相對不好把握。比如:
類似案例中所展示的一樣,通過產(chǎn)品非常規(guī)的局部放大以及擺放形式,畫面給人的感受更加大氣,視覺沖擊力更強烈,同時版式的跳躍性也更強。只不過這種形式在運用時要注意:頁面整體中最多出現(xiàn) 1-2 次即可,用于活躍版式、提升設(shè)計感,一旦出現(xiàn)次數(shù)過多,很容易形成雜亂的現(xiàn)象,之所以叫做非常規(guī)是因為有常規(guī)方式加以襯托、輔助,所以才會在視覺上形成反差。
既然是為了提升版面的活躍度,那么版面中所有的元素都可以是嘗試改變的元素,比如常用到的按鈕,再或者線條等等。使用非常規(guī)的形狀、圖形也是方式之一,比如最簡單的:
說到矩形,很多人都會想到常規(guī)形式,而也有一部分設(shè)計師會聯(lián)想到非常規(guī)形式 1,少數(shù)人會想到 2 和 3 的形式,這四類并沒有設(shè)計上的好壞之分,而是當我們習慣了常規(guī)形式的色塊之后,也可以嘗試一下其他形式,也是會有意想不到的效果。比如非常規(guī)形式 2 的運用:
相比平時看到的矩形排列方式,這一作品則給人很新穎的感覺,原本平面的作品,因為色塊形狀的改變使得整體有了很強烈的縱深感,版面的跳躍性很強烈,這樣的版式還會有人說死板、常規(guī)嗎?
非常規(guī)形狀 3 的使用可以參考下面這個案例:
在原本頁面中完全統(tǒng)一的形狀圖形中變換其中一處的形式,對于頁面整體跳躍性的提升還是一目了然的,原因在于:此處矩形的形態(tài)就屬于非常規(guī)類型,本身就具有一定的跳躍性、設(shè)計感,而用在此頁面中又與上下形成了一定的反差對比,所以使得版面整體更加活躍。
還有很多非常規(guī)的形狀,同樣也可以嘗試,比如:
想要版面看起來不古板,就要在頁面中的每一個視覺元素上找突破。版式聽起來好像一個很大的整體一樣,其實一樣可以拋開整體,把每一個局部作為突破點,尋找合適的視覺表達形式。當某一種形式已經(jīng)讓大家所熟知甚至成為常識的時候,我們不妨稍作改變,在不影響辨識度以及視覺傳達的基礎(chǔ)上,做一些形式上的調(diào)整,往往可以給予版式更強烈的跳躍性以及設(shè)計感。
版式就像配色一樣,很感性,沒有完全一成不變的理論。當我們想要提升版面整體跳躍性的時候,我們不妨試試以上方法,也許小小的改變對于整體而言就是完全不同的兩種感受。當然,也不能盲目地追求形式感、特殊性。要切記:特殊是通過對比體現(xiàn)出來的,沒有對比,就無法形成很好的視覺反差,同時也起不到應(yīng)有的作用。還是要提醒大家,一個整體非常規(guī)的手法用在 1-2 處即可,太多的話是很難把握的。
文章來源:優(yōu)設(shè) 作者:美工美邦
藍藍設(shè)計的小編 http://m.820esy.cn