想提高作品層次感？先學(xué)會這12個(gè)字體運(yùn)用技巧！

@喪心病狂十六夜貓?：本文是對前兩篇關(guān)于「對比設(shè)計(jì)」和「字體組合設(shè)計(jì)」這兩篇文章的總結(jié)，整理建議同學(xué)們讀完前兩篇文章之后，再來看這篇，對于設(shè)計(jì)中層次感的把握會更進(jìn)一步。

對比設(shè)計(jì)篇：《實(shí)例教學(xué)！利用「對比原則」做出搶眼設(shè)計(jì)的20個(gè)方法》

字體組合設(shè)計(jì)篇：《實(shí)例教學(xué)！10個(gè)幫你運(yùn)用好字體組合的設(shè)計(jì)原則》

實(shí)例教學(xué)系列：

1. 《實(shí)例教學(xué)！12種透明背景的萬能設(shè)計(jì)方法》
2. 《實(shí)例教學(xué)！設(shè)計(jì)網(wǎng)頁時(shí)選擇配色的八個(gè)要點(diǎn)》
3. 《實(shí)例教學(xué)！10個(gè)用好模糊效果的超實(shí)用設(shè)計(jì)技巧》

字體視覺上的層次感（英: Visual Hierarchy），究竟意味著什么呢？

因?yàn)閷υO(shè)計(jì)項(xiàng)目有著致命的影響，所以我們需要好好的研究討論。當(dāng)你這樣做了，我們可以讓用戶很方便的了解到你所想要引起注意的要點(diǎn)，讓說明變得通俗易懂。

在沒有利用階層的情況下，文字、單詞或文章看上去都差不多，用戶想要獲取對他有用的信息是非常困難的。

那么接下來，我將會為大家介紹，如何使用文字的階層效果，來讓用戶方便的獲取到他所需要的信息，制作出充滿魅力的網(wǎng)站。

詳細(xì)從以下開始。

文字是設(shè)計(jì)素材的一部分，有意識的思考特定的構(gòu)造組合是有必要的。首先，文字有著什么樣的意思，我們需要仔細(xì)思考運(yùn)用是否得當(dāng)。

大小

這是最能將設(shè)計(jì)要素強(qiáng)調(diào)的技術(shù)。人的視線自然會被那些大的東西所吸引，文字如果使用大尺寸的字體，用戶自然就會去閱讀那些內(nèi)容了。

縮小字體，讓他與其他字體不同，仔細(xì)調(diào)整是很有必要的。在你使字體變大或者變小的時(shí)候，他并不會完全按照我們的預(yù)期變化，你需要時(shí)刻保持著細(xì)心。（例如你在使用裝飾性的字體的時(shí)候）

字體大小沒有統(tǒng)一感，會有種非常業(yè)余的感覺，也會讓文字變得難以閱讀，尺寸的調(diào)整也會變得不可能。下面這個(gè)樣本使用了Open Sans這個(gè)字體，這樣優(yōu)雅的字體用在標(biāo)題這里是再合適不過的了。【Open Sans是一個(gè)由Google委托Steve Matteson設(shè)計(jì)的無襯線字體。根據(jù)Google的說法，它是以“誠實(shí)的重要性、開放的表現(xiàn)形式、及一個(gè)中立但具親和力的外觀”的理念設(shè)計(jì)的，并且“針對打印、互聯(lián)網(wǎng)、行動(dòng)設(shè)備的可讀性所最優(yōu)化。”?】

在調(diào)整字體大小的時(shí)候，你需要驗(yàn)證這個(gè)大小是否合適。首先從正文而不是標(biāo)題開始，先確定他們的主字體。將字體的特點(diǎn)引發(fā)出來，讓用戶看到有魅力的效果。

調(diào)整字體大小需要注意的幾點(diǎn)

正文用的字體大小，最好在14pt以上。（19px）

標(biāo)題大小，最好控制在35pt以下。（約為正文的250%）

小標(biāo)題的大小，最好控制在25pt以下。（約為正文的175%）

導(dǎo)航菜單的大小，最好控制在23pt以下（約為正文的165%）

導(dǎo)航菜單上的字符大小，最好控制在20pt以下（約為正文的140%）

重量

文字的重量，就是指文字的厚度，以及該留出多少空白空間的意思。明顯和尺寸的重要性不同，特別是采用了獨(dú)特的字體時(shí)，可以更加突出一些重要內(nèi)容。

一旦你決定了文字的尺寸和重量，接下來就讓我們想想該使用什么字體吧。粗體和細(xì)體一起使用，可以很好的表現(xiàn)出層次感。為了傳達(dá)出文字的重要性，有一個(gè)非常著名的設(shè)計(jì)方法，就算是小屏幕畫面狀態(tài)下也能將文字表現(xiàn)出來的技術(shù)。

斜體

