爲什(shén)麽做(zuò)版式設計你總是沒有思路？

作爲一名專業的(de)設計師，版面設計能力直接影(yǐng)響到該設計師水(shuǐ)平。我們很多(duō)設計朋友在臨摹的(de)優秀作品中，往往隻是被作品華麗的(de)外表吸引了(le)，比較少去思考設計背後的(de)秘密。那麽在這(zhè)裏，我總結了(le)版式設計原理(lǐ)的(de)幾個(gè)方面，結合一些具體例子實際操作演示，讓對(duì)這(zhè)塊不熟悉的(de)設計師朋友們能快(kuài)速掌握版式設計。

一、版式組成

主體：視覺焦點，主導著(zhe)整個(gè)設計（可(kě)以是人(rén)/物(wù)/文字/圖片），整個(gè)版面最吸引人(rén)的(de)部分(fēn)，相當于主角的(de)作用(yòng)。

文案：對(duì)主體的(de)輔助說明(míng)或引導，畢竟有時(shí)候我們放一隻小狐狸在旁邊，用(yòng)戶也(yě)不能準确的(de)知道它在說什(shén)麽，配角的(de)作用(yòng)。

點綴元素：裝飾元素，可(kě)有可(kě)無，具體根據版面需要；好的(de)點綴元素能夠渲染氣氛，大(dà)部分(fēn)的(de)點綴元素遵循三角形原則，類似下(xià)圖中的(de)雲朵，群演的(de)作用(yòng)。

背景：可(kě)分(fēn)爲純色/彩色肌理(lǐ)/圖片/圖形等。

二、構圖平衡

在設計中，平衡是實現統一的(de)一條重要途徑。如果上面所說的(de)元素組合起來(lái)處于平衡狀态，那麽這(zhè)個(gè)設計看起來(lái)就是統一的(de)，就會給人(rén)一種整體印象。因此，平衡是視覺傳達設計的(de)一個(gè)重要方面。版式平衡總共有3種分(fēn)類，分(fēn)别是：對(duì)稱平衡，非對(duì)稱平衡和(hé)整體平衡。

1. 對(duì)稱平衡

對(duì)稱是同等同量的(de)平衡，對(duì)稱式設計是一種靜态的(de)，可(kě)預見的(de)，講究條理(lǐ)和(hé)平衡布局的(de)設計。對(duì)稱構圖相對(duì)比較易于創建，特點是穩定，莊嚴，整齊，安甯，沉靜和(hé)古典。

2. 非對(duì)稱平衡

非對(duì)稱在不對(duì)等的(de)元素間創設出秩序和(hé)平衡，非對(duì)稱設計由于版式不可(kě)預見，所以空間是變化(huà)的(de)。特點是動态的(de)，靈活的(de)和(hé)富有活力。非對(duì)稱構圖比較多(duō)，常見的(de)有以下(xià)6種形式。

對(duì)角線構圖：

文案擺放在版面的(de)對(duì)角線方向，一方面避免了(le)司空見慣的(de)居中版面，一方面給中心主體留出了(le)更多(duō)的(de)創作空間；另外中心的(de)圖形也(yě)可(kě)以是對(duì)角線的(de)設計，這(zhè)樣會讓整個(gè)構圖看起來(lái)比較平衡。

發射狀構圖：

點綴元素圍繞中心的(de)文案或者圖形發射，這(zhè)樣的(de)構圖會讓中心的(de)視覺容易聚焦，視覺沖擊感會更強烈。

像電商大(dà)促活動，淘寶和(hé)京東等等會經常使用(yòng)發射性構圖來(lái)營造大(dà)促活動的(de)熱(rè)鬧火烈程度。

中心構圖：

這(zhè)是我們最常見的(de)構圖之一，文案和(hé)主體居中頁面，注意的(de)是位于版心的(de)主體要盡可(kě)能的(de)出彩，利用(yòng)設計技巧吸引讀者的(de)眼光(guāng)，這(zhè)樣才能避免平淡乏味。

s形構圖：

文案或者圖形放在線條轉折的(de)地方，整體呈一個(gè) s 形。另外線條的(de)起點和(hé)重點也(yě)同樣是讀者容易關注的(de)地方，可(kě)以放一些重要的(de)信息。這(zhè)樣的(de)構圖靈活，有趣，而且可(kě)以引導用(yòng)戶沿著(zhe) s 形軌迹閱讀信息。

二分(fēn)構圖：

