您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

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

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

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

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



因此在設(shè)計之前,設(shè)計師需要不斷問自己:我想讓用戶覺得,這是一個什么性格的人在和他們對話?我現(xiàn)在采用的這種字體所表現(xiàn)的性格,是我想要表達的特點嗎?

通過思考和對比,才能應(yīng)用恰當?shù)奈淖中愿瘢盐蘸镁W(wǎng)頁的設(shè)計。

AnyForWeb將通過本文給大家展示收集的不同字體應(yīng)用案例,希望能幫助設(shè)計師們在中文字體設(shè)計上加深理解。

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

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

基本上看到這幾個描述詞,大家肯定知道描述的是什么字體了。沒錯,說的正是宋體。

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



2.清秀、方正俊雅、真實可靠

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



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

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

3.強壯、堅韌、壓迫、震撼、充滿力量感

給人這種感受的字體一般筆畫渾厚、濃重,很多情況下采用粗體或加粗的大號文字,在視覺上面積加重,給人一種強壯、震撼的感覺。

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



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



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



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





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

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

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

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



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



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

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



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

5.活潑、可愛、有趣

給人這種感受的字體一般字體末梢圓潤,看起來圓乎乎的,顯得稚趣、可愛。

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



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



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

6.平和、干凈、簡單、平靜

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



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



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

7.古典、中國風

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



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



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



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



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

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

本文最初由AnyForWeb UED視覺發(fā)布,轉(zhuǎn)載請注明出處。


[教程作者:尛沫尛沫]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di3004.html
干貨分享!如何策劃設(shè)計頂尖電商banner
跟董老師學網(wǎng)頁設(shè)計:版式入門
圖趣網(wǎng)微信
建議反饋
×