目前,網(wǎng)站設(shè)計(jì)的大趨勢(shì)之一是使網(wǎng)站所承載的內(nèi)容極簡(jiǎn)化和微小化,“微小化”的文本元素已經(jīng)成為一種流行趨勢(shì),但這種設(shè)計(jì)趨勢(shì),在設(shè)計(jì)領(lǐng)域同樣引發(fā)了一些爭(zhēng)論。
毫無(wú)疑問,小文本在大小和尺寸上可能會(huì)導(dǎo)致一些可讀性問題。但如果你用心并處理得當(dāng)?shù)脑挘∥谋緟^(qū)塊實(shí)際上可以幫助你創(chuàng)建一個(gè)視覺焦點(diǎn)和重心,并將用戶吸引到設(shè)計(jì)的特定部分。
接下來,跟上思維,讓我們來看看這個(gè)微小的文本趨勢(shì)應(yīng)該如何實(shí)現(xiàn)以及它將如何發(fā)揮作用,以幫助你獲得一些設(shè)計(jì)靈感。 1、創(chuàng)建層次結(jié)構(gòu)和組織感 盡管超大型文本隨著使用已經(jīng)在設(shè)計(jì)領(lǐng)域打下一定的基礎(chǔ),成為主頁(yè)和標(biāo)題設(shè)計(jì)的主要選項(xiàng)。但是目前有一種趨勢(shì)——在瀏覽器或桌面的個(gè)屏上盡可能在保證視覺的基礎(chǔ)上提供更多的信息(原因之一可能是設(shè)備尺寸和分辨率的不斷增加,給設(shè)計(jì)師更多的設(shè)計(jì)空間)。 這也就是“微小化”文本“橫空出世”的原因。字體的大小和比例的不同,使得排版有明顯的視覺流動(dòng)感。通過使用一層很小的文本(通常使用14到16點(diǎn)的尺寸大小),你可以創(chuàng)建一個(gè)額外的焦點(diǎn)讓用戶聚焦。小文本,特別是與其他較大文本一起使用時(shí),可以吸引用戶,因?yàn)樗鼈兪遣煌?,這在視覺上就形成了對(duì)比。 Maxime Bonhomme在其網(wǎng)站設(shè)計(jì)中使用了小文本。你可以看到,微小化的文本元素提供了關(guān)于項(xiàng)目的關(guān)鍵細(xì)節(jié),而更大的文本則負(fù)責(zé)提供工作的描述。你需要觀察和注意這些周圍有大量空間和內(nèi)容的微小文本元素是如何工作的。 2、形成風(fēng)格 有時(shí)候,微小化文本信息的設(shè)計(jì)目的是為了引起你的注意或者讓你忍不住想看第二眼。 因?yàn)樗某霈F(xiàn)經(jīng)常是出乎意料的,或者不同于用戶在其他網(wǎng)站上看到的,所以設(shè)計(jì)元素可以一下子就吸引用戶。 Mountain Dew,一個(gè)永遠(yuǎn)不懼于引領(lǐng)時(shí)尚的品牌,在它的網(wǎng)站設(shè)計(jì)上使用了一個(gè)超級(jí)小的標(biāo)題,不過,它確實(shí)能夠讓你一下子注意到它。這個(gè)標(biāo)題完全和X的頂點(diǎn)契合,創(chuàng)造出一種獨(dú)特的閱讀模式。即使是對(duì)交互動(dòng)作的設(shè)計(jì)他們也盡量做到微小,它不會(huì)讓用戶感到不舒服,因?yàn)樗杏X是故意的。 3、創(chuàng)建吸引人的導(dǎo)航 雖然現(xiàn)在的主流并且很多網(wǎng)站設(shè)計(jì)都取消了主頁(yè)的導(dǎo)航功能,但實(shí)際上它們只是變更了導(dǎo)航的表現(xiàn)形式,將他們替換為漢堡/隱藏的樣式菜單導(dǎo)航,使用小文本可以讓一些元素回到屏幕上,而不讓人覺得受到打擾。它是設(shè)計(jì)模式中的一個(gè)流程,從一個(gè)極端到下一個(gè)極端。 確實(shí),在網(wǎng)頁(yè)設(shè)計(jì)的導(dǎo)航中使用小文本是一件很棘手的事情,因?yàn)樗枰銐虼螅员憧梢员惠p松閱讀和點(diǎn)擊。使用簡(jiǎn)單的字體也是非常重要的,因?yàn)樾∥谋緦?duì)眼睛的適應(yīng)來說可能有點(diǎn)困難。 Magic of Lapland貌似對(duì)在主菜單欄中使用微小文本這個(gè)問題找到了一個(gè)很好的解決方案。在他的網(wǎng)頁(yè)設(shè)計(jì)的主導(dǎo)航中,你可以看到每個(gè)元素都有足夠的間距,有些甚至使用雙倍間距,并且在黑暗背景下,白色無(wú)襯線字體有助于可讀性。 4、展示空間 當(dāng)頁(yè)面的視覺空間很大時(shí),微小文本有效。小元素和廣闊空間之間的反差是總是可以產(chǎn)生驚人的效果。不過,大量的小文本就不建議使用了,因?yàn)樗鼈兛倸w在閱讀上并不是很好,所以要保持文本元素的簡(jiǎn)潔。 微小文本的使用在初你打算這么做的時(shí)候就應(yīng)該在你的思維中有一個(gè)特殊的目的性。在使用這個(gè)設(shè)計(jì)趨勢(shì)之前,你需要問問你自己:為什么我要在這里使用小文本呢?它對(duì)我的網(wǎng)站設(shè)計(jì)將有什么貢獻(xiàn)或者意義呢? 如果你對(duì)這些問題沒有可靠的答案(當(dāng)然“因?yàn)槲覙芬狻辈荒芩愦鸢?,那么你應(yīng)該考慮其他的問題,知道你確定它確實(shí)是你需要的。 Moonfarmer做了一個(gè)漂亮的示范,它向我們展示了微小的文字應(yīng)該如何和空間搭配。該網(wǎng)頁(yè)設(shè)計(jì)使用了兩種級(jí)別的排版和大量的開闊的視覺塊來建立一種情緒,并在用戶點(diǎn)擊或滾動(dòng)之前向他們介紹內(nèi)容。小小的文字只是設(shè)計(jì)的眾多細(xì)節(jié)之一,讓你想停下來看看。元素之間有很大的對(duì)比,所以對(duì)于可讀性你可以不用有太多的顧慮。 還有一點(diǎn)你需要記?。耗悴槐氐教幨褂眯∥谋尽0阉?dāng)作一種特殊的藝術(shù)元素,就像在Moonfarmer的主頁(yè)上使用的小文本一樣,然后在整個(gè)設(shè)計(jì)的其余部分將相同的字體增加到更常見的尺寸。 5、當(dāng)文本不是重要的元素時(shí) 有時(shí),需要展示的重要的元素并不是文本,文本在視覺元素中可能只是次要的。 Freelance TV是一個(gè)很好的例子,說明如何使用小文本來幫助用戶,同時(shí)允許另一個(gè)元素作為設(shè)計(jì)的主要部分。對(duì)于這個(gè)項(xiàng)目,視頻是重要的元素,你一樣就可以看出來,而小文本作為另一個(gè)元素,可以提供額外的信息,并鼓勵(lì)用戶進(jìn)行訂閱或者注冊(cè),不管它在主頁(yè)上的什么位置出現(xiàn)。 6、創(chuàng)建一個(gè)可視元素 文本元素的主要作用是用來閱讀的,這很符合邏輯。 但有時(shí)候,將文本元素作為視覺元素的一部分,是否被閱讀的重要性就不那么重要了(這需要前期的計(jì)劃和大量的討論,所以不要在你突發(fā)奇的時(shí)候就草率的使用這項(xiàng)技巧)。 HTML Burger的網(wǎng)站設(shè)計(jì)中使用了一系列的小文本圖層,將小文本用作描述大標(biāo)題的視覺部分。在每個(gè)“Burger”包裝上都使用了小的文字,以創(chuàng)造出更酷的視覺元素。這是一個(gè)你可能不太常見的設(shè)計(jì)技巧和思路,在這種情況下,它是有影響力的(但這種技術(shù)很難實(shí)現(xiàn);要小心行事)。 總結(jié) 使用微小文本,或者不使用,這可能是一個(gè)艱難的決定。雖然小文本的使用是有爭(zhēng)議的,但對(duì)于小字體的使用還是有適當(dāng)?shù)挠锰幍?。為了確保在你的設(shè)計(jì)中添加有效的小文本元素,你需要給它足夠的空間,使用一個(gè)高度可讀的字體,并使用其他的設(shè)計(jì)元素來對(duì)比或者提示用戶。 后,如果你打算使用微小風(fēng)格的文本內(nèi)容在你的下一個(gè)設(shè)計(jì)項(xiàng)目時(shí),當(dāng)然,這是好事,但是我們也建議不要過多的使用它們。這不是一個(gè)能幫助你把更多的內(nèi)容“塞進(jìn)”你的設(shè)計(jì)的技術(shù),它只在合適的位置,賦予一個(gè)直接的目的性才能發(fā)揮它大的效果。廣州天河區(qū)珠江新城富力盈力大廈北塔2706
020-38013166(網(wǎng)站咨詢專線)
400-001-5281 (售后服務(wù)熱線)
深圳市坂田十二橡樹莊園F1-7棟
Site/ http://www.szciya.com
E-mail/ itciya@vip.163.com
品牌服務(wù)專線:400-001-5281
長(zhǎng)沙市天心區(qū)芙蓉中路三段398號(hào)新時(shí)空大廈5樓
聯(lián)系電話/ (+86 0731)88282200
品牌服務(wù)專線/ 400-966-8830
旗下運(yùn)營(yíng)網(wǎng)站:
Copyright ? 2016 廣州思洋文化傳播有限公司,保留所有權(quán)利。 粵ICP備09033321號(hào)