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