1. 程式人生 > >網頁中這 10 種字型的運用方式,不會讓人覺得 Low

網頁中這 10 種字型的運用方式,不會讓人覺得 Low

簡評:字型特效非常多,有目的地選取合理的特效是讓它們發揮效果的訣竅所在。好的字型排版是不需要輔助就能被識別的,否則這個設計是失敗的。

本文轉載自 UISDC,如需轉載請聯絡他們。

對於設計師而言,在日常的平面和 UI設計中,給字型增加特效一直都是一件惱人的事情。客戶提出的浮雕特效或者大陰影的需求,但是直接按照要求來設計可能會毀掉整個設計。更多時候,你需要的是一些相對優雅但是又足夠吸引人的字型效果,讓整個設計專案的走向更加合理。

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

值得一提的是,最好的字型特效往往是潤物細無聲的,近乎無形,但是對於整個設計在視覺和質感上都有所提升。

1. 有目的地運用陰影效果

無論你使用什麼軟體做設計,都不要使用預設的陰影效果,這個經驗裡面包含了太多血的教訓。

正如前文所說,好的陰影特效有著較高的融入度,幾乎是「隱形」的。在部署陰影特效的時候,不要為了建立而建立,而是要藉助陰影來構建前景文字和背景之間的層次感,這種對比恰到好處即可。

這種「隱形」的陰影設計對於設計師而言通常是不難識別出來的,不過普通使用者通常不會太注意到它們。這些柔和的陰影,功能只是用來營造對比。

相對較為硬朗的陰影,會給人以更加復古的感覺,在較粗的、筆觸平整的字型背後使用這樣的陰影效果會比較好。

2. 使用雙重曝光效果

雙重曝光效果在網頁設計和平面設計當中是非常流行的設計技巧。在文字字型中使用雙重曝光效果能夠讓它看起來複雜而有趣,尤其是在雙重曝光的圖片選取得比較精妙的時候,效果看起來會非常驚豔。

3. 描邊特效

對於較粗的字型使用描邊特效,往往能夠讓字型的輪廓更加清晰,也增加了整體復古的感覺。在上面的案例當中,設計師就藉助霓虹色字型和描邊特效創造出了獨特的氛圍。

4. 使用多彩字型

多彩字型本身就包含有多樣的色彩屬性,甚至含有陰影、漸變、透明度甚至紋理。你可以使用多彩字型來讓文字擁有遠超傳統字型的時髦值。

當大量的色彩共同來構成一套字型的時候,字型本身的視覺吸引力就已經達到極致了。現如今明亮大膽的字型是一種設計趨勢,這樣的配色本身並不會冒犯使用者,因為使用者正在越來越適應這樣的設計。

當然,在色彩的搭配上需要協調且有目的性。

5. 適當地融入一些動效

從來都沒有規定文字必須是靜止的,在網頁的文字中加入動效能夠提升它的視覺吸引力。

不過,在為文字新增動效的時候,尤其要注意保持文字字型的可讀性:

運動軌跡應該是有意識地設計的;
字母的運動不應該太快;
滾動或者自動播放的文字應該可以被停止;
無論螢幕大小,文字內容應該始終保持可讀。

6. 模仿一些標誌性的元素和特徵

這兩年的 Netflix 的熱門美劇《怪奇物語》中,就模仿80年代經典的電影,融入了大量當時的元素,創造出讓許多影迷共鳴的設計。

最典型的就是霓虹色的運用,充滿80年代風情的 LOGO 成為了該劇最具識別度的元素。這種模仿的基礎在於近年來80年代復古元素的瘋狂流行,以及霓虹色等設計風格的回潮。

在模仿這些標誌性的風格和元素的時候,度的把握很重要,恰到好處的模仿讓人覺得親切,而拙劣的複製則會顯得很 Low。

7. 引入圖形

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

這種技法的訣竅在於,圖形的外觀要和字母的風格、形狀相匹配。很明顯,如果不這麼做的話,會讓內容難以閱讀。

在上面的 Kasra Design 的網頁當中,視訊的觸發按鈕和圖示很好地融合了起來。

8. 增加紋理

有些字型風格本身就顯得復古、粗糙,設計師能夠通過自定義增加紋理來強化這種感覺。紋理本身能夠讓文字更加突出一些,也能夠強化文字的質感,營造出獨特的氛圍。

在上面的案例當中,設計師通過兩種不同的方式來賦予文字以紋理:

通過切割出來的細節來賦予文字以紋理;
通過半透明的效果讓字型透出背景,從而擁有紋理。

9. 創造自定義的文字字型

在進行品牌 LOGO 設計的時候,自定義的文字字型是最常見的元素之一。基於特定的字型來進行自定義設計,通過標誌性的細節來營造令人難忘的視覺體驗,是自定義字型的主要目標之一。

這並不是一件容易實現的事情,自定義文字字型不僅需要足夠紮實的技術,而且需要在具體設計的時候,足夠小心謹慎。在絕大多數時候,最好是要同專業的字型設計師合作,以達到最好的設計效果。

10. 讓字型本身發揮效果

有的時候,最好的文字效果,就是不要加其他任何特效。在形狀、大小和色彩具有足夠對比度的情況下,文字元素和背景會自然地構成前後景的對比,自然分離。

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

The University of Essex 這個網站就在較暗的背景上採用了加粗的白色字型,視覺上足夠突出,也足夠清晰。

結語

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