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