2019-3-21 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
看過或聽過一大堆理論知識的你，有沒有被很多自相矛盾的設(shè)計原則搞混過？比如你把做好的設(shè)計發(fā)給總監(jiān)看，然后他告訴你太亂了，要統(tǒng)一，于是你苦苦調(diào)整了一番。當再發(fā)給他看時，他卻說太平淡了，要有對比。你心想，一會要統(tǒng)一，一會要對比，這不是自相矛盾嗎？當然不是，其實你自己心里明白，只是你不知道如何平衡這兩者的關(guān)系。類似這種「矛盾」的設(shè)計原則還有好幾對，接下來蔥爺要把它們一一理清，讓這些理論知識能真正指導(dǎo)設(shè)計實踐。
對齊是版式設(shè)計最基礎(chǔ)的原則之一，具體指版面中的字與字、字與圖、圖與圖要對齊，常用的對齊方式有左對齊、右對齊、上對齊、下對齊、居中對齊、兩端對齊等。對齊的目的是為了使版面更整潔，更便于閱讀，比如下面這些作品都用到了大量的對齊關(guān)系。
我們來舉個實例，假設(shè)你現(xiàn)在要設(shè)計一則手機banner圖，目的是宣傳某款手機的拍照功能，文案如下：
這種圖不難做，你打算直接用一部手機和幾張攝影作品作為畫面的主視覺，于是去圖片網(wǎng)站找了幾張能體現(xiàn)該手機拍照功能好的圖片：
圖片找好后，你把其中一張圖片填充到手機里作為屏幕背景，其余圖片分散在手機周圍，然后你把整個視覺主體放在了版面中央，文字則按主次排在了兩側(cè)，大致效果如下：
你盯著畫面，正琢磨著還要加點什么的時候，總監(jiān)不知何時出現(xiàn)在了你身后，他面無表情地盯著你的電腦，嘴里慢吞吞地吐出幾個字：「太亂了，好LOW」，之后就消失了。你很聰明，立刻明白了總監(jiān)是想要自己排得更整潔、更有序一點。
在目前的版面中雖然個別元素之間有對齊關(guān)系，但是缺乏整體的對齊，且圖片采用了自由式排版，所以會顯得混亂。于是你嘗試把圖片對齊排列，文字則以圖片為基準進行對齊。
△ 左邊的文字部分與右邊的圖片部分保持上下對齊，標題與內(nèi)文為左右兩端對齊，icon 與文字則是左對齊。
上圖很「完美」地執(zhí)行了對齊原則，整個版面干凈、整潔了許多，視覺流程也更簡單了。這下總可以了吧，然而事情并沒你想的簡單。因為總監(jiān)不知何時又出現(xiàn)在了你的身后，他癟著嘴一臉嫌棄地說道：「太呆板了，有點變化好不好？」
變化？難道又要調(diào)回改之前那種狀態(tài)啊？當然不是，你其實是要在現(xiàn)有的基礎(chǔ)上做一些變化。排版的難點和精妙之處就在這里，既要對齊，又不能機械地對齊；既要整潔有序也要靈活有變化。如何做到這一點呢？我的理解是：要在對齊中制造一點變化，在變化中找到對齊關(guān)系。比如下面這些作品：
現(xiàn)在你知道了，上面的方案之所以死板主要是因為文字部分與圖片部分對得太整齊，所以需要改變其中一個版塊。該版面的視覺主體是圖片，所以調(diào)整圖片更合適。由于文字是呈水平排列的，那么圖片部分是不是可以傾斜擺放形成一定的反差呢？這樣既可以制造變化還能加強版面的空間感。
△ 除了把圖片傾斜之外，LOGO也與內(nèi)文錯開移到了左上角，最下邊的直線也可以延伸到了版面之外。
我們現(xiàn)在再回過頭來看看這件作品是否符合前面我說的，「要在對齊中制造一點變化，在變化中找到對齊關(guān)系」這一要素。
從上圖中可以看出，圖片雖然做了傾斜，卻是在對齊的基礎(chǔ)上做的變形扭曲。版面中的元素雖然不是都對齊了某條直線，但是沒有哪一個元素是孤立的，每一個元素都與版面中的其他元素有對齊關(guān)系。更重要的是，左邊文字版塊的視覺重心與右邊圖片版塊的視覺重心也是呈水平對齊的，所以整個畫面才得以平衡。
雖然設(shè)計的構(gòu)成要素只有文字、圖片、色彩，但是每一個要素都有無數(shù)種表現(xiàn)形式，不同的字體、字號、色值、質(zhì)感、風格、圖片、方向等等。如果在一個版面內(nèi)含有太多不同的東西，會顯得很雜亂，從而讓人心生厭煩，所以，需要通過某種方式把這些「不同」統(tǒng)一起來，以達到舒適、協(xié)調(diào)的效果。
以一則運動品牌的輪播圖設(shè)計為例，文案如下：
這類設(shè)計以運動員作為主體最容易出效果，所以我們需要找一個正在奔跑的人物圖片。
△ 這個人的姿勢不錯，就他了。
運動品牌最重要的是要設(shè)計出動感和時尚感，所以我把背景分割成一紅一藍兩個傾斜的色塊，然后把人物放在畫面中央，文字分布在左右兩邊，以制造出強烈的視覺沖擊。
由于有一個動感十足的模特和背景，所以整體看來還是比較符合運動海報的調(diào)性，但視覺上有點亂，因為有很多細節(jié)沒有統(tǒng)一，比如人物傾斜的角度和背景色塊、標題傾斜的角度不一樣，主要文字的字體風格不一樣（NIKE和JUST DO IT的字體比較硬朗，而蓄勢待發(fā)的字體相對較柔），元素的風格也不統(tǒng)一（圓角的了解更多按鈕與整體風格不搭），還有各元素的顏色也缺少聯(lián)系等等。
那該怎么辦呢？這里就需要用到統(tǒng)一的原則了，我們可以試著把上面提到的不統(tǒng)一的地方都統(tǒng)一起來，如下圖：
△ 調(diào)整后的方案二，字體都是簡潔有力的黑體字，而且把左右兩邊的字體進行了水平對齊、背景色改為單一的漸變色、人物和文字的傾斜角度也統(tǒng)一了，「了解更多」的按鈕也改成了平行四邊形色塊、顏色更是被縮減到了三種。
調(diào)整之后確實不亂了，但是也有了新的問題，因為各元素太過統(tǒng)一使得畫面缺乏層次和對比，該突出的信息也沒有得到突出。這時候就需要用到與統(tǒng)一對立的另一個原則——對比。
對比，是把具有明顯差異、矛盾和對立的雙方安排在一起，進行對照比較的表現(xiàn)手法，目的是為了使設(shè)計更有層次、增加視覺沖擊力。設(shè)計中常見的對比有大小對比、字體對比、色彩對比、空間對比、方向?qū)Ρ取㈤L短對比、粗細對比、曲直對比、輪廓對比、虛實對比等等。
想要處理好統(tǒng)一與對比的關(guān)系，需要記住兩個要領(lǐng)：
順著這樣的思路，我們來給上圖增加一些對比關(guān)系，例如方案二的標題傾斜角度太大，不美觀，所以我干脆把它的傾斜方向改為垂直傾斜，既保留了動感也增強了對比，更加美觀。在文字的字號上，我選擇突出品牌名縮小廣告語，加強了大小對比，并且還恢復(fù)了之前把背景一分為二的做法，只是增加了一點空間感，并把人物服裝的顏色與背景色做了統(tǒng)一。調(diào)整后的效果如下：
我們可以觀察一下，方案三確實比方案一更協(xié)調(diào)，比方案二更有層次和視覺沖擊力，且整體調(diào)性依然年輕、時尚、有動感，這里就是運用了統(tǒng)一與對比的原則。
簡單應(yīng)該是大家聽得最多的設(shè)計原則，簡約、極簡風格的設(shè)計也非常受歡迎，但是我們也很困擾，因為自己做的所謂極簡設(shè)計經(jīng)常會被人說太單調(diào)、不夠豐富；而那些自我感覺很豐富的設(shè)計又會被說成是雜亂。為什么會這樣呢？我們先來正確地認識一下簡單與豐富。
簡單并不是指做設(shè)計要用最少的元素、不做任何修飾，而是指設(shè)計主旨要簡單，視覺流程要清晰，視覺要聚焦，主次要分明。
△ 上圖的設(shè)計雖然元素和色彩都很多，但整體給人的感覺也還是簡單的。
而豐富也不是指畫面中一定要有很多元素或疊加一堆的效果，而是指有細節(jié)、有層次、有品質(zhì)感。
△ 上圖的設(shè)計雖然整體看來很簡單，但是并不會顯得單調(diào)。
為了方便理解，我們還是來舉個例子：一款農(nóng)產(chǎn)品冊子的封面設(shè)計。該封面的必要元素很簡單，只有一個 Logo 和一句文案，因此，我們很容易想到做個極簡風格的設(shè)計。白色背景加一個 Logo 和一行文字，再配一款特種紙，做點工藝，就可以顯得很高大上，很多大品牌也是這么做的。
這也是一種還過得去的解決方案，但表現(xiàn)手法確實太過簡單，既體現(xiàn)不出設(shè)計師的設(shè)計功底，也沒有體現(xiàn)出農(nóng)業(yè)品牌的調(diào)性和特色，且缺乏吸引力，所以我們需要做加法，讓其變得更加豐富。
怎么豐富呢？最直接的辦法就是引入圖片和色塊，由于品類為農(nóng)產(chǎn)品，且文案重在強調(diào)健康和安全，所以我們可以找一張綠色、生態(tài)的圖片。
為了與狹長的版面保持統(tǒng)一，我把圖片也裁剪成了豎版的矩形，并與一個同樣大小的綠色色塊結(jié)合在一起，組成版面的主視覺，logo放在圖片左側(cè)，如下圖：
這么做還是有些設(shè)計感的，也增加了品類屬性，不過缺少細節(jié)、不耐看，所以還需要加點東西。當然，新增加的元素只能作為輔助，不能太過搶眼，圖片方面我很快想到了葉脈，葉脈與圖片中的葉子元素也能產(chǎn)生關(guān)聯(lián)，且適合做底紋，于是我又找來了一張葉脈的圖片。
把葉脈圖片放在圖層最底部作為背景處理，這里會遇到三種情況，一是如果把葉脈紋完全平鋪的話，整個版面就沒有留白了，所以會顯得壓抑；二是把整片葉子都顯示出來，但這么處理會顯得很小氣。所以我只用葉脈紋覆蓋了一半左右的版面，與圖片部分形成呼應(yīng)，這樣的效果看起來是比較舒服的。
圖片部分得到了改善，但現(xiàn)在畫面中還缺少一點小的裝飾元素，增加一點文案是個不錯的思路，所以我把文案和品牌名的英文加了進來。
做完加法后整個畫面變得豐富了不少，層次也拉開了，而且給人的感覺依然比較簡單，既不雜亂也不壓抑，因為各元素主次分明，既有聯(lián)系又沒形成干擾。不過做加法的時候也要把握度，例如下圖就有點堆砌過度了，看起來很繁雜、不精致。
想要處理好簡單與豐富的關(guān)系，需要注意兩點：
規(guī)范與打破是存在于版式設(shè)計中的一對矛盾原則，規(guī)范是指把版面中的元素要按某種規(guī)律，或是在特定的范圍內(nèi)設(shè)計布局，目的是為了讓畫面更有條理和秩序，也更像一個整體。
△ 上圖的主要元素都規(guī)范在一個矩形中，然后各個小矩形又組合成一個大矩形，看起來很整體，很有設(shè)計感。
與規(guī)范對立的是打破，指打破規(guī)范、打破束縛、打破平靜，目的是為了使畫面看起來更靈活、更有動感、更具視覺沖擊。
△ 用色塊或圖片來創(chuàng)造束縛感，然后把部分元素沖出色塊，是規(guī)范與打破的一個經(jīng)典組合形式。
可以說經(jīng)過了嚴格規(guī)范而變得很好看的優(yōu)秀設(shè)計很多，而有些設(shè)計卻選擇了打破規(guī)范，也得到了很驚艷的效果。那什么時候該嚴格遵守規(guī)范？什么時候應(yīng)該打破規(guī)范呢？其實在一件完整的設(shè)計中最好兩者都要有，而平衡這兩者的要領(lǐng)就是：先規(guī)范后打破，即在規(guī)范好的基礎(chǔ)上選擇一些局部來打破。
蔥爺還是以一個畫冊的封面設(shè)計來作為講解案例。這是一本中國移動云服務(wù)平臺方案介紹的冊子，文案如下：
很明顯該封面的視覺調(diào)性應(yīng)該要有科技感，要能體現(xiàn)互聯(lián)網(wǎng)、信息、大數(shù)據(jù)這些關(guān)鍵詞，所以我找了一張看起來很有科技感的圖片。
這類畫冊的版式通常應(yīng)該偏向簡潔、規(guī)矩，所以我決定用網(wǎng)格系統(tǒng)來輔助排版。以圖片作為封面的主視覺，除了Logo，所有元素都排列在矩形圖片內(nèi)，并且所有文字都按照網(wǎng)格的設(shè)定保持左對齊，所有元素的高度、寬度，以及各元素之間的間距，都嚴格按照網(wǎng)格來排版。
△ 經(jīng)過規(guī)范的版面整體看起來十分嚴謹。
不過這么做也造成了版面缺少變化、太過規(guī)矩等問題，所以我們可以嘗試在此基礎(chǔ)上做一些「打破」。
比如原本的 LOGO 與圖片靠得太近，顯得很壓抑，這里就不必完全按照網(wǎng)格來排版，我們可以根據(jù)自己的感覺將 LOGO 與圖片分得更開一些；中文標題、短線、英文標題這三者也太擁擠了，可以挪開一點；文字部分不一定全部都在圖片范圍內(nèi)，所以我給英文標題加了一個藍色塊，并把色塊移出了圖片區(qū)域；以及把最下面的公司名稱排在了圖片下方等。調(diào)整后的效果如下：
△ 調(diào)整后的方案，構(gòu)圖也相應(yīng)發(fā)生了變化，之前為上下構(gòu)圖，現(xiàn)在變成了對角構(gòu)圖。
在規(guī)范的基礎(chǔ)上做了打破之后，我們可以看到，版面的整潔性依然在，整體的調(diào)性也依然簡潔、嚴肅，但相比調(diào)整之前顯得更靈活、更有設(shè)計感。
設(shè)計不是簡單的加減法，也不是只要做到對齊、統(tǒng)一這些很簡單，方向很明確的原則就可以了，因為根本不存在什么原則可以讓我們直接通向設(shè)計的終點，但是我們的目標是明確的，就是要做有效的設(shè)計，所有的設(shè)計原則、設(shè)計手段都要為這個目標服務(wù)。
藍藍設(shè)計( ssll180.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://ssll180.com