1.“小型”文字標(biāo)題排版 

 

這并不是說(shuō)文本趨向于整體變小,但網(wǎng)站的主要內(nèi)容中的標(biāo)題和文字并沒(méi)有那種超出某些設(shè)計(jì)的超大感覺(jué)。網(wǎng)站熱點(diǎn)區(qū)域中所謂的“小型”排版實(shí)際上有點(diǎn)令人耳目一新。

這些類型的大小 - 仍然足夠大,可以表示為頭條新聞,但足夠小,可以包含幾行文字 - 往往會(huì)在50到80分的范圍內(nèi)下降。(以上示例標(biāo)題為60分,次要標(biāo)題僅為23分。)

制作較小排版的關(guān)鍵是確保您選擇了高度可讀的字體并為其提供充足的空間。當(dāng)它很小時(shí),很容易陷入在屏幕上放置過(guò)多文字的陷阱。不要讓它發(fā)生在你身上。

為什么排版趨勢(shì)變小?這些尺寸更容易擴(kuò)展,同時(shí)可以跨設(shè)備創(chuàng)建更多通用體驗(yàn)。巨大的超大排版可能會(huì)在移動(dòng)設(shè)備上造成混亂,移動(dòng)設(shè)備的方向與桌面屏幕不同。結(jié)果是類型并不總是看起來(lái)很好或者必須做出影響設(shè)備間一致性的設(shè)計(jì)選擇。

只是稍微減小尺寸就可以解決這個(gè)問(wèn)題,保持可讀性,并且在完成時(shí)仍然看起來(lái)很棒。

2.襯線

 

 

襯線回來(lái)了。一旦被認(rèn)為“難以在線閱讀”,字符上帶有微小額外筆畫的排版就會(huì)隨處可見。

順便說(shuō)一下,在線襯線的可讀性問(wèn)題是一個(gè)完整的神話。

如果您想在網(wǎng)頁(yè)項(xiàng)目中使用襯線,請(qǐng)尋找具有規(guī)則到較粗的筆劃的字體樣式,并在涉及上升器,下降器和襯線或連字時(shí)注意線條間距,以便每個(gè)單詞都易于理解。

從簡(jiǎn)單的方形襯線,如上面的例子,到更精致的繁榮,這種排版風(fēng)格具有如此多的特點(diǎn)和魅力。它可以為簡(jiǎn)單的設(shè)計(jì)輪廓和那些使用空間的設(shè)計(jì)增加一個(gè)很好的推動(dòng)力。

3.動(dòng)畫排版

 

 

設(shè)計(jì)中最大的整體趨勢(shì)之一是動(dòng)畫。并且沒(méi)有理由這也不適用于排版。

更多設(shè)計(jì)正在使用移動(dòng),移位或受懸停狀態(tài)影響的字母(例如上面的示例)。所有這些技術(shù)都可以帶來(lái)更具互動(dòng)性,更豐富的用戶體驗(yàn)。

在動(dòng)畫文本時(shí),重要的是要考慮用戶閱讀信息的方式和位置(某些動(dòng)畫元素,如視頻在所有移動(dòng)設(shè)備上都不能正常工作)。進(jìn)行調(diào)整以便即使動(dòng)畫無(wú)法正常工作,仍然可以在消息傳遞清晰的情況下獲得有價(jià)值的用戶體驗(yàn)。

在這方面,最好的文字動(dòng)畫通常以清晰易懂的字體開頭。動(dòng)畫在延遲后或作為用戶交互的一部分發(fā)揮作用。這可能會(huì)讓用戶感到高興和驚喜(甚至可能導(dǎo)致更多的時(shí)間在網(wǎng)站上)。

使用排版動(dòng)畫仔細(xì)考慮速度 - 如果文本移動(dòng)太快,用戶將完全錯(cuò)過(guò)消息; 文本移動(dòng)速度太慢,用戶可能會(huì)在閱讀所有內(nèi)容之前單擊。一定是正確的。(用戶測(cè)試可以幫助您找到理想的速度。)

4.堆疊文本塊

 

 

