字本多情！如何用文字性格激發(fā)網(wǎng)頁(yè)的活力

字本“多情”，設(shè)計(jì)師們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)，通常會(huì)為表達(dá)某種情感而選擇字體?？梢哉f(shuō)，除了需要表達(dá)文字內(nèi)容本身之外，設(shè)計(jì)師在選擇一款字體時(shí)還應(yīng)該考慮這款字體是否能與其他設(shè)計(jì)元素及布局相融合，同時(shí)加深網(wǎng)頁(yè)上的人或事物的特點(diǎn)，合適的一款字體很能提升網(wǎng)頁(yè)的質(zhì)感和美觀度。

隨著更多企業(yè)越來(lái)越“接地氣”，他們開(kāi)始注重與用戶的互動(dòng)與交流，增強(qiáng)用戶的參與感，因此對(duì)話式的網(wǎng)站快速受到用戶歡迎。這一趨勢(shì)無(wú)形中要求設(shè)計(jì)師們需要加強(qiáng)對(duì)文字性格的把握，以更好的設(shè)計(jì)實(shí)現(xiàn)與用戶的“對(duì)話”。

正如大家常聽(tīng)到一句話“字如其人”，在看到一種字體后，人們會(huì)下意識(shí)聯(lián)想到某種人物形象、性格或感受，比如沉穩(wěn)、柔美、活潑、可愛(ài)、平和等。

因此在設(shè)計(jì)之前，設(shè)計(jì)師需要不斷問(wèn)自己：我想讓用戶覺(jué)得，這是一個(gè)什么性格的人在和他們對(duì)話?我現(xiàn)在采用的這種字體所表現(xiàn)的性格，是我想要表達(dá)的特點(diǎn)嗎?

通過(guò)思考和對(duì)比，才能應(yīng)用恰當(dāng)?shù)奈淖中愿?，把握好網(wǎng)頁(yè)的設(shè)計(jì)。

AnyForWeb將通過(guò)本文給大家展示收集的不同字體應(yīng)用案例，希望能幫助設(shè)計(jì)師們?cè)谥形淖煮w設(shè)計(jì)上加深理解。

我們需要先說(shuō)明一點(diǎn)，同一類型的字體可以設(shè)計(jì)成不同的變體美術(shù)字，字體的粗細(xì)、曲直、疏密不同，在不同風(fēng)格設(shè)計(jì)下可能展現(xiàn)不同性格特征。

1.客觀、正式、官方的、通用的

基本上看到這幾個(gè)描述詞，大家肯定知道描述的是什么字體了。沒(méi)錯(cuò)，說(shuō)的正是宋體。

宋體是與印刷術(shù)同齡的出版字體，這種最普通的字體在報(bào)刊雜志中常用。在網(wǎng)頁(yè)設(shè)計(jì)中，宋體也可以在很多地方使用，非常適合用于大段文字的版塊。

2.清秀、方正俊雅、真實(shí)可靠

有物電商平臺(tái)的banner圖中采用了楷體和微軟雅黑兩種字體，大字使用的楷體是漢字主要書體，看起來(lái)工整規(guī)范、干凈利落，給人方正俊雅的感覺(jué)，這段文字與圖片表達(dá)的“手工感”相融合，共同傳達(dá)出一種認(rèn)真和質(zhì)樸的精神。

這里有個(gè)細(xì)節(jié)需要大家注意嘍!在這個(gè)案例中，楷體文字是嵌入在圖片中的，而微軟雅黑則是用font-family寫在頁(yè)面的，為什么處理方式不一樣?在上一篇文章中AnyForWeb有提到過(guò)，詳情請(qǐng)參考《常規(guī)or創(chuàng)意?別讓網(wǎng)頁(yè)中的文字設(shè)計(jì)禁錮了你》。

從文字的整體結(jié)構(gòu)來(lái)看，楷體帶有一種書卷味，可以考慮在教育行業(yè)的網(wǎng)站上適當(dāng)采用。

3.強(qiáng)壯、堅(jiān)韌、壓迫、震撼、充滿力量感

給人這種感受的字體一般筆畫渾厚、濃重，很多情況下采用粗體或加粗的大號(hào)文字，在視覺(jué)上面積加重，給人一種強(qiáng)壯、震撼的感覺(jué)。

比如下面阿迪達(dá)斯采用的這款蒙納簡(jiǎn)粗雅麗體，在網(wǎng)頁(yè)上占據(jù)的位置非常顯眼。

下面案例中節(jié)目的Logo位于官網(wǎng)首頁(yè)，采用了一款純直線字體，顯得硬朗、筆直、棱角分明，給人一種堅(jiān)決的態(tài)度。

還有李寧官網(wǎng)圖片中使用的字體，筆畫粗細(xì)均衡，規(guī)律一致，充滿了堅(jiān)韌。

