詳細解析網(wǎng)頁(yè)設計中微文本的使用技巧發(fā)布者：本站     時(shí)間：2021-12-16 10:12:36

目前，網(wǎng)站設計的最大趨勢之一是使網(wǎng)站所承載的內容極簡(jiǎn)化和微小化?！拔⑿』钡奈谋驹匾呀?jīng)成為一種流行趨勢，但這種設計趨勢，在設計領(lǐng)域同樣引發(fā)了一些爭論。

毫無(wú)疑問(wèn)，小文本在大小和尺寸上可能會(huì )導致一些可讀性問(wèn)題。但如果你用心并處理得當的話(huà)，小文本區塊實(shí)際上可以幫助你創(chuàng )建一個(gè)視覺(jué)焦點(diǎn)和重心，并將用戶(hù)吸引到設計的特定部分。

接下來(lái)，跟上思維，讓我們來(lái)看看這個(gè)微小的文本趨勢應該如何實(shí)現以及它將如何發(fā)揮作用，以幫助你獲得一些設計靈感。

1.創(chuàng )建層次結構和組織感

詳細解析<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中微文本的使用技巧,PS教程,

盡管超大型文本隨著(zhù)使用已經(jīng)在設計領(lǐng)域打下一定的基礎，成為主頁(yè)和標題設計的主要選項。但是目前有一種趨勢——在瀏覽器或桌面的第一個(gè)屏上盡可能在保證視覺(jué)的基礎上提供更多的信息(原因之一可能是設備尺寸和分辨率的不斷增加，給設計師更多的設計空間)。

這也就是“微小化”文本“橫空出世”的原因。字體的大小和比例的不同，使得排版有明顯的視覺(jué)流動(dòng)感。通過(guò)使用一層很小的文本(通常使用14到16點(diǎn)的尺寸大小)，你可以創(chuàng )建一個(gè)額外的焦點(diǎn)讓用戶(hù)聚焦。小文本，特別是與其他較大文本一起使用時(shí)，可以吸引用戶(hù)，因為它們是不同的，這在視覺(jué)上就形成了對比。

Maxime Bonhomme在其網(wǎng)站設計中使用了小文本。你可以看到，微小化的文本元素提供了關(guān)于項目的關(guān)鍵細節，而更大的文本則負責提供工作的描述。你需要觀(guān)察和注意這些周?chē)写罅靠臻g和內容的微小文本元素是如何工作的。

2.形成風(fēng)格

詳細解析網(wǎng)頁(yè)設計中微文本的使用技巧,PS教程,

有時(shí)候，微小化文本信息的設計目的是為了引起你的注意或者讓你忍不住想看第二眼。

因為它的出現經(jīng)常是出乎意料的，或者不同于用戶(hù)在其他網(wǎng)站上看到的，所以設計元素可以一下子就吸引用戶(hù)。

Mountain Dew，一個(gè)永遠不懼于引領(lǐng)時(shí)尚的品牌，在它的網(wǎng)站設計上使用了一個(gè)超級小的標題，不過(guò)，它確實(shí)能夠讓你一下子注意到它。這個(gè)標題完全和X的頂點(diǎn)契合，創(chuàng )造出一種獨特的閱讀模式。即使是對交互動(dòng)作的設計他們也盡量做到微小，它不會(huì )讓用戶(hù)感到不舒服，因為它感覺(jué)是故意的。

3.創(chuàng )建吸引人的導航

詳細解析網(wǎng)頁(yè)設計中微文本的使用技巧,PS教程,

雖然現在的主流并且很多網(wǎng)站設計都取消了主頁(yè)的導航功能，但實(shí)際上它們只是變更了導航的表現形式，將他們替換為漢堡/隱藏的樣式菜單導航，使用小文本可以讓一些元素回到屏幕上，而不讓人覺(jué)得受到打擾。它是設計模式中的一個(gè)流程，從一個(gè)極端到下一個(gè)極端。

確實(shí)，在網(wǎng)頁(yè)設計的導航中使用小文本是一件很棘手的事情，因為它需要足夠大，以便可以被輕松閱讀和點(diǎn)擊。使用簡(jiǎn)單的字體也是非常重要的，因為小文本對眼睛的適應來(lái)說(shuō)可能有點(diǎn)困難。

Magic of Lapland貌似對在主菜單欄中使用微小文本這個(gè)問(wèn)題找到了一個(gè)很好的解決方案。在他的網(wǎng)頁(yè)設計的主導航中，你可以看到每個(gè)元素都有足夠的間距，有些甚至使用雙倍間距，并且在黑暗背景下，白色無(wú)襯線(xiàn)字體有助于可讀性。

4.展示空間

詳細解析網(wǎng)頁(yè)設計中微文本的使用技巧,PS教程,

當頁(yè)面的視覺(jué)空間很大時(shí)，微小文本最有效。小元素和廣闊空間之間的反差是總是可以產(chǎn)生驚人的效果。不過(guò)，大量的小文本就不建議使用了，因為它們總歸在閱讀上并不是很好，所以要保持文本元素的簡(jiǎn)潔。

微小文本的使用在最初你打算這么做的時(shí)候就應該在你的思維中有一個(gè)特殊的目的性。在使用這個(gè)設計趨勢之前，你需要問(wèn)問(wèn)你自己:為什么我要在這里使用小文本呢?它對我的網(wǎng)站設計將有什么貢獻或者意義呢?

如果你對這些問(wèn)題沒(méi)有可靠的答案(當然“因為我樂(lè )意”不能算答案)，那么你應該考慮其他的問(wèn)題，知道你確定它確實(shí)是你需要的。

Moonfarmer做了一個(gè)漂亮的示范，它向我們展示了微小的文字應該如何和空間搭配。該網(wǎng)頁(yè)設計使用了兩種級別的排版和大量的開(kāi)闊的視覺(jué)塊來(lái)建立一種情緒，并在用戶(hù)點(diǎn)擊或滾動(dòng)之前向他們介紹內容。小小的文字只是設計的眾多細節之一，讓你想停下來(lái)看看。元素之間有很大的對比，所以對于可讀性你可以不用有太多的顧慮。

還有一點(diǎn)你需要記?。耗悴槐氐教幨褂眯∥谋?。把它當作一種特殊的藝術(shù)元素，就像在Moonfarmer的主頁(yè)上使用的小文本一樣，然后在整個(gè)設計的其余部分將相同的字體增加到更常見(jiàn)的尺寸。

5.當文本不是最重要的元素時(shí)

詳細解析網(wǎng)頁(yè)設計中微文本的使用技巧,PS教程,

有時(shí)，需要展示的最重要的元素并不是文本，文本在視覺(jué)元素中可能只是次要的。

Freelance TV是一個(gè)很好的例子，說(shuō)明如何使用小文本來(lái)幫助用戶(hù)，同時(shí)允許另一個(gè)元素作為設計的主要部分。對于這個(gè)項目，視頻是最重要的元素，你一樣就可以看出來(lái)，而小文本作為另一個(gè)元素，可以提供額外的信息，并鼓勵用戶(hù)進(jìn)行訂閱或者注冊，不管它在主頁(yè)上的什么位置出現。

6.創(chuàng )建一個(gè)可視元素

詳細解析網(wǎng)頁(yè)設計中微文本的使用技巧,PS教程,

文本元素的主要作用是用來(lái)閱讀的，這很符合邏輯。

但有時(shí)候，將文本元素作為視覺(jué)元素的一部分，是否被閱讀的重要性就不那么重要了(這需要前期的計劃和大量的討論，所以不要在你突發(fā)奇的時(shí)候就草率的使用這項技巧)。

HTML Burger的網(wǎng)站設計中使用了一系列的小文本圖層，將小文本用作描述大標題的視覺(jué)部分。在每個(gè)“Burger”包裝上都使用了小的文字，以創(chuàng )造出更酷的視覺(jué)元素。這是一個(gè)你可能不太常見(jiàn)的設計技巧和思路，在這種情況下，它是有影響力的(但這種技術(shù)很難實(shí)現;要小心行事)。

總結

使用微小文本，或者不使用，這可能是一個(gè)艱難的決定。雖然小文本的使用是有爭議的，但對于小字體的使用還是有適當的用處的。為了確保在你的設計中添加有效的小文本元素，你需要給它足夠的空間，使用一個(gè)高度可讀的字體，并使用其他的設計元素來(lái)對比或者提示用戶(hù)。

最后，如果你打算使用微小風(fēng)格的文本內容在你的下一個(gè)設計項目時(shí)，當然，這是好事，但是我們也建議不要過(guò)多的使用它們。這不是一個(gè)能幫助你把更多的內容“塞進(jìn)”你的設計的技術(shù)，它只在最合適的位置，賦予一個(gè)直接的目的性才能發(fā)揮它最大的效果。