學(xué)會(huì)網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low
發(fā)布時(shí)間:2021-12-17 10:51 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

對(duì)于設(shè)計(jì)師而言,在日常的平面和 UI設(shè)計(jì)中,給字體增加特效一直都是一件惱人的事情?蛻籼岢龅母〉裉匦Щ蛘叽箨幱暗男枨螅侵苯影凑找髞碓O(shè)計(jì)可能會(huì)毀掉整個(gè)設(shè)計(jì)。更多時(shí)候,你需要的是一些相對(duì)優(yōu)雅但是又足夠吸引人的字體效果,讓整個(gè)設(shè)計(jì)項(xiàng)目的走向更加合理。

字體特效非常多,有目的地選取合理的特效是讓它們發(fā)揮效果的訣竅所在。好的字體排版是不需要輔助就能被識(shí)別的,否則這個(gè)設(shè)計(jì)是失敗的。

值得一提的是,最好的字體特效往往是潤(rùn)物細(xì)無聲的,近乎無形,但是對(duì)于整個(gè)設(shè)計(jì)在視覺和質(zhì)感上都有所提升。


1. 有目的地運(yùn)用陰影效果


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

無論你使用什么軟件做設(shè)計(jì),都不要使用默認(rèn)的陰影效果,這個(gè)經(jīng)驗(yàn)里面包含了太多血的教訓(xùn)。

正如前文所說,好的陰影特效有著較高的融入度,幾乎是「隱形」的。在部署陰影特效的時(shí)候,不要為了創(chuàng)建而創(chuàng)建,而是要借助陰影來構(gòu)建前景文字和背景之間的層次感,這種對(duì)比恰到好處即可。

這種「隱形」的陰影設(shè)計(jì)對(duì)于設(shè)計(jì)師而言通常是不難識(shí)別出來的,不過普通用戶通常不會(huì)太注意到它們。這些柔和的陰影,功能只是用來營(yíng)造對(duì)比。

相對(duì)較為硬朗的陰影,會(huì)給人以更加復(fù)古的感覺,在較粗的、筆觸平整的字體背后使用這樣的陰影效果會(huì)比較好。


2. 使用雙重曝光效果


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

雙重曝光效果在網(wǎng)頁(yè)設(shè)計(jì)和平面設(shè)計(jì)當(dāng)中是非常流行的設(shè)計(jì)技巧。在文本字體中使用雙重曝光效果能夠讓它看起來復(fù)雜而有趣,尤其是在雙重曝光的圖片選取得比較精妙的時(shí)候,效果看起來會(huì)非常驚艷。


3. 描邊特效


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

對(duì)于較粗的字體使用描邊特效,往往能夠讓字體的輪廓更加清晰,也增加了整體復(fù)古的感覺。在上面的案例當(dāng)中,設(shè)計(jì)師就借助霓虹色字體和描邊特效創(chuàng)造出了獨(dú)特的氛圍。


4. 使用多彩字體


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

多彩字體本身就包含有多樣的色彩屬性,甚至含有陰影、漸變、透明度甚至紋理。你可以使用多彩字體來讓文本擁有遠(yuǎn)超傳統(tǒng)字體的時(shí)髦值。

當(dāng)大量的色彩共同來構(gòu)成一套字體的時(shí)候,字體本身的視覺吸引力就已經(jīng)達(dá)到極致了,F(xiàn)如今明亮大膽的字體是一種設(shè)計(jì)趨勢(shì),這樣的配色本身并不會(huì)冒犯用戶,因?yàn)橛脩粽谠絹碓竭m應(yīng)這樣的設(shè)計(jì)。

當(dāng)然,在色彩的搭配上需要協(xié)調(diào)且有目的性。


5. 適當(dāng)?shù)厝谌胍恍﹦?dòng)效


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

從來都沒有規(guī)定文本必須是靜止的,在網(wǎng)頁(yè)的文本中加入動(dòng)效能夠提升它的視覺吸引力。

不過,在為文本添加動(dòng)效的時(shí)候,尤其要注意保持文本字體的可讀性:

  • 運(yùn)動(dòng)軌跡應(yīng)該是有意識(shí)地設(shè)計(jì)的;
  • 字母的運(yùn)動(dòng)不應(yīng)該太快;
  • 滾動(dòng)或者自動(dòng)播放的文本應(yīng)該可以被停止;
  • 無論屏幕大小,文本內(nèi)容應(yīng)該始終保持可讀。


