由于歐美發(fā)達(dá)國(guó)家互聯(lián)網(wǎng)產(chǎn)品界面都看起來(lái)簡(jiǎn)潔，留白很多，所以使得我國(guó)很多視覺(jué)設(shè)計(jì)師在設(shè)計(jì)界面的時(shí)候都傾向于留白。然而，不假思索的留白真的是正確之選嗎？本文作者將會(huì)說(shuō)明：留白是需要分場(chǎng)景的。

作為一個(gè)產(chǎn)品，我并不是很認(rèn)同當(dāng)今視覺(jué)設(shè)計(jì)界一些潮流，比如不假思索地留白。

留白、減少視覺(jué)壓力幾乎是如今的視覺(jué)設(shè)計(jì)師張口必談的話題。

無(wú)論做的是什么樣的界面，只要有足夠留白，界面里面就被稱之為高大上；而如果界面做得擁擠，就會(huì)被認(rèn)為器小，甚至被稱之為“美工”。

但是我想說(shuō)的是，視覺(jué)設(shè)計(jì)師和美工的區(qū)別不在與此，而在于有沒(méi)有根據(jù)場(chǎng)景區(qū)別化設(shè)計(jì)的能力。

問(wèn)題的來(lái)源

有一些看似簡(jiǎn)單的視覺(jué)問(wèn)題，會(huì)對(duì)產(chǎn)品造成非常大的影響。

我第一次深度意識(shí)到這個(gè)問(wèn)題，是在上一家公司做互聯(lián)網(wǎng)招聘產(chǎn)品的產(chǎn)品經(jīng)理。當(dāng)時(shí)，B端產(chǎn)品剛剛進(jìn)入風(fēng)口。傳統(tǒng)B端產(chǎn)品用戶體驗(yàn)差，界面難看，是一個(gè)很重要的改進(jìn)方向。公司也花了重金聘請(qǐng)高級(jí)視覺(jué)設(shè)計(jì)師。開(kāi)始對(duì)一些界面做升級(jí)。

剛開(kāi)始的時(shí)候，我們也非常贊同專業(yè)的人員做專業(yè)的事情，他們做出來(lái)的界面也非常賞心悅目，其中包括簡(jiǎn)歷詳情頁(yè)。他們采用了大量的留白和圖形化標(biāo)識(shí)，使得界面非常清爽簡(jiǎn)潔，幫助HR看簡(jiǎn)歷的時(shí)候減少視覺(jué)壓力，大幅度提升舒適感。

但是，產(chǎn)品上線之后，情況非常糟糕——HR每日瀏覽的簡(jiǎn)歷數(shù)量下降了近40%。

我們剛開(kāi)始以為只是改版的磨合期，但是數(shù)據(jù)后來(lái)一直維持在低位，并且開(kāi)始有HR陸陸續(xù)續(xù)向客戶經(jīng)理反饋現(xiàn)在看簡(jiǎn)歷的時(shí)候非常不方便。

以前，簡(jiǎn)歷第一屏的信息就足夠豐富了，HR掃一眼就能做出決策，然后繼續(xù)查看“下一份”。但是現(xiàn)在，總是需要上下滾動(dòng)屏幕，操作麻煩，而且思路不連貫。

那么是不是我們內(nèi)容的順序不對(duì)呢？把最重要的放到第一屏不就可以了嗎？

后來(lái)事實(shí)證明，這種區(qū)分主次的C端產(chǎn)品的思路在B端產(chǎn)品這里根本站不住腳。對(duì)于HR來(lái)說(shuō)，除了項(xiàng)目經(jīng)驗(yàn)這項(xiàng)稍微不太重要外，其他的如教育背景、工作年限、工作公司等信息，都非常重要。具體重要性的排名，不同的HR有所不同，且同一個(gè)HR在不同時(shí)期也不同。經(jīng)過(guò)思考和權(quán)衡發(fā)現(xiàn)，最好的解決辦法仍是讓這些項(xiàng)目都在一屏顯示，但是界面會(huì)非常擁擠。

做出綜合決策的時(shí)候，總是希望一眼能掃到所有的信息。后來(lái)，我開(kāi)始不斷的推動(dòng)界面緊湊化改版，尤其是簡(jiǎn)歷界面，數(shù)據(jù)效果和反饋越來(lái)越好。

但是視覺(jué)設(shè)計(jì)師總是抵觸的，因?yàn)榕c他們的認(rèn)知不相符，他們的觀念里仍然認(rèn)為：沒(méi)有足夠留白的視覺(jué)設(shè)計(jì)拿不出手。

除此之外，我還開(kāi)始注意到，B端留白較多的松散界面導(dǎo)致很多的問(wèn)題。比如列表管理頁(yè)，如果列表上下間距大，會(huì)使得批量操作、按時(shí)間找內(nèi)容、翻頁(yè)等操作非常麻煩；列表字段的間距大，會(huì)使得列表中字段太少，展示是信息不充分，總是需要頻繁點(diǎn)詳情頁(yè)查看。

