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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    比例和網(wǎng)格


    內(nèi)部分享!平面設(shè)計入門知識基礎(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 指代是線段長度、圓的大小等任意尺寸單位。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    點線面的使用


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

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

    在基本平面設(shè)計當中,你可以把點當做一個文字或單獨小元素,線是一句文案,而面,則是一段文字等等。

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

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

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

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

    線具有很強的視覺引導性,它是連接任意兩個點的路徑。表現(xiàn)形式可以有直線、斜線、曲線、實線、虛線等等。

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

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

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

    無印良品的海報就是點線面運用最簡化的經(jīng)典案例:

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


    一些小細節(jié) tips


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

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

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

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

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

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

    因為中文是方塊字,所以字符高度一般比常見的非襯線西文字符更高。所以在中西文混排時可以手動調(diào)整西文大小,讓中西文保持在一個和諧的高度上。做法通常是增大西文的字號,再使用基線參數(shù)向下偏移西文位置。

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

    △ 手機橫過來看比較清楚

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

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

    背景的深淺會影響對齊的方式。

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

    設(shè)計長表格列表時背景色(條紋)分割比線分割更好。

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

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