文案和(hé)主體分(fēn)開，呈左右或者上下(xià)的(de)構圖形式，注意的(de)是文案要采用(yòng)對(duì)齊原則。這(zhè)樣的(de)構圖也(yě)是比較容易創建的(de)。

形狀構圖：

主體和(hé)文案組合的(de)形式可(kě)以是圓形，三角形，矩形等形狀構圖。注意如果是用(yòng)三角形構圖，最好呈倒金字塔結構，這(zhè)樣更加輕易引導用(yòng)戶進入下(xià)一個(gè)信息層。

3. 整體平衡（滿版平衡）

整體平衡，是指圖片充滿整個(gè)版面，文案布局在上下(xià)，左右，中部的(de)位置，特點是主要以圖像爲訴求，視覺傳達直觀而強烈。滿版型構圖，給人(rén)大(dà)方，舒展的(de)感覺。注意：在設計的(de)過程中，這(zhè)種類型的(de)文字處理(lǐ)很容易顯得(de)「嘈雜(zá)」，因此爲了(le)避免擁擠的(de)空間，适當删減些文字。

三、設計原則

對(duì)構圖形式了(le)解後，我們還(hái)要知道一些基本的(de)設計原則，雖然這(zhè)些原則我們可(kě)以在其他(tā)地方反複的(de)看到，但是我在這(zhè)裏還(hái)是要強調一遍，因爲它可(kě)以幫助我們在打破規則之前，必須清楚規則是什(shén)麽。另外注意一點就是，這(zhè)幾個(gè)原則不是獨立分(fēn)開的(de)，而是可(kě)以同時(shí)考慮和(hé)結合，不是唯一選擇：

1. 對(duì)比

缺乏對(duì)比，作品會變得(de)平淡乏味并且不能有效地傳遞信息。艾美(měi)獎設計師、Blind 公司創始人(rén) Chris Do 說過 contrast is king（對(duì)比至上），運用(yòng)好對(duì)比，可(kě)以在頁面上引導用(yòng)戶的(de)視覺，并且制造焦點。

一般産生對(duì)比的(de)方法可(kě)以有：大(dà)小對(duì)比、粗細對(duì)比、冷(lěng)暖色對(duì)比……不管是哪種對(duì)比，當你期望對(duì)比效果有效的(de)話(huà)，需要大(dà)膽一些，明(míng)顯一些，不要拿12号和(hé)13的(de)文字做(zuò)大(dà)小對(duì)比，這(zhè)是沒有任何意義的(de)，不要畏畏縮縮，做(zuò)設計也(yě)是一樣。

2. 對(duì)齊

任何元素都不能在版面上随意安放。每一項都應當與頁面上的(de)某個(gè)内容存在某種視覺聯系。在版面上找到可(kě)以對(duì)齊的(de)元素，盡管它們可(kě)能距離比較遠(yuǎn)。需要注意的(de)地方是避免同時(shí)使用(yòng)多(duō)種對(duì)齊方式。

左邊的(de)海報采用(yòng)了(le)矩形構圖，右邊的(de)海報采用(yòng)了(le)二分(fēn)構圖，但是文案都是找到了(le)一條明(míng)确清晰的(de)對(duì)齊線，這(zhè)樣讓版面産生了(le)秩序美(měi)。

3. 親密性

同類相近，異類相遠(yuǎn)，相關的(de)元素距離靠近，歸組在一起，成爲一個(gè)視覺單位，而不是多(duō)個(gè)孤立分(fēn)散的(de)狀态，這(zhè)樣有助于組織信息，減少混亂，讓結構變得(de)更清晰。根據文案内容，進行合理(lǐ)的(de)分(fēn)組與歸類。

左邊海報文案分(fēn)成了(le)4組，清晰有條理(lǐ)，中心的(de)主體和(hé)點綴元素也(yě)利用(yòng)了(le)親密性原則，使得(de)中心主體顯得(de)更飽滿；右邊海報主體采用(yòng)了(le)發射構圖，整體呈倒置的(de)金字塔形式，這(zhè)種錐形容易引導用(yòng)戶閱讀下(xià)一個(gè)信息層。

4. 重複

重複的(de)目的(de)是統一，并增強視覺效果。比如标題都是同一個(gè)字體或大(dà)小或粗細。但需要注意的(de)是，要避免太多(duō)地重複一個(gè)元素，重複太多(duō)隻會讓人(rén)討(tǎo)厭，要注意重複的(de)「度」。太多(duō)的(de)重複會混淆重點，都是重點等于沒有重點。一般來(lái)說，呈均勻的(de)重複式圖案，是作爲背景使用(yòng)的(de)。

