由於歐美髮達國家互聯網產品界面都看起來簡潔，留白很多，所以使得我國很多視覺設計師在設計界面的時候都傾向於留白。然而，不假思索的留白真的是正確之選嗎？本文作者將會說明：留白是需要分場景的。
作為一個產品，我並不是很認同當今視覺設計界一些潮流，比如不假思索地留白。
留白、減少視覺壓力幾乎是如今的視覺設計師張口必談的話題。
無論做的是什麼樣的界面，只要有足夠留白，界面裡面就被稱之為高大上；而如果界面做得擁擠，就會被認為器小，甚至被稱之為“美工”。
但是我想說的是，視覺設計師和美工的區別不在與此，而在於有沒有根據場景區別化設計的能力。
問題的來源
有一些看似簡單的視覺問題，會對產品造成非常大的影響。
我第一次深度意識到這個問題，是在上一家公司做互聯網招聘產品的產品經理。當時，B端產品剛剛進入風口。傳統B端產品用戶體驗差，界面難看，是一個很重要的改進方向。公司也花了重金聘請高級視覺設計師。開始對一些界面做升級。
剛開始的時候，我們也非常贊同專業的人員做專業的事情，他們做出來的界面也非常賞心悅目，其中包括簡歷詳情頁。他們採用了大量的留白和圖形化標識，使得界面非常清爽簡潔，幫助HR看簡歷的時候減少視覺壓力，大幅度提升舒適感。
但是，產品上線之後，情況非常糟糕——HR每日瀏覽的簡歷數量下降了近40%。
我們剛開始以為只是改版的磨合期，但是數據後來一直維持在低位，並且開始有HR陸陸續續向客戶經理反饋現在看簡歷的時候非常不方便。
以前，簡歷第一屏的信息就足夠豐富了，HR掃一眼就能做出決策，然後繼續查看“下一份”。但是現在，總是需要上下滾動屏幕，操作麻煩，而且思路不連貫。
那麼是不是我們內容的順序不對呢？把最重要的放到第一屏不就可以了嗎？
後來事實證明，這種區分主次的C端產品的思路在B端產品這裡根本站不住腳。對於HR來說，除了項目經驗這項稍微不太重要外，其他的如教育背景、工作年限、工作公司等信息，都非常重要。具體重要性的排名，不同的HR有所不同，且同一個HR在不同時期也不同。經過思考和權衡發現，最好的解決辦法仍是讓這些項目都在一屏顯示，但是界面會非常擁擠。
做出綜合決策的時候，總是希望一眼能掃到所有的信息。後來，我開始不斷的推動界面緊湊化改版，尤其是簡歷界面，數據效果和反饋越來越好。
但是視覺設計師總是牴觸的，因為與他們的認知不相符，他們的觀念裡仍然認為：沒有足夠留白的視覺設計拿不出手。
除此之外，我還開始注意到，B端留白較多的鬆散界面導致很多的問題。比如列表管理頁，如果列表上下間距大，會使得批量操作、按時間找內容、翻頁等操作非常麻煩；列表字段的間距大，會使得列表中字段太少，展示是信息不充分，總是需要頻繁點詳情頁查看。
為何留白總被視作無需置疑的真理？
視覺留白在視覺設計領域如此被深信不疑，有很重要的一個原因是歐美髮達國家互聯網產品界面都看起來簡潔，留白很多；於是引導的審美潮流就成了這樣的。至於為什麼歐美界面留白多，我之前的文章有分析（《為什麼歐美國家的產品界面更簡潔，你們可能想多了》）
有人說留白是因為視覺負荷；我個人是有認知心理學背景的，我可以很負責任的說，視覺負荷這個詞有被過度強調了。有人利用短時記憶理論“神奇的數字7”來說明界面上的區塊不應該超過7個，但是實際上，界面中的視覺信息並不需要存儲在短時記憶中，所以根本沒有這樣的短時記憶限制。
我作為一個產品，如果你視覺設計師做出來的界面的數據效果比我做的原型扔上去都要差，那麼你做這個界面的意義何在？我最近幾年的工作經歷都是做B端以及SAAS產品，碰到視覺設計師不合時宜的留白導致的問題實在是非常之多。
我並不是反對留白，只是認為要分場景。無法區分場景而肆意留白的視覺設計師不是設計師，只是更美的美工。
如何識別場景
我們需要分清楚以下不同的維度：
- 信息管理界面與信息展示界面的不同；
- 主動使用與被動使用的不同；
- 用戶是否經常使用界面，是否熟悉界面；
- B端產品和C端產品的不同。
信息管理界面與信息展示界面的不同
信息管理界面，就是需要用戶進行操作的界面，比如增刪查改。
信息管理界面往往需要用戶對列表項進行對比、識別，然後做出操作。這種界面，一定要保持緊湊，減少用戶頻繁上下滾動界面，否則思路容易被打斷。
信息展示界面，往往是純粹瀏覽的頁面，所以從上到下滾動查看也沒有什麼問題，這種情況下可以適當多留白。
主動使用與被動使用的不同
主動使用者，要做一件事情時，是目的明確的且對做這個任務的難度是有預期的，那麼你優先要考慮的是效率。
比如說電商後臺發佈一個產品詳情或招聘網站發佈一個職位，這些都是字段較多、比較複雜的表單。有的設計師擔心這麼複雜的一個表單，會把用戶嚇跑，於是就加字段間的大留白，減少用戶的視覺壓力。
但是實際上用戶感受到的場景與設計師是不一樣的，用戶是一個主動使用者，他本身就知道發佈一個產品信息不是那麼簡單的事情，那麼你所能做的最好的事情，就是讓用戶能儘快的看到並填寫所有字段，而不是拉長頁面高度，增加用戶滾動屏幕的操作。而且頁面拉的太長，會導致有些表單上下文之間的聯繫中斷。
被動使用者，往往是被一些模糊的場景吸引，然後想了解更多。比如說用戶對你的活動感興趣，想要報名你的活動。那麼這種情況下，用戶往往是沒有預期的，如果你給用戶看到的界面或表單很密集的話，那麼確確實實會把用戶嚇跑。這種時候，需要注意降低界面信息量，多留白。
用戶是否熟悉
所謂的視覺壓力，往往只會在初次時感受明顯，使用過幾次後，視覺壓力的副作用就會急劇下降，甚至被用戶忽略；但是操作的不方便確是實實在在的，而且副作用會隨著使用的熟練程度越來越明顯。
對於用戶可能會經常使用的界面，應該以效率優先，尤其需要珍重界面第一屏的像素，不要隨意留白浪費空間；比如上文中提到的HR篩選簡歷的頁面。
對於用戶不太可能經常使用的界面，比如看過一兩次就不會再看的宣傳頁，應該以視覺舒適度優先；那麼適當的留白就是OK的。
B端產品和C端產品的不同
B端的產品，往往是管理信息界面，且是用戶主動使用的有預期的，也是用戶經常使用的，所以B端產品的界面，真的不需要你給他那麼多留白。
而C端的產品往往不太一樣，需要時情況而定。C端界面一般留白會相對較多。
比如亞馬遜，C端買家的界面留白就比較多。但是B端賣家的管理界面密集程度也是超過你想象的。
QQ郵箱的例子
在所有的效率型產品中，我最喜歡的就是QQ郵箱界面。
QQ郵箱雖然起步晚，但是目前是國內最成功的郵箱。
QQ郵箱堪稱是效率型產品的典範。
在很多視覺設計師看來QQ郵箱界面很糟糕，幾乎完全沒有留白，密密麻麻全是字。
但是，如果作為郵箱的重度用戶，QQ郵箱的體驗是無與倫比的。QQ郵箱在1080高度的顯示器上，能在一頁顯示完整個列表。對於經常要按時間找郵件的人，非常方便。哪怕在小一點的屏幕上，也只要稍微滾動一下鼠標滾輪，就能看全。
對於這種效率型的產品，留白幾乎沒有任何意義。
QQ郵箱的設計，看起來好像也沒什麼，不就是做得密密麻麻了嗎？但是要在整個設計行業人云亦云的大潮流之下，大家都說界面要大面積留白的情況下，果斷地不隨波逐流，做出一個真正用戶需要的界面，這才叫真正的設計！
反面的例子
比較遺憾的是，有的視覺設計師總是不太接受理性的東西。有的時候，產品和交互無論怎麼要求界面緊湊，講再多的道理，視覺設計師仍然無動於衷；畢竟有的時候，人云亦云的力量實在過於強大，他們體會不到用戶真實操作時候的感受，仍然把不假思索的留白當做真理。
下圖是我們現在做的一個B端產品的列表管理頁（為了避免可能的問題，界面文字已經模糊處理）。一個管理列表的界面，在1080高度的屏幕下，第一屏居然只能顯示4個列表項，而在主流的768高度的屏幕下，第一屏只能顯示2個列表項。這哪是一個列表管理頁？我們的產品中的其他某些重要的界面，就有用戶直接提到過界面太鬆散，很不方便。這種過度留白，非常不符合場景。但是視覺比較強勢，而我沒有成功說服，我也有責任，後面只能慢慢改進了。
總結
留白，作為很多視覺設計師不假思索的基本準則，很多時候是不對的，需要根據具體的場景區分。
很多時候減少留白反而能對整體用戶體驗有巨大的提升；效率型產品的視覺設計的思路不應該是簡單的留白，而應該是幫助用戶識別信息，提高操作效率。在這種思路下，視覺設計還有很多要做的。
題圖來自Unsplash，基於CC0協議。
閱讀更多 人人都是產品經理 的文章
