【編按】留白的存在,就像是人與人對話間自然的呼吸流動,它關係著整段對話中的氛圍,同時也影響著彼此間氣氛的傳遞,可以說是不容忽略的要素與關鍵!
在設計中這項元素同樣不容小覷,今天要和大家分享的便是「留白」之於你我常欣賞的「網頁視覺」設計的關聯,看看習慣於瀏覽網頁的我們,有否注意到這影響於使用者多停留一刻的重要關鍵吧!
文章來源/ 應酷設計
部分語句及字彙經 MYDESY 編輯潤飾修整
留白,藝術設計中需要遵循的重要視覺準則之一。而在網頁設計中使用「留白」的元素,將使畫面擁有呼吸的空間感。下面和大家分享幾招關於網頁設計「留白」要點。
空白不代表無用
一些人可能認為頁面上的空白越少越好,而盡可能的放上多一點的文字、圖片等信息,或使整體版面縮小呈現,其實不然,頁面上元素越多越容易混亂視覺,讓人找不到正確的閱讀順序(視覺流動性)。所以頁面需要充分的留白,當然過多的留白也不好,需要在其中找到一個平衡點。
一般來講留白過多比留白過少要好一些,因此讚設計時多調整,嘗試看看哪一種呈現比較舒服。
區分清晰的層次
不同的留白可以區分出不同的版塊以及同一版塊中的不同層次。留白能夠增加或降低元素的易見性。元素周圍留白越多,容易顯得越醒目突出!
Michael Wong 網站的「About」頁面,焦點就是標題文本「Hi there」。因為它的字號最大,周邊留白最多,所以第一眼看到的就是它。
導航條上的幾個引導文本也很突出,雖然字號不大,但是文本間隙較大,文本和背景顏色設置也對比明顯,使得它能夠清晰呈現。
再來看 Tuts+ Network 網站,它的首頁文本字號有的極大,有的極小,呈現出層次對比鮮明的效果。
控製文本可讀性
標題字號要最大,標題下的文本要緊跟著標題以示與標題有關聯。段落間要有間距,否則文本容易顯得冗長難讀。而頁面底部則要適當地留白,使畫面平衡。
GOOD Magazine 網站對字號和文字留白的使用很讚。因為它是以文章為主的網站,所以其文本很突出,字體不是一般的大,文本的行間距也夠,另文本色與背景色有鮮明的對比。
Inky 網站的首頁文本層次運用相當出色。標題文字都夠大,然而往下拉發現有些段落文本字號很小,似乎影響影到了文本的閱讀,其實加強文字塊與塊之間的區分,能夠增強各區的整體性。當然這是基於這些文本屬於不那麼重要的輔助性信息部分。
平衡頁面佈局
若要設計出一個平衡的佈局需要有敏銳的眼光。
如 Si Digital 網站,其標題、底部和中間文本區域的具體留白方法都不一樣。總的來說字體很相似,每個區域四周都有充分的留白,使其顯得寬敞開放。
Checkout App 網站也類似。每個區塊用空白區分的很開,看起來比較寬鬆舒適。
空白若運用得當時,網頁佈局也會相當均衡,使人不容易注意到留白的存在,而空白運用不當時,頁面佈局就會給人感覺不均衡,此時便需要加以調整了。
小結
可以試著把留白當做睡眠和空氣,兩者是生活中不可或缺的元素,但也毋需把留白視為是必須遵守的規則,不如把它當作那可愛的設計幫手吧!
留下你的看法: