網(wǎng)頁文字排版應(yīng)該怎么布局?教你玩出新花樣
一個網(wǎng)站,用戶點擊進來最想要看到的是什么?當然是信息,這也是網(wǎng)站最基本的功能,呈現(xiàn),使得用戶可以閱讀。今天我們搜集了一下網(wǎng)頁設(shè)計領(lǐng)域的排版設(shè)計趨勢,和大家分享一下。
一個網(wǎng)站,用戶點擊進來最想要看到的是什么?當然是信息,這也是網(wǎng)站最基本的功能,呈現(xiàn),使得用戶可以閱讀。但有的網(wǎng)站例外,比如工具功能類的135編輯器,主要是提供給用戶做文字排版和圖片排版的功能。今天我們搜集了一下網(wǎng)頁設(shè)計領(lǐng)域的排版設(shè)計趨勢,和大家分享一下。
2006年,Oliver Reichenstein 撰寫了文章《網(wǎng)頁設(shè)計95%的工作是排版》,這是當年最有爭議的文章之一。 Reichenstein 在文章中這么說道:“網(wǎng)頁設(shè)計不僅僅是挑選并使用精美的字體,更多的是關(guān)于我們?nèi)绾卧谠O(shè)計中使用它們 ?!?/p>
1. 大膽的首屏排版設(shè)計
超大的、震撼的、直接的、沒有戲劇性的首屏文本可能是最近幾年文本最為顯著的用法。首屏中常見的超大的圖片被超大的文本所取代,這些標題和主題、品牌或者信息緊密關(guān)聯(lián),通過超大的尺寸呈現(xiàn)出來的視覺效果也不遑多讓。
效果如你所見,字體排版成為了網(wǎng)頁中最醒目的存在。比如 CreativeDoc 的首屏中,六個白色的字母在黑色的背景中,以一種醒目方式呈現(xiàn)出來,對比強烈。
所用字體:Dharma Gothic Heavy
而這家歐洲的創(chuàng)意設(shè)計企業(yè) Soffl 的網(wǎng)站則在網(wǎng)站上使用更為濃縮、狹窄的白色字體,搭配彩色動畫元素營造出時尚的感覺。
所用字體:自定義(Souffl Web)
2. 使用優(yōu)雅的襯線字體
傳統(tǒng)的襯線字體有著優(yōu)雅的特點,如今設(shè)計師越來越多地在網(wǎng)頁中使用襯線字體來創(chuàng)造典雅優(yōu)容的氛圍。
通常,設(shè)計師會將網(wǎng)頁中最重要的部分,比如標題或者說明,借助流行的襯線字體突出地呈現(xiàn)出來,就像 Calluna 和 Minion 這樣的字體。
在 Cobble Hill 和 Gin Lane 這兩個網(wǎng)頁背后,設(shè)計師就在首屏使用襯線字體來迎接用戶。
所用字體:Arno Pro 和 Proxima Nova
所用字體:Miller Disp, Lt
3. 直白的純文本
有花哨多樣的視覺化設(shè)計,自然也有返璞歸真追求自然直白的設(shè)計,在文本排版上,也是如此。
Justin Jackson 的這個名為 Word 的這個網(wǎng)站的主要內(nèi)容,是在網(wǎng)頁上獨立呈現(xiàn)文本的顯示效果的:
所用字體:瀏覽器默認字體
Jackson 在他的網(wǎng)站中寫到:“文本是最網(wǎng)頁中最強大的工具”,用文本設(shè)計網(wǎng)頁本身并不是一件容易的事情,但是做的好了,用戶甚至不會意識到圖片的缺失。
總部設(shè)在哥本哈根的設(shè)計機構(gòu) B14 就使用了簡單直白的文本內(nèi)容填滿了主頁,用來呈現(xiàn)他們的工作內(nèi)容:
所用字體:Maison Neue
一圖雖可勝千言,但是文本對于信息的控制其實更加準確。
Joe Coleman 是一位自由撰稿人,他在自己的網(wǎng)站上僅使用文本來呈現(xiàn)內(nèi)容。這個網(wǎng)站的特點是借助交互性元素,以純文本的視覺設(shè)計和交互來吸引用戶。
所用字體:Work Sans
Max Kaplun 的作品集網(wǎng)站中,同樣是使用純文本來構(gòu)建視覺,不過他借助最簡單的字符、字重和色彩變化來裝飾。
所用字體:自定義
4. 使用等寬字體
等寬字體的功能性很強,在文字密集的場合常常會用到等寬字體,比如代碼,或者文章當中。在現(xiàn)在看來,等寬字體本身有著一種復古的質(zhì)感,如今在網(wǎng)頁設(shè)計領(lǐng)域的流行和粗野主義的回歸不無關(guān)系。
Laurent Desserrey 設(shè)計了一套令人著迷的作品集網(wǎng)站,網(wǎng)站借助失控的效果和等寬字體創(chuàng)造出粗野的視覺效果。
使用字體:Space Mono
Run Your Mouth 這個網(wǎng)站也是同樣使用等寬字體來創(chuàng)造粗糲的質(zhì)感。
所用字體:Titling Gothic, Space Mono
5. 使用高亮效果來吸引人
使用高亮效果來構(gòu)建內(nèi)容的層次結(jié)構(gòu)也是不錯的方式,這有助于訪客瀏覽、抓住關(guān)鍵的信息。
Godfrey Dadich 是一個來自舊金山的設(shè)計機構(gòu),由于首頁上長篇大論的內(nèi)容,為了讓用戶抓住重點,使用了熒光綠的高亮標識。
所用字體:Noe 和 Atlas
康奈爾大學的網(wǎng)頁同樣使用熒光黃色來高亮關(guān)鍵詞,讓訪客注意到關(guān)鍵的文本。
所用字體:Freight Display + Theinhardt
6. 縱橫交錯的標題文本
將標題或者關(guān)鍵性的文案拆分,在首屏上縱橫交錯地排布也是近年來比較流行的玩法。這種排版方式不僅讓整個布局有更多留白,而且形式感更加強。
比如下面的這個網(wǎng)站,它是電影 Take What You Can Carry 的官方網(wǎng)站,電影的名字被拆分開單獨排版:
所用字體: DIN + Courier
而諸如設(shè)計機構(gòu) Elegant Seegulls 的網(wǎng)站,甚至使用了垂直滾動這樣的實驗性效果:
所用字體:Azo Sans + Capitolium 2
在創(chuàng)意機構(gòu) Magic People Voodoo People 的網(wǎng)站上,則在四角上使用了水平和垂直的文本來昭示它的名稱:
7. 充滿實驗性的分散文本
將單詞本身徹底打散成為單個字母,這種設(shè)計更為實驗性。這種設(shè)計在視覺上有著獨特的風格,不過在可讀性上相對而言就比較差了,這也是為什么將這種設(shè)計趨勢定義為實驗性的,在具體設(shè)計的時候,應(yīng)該仔細衡量,再做選擇。
The Impossible Is Inevitable 是一個在莫斯科猶太人博物館所舉辦的展覽,展覽的名字是由浮動的字母所構(gòu)建而成,在首頁上浮動,需要稍微仔細分辨才能明白具體是哪幾個單詞。
分散的字母雖然并不是那么容易分辨,但是它們被細線貫穿在一起,有視覺線索,看似脆弱斷斷續(xù)續(xù)卻始終相連,并且充滿了探索感。
Octoplus Group 是一個通信機構(gòu),他們的網(wǎng)站首頁就是借助這些小巧粗獷的字母來充當導航元素。從品牌信息傳達和故事性的角度上來看,這種設(shè)計是非常有趣且有效的。
這些文字排版用于網(wǎng)站,編排得好確實可以讓進來的用戶眼前一亮,增加瀏覽和閱讀的欲望,使得成單量提高,這才是最主要的目的。因為除了一些圖片網(wǎng)站,大多數(shù)網(wǎng)站都是以文字為主,所以文字排版設(shè)計時非常之重要的。
立即登錄
- 2023霜降節(jié)氣海報合集,給你專屬秋天的靈感!
- 寒露節(jié)氣免費手機海報模板分享
- 2023中秋節(jié)精美海報大放送,尊的都很好看!
- 不看會后悔系列!2023國慶節(jié)精美海報模板分享!