Web 設(shè)計(jì)巧用留白

時(shí)間：2023-09-26 14:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-26 14:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

Web 設(shè)計(jì)巧用留白：

層級(jí)（Hierarchy）

恰如王室貴族設(shè)有等級(jí)以表尊卑，設(shè)計(jì)師要善用層級(jí)去凸顯關(guān)系。國(guó)王的等級(jí)高過(guò)王子，好比一級(jí)標(biāo)題要在視覺(jué)上蓋過(guò)二級(jí)、三級(jí)標(biāo)題部分。調(diào)整字體大小和樣式當(dāng)然是必要的，還有就是留白，可以用空白空間去劃分不同的段落或小節(jié)。

良好的層級(jí)安排使內(nèi)容更直白地被用戶理解。

這篇文章中，我們會(huì)探討信息層級(jí)如何引導(dǎo)用戶的注意力，以及安排好信息層級(jí)的同時(shí)如何讓 UI 更吸引人。

引導(dǎo)注意力

給頁(yè)面元素間留下更多空白空間，也就意味著你把多余的東西拿掉了。你大可放心使用留白技巧，因?yàn)橐话阌脩舨粫?huì)明顯注意到空白，他們更容易被內(nèi)容吸引。

如果在猶豫多留還是少留時(shí)，選擇前者幾乎能最大程度保證設(shè)計(jì)效果。大多數(shù)網(wǎng)站因?yàn)樘畛淞颂鄡?nèi)容而然用戶不堪重負(fù)，沒(méi)有呼吸的空間。但要注意，前面所說(shuō)的也只是一般規(guī)律，不是什么絕對(duì)正確的教條。我們?cè)?交互設(shè)計(jì)最佳實(shí)踐 中指出過(guò)，多余的留白反而會(huì)弱化頁(yè)面元素的層級(jí)關(guān)系。

在做設(shè)計(jì)時(shí)，要根據(jù)上下文去把握分寸，在一個(gè)設(shè)計(jì)中好的布局照搬照套到另一個(gè)設(shè)計(jì)中未必合適。除了在實(shí)踐中總結(jié)經(jīng)驗(yàn)，還得多逛逛做得好的網(wǎng)站是如何處理的。

Apple iMac

先看蘋果官網(wǎng) iMac 頁(yè)面。一直以來(lái)為設(shè)計(jì)師所追捧的「簡(jiǎn)潔」設(shè)計(jì)哲學(xué)貫穿了蘋果所有的產(chǎn)品設(shè)計(jì)，有興趣的讀者可以翻看官方提供的 iOS 和 OS X 人機(jī)界面設(shè)計(jì)指南。在官網(wǎng)中，這種大膽留白和簡(jiǎn)潔的設(shè)計(jì)風(fēng)格目的很簡(jiǎn)單：強(qiáng)調(diào)商品。

超大號(hào)的標(biāo)題和配圖占據(jù)了頁(yè)面主要空間，其他信息以更小但仍可辨識(shí)的字號(hào)展示。在這里留白的運(yùn)用和恰到好處的行高設(shè)置讓用戶輕松掃過(guò)大段文字，而不用仔細(xì)地盯著看上兩三分鐘。


繼續(xù)下拉頁(yè)面會(huì)注意到，每塊內(nèi)容遵循同一模式，左邊是配圖，那么右邊就是標(biāo)題和大段文字說(shuō)明，每隔一個(gè)調(diào)換一次位置。這種排布方式讓整個(gè)頁(yè)面視覺(jué)上是對(duì)稱的，不會(huì)讓重心往一邊倒（配圖在視覺(jué)上比文字更「重」），這樣還能有效避免視覺(jué)疲勞，讓整個(gè)瀏覽過(guò)程不枯燥。

Wunderlist

再看看奇妙清單的產(chǎn)品官網(wǎng)，導(dǎo)航欄和注冊(cè)引導(dǎo)的關(guān)系處理得很好。注冊(cè)引導(dǎo)、圖文介紹、視頻介紹這部分內(nèi)容聚合在頁(yè)面中間，導(dǎo)航欄上的鏈接則向兩邊擴(kuò)散，就像是輕松地漂浮在上面。和整個(gè)頁(yè)面篇幅相比，導(dǎo)航欄所占比例很小，內(nèi)部鏈接排布緊密。這種處理方式能引導(dǎo)用戶首先開始注冊(cè)并使用產(chǎn)品。

再往下拉，看到一個(gè)功能特性矩陣，每一小塊內(nèi)容由圖標(biāo)、小標(biāo)題、說(shuō)明文字組成。背景的淡灰色與文字產(chǎn)生恰當(dāng)?shù)膶?duì)比，讓用戶可以輕松聚焦。在你聚焦一小塊內(nèi)容的同時(shí)，其他所有內(nèi)容塊會(huì)自然地聯(lián)合起來(lái)產(chǎn)生對(duì)稱性，從而營(yíng)造出一種整體感。

在這里，圖標(biāo)是每個(gè)小塊的點(diǎn)睛之筆，近看獨(dú)立，遠(yuǎn)看渾然一體。其實(shí)，單看圖標(biāo)和小標(biāo)題就能理解每個(gè)功能特性是什么，用戶不用細(xì)讀文字，掃一眼就能獲取整個(gè)功能特性矩陣的大意。