平面設(shè)計(jì)的入門知識(shí)科普
發(fā)布時(shí)間:2021-12-29 09:01 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

平面設(shè)計(jì)的四個(gè)原則


內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

關(guān)于平面設(shè)計(jì)的 4 大原則,在 RobinWilliams 所著的《寫給大家看的設(shè)計(jì)書》里面已經(jīng)寫得很詳細(xì)了,很多小伙伴也都看過。

  • Contrast / 對(duì)比
  • Repetition / 重復(fù)
  • Alignment / 排列
  • Proximity / 親近

現(xiàn)代主義設(shè)計(jì)的先驅(qū) Jan Tschichold 說過「對(duì)比是平面設(shè)計(jì)中最重要的元素」。對(duì)比不光有我們最熟悉的大小對(duì)比,還有顏色的對(duì)比(撞色)、空間上的對(duì)比(清晰&模糊)、時(shí)間上的對(duì)比(傳統(tǒng)&未來);表現(xiàn)形式的對(duì)比(雜亂&整齊)等等。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

重復(fù)并不是單調(diào)的復(fù)制,重復(fù)可以用少數(shù)的元素快速傳達(dá)畫面想要傳達(dá)的信息。重復(fù)還可以形成一種風(fēng)格,運(yùn)用在品牌設(shè)計(jì)中就是一種符號(hào),也是奢侈品常用的視覺手法。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

△ 去年 Burburry 升級(jí)新 logo 重復(fù)排列組成圖案

排列手法有一個(gè)很大作用是視覺引導(dǎo),讓畫面中的元素找到平衡,更理論化的是排列形成一個(gè)系統(tǒng),例如「網(wǎng)格」。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

△ 企鵝圖書封面 – 用網(wǎng)格設(shè)計(jì)排列的經(jīng)典案例

「親近」是英文的直譯,簡(jiǎn)單來說就是元素與元素之間關(guān)系的處理。我們把畫面中的元素按一定邏輯關(guān)系排列。關(guān)聯(lián)的元素之間相互靠近,無關(guān)的元素之間相互遠(yuǎn)離。

下面「道士下山」的海報(bào),對(duì)設(shè)計(jì)原則的使用你都看明白了嗎?

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

雖然這 4 點(diǎn)是平面設(shè)計(jì)中最基礎(chǔ)的原則,但最簡(jiǎn)單的東西也往往是最「復(fù)雜」的。無論是平面設(shè)計(jì)還是 UI 設(shè)計(jì)都脫離不了這些基礎(chǔ)原則框架,這是打好基礎(chǔ)的第一步。


比例和網(wǎng)格


內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

很多小伙伴往往都會(huì)使用 4 原則,但是在設(shè)計(jì)排版一些結(jié)構(gòu)復(fù)雜的內(nèi)容時(shí),往往無從下手。

這時(shí)候借助一些「工具」來搭建框架是個(gè)簡(jiǎn)單有效且快速的方法。這里說的「工具」就是比例和網(wǎng)格,它在設(shè)計(jì)布局中的作用是非常重要的,但非平面科班畢業(yè)的設(shè)計(jì)師可能很少有機(jī)會(huì)深入了解。

平面設(shè)計(jì)中常用的比例:

  • 黃金分割 / 黃金比例
  • 三等分 / 九宮格
  • 斐波那契額數(shù)列
  • √2 / √2矩形

黃金分割 / 黃金比例大家都知道,就是 0.618 ,這個(gè)比例在 logo 設(shè)計(jì)中比較常用。最簡(jiǎn)單的用法:b=a*0.618,這里的 a、b 指代是線段長(zhǎng)度、圓的大小等任意尺寸單位。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

三等分/九宮格在攝影構(gòu)圖中使用的比較多,簡(jiǎn)單容易理解就不多介紹。

斐波那契額數(shù)列聽起來很厲害,它其實(shí)就是黃金比例的數(shù)學(xué)近似版。數(shù)列規(guī)則即后一個(gè)數(shù)字是前 2 個(gè)數(shù)字相加的和。也就是 0,1,1,2,3,5,8,13,21,34,55,89,144,233 ……

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

知道這個(gè)數(shù)列后,具體怎么使用呢?最簡(jiǎn)單的就是依照數(shù)列畫參考線網(wǎng)格作為排版的依據(jù)。

最后一個(gè) √2矩形,聽起來很奇葩,但它其實(shí)就是我們平時(shí)最常見的A系列紙張尺寸(A2、A3、A4等)。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

它的構(gòu)成方法是,先畫一個(gè)正方形,然后連上對(duì)角線,再將對(duì)角線以一終點(diǎn)為圓點(diǎn)畫圓旋轉(zhuǎn),轉(zhuǎn)到與正方形一邊重合時(shí),構(gòu)成「√2矩形」的長(zhǎng)邊,正方形的邊則是「√2矩形」的短邊。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

