2019-8-16 資深UI設(shè)計(jì)者
在日常的設(shè)計(jì)工作中，我們也許會(huì)遇到這樣的情況：作品缺少變化導(dǎo)致枯燥乏味；而變化太多又會(huì)顯得雜亂、沒有章法；這就對(duì)應(yīng)了設(shè)計(jì)中統(tǒng)一和打破的關(guān)系，那么為什么統(tǒng)一和打破這兩種看似矛盾的關(guān)系，卻總是能同時(shí)出現(xiàn)在我們的設(shè)計(jì)作品中？如何更好的理解二者之間的關(guān)系并運(yùn)用到日常的工作中去？希望本期內(nèi)容能對(duì)大家有所幫助。
在設(shè)計(jì)中統(tǒng)一并不是所有元素1:1的一模一樣，它可以體現(xiàn)在：板式、配色、元素屬性、處理手法等等，那么為什么要統(tǒng)一？統(tǒng)一的目的是什么？下面我們具體來說：
統(tǒng)一：讓作品更整體
作品不夠整體，會(huì)給人一種信息散亂、沒有視覺焦點(diǎn)的感受；而將視覺元素進(jìn)行“統(tǒng)一”，就能很好的解決這一現(xiàn)象，這無關(guān)乎技法的熟練與否，在我們的日常生活中就隨處可見：比如：我們的書本排版，會(huì)有統(tǒng)一的頁眉、頁腳、段落留白、文字間距等等，其目的就有讓文本內(nèi)容在視覺感受上更像一個(gè)整體；下面我們看個(gè)設(shè)計(jì)中的案例：
如圖所示，上側(cè)案例給人的感覺比較雜亂，不夠整體，原因在于：元素與元素之間的關(guān)聯(lián)性不強(qiáng)，且視覺形態(tài)及色彩屬性各不相同，導(dǎo)致整體各元素之間的呼應(yīng)不夠明顯，所以會(huì)給人一種不夠整體甚至雜亂的感覺。而下側(cè)案例通過在形態(tài)、色彩、屬性等方面的統(tǒng)一化處理，加強(qiáng)了每個(gè)單獨(dú)視覺元素之間的呼應(yīng)，使得畫面更整體！
統(tǒng)一：讓作品更整潔
不管是在設(shè)計(jì)工作還是日常生活中，干凈整潔的東西都是更易于大眾接受的，在設(shè)計(jì)工作中，做好統(tǒng)一是最重要的一環(huán)，在此前提下，才能做好另一環(huán)“打破”！所以當(dāng)設(shè)計(jì)作品出現(xiàn)亂的現(xiàn)象時(shí)，我們需要對(duì)其視覺元素進(jìn)行規(guī)整及相應(yīng)的處理，比如：
通過左右對(duì)比我們發(fā)現(xiàn)，很明顯右側(cè)給人的感覺雜亂無章，而左側(cè)干凈整潔、有條理，原因在于：
①、元素與元素之間并不是相互孤立的，而是在視覺上存在著一定的呼應(yīng)關(guān)系，相互關(guān)聯(lián)，這樣畫面整體性也會(huì)更強(qiáng)。
②、視覺上將原本各不相同的形態(tài)以及色彩重新進(jìn)行了統(tǒng)一處理，目的是通過減少視覺元素形態(tài)及色彩變化而進(jìn)一步提升畫面的整潔。
③、視覺元素在物理關(guān)系以及屬性上也做到了統(tǒng)一，即統(tǒng)一元素與元素之間的間隔、形態(tài)、顏色等等。
下面我們?cè)倏唇M案例：
上圖中，相比而言案例二比案例一給人的感覺更整潔、干凈、也更像一個(gè)整體，原因在于：案例二中配圖的屬性做到了視覺上的統(tǒng)一，具體體現(xiàn)在：①、圖片的顏色屬性：統(tǒng)一藍(lán)色色相屬性；②、圖片的內(nèi)容屬性：統(tǒng)一高端、仰視角度建筑屬性；③、圖片的留白屬性：每一幅配圖在視覺上都會(huì)有一些留白性質(zhì)的屬性，給人的感覺很舒服。
所以：出于讓整體更整潔的統(tǒng)一，大多是在做減法或者合并的過程，目的是減少一些造成視覺整體雜亂的因素，比如：色彩雜亂、圖形雜亂、文字形式雜亂、視角角度雜亂、以及過多無關(guān)聯(lián)的視覺元素等等，統(tǒng)一的過程也是整合視覺元素的過程。
注意：設(shè)計(jì)中的統(tǒng)一并不是絕對(duì)的，而是相對(duì)的，如果所有的視覺元素、屬性都嚴(yán)格按照統(tǒng)一化去處理，那么就會(huì)滋生另一個(gè)問題：整體視覺太過平滑、缺少變化甚至?xí)o人一種單調(diào)、枯燥的感受。那么在強(qiáng)調(diào)統(tǒng)一的同時(shí)，“打破”就是為了解決這難題的。
在日常設(shè)計(jì)工作中，打破是建立在統(tǒng)一基礎(chǔ)之上的操作，那么既然已經(jīng)做好了統(tǒng)一，為什么還要打破呢？打破能為作品帶來什么？下面我們具體分析：
打破：提升作品視覺層次感
當(dāng)作品過于統(tǒng)一時(shí)，很容易會(huì)給人一種單調(diào)、乏味、缺少層次變化的視覺感受，而在統(tǒng)一的基礎(chǔ)上做一定的打破操作，就能起到很好的解決這一現(xiàn)象的作用，那么什么是打破？舉幾個(gè)簡單的例子：
如上圖所示，圖①就屬于過于統(tǒng)一的表現(xiàn)形式，很明顯整體平淡、乏味，缺少視覺變化；而其他都是在統(tǒng)一的基礎(chǔ)上做了一些“打破”的處理，只不過各自切入點(diǎn)不同，下面我們逐一分析：
圖②：切入點(diǎn)是打破了一成不變的排列形式。
圖③：切入點(diǎn)是打破了一成不變的配色形式。
圖④：切入點(diǎn)是打破了完全統(tǒng)一的配色形式以及形態(tài)。
圖⑤：切入點(diǎn)是打破了統(tǒng)一的元素屬性值。
圖⑥：切入點(diǎn)是打破了統(tǒng)一的元素屬性。
以上這些雖然切入點(diǎn)都各不相同，但是目的都是通過打破過于統(tǒng)一的視覺現(xiàn)象，增加整體視覺變化程度，從而提升整體視覺層次感，也打破了呆板、乏味，增添了一些視覺上的跳躍性。
下面我們?cè)倏磦€(gè)設(shè)計(jì)中的例子：
如圖所示，上側(cè)案例屬于很好的貫徹整體統(tǒng)一的理念，而下側(cè)案例則是打破了固有的統(tǒng)一、卻也保留了大部分統(tǒng)一的屬性，通過兩者對(duì)比我們發(fā)現(xiàn)，其實(shí)單只看這一組案例：兩種表現(xiàn)形式都是可取的，只不過相比而言下側(cè)案例給人的視覺感受變化更多、層次感更強(qiáng)，所以相比而言給人留下的視覺印象更深刻。
上面說兩種表現(xiàn)形式都可取的前提是：單單只看這組案例，但是很顯然這組案例只是頁面的局部，如果整體頁面都如上側(cè)案例那樣嚴(yán)格的按照統(tǒng)一進(jìn)行，那么頁面整體就會(huì)過于平淡、缺少視覺層次感、甚至主次不分明。
打破：劃分視覺主次
在現(xiàn)實(shí)生活中，具有差異化的人或?qū)嵨飼?huì)很容易引起周圍人的注意，甚至印象深刻、難以忘懷。在設(shè)計(jì)中亦是如此！其具體表現(xiàn)形式參考上圖①-⑥，因?yàn)榇蚱七^于統(tǒng)一就是在營造具有差異化的視覺元素，從而會(huì)很容易在視覺上形成先后、主次之分，所以就起到了一定的劃分視覺主次的作用。
注意：打破也不可盲目的進(jìn)行，過于統(tǒng)一會(huì)單調(diào)、乏味、重復(fù)感強(qiáng)；而過于追求差異化也會(huì)出現(xiàn)雜亂、沒有章法的視覺現(xiàn)象。所以一定要結(jié)合實(shí)際情況靈活運(yùn)用。一幅作品中大多情況下：打破的次數(shù)要少于統(tǒng)一，即作品整體絕大不多保留整體統(tǒng)一的屬性，通過局部打破處理提升整體出彩度，這樣容易給人一種干凈、整潔且不失視覺變化、層次感的感受！
不妨找一些優(yōu)秀的網(wǎng)頁分析一下，是否很多優(yōu)秀的設(shè)計(jì)作品都符合這一規(guī)律？
綜上所述，統(tǒng)一是為了讓作品有視覺條理性、更整體，而打破則是增加視覺層次變化，讓作品更出彩！統(tǒng)一和打破看似是兩個(gè)矛盾的名詞，實(shí)則在設(shè)計(jì)中是相輔相成的作用！不管是統(tǒng)一還是打破，兩者的切入點(diǎn)都是相似的，一般體現(xiàn)在：形態(tài)、屬性、色彩、大小、位置關(guān)系、留白等等。但是無論如何統(tǒng)一都是打破的前提，如果作品整體性都不夠，再一味的追求打破關(guān)系，只會(huì)讓作品越做越亂。所以一定要先做好統(tǒng)一，其次才是進(jìn)行打破、改變。當(dāng)然文中提到的只是一部分，希望大家能活學(xué)活用、舉一反三！
文章來源：站酷
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com