關(guān)于平面設(shè)計的 4 大原則，在 RobinWilliams 所著的《寫給大家看的設(shè)計書》里面已經(jīng)寫得很詳細了，很多小伙伴也都看過。
- Contrast / 對比
- Repetition / 重復(fù)
- Alignment / 排列
- Proximity / 親近
現(xiàn)代主義設(shè)計的先驅(qū) Jan Tschichold 說過「對比是平面設(shè)計中最重要的元素」。對比不光有我們最熟悉的大小對比，還有顏色的對比（撞色）、空間上的對比（清晰&模糊）、時間上的對比（傳統(tǒng)&未來）；表現(xiàn)形式的對比（雜亂&整齊）等等。
重復(fù)并不是單調(diào)的復(fù)制，重復(fù)可以用少數(shù)的元素快速傳達畫面想要傳達的信息。重復(fù)還可以形成一種風格，運用在品牌設(shè)計中就是一種符號，也是奢侈品常用的視覺手法。
△ 去年 Burburry 升級新 logo 重復(fù)排列組成圖案
排列手法有一個很大作用是視覺引導，讓畫面中的元素找到平衡，更理論化的是排列形成一個系統(tǒng)，例如「網(wǎng)格」。
△ 企鵝圖書封面 – 用網(wǎng)格設(shè)計排列的經(jīng)典案例
「親近」是英文的直譯，簡單來說就是元素與元素之間關(guān)系的處理。我們把畫面中的元素按一定邏輯關(guān)系排列。關(guān)聯(lián)的元素之間相互靠近，無關(guān)的元素之間相互遠離。
下面「道士下山」的海報，對設(shè)計原則的使用你都看明白了嗎？
雖然這 4 點是平面設(shè)計中最基礎(chǔ)的原則，但最簡單的東西也往往是最「復(fù)雜」的。無論是平面設(shè)計還是 UI 設(shè)計都脫離不了這些基礎(chǔ)原則框架，這是打好基礎(chǔ)的第一步。
很多小伙伴往往都會使用 4 原則，但是在設(shè)計排版一些結(jié)構(gòu)復(fù)雜的內(nèi)容時，往往無從下手。
這時候借助一些「工具」來搭建框架是個簡單有效且快速的方法。這里說的「工具」就是比例和網(wǎng)格，它在設(shè)計布局中的作用是非常重要的，但非平面科班畢業(yè)的設(shè)計師可能很少有機會深入了解。
平面設(shè)計中常用的比例：
- 黃金分割 / 黃金比例
- 三等分 / 九宮格
- 斐波那契額數(shù)列
- √2 / √2矩形
黃金分割 / 黃金比例大家都知道，就是 0.618 ，這個比例在 logo 設(shè)計中比較常用。最簡單的用法：b=a*0.618，這里的 a、b 指代是線段長度、圓的大小等任意尺寸單位。
三等分/九宮格在攝影構(gòu)圖中使用的比較多，簡單容易理解就不多介紹。
斐波那契額數(shù)列聽起來很厲害，它其實就是黃金比例的數(shù)學近似版。數(shù)列規(guī)則即后一個數(shù)字是前 2 個數(shù)字相加的和。也就是 0，1，1，2，3，5，8，13，21，34，55，89，144，233 ……
知道這個數(shù)列后，具體怎么使用呢？最簡單的就是依照數(shù)列畫參考線網(wǎng)格作為排版的依據(jù)。
最后一個 √2矩形，聽起來很奇葩，但它其實就是我們平時最常見的A系列紙張尺寸（A2、A3、A4等）。
它的構(gòu)成方法是，先畫一個正方形，然后連上對角線，再將對角線以一終點為圓點畫圓旋轉(zhuǎn)，轉(zhuǎn)到與正方形一邊重合時，構(gòu)成「√2矩形」的長邊，正方形的邊則是「√2矩形」的短邊。
「小知識」：再延展一下，繼續(xù)連上「√2矩形」的對角線，旋轉(zhuǎn)，重合構(gòu)成更長邊的矩形是 √3矩形。以此類推還可以有 √4矩形，√5矩形，√6矩形 ……
了解了一些比例規(guī)則后，讓我們來看一下 Josef Müller-Brockmann 設(shè)計的海報。不知道你有沒有發(fā)現(xiàn)一些比例上的規(guī)律？
可能有的小伙伴雖然對上面的海報不明覺歷，但感覺有點花里胡哨沒什么作用。其實不然， Josef Müller-Brockmann 就是《網(wǎng)格系統(tǒng)》的作者，書里介紹的強大的網(wǎng)格工具讓平面設(shè)計師面對復(fù)雜的書籍、雜志、報紙排版時也可以輕松愉快。書中的方法對網(wǎng)頁、APP 的設(shè)計也有很多參考價值。
- 點：畫面的信息及點綴，裝飾平衡。
- 線：畫面的信息及方向引導，造型，分割信息。
- 面：畫面的整體氛圍基調(diào)，作為主體信息或背景輔助。
在基本平面設(shè)計當中，你可以把點當做一個文字或單獨小元素，線是一句文案，而面，則是一段文字等等。
需要注意的是，點線面之間，沒有絕對的界線。它們可以通過程度的變化自由變換。例如下圖 B 相對于 A 來看，B 是面；B 相對 C 來看，B 是點。E 可以看成是更密集的 D；F 可以看成是更高的 E。
點成線，線成面，點是幾何中最基本的組成部分。很多點聚在一起可以組成韻律和圖案，點的疏密，重復(fù)，規(guī)模和數(shù)量變化都能對畫面效果產(chǎn)生影響。
線具有很強的視覺引導性，它是連接任意兩個點的路徑。表現(xiàn)形式可以有直線、斜線、曲線、實線、虛線等等。
面有一定的長度和寬度。不同形態(tài)的面可以在視覺上表現(xiàn)出不同的情感。直線形的面具有穩(wěn)定、秩序感；曲線形的面柔軟、輕松、活潑；不規(guī)則的面則會更自然生動。
無印良品的海報就是點線面運用最簡化的經(jīng)典案例：
細節(jié)決定成敗，平面設(shè)計中有很多值得注意的小細節(jié)。
注意按鈕內(nèi)部上下留白，留白多可以簡單快速地讓界面看起來更大氣。
軟件中開啟避頭尾和間距組合，可以避免標點符號出現(xiàn)在句首，為中西文混排時增加半角空隙。（sketch 和 figma 等 UI 設(shè)計工具還不支持）。
因為中文是方塊字，所以字符高度一般比常見的非襯線西文字符更高。所以在中西文混排時可以手動調(diào)整西文大小，讓中西文保持在一個和諧的高度上。做法通常是增大西文的字號，再使用基線參數(shù)向下偏移西文位置。
△ 手機橫過來看比較清楚
注意視覺平衡/對齊，不同造型的元素有不同的視覺大小，例如一個邊長 400px 的正方形和直徑 450px 的圓形在視覺大小上其實是相當?shù)摹?/p>
背景的深淺會影響對齊的方式。
設(shè)計長表格列表時背景色（條紋）分割比線分割更好。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。