左邊海報中，我們的(de)視線會被那一個(gè)不同的(de)女(nǚ)孩吸引住，這(zhè)個(gè)女(nǚ)孩和(hé)左上角的(de)文案「敏感詞萬歲」相呼應，這(zhè)種同質中的(de)不同，即是變異元素，用(yòng)來(lái)制作視覺焦點。

右邊海報是葛西熏設計師爲日本著名仲條正義設計的(de)個(gè)人(rén)展海報，其中重複的(de)形象是一個(gè)腮幫鼓起的(de)小孩形象，不知道是在喝東西還(hái)是吐東西，這(zhè)個(gè)具有沖擊感的(de)形象其實和(hé)這(zhè)次展覽主題「飲&嘔吐」呼應的(de)，設計師想表達仲條正義的(de)創作于人(rén)生，正如這(zhè)個(gè)重複的(de)形象，不斷吸收，不斷推翻，最後不斷創造。

5. 留白

留白是虛實空間對(duì)比的(de)作用(yòng)。适當的(de)留白能讓頁面透氣，有呼吸，給人(rén)舒适感。大(dà)量視覺信息堆砌時(shí)，每個(gè)元素都要經過眼睛掃描，大(dà)腦(nǎo)處理(lǐ)，當找不到重點的(de)時(shí)候用(yòng)戶眼睛和(hé)大(dà)腦(nǎo)容易疲憊。在内容比較多(duō)的(de)情況下(xià)，盡量在視覺上減少視覺分(fēn)組；另外，多(duō)利用(yòng)負空間創作一些巧妙的(de)負空間。

左邊在留白的(de)同時(shí)，利用(yòng)了(le)負空間巧妙的(de)将海報的(de)主題「美(měi)食」和(hé)「美(měi)酒」結合起來(lái)。右邊的(de)海報是日本大(dà)師原研哉的(de)設計作品，大(dà)量的(de)留白空間更加顯得(de)中間壽司的(de)精緻，少而靜的(de)視覺元素提升了(le)作品的(de)品質感。

6. 變化(huà)

一成不變的(de)元素會容易乏味無趣，版面也(yě)缺乏靈活感，如果将一些元素發生位置，大(dà)小或者顔色變化(huà)，打破版面呆闆、平淡的(de)格局，使得(de)畫(huà)面非常有層次感，不失爲打破格局的(de)好方法。

左邊的(de)海報如果将所有的(de)元素歸位，這(zhè)将是一個(gè)文案和(hé)人(rén)物(wù)分(fēn)開中規中距的(de)構圖，當他(tā)們的(de)位置發生了(le)一些位移，整個(gè)頁面變得(de)有趣多(duō)了(le)。右邊海報采用(yòng)了(le) s 形構圖，如果這(zhè)些圓圈是一樣的(de)大(dà)小、顔色，可(kě)能沒有多(duō)少人(rén)會有耐心的(de)閱讀下(xià)去。

四、設計流程

前面我們了(le)解了(le)版式組成的(de)元素，構圖和(hé)設計原則，那麽我們在工作中怎麽利用(yòng)起來(lái)呢(ne)，下(xià)面介紹我自己的(de)設計流程，每個(gè)人(rén)的(de)流程都不一樣，大(dà)家都可(kě)以根據自己的(de)習(xí)慣來(lái)調整。

1. 需求溝通(tōng)，确認主題

當接到需求的(de)時(shí)候，第一步不要著(zhe)急馬上開工。先要找對(duì)需求的(de)方向，才能提高(gāo)工作效率，事半功倍。溝通(tōng)主要注意幾個(gè)方面：

• 需求的(de)目的(de)是什(shén)麽？目标用(yòng)戶是誰？背景是什(shén)麽？——對(duì)症下(xià)藥

• 這(zhè)麽多(duō)文案或者素材裏面，哪個(gè)是一級二級?——劃分(fēn)信息層級，尋找重點

• 風格上面有什(shén)麽要求或建議(yì)？能否用(yòng)3個(gè)關鍵詞表達？——預期效果是否達成一緻

