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