【編按】留白的存在,就像是人與人對話間自然的呼吸流動,它關係著整段對話中的氛圍,同時也影響著彼此間氣氛的傳遞,可以說是不容忽略的要素與關鍵!

在設計中這項元素同樣不容小覷,今天要和大家分享的便是「留白」之於你我常欣賞的「網頁視覺」設計的關聯,看看習慣於瀏覽網頁的我們,有否注意到這影響於使用者多停留一刻的重要關鍵吧!

文章來源/ 應酷設計
部分語句及字彙經 MYDESY 編輯潤飾修整

留白,藝術設計中需要遵循的重要視覺準則之一。而在網頁設計中使用「留白」的元素,將使畫面擁有呼吸的空間感。下面和大家分享幾招關於網頁設計「留白」要點。

空白不代表無用

一些人可能認為頁面上的空白越少越好,而盡可能的放上多一點的文字、圖片等信息,或使整體版面縮小呈現,其實不然,頁面上元素越多越容易混亂視覺,讓人找不到正確的閱讀順序(視覺流動性)。所以頁面需要充分的留白,當然過多的留白也不好,需要在其中找到一個平衡點。

一般來講留白過多比留白過少要好一些,因此讚設計時多調整,嘗試看看哪一種呈現比較舒服。

區分清晰的層次

不同的留白可以區分出不同的版塊以及同一版塊中的不同層次。留白能夠增加或降低元素的易見性。元素周圍留白越多,容易顯得越醒目突出!

Michael Wong 網站的「About」頁面,焦點就是標題文本「Hi there」。因為它的字號最大,周邊留白最多,所以第一眼看到的就是它。

導航條上的幾個引導文本也很突出,雖然字號不大,但是文本間隙較大,文本和背景顏色設置也對比明顯,使得它能夠清晰呈現。

再來看 Tuts+ Network 網站,它的首頁文本字號有的極大,有的極小,呈現出層次對比鮮明的效果。

控製文本可讀性

標題字號要最大,標題下的文本要緊跟著標題以示與標題有關聯。段落間要有間距,否則文本容易顯得冗長難讀。而頁面底部則要適當地留白,使畫面平衡。

GOOD Magazine 網站對字號和文字留白的使用很讚。因為它是以文章為主的網站,所以其文本很突出,字體不是一般的大,文本的行間距也夠,另文本色與背景色有鮮明的對比。

Inky 網站的首頁文本層次運用相當出色。標題文字都夠大,然而往下拉發現有些段落文本字號很小,似乎影響影到了文本的閱讀,其實加強文字塊與塊之間的區分,能夠增強各區的整體性。當然這是基於這些文本屬於不那麼重要的輔助性信息部分。

平衡頁面佈局

若要設計出一個平衡的佈局需要有敏銳的眼光。

如 Si Digital 網站,其標題、底部和中間文本區域的具體留白方法都不一樣。總的來說字體很相似,每個區域四周都有充分的留白,使其顯得寬敞開放。

Checkout App 網站也類似。每個區塊用空白區分的很開,看起來比較寬鬆舒適。

空白若運用得當時,網頁佈局也會相當均衡,使人不容易注意到留白的存在,而空白運用不當時,頁面佈局就會給人感覺不均衡,此時便需要加以調整了。

小結

可以試著把留白當做睡眠和空氣,兩者是生活中不可或缺的元素,但也毋需把留白視為是必須遵守的規則,不如把它當作那可愛的設計幫手吧!

誠摯邀請你成為好朋友-->
        

留下你的看法: