以后還敢說自己不會版式設(shè)計?

2020-8-24    周周

作為一名專業(yè)的設(shè)計師,版面設(shè)計能力直接影響到該設(shè)計師水平。我們很多設(shè)計朋友在臨摹的優(yōu)秀作品中,往往只是被作品華麗的外表吸引了,比較少去思考設(shè)計背后的秘密。

那么在這里,我總結(jié)了版式設(shè)計原理的幾個方面,結(jié)合一些具體例子實際操作演示,讓對這塊不熟悉的設(shè)計師朋友們能快速掌握版式設(shè)計。

目錄

  1. 版式組成
  2. 構(gòu)圖平衡
  3. 設(shè)計原則
  4. 設(shè)計流程
  5. 案例演示

以后還敢說自己不會版式設(shè)計?

一、版式組成

主體:視覺焦點(diǎn),主導(dǎo)著整個設(shè)計(可以是人/物/文字/圖片),整個版面最吸引人的部分,相當(dāng)于主角的作用。

文案:對主體的輔助說明或引導(dǎo),畢竟有時候我們放一只小狐貍在旁邊,用戶也不能準(zhǔn)確的知道它在說什么,配角的作用。推薦閱讀:平面廣告的版式風(fēng)格與創(chuàng)新!

點(diǎn)綴元素:裝飾元素,可有可無,具體根據(jù)版面需要;好的點(diǎn)綴元素能夠渲染氣氛,大部分的點(diǎn)綴元素遵循三角形原則,類似下圖中的云朵,群演的作用。

背景:可分為純色/彩色肌理/圖片/圖形等。

以后還敢說自己不會版式設(shè)計?

二、構(gòu)圖平衡

在設(shè)計中,平衡是實現(xiàn)統(tǒng)一的一條重要途徑。如果上面所說的元素組合起來處于平衡狀態(tài),那么這個設(shè)計看起來就是統(tǒng)一的,就會給人一種整體印象。

因此,平衡是視覺傳達(dá)設(shè)計的一個重要方面。版式平衡總共有3種分類,分別是:對稱平衡,非對稱平衡和整體平衡。

以后還敢說自己不會版式設(shè)計?

1. 對稱平衡

對稱是同等同量的平衡,對稱式設(shè)計是一種靜態(tài)的,可預(yù)見的,講究條理和平衡布局的設(shè)計。對稱構(gòu)圖相對比較易于創(chuàng)建,特點(diǎn)是穩(wěn)定,莊嚴(yán),整齊,安寧,沉靜和古典。

以后還敢說自己不會版式設(shè)計?

2. 非對稱平衡

非對稱在不對等的元素間創(chuàng)設(shè)出秩序和平衡,非對稱設(shè)計由于版式不可預(yù)見,所以空間是變化的。特點(diǎn)是動態(tài)的,靈活的和富有活力。非對稱構(gòu)圖比較多,常見的有以下6種形式。

以后還敢說自己不會版式設(shè)計?

對角線構(gòu)圖:

文案擺放在版面的對角線方向,一方面避免了司空見慣的居中版面,一方面給中心主體留出了更多的創(chuàng)作空間;另外中心的圖形也可以是對角線的設(shè)計,這樣會讓整個構(gòu)圖看起來比較平衡。

以后還敢說自己不會版式設(shè)計?

發(fā)射狀構(gòu)圖:

點(diǎn)綴元素圍繞中心的文案或者圖形發(fā)射,這樣的構(gòu)圖會讓中心的視覺容易聚焦,視覺沖擊感會更強(qiáng)烈。

以后還敢說自己不會版式設(shè)計?

像電商大促活動,淘寶和京東等等會經(jīng)常使用發(fā)射性構(gòu)圖來營造大促活動的熱鬧火烈程度。

以后還敢說自己不會版式設(shè)計?

中心構(gòu)圖:

這是我們最常見的構(gòu)圖之一,文案和主體居中頁面,注意的是位于版心的主體要盡可能的出彩,利用設(shè)計技巧吸引讀者的眼光,這樣才能避免平淡乏味。

以后還敢說自己不會版式設(shè)計?

