?轉(zhuǎn)載自小五說平面設(shè)計(jì)
作為一名專業(yè)的設(shè)計(jì)師霹购，版面設(shè)計(jì)能力直接影響到該設(shè)計(jì)師水平的幾個(gè)方面之一。我們很多設(shè)計(jì)朋友在臨摹的優(yōu)秀作品中朋腋，往往只是被作品華麗的外表吸引了齐疙，比較少去思考設(shè)計(jì)背后的秘密膜楷。那么在這里，我總結(jié)了版式設(shè)計(jì)原理的幾個(gè)方面贞奋，結(jié)合一些具體例子實(shí)際操作演示赌厅，讓對(duì)這塊不熟悉的設(shè)計(jì)師朋友們能快速掌握版式設(shè)計(jì)。
目錄
一．版式組成
二．構(gòu)圖平衡
三．設(shè)計(jì)原則
四．設(shè)計(jì)流程
五．案例演示
一．版式組成
1. 主體：視覺焦點(diǎn)轿塔，主導(dǎo)著整個(gè)設(shè)計(jì)（可以是人/物/文字/圖片）特愿，整個(gè)版面最吸引人的部分，相當(dāng)于主角的作用勾缭。
2. 文案：對(duì)主體的輔助說明或引導(dǎo)揍障，畢竟有時(shí)候我們放一只小狐貍在旁邊，用戶也不能準(zhǔn)確的知道它在說什么俩由，配角的作用毒嫡。
3. 點(diǎn)綴元素：裝飾元素，可有可無幻梯，具體根據(jù)版面需要兜畸；好的點(diǎn)綴元素能夠渲染氣氛，大部分的點(diǎn)綴元素遵循三角形原則碘梢，類似下圖中的云朵咬摇，群演的作用。
4. 背景——可分為純色/彩色肌理/圖片/圖形等煞躬。
二．構(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)圖來營造大促活動(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é)合棋凳，不是唯一選擇：
對(duì)比
缺乏對(duì)比拦坠，作品會(huì)變得平淡乏味并且不能有效地傳遞信息。艾美獎(jiǎng)設(shè)計(jì)師剩岳、Blind公司創(chuàng)始人Chris Do 說過contact 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ì)也是一樣讳侨。
對(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)生了秩序美耕渴。
親密性
同類相近，異類相遠(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è)信息層。
重復(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è)人展設(shè)計(jì)的海報(bào)，其中重復(fù)的形象是一個(gè)腮幫鼓起的小孩形象瓤球，不知道是在喝東西還是吐東西采够，這個(gè)具有沖擊感的形象其實(shí)和這次展覽主題“飲&嘔吐”呼應(yīng)的，設(shè)計(jì)師想表達(dá)仲條正義的創(chuàng)作于人生冰垄，正如這個(gè)重復(fù)的形象蹬癌，不斷吸收，不斷推翻虹茶，最后不斷創(chuàng)造逝薪。
留白
留白是虛實(shí)空間對(duì)比的作用。適當(dāng)?shù)牧舭啄茏岉撁嫱笟夂铮泻粑茫o人舒適感。大量視覺信息堆砌時(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ì)感廓推。
變化
一成不變的元素會(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è)方面：
A.需求的目的是什么遵湖？目標(biāo)用戶是誰？背景是什么晚吞？——對(duì)癥下藥
B.這么多文案或者素材里面延旧，哪個(gè)是一級(jí)二級(jí)?——?jiǎng)澐中畔蛹?jí)，尋找重點(diǎn)
C.風(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á)簡潔或信賴感的主題乙帮。
宋體
細(xì)致優(yōu)雅的襯線字體、苗條細(xì)長极景，特點(diǎn)是復(fù)古察净，多用于表達(dá)文藝或者時(shí)尚的主題
圓體
圓體的筆畫圓潤，柔美盼樟，可愛氢卡，具有親和力，多用于女性或兒童的主題領(lǐng)域
書法體
書法體特點(diǎn)是瀟灑大方晨缴，氣勢磅礴译秦，具有歷史感，多用于表達(dá)傳統(tǒng)文化或者歷史主題击碗。
哥特體
哥特體是裝飾性比較強(qiáng)的襯線字體筑悴，線條交接處和末端具有明顯的粗細(xì)變化和裝飾。特點(diǎn)是犀利稍途、凌厲阁吝，多用于表達(dá)驚悚、魔法童話或者戰(zhàn)爭的主題械拍。
藝術(shù)體
藝術(shù)體其實(shí)是泛指像素風(fēng)格突勇，手寫字體，漢儀六字簡等等具有強(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ì)案例吧党窜。
首先拗引，文案非常簡潔，沒有冗長到讓我要分成一級(jí)二級(jí)三級(jí)幌衣；其次需求的目的也很明確矾削，就是要突出2個(gè)素材和按鈕；最后風(fēng)格也沒有奇奇怪怪的提議豁护，只要和產(chǎn)品整體調(diào)性一致就好哼凯。那么在這里要介紹一下產(chǎn)品的背景了，pins是一款少女心拼圖app楚里，界面簡潔清新断部，多種布局模板和背景。很快的班缎，我在腦海中簡單地構(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è)簡單的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)整字體和距離岳锁。
然后調(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è)方面入手：
1.主題是否鮮明讳推？視覺焦點(diǎn)是否突出顶籽？
2.構(gòu)圖是否平衡？（3種平衡關(guān)系）
3.設(shè)計(jì)原則是否合理運(yùn)用银觅？（6個(gè)設(shè)計(jì)原則）
4.細(xì)節(jié)是否豐富? 是否有趣? 細(xì)節(jié)考驗(yàn)著設(shè)計(jì)師的情懷礼饱。（字體、色彩设拟、光影等）