Ps：關于第3步風格溝通(tōng)，建議(yì)雙方用(yòng)圖片交流和(hé)表達。畢竟每個(gè)人(rén)對(duì)「高(gāo)大(dà)上」的(de)理(lǐ)解都是不一樣的(de)，有的(de)人(rén)認爲是五彩斑斓的(de)黑(hēi)，有人(rén)認爲是大(dà)量的(de)留白。有了(le)圖片，我們可(kě)以去分(fēn)析圖片符合「高(gāo)大(dà)上」的(de)原因是哪些，從而提煉出具體的(de)元素，将「感覺」具體化(huà)，這(zhè)裏也(yě)是運用(yòng)到了(le)情緒闆設計的(de)體系。

2. 确定構圖形式，學會視線引導

根據前面的(de)溝通(tōng)和(hé)風格關鍵詞，收集好用(yòng)于表達信息的(de)元素，包括圖形圖像文字等等，然後在草(cǎo)稿或者腦(nǎo)海中構思好，怎樣的(de)排布能讓信息有效的(de)傳達出去。另外作爲設計師要學會引導用(yòng)戶的(de)閱讀視線。比如你找到了(le)一個(gè)擡頭向上看的(de)模特，你可(kě)以把文案放在海報上方，用(yòng)戶會習(xí)慣性地自然地沿著(zhe)模特的(de)視線看到文案。

3. 色彩搭配，5種平衡關系

關于配色，在網上大(dà)家都可(kě)以看到很多(duō)方法和(hé)理(lǐ)論，下(xià)面介紹這(zhè)5種色彩平衡的(de)方法個(gè)人(rén)覺得(de)比較實用(yòng)，也(yě)比較容易理(lǐ)解，大(dà)家要根據實際需求來(lái)運用(yòng)合适的(de)配色方案。

互補色——相互襯托

互補色就是色環上相對(duì)的(de)兩個(gè)顔色，海報中的(de)綠色和(hé)紅色就是這(zhè)種關系，相互映襯，相互襯托，從而達到了(le)一種平衡。

冷(lěng)暖色——情感表達

當我們想表達強烈的(de)情感時(shí)候，可(kě)以用(yòng)冷(lěng)暖色去對(duì)比，經常會在電影(yǐng)海報或者插畫(huà)作品中看到。

深淺色——色彩層次

這(zhè)裏的(de)深淺指的(de)是黑(hēi)白灰對(duì)比的(de)重和(hé)輕，一般來(lái)說，色大(dà)而深顯得(de)比較重要，色小而淺顯得(de)比較次要，我們可(kě)以看一下(xià)前面講構圖那塊展示的(de)海報黑(hēi)白版，會發現這(zhè)個(gè)規律更加明(míng)顯。

中性色和(hé)彩色——視覺聚焦

中性色指的(de)是黑(hēi)色，白色和(hé)灰色，也(yě)叫無彩色，當中性色充當背景色的(de)時(shí)候，彩色部分(fēn)會更加突出和(hé)聚焦。

純色和(hé)花色——平衡多(duō)色關系

如果一張圖中，主體本身顔色比較豐富鮮豔，背景色也(yě)五顔六色的(de)話(huà)就眼花缭亂了(le)，也(yě)就是經常說的(de)辣眼睛，這(zhè)時(shí)候一般采用(yòng)純色的(de)背景來(lái)緩解視覺疲勞和(hé)平衡多(duō)色之間的(de)關系。

4. 确定字體搭配

不同的(de)字體有不同的(de)氣質，根據風格來(lái)選擇合适的(de)字體。如果遇到比較好看的(de)字體，卻不知道叫什(shén)麽名字，可(kě)以找一些以圖搜字的(de)網站，比如求字網等等，避免伸手黨。

黑(hēi)體

工業現代感比較強的(de)無襯線字體，給人(rén)感覺端正剛硬，具有力量感，多(duō)用(yòng)于表達簡潔或信賴感的(de)主題。

宋體

細緻優雅的(de)襯線字體、苗條細長(cháng)，特點是複古，多(duō)用(yòng)于表達文藝或者時(shí)尚的(de)主題。

圓體

圓體的(de)筆畫(huà)圓潤，柔美(měi)，可(kě)愛(ài)，具有親和(hé)力，多(duō)用(yòng)于女(nǚ)性或兒(ér)童的(de)主題領域。

書(shū)法體

書(shū)法體特點是潇灑大(dà)方，氣勢磅礴，具有曆史感，多(duō)用(yòng)于表達傳統文化(huà)或者曆史主題。

哥(gē)特體