雖然排版的趨勢(shì)是尺寸略小,但它仍然具有同樣重要的重量。設(shè)計(jì)人員正在堆疊多行文本,特別是在英雄標(biāo)題中,用于包含更多單詞的加權(quán)消息。

這一趨勢(shì)值得注意,因?yàn)樗@示了嘗試與用戶進(jìn)行更充分溝通的轉(zhuǎn)變,而不是期望一個(gè)詞足以吸引某人參與設(shè)計(jì)。以視覺(jué)上引人入勝的方式呈現(xiàn)的更多信息可以是更好的解決方案,從而導(dǎo)致更多用戶參與。

堆疊多行文本時(shí)的關(guān)鍵考慮因素是找到一個(gè)字體,當(dāng)與更多字母一起使用時(shí)可讀(或者甚至在所有大寫字母中使用時(shí),這是一種流行的選項(xiàng)),具有足夠的行間距以便線條易于使用區(qū)分和副本中斷是合乎邏輯的。在堆疊文本時(shí),應(yīng)該有一個(gè)不同的流到一行,這對(duì)于如何閱讀單詞是顯而易見的,并且用戶應(yīng)該在設(shè)計(jì)的任何其他部分之前移動(dòng)到下一行副本。

由于線路中斷和易于閱讀的挑戰(zhàn),文本堆棧通常位于屏幕的一側(cè),因此設(shè)計(jì)人員可以更好地控制。這種結(jié)構(gòu)還可以在文本元素和屏幕上的另一個(gè)視覺(jué)效果之間創(chuàng)建和諧,以實(shí)現(xiàn)非常吸引人的平衡。

5.顏色字體和類型

 

 

雖然有更多的黑白文字更簡(jiǎn)約的風(fēng)格,但顏色正在咆哮。

顏色字體是他們自己的一類,并且已經(jīng)遍布各處。它們實(shí)際上比許多人原先預(yù)期的更受歡迎,并且在設(shè)計(jì)項(xiàng)目中有趣。

您可以在我們的初學(xué)者指南中閱讀有關(guān)顏色字體的所有信息。彩色字體的概念已經(jīng)開辟了更多的項(xiàng)目,以便在整體排版中著色。

雖然有更多的黑白文字更簡(jiǎn)約的風(fēng)格,但顏色正在咆哮。許多設(shè)計(jì)師使用明亮的彩色排版和最小的風(fēng)格,如上面的傾斜椅子。顏色可以增加額外的視覺(jué)興趣,并強(qiáng)調(diào)顏色的單詞。

明亮的選項(xiàng),例如示例中的紅色,有助于吸引眼球,并作為消息傳遞的巨大跳板,建立品牌標(biāo)識(shí)并吸引用戶進(jìn)入設(shè)計(jì)。

6.突出顯示的類型

 

 

這是一個(gè)令人驚訝的趨勢(shì)之一:熒光筆式的強(qiáng)調(diào)刻字以強(qiáng)調(diào)。

從簡(jiǎn)單的高光到從背景到下劃線到動(dòng)畫高光的單獨(dú)字體,有很多方法可以使用這種類型的設(shè)計(jì)趨勢(shì)。雖然當(dāng)你描述它時(shí)聽起來(lái)有點(diǎn)奇怪,但實(shí)際的視覺(jué)效果非常驚人。

這種技術(shù)最適合您真正希望用戶看到的單詞。它對(duì)于較短的文本塊也可以更好地工作,這樣突出顯示就不會(huì)讓人不知所措并接管設(shè)計(jì)。

7.剪裁和疊加

 

 

這兩種技術(shù)都具有很多視覺(jué)趣味,并且可以很有趣地創(chuàng)建。

分層效果是使設(shè)計(jì)看起來(lái)不那么平坦的好方法。使用排版來(lái)做這件事是一個(gè)不錯(cuò)的選擇。

剪切和疊加是指沒(méi)有顏色填充的文本元素。剪切允許通過(guò)類型設(shè)計(jì)顯示背景圖層中的任何內(nèi)容,例如上面示例中的動(dòng)畫運(yùn)動(dòng)圖像。疊加層通常是背景上的透明字母,以便您可以在閱讀時(shí)通過(guò)字母查看背景。

