如何看待網頁中的留白設計

2022-06-02 分類：網站建設

編者按：許多設計師至今都活在被客戶/甲方/產品所支配的恐懼當中。反復調整的細節和各種反趨勢的需求扼殺著設計師追求好設計的夢想。今天的文章，我們來看看設計師 Rizwan Javaid 是如何解決留白的問題~

“留白太多了。”

從入行開始到現在，我頻繁聽到這樣的反饋，尖利而刺耳。然后我會抱著懷疑的態度重新審視我的設計。接下來的情況想必很多設計師都很熟悉了：用大量并沒有什么意義的裝飾元素，極不情愿地、一點一點地將精心設計的留白給填起來。最初的成就感逐漸消退，靠在椅子上全身不得勁，對于即將出貨的設計稿毫無熱情。生無可戀。

緊接著，還得悉心安撫提出意見的領導/客戶/運營/產品/甲方。

這種感覺很熟悉吧?

Oatmeal Comic 的漫畫“設計師是如何墜入地獄”將網頁設計師最常遭遇的坑爹局面勾勒了出來。“留白太多了”其實只是一個間接的要求，當設計師的這個據點失守，再后退就是地獄和深淵了，因為通常這意味著，后面還有一大堆諸如“我不喜歡藍色”，“我要七彩的LOGO”以及“我覺得這種風格不夠流行，能換個手寫字體嘛?”這樣的問題。這就是一個悲傷的故事，并且這個故事一再上演。

時至今日，我遭遇的針對留白的吐槽，背后基本都隱藏著一大堆別的修改意見。而作為設計師，我們的職責當中有一項特別關鍵：說服這些留白恐懼癥患者，留白是設計中重要的組成部分，也是帶來優秀用戶體驗的基石。

“通常留白被認為是活躍的元素，并非固定不變的背景。”—?Jan Tschichold

留白恐懼癥

意大利出生的著名文學和藝術評論家 Mario Praz 曾經創造過一個拉丁語詞匯，Horror Vacui，意為對留白的恐懼。這個詞是這位批評家對維多利亞時期凌亂冗雜的藝術風格的吐槽，面對著這個追求繁復細節的時代，每一個細小的空間都需要被填充、塞滿，推動這一“設計趨勢”的，難道不是對留白的恐懼么?

Horror Vacui 的典型案例

巴比倫的秋天，Jean Duvet ，1555.

The Fairy Feller’s Master， Richard Dadd ，1855–1864.

OB Log 的表單

Argren.net。這個網站的設計師是Frithjof Arngren。

那么，留白是什么?

概念想必大家都很熟悉。留白的另外一個名字是負空間，它并不一定非得是白色，它也是一種設計元素。留白是設計師手中的重要工具，合理的留白將內容、文本、圖形、圖標和不同的視覺元素分隔開來，說它是空間布局的框架也不為過。

留白有不同的類型。文本的行間距和網格之間的間隙屬于小留白，它讓內容具備了更強的可讀性。而頁面中大面積無內容的區域則是大留白，它們讓視覺更容易向內容聚焦。

留白的重要性：

·提升內容的可讀性

·強調內容

·闡明了其他視覺元素之間的關系

·提升復雜性

留白所構建的空間關系，讓內容的可理解性提高了20%，降低了認知負荷。

如何正確回應“留白太多了”這種問題

客戶：首頁上的留白太多了吧?

你的回復：你網站的用戶打開首頁會尋找特定的信息，如果添加太多非必要的信息，會極大的分散他們的注意力，這些令人分心的元素甚至可能讓他們忘記來這兒干啥。有個比較出名的Hick 定律，其內容指的是，你給用戶提供的內容越多，他們作出決定的時間就越長。

客戶：產品頁面上留白太多了吧?

你的回復：這個頁面的目標是增加產品的銷售。實際上用戶更傾向于低復雜度的信息，他們像要更快地搞明白產品本身的特點，易于理解的內容與圖片能夠讓他們快速了解產品本身的功能和實用性。有個名為 Occam Razor 的規則指出，竟品當中，更加簡單直白的那個更容易被用戶所選擇。所以，使用簡約大氣的布局更容易獲得用戶的青睞。

客戶：控制面板上的留白太多了!

你的回復：控制面板為用戶提供關鍵信息，希望用戶能夠借助這些信息作出正確的決策。關鍵意思是少而精，必不可少，如果額外的信息和非關鍵信息在控制面板上大量的堆砌，會將關鍵的信息給稀釋掉，影響整個決策的。突出重點，降低信噪是控制面板應該具備的基本素質。

客戶：功能介紹頁上的留白是不太多了?

你的回應：簡單清晰地在網頁上介紹產品的功能，本質上是希望能幫用戶更好的了解產品特征。用戶想要找到真正對他們有用的信息，這是主要的需求，也是迫切的需求。根據靈活性-可用性權衡機制，頁面設計需要在產品獲取信息的廣度和深度上達到平衡，也就是說需要在靈活展示和重點突出上作出抉擇與平衡。有針對性地給用戶提供關鍵信息，謹防提供過多內容導致用戶信息過載。