網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的幾個(gè)排版設(shè)計(jì)趨勢(shì)

2021-02-24    分類: 網(wǎng)站建設(shè)

一個(gè)網(wǎng)站,用戶點(diǎn)擊進(jìn)來(lái)最想要看到的是什么?當(dāng)然是信息,這也是網(wǎng)站最基本的功能,呈現(xiàn),使得用戶可以閱讀。但有的網(wǎng)站例外,比如工具功能類的135編輯器,主要是提供給用戶做文字排版和圖片排版的功能。今天創(chuàng)新互聯(lián)搜集了一下網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的排版設(shè)計(jì)趨勢(shì),和大家分享一下。

2006年,Oliver Reichenstein 撰寫了文章《網(wǎng)頁(yè)設(shè)計(jì)95%的工作是排版》,這是當(dāng)年最有爭(zhēng)議的文章之一。 Reichenstein 在文章中這么說(shuō)道:“網(wǎng)頁(yè)設(shè)計(jì)不僅僅是挑選并使用精美的字體,更多的是關(guān)于我們?nèi)绾卧谠O(shè)計(jì)中使用它們 ?!?/p>

1. 大膽的首屏排版設(shè)計(jì)

超大的、震撼的、直接的、沒(méi)有戲劇性的首屏文本可能是最近幾年文本最為顯著的用法。首屏中常見(jiàn)的超大的圖片被超大的文本所取代,這些標(biāo)題和主題、品牌或者信息緊密關(guān)聯(lián),通過(guò)超大的尺寸呈現(xiàn)出來(lái)的視覺(jué)效果也不遑多讓。

效果如你所見(jiàn),字體排版成為了網(wǎng)頁(yè)中最醒目的存在。比如 CreativeDoc 的首屏中,六個(gè)白色的字母在黑色的背景中,以一種醒目方式呈現(xiàn)出來(lái),對(duì)比強(qiáng)烈。

所用字體:Dharma Gothic Heavy

而這家歐洲的創(chuàng)意設(shè)計(jì)企業(yè) Soffl 的網(wǎng)站則在網(wǎng)站上使用更為濃縮、狹窄的白色字體,搭配彩色動(dòng)畫元素營(yíng)造出時(shí)尚的感覺(jué)。

所用字體:自定義(Souffl Web)

2. 使用優(yōu)雅的襯線字體

傳統(tǒng)的襯線字體有著優(yōu)雅的特點(diǎn),如今設(shè)計(jì)師越來(lái)越多地在網(wǎng)頁(yè)中使用襯線字體來(lái)創(chuàng)造典雅優(yōu)容的氛圍。

通常,設(shè)計(jì)師會(huì)將網(wǎng)頁(yè)中最重要的部分,比如標(biāo)題或者說(shuō)明,借助流行的襯線字體突出地呈現(xiàn)出來(lái),就像 Calluna 和 Minion 這樣的字體。

在 Cobble Hill 和 Gin Lane 這兩個(gè)網(wǎng)頁(yè)背后,設(shè)計(jì)師就在首屏使用襯線字體來(lái)迎接用戶。

所用字體:Arno Pro 和 Proxima Nova

所用字體:Miller Disp, Lt

3. 直白的純文本

有花哨多樣的視覺(jué)化設(shè)計(jì),自然也有返璞歸真追求自然直白的設(shè)計(jì),在文本排版上,也是如此。

Justin Jackson 的這個(gè)名為 Word 的這個(gè)網(wǎng)站的主要內(nèi)容,是在網(wǎng)頁(yè)上獨(dú)立呈現(xiàn)文本的顯示效果的:

所用字體:瀏覽器默認(rèn)字體

Jackson 在他的網(wǎng)站中寫到:“文本是最網(wǎng)頁(yè)中最強(qiáng)大的工具”,用文本設(shè)計(jì)網(wǎng)頁(yè)本身并不是一件容易的事情,但是做的好了,用戶甚至不會(huì)意識(shí)到圖片的缺失。

總部設(shè)在哥本哈根的設(shè)計(jì)機(jī)構(gòu) B14 就使用了簡(jiǎn)單直白的文本內(nèi)容填滿了主頁(yè),用來(lái)呈現(xiàn)他們的工作內(nèi)容:

所用字體:Maison Neue

一圖雖可勝千言,但是文本對(duì)于信息的控制其實(shí)更加準(zhǔn)確。

Joe Coleman 是一位自由撰稿人,他在自己的網(wǎng)站上僅使用文本來(lái)呈現(xiàn)內(nèi)容。這個(gè)網(wǎng)站的特點(diǎn)是借助交互性元素,以純文本的視覺(jué)設(shè)計(jì)和交互來(lái)吸引用戶。

所用字體:Work Sans

Max Kaplun 的作品集網(wǎng)站中,同樣是使用純文本來(lái)構(gòu)建視覺(jué),不過(guò)他借助最簡(jiǎn)單的字符、字重和色彩變化來(lái)裝飾。