為何留白總被視作無(wú)需置疑的真理？

視覺(jué)留白在視覺(jué)設(shè)計(jì)領(lǐng)域如此被深信不疑，有很重要的一個(gè)原因是歐美發(fā)達(dá)國(guó)家互聯(lián)網(wǎng)產(chǎn)品界面都看起來(lái)簡(jiǎn)潔，留白很多；于是引導(dǎo)的審美潮流就成了這樣的。至于為什么歐美界面留白多，我之前的文章有分析（《為什么歐美國(guó)家的產(chǎn)品界面更簡(jiǎn)潔，你們可能想多了》）

有人說(shuō)留白是因?yàn)橐曈X(jué)負(fù)荷；我個(gè)人是有認(rèn)知心理學(xué)背景的，我可以很負(fù)責(zé)任的說(shuō)，視覺(jué)負(fù)荷這個(gè)詞有被過(guò)度強(qiáng)調(diào)了。有人利用短時(shí)記憶理論“神奇的數(shù)字7”來(lái)說(shuō)明界面上的區(qū)塊不應(yīng)該超過(guò)7個(gè)，但是實(shí)際上，界面中的視覺(jué)信息并不需要存儲(chǔ)在短時(shí)記憶中，所以根本沒(méi)有這樣的短時(shí)記憶限制。

我作為一個(gè)產(chǎn)品，如果你視覺(jué)設(shè)計(jì)師做出來(lái)的界面的數(shù)據(jù)效果比我做的原型扔上去都要差，那么你做這個(gè)界面的意義何在？我最近幾年的工作經(jīng)歷都是做B端以及SAAS產(chǎn)品，碰到視覺(jué)設(shè)計(jì)師不合時(shí)宜的留白導(dǎo)致的問(wèn)題實(shí)在是非常之多。

我并不是反對(duì)留白，只是認(rèn)為要分場(chǎng)景。無(wú)法區(qū)分場(chǎng)景而肆意留白的視覺(jué)設(shè)計(jì)師不是設(shè)計(jì)師，只是更美的美工。

如何識(shí)別場(chǎng)景

我們需要分清楚以下不同的維度：

• 信息管理界面與信息展示界面的不同；
• 主動(dòng)使用與被動(dòng)使用的不同；
• 用戶是否經(jīng)常使用界面，是否熟悉界面；
• B端產(chǎn)品和C端產(chǎn)品的不同。

信息管理界面與信息展示界面的不同

信息管理界面，就是需要用戶進(jìn)行操作的界面，比如增刪查改。

信息管理界面往往需要用戶對(duì)列表項(xiàng)進(jìn)行對(duì)比、識(shí)別，然后做出操作。這種界面，一定要保持緊湊，減少用戶頻繁上下滾動(dòng)界面，否則思路容易被打斷。

信息展示界面，往往是純粹瀏覽的頁(yè)面，所以從上到下滾動(dòng)查看也沒(méi)有什么問(wèn)題，這種情況下可以適當(dāng)多留白。

主動(dòng)使用與被動(dòng)使用的不同

主動(dòng)使用者，要做一件事情時(shí)，是目的明確的且對(duì)做這個(gè)任務(wù)的難度是有預(yù)期的，那么你優(yōu)先要考慮的是效率。

比如說(shuō)電商后臺(tái)發(fā)布一個(gè)產(chǎn)品詳情或招聘網(wǎng)站發(fā)布一個(gè)職位，這些都是字段較多、比較復(fù)雜的表單。有的設(shè)計(jì)師擔(dān)心這么復(fù)雜的一個(gè)表單，會(huì)把用戶嚇跑，于是就加字段間的大留白，減少用戶的視覺(jué)壓力。

但是實(shí)際上用戶感受到的場(chǎng)景與設(shè)計(jì)師是不一樣的，用戶是一個(gè)主動(dòng)使用者，他本身就知道發(fā)布一個(gè)產(chǎn)品信息不是那么簡(jiǎn)單的事情，那么你所能做的最好的事情，就是讓用戶能盡快的看到并填寫(xiě)所有字段，而不是拉長(zhǎng)頁(yè)面高度，增加用戶滾動(dòng)屏幕的操作。而且頁(yè)面拉的太長(zhǎng)，會(huì)導(dǎo)致有些表單上下文之間的聯(lián)系中斷。

被動(dòng)使用者，往往是被一些模糊的場(chǎng)景吸引，然后想了解更多。比如說(shuō)用戶對(duì)你的活動(dòng)感興趣，想要報(bào)名你的活動(dòng)。那么這種情況下，用戶往往是沒(méi)有預(yù)期的，如果你給用戶看到的界面或表單很密集的話，那么確確實(shí)實(shí)會(huì)把用戶嚇跑。這種時(shí)候，需要注意降低界面信息量，多留白。

用戶是否熟悉