s形構(gòu)圖:

文案或者圖形放在線條轉(zhuǎn)折的地方,整體呈一個 s 形。另外線條的起點(diǎn)和重點(diǎn)也同樣是讀者容易關(guān)注的地方,可以放一些重要的信息。這樣的構(gòu)圖靈活,有趣,而且可以引導(dǎo)用戶沿著 s 形軌跡閱讀信息。

以后還敢說自己不會版式設(shè)計?

二分構(gòu)圖:

文案和主體分開,呈左右或者上下的構(gòu)圖形式,注意的是文案要采用對齊原則。這樣的構(gòu)圖也是比較容易創(chuàng)建的。

以后還敢說自己不會版式設(shè)計?

形狀構(gòu)圖:

主體和文案組合的形式可以是圓形,三角形,矩形等形狀構(gòu)圖。注意如果是用三角形構(gòu)圖,最好呈倒金字塔結(jié)構(gòu),這樣更加輕易引導(dǎo)用戶進(jìn)入下一個信息層。

以后還敢說自己不會版式設(shè)計?

3. 整體平衡(滿版平衡)

整體平衡,是指圖片充滿整個版面,文案布局在上下,左右,中部的位置,特點(diǎn)是主要以圖像為訴求,視覺傳達(dá)直觀而強(qiáng)烈。滿版型構(gòu)圖,給人大方,舒展的感覺。

注意:在設(shè)計的過程中,這種類型的文字處理很容易顯得「嘈雜」,因此為了避免擁擠的空間,適當(dāng)刪減些文字。

以后還敢說自己不會版式設(shè)計?

三、設(shè)計原則

對構(gòu)圖形式了解后,我們還要知道一些基本的設(shè)計原則,雖然這些原則我們可以在其他地方反復(fù)的看到,但是我在這里還是要強(qiáng)調(diào)一遍,因為它可以幫助我們在打破規(guī)則之前,必須清楚規(guī)則是什么。另外注意一點(diǎn)就是,這幾個原則不是獨(dú)立分開的,而是可以同時考慮和結(jié)合,不是唯一選擇:

以后還敢說自己不會版式設(shè)計?

1. 對比

缺乏對比,作品會變得平淡乏味并且不能有效地傳遞信息。艾美獎設(shè)計師、Blind 公司創(chuàng)始人 Chris Do 說過 contrast is king(對比至上),運(yùn)用好對比,可以在頁面上引導(dǎo)用戶的視覺,并且制造焦點(diǎn)。

以后還敢說自己不會版式設(shè)計?

一般產(chǎn)生對比的方法可以有:大小對比、粗細(xì)對比、冷暖色對比……不管是哪種對比,當(dāng)你期望對比效果有效的話,需要大膽一些,明顯一些,不要拿12號和13的文字做大小對比,這是沒有任何意義的,不要畏畏縮縮,做設(shè)計也是一樣。

以后還敢說自己不會版式設(shè)計?

2. 對齊

任何元素都不能在版面上隨意安放。每一項都應(yīng)當(dāng)與頁面上的某個內(nèi)容存在某種視覺聯(lián)系。在版面上找到可以對齊的元素,盡管它們可能距離比較遠(yuǎn)。需要注意的地方是避免同時使用多種對齊方式。

以后還敢說自己不會版式設(shè)計?

左邊的海報采用了矩形構(gòu)圖,右邊的海報采用了二分構(gòu)圖,但是文案都是找到了一條明確清晰的對齊線,這樣讓版面產(chǎn)生了秩序美。

以后還敢說自己不會版式設(shè)計?

3. 親密性

同類相近,異類相遠(yuǎn),相關(guān)的元素距離靠近,歸組在一起,成為一個視覺單位,而不是多個孤立分散的狀態(tài),這樣有助于組織信息,減少混亂,讓結(jié)構(gòu)變得更清晰。根據(jù)文案內(nèi)容,進(jìn)行合理的分組與歸類。

以后還敢說自己不會版式設(shè)計?