這兩種技術(shù)都具有很多視覺(jué)趣味,并且可以很有趣地創(chuàng)建。它們最適合使用大字體,不是很多單詞和顯示字體。

疊加效果非常適合照片,紋理甚至視頻背景。使用這種技術(shù)時(shí),請(qǐng)確保避免許多其他設(shè)計(jì)效果。(你不想壓倒用戶。)

8.與其他元素分層

 

 

在大多數(shù)項(xiàng)目中,文本元素和其他元素保持相當(dāng)分離。但是這個(gè)想法已經(jīng)發(fā)生了很大變化,設(shè)計(jì)師并沒(méi)有回避允許文本和其他元素重疊。最終結(jié)果可能非常酷,實(shí)際上可以幫助用戶更專注于屏幕上的文字。

雖然排版趨勢(shì)在實(shí)踐中最常見的用途是與盒裝圖像或顏色重疊的文本元素,但MJND將其提升了一個(gè)檔次。這種設(shè)計(jì)將圖像中的人與排版融合在一起,以便在他周圍切出(就像人走進(jìn)文字一樣)。

這是一種來(lái)自印刷設(shè)計(jì)的技術(shù),它更受歡迎 - 而且非常誠(chéng)實(shí)地更易于執(zhí)行 - 并且可以創(chuàng)建令人驚嘆的顯示。訣竅是擁有正確的圖像并保持每個(gè)字母的可讀性。(由于缺少字符筆劃或部分,請(qǐng)注意不要?jiǎng)?chuàng)建非預(yù)期的單詞。)

9.帶漸變的文本

 

 

有史以來(lái)最被低估的設(shè)計(jì)技術(shù)可能是漸變。由于使用不當(dāng),它嚴(yán)重?fù)p害了聲譽(yù)。但如果做得好,漸變絕對(duì)令人驚嘆。上面的例子就是Design Spin。

標(biāo)題的右側(cè)部分具有簡(jiǎn)單的藍(lán)色到綠色變化。它易于閱讀和理解,并將重點(diǎn)放在恰當(dāng)?shù)奈恢谩u變感覺(jué)既現(xiàn)代又清新,僅比單一顏色增加了一點(diǎn)視覺(jué)吸引力。它非常適合頁(yè)面的最小設(shè)計(jì),并且通過(guò)滾動(dòng)按鈕中的漸變,從主要排版到用戶應(yīng)該采取的下一步的方向提示。

10.“過(guò)度”效應(yīng)

 

 

沒(méi)有效果擺脫桌面。

在談?wù)撊魏卧O(shè)計(jì)技巧時(shí),通常不會(huì)使用“過(guò)度”。但是當(dāng)談到過(guò)度的排版趨勢(shì)時(shí),它可以發(fā)揮作用。

這種類型的趨勢(shì)具有復(fù)古的感覺(jué),其特點(diǎn)是文字和文字效果,因此你必須閱讀這些文字。有輪廓和陰影,斜面和淡入淡出和瘋狂的顏色。沒(méi)有效果擺脫桌面。

你投入的效果越多,用戶看起來(lái)就越多。這種風(fēng)格最適合簡(jiǎn)單的設(shè)計(jì)方案,如上面的Schnitzel Love。

11.定制一切

 

 

排版的誡命之一是單獨(dú)留下刻字。你不應(yīng)該改變或搞亂字體; 選擇適合您項(xiàng)目的一個(gè)。

但是設(shè)計(jì)師通過(guò)對(duì)字體進(jìn)行簡(jiǎn)單調(diào)整以使其具有更加自定義的外觀和感覺(jué),從而以積極的結(jié)果挑戰(zhàn)這一想法。其他人實(shí)際上全押并且為項(xiàng)目制作了自定義字體。

雖然這可能很有趣,但它通常是一個(gè)昂貴的選擇,可能會(huì)花費(fèi)很多時(shí)間。對(duì)于較大的品牌或團(tuán)隊(duì)中有印刷工程師的項(xiàng)目,這種情況最為常見。