留白就像配角，他們的職責是讓明星脫穎而出。

• 在交互設計中，空白或“負空間”是指設計或頁面佈局元素之間的空白，即在網頁中的段落、圖片、按鈕、圖標和其他項目之間的空白。它經常被忽略和忽視。
• 儘管它的名字裡有“白”，但是留白不僅僅是白色。它可以是任何顏色、 紋理、 圖案或甚至背景圖像。

在首屏中使用留白的最佳設計方法

• 事實上，留白在不同需求中概念是不同的。
• 例如，著陸頁上可能有大量的留白，以便將指引按鈕（“下載”或“瞭解更多”等）或其他主要信息突出。

• 另一方面，由於還有很多需要精簡的內容，電商類網站並沒有那麼多可以留白的地方。
• 雖然不會像其他案例中使用地那麼頻繁，但這類網站仍需要留白。

• 不只是Bill Blass這類時尚的電商類網站，像沃爾瑪這種大型電商網站也需要利用留白保持精美，使產品信息更清晰、易讀、吸引人。
• 簡而言之，聯繫上下文我們能夠明白，留白的應用沒有固定的規則。但是有一些小技巧我們可以記住：

1 給頁面分配不多於15個注意點

• 設計師 Paul Boag建議你可以將頁面的注意點限制在15個以內。
• 他說：每當你向頁面裡添加一個元素時，消耗一個關注點。
• 如果屏幕中的一個元素比另一個元素更重要，則需要向它分配格外的注意，使它脫引而出。
• 只提供有限注意點的結果就是：很明顯你不能說所有的東西都要放在頁面上，空白不需要被排除在等式之外。
• 讓我們用MailChimp 網站舉個例子 （讓我告訴你為什麼我個人很喜歡他們的網站！）

• 這是14個用戶關注點在頁面上的放置方式，任何額外新增的元素只應取代較其他次要的東西。
• 這是確保肯定不會在頁面裡塞入太多內容的一種方法。

2 優先考慮易讀性和可讀性

• 在開始設計前先建立一個界面元素庫，它是你的界面片段和元素的合集。這不僅為一個健全的設計系統奠定了基礎，促進了一致性，而且可以告知設計師界面內容的範圍。
• 下一步是創建大致內容框架，用來評估易讀性（如何使用戶能辨別字母和單詞）和可讀性（如何使用戶掃描到內容）對空間的要求。
• 在優化文本內容的段落邊距和行間距時，有兩件事情需要牢記。調整行間距可以大大提高文本正文的易讀性。
• 一般來說，越大的行間距在閱讀時會給用戶提供越好的閱讀體驗，但是行間距太大時會打破頁面的統一，使設計斷開。
• 再次，調整間距只在尋找完美的平衡。

3 打破留白

• 使用對比色、不同字體大小和不對稱的白色空間將額外的樣式添加到設計中。
• 留白是靈活性的設計元素，它會影響用戶對周圍所有元素的感知。

• 當有疑問時，我總是看看其他設計師如何在設計中使用留白
• Awwwards是我個人最喜歡的靈感來源。

4確認留白是否符合要求

• 美觀只是留白的一個方面，更重要的是使主要內容和指引按鈕突出。
• 一個設計是否做到這點，只能通過用戶測試來驗證。
• CanvasFlip是一個可以幫助設計師驗證他們的設計是否達到了預期的效果的工具!對於一個設計師來說，一個具有高交互作用的熱圖顯然是一個A +的成績單：）。

結論

• 留白並不是指一張空白的畫布，它是一個強大的設計工具。