編輯導(dǎo)語：恐懼留白（Horror Vacui），來自于拉丁語和希臘語，意思是用細(xì)節(jié)填充整個(gè)空間或藝術(shù)品的表面。本文作者基于快手面試題“聊聊卡片、留白、分割線的區(qū)別”，為我們談一談為什么UI中存在「恐懼留白」現(xiàn)象。

前幾期聊到的費(fèi)茨定律和希克定律 ，都是偏交互的話題，而今天我們要講講更側(cè)重于視覺方面的「恐懼留白」（也有「空白恐懼」的叫法）。

視覺藝術(shù)這一塊，一向是飽含玄學(xué)，恒古至今都是仁者見仁智者見智的話題。所以這一期我們聊輕松一點(diǎn)，更多是提出個(gè)人見解，開放的觀點(diǎn)。你有任何其他的見解，歡迎交流。

我人生第一次看到「恐懼留白」的時(shí)候，覺得這個(gè)詞很酷，因?yàn)槲野选翱謶帧碑?dāng)成了形容詞…以為是一種高端的留白手法（打擾了…）。但其實(shí)這里的“恐懼”就是動(dòng)詞的“恐懼”，沒錯(cuò)，就像“深?？謶帧?、“密集恐懼”一樣，“空白恐懼”指的就是對(duì)留白的一種厭惡情緒，嚴(yán)格來說是隸屬心理學(xué)科的詞匯。

「恐懼留白」在家裝、服裝、平面設(shè)計(jì)中也常常被提及，甚至衍生出其獨(dú)有的視覺風(fēng)格。“恐懼留白風(fēng)”就是在視覺中極盡全力地用細(xì)節(jié)填充所有空間，是一種極繁風(fēng)格（但它是一種有序的混亂，別誤以為你鬼畫桃符就1秒掌握這個(gè)風(fēng)格的精髓~）。

但我在這里主要講它在UI&UE方向的應(yīng)用，關(guān)于它的起源、在其他領(lǐng)域的運(yùn)用我就不去贅述了，網(wǎng)絡(luò)上也查得到很多。你可能會(huì)想：在UI設(shè)計(jì)中，怎么有人對(duì)會(huì)留白產(chǎn)生恐懼或厭惡情緒呢？emm…想想你的甲方，想想你的老板，這么說確實(shí)是有。

但你有沒有想過：你的甲方/老板有著“恐懼留白”的心理，是否是單純?cè)从谄鋫€(gè)人視覺喜好上對(duì)留白的厭惡？這是我今天想要探索的問題。

一、從快手的面試題說起

為什么講到「恐懼留白」，得從耍家的社群里一位朋友分享的面試題說起。這位朋友前不久去參加了快手的UI崗面試，分享面經(jīng)的時(shí)候，說面試官問了這樣一道題：聊聊卡片、留白、分割線的區(qū)別。

雖然留白和卡片在設(shè)計(jì)中的應(yīng)用場(chǎng)景有很多，但在此提到這個(gè)問題，將兩者和分割線做比較，想必一定是想聽聽面試者對(duì)這三者在視覺分割上的理解。

我先分析一下我對(duì)三者的理解：從可視化界面誕生以來，在相當(dāng)長的一段時(shí)間里，分隔線在“區(qū)分信息區(qū)塊”方面一直擁有著重要地位，幫助信息區(qū)塊與層級(jí)清晰地被區(qū)分，可以讓內(nèi)容更加易讀。

但是設(shè)計(jì)趨勢(shì)在不斷變化。從2014年左右“卡片式設(shè)計(jì)”風(fēng)靡，再到2019年左右“去線化設(shè)計(jì)”盛行，設(shè)計(jì)師們逐漸發(fā)現(xiàn)，分隔線原來只是眾多區(qū)分信息的方案中的其中一個(gè)。

從歷史的進(jìn)程上看，視覺分割上有著“分割線-卡片-留白（去線化）”的演變順序，我個(gè)人認(rèn)為很大一部分原因是因?yàn)槭謾C(jī)屏幕越來越大、越來越長。iPhone 從 3:2 的屏幕到后來 16:9 ，甚至安卓方面有向 18:9 演變的趨勢(shì)。

