雷速体育

分享|平面雷速體育基礎入門知識詳解

來源:流利說雷速體育團隊    時間:2019-09-23    站內收藏

平面雷速體育的四個原則

關于平面雷速體育的 4 大原則,在 RobinWilliams 所著的《寫給大家看的雷速體育書》里面已經寫得很詳細了,很多小伙伴也都看過。

  • Contrast / 對比

  • Repetition / 重復

  • Alignment / 排列

  • Proximity / 親近

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

重復并不是單調的復制,重復可以用少數的元素快速傳達畫面想要傳達的信息。重復還可以形成一種風格,運用在品牌雷速體育中就是一種符號,也是奢侈品常用的視覺手法。

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

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

△ 企鵝圖書封面 – 用網格雷速體育排列的經典案例

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

下面「道士下山」的海報,對雷速體育原則的使用你都看明白了嗎?

雖然這 4 點是平面雷速體育中最基礎的原則,但最簡單的東西也往往是最「復雜」的。無論是平面雷速體育還是 UI 雷速體育都脫離不了這些基礎原則框架,這是打好基礎的第一步。

比例和網格

很多小伙伴往往都會使用 4 原則,但是在雷速體育排版一些結構復雜的內容時,往往無從下手。

這時候借助一些「工具」來搭建框架是個簡單有效且快速的方法。這里說的「工具」就是比例和網格,它在雷速體育布局中的作用是非常重要的,但非平面科班畢業的雷速體育師可能很少有機會深入了解。

平面雷速體育中常用的比例:

  • 黃金分割 / 黃金比例

  • 三等分 / 九宮格

  • 斐波那契額數列

  • √2 / √2矩形

黃金分割 / 黃金比例大家都知道,就是 0.618 ,這個比例在 logo 雷速體育中比較常用。最簡單的用法:b=a*0.618,這里的 a、b 指代是線段長度、圓的大小等任意尺寸單位。

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

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

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

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

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

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

了解了一些比例規則后,讓我們來看一下 Josef Müller-Brockmann 雷速體育的海報。不知道你有沒有發現一些比例上的規律?

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

點線面的使用

  • 點:畫面的信息及點綴,裝飾平衡。

  • 線:畫面的信息及方向引導,造型,分割信息。

  • 面:畫面的整體氛圍基調,作為主體信息或背景輔助。

在基本平面雷速體育當中,你可以把點當做一個文字或單獨小元素,線是一句文案,而面,則是一段文字等等。

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

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

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

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

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

一些小細節 tips

細節決定成敗,平面雷速體育中有很多值得注意的小細節。

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

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

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

△ 手機橫過來看比較清楚

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

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

雷速體育長表格列表時背景色(條紋)分割比線分割更好。


本文來源:流利說雷速體育團隊

關鍵詞: 平面雷速體育 知識 
作者:cdo
相關閱讀
    正在加載...