所用字體:自定義

4. 使用等寬字體

等寬字體的功能性很強(qiáng),在文字密集的場(chǎng)合常常會(huì)用到等寬字體,比如代碼,或者文章當(dāng)中。在現(xiàn)在看來(lái),等寬字體本身有著一種復(fù)古的質(zhì)感,如今在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的流行和粗野主義的回歸不無(wú)關(guān)系。

Laurent Desserrey 設(shè)計(jì)了一套令人著迷的作品集網(wǎng)站,網(wǎng)站借助失控的效果和等寬字體創(chuàng)造出粗野的視覺(jué)效果。

使用字體:Space Mono

Run Your Mouth 這個(gè)網(wǎng)站也是同樣使用等寬字體來(lái)創(chuàng)造粗糲的質(zhì)感。

所用字體:Titling Gothic, Space Mono

5. 使用高亮效果來(lái)吸引人

使用高亮效果來(lái)構(gòu)建內(nèi)容的層次結(jié)構(gòu)也是不錯(cuò)的方式,這有助于訪客瀏覽、抓住關(guān)鍵的信息。

Godfrey Dadich 是一個(gè)來(lái)自舊金山的設(shè)計(jì)機(jī)構(gòu),由于首頁(yè)上長(zhǎng)篇大論的內(nèi)容,為了讓用戶抓住重點(diǎn),使用了熒光綠的高亮標(biāo)識(shí)。

所用字體:Noe 和 Atlas

康奈爾大學(xué)的網(wǎng)頁(yè)同樣使用熒光黃色來(lái)高亮關(guān)鍵詞,讓訪客注意到關(guān)鍵的文本。

所用字體:Freight Display + Theinhardt

6. 縱橫交錯(cuò)的標(biāo)題文本

將標(biāo)題或者關(guān)鍵性的文案拆分,在首屏上縱橫交錯(cuò)地排布也是近年來(lái)比較流行的玩法。這種排版方式不僅讓整個(gè)布局有更多留白,而且形式感更加強(qiáng)。

比如下面的這個(gè)網(wǎng)站,它是電影 Take What You Can Carry 的官方網(wǎng)站,電影的名字被拆分開(kāi)單獨(dú)排版:

所用字體: DIN + Courier

而諸如設(shè)計(jì)機(jī)構(gòu) Elegant Seegulls 的網(wǎng)站,甚至使用了垂直滾動(dòng)這樣的實(shí)驗(yàn)性效果:

所用字體:Azo Sans + Capitolium 2

在創(chuàng)意機(jī)構(gòu) Magic People Voodoo People 的網(wǎng)站上,則在四角上使用了水平和垂直的文本來(lái)昭示它的名稱:

7. 充滿實(shí)驗(yàn)性的分散文本

將單詞本身徹底打散成為單個(gè)字母,這種設(shè)計(jì)更為實(shí)驗(yàn)性。這種設(shè)計(jì)在視覺(jué)上有著獨(dú)特的風(fēng)格,不過(guò)在可讀性上相對(duì)而言就比較差了,這也是為什么將這種設(shè)計(jì)趨勢(shì)定義為實(shí)驗(yàn)性的,在具體設(shè)計(jì)的時(shí)候,應(yīng)該仔細(xì)衡量,再做選擇。

The Impossible Is Inevitable 是一個(gè)在莫斯科猶太人博物館所舉辦的展覽,展覽的名字是由浮動(dòng)的字母所構(gòu)建而成,在首頁(yè)上浮動(dòng),需要稍微仔細(xì)分辨才能明白具體是哪幾個(gè)單詞。

分散的字母雖然并不是那么容易分辨,但是它們被細(xì)線貫穿在一起,有視覺(jué)線索,看似脆弱斷斷續(xù)續(xù)卻始終相連,并且充滿了探索感。

Octoplus Group 是一個(gè)通信機(jī)構(gòu),他們的網(wǎng)站首頁(yè)就是借助這些小巧粗獷的字母來(lái)充當(dāng)導(dǎo)航元素。從品牌信息傳達(dá)和故事性的角度上來(lái)看,這種設(shè)計(jì)是非常有趣且有效的。

這些文字排版用于網(wǎng)站,編排得好確實(shí)可以讓進(jìn)來(lái)的用戶眼前一亮,增加瀏覽和閱讀的欲望,使得成單量提高,這才是最主要的目的。因?yàn)槌艘恍﹫D片網(wǎng)站,大多數(shù)網(wǎng)站都是以文字為主,所以文字設(shè)計(jì)時(shí)非常之重要的。

名稱欄目:網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的幾個(gè)排版設(shè)計(jì)趨勢(shì)
地址分享:http://www.bm7419.com/news34/102684.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、微信小程序、云服務(wù)器軟件開(kāi)發(fā)、靜態(tài)網(wǎng)站

廣告

聲明:本網(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)

成都網(wǎng)站建設(shè)公司