2022-01-16 分類: 網(wǎng)站建設(shè)
正如同我們?cè)谥八^察到的,今年所流行的設(shè)計(jì)趨勢(shì)中絕大多數(shù)的都和字體排版有著密切的關(guān)聯(lián),哪怕到了年底最后一個(gè)月,廣州網(wǎng)站建設(shè)的設(shè)計(jì)師們都愈加傾向于使用漂亮的字體和出彩的排版讓自己的設(shè)計(jì)脫穎而出。
在最近這段時(shí)間新涌現(xiàn)的網(wǎng)頁(yè)設(shè)計(jì)作品當(dāng)中,高度可讀的、視覺突出的排版設(shè)計(jì)是它們共通的特點(diǎn)。當(dāng)他們想要時(shí)髦的視覺設(shè)計(jì)的時(shí)候,依然會(huì)選擇可讀性較高的字體進(jìn)行排版,而真正創(chuàng)造視覺奇觀的,依然得倚靠最新的設(shè)計(jì)技術(shù)本身。
1、只包含文字的首屏
雖然很多網(wǎng)站會(huì)在首屏選擇使用圖片來(lái)吸引用戶,但是使用文本內(nèi)容同樣也是可行的。不過(guò),想要將文本內(nèi)容作為首屏內(nèi)容的主體,設(shè)計(jì)師還要用好留白才行。運(yùn)用這一趨勢(shì)的關(guān)鍵點(diǎn)在于,要為用戶提供有意義的文本內(nèi)容,要讓用戶覺得有價(jià)值。
那么,怎么做到這一點(diǎn)呢?
從關(guān)鍵詞入手。關(guān)鍵詞能夠體現(xiàn)內(nèi)容的目標(biāo)性和價(jià)值主張,能夠告訴用戶你能給他什么,以及為什么你的網(wǎng)站內(nèi)容很重要。
選擇一款簡(jiǎn)單的字體,它最好和正文文本的情緒、風(fēng)格保持一致。
如果文本內(nèi)容較少,那么可以試著選取一些有表現(xiàn)力的字體。
用好留白。在下面的每個(gè)案例當(dāng)中,文本周圍都有足夠的留白確保排版的呼吸感。留白能夠確保用戶在瀏覽的時(shí)候,注意力集中到文本內(nèi)容上。留白能夠很好的平衡文本布局,如果你不想將文本居中排布的話,就像 Design Ups 這個(gè)網(wǎng)站。
使用色彩來(lái)提升你的設(shè)計(jì)的吸引力。明亮的色彩能夠更加吸引用戶參與到設(shè)計(jì)當(dāng)中來(lái)。色彩還能更好地營(yíng)造氛圍,傳遞情緒。
當(dāng)你在設(shè)計(jì)一個(gè)文本內(nèi)容較重的網(wǎng)站的的時(shí)候,不要強(qiáng)行讓文本填充滿屏幕,因?yàn)槟闶遣豢赡軐⑵涮顫M的。借助色彩和色塊來(lái)豐富布局,就像 Less is More 和 Types of Type 這兩個(gè)網(wǎng)站一樣。
2、用白色區(qū)塊承載文本
必須承認(rèn),如今的許多網(wǎng)站在視覺設(shè)計(jì)上已經(jīng)做的很突出了,包含元素極為豐富,加上豐富的響應(yīng)式斷點(diǎn)和大膽的配色,信息量近乎爆炸。也正是因此,有設(shè)計(jì)師開始在大量的元素當(dāng)中開辟出白底的區(qū)塊,用來(lái)承載單純的黑色的文本內(nèi)容。
這種設(shè)計(jì)讓文本內(nèi)容有著較強(qiáng)的可讀性,無(wú)需擔(dān)心復(fù)雜的背景色和變化。聽起來(lái)這種技巧挺偷懶的,甚至有點(diǎn)馬虎,但是它設(shè)計(jì)得當(dāng)?shù)脑?,效果其?shí)是非常出彩的。
白色的區(qū)塊在尺寸上要設(shè)計(jì)得足夠合理,以承載一定量的文本,如果頁(yè)面還要考慮移動(dòng)端的情況的話,這個(gè)區(qū)塊可能需要針對(duì)移動(dòng)端進(jìn)行合理的定制,比如在移動(dòng)端設(shè)備上打開的時(shí)候,文本框內(nèi)的內(nèi)容將會(huì)在圖片下方的區(qū)域單獨(dú)顯示,而非和桌面端上那樣混排。不要試圖在移動(dòng)端屏幕上呈現(xiàn)這樣的文本框,因?yàn)樽罱K很難讓圖片和文本框疊加顯示在同一個(gè)區(qū)域。下面的每個(gè)案例都合理地使用白色區(qū)塊來(lái)承載文本內(nèi)容。
Do Space 這個(gè)頁(yè)面將白色區(qū)域設(shè)置在圖片底部,確保圖片絕大多數(shù)的部分能夠被用戶清晰地看到。白色的區(qū)域和圖片下方的留白連到一起,視覺上兩者產(chǎn)生的關(guān)聯(lián),讓用戶在瀏覽的過(guò)程中下意識(shí)地想去繼續(xù)瀏覽下方的內(nèi)容。
HowIt 這個(gè)網(wǎng)站在設(shè)計(jì)白色的區(qū)塊的時(shí)候,并沒(méi)有采用傳統(tǒng)的矩形,而是將這個(gè)區(qū)域設(shè)計(jì)成了一個(gè)不規(guī)則的圓形。這種風(fēng)格的白色區(qū)塊和整個(gè)背景元素的風(fēng)格基調(diào)是保持一致的,看起來(lái)融入感很強(qiáng),不會(huì)顯得突兀。白色區(qū)塊上的文本并沒(méi)有采用普通的黑色,而是和背景的手繪插畫采用了相同的展示性字體和紫紅色的文本。這使得前景和背景的元素產(chǎn)生了關(guān)聯(lián)。
Macaulay Sinclair 擁有比其他網(wǎng)站更多的文本需要白色的區(qū)塊來(lái)承載。白色區(qū)塊后的背景幾乎沒(méi)有傳遞任何有用的信息。
3、字體剪貼蒙板
文本字體中可以填充各種各樣的東西,并沒(méi)有規(guī)定字體中只能填充單一色彩。許多設(shè)計(jì)師開始在文本字體中填充圖片,營(yíng)造出類似Photoshop 中剪貼蒙板的效果。
這種效果的玩法其實(shí)并不少,它可以是靜態(tài)的也能動(dòng)態(tài)展示。少量的視覺信息透過(guò)字母輪廓呈現(xiàn)出來(lái),這些視覺信息可以圖片,也能是動(dòng)態(tài)的視頻,還可以是在背景固定不動(dòng),隨著滾動(dòng)前景的文字上下移動(dòng),等等等等。
這種設(shè)計(jì)的訣竅在于字體的選取。所選取的字體必須足夠厚重,才能讓其后的圖片信息更多地呈現(xiàn)出來(lái)。筆觸太細(xì)或者太窄的字體,所能提供的信息不足,往往顯得局促而奇怪。
這種設(shè)計(jì)手法還要注意一點(diǎn),就是單詞和字母的數(shù)量要盡可能少,這種情況下,視覺效果其實(shí)是最好的。字母數(shù)盡量控制在10個(gè)以內(nèi),單詞數(shù)不要超過(guò)3個(gè),如果是中文實(shí)際效果會(huì)非常贊。
Danbury 這個(gè)網(wǎng)站在前景使用明亮的色彩,文本中透出的圖片則采用了色彩深沉的照片,構(gòu)成了顯著的對(duì)比。
Fusion Winery 這個(gè)網(wǎng)站沒(méi)有使用靜態(tài)的背景,而是讓背景視頻透過(guò)字體呈現(xiàn)出來(lái)。這種設(shè)計(jì)的優(yōu)秀之處在于它營(yíng)造出了清晰直觀的三個(gè)層次:產(chǎn)品圖下是白底,而視頻透過(guò)白底呈現(xiàn)出來(lái),有靜有動(dòng)。
而 Kaneko 這個(gè)網(wǎng)站的設(shè)計(jì)則略有不同,它使用了難以分辨細(xì)節(jié)的背景,透過(guò)字母你其實(shí)很難分辨其中的細(xì)節(jié)和內(nèi)容。但是,色彩的加入,讓整個(gè)設(shè)計(jì)顯得有趣而活潑,同樣非常吸引人。
結(jié)語(yǔ)
排版和文本始終是設(shè)計(jì)當(dāng)中最關(guān)鍵的組成部分,和它們相關(guān)的設(shè)計(jì)趨勢(shì)能夠流行起來(lái),是一件很自然的事情。另外一方面,它們也影響著圖片、視頻等其他元素在設(shè)計(jì)中所呈現(xiàn)出來(lái)的效果,設(shè)計(jì)和趨勢(shì)的連帶作用,其實(shí)也是不容忽視的。(@優(yōu)設(shè))
文章題目:這3個(gè)設(shè)計(jì)趨勢(shì)是廣州網(wǎng)站建設(shè)設(shè)計(jì)師的最愛
文章位置:http://m.rwnh.cn/news39/142939.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容