2017-2-28 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
在上一篇文章當(dāng)中，小編給大家分享了色彩對比在網(wǎng)頁當(dāng)中的運(yùn)用，今天小編來給大家分享字體對比的幾種常用表現(xiàn)手法。
字體有很強(qiáng)的識別性和可讀性，因此字體在整個(gè)界面上的設(shè)計(jì)也相當(dāng)重要。字體設(shè)計(jì)得好，可以為整個(gè)網(wǎng)站錦上添花。網(wǎng)頁中的字體對比體現(xiàn)在：字體大小的對比、字體粗細(xì)的對比、字形的對比、字體顏色上的對比、字體動靜對比和字體的方向?qū)Ρ?/span>。
1、字體的大小對比。
文本是網(wǎng)頁中最為重要的設(shè)計(jì)元素。對于一個(gè)網(wǎng)站而言，了解和掌握網(wǎng)頁設(shè)計(jì)中的文字排版設(shè)計(jì)就顯得尤為重要。
在網(wǎng)頁當(dāng)中，字體的大小可以起到一定的識別作用，字體大小的組合方式，這也是網(wǎng)頁當(dāng)中最常用到的對比效果之一。
在通常情況下，網(wǎng)頁當(dāng)中的主標(biāo)題和重要信息會被做放大處理。假設(shè)網(wǎng)頁當(dāng)中經(jīng)常用14px像素大小的字體，標(biāo)題類可以大于16px像素，這樣的組合方式比較能凸顯標(biāo)題，也可以建立起清楚的視覺層次，讓瀏覽者清晰的知道各個(gè)版塊的功能特點(diǎn)。
給大家舉幾個(gè)字體大小搭配的例子，字體大小對比在網(wǎng)站當(dāng)中隨處可見，也比較好理解。
在武漢武商集團(tuán)這個(gè)網(wǎng)頁當(dāng)中，新聞區(qū)塊的標(biāo)題用了紅色放大的字體，起到了概括總結(jié)區(qū)塊的作用，使得網(wǎng)站建立起清晰明了的視覺層次，可以縮短瀏覽者的閱讀時(shí)間，方便瀏覽者在最短的時(shí)間內(nèi)找到相對應(yīng)的區(qū)塊。
除此，網(wǎng)頁當(dāng)中除了標(biāo)題常用到字體對比之外，字體對比在網(wǎng)站的幻燈片中更被廣泛的使用。簡單用蟬知官網(wǎng)的幻燈片來給大家分析一下：
可以看到幻燈片上的標(biāo)題跟小字一樣大小的時(shí)候，這個(gè)幻燈片看起來就比較奇怪，找不到主次關(guān)系。第二張突出“蟬知，專注企業(yè)營銷！”這句話的時(shí)候，這個(gè)幻燈片的主次關(guān)系就出來了，視覺層次結(jié)構(gòu)也出來了，這樣的幻燈片看起來也會舒服一些。
2、字體的粗細(xì)對比
字體的粗細(xì)對比跟大小對比一樣，運(yùn)用都比較廣泛，兩者可以搭配起來一起使用。字體的粗細(xì)對比出現(xiàn)的一般情況都是為了突出某一個(gè)元素，通常情況下這個(gè)元素相比較其他元素會比較重要一些，而把這個(gè)元素字體加粗，使得這個(gè)元素在其他元素當(dāng)中形成鮮明的對比，達(dá)到瀏覽網(wǎng)站的人能第一時(shí)間先看到這個(gè)元素的目的。
Spa礦泉水這個(gè)網(wǎng)站的幻燈片用了字體的粗細(xì)和大小對比，字體的粗細(xì)和大小對比搭配起來使用會比較靈活，也更容易出效果，所以很多設(shè)計(jì)者在設(shè)計(jì)幻燈片的時(shí)候基本都會這么搭配使用。
3、字形的對比。
這個(gè)不難理解，就好比界面上有些地方用黑體，有些地方用宋體，這樣兩者間可以形成一定的對比。這樣的情況大部分還是用在幻燈片上，比如中英文結(jié)合形成的對比。
字體對比這塊給大家再舉一個(gè)例子，這個(gè)例子就將字體的大小、粗細(xì)、顏色等對比很好的融合在一起。
Photler創(chuàng)建攝影網(wǎng)站上幻燈片的字體就是采用了不一樣的字體系列，同時(shí)也用到了字體大小、字體顏色上的對比。這樣的幻燈片醒目、主次結(jié)構(gòu)清晰。
當(dāng)然小編只是用幻燈片來給大家講解字體的對比的運(yùn)用，事實(shí)上網(wǎng)頁當(dāng)中還有很多地方也用到了字體的對比，你可以隨意打開一個(gè)網(wǎng)站，仔細(xì)看看。
4、字體顏色上的對比
字體顏色對比顧名思義就是兩種或兩種以上字體不同顏色形成的對比。字體的顏色搭配可以多種多樣，總的原則來說就是設(shè)計(jì)者有意識的給字體加顏色，使該顏色字體在其他字體當(dāng)中起到增強(qiáng)或是減弱的作用。
這個(gè)網(wǎng)站幻燈片大標(biāo)題加了綠色和橙色之后，整個(gè)界面特別明亮活潑。這樣的字體設(shè)計(jì)可以讓幻燈片的主次結(jié)構(gòu)更加清晰明了。
字體顏色這塊小編不多講，如果想知道什么顏色對比可以達(dá)到什么視覺效果，可以看小編上一篇文章介紹的色彩對比。
5、字體動靜對比
字體動靜對比，一般出現(xiàn)在活潑的網(wǎng)站當(dāng)中。例如在幼兒園、母嬰類或是跟小孩有關(guān)的網(wǎng)站當(dāng)中比較常見。
字體動靜對比通常可以跟字體字形對比結(jié)合起來使用，這個(gè)概念相比前面的比較難理解，所以小編給大家舉了下面幾個(gè)例子：
左邊用的都是一個(gè)字體，小編只是將標(biāo)題部分加粗加大傾斜15°，這樣標(biāo)題跟下面正常情況的下的字體對比就形成一定的動靜對比。右邊小編用的是兩種對比，標(biāo)題同樣加大字號傾斜15°，這樣標(biāo)題跟下面的字體也形成一定的動靜對比。
小編說的動靜對比并非只是像gif圖這樣的動態(tài)圖和靜態(tài)圖的對比，實(shí)際上這種動靜對比會比較廣泛一些，可以是正常字體和傾斜字體上的對比，可以是帶個(gè)性一點(diǎn)的字體字形和形態(tài)差距大的字體字形的對比，也可以是旋轉(zhuǎn)下字體度數(shù)與其它正常字體的對比……
這個(gè)網(wǎng)站的幻燈片上，可以看到設(shè)計(jì)者采用了一種手寫的字體，和下面的常規(guī)字體一對比，就形成了動靜的對比。動靜對比的表現(xiàn)方式大多出現(xiàn)在活潑、動感的網(wǎng)站當(dāng)中。
有時(shí)間的話大家可以去看看一些運(yùn)動類的網(wǎng)站，里面的字體就做了很多這種動靜對比。
6、字體的方向?qū)Ρ?/span>
字體方向?qū)Ρ仍诰W(wǎng)頁當(dāng)中不常出現(xiàn)，一般出現(xiàn)在房地產(chǎn)和個(gè)性類網(wǎng)站當(dāng)中。但小編還是跟大家簡單介紹下這類對比的運(yùn)用。
盛德紫闕官方網(wǎng)站的布局很簡單，“全球華人的待客之道”和下面的“進(jìn)入網(wǎng)站”在字體的設(shè)計(jì)上，一個(gè)采用橫板排版，一個(gè)采用豎版排版，字體方向形成鮮明的對比。
實(shí)際在網(wǎng)頁當(dāng)中，將文字豎起來排版，閱讀性比較差，所以一般不建議將網(wǎng)站文字排成豎版，這類對比也在網(wǎng)頁當(dāng)中比較少見。
不管哪一種字體對比，只要恰當(dāng)?shù)氖褂眠@種對比方式，相信肯定可以為網(wǎng)站增色不少，當(dāng)然，也切勿為了好看而盲目的添加，這樣容易使網(wǎng)頁失去主次關(guān)系。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://ssll180.com