作者最大原文鏈接
如果你常聽到產(chǎn)品設計師和工程師之間的設計QA會話么介，你可能會聽到產(chǎn)品設計師的看法如下：
“你可以在這里和那里增加8個像素嗎？就是說蜕衡，我需要16像素的留白壤短∩枘猓“
在Wayfair，我們很幸運地能與工程師一起工作久脯，同時我們的工程師對設計師的不斷追問特別善解人意纳胧。不過，我相信有些工程師認為我們是“像素狂魔”帘撰。為了公平起見跑慕，我承認我們中的幾個人是這樣。但是相信我摧找，還有讓我們瘋狂的方法核行。
那么，為什么產(chǎn)品設計師對間距這么挑剔呢蹬耘？
間距芝雪，也稱為空白空間，是頁面布局的單個元素之間的空白空間综苔；這些元素可以是復件惩系，圖像，卡片如筛，按鈕堡牡，圖標等的部分。當正確使用時杨刨，空白區(qū)域可以使布局具有視覺清晰度和平衡感晤柄。
把空白想像成呼吸新鮮空氣。正如人類需要空氣呼吸一樣拭嫁，設計需要空白的空間來呼吸可免。是的，這可能聽起來老生常談做粤。但我還是要強調(diào)這一點浇借。
那么Wayfair如何處理白色空間？
正如我之前所說的怕品，有一種師我們瘋狂的方法妇垢。在Wayfair，我們的產(chǎn)品設計團隊遵循嚴格的間距規(guī)則肉康，以確保站點的一致性和易于維護闯估。該規(guī)則嵌入到我們的設計工具包中，這是一組用戶界面設計元素吼和，它是我們所有網(wǎng)站設計的基石涨薪。規(guī)則規(guī)定，每個設計元素之間的間距應該是8像素的倍數(shù)炫乓；就是說間距可以是8,16,24,32,40像素等等刚夺。這一規(guī)則為我們使用空白空間帶來了意向献丑，并在我們的網(wǎng)站體驗中創(chuàng)造了視覺一致性。
留白如何優(yōu)化用戶體驗侠姑？
有助于聚焦
空白空間是一個有助于指導用戶體驗的工具创橄。我們使用空白區(qū)域為我們的用戶創(chuàng)造焦點，吸引他們注意某些元素莽红。頁面上特定元素周圍的留白越大妥畏，該元素的重點越突出。在下面的示例中安吁，通過聚焦保證了CTA按鈕和主要消息的清晰度醉蚁。
不幸的是，有時候這種留白被認為是種奢侈鬼店。這是罕見的馍管，所以當持續(xù)留白時，享受留白薪韩。在典型的電子商務頁面上，產(chǎn)品設計師面臨著平衡多個CTA捌锭，次要鏈接俘陷，圖像，副本以及列表帶來的挑戰(zhàn)观谦。下面的例子展示了我們的產(chǎn)品詳細信息頁面（PDP）拉盾，這個頁面承載了大量的用戶需求。策略性放置的空白空間有助于降低用戶瀏覽此頁面上的視覺噪音豁状，有可能增加轉(zhuǎn)化率捉偏。
改善視覺組織
除了突出重點，留白空間在組織一個頁面的視覺中起著巨大的作用泻红。留白空間對于明確不同關系和不同目的分割起著至關重要夭禽；它也是格式塔原理背后的動力，其中規(guī)定：
彼此接近的對象或形狀似乎形成組谊路。
明確定義頁面的不同部分會增加用戶對網(wǎng)站體驗的信心讹躯；讓我們的用戶在一個混亂的布局中思考，是每個產(chǎn)品設計師想要避免的缠劝。以下示例展示了Wayfair的主頁潮梯，如果留白空間未正確使用，頁面可能會很容易出現(xiàn)壓倒性的惨恭。
增加可讀性
除了定義頁面的組織之外秉馏，留白可以大大提高頁面的可讀性。重要的是要注意復分割線之間的間距和甚至字母之間的間距脱羡，因為深思熟慮的間距讓用戶更容易消化萝究。更多的間距通常更好免都，但是太多可能會導致復制線條斷開連接。關鍵在于找到正確的平衡糊肤。
Medium（是的琴昆，這個網(wǎng)站）在考慮復制設置中的留白空間做得很好业舍。如果您在較大的屏幕上閱讀這篇文章升酣，請查看邊緣空白的巨大空間。Medium知道是什么下面。
留白的常見問題？
1.“留白是在浪費空間绩聘！”
這是一個神話沥割。留白空間不是浪費空間。當留白沒那么必要的時候凿菩，一些股東會要求用內(nèi)容填充這些空間机杜。每人都聽過“少是多”。這適用于任何給定頁面上的內(nèi)容衅谷，較少的視覺噪聲使得更好的用戶體驗椒拗。在Wayfair的結帳流程（見下文），主要CTA之下的留白空間可能很大获黔，但是它可以平衡和支持本頁面上的元素蚀苛。
2.“留白空間將內(nèi)容推入折層中，用戶不會看到這個內(nèi)容玷氏！”
用了留白，用戶會滾動更多的盏触，相信我兴溜。有這個神話，用戶不會總是滾動查看頁面上的所有內(nèi)容耻陕。因此，我們的一些股東要求一個頁面的大部分內(nèi)容都不要折疊膘怕。
用戶已經(jīng)演變并變得更加適應滾動召庞。絕對有些元素更適合折疊岛心，但重要的是不要限制使用留白空間以適應折疊。
結論
每個產(chǎn)品設計師都希望設計出最佳的用戶體驗忘古；考慮到這一點徘禁，留白空間是一個強大的工具，可以從用戶界面的角度幫助實現(xiàn)這一點髓堪。它應該大量整合到設計過程中干旁。
認為你使用的留白太大了回怜？是不是有一個很好的機會玉雾。如果有什么，你可能沒有充分利用。當有疑問時柏蘑，添加更多的留白空間...