NBA官網(wǎng)和國(guó)際飛鏢公開(kāi)賽網(wǎng)站則是采用了微軟雅黑字體，加粗的大號(hào)的字體略帶傾斜，內(nèi)容標(biāo)題也同樣采用了加粗的微軟雅黑。微軟雅黑加粗后的視覺(jué)效果雖然不像上面幾個(gè)案例的字體那么強(qiáng)勢(shì)，但我們依然能在視覺(jué)上獲得類似“隆重、這是比賽”的感受。

這類字體一般呈現(xiàn)出硬朗、粗獷、棱角分明等特征，適合應(yīng)用于與運(yùn)動(dòng)、比賽、競(jìng)技、金屬、游戲，以及面向男性用戶群體的產(chǎn)品等。一些促銷活動(dòng)也會(huì)經(jīng)常使用這類字體。

4.細(xì)致優(yōu)雅、纖細(xì)、柔美、婉轉(zhuǎn)、流暢、精致

給人這種感受的字體一般筆畫纖細(xì)，婉轉(zhuǎn)流暢，具有曲線美，很多情況下會(huì)采用末梢曲線優(yōu)美的襯線字體。

上文提到讓人感覺(jué)正式的宋體就是一款襯線字體，在適當(dāng)?shù)脑卮钆渲?，宋體也能展現(xiàn)出典雅的一面，給人優(yōu)雅的感覺(jué)。比如下面Tiffany的官方網(wǎng)站。

還有拉菲官網(wǎng)也是。

這類字體一般呈現(xiàn)出纖細(xì)柔軟的特征，適合應(yīng)用于珠寶、化妝品、珠寶首飾，以及面向女性用戶群體的產(chǎn)品等。另外像紅酒、餐廳、手工藝品牌、精選類品牌、奢侈品等也會(huì)使用這類字體。

有一點(diǎn)不得不說(shuō)，其實(shí)很多品牌在中國(guó)區(qū)的官網(wǎng)上使用了特殊的自定義字體，但由于瀏覽器無(wú)法識(shí)別，瀏覽器最終以默認(rèn)的宋體進(jìn)行渲染，這時(shí)的視覺(jué)效果可能就不那么美好了。

這個(gè)問(wèn)題怎么解決，我們之后將分享解決方法，我們同樣也在《常規(guī)or創(chuàng)意?別讓網(wǎng)頁(yè)中的文字設(shè)計(jì)禁錮了你》中提到過(guò)。

5.活潑、可愛(ài)、有趣

給人這種感受的字體一般字體末梢圓潤(rùn)，看起來(lái)圓乎乎的，顯得稚趣、可愛(ài)。

比如喜寶HiPP官網(wǎng)采用的圓體。

還有幫寶適采用的幼圓字體。

給人這種感受的字體主要適用于趣味游戲、嬰幼兒產(chǎn)品、游樂(lè)場(chǎng)、玩具等。另外，像柔軟舒適的產(chǎn)品也會(huì)選用這類字體，比如某些家居用品等。

6.平和、干凈、簡(jiǎn)單、平靜

這類字體一般采用無(wú)襯線字體，鏈接襯線和字干的字弧被去除，字體看起來(lái)干脆利落，比如蘋果官網(wǎng)的PingHei字體。

魅族官網(wǎng)的方正悠黑字體。

這類字體主要適用于科技行業(yè)，包括平臺(tái)、電腦手機(jī)產(chǎn)品等，同樣也適用于現(xiàn)代感的產(chǎn)品、簡(jiǎn)潔風(fēng)格的產(chǎn)品等。

7.古典、中國(guó)風(fēng)

柒牌采用的行書字體行云流水，形態(tài)優(yōu)美，帶著濃濃的中國(guó)特色，更好地表達(dá)了其品牌所傳達(dá)的理念。

AnyForWeb為九扇屏設(shè)計(jì)的網(wǎng)站首頁(yè)采用了瘦金體，這款字體風(fēng)格獨(dú)特，充分展現(xiàn)中國(guó)傳統(tǒng)文化特色，體現(xiàn)其品牌特征。

此外，很多字體還能給人其他感受，比如費(fèi)列羅官網(wǎng)的這款字體讓人有一種愉悅、溫暖的感覺(jué)。

加粗的微軟雅黑字體在以下案例中讓人感到專業(yè)、可靠。

黑體看起來(lái)剛健、踏實(shí)，在建筑行業(yè)、機(jī)械行業(yè)、房地產(chǎn)行業(yè)網(wǎng)站上展現(xiàn)出一種專業(yè)感。

看到這么多案例后，相信大家已經(jīng)對(duì)字體性格有了基本了解，本篇關(guān)于文字性格的介紹就先到這里。了解這些基本的知識(shí)后，大家可以進(jìn)一步學(xué)習(xí)，根據(jù)對(duì)不同字體結(jié)構(gòu)、筆畫弧度等元素進(jìn)行判斷，在不同場(chǎng)景下合理應(yīng)用字體，最終能通過(guò)文字性格的展現(xiàn)讓自己網(wǎng)頁(yè)設(shè)計(jì)更有活力。

本文最初由AnyForWeb UED視覺(jué)發(fā)布，轉(zhuǎn)載請(qǐng)注明出處。