設(shè)計(jì)師在縱向范圍內(nèi)能發(fā)揮的空間越來越多，用戶在一屏內(nèi)能看到的縱向內(nèi)容也越來越多。更多產(chǎn)品設(shè)計(jì)者希望給用戶關(guān)注內(nèi)容提供更優(yōu)質(zhì)的體驗(yàn)，所以與其說去分割線，不如說是去線條、去陰影、去各類增加視覺負(fù)擔(dān)元素，因此大留白、去線化成為了一個(gè)設(shè)計(jì)趨勢(shì)。

從 Google 和 iOS 兩大主流移動(dòng)端視覺規(guī)范制定公司的產(chǎn)品中我們可以看到，其原生系統(tǒng)應(yīng)用設(shè)計(jì)采用越來越多圓角、卡片、大留白，而分隔線則越來越少。UI的趨勢(shì)是朝著越來越柔和、越來越輕薄、視覺干擾元素也越來越少的方向而去的。

綜上所述，我對(duì)這道題的答案，應(yīng)該會(huì)是這樣：

• 分割線在區(qū)分信息區(qū)塊與層級(jí)的作用上是一把利刃，能立竿見影起到視覺分割的作用，并且可以有效提高縱向空間利用率，但濫用分割線則會(huì)給用戶造成視覺干擾和負(fù)擔(dān)；
• 卡片能起到分割作用是因它常常被作為容器使用，具有把不同區(qū)塊信息聚攏化的功能?？ㄆ€是一種擬真式設(shè)計(jì)，能夠很自然給用戶一種可觸控、可交互的意識(shí)提示。但縱向展示的卡片容器，相較于分割線，很容易損耗縱向空間的利用率；
• 留白（去線化）我認(rèn)為是當(dāng)下的設(shè)計(jì)風(fēng)向，去線化設(shè)計(jì)可以減少頁面內(nèi)多余的視覺元素對(duì)用戶產(chǎn)生的干擾，讓用戶更加聚焦于內(nèi)容本身，對(duì)于輕量、年輕化的產(chǎn)品，去線化、大留白更易塑造其品牌調(diào)性。其缺點(diǎn)是不適用于內(nèi)容較繁雜、用戶群體較廣的界面和產(chǎn)品。

二、為什么UI中存在「恐懼留白」現(xiàn)象？

之所以從一道面試題談起，是為了從我對(duì)這個(gè)問題的回答，引出我對(duì)“甲方/上級(jí)恐懼留白時(shí)候，他們到底在恐懼什么”的理解。從我前面對(duì)留白弊端的看法中，我總結(jié)了三個(gè)引發(fā)“恐懼留白”的可能點(diǎn)：

• 產(chǎn)品調(diào)性
• 信息結(jié)構(gòu)
• 空間利用率

1. 第一層：產(chǎn)品調(diào)性

我前面說到，采用去線化、大留白設(shè)計(jì)，目前來說還是一種偏年輕、時(shí)尚的設(shè)計(jì)風(fēng)向，普及化不高。我大致尋找了一些市場(chǎng)中采用去線化設(shè)計(jì)的產(chǎn)品。

以上產(chǎn)品主要用戶群體普遍偏年輕化（我后面搬用的其他示例還會(huì)印證這一點(diǎn)），且對(duì)品牌傳遞的調(diào)性、理念較為重視。

所以對(duì)于用戶群體較廣，觸達(dá)下沉用戶較多的頁面或產(chǎn)品，大留白可能從產(chǎn)品調(diào)性方面就已經(jīng)不太適合了。即：如果你的上級(jí)或產(chǎn)品用戶本身是偏向于保守派，對(duì)流行視覺風(fēng)格不太敏感，get不到去線化設(shè)計(jì)的美感，請(qǐng)直接打消留白風(fēng)格的念頭。

2. 第二層：信息結(jié)構(gòu)

我們來看同一個(gè)公司的兩個(gè)產(chǎn)品，新浪旗下的微博和綠洲。

可能有朋友對(duì)綠洲不太熟悉，簡(jiǎn)單來說，在我看來微博和綠洲對(duì)(mó)標(biāo)(fǎng)的國外產(chǎn)品就是 Twitter 和 Instagram。

那就很好理解了，微博側(cè)重于資訊，對(duì)于資訊的可玩性很豐富，feed流里包含文字、圖片、視頻、投票等多種形式，內(nèi)容信息結(jié)構(gòu)較為復(fù)雜多變、沒有規(guī)律，如果采用去線化設(shè)計(jì)，沒有明確的信息分割，視覺會(huì)非常雜亂。