6. 模仿一些標(biāo)志性的元素和特征


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

這兩年的 Netflix 的熱門美劇《怪奇物語(yǔ)》中,就模仿80年代經(jīng)典的電影,融入了大量當(dāng)時(shí)的元素,創(chuàng)造出讓許多影迷共鳴的設(shè)計(jì)。

最典型的就是霓虹色的運(yùn)用,充滿80年代風(fēng)情的 LOGO 成為了該劇最具識(shí)別度的元素。這種模仿的基礎(chǔ)在于近年來80年代復(fù)古元素的瘋狂流行,以及霓虹色等設(shè)計(jì)風(fēng)格的回潮。

在模仿這些標(biāo)志性的風(fēng)格和元素的時(shí)候,度的把握很重要,恰到好處的模仿讓人覺得親切,而拙劣的復(fù)制則會(huì)顯得很 Low。


7. 引入圖形


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

引入圖形或者其他的多媒體元素,在文本中加入一些額外的東西,也是不錯(cuò)的手法。使用圖形或者其他的元素來替代一個(gè)或者多個(gè)字母,這樣的設(shè)計(jì)還是很抓人眼球的。

這種技法的訣竅在于,圖形的外觀要和字母的風(fēng)格、形狀相匹配。很明顯,如果不這么做的話,會(huì)讓內(nèi)容難以閱讀。

在上面的 Kasra Design 的網(wǎng)頁(yè)當(dāng)中,視頻的觸發(fā)按鈕和圖標(biāo)很好地融合了起來。


8. 增加紋理


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

有些字體風(fēng)格本身就顯得復(fù)古、粗糙,設(shè)計(jì)師能夠通過自定義增加紋理來強(qiáng)化這種感覺。紋理本身能夠讓文本更加突出一些,也能夠強(qiáng)化文本的質(zhì)感,營(yíng)造出獨(dú)特的氛圍。

在上面的案例當(dāng)中,設(shè)計(jì)師通過兩種不同的方式來賦予文本以紋理:

  • 通過切割出來的細(xì)節(jié)來賦予文本以紋理;
  • 通過半透明的效果讓字體透出背景,從而擁有紋理。


9. 創(chuàng)造自定義的文本字體


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

在進(jìn)行品牌 LOGO 設(shè)計(jì)的時(shí)候,自定義的文本字體是最常見的元素之一;谔囟ǖ淖煮w來進(jìn)行自定義設(shè)計(jì),通過標(biāo)志性的細(xì)節(jié)來營(yíng)造令人難忘的視覺體驗(yàn),是自定義字體的主要目標(biāo)之一。

這并不是一件容易實(shí)現(xiàn)的事情,自定義文本字體不僅需要足夠扎實(shí)的技術(shù),而且需要在具體設(shè)計(jì)的時(shí)候,足夠小心謹(jǐn)慎。在絕大多數(shù)時(shí)候,最好是要同專業(yè)的字體設(shè)計(jì)師合作,以達(dá)到最好的設(shè)計(jì)效果。


10. 讓字體本身發(fā)揮效果


網(wǎng)頁(yè)中這10種字體的運(yùn)用方式,不會(huì)讓人覺得Low

有的時(shí)候,最好的文本效果,就是不要加其他任何特效。在形狀、大小和色彩具有足夠?qū)Ρ榷鹊那闆r下,文本元素和背景會(huì)自然地構(gòu)成前后景的對(duì)比,自然分離。

缺少其他效果的加持,設(shè)計(jì)師需要精心地控制所有的輔助性的元素,確保所有的元素能夠完美的協(xié)同工作。加粗字體,深淺對(duì)比,是比較合理的組合方式。

The University of Essex 這個(gè)網(wǎng)站就在較暗的背景上采用了加粗的白色字體,視覺上足夠突出,也足夠清晰。


結(jié)語(yǔ)


文字特效的使用還需要特別注意設(shè)計(jì)趨勢(shì)的存在,過于突出的特效可能會(huì)顯得過猶不及,而趨勢(shì)的流行周期也是設(shè)計(jì)師需要尤為注意的問題。微妙的設(shè)計(jì)總歸是擁有更加持久生命力的。

零基礎(chǔ)教你做UI
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC