2020-2-21 資深UI設(shè)計者
在日常的設(shè)計工作中，版式即一個畫面的骨架，也是視覺傳達(dá)的重要組成部分，版式整體的活躍程度也能起到改變畫面基調(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)上的改變，但并沒有影響到主體信息的傳達(dá)。切記，不能一味地追求非常規(guī)而忽略了設(shè)計本質(zhì)問題，一定要合理運用。
當(dāng)作品版式不夠活躍的時候，我們可以嘗試刻意改變某處的局部信息，將其放大，提升視覺變化的對比性，因為放大的元素其本身就具有很強烈的視覺沖擊力以及裝飾性，比如大號字體、數(shù)字、圖形等等，所以局部放大的手法在頁面版式設(shè)計中也是很常用的一種表達(dá)形式。比如：
將主體的某一處細(xì)節(jié)或者某一局部放大處理，與原本偏常規(guī)布局形成了鮮明的對比關(guān)系，對頁面整體而言也起到了很好的打破版式關(guān)系的作用。試想一下：當(dāng)用戶前面一直在瀏覽比較常規(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è)計上的好壞之分，而是當(dāng)我們習(xí)慣了常規(guī)形式的色塊之后，也可以嘗試一下其他形式，也是會有意想不到的效果。比如非常規(guī)形式 2 的運用：
相比平時看到的矩形排列方式，這一作品則給人很新穎的感覺，原本平面的作品，因為色塊形狀的改變使得整體有了很強烈的縱深感，版面的跳躍性很強烈，這樣的版式還會有人說死板、常規(guī)嗎？
非常規(guī)形狀 3 的使用可以參考下面這個案例：
在原本頁面中完全統(tǒng)一的形狀圖形中變換其中一處的形式，對于頁面整體跳躍性的提升還是一目了然的，原因在于：此處矩形的形態(tài)就屬于非常規(guī)類型，本身就具有一定的跳躍性、設(shè)計感，而用在此頁面中又與上下形成了一定的反差對比，所以使得版面整體更加活躍。
還有很多非常規(guī)的形狀，同樣也可以嘗試，比如：
想要版面看起來不古板，就要在頁面中的每一個視覺元素上找突破。版式聽起來好像一個很大的整體一樣，其實一樣可以拋開整體，把每一個局部作為突破點，尋找合適的視覺表達(dá)形式。當(dāng)某一種形式已經(jīng)讓大家所熟知甚至成為常識的時候，我們不妨稍作改變，在不影響辨識度以及視覺傳達(dá)的基礎(chǔ)上，做一些形式上的調(diào)整，往往可以給予版式更強烈的跳躍性以及設(shè)計感。
版式就像配色一樣，很感性，沒有完全一成不變的理論。當(dāng)我們想要提升版面整體跳躍性的時候，我們不妨試試以上方法，也許小小的改變對于整體而言就是完全不同的兩種感受。當(dāng)然，也不能盲目地追求形式感、特殊性。要切記：特殊是通過對比體現(xiàn)出來的，沒有對比，就無法形成很好的視覺反差，同時也起不到應(yīng)有的作用。還是要提醒大家，一個整體非常規(guī)的手法用在 1-2 處即可，太多的話是很難把握的。
文章來源：優(yōu)設(shè) 作者：美工美邦
藍(lán)藍(lán)設(shè)計的小編 http://www.chinatradebeam.com