左邊海報文案分成了4組,清晰有條理,中心的主體和點(diǎn)綴元素也利用了親密性原則,使得中心主體顯得更飽滿;右邊海報主體采用了發(fā)射構(gòu)圖,整體呈倒置的金字塔形式,這種錐形容易引導(dǎo)用戶閱讀下一個信息層。

以后還敢說自己不會版式設(shè)計?

4. 重復(fù)

重復(fù)的目的是統(tǒng)一,并增強(qiáng)視覺效果。比如標(biāo)題都是同一個字體或大小或粗細(xì)。但需要注意的是,要避免太多地重復(fù)一個元素,重復(fù)太多只會讓人討厭,要注意重復(fù)的「度」。太多的重復(fù)會混淆重點(diǎn),都是重點(diǎn)等于沒有重點(diǎn)。一般來說,呈均勻的重復(fù)式圖案,是作為背景使用的。

以后還敢說自己不會版式設(shè)計?

左邊海報中,我們的視線會被那一個不同的女孩吸引住,這個女孩和左上角的文案「敏感詞萬歲」相呼應(yīng),這種同質(zhì)中的不同,即是變異元素,用來制作視覺焦點(diǎn)。

右邊海報是葛西熏設(shè)計師為日本著名仲條正義設(shè)計的個人展海報,其中重復(fù)的形象是一個腮幫鼓起的小孩形象,不知道是在喝東西還是吐東西,這個具有沖擊感的形象其實和這次展覽主題「飲&嘔吐」呼應(yīng)的,設(shè)計師想表達(dá)仲條正義的創(chuàng)作于人生,正如這個重復(fù)的形象,不斷吸收,不斷推翻,最后不斷創(chuàng)造。

以后還敢說自己不會版式設(shè)計?

5. 留白

留白是虛實空間對比的作用。適當(dāng)?shù)牧舭啄茏岉撁嫱笟?,有呼吸,給人舒適感。大量視覺信息堆砌時,每個元素都要經(jīng)過眼睛掃描,大腦處理,當(dāng)找不到重點(diǎn)的時候用戶眼睛和大腦容易疲憊。在內(nèi)容比較多的情況下,盡量在視覺上減少視覺分組;另外,多利用負(fù)空間創(chuàng)作一些巧妙的負(fù)空間。

以后還敢說自己不會版式設(shè)計?

左邊在留白的同時,利用了負(fù)空間巧妙的將海報的主題「美食」和「美酒」結(jié)合起來。右邊的海報是日本大師原研哉的設(shè)計作品,大量的留白空間更加顯得中間壽司的精致,少而靜的視覺元素提升了作品的品質(zhì)感。

以后還敢說自己不會版式設(shè)計?

6. 變化

一成不變的元素會容易乏味無趣,版面也缺乏靈活感,如果將一些元素發(fā)生位置,大小或者顏色變化,打破版面呆板、平淡的格局,使得畫面非常有層次感,不失為打破格局的好方法。

以后還敢說自己不會版式設(shè)計?

左邊的海報如果將所有的元素歸位,這將是一個文案和人物分開中規(guī)中距的構(gòu)圖,當(dāng)他們的位置發(fā)生了一些位移,整個頁面變得有趣多了。右邊海報采用了 s 形構(gòu)圖,如果這些圓圈是一樣的大小、顏色,可能沒有多少人會有耐心的閱讀下去。

以后還敢說自己不會版式設(shè)計?

四、設(shè)計流程

前面我們了解了版式組成的元素,構(gòu)圖和設(shè)計原則,那么我們在工作中怎么利用起來呢,下面介紹我自己的設(shè)計流程,每個人的流程都不一樣,大家都可以根據(jù)自己的習(xí)慣來調(diào)整。

以后還敢說自己不會版式設(shè)計?

1. 需求溝通,確認(rèn)主題

當(dāng)接到需求的時候,第一步不要著急馬上開工。先要找對需求的方向,才能提高工作效率,事半功倍。溝通主要注意幾個方面:

需求的目的是什么?目標(biāo)用戶是誰?背景是什么?——對癥下藥

  • 這么多文案或者素材里面,哪個是一級二級?——劃分信息層級,尋找重點(diǎn)

  • 風(fēng)格上面有什么要求或建議?能否用3個關(guān)鍵詞表達(dá)?——預(yù)期效果是否達(dá)成一致

Ps:關(guān)于第3步風(fēng)格溝通,建議雙方用圖片交流和表達(dá)。畢竟每個人對「高大上」的理解都是不一樣的,有的人認(rèn)為是五彩斑斕的黑,有人認(rèn)為是大量的留白。有了圖片,我們可以去分析圖片符合「高大上」的原因是哪些,從而提煉出具體的元素,將「感覺」具體化,這里也是運(yùn)用到了情緒板設(shè)計的體系。

以后還敢說自己不會版式設(shè)計?

2. 確定構(gòu)圖形式,學(xué)會視線引導(dǎo)

根據(jù)前面的溝通和風(fēng)格關(guān)鍵詞,收集好用于表達(dá)信息的元素,包括圖形圖像文字等等,然后在草稿或者腦海中構(gòu)思好,怎樣的排布能讓信息有效的傳達(dá)出去。另外作為設(shè)計師要學(xué)會引導(dǎo)用戶的閱讀視線。比如你找到了一個抬頭向上看的模特,你可以把文案放在海報上方,用戶會習(xí)慣性地自然地沿著模特的視線看到文案。

以后還敢說自己不會版式設(shè)計?

3. 色彩搭配,5種平衡關(guān)系

關(guān)于配色,在網(wǎng)上大家都可以看到很多方法和理論,下面介紹這5種色彩平衡的方法個人覺得比較實用,也比較容易理解,大家要根據(jù)實際需求來運(yùn)用合適的配色方案。

互補(bǔ)色——相互襯托

互補(bǔ)色就是色環(huán)上相對的兩個顏色,海報中的綠色和紅色就是這種關(guān)系,相互映襯,相互襯托,從而達(dá)到了一種平衡。

冷暖色——情感表達(dá)

當(dāng)我們想表達(dá)強(qiáng)烈的情感時候,可以用冷暖色去對比,經(jīng)常會在電影海報或者插畫作品中看到。

深淺色——色彩層次

這里的深淺指的是黑白灰對比的重和輕,一般來說,色大而深顯得比較重要,色小而淺顯得比較次要,我們可以看一下前面講構(gòu)圖那塊展示的海報黑白版,會發(fā)現(xiàn)這個規(guī)律更加明顯。

中性色和彩色——視覺聚焦

中性色指的是黑色,白色和灰色,也叫無彩色,當(dāng)中性色充當(dāng)背景色的時候,彩色部分會更加突出和聚焦。

純色和花色——平衡多色關(guān)系

如果一張圖中,主體本身顏色比較豐富鮮艷,背景色也五顏六色的話就眼花繚亂了,也就是經(jīng)常說的辣眼睛,這時候一般采用純色的背景來緩解視覺疲勞和平衡多色之間的關(guān)系。

以后還敢說自己不會版式設(shè)計?

以后還敢說自己不會版式設(shè)計?

4. 確定字體搭配

不同的字體有不同的氣質(zhì),根據(jù)風(fēng)格來選擇合適的字體。如果遇到比較好看的字體,卻不知道叫什么名字,可以找一些以圖搜字的網(wǎng)站,比如求字網(wǎng)等等,避免伸手黨。

黑體

工業(yè)現(xiàn)代感比較強(qiáng)的無襯線字體,給人感覺端正剛硬,具有力量感,多用于表達(dá)簡潔或信賴感的主題。

宋體

細(xì)致優(yōu)雅的襯線字體、苗條細(xì)長,特點(diǎn)是復(fù)古,多用于表達(dá)文藝或者時尚的主題。

圓體

圓體的筆畫圓潤,柔美,可愛,具有親和力,多用于女性或兒童的主題領(lǐng)域。

書法體

書法體特點(diǎn)是瀟灑大方,氣勢磅礴,具有歷史感,多用于表達(dá)傳統(tǒng)文化或者歷史主題。

哥特體

哥特體是裝飾性比較強(qiáng)的襯線字體,線條交接處和末端具有明顯的粗細(xì)變化和裝飾。特點(diǎn)是犀利、凌厲,多用于表達(dá)驚悚、魔法童話或者戰(zhàn)爭的主題。

