旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門文章 > UI設(shè)計(jì) > 新一年的UI設(shè)計(jì)中趨勢(shì)中的字體設(shè)計(jì)和排版方法

新一年的UI設(shè)計(jì)中趨勢(shì)中的字體設(shè)計(jì)和排版方法

時(shí)間:2018-04-19來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:馬晨皓
時(shí)間:2018-04-19點(diǎn)擊量:作者:馬晨皓

如果你仔細(xì)觀察這些年的字體排版設(shè)計(jì)的變化,會(huì)發(fā)現(xiàn)每種設(shè)計(jì)趨勢(shì)都在逐漸遠(yuǎn)離原本的扁平化設(shè)計(jì),越來(lái)越不那么保守。這些充滿創(chuàng)意的字體設(shè)計(jì)本身并不那么容易實(shí)現(xiàn),設(shè)計(jì)師應(yīng)該將這些字體的設(shè)計(jì)納入到整個(gè)設(shè)計(jì)策略當(dāng)中來(lái),而不僅僅是作為一種簡(jiǎn)單的炫酷的字體設(shè)計(jì)技術(shù)。

接下來(lái),我們仔細(xì)看看2018年所流行的8種設(shè)計(jì)趨勢(shì)。

 

1. 彩色的文本和字體

\

雖然絕大多數(shù)的極簡(jiǎn)風(fēng)格的頁(yè)面會(huì)采用黑白色調(diào)的文字,但是有色彩的文字更有張力,這是不爭(zhēng)的事實(shí)。

彩色的字體在絕大多數(shù)地方都顯得足夠醒目,在許多設(shè)計(jì)項(xiàng)目當(dāng)中,彩色字體被作為最重要的視覺(jué)元素來(lái)呈現(xiàn)。

現(xiàn)在,自帶可編輯色彩屬性的多彩字體開始逐漸多起來(lái)了,你可以在《字體新玩法!這些流行的繽紛多彩字體正在走向標(biāo)準(zhǔn)化》這篇文章當(dāng)中看到更多關(guān)于多彩字體的知識(shí)。

明亮的色彩和多樣的色彩是非常吸引人的,這也使得信息的傳遞更加有效,足以建立富有標(biāo)志性的標(biāo)識(shí),并且吸引用戶參與到設(shè)計(jì)當(dāng)中來(lái)。

 

2. 簡(jiǎn)約大膽的非襯線字體

\

想要給人留下深刻的印象,字體并不一定非得那么華麗。

筆觸較粗的非襯線字體在這兩年比較流行,在各種網(wǎng)站和 APP 當(dāng)中出現(xiàn)的機(jī)率非常之高。

它們之所以會(huì)被選取,很大程度上是因?yàn)樗鼈冏銐蛞鬃x,并且能同背景和其他的文本元素構(gòu)成良好的對(duì)比。

 

3. 高亮的字體

\

被高亮顯示的字體,是目前所看到的最令人驚訝的趨勢(shì)之一,這種設(shè)計(jì)手法可以強(qiáng)調(diào)文本,讓它成為視覺(jué)焦點(diǎn)。

從簡(jiǎn)單的通過(guò)高飽和度色彩高亮文本,到使用下劃線的方式來(lái)高亮文本,設(shè)計(jì)師們所采用的方法都不盡相同。

不過(guò)不論是怎么設(shè)計(jì),都是希望用戶能夠優(yōu)先看到重要的文本內(nèi)容,這種設(shè)計(jì)適合使用更短的文本塊,以便突出顯示,又不會(huì)造成信息過(guò)載。

 

4. 剪切和疊加效果

\

通過(guò)剪切和疊加實(shí)現(xiàn)的設(shè)計(jì)效果可以創(chuàng)造出足夠有趣、令人印象深刻的效果。

無(wú)論是疊加還是剪切,基本上都是通過(guò)分層來(lái)實(shí)現(xiàn)的,它讓設(shè)計(jì)看起來(lái)不那么扁平化,而在字體上實(shí)現(xiàn)這樣的效果,會(huì)是個(gè)不錯(cuò)的的選擇。

剪切和疊加效果指的是文本字體當(dāng)中不填充色彩,而是在背景上疊加一層,剪切出文本部分,透過(guò)剪切部分可以看到底層背景的圖片。就像上圖的案例當(dāng)中,透過(guò)文字可以看到底層的動(dòng)態(tài)圖片。

這種設(shè)計(jì)通常需要使用較粗的大寫字母,并且控制文本內(nèi)容的量。只有這樣能夠確保前景剪切的文本內(nèi)容清楚的傳遞給訪客,也能讓底層的圖形內(nèi)容呈現(xiàn)出來(lái)。

底層的內(nèi)容無(wú)論是圖片、紋理還是視頻,都可以不錯(cuò)地呈現(xiàn)給用戶,而且因?yàn)槲谋镜某叽?,總體的信息量不會(huì)太大,也不會(huì)過(guò)載。

 