所謂的視覺(jué)壓力，往往只會(huì)在初次時(shí)感受明顯，使用過(guò)幾次后，視覺(jué)壓力的副作用就會(huì)急劇下降，甚至被用戶忽略；但是操作的不方便確是實(shí)實(shí)在在的，而且副作用會(huì)隨著使用的熟練程度越來(lái)越明顯。

對(duì)于用戶可能會(huì)經(jīng)常使用的界面，應(yīng)該以效率優(yōu)先，尤其需要珍重界面第一屏的像素，不要隨意留白浪費(fèi)空間；比如上文中提到的HR篩選簡(jiǎn)歷的頁(yè)面。

對(duì)于用戶不太可能經(jīng)常使用的界面，比如看過(guò)一兩次就不會(huì)再看的宣傳頁(yè)，應(yīng)該以視覺(jué)舒適度優(yōu)先；那么適當(dāng)?shù)牧舭拙褪荗K的。

B端產(chǎn)品和C端產(chǎn)品的不同

B端的產(chǎn)品，往往是管理信息界面，且是用戶主動(dòng)使用的有預(yù)期的，也是用戶經(jīng)常使用的，所以B端產(chǎn)品的界面，真的不需要你給他那么多留白。

而C端的產(chǎn)品往往不太一樣，需要時(shí)情況而定。C端界面一般留白會(huì)相對(duì)較多。

比如亞馬遜，C端買家的界面留白就比較多。但是B端賣家的管理界面密集程度也是超過(guò)你想象的。

QQ郵箱的例子

在所有的效率型產(chǎn)品中，我最喜歡的就是QQ郵箱界面。

QQ郵箱雖然起步晚，但是目前是國(guó)內(nèi)最成功的郵箱。

QQ郵箱堪稱是效率型產(chǎn)品的典范。

在很多視覺(jué)設(shè)計(jì)師看來(lái)QQ郵箱界面很糟糕，幾乎完全沒(méi)有留白，密密麻麻全是字。

但是，如果作為郵箱的重度用戶，QQ郵箱的體驗(yàn)是無(wú)與倫比的。QQ郵箱在1080高度的顯示器上，能在一頁(yè)顯示完整個(gè)列表。對(duì)于經(jīng)常要按時(shí)間找郵件的人，非常方便。哪怕在小一點(diǎn)的屏幕上，也只要稍微滾動(dòng)一下鼠標(biāo)滾輪，就能看全。

對(duì)于這種效率型的產(chǎn)品，留白幾乎沒(méi)有任何意義。

QQ郵箱的設(shè)計(jì)，看起來(lái)好像也沒(méi)什么，不就是做得密密麻麻了嗎？但是要在整個(gè)設(shè)計(jì)行業(yè)人云亦云的大潮流之下，大家都說(shuō)界面要大面積留白的情況下，果斷地不隨波逐流，做出一個(gè)真正用戶需要的界面，這才叫真正的設(shè)計(jì)！

反面的例子

比較遺憾的是，有的視覺(jué)設(shè)計(jì)師總是不太接受理性的東西。有的時(shí)候，產(chǎn)品和交互無(wú)論怎么要求界面緊湊，講再多的道理，視覺(jué)設(shè)計(jì)師仍然無(wú)動(dòng)于衷；畢竟有的時(shí)候，人云亦云的力量實(shí)在過(guò)于強(qiáng)大，他們體會(huì)不到用戶真實(shí)操作時(shí)候的感受，仍然把不假思索的留白當(dāng)做真理。

下圖是我們現(xiàn)在做的一個(gè)B端產(chǎn)品的列表管理頁(yè)（為了避免可能的問(wèn)題，界面文字已經(jīng)模糊處理）。一個(gè)管理列表的界面，在1080高度的屏幕下，第一屏居然只能顯示4個(gè)列表項(xiàng)，而在主流的768高度的屏幕下，第一屏只能顯示2個(gè)列表項(xiàng)。這哪是一個(gè)列表管理頁(yè)？我們的產(chǎn)品中的其他某些重要的界面，就有用戶直接提到過(guò)界面太松散，很不方便。這種過(guò)度留白，非常不符合場(chǎng)景。但是視覺(jué)比較強(qiáng)勢(shì)，而我沒(méi)有成功說(shuō)服，我也有責(zé)任，后面只能慢慢改進(jìn)了。

總結(jié)

留白，作為很多視覺(jué)設(shè)計(jì)師不假思索的基本準(zhǔn)則，很多時(shí)候是不對(duì)的，需要根據(jù)具體的場(chǎng)景區(qū)分。

很多時(shí)候減少留白反而能對(duì)整體用戶體驗(yàn)有巨大的提升；效率型產(chǎn)品的視覺(jué)設(shè)計(jì)的思路不應(yīng)該是簡(jiǎn)單的留白，而應(yīng)該是幫助用戶識(shí)別信息，提高操作效率。在這種思路下，視覺(jué)設(shè)計(jì)還有很多要做的。

本文由 @楓葉 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。