斜體也是非常有效的強(qiáng)調(diào)手段，有時(shí)也比粗體更容易引人注意。因?yàn)橐曈X差異比較小，對特別的字體是十分有效的。

小寫還是大寫？

所有的文字都使用大寫，有人會這樣主張這樣可以起到令人震驚的效果，對于網(wǎng)頁設(shè)計(jì)來說也是同樣的。在項(xiàng)目中使用大寫，就可以增強(qiáng)層次感，可以防止字號小的文字與背景互相混合在一起。

配色

文字的重量也依賴顏色，讓我們來制作一個(gè)易于使用的配色方案吧。因此我們需要學(xué)習(xí)一些美術(shù)的基本原理，例如冷色與暖色的不同，流行色與自然色等，學(xué)習(xí)一些配色的基本原則是非常重要的。

將配色應(yīng)用到文字上時(shí)，也需要注意他的層次感。使用明亮鮮艷的顏色，則表明他比其他的元素都重要，你需要知道一些顏色和對比相關(guān)的一些知識。

對比

如同字面意思一樣，對比能在配色、重量、尺寸等各種各樣的地方使用。正文與標(biāo)題的對比，可以說是最常見的技術(shù)了。

留白

在文章的段落和文字之間留下空白的空間，可以很好的提高閱讀效果。但因?yàn)橛行枰{(diào)整字符寬度，所以使用時(shí)需要小心。

首先第一個(gè)需要考慮的便是行距，不同的尺寸與顏色，我們需要選擇合適的風(fēng)格。

使用了留白之后，因?yàn)橐矔绊懙诫A層的順序，如果是使用了風(fēng)格相似的字體，留白能稍稍降低他們之間的關(guān)聯(lián)性，創(chuàng)造出讓人耳目一新的效果。但是，如果有想讓人注意的部分與別的文字做比較，你需要仔細(xì)的調(diào)整他們之間的平衡性。

方向

方向（英: Orientation），就是指在布局中文字的表現(xiàn)形式。雖然看起來是顯而易見的事，但在層次表現(xiàn)上卻是一個(gè)重要的過程。在大多數(shù)情況下字母與數(shù)字，在屏幕上以水平直線放置，這樣會整潔易讀。

如果文字垂直放置，不僅會成為重要的設(shè)計(jì)要素，所有的視線也都會被集中在上面。盡管這種技術(shù)能扭轉(zhuǎn)你的設(shè)計(jì)，但作為設(shè)計(jì)師，你還是需要充分理解自己的設(shè)計(jì)意圖后再去使用。

質(zhì)感、紋理

文字的紋理質(zhì)感，是需要花費(fèi)大量時(shí)間來掌握的一種技術(shù)。這種難，并不是指字體自身的質(zhì)感，而是指在頁面上所有文字的樣式。使用合適的紋理，變化設(shè)計(jì)的元素，打破原有的設(shè)計(jì)規(guī)律吧。明確意圖或概念，讓你的設(shè)計(jì)不會矯枉過正。

層級

不管是怎樣復(fù)雜的項(xiàng)目，都可以利用文字來分成三層，將網(wǎng)站上重要的部分完整的區(qū)分出來。這里的利用的階層分為：主層（英: Primary）、副層（英： Secondary）、三層（英: Tertiary）。

主層（英: Primary）上的文字，是頁面上最突出的元素。一般會使用大尺寸和鮮艷的顏色來使用，表現(xiàn)出與其他文字不同的魅力。但是，因?yàn)槲淖謱蛹壍挠绊戇^多，使用會有限制，例如只在標(biāo)題中使用。

副層（英： Secondary）上的文字，并沒有主層那樣的影響力，卻能很好的讓用戶的注意力轉(zhuǎn)向正文的內(nèi)容。利用配色、尺寸、留白等這些不同的要點(diǎn)，區(qū)分主次，可以用在小標(biāo)題，導(dǎo)語和摘錄上。

三層（英: Tertiary）上的文字，是利用在主要內(nèi)容上的，沒有什么特點(diǎn)的要素。在這里使用的字體并不需要多么的引人注意，可以選擇一些簡單的，沒有什么浮夸的效果的字體。不要干擾到主要內(nèi)容，從而讓用戶的視線轉(zhuǎn)移到別的地方。

最后

在網(wǎng)頁設(shè)計(jì)中，尤其是需要展現(xiàn)很多內(nèi)容的時(shí)候，所有的要素對于用戶的視覺體驗(yàn)是非常重要的。這次介紹的利用字體使你的網(wǎng)頁變得更加有層次感的技術(shù)就到這里了，希望大家好好使用它們，做出更棒的作品吧。謝謝大家~一起感受設(shè)計(jì)的樂趣吧。

歡迎大家關(guān)注我的微信~

「技多不壓身的設(shè)計(jì)師才有高薪資！」

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址：photoshopvip

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com