哥(gē)特體是裝飾性比較強的(de)襯線字體，線條交接處和(hé)末端具有明(míng)顯的(de)粗細變化(huà)和(hé)裝飾。特點是犀利、淩厲，多(duō)用(yòng)于表達驚悚、魔法童話(huà)或者戰争的(de)主題。

藝術體

藝術體其實是泛指像素風格，手寫字體，漢儀六字簡等等具有強烈的(de)藝術風格和(hé)設計感的(de)字體。特點是輕松活潑，具有觀賞性和(hé)趣味性。

五、案例演示

上面的(de)案例大(dà)部分(fēn)是平面展覽或者電影(yǐng)海報，那麽實際工作中的(de)網頁，banner、閃屏或者 ui 界面這(zhè)些怎麽辦呢(ne)？其實方法都是一樣的(de)，版面設計的(de)原理(lǐ)應用(yòng)在各個(gè)方面。這(zhè)裏演示一個(gè)移動端 banner 設計案例吧。

首先，運營小姐姐的(de)文案非常簡潔，沒有冗長(cháng)到讓我要分(fēn)成一級二級三級；其次需求的(de)目的(de)也(yě)很明(míng)确，就是要突出2個(gè)素材和(hé)按鈕；最後風格也(yě)沒有奇奇怪怪的(de)提議(yì)，隻要和(hé)産品整體調性一緻就好。那麽在這(zhè)裏要介紹一下(xià)産品的(de)背景了(le)，pins 是一款少女(nǚ)心拼圖 app，界面簡潔清新，多(duō)種布局模闆和(hé)背景。很快(kuài)的(de)，我在腦(nǎo)海中簡單地構思了(le)一下(xià)構圖的(de)方式。其實3種構圖形式都是可(kě)以的(de)，但是爲了(le)更好的(de)突出按鈕和(hé)素材效果，我最後選擇了(le)對(duì)角線構圖。

先在黑(hēi)白稿的(de)情況下(xià)把文案和(hé)主體布局好，讓主次關系清晰；考慮到目标用(yòng)戶大(dà)部分(fēn)是女(nǚ)生，使用(yòng)了(le)圓形字體，配色主要是參考了(le) pins 的(de) logo 的(de)配色，少女(nǚ)心的(de)品牌色；最後細節調整，加上一些點綴的(de)元素，其中網格是 pins 比較受歡迎的(de)背景。一個(gè)簡單的(de) banner 就這(zhè)樣完成了(le)。

當我們的(de)工作内容無法滿足做(zuò)文字比較多(duō)的(de)平面海報的(de)欲望時(shí)，可(kě)以考慮自命題的(de)練習(xí)。當時(shí)聽(tīng)到許巍《無人(rén)知曉》這(zhè)首新歌(gē)的(de)時(shí)候，有一些感悟和(hé)想法然後做(zuò)了(le)一些 C4d 素材，想利用(yòng)它作爲主體和(hé)歌(gē)名做(zuò)一下(xià)排版練習(xí)：

在開始動手做(zuò)之前我就想好了(le)這(zhè)次想做(zuò)一個(gè)視覺直觀而強烈的(de)海報，再加上主體是文案和(hé)素材的(de)結合，所以我才采用(yòng)了(le)滿版構圖。在黑(hēi)白灰中将主角和(hé)配角的(de)位置确定好，再去調整字體和(hé)距離。

然後調整主體中4個(gè)字和(hé)素材之前的(de)交叉和(hé)重疊，細節調整後，我嘗試了(le)2個(gè)配色方案，一種是利用(yòng)主體素材的(de)顔色進行搭配，平靜和(hé)諧；另外一種是紅藍配色，直觀強烈。

總結

最後總結一下(xià)，我們在進行版面設計時(shí)候，要注意從這(zhè)幾個(gè)方面去不斷調整和(hé)檢查，同樣當你看到一張海報的(de)時(shí)候不知道怎麽去思考和(hé)分(fēn)析，也(yě)可(kě)以從這(zhè)幾個(gè)方面入手：

• 主題是否鮮明(míng)？視覺焦點是否突出？

• 構圖是否平衡？（3種平衡關系）

• 設計原則是否合理(lǐ)運用(yòng)？（6個(gè)設計原則）

• 細節是否豐富? 是否有趣? 細節考驗著(zhe)設計師的(de)情懷。（字體、色彩、光(guāng)影(yǐng)等）

（聲明(míng)：文章(zhāng)來(lái)源于網絡，不代表本站觀點及立場(chǎng)，版權歸原作者及原出處所有，若有侵權或異議(yì)請聯系更正或删除。）