網頁設計排版:你要知道的事情

網站最基本的功能是呈現訊息,讓用戶可以閱讀。

字體的展示和排版自然也是網頁設計師工作的重要內容之一。

2006年,Oliver Reichenstein 撰寫了文章《網頁設計95%的工作是排版》,這是當年最有爭議的文章之一。

Reichenstein 在文章中這麼說道:「網頁設計不僅僅是挑選並使用精美的字體,更多的是關於我們如何在設計中使用它們 。」

1. 大膽的Banner排版設計

超大的網頁設計、震撼的、直接的、沒有戲劇性的首屏文本可能是最近幾年文本最為顯著的用法。

Banner中常見的超大的圖片被超大的文本所取代,這些標題和主題、品牌或者訊息緊密關聯,通過超大的尺寸呈現出來的視覺效果也不遑多讓。

效果如你所見,字體排版成為了網頁中最醒目的存在。比如 CreativeDoc 的Banner中,六個白色的字母在黑色的背景中,以一種醒目方式呈現出來,對比強烈。

所用字體:Dharma Gothic Heavy

而這家歐洲的創意設計企業 Soffl 的網站則在網站上使用更為濃縮、狹窄的白色字體,搭配彩色動畫元素營造出時尚的感覺,網頁視覺上不經讓人想深入其看。

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

2. 使用優雅的襯線字體

傳統的襯線字體有著優雅的特點,如今設計師越來越多地在網頁中使用襯線字體來創造典雅優容的氛圍。

通常,設計師會將網頁設計最重要的部分,比如標題或者說明,借助流行的襯線字體突出地呈現出來,就像 Calluna 和 Minion 這樣的字體。

Cobble HillGin Lane 這兩個網頁背後,設計師就在首屏使用襯線字體來迎接用戶。

所用字體:Arno Pro 和 Proxima Nova

所用字體:Miller Disp, Lt

3. 直白的純文本

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

Justin Jackson 的這個名為 Word 的這個網站的主要內容,是在網頁上獨立呈現文本的顯示效果的:

所用字體:瀏覽器默認字體

Jackson 在他的網站中寫到:「文本是最網頁中最強大的工具」,用文本設計網頁本身並不是一件容易的事情,但是做的好了,用戶甚至不會意識到圖片的缺失。

總部設在哥本哈根的設計機構 B14 就使用了簡單直白的文本內容填滿了主頁,用來呈現他們的工作內容:

所用字體:Maison Neue

一圖雖可勝千言,但是文本對於訊息的控制其實更加準確。

Joe Coleman 是一位自由撰稿人,他在自己的網站上僅使用文本來呈現內容。這個網站的特點是借助交互性元素,以純文本的視覺設計和交互來吸引用戶。

所用字體:Work Sans

Max Kaplun 的作品集網站中,同樣是使用純文本來構建視覺,不過他借助最簡單的字元、字重和色彩變化來裝飾。

所用字體:自定義

4. 使用等寬字體

等寬字體的功能性很強,在文字密集的場合常常會用到等寬字體,比如代碼,或者文章當中。在現在看來,等寬字體本身有著一種復古的質感,如今在網頁設計領域的流行和粗野主義的回歸不無關係。

Laurent Desserrey 設計了一套令人著迷的作品集網站,網站借助失控的效果和等寬字體創造出粗野的視覺效果。

使用字體:Space Mono

Run Your Mouth 這個網站也是同樣使用等寬字體來創造粗糲的質感。

所用字體:Titling Gothic, Space Mono

5. 使用高亮效果來吸引人

使用高亮效果來構建內容的層次結構也是不錯的方式,這有助於訪客瀏覽、抓住關鍵的訊息。

Godfrey Dadich 是一個來自舊金山的設計機構,由於首頁上長篇大論的內容,為了讓用戶抓住重點,使用了熒光綠的高亮標識。

所用字體:Noe 和 Atlas

康奈爾大學的網頁同樣使用熒光黃色來高亮關鍵詞,讓訪客注意到關鍵的文本。

