重複、對比、對齊以及親密性是版式設計中的四大原則,各種排版形式與規則都是基於這四大原則衍生而來,而掌握這些具有指導性的設計原則,能夠幫助我們在短時間內,更快更好地達成設計目標。本期給大家講解四大原則之 —— 對比原則。
「對比」強調事物之間的差異性,在設計時要避免頁麵上的視覺元素太過相似,如果元素之間是為了有所不同,那麼加大反差,確保對比明顯、頁麵清晰是很有必要的。在生活中我們可以隨處發現對比的存在,對比形式也是多種多樣的:
人們習慣了生活中的對比,如果畫麵沒有對比,會讓人覺得單調乏味。對比可以突出重點,使版麵具有層次感,內容要點展示更有條理,對比關係越清晰,視覺效果越強烈。有了對比,畫麵才會生動活潑、主次分明。
1. 突出重點
恰當的對比可以很好的製造出焦點(畫麵主體),在版式編排中,有效利用視覺差異,通過構成要素之間的對比,把讀者的注意力吸引到畫麵的主體部分上來,提高版麵的注目效果,是版式設計的重中之重。
利用鮮明的對比,可以形成強有力的反差效果,能第一時間讓讀者捕捉到主體和重點。此案例主要采用了色彩對比,主體人物和文字在版麵中都異常顯眼,因為它相比周圍的視覺元素產生了很強的差異性。
2. 豐富畫麵層次
對比是版麵建立有組織的層次結構最有效的方法。強烈的對比可以形成視覺落差,建立良好的信息層次,增強版麵的節奏和明快感。
3. 打破呆板、活潑生動
通過對比的形式可以避免版麵的單調與平淡,使版麵更富趣味性,也使得版麵更加鮮活、生動,產生良好的視覺體驗,激發讀者閱讀和觀看的興趣。
用方向、大小和色彩形成對比,使標題與正文的層級更清晰明了,同時加入肌理對比為主體打造立體感,讓版麵更活潑,更抓人眼球。
理論上元素的一切可改變特征都是可以形成對比,本期隻舉例了部分常用的文字編排對比形式。
1. 大小對比
通過視覺元素體量之間的差異,來達到製造視覺衝突的效果。視覺元素體量大小上形成了層級的劃分,體量越大則層級越高,也就越突出。
在版麵需要呈現的信息裏一般會有標題、小標題、內文之分,也會有重點信息和非重點信息。把重要的信息放大,次要信息縮小,就形成了大小對比。這樣做的好處是可以減少次要信息對重要信息的幹擾,使之更容易被接收,大小對比還能使版麵的層次更豐富。
2. 粗細對比
粗的字體比較沉重,細的字體比較輕盈,字體粗細變化形成了輕重對比。主體信息可以用較粗的字體,次要信息使用較細的字體,利用這種手法製造視覺流線,引導受眾閱讀信息。
上麵的案例中,隻使用了思源黑體一種字體,但是采用不同的字體大小和粗細對比,也可以很好的區分信息主次層級。
3. 字型對比
如果版麵裏的信息比較多,而隻使用一種字體的話,也許會顯得單調,用字型進行對比,既能把不同的信息區別開來,也能豐富版麵。
不同的字體有不同的氣質,而字型的對比就是不同氣質的碰撞。在進行字型對比的時候也要深層次考慮:字型的選擇是否和主體內容相匹配,字體的風格能形成多大反差等。
4. 色彩對比
運用色彩對比可以有效地突出重點、區分信息,還可以起到裝飾畫麵的作用。
大麵積的背景色與少量的主體色形成了很強烈的對比效果,能夠第一時間把讀者視覺引導到文字信息和主角上。
高明度、高飽和度的黃色主體文字和低明度、高冷的黑色背景形成強烈反差,使版麵充滿活力,也有效突出了文字信息。
5. 方向對比
把版麵中的文字信息分別朝不同的方向排列,可以有效增加版麵的動感和空間感。
6. 疏密對比
將大段的文字密集排版,可以讓文字形成塊狀、視覺上更緊湊。剩下來的大麵積可以用來展示畫麵主題,通過這樣的疏密變化不但可以形成好的閱讀節奏,也能更強化主題。
7. 肌理對比
肌理是指物體表麵的組織紋理結構,不同的材質具有不同的觸感和視覺體現。文字或背景添加肌理,運用粗糙與細膩、質樸與華麗、厚重與輕薄等對比,可以增添畫麵的豐富度和表現力。
主體「葉」書法字有著手寫的動感,本身就具有質感,置入水墨的紋理進一步強調了效果。可以很好的區分文字信息的主次關係,也增加了畫麵的視覺美感和藝術表現力。
8. 動靜對比
在版式設計中常把有擴散感或具有流動性的圖形或文字的編排稱為「動」;而把水平或垂直性強、具有穩定性的圖形或文字的編排稱為「靜」。「動」使整個版麵充滿活力,獲得更高的注目度,而「靜」使版麵具有穩定的效果,將兩者相結合可以產生一定的空間層次感。
電影海報《影》恣意狂放的反白書法字作為背景具有強烈動感,和主角的靜形成鮮明的對比,陰陽與剛柔並濟,反映出濃濃的古典中式美學。
9. 空間對比
版式設計並不局限於一個平麵上的層次,也可以讓元素有一些前後關係。文字與形象之間疊壓或前後錯落編排,使版麵出現層次關係,讓版麵更生動活潑。
虛實對比也可以營造出空間層次,使用虛化的背景來突出前景,不僅能突出重點信息,而且能夠較好營造氛圍感、場景感和立體感。
使用遠近對比體現空間關係,根據透視原理,近則大,遠則小,可以營造出近景、中景、遠景的畫麵層次感。
為了讓大家加深對「對比原則」的理解,提取本期文章的主要內容作為原始資料,運用「對比原則」進行設計示範。
運用「親密性原則」進行信息的分組和距離的調整;排版時要遵循「對齊原則」;運用「對比原則」進行信息層級主次的劃分,加入文字大小、粗細對比;運用「重複原則」把同一級別的文字設置為相同的文字樣式,增加條理性,加強統一性。
為了使對比更豐富,可以加入字型和色彩對比,加強層級關係,使重點內容強調突出。
現在畫麵文字信息已經清晰而有序地排列好,但是缺少主體。把標題內容「對比原則」作為主體元素的進行設計。
1. 打開AI軟件,畫出一個正方形;
2. 執行「效果-3D-凸出和斜角」。勾選「預覽」,「位置」使用「等角-左方」,「凸出厚度」可以自己調整使正方形變為正方體。
6. 分別給四個字執行「效果-3D-凸出和斜角」,把「位置」改為「等角-上方」,厚度改為 0:
7. 把文字填充色改為白色,描邊改為背景色綠色,按照參考線去擺放文字的位置,把「原則」兩字逆時針旋轉 90 度放置;
8. 選擇四個字,右鍵選擇「編組」,複製兩組新的文字,一組備用,一組放置到下方。
9. 選擇上方的文字組,右鍵「排列-置於頂層」;
在工具欄選擇「混合工具」,分別點擊兩個文字組,再雙擊「混合工具」調出「混合選項」,間距選擇「指定的步數」、「30」;
10. 把之前複製出來備用的文字組填充綠色,右鍵選擇「排列-置於頂層」,再移動到原文字組位置;
11. 英文按照同樣的方法設計好放在下方,主體就刻畫好了;
12. 按「Ctrl+Alt+2」鍵解鎖全部對象,刪除參考線。
把之前刻畫好的文字信息排列在畫麵下方,嚴格按照對齊原則進行排列,主體圖形與文字信息形成了方向對比和肌理對比,視覺效果也更豐富。
觀察畫麵整體效果,發現宋體字與版麵中的風格不統一,所以去掉字型對比,把所有文字統一修改為思源黑體;嚐試把色彩對比也取消,版麵視覺效果更簡潔純粹。設計完成:
重新嚐試使用其它對比手法設計新方案。把「對比原則」四字放大並錯落地放置在版麵中,形成位置上的對比。
把之前刻畫好的文字信息放置在畫麵中,整體文字排版采取兩端對齊的形式,但在局部采用左對齊和右對齊形式,形成排版方向上的對比。
加入英文豐富畫麵,排版方向改為縱向排列,這樣增加了方向對比;給背景加入點狀肌理,形成肌理對比。
為使對比效果更豐富,把「對比原則」四字執行「效果-模糊-徑向模糊」,形成動靜對比和空間對比,設計完成:
色彩的魔力!烏克蘭116平裝修設計2020-04-01
配色優雅的幾何圖案:2包裝設計2020-03-04
比利時Vandewiele集團總部辦辦公空間2020-03-04
藝術氣質的字體和版式 日海報設計2020-02-24
真愛無界 大愛無疆:特別海報設計2020-02-14
50款企業logo設計佳作欣賞標志設計2020-01-29
日式美學,克製之心與樸文章2020-04-13
微信的設計之道·用戶體驗文章2020-04-11
淺析如何設計交互缺省頁文章2020-04-11
這座網頁設計博物館,讓文章2020-04-08
被你忽略的投影,實用性文章2020-04-04
解鎖新姿勢!你所不知道文章2020-04-02