search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

分享:設計師必須知道的6個排版小技巧

我們知道,排版設計首先就要重視信息層次感的區分。就比如下圖所示的經典三段式層次區分法則:標題、引言、和正文三個部分的大小、色塊區分:

所有文字信息的組合與區分,最關鍵的作用就是為了引導讀者從整體往細節里閱讀,越是合理科學的排布,越能使讀者擁有舒適的閱讀體驗。

那麼,怎樣才能在易讀性上越做越好呢?我們先來看一個栗子:下圖從左至右是同樣信息的不同排版方式,我們一眼望去就能夠感覺到:左邊的信息因為沒有多少視覺、色塊與字體設計的區分,所以沒有層次感可言,我們閱讀起來就費勁,內容主旨不易凸顯:

此時,如何在設計中制定有效的視覺層次變得很重要。首先可以將文本信息分割為三個部分:

一級層次:通常,內容和信息中最需要傳遞給讀者的部份。在視覺設計中,這是需要讓讀者第一眼就能看見的信息。

二級層次:相對一層等級的輔助信息如引言,在引導讀者方面起到開門的作用。

三級層次:佔據篇幅最多的文本信息,相當於三部分中的正文,是圍繞第一層次展開的詳細內容。

再舉一個栗子:以下的網站商品頁中藏著簡約不簡單的設計技巧,這是一個典型的分成三段層次的信息排版設計。 商品名(Major Black Headphones)是視覺上的一級層次,商品價格是第二層次,商品詳情即是第三層次,字體的大小、寬高和粗細疏密值得參考。

視覺信息整理的基本方法就如同美國建築設計大師查爾斯·伊姆斯(Charles Eames)講的名言那樣:信息整理就像一個層層打包的快遞盒,再微小的那一層盒子也要清楚尺寸的具體數字,這可以用來比喻字體的具體尺寸。

在視覺設計中,最大的眼球衝擊力不是來源於一行很大的字,而是來源於N行大小不一的字句的合體。下面具體來講一件整理信息層次的小技巧!

1、字體的大小、疏密調整。

文字的大小調整,因為要拉開不同文字之間的對比度,最簡單的方法通常是從最大的字體尺寸開始,越往頁面下方走,文字大小也隨之遞減,這一招用在多文字網頁設計中會有效果。

下圖所示的參考樣本,左側與右側分別用到了筆觸肌理不同的字體設計, 另外一白一紅的色塊區分也更能起到分開層次的作用。 有層次對比度的字體才適合與背景大圖相結合

2、不同風格的字體可以嘗試混搭,但最好不要超過三種

文字字體的設計要素,分配不同作用時等有效。 以下的樣品中,都是同樣的サンセリフ字體被利用,利用不同的權重。 標題標題最粗的比重來看,利用設計的階層中,最重要的情報。

3、為文字信息加上顏色,背景白或灰即可~

字體的風格和顏色分量一樣,在特定的點證人席上看到的技巧之一。 顏色自身所擁有的意義也被表達,所以設計的品牌形象和目的、氛圍和互相確認吧。

這是一張咖啡廠商舉辦的活動邀請函,自然的大地色字體使用起來很符合品牌的調性以及活動理念。

而在另一個範例,也就是下圖中,藍黃撞色的字體組合就非常清晰地區分了主次層級:

4、空白處也要注意細節的配合

以下圖為例,採取劃分線的方式充分利用留白空間,確保商品標籤在小小的平面區域內能夠達到視覺上的基本平衡:

充分利用好空白空間,還需要注意字體不要過小,因此在設計的時候,我們要站在讀者的角度,首先得要讓自己感覺閱讀不吃力,才能繼續談用戶體驗。

設計的時候,讀者要的壓力吧。 適當的留白空間,確保設計的平衡也抽出時間吧。

5、在信息量龐雜的情況下,依然可以先分出三大層級區域

特別是信息視覺圖這樣文字信息龐雜的設計,還是可以先用三個層級劃分,接著再往細里分:

6、萬花叢中一點綠的方法

以下圖為栗,我們可以看到文字設計工整而且排列方式基本一致,這種時候,適當加入傾斜式的字體排版,會有意想不到的好效果誕生!這樣可以緩解視覺疲勞,讓眼球感受不完全一樣的亮點。

更多資訊,關注一品威客網官方微信:epweike



熱門推薦

本文由 yidianzixun 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