所用字體:Freight Display + Theinhardt

6. 縱橫交錯的標題文本

將標題或者關鍵性的文案拆分,在首屏上縱橫交錯地排布也是近年來比較流行的玩法。這種排版方式不僅讓整個布局有更多留白,而且形式感更加強。

比如下面的這個網站,它是電影 Take What You Can Carry 的官方網站,電影的名字被拆分開單獨排版:

所用字體: DIN + Courier

而諸如設計機構 Elegant Seegulls 的網站,甚至使用了垂直滾動這樣的實驗性效果:

所用字體:Azo Sans + Capitolium 2

在創意機構 Magic People Voodoo People 的網站上,則在四角上使用了水平和垂直的文本來昭示它的名稱:

7. 充滿實驗性的分散文本

將單詞本身徹底打散成為單個字母,這種設計更為實驗性。這種設計在視覺上有著獨特的風格,不過在可讀性上相對而言就比較差了,這也是為什麼將這種設計趨勢定義為實驗性的,在具體設計的時候,應該仔細衡量,再做選擇。

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

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

Octoplus Group 是一個通信機構,他們的網站首頁就是借助這些小巧粗獷的字母來充當導航元素。從品牌訊息傳達和故事性的角度上來看,這種設計是非常有趣且有效的。

8.圖片是影片衝擊

網頁設計方格堆疊排列最重要的作用之一就是美化圖片或影片。

這項設計方法,既流行於網站或者應用的設計,同時也廣泛應用於圖片處理。

為了充分利用方形堆疊式排版於圖像或影片,你要特別注意文字的位置。

詞不應遮擋形象的重要組成部分,搭配和諧,表現清楚明確。

顏色的搭配同樣相當重要。文本和背景必須對比鮮明,易於區分。這樣才能提高可讀性。

這就是為什麼大多數設計師選擇在圖片上放置白色或者黑的的文本,這樣更容易建立對比度和避免文字之間的衝突。

9.主導藝術

方格堆疊排版中的反方格並不永遠是設計中最耀眼的那一部分,有時它僅僅是個視覺元素。

要使其成為頁面中主導元素的關鍵有兩點:大量的留白和排版內部的視覺元素。

方格本身可能有一種或多種顏色,內部填充圖片,文本或者連接。

無論你想使用哪個”絕招“。

方格都能使文本或內部其他內容脫穎而出,使視覺呈現更加流暢。

別一下子就想做個大工程,一步一步來。

打個比方,你可以吧方格想像成一個色塊,在黑色的背景上,就需要將它表現的像白色突出。

在你工作之前,先制定一個指南或許會事半功倍。

10.用於社交媒介

之所以這麼頻繁的看到這種排版方式,是因為方格這種形狀常用於設計社交媒介中的各種圖標按鈕或者連接,這點以Instagram的卡片式界面圖像為例就可以看出。

由於這種現象,設計師想到了由於圖片具有高度共享性所以圖片上的文字也必然具有相同特性。

縱覽你的社交媒介平台,如果不採用這種展示方式,你恐怕很難瀏覽很深去了解。

更重要的是,它提供了一個機會,以可視化的方式向人們展示了一條訊息。

這給了用戶更多的空間去代入他們自身的共鳴,並有助於在視覺上提請注意主要消息。

5個成功的建議

現在你已經更加深入的了解網頁設計的排版或者你甚至已經完全掌握了其中精髓。

使用網格,這樣會幫你更了解整個界面的屬性和間距等細節該調整。
確保文本正確縮放。

堆積排版通常需要多種尺寸進行組合,確保每個文本以正確的尺寸被表現出來。
注意斷行和斷句,用戶需要能理解你在說什麼(所以內容盡量保持簡潔)
混搭兩種字體也要記得保持和諧。
不要把文本或者其他元素擠在形狀的邊緣,你可以在排版的時候注意使用不同的長短句或者提前建立一定的文本路線。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

以下幾點請你深思一下

給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化