而綠洲更側(cè)重于生活化內(nèi)容，更小眾，受眾群更垂直。并且內(nèi)容以標(biāo)準(zhǔn)的圖文方式分享，讓feed流中的信息結(jié)構(gòu)具有規(guī)律性。所以即使去除分割線，也很容易以親密性原則構(gòu)建出內(nèi)容的分割點(diǎn)。

再回到二者的產(chǎn)品調(diào)性上，綠洲的用戶群更小眾、更垂直、更年輕，會(huì)使用圖文社區(qū)產(chǎn)品的用戶，本身對(duì)視覺類元素就富含更強(qiáng)的包容性。所以綠洲更適合這樣的去線化視覺風(fēng)格。

所以當(dāng)產(chǎn)品或頁面內(nèi)容較繁雜，信息結(jié)構(gòu)沒有規(guī)律時(shí)，去線化是存在讓視覺展示更加雜亂的風(fēng)險(xiǎn)的。

3. 第三層：空間利用率

自省了產(chǎn)品調(diào)性、規(guī)劃了信息結(jié)構(gòu)之后，如果都沒有什么大問題，那么最后一層需要考慮的就是空間利用率了。沒有了分割線和聚攏信息的卡片，使用留白也能夠使信息區(qū)塊被區(qū)分開來，是利用了人們大腦對(duì)信息親密性的處理。那就要求關(guān)聯(lián)信息足夠近，無關(guān)信息足夠遠(yuǎn)。

舉個(gè)例子：百度網(wǎng)盤里有一處列表設(shè)計(jì)用留白間距作為分隔，但因?yàn)橛H密性的模糊，導(dǎo)致我第一次看到這個(gè)列表時(shí)，產(chǎn)生過疑惑。

所以采用去線化設(shè)計(jì)，其實(shí)也考驗(yàn)設(shè)計(jì)師兩個(gè)技術(shù)點(diǎn)：

1. 設(shè)計(jì)師對(duì)留白節(jié)奏的把控，如何利用親密性原則，來保證其高效的可讀性；
2. 保證了留白節(jié)奏之后，又如何在閱讀節(jié)奏和空間利用率之間，尋求平衡。

如果你正在著手的頁面或產(chǎn)品，對(duì)內(nèi)容（如：水平電商類產(chǎn)品）或商業(yè)信息（如：廣告資訊）露出要求較高，那就要從空間利用率的角度，來思考采用留白視覺是否合適了。

三、總結(jié)

從前面三層分析，我覺得應(yīng)該能夠解釋“甲方/上級(jí)恐懼留白時(shí)候，他們到底在恐懼什么”的問題了?？偨Y(jié)下來，他們可能就是想：

• 留白風(fēng)格是否親民（?：“我的用戶接受得了嗎”）；
• 信息是否清晰（?：“沒有明確的視覺分割讓內(nèi)容看起來有點(diǎn)亂”）；
• 頁面利用率是否達(dá)標(biāo)（?：“用戶看到這里都已經(jīng)第x屏了，不合適吧”）。

當(dāng)然你在確定設(shè)計(jì)風(fēng)格前期，也可以用這三層進(jìn)行分析，層層遞進(jìn)。應(yīng)該對(duì)你會(huì)有幫助。用幾個(gè)小案例來描述「恐懼留白」可能格局小了?，畢竟「恐懼留白」能夠衍生出一種視覺風(fēng)格，一定是它具有自己的精髓，我在這兒寥寥幾句，又怎能詳細(xì)闡述呢。

不論你能不能接受這種極繁的風(fēng)格，抑或現(xiàn)在越來越多產(chǎn)品走向去線化、簡(jiǎn)約的風(fēng)格，趨勢(shì)都不會(huì)以個(gè)人的喜好而偏移，它是反映在一段時(shí)期內(nèi)時(shí)代審美和用戶喜好的變化。

想想喬幫主當(dāng)初在發(fā)布iOS7，帶來扁平化風(fēng)潮時(shí)，承受了多少罵名。但如今…真香！

#專欄作家#

UCD耍家，公眾號(hào)：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

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

題圖來自Unsplash，基于CC0協(xié)議