關(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ì)比（雜亂&整齊）等等。
重復(fù)并不是單調(diào)的復(fù)制，重復(fù)可以用少數(shù)的元素快速傳達(dá)畫面想要傳達(dá)的信息。重復(fù)還可以形成一種風(fēng)格，運(yùn)用在品牌設(shè)計(jì)中就是一種符號(hào)，也是奢侈品常用的視覺手法。
△ 去年 Burburry 升級(jí)新 logo 重復(fù)排列組成圖案
排列手法有一個(gè)很大作用是視覺引導(dǎo)，讓畫面中的元素找到平衡，更理論化的是排列形成一個(gè)系統(tǒng)，例如「網(wǎng)格」。
△ 企鵝圖書封面 – 用網(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ì)原則的使用你都看明白了嗎？
雖然這 4 點(diǎn)是平面設(shè)計(jì)中最基礎(chǔ)的原則，但最簡(jiǎn)單的東西也往往是最「復(fù)雜」的。無論是平面設(shè)計(jì)還是 UI 設(shè)計(jì)都脫離不了這些基礎(chǔ)原則框架，這是打好基礎(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)度、圓的大小等任意尺寸單位。
三等分/九宮格在攝影構(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 ……
知道這個(gè)數(shù)列后，具體怎么使用呢？最簡(jiǎn)單的就是依照數(shù)列畫參考線網(wǎng)格作為排版的依據(jù)。
最后一個(gè) √2矩形，聽起來很奇葩，但它其實(shí)就是我們平時(shí)最常見的A系列紙張尺寸（A2、A3、A4等）。
它的構(gòu)成方法是，先畫一個(gè)正方形，然后連上對(duì)角線，再將對(duì)角線以一終點(diǎn)為圓點(diǎn)畫圓旋轉(zhuǎn)，轉(zhuǎn)到與正方形一邊重合時(shí)，構(gòu)成「√2矩形」的長(zhǎng)邊，正方形的邊則是「√2矩形」的短邊。
「小知識(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ī)律？
可能有的小伙伴雖然對(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à)值。
- 點(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。
點(diǎn)成線，線成面，點(diǎn)是幾何中最基本的組成部分。很多點(diǎn)聚在一起可以組成韻律和圖案，點(diǎn)的疏密，重復(fù)，規(guī)模和數(shù)量變化都能對(duì)畫面效果產(chǎn)生影響。
線具有很強(qiáng)的視覺引導(dǎo)性，它是連接任意兩個(gè)點(diǎn)的路徑。表現(xiàn)形式可以有直線、斜線、曲線、實(shí)線、虛線等等。
面有一定的長(zhǎng)度和寬度。不同形態(tài)的面可以在視覺上表現(xiàn)出不同的情感。直線形的面具有穩(wěn)定、秩序感；曲線形的面柔軟、輕松、活潑；不規(guī)則的面則會(huì)更自然生動(dòng)。
無印良品的海報(bào)就是點(diǎn)線面運(yùn)用最簡(jiǎn)化的經(jīng)典案例：
細(xì)節(jié)決定成敗，平面設(shè)計(jì)中有很多值得注意的小細(xì)節(jié)。
注意按鈕內(nèi)部上下留白，留白多可以簡(jiǎn)單快速地讓界面看起來更大氣。
軟件中開啟避頭尾和間距組合，可以避免標(biāo)點(diǎn)符號(hào)出現(xiàn)在句首，為中西文混排時(shí)增加半角空隙。（sketch 和 figma 等 UI 設(shè)計(jì)工具還不支持）。
因?yàn)橹形氖欠綁K字，所以字符高度一般比常見的非襯線西文字符更高。所以在中西文混排時(shí)可以手動(dòng)調(diào)整西文大小，讓中西文保持在一個(gè)和諧的高度上。做法通常是增大西文的字號(hào)，再使用基線參數(shù)向下偏移西文位置。
△ 手機(jī)橫過來看比較清楚
注意視覺平衡/對(duì)齊，不同造型的元素有不同的視覺大小，例如一個(gè)邊長(zhǎng) 400px 的正方形和直徑 450px 的圓形在視覺大小上其實(shí)是相當(dāng)?shù)摹?/p>
背景的深淺會(huì)影響對(duì)齊的方式。
設(shè)計(jì)長(zhǎng)表格列表時(shí)背景色（條紋）分割比線分割更好。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。