藝術(shù)體

藝術(shù)體其實是泛指像素風(fēng)格,手寫字體,漢儀六字簡等等具有強(qiáng)烈的藝術(shù)風(fēng)格和設(shè)計感的字體。特點(diǎn)是輕松活潑,具有觀賞性和趣味性。

以后還敢說自己不會版式設(shè)計?

以后還敢說自己不會版式設(shè)計?

以后還敢說自己不會版式設(shè)計?

五、案例演示

上面的案例大部分是平面展覽或者電影海報,那么實際工作中的網(wǎng)頁,banner、閃屏或者 ui 界面這些怎么辦呢?其實方法都是一樣的,版面設(shè)計的原理應(yīng)用在各個方面。這里演示一個移動端 banner 設(shè)計案例吧。

以后還敢說自己不會版式設(shè)計?

首先,運(yùn)營小姐姐的文案非常簡潔,沒有冗長到讓我要分成一級二級三級;其次需求的目的也很明確,就是要突出2個素材和按鈕;最后風(fēng)格也沒有奇奇怪怪的提議,只要和產(chǎn)品整體調(diào)性一致就好。

那么在這里要介紹一下產(chǎn)品的背景了,pins 是一款少女心拼圖 app,界面簡潔清新,多種布局模板和背景。很快的,我在腦海中簡單地構(gòu)思了一下構(gòu)圖的方式。其實3種構(gòu)圖形式都是可以的,但是為了更好的突出按鈕和素材效果,我最后選擇了對角線構(gòu)圖。

以后還敢說自己不會版式設(shè)計?

先在黑白稿的情況下把文案和主體布局好,讓主次關(guān)系清晰;考慮到目標(biāo)用戶大部分是女生,使用了圓形字體,配色主要是參考了 pins 的 logo 的配色,少女心的品牌色;最后細(xì)節(jié)調(diào)整,加上一些點(diǎn)綴的元素,其中網(wǎng)格是 pins 比較受歡迎的背景。一個簡單的 banner 就這樣完成了。

以后還敢說自己不會版式設(shè)計?

當(dāng)我們的工作內(nèi)容無法滿足做文字比較多的平面海報的欲望時,可以考慮自命題的練習(xí)。當(dāng)時聽到許巍《無人知曉》這首新歌的時候,有一些感悟和想法然后做了一些 C4d 素材,想利用它作為主體和歌名做一下排版練習(xí):

以后還敢說自己不會版式設(shè)計?

在開始動手做之前我就想好了這次想做一個視覺直觀而強(qiáng)烈的海報,再加上主體是文案和素材的結(jié)合,所以我才采用了滿版構(gòu)圖。在黑白灰中將主角和配角的位置確定好,再去調(diào)整字體和距離。推薦閱讀:版式必備的7招處理方法

以后還敢說自己不會版式設(shè)計?

然后調(diào)整主體中4個字和素材之前的交叉和重疊,細(xì)節(jié)調(diào)整后,我嘗試了2個配色方案,一種是利用主體素材的顏色進(jìn)行搭配,平靜和諧;另外一種是紅藍(lán)配色,直觀強(qiáng)烈。

以后還敢說自己不會版式設(shè)計?

總結(jié)

最后總結(jié)一下,我們在進(jìn)行版面設(shè)計時候,要注意從這幾個方面去不斷調(diào)整和檢查,同樣當(dāng)你看到一張海報的時候不知道怎么去思考和分析,也可以從這幾個方面入手:

主題是否鮮明?視覺焦點(diǎn)是否突出?

  • 構(gòu)圖是否平衡?(3種平衡關(guān)系)

  • 設(shè)計原則是否合理運(yùn)用?(6個設(shè)計原則)

  • 細(xì)節(jié)是否豐富? 是否有趣? 細(xì)節(jié)考驗著設(shè)計師的情懷。(字體、色彩、光影等)

以后還敢說自己不會版式設(shè)計?

以上海報案例圖片采編于網(wǎng)絡(luò),版權(quán)歸屬原作者。

來源:UID的小伙伴們

藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

存檔