「小知識(shí)」:再延展一下,繼續(xù)連上「√2矩形」的對(duì)角線,旋轉(zhuǎn),重合構(gòu)成更長(zhǎng)邊的矩形是 √3矩形。以此類推還可以有 √4矩形,√5矩形,√6矩形 ……

了解了一些比例規(guī)則后,讓我們來看一下 Josef Müller-Brockmann 設(shè)計(jì)的海報(bào)。不知道你有沒有發(fā)現(xiàn)一些比例上的規(guī)律?

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

可能有的小伙伴雖然對(duì)上面的海報(bào)不明覺歷,但感覺有點(diǎn)花里胡哨沒什么作用。其實(shí)不然, Josef Müller-Brockmann 就是《網(wǎng)格系統(tǒng)》的作者,書里介紹的強(qiáng)大的網(wǎng)格工具讓平面設(shè)計(jì)師面對(duì)復(fù)雜的書籍、雜志、報(bào)紙排版時(shí)也可以輕松愉快。書中的方法對(duì)網(wǎng)頁、APP 的設(shè)計(jì)也有很多參考價(jià)值。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普


點(diǎn)線面的使用


內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

  • 點(diǎn):畫面的信息及點(diǎn)綴,裝飾平衡。
  • 線:畫面的信息及方向引導(dǎo),造型,分割信息。
  • 面:畫面的整體氛圍基調(diào),作為主體信息或背景輔助。

在基本平面設(shè)計(jì)當(dāng)中,你可以把點(diǎn)當(dāng)做一個(gè)文字或單獨(dú)小元素,線是一句文案,而面,則是一段文字等等。

需要注意的是,點(diǎn)線面之間,沒有絕對(duì)的界線。它們可以通過程度的變化自由變換。例如下圖 B 相對(duì)于 A 來看,B 是面;B 相對(duì) C 來看,B 是點(diǎn)。E 可以看成是更密集的 D;F 可以看成是更高的 E。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

點(diǎn)成線,線成面,點(diǎn)是幾何中最基本的組成部分。很多點(diǎn)聚在一起可以組成韻律和圖案,點(diǎn)的疏密,重復(fù),規(guī)模和數(shù)量變化都能對(duì)畫面效果產(chǎn)生影響。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

線具有很強(qiáng)的視覺引導(dǎo)性,它是連接任意兩個(gè)點(diǎn)的路徑。表現(xiàn)形式可以有直線、斜線、曲線、實(shí)線、虛線等等。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

面有一定的長(zhǎng)度和寬度。不同形態(tài)的面可以在視覺上表現(xiàn)出不同的情感。直線形的面具有穩(wěn)定、秩序感;曲線形的面柔軟、輕松、活潑;不規(guī)則的面則會(huì)更自然生動(dòng)。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

無印良品的海報(bào)就是點(diǎn)線面運(yùn)用最簡(jiǎn)化的經(jīng)典案例:

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普


一些小細(xì)節(jié) tips


內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

細(xì)節(jié)決定成敗,平面設(shè)計(jì)中有很多值得注意的小細(xì)節(jié)。

注意按鈕內(nèi)部上下留白,留白多可以簡(jiǎn)單快速地讓界面看起來更大氣。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

軟件中開啟避頭尾和間距組合,可以避免標(biāo)點(diǎn)符號(hào)出現(xiàn)在句首,為中西文混排時(shí)增加半角空隙。(sketch 和 figma 等 UI 設(shè)計(jì)工具還不支持)。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

因?yàn)橹形氖欠綁K字,所以字符高度一般比常見的非襯線西文字符更高。所以在中西文混排時(shí)可以手動(dòng)調(diào)整西文大小,讓中西文保持在一個(gè)和諧的高度上。做法通常是增大西文的字號(hào),再使用基線參數(shù)向下偏移西文位置。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

△ 手機(jī)橫過來看比較清楚

注意視覺平衡/對(duì)齊,不同造型的元素有不同的視覺大小,例如一個(gè)邊長(zhǎng) 400px 的正方形和直徑 450px 的圓形在視覺大小上其實(shí)是相當(dāng)?shù)摹?/p>

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

背景的深淺會(huì)影響對(duì)齊的方式。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

設(shè)計(jì)長(zhǎng)表格列表時(shí)背景色(條紋)分割比線分割更好。

內(nèi)部分享!平面設(shè)計(jì)入門知識(shí)基礎(chǔ)科普

PhotoshopCC2020視頻教程
我要自學(xué)網(wǎng)商城 ¥120 元
進(jìn)入購買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC