2020-8-24 周周
作為一名專業(yè)的設(shè)計(jì)師，版面設(shè)計(jì)能力直接影響到該設(shè)計(jì)師水平。我們很多設(shè)計(jì)朋友在臨摹的優(yōu)秀作品中，往往只是被作品華麗的外表吸引了，比較少去思考設(shè)計(jì)背后的秘密。
那么在這里，我總結(jié)了版式設(shè)計(jì)原理的幾個(gè)方面，結(jié)合一些具體例子實(shí)際操作演示，讓對(duì)這塊不熟悉的設(shè)計(jì)師朋友們能快速掌握版式設(shè)計(jì)。
目錄
一、版式組成
主體：視覺焦點(diǎn)，主導(dǎo)著整個(gè)設(shè)計(jì)（可以是人/物/文字/圖片），整個(gè)版面最吸引人的部分，相當(dāng)于主角的作用。
文案：對(duì)主體的輔助說明或引導(dǎo)，畢竟有時(shí)候我們放一只小狐貍在旁邊，用戶也不能準(zhǔn)確的知道它在說什么，配角的作用。推薦閱讀：平面廣告的版式風(fēng)格與創(chuàng)新！
點(diǎn)綴元素：裝飾元素，可有可無，具體根據(jù)版面需要；好的點(diǎn)綴元素能夠渲染氣氛，大部分的點(diǎn)綴元素遵循三角形原則，類似下圖中的云朵，群演的作用。
背景：可分為純色/彩色肌理/圖片/圖形等。
二、構(gòu)圖平衡
在設(shè)計(jì)中，平衡是實(shí)現(xiàn)統(tǒng)一的一條重要途徑。如果上面所說的元素組合起來處于平衡狀態(tài)，那么這個(gè)設(shè)計(jì)看起來就是統(tǒng)一的，就會(huì)給人一種整體印象。
因此，平衡是視覺傳達(dá)設(shè)計(jì)的一個(gè)重要方面。版式平衡總共有3種分類，分別是：對(duì)稱平衡，非對(duì)稱平衡和整體平衡。
1. 對(duì)稱平衡
對(duì)稱是同等同量的平衡，對(duì)稱式設(shè)計(jì)是一種靜態(tài)的，可預(yù)見的，講究條理和平衡布局的設(shè)計(jì)。對(duì)稱構(gòu)圖相對(duì)比較易于創(chuàng)建，特點(diǎn)是穩(wěn)定，莊嚴(yán)，整齊，安寧，沉靜和古典。
2. 非對(duì)稱平衡
非對(duì)稱在不對(duì)等的元素間創(chuàng)設(shè)出秩序和平衡，非對(duì)稱設(shè)計(jì)由于版式不可預(yù)見，所以空間是變化的。特點(diǎn)是動(dòng)態(tài)的，靈活的和富有活力。非對(duì)稱構(gòu)圖比較多，常見的有以下6種形式。
對(duì)角線構(gòu)圖：
文案擺放在版面的對(duì)角線方向，一方面避免了司空見慣的居中版面，一方面給中心主體留出了更多的創(chuàng)作空間；另外中心的圖形也可以是對(duì)角線的設(shè)計(jì)，這樣會(huì)讓整個(gè)構(gòu)圖看起來比較平衡。
發(fā)射狀構(gòu)圖：
點(diǎn)綴元素圍繞中心的文案或者圖形發(fā)射，這樣的構(gòu)圖會(huì)讓中心的視覺容易聚焦，視覺沖擊感會(huì)更強(qiáng)烈。
像電商大促活動(dòng)，淘寶和京東等等會(huì)經(jīng)常使用發(fā)射性構(gòu)圖來營(yíng)造大促活動(dòng)的熱鬧火烈程度。
中心構(gòu)圖：
這是我們最常見的構(gòu)圖之一，文案和主體居中頁面，注意的是位于版心的主體要盡可能的出彩，利用設(shè)計(jì)技巧吸引讀者的眼光，這樣才能避免平淡乏味。
s形構(gòu)圖：
文案或者圖形放在線條轉(zhuǎn)折的地方，整體呈一個(gè) s 形。另外線條的起點(diǎn)和重點(diǎn)也同樣是讀者容易關(guān)注的地方，可以放一些重要的信息。這樣的構(gòu)圖靈活，有趣，而且可以引導(dǎo)用戶沿著 s 形軌跡閱讀信息。
二分構(gòu)圖：
文案和主體分開，呈左右或者上下的構(gòu)圖形式，注意的是文案要采用對(duì)齊原則。這樣的構(gòu)圖也是比較容易創(chuàng)建的。
形狀構(gòu)圖：
主體和文案組合的形式可以是圓形，三角形，矩形等形狀構(gòu)圖。注意如果是用三角形構(gòu)圖，最好呈倒金字塔結(jié)構(gòu)，這樣更加輕易引導(dǎo)用戶進(jìn)入下一個(gè)信息層。
3. 整體平衡（滿版平衡）
整體平衡，是指圖片充滿整個(gè)版面，文案布局在上下，左右，中部的位置，特點(diǎn)是主要以圖像為訴求，視覺傳達(dá)直觀而強(qiáng)烈。滿版型構(gòu)圖，給人大方，舒展的感覺。
注意：在設(shè)計(jì)的過程中，這種類型的文字處理很容易顯得「嘈雜」，因此為了避免擁擠的空間，適當(dāng)刪減些文字。
三、設(shè)計(jì)原則
對(duì)構(gòu)圖形式了解后，我們還要知道一些基本的設(shè)計(jì)原則，雖然這些原則我們可以在其他地方反復(fù)的看到，但是我在這里還是要強(qiáng)調(diào)一遍，因?yàn)樗梢詭椭覀冊(cè)诖蚱埔?guī)則之前，必須清楚規(guī)則是什么。另外注意一點(diǎn)就是，這幾個(gè)原則不是獨(dú)立分開的，而是可以同時(shí)考慮和結(jié)合，不是唯一選擇：
1. 對(duì)比
缺乏對(duì)比，作品會(huì)變得平淡乏味并且不能有效地傳遞信息。艾美獎(jiǎng)設(shè)計(jì)師、Blind 公司創(chuàng)始人 Chris Do 說過 contrast is king（對(duì)比至上），運(yùn)用好對(duì)比，可以在頁面上引導(dǎo)用戶的視覺，并且制造焦點(diǎn)。
一般產(chǎn)生對(duì)比的方法可以有：大小對(duì)比、粗細(xì)對(duì)比、冷暖色對(duì)比……不管是哪種對(duì)比，當(dāng)你期望對(duì)比效果有效的話，需要大膽一些，明顯一些，不要拿12號(hào)和13的文字做大小對(duì)比，這是沒有任何意義的，不要畏畏縮縮，做設(shè)計(jì)也是一樣。
2. 對(duì)齊
任何元素都不能在版面上隨意安放。每一項(xiàng)都應(yīng)當(dāng)與頁面上的某個(gè)內(nèi)容存在某種視覺聯(lián)系。在版面上找到可以對(duì)齊的元素，盡管它們可能距離比較遠(yuǎn)。需要注意的地方是避免同時(shí)使用多種對(duì)齊方式。
左邊的海報(bào)采用了矩形構(gòu)圖，右邊的海報(bào)采用了二分構(gòu)圖，但是文案都是找到了一條明確清晰的對(duì)齊線，這樣讓版面產(chǎn)生了秩序美。
3. 親密性
同類相近，異類相遠(yuǎn)，相關(guān)的元素距離靠近，歸組在一起，成為一個(gè)視覺單位，而不是多個(gè)孤立分散的狀態(tài)，這樣有助于組織信息，減少混亂，讓結(jié)構(gòu)變得更清晰。根據(jù)文案內(nèi)容，進(jìn)行合理的分組與歸類。
左邊海報(bào)文案分成了4組，清晰有條理，中心的主體和點(diǎn)綴元素也利用了親密性原則，使得中心主體顯得更飽滿；右邊海報(bào)主體采用了發(fā)射構(gòu)圖，整體呈倒置的金字塔形式，這種錐形容易引導(dǎo)用戶閱讀下一個(gè)信息層。
4. 重復(fù)
重復(fù)的目的是統(tǒng)一，并增強(qiáng)視覺效果。比如標(biāo)題都是同一個(gè)字體或大小或粗細(xì)。但需要注意的是，要避免太多地重復(fù)一個(gè)元素，重復(fù)太多只會(huì)讓人討厭，要注意重復(fù)的「度」。太多的重復(fù)會(huì)混淆重點(diǎn)，都是重點(diǎn)等于沒有重點(diǎn)。一般來說，呈均勻的重復(fù)式圖案，是作為背景使用的。
左邊海報(bào)中，我們的視線會(huì)被那一個(gè)不同的女孩吸引住，這個(gè)女孩和左上角的文案「敏感詞萬歲」相呼應(yīng)，這種同質(zhì)中的不同，即是變異元素，用來制作視覺焦點(diǎn)。
右邊海報(bào)是葛西熏設(shè)計(jì)師為日本著名仲條正義設(shè)計(jì)的個(gè)人展海報(bào)，其中重復(fù)的形象是一個(gè)腮幫鼓起的小孩形象，不知道是在喝東西還是吐東西，這個(gè)具有沖擊感的形象其實(shí)和這次展覽主題「飲&嘔吐」呼應(yīng)的，設(shè)計(jì)師想表達(dá)仲條正義的創(chuàng)作于人生，正如這個(gè)重復(fù)的形象，不斷吸收，不斷推翻，最后不斷創(chuàng)造。
5. 留白
留白是虛實(shí)空間對(duì)比的作用。適當(dāng)?shù)牧舭啄茏岉撁嫱笟猓泻粑?，給人舒適感。大量視覺信息堆砌時(shí)，每個(gè)元素都要經(jīng)過眼睛掃描，大腦處理，當(dāng)找不到重點(diǎn)的時(shí)候用戶眼睛和大腦容易疲憊。在內(nèi)容比較多的情況下，盡量在視覺上減少視覺分組；另外，多利用負(fù)空間創(chuàng)作一些巧妙的負(fù)空間。
左邊在留白的同時(shí)，利用了負(fù)空間巧妙的將海報(bào)的主題「美食」和「美酒」結(jié)合起來。右邊的海報(bào)是日本大師原研哉的設(shè)計(jì)作品，大量的留白空間更加顯得中間壽司的精致，少而靜的視覺元素提升了作品的品質(zhì)感。
6. 變化
一成不變的元素會(huì)容易乏味無趣，版面也缺乏靈活感，如果將一些元素發(fā)生位置，大小或者顏色變化，打破版面呆板、平淡的格局，使得畫面非常有層次感，不失為打破格局的好方法。
左邊的海報(bào)如果將所有的元素歸位，這將是一個(gè)文案和人物分開中規(guī)中距的構(gòu)圖，當(dāng)他們的位置發(fā)生了一些位移，整個(gè)頁面變得有趣多了。右邊海報(bào)采用了 s 形構(gòu)圖，如果這些圓圈是一樣的大小、顏色，可能沒有多少人會(huì)有耐心的閱讀下去。
四、設(shè)計(jì)流程
前面我們了解了版式組成的元素，構(gòu)圖和設(shè)計(jì)原則，那么我們?cè)诠ぷ髦性趺蠢闷饋砟兀旅娼榻B我自己的設(shè)計(jì)流程，每個(gè)人的流程都不一樣，大家都可以根據(jù)自己的習(xí)慣來調(diào)整。
1. 需求溝通，確認(rèn)主題
當(dāng)接到需求的時(shí)候，第一步不要著急馬上開工。先要找對(duì)需求的方向，才能提高工作效率，事半功倍。溝通主要注意幾個(gè)方面：
需求的目的是什么？目標(biāo)用戶是誰？背景是什么？——對(duì)癥下藥
這么多文案或者素材里面，哪個(gè)是一級(jí)二級(jí)?——?jiǎng)澐中畔蛹?jí)，尋找重點(diǎn)
風(fēng)格上面有什么要求或建議？能否用3個(gè)關(guān)鍵詞表達(dá)？——預(yù)期效果是否達(dá)成一致
Ps：關(guān)于第3步風(fēng)格溝通，建議雙方用圖片交流和表達(dá)。畢竟每個(gè)人對(duì)「高大上」的理解都是不一樣的，有的人認(rèn)為是五彩斑斕的黑，有人認(rèn)為是大量的留白。有了圖片，我們可以去分析圖片符合「高大上」的原因是哪些，從而提煉出具體的元素，將「感覺」具體化，這里也是運(yùn)用到了情緒板設(shè)計(jì)的體系。
2. 確定構(gòu)圖形式，學(xué)會(huì)視線引導(dǎo)
根據(jù)前面的溝通和風(fēng)格關(guān)鍵詞，收集好用于表達(dá)信息的元素，包括圖形圖像文字等等，然后在草稿或者腦海中構(gòu)思好，怎樣的排布能讓信息有效的傳達(dá)出去。另外作為設(shè)計(jì)師要學(xué)會(huì)引導(dǎo)用戶的閱讀視線。比如你找到了一個(gè)抬頭向上看的模特，你可以把文案放在海報(bào)上方，用戶會(huì)習(xí)慣性地自然地沿著模特的視線看到文案。
3. 色彩搭配，5種平衡關(guān)系
關(guān)于配色，在網(wǎng)上大家都可以看到很多方法和理論，下面介紹這5種色彩平衡的方法個(gè)人覺得比較實(shí)用，也比較容易理解，大家要根據(jù)實(shí)際需求來運(yùn)用合適的配色方案。
互補(bǔ)色——相互襯托
互補(bǔ)色就是色環(huán)上相對(duì)的兩個(gè)顏色，海報(bào)中的綠色和紅色就是這種關(guān)系，相互映襯，相互襯托，從而達(dá)到了一種平衡。
冷暖色——情感表達(dá)
當(dāng)我們想表達(dá)強(qiáng)烈的情感時(shí)候，可以用冷暖色去對(duì)比，經(jīng)常會(huì)在電影海報(bào)或者插畫作品中看到。
深淺色——色彩層次
這里的深淺指的是黑白灰對(duì)比的重和輕，一般來說，色大而深顯得比較重要，色小而淺顯得比較次要，我們可以看一下前面講構(gòu)圖那塊展示的海報(bào)黑白版，會(huì)發(fā)現(xiàn)這個(gè)規(guī)律更加明顯。
中性色和彩色——視覺聚焦
中性色指的是黑色，白色和灰色，也叫無彩色，當(dāng)中性色充當(dāng)背景色的時(shí)候，彩色部分會(huì)更加突出和聚焦。
純色和花色——平衡多色關(guān)系
如果一張圖中，主體本身顏色比較豐富鮮艷，背景色也五顏六色的話就眼花繚亂了，也就是經(jīng)常說的辣眼睛，這時(shí)候一般采用純色的背景來緩解視覺疲勞和平衡多色之間的關(guān)系。
4. 確定字體搭配
不同的字體有不同的氣質(zhì)，根據(jù)風(fēng)格來選擇合適的字體。如果遇到比較好看的字體，卻不知道叫什么名字，可以找一些以圖搜字的網(wǎng)站，比如求字網(wǎng)等等，避免伸手黨。
黑體
工業(yè)現(xiàn)代感比較強(qiáng)的無襯線字體，給人感覺端正剛硬，具有力量感，多用于表達(dá)簡(jiǎn)潔或信賴感的主題。
宋體
細(xì)致優(yōu)雅的襯線字體、苗條細(xì)長(zhǎng)，特點(diǎn)是復(fù)古，多用于表達(dá)文藝或者時(shí)尚的主題。
圓體
圓體的筆畫圓潤(rùn)，柔美，可愛，具有親和力，多用于女性或兒童的主題領(lǐng)域。
書法體
書法體特點(diǎn)是瀟灑大方，氣勢(shì)磅礴，具有歷史感，多用于表達(dá)傳統(tǒng)文化或者歷史主題。
哥特體
哥特體是裝飾性比較強(qiáng)的襯線字體，線條交接處和末端具有明顯的粗細(xì)變化和裝飾。特點(diǎn)是犀利、凌厲，多用于表達(dá)驚悚、魔法童話或者戰(zhàn)爭(zhēng)的主題。
藝術(shù)體
藝術(shù)體其實(shí)是泛指像素風(fēng)格，手寫字體，漢儀六字簡(jiǎn)等等具有強(qiáng)烈的藝術(shù)風(fēng)格和設(shè)計(jì)感的字體。特點(diǎn)是輕松活潑，具有觀賞性和趣味性。
五、案例演示
上面的案例大部分是平面展覽或者電影海報(bào)，那么實(shí)際工作中的網(wǎng)頁，banner、閃屏或者 ui 界面這些怎么辦呢？其實(shí)方法都是一樣的，版面設(shè)計(jì)的原理應(yīng)用在各個(gè)方面。這里演示一個(gè)移動(dòng)端 banner 設(shè)計(jì)案例吧。
首先，運(yùn)營(yíng)小姐姐的文案非常簡(jiǎn)潔，沒有冗長(zhǎng)到讓我要分成一級(jí)二級(jí)三級(jí)；其次需求的目的也很明確，就是要突出2個(gè)素材和按鈕；最后風(fēng)格也沒有奇奇怪怪的提議，只要和產(chǎn)品整體調(diào)性一致就好。
那么在這里要介紹一下產(chǎn)品的背景了，pins 是一款少女心拼圖 app，界面簡(jiǎn)潔清新，多種布局模板和背景。很快的，我在腦海中簡(jiǎn)單地構(gòu)思了一下構(gòu)圖的方式。其實(shí)3種構(gòu)圖形式都是可以的，但是為了更好的突出按鈕和素材效果，我最后選擇了對(duì)角線構(gòu)圖。
先在黑白稿的情況下把文案和主體布局好，讓主次關(guān)系清晰；考慮到目標(biāo)用戶大部分是女生，使用了圓形字體，配色主要是參考了 pins 的 logo 的配色，少女心的品牌色；最后細(xì)節(jié)調(diào)整，加上一些點(diǎn)綴的元素，其中網(wǎng)格是 pins 比較受歡迎的背景。一個(gè)簡(jiǎn)單的 banner 就這樣完成了。
當(dāng)我們的工作內(nèi)容無法滿足做文字比較多的平面海報(bào)的欲望時(shí)，可以考慮自命題的練習(xí)。當(dāng)時(shí)聽到許巍《無人知曉》這首新歌的時(shí)候，有一些感悟和想法然后做了一些 C4d 素材，想利用它作為主體和歌名做一下排版練習(xí)：
在開始動(dòng)手做之前我就想好了這次想做一個(gè)視覺直觀而強(qiáng)烈的海報(bào)，再加上主體是文案和素材的結(jié)合，所以我才采用了滿版構(gòu)圖。在黑白灰中將主角和配角的位置確定好，再去調(diào)整字體和距離。推薦閱讀：版式必備的7招處理方法
然后調(diào)整主體中4個(gè)字和素材之前的交叉和重疊，細(xì)節(jié)調(diào)整后，我嘗試了2個(gè)配色方案，一種是利用主體素材的顏色進(jìn)行搭配，平靜和諧；另外一種是紅藍(lán)配色，直觀強(qiáng)烈。
總結(jié)
最后總結(jié)一下，我們?cè)谶M(jìn)行版面設(shè)計(jì)時(shí)候，要注意從這幾個(gè)方面去不斷調(diào)整和檢查，同樣當(dāng)你看到一張海報(bào)的時(shí)候不知道怎么去思考和分析，也可以從這幾個(gè)方面入手：
主題是否鮮明？視覺焦點(diǎn)是否突出？
構(gòu)圖是否平衡？（3種平衡關(guān)系）
設(shè)計(jì)原則是否合理運(yùn)用？（6個(gè)設(shè)計(jì)原則）
細(xì)節(jié)是否豐富? 是否有趣? 細(xì)節(jié)考驗(yàn)著設(shè)計(jì)師的情懷。（字體、色彩、光影等）
以上海報(bào)案例圖片采編于網(wǎng)絡(luò)，版權(quán)歸屬原作者。
來源：UID的小伙伴們
藍(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