5. 和其他圖層穿插

\

在絕大多數(shù)的設(shè)計(jì)當(dāng)中,文本元素所在的圖層通常會(huì)獨(dú)立使用,比如在背景之上,在圖片旁邊等等。但是現(xiàn)在很多設(shè)計(jì)師在字體的設(shè)計(jì)上已經(jīng)有截然不同的想法,單純的上下疊加和平行的布局已經(jīng)不足以滿足他們的需求,讓文本元素和其他的視覺(jué)元素穿插起來(lái),讓看似單薄的文本擁有了物理質(zhì)感,仿佛真實(shí)的存在。這樣的設(shè)計(jì)讓用戶感知到文本的「重量」,同時(shí)也更容易注意到其中的信息了。

就像上面的案例當(dāng)中,人物和文本穿插起來(lái),讓文本看起來(lái)仿佛是真實(shí)的存在,創(chuàng)造出更為沉浸式的體驗(yàn)。

這種設(shè)計(jì)技巧更貼近平面設(shè)計(jì),在設(shè)計(jì)上難度不算高,而且非常受歡迎。它充分利用到了格式塔原理,所以用戶并不會(huì)因?yàn)椴糠终趽醵鵁o(wú)法獲取文本中的信息。

 

6. 文本與漸變

\

漸變可能是最不被重視的設(shè)計(jì)趨勢(shì)之一。由于曾經(jīng)許多設(shè)計(jì)中并沒(méi)有正確使用漸變,導(dǎo)致它在扁平化興起之前,名聲并不太好。但是現(xiàn)在大家對(duì)于「微妙」的追求使得漸變成為了一種可用性極強(qiáng)的設(shè)計(jì)技法。

微妙的漸變會(huì)給人以現(xiàn)代和新鮮的感覺(jué),而上面的案例當(dāng)中,設(shè)計(jì)師僅僅是為標(biāo)題中的關(guān)鍵字加上漸變,就創(chuàng)造出頗為令人難忘的體驗(yàn)。當(dāng)然,這樣的設(shè)計(jì)更適合在極簡(jiǎn)的頁(yè)面上使用,如果頁(yè)面信息量太大,這樣的設(shè)計(jì)也是很難脫穎而出的。

 

7. 「過(guò)于復(fù)古的」效果

\

當(dāng)然,在談及到設(shè)計(jì)技巧的時(shí)候,一些相對(duì)更老的設(shè)計(jì)技巧其實(shí)很少被提及。這些設(shè)計(jì)手法常常會(huì)讓人覺(jué)得過(guò)于「復(fù)古」,不過(guò)在有的場(chǎng)合下,倒是能夠發(fā)揮作用。

通常,設(shè)計(jì)師會(huì)讓文本具有陰影、斜角、相對(duì)更顯著的漸變和少見的色彩,這樣的設(shè)計(jì)讓文本具備良好的可讀性,和讓人難以移開目光的獨(dú)特「復(fù)古」氣息。不過(guò),這樣的設(shè)計(jì)更適合簡(jiǎn)約的頁(yè)面布局,否則只會(huì)讓人覺(jué)得難受。

 

8. 完全自定義

\

不同的項(xiàng)目需要不同的字體來(lái)與之匹配,混淆了字體或者使用不當(dāng),都會(huì)讓整個(gè)設(shè)計(jì)顯得怪異。設(shè)計(jì)師通過(guò)對(duì)字體進(jìn)行自定義設(shè)計(jì),可以實(shí)現(xiàn)各種各樣不同的感覺(jué)和體驗(yàn)。針對(duì)字體進(jìn)行全方位的自定義,也是當(dāng)下字體的使用和設(shè)計(jì)趨勢(shì)之一。

雖然完全自定義的字體非常有趣,但是這樣的字體設(shè)計(jì)成本是比較高的,可能需要較長(zhǎng)的時(shí)間來(lái)實(shí)現(xiàn)。對(duì)于大品牌或者準(zhǔn)備了較多預(yù)算的企業(yè)機(jī)構(gòu)而言,倒不是很大的問(wèn)題。

 

結(jié)語(yǔ)

就我個(gè)人而言,字體排版是最有意思的趨勢(shì)之一,字體也是整個(gè)設(shè)計(jì)當(dāng)中最有趣的組成部分。在許多的設(shè)計(jì)項(xiàng)目當(dāng)中,字體通常會(huì)作為重要的視覺(jué)元素而被設(shè)計(jì)師投入更多的關(guān)注度,在實(shí)際輸出的設(shè)計(jì)產(chǎn)品當(dāng)中,它也是用戶最為在意的信息。這樣一來(lái),字體設(shè)計(jì)趨勢(shì)的意義就非常突出了。

                                                                                                                      本篇文章來(lái)源于網(wǎng)絡(luò),如有侵權(quán)請(qǐng)聯(lián)系小編以刪除。



 

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