留白是網(wǎng)站設計中一門重要的工具，它能給網(wǎng)站帶來很多益處。恰當?shù)牧舭卓梢杂行怀鼍W(wǎng)站的主題，傳遞核心理念，吸引訪客的注意力，能夠簡化畫面，使各種元素的呈現(xiàn)更有層次、更加清晰，提高網(wǎng)站內(nèi)容的可讀性和可用性，還能增加網(wǎng)站的質(zhì)感，樹立獨特的形象。留白通常意味著在頁面的不同區(qū)塊之間找到一個平衡點，在網(wǎng)站中運用好留白并不容易，但在響應式布局中用好留白難度就更上一層樓了。這是因為響應式網(wǎng)站通常需要設置不同的斷點適應電腦、平板、手機等多種設備，頁面上的留白必須確保在不同的設備上都能給用戶提供友好的瀏覽體驗。不過不用擔心，小飛今天就是來送福利的，給大家介紹一下什么是留白，以及怎樣在響應式網(wǎng)頁設計中留白。

什么是留白?

留白最早是中國藝術作品創(chuàng)作中常用的一種手法，一些藝術大師比如畫家等往往是留白的高手。在他們看來，留白有很高的審美價值，能夠給觀眾留下想象的空間，做到"以無勝有"、"此時無聲勝有聲"。在網(wǎng)站中使用留白也能產(chǎn)生相似的作用。網(wǎng)站中的留白，又稱負空間，是指合理安排各種設計元素的空白空間，達到頁面布局干凈、精致的效果。但是，很多人經(jīng)常會走進一個誤區(qū)，認為留白就是將網(wǎng)站的某塊區(qū)域設置成白色。留白的"白"并不是指顏色的"白"，而是指的是空白的"白"，代表的是一種無裝飾、無額外元素的狀態(tài)(下圖灰色的區(qū)域也是一種留白)。它的表現(xiàn)形式多樣，圖片、圖表、外邊距、列甚至是文字之間的空間都是留白的一種。

如何在響應式網(wǎng)站中留白?

響應式網(wǎng)站最大的一個特征就是在適應電腦屏幕的同時在手機等小屏幕上呈現(xiàn)良好，網(wǎng)站上留白是否恰當也要看它是否能夠滿足不同設備的需求，主要還是針對手機而言，以下幾點建議也是基于這一點展開的。

重新設置導航菜單

導航菜單是做網(wǎng)站時首先會遇到的一個設計難點，但很少有設計師會將導航菜單與留白結(jié)合在一起。事實上，導航菜單處也應該注意留白問題。這是因為如果導航菜單處沒有足夠的留白空間，網(wǎng)站在小屏幕上進行顯示時，極有可能會出現(xiàn)菜單欄斷行(特別是在水平導航菜單的情況下)，視覺體驗較差的效果，另外，移動用戶在點擊菜單項時也容易出現(xiàn)點擊錯誤的情況，會影響了用戶的操作體驗。

如何做好導航菜單的留白?如果導航菜單欄上的選項太多，而它們確實又是不可獲取的，我們可以使用隱藏式菜單，比如漢堡圖標，給網(wǎng)站留足空間。不過在使用隱藏式菜單之前，我們可以給導航菜單做一些設置，讓它在不同的設備上有以最適合的方式展現(xiàn)，下面小飛將通過兩個栗子來具體分析如何使用。

就FLA這個網(wǎng)站而言，如果在電腦桌面上顯示時，它會以上圖這種側(cè)面的導航菜單形式出現(xiàn)，而在小屏幕設備上展現(xiàn)時，左側(cè)的導航菜單會隱藏到漢堡圖標中，給用戶充足的空間。除此以外，你可以看見左側(cè)的菜單選項之間是有一定距離的，這是設計師特意添加的，更方便用戶在小屏幕設備上進行點擊等手勢操作。

相對FLA的網(wǎng)站，Dorigati在導航菜單上的設置要更復雜一點。當用戶通過電腦等大屏幕進行瀏覽時，導航菜單會水平排列在網(wǎng)站上;如果屏幕再小一點，導航菜單會以兩行呈現(xiàn)在用戶面前(如上圖)，有點柵格系統(tǒng)的意味;而當網(wǎng)站需要適應960px的斷點時，導航菜單的布局會從水平變成垂直的，出現(xiàn)在網(wǎng)站的側(cè)面，Logo也會相應的改變位置;如果斷點再小一點，導航菜單就會隱藏到漢堡圖標中，出現(xiàn)在頁面的上方。這種方法聽上去比較繁瑣，但是它確實是比較實用的一個解決方案，可以讓網(wǎng)站在確保恰當?shù)牧舭椎耐瑫r給不同設備的用戶提供自然、友好的瀏覽體驗。

更加關注垂直方向的留白

過去在設計針對電腦桌面的網(wǎng)站時，我們常常會注意網(wǎng)站上不同元素在水平方向上的間距。但當我們開始安排響應式網(wǎng)站的留白時，我們應該將更多的注意力放在元素垂直方面上的距離。這是因為手機屏幕常常是豎直的。如果不注意元素在垂直方向的間距，會影響各種元素在手機等小屏幕上的顯示，影響視覺效果的呈現(xiàn)。另外，垂直方向空白區(qū)域或留白的多少從某種程度上也決定著網(wǎng)站在手機等移動設備上的加載速度。下面還是讓栗子來證明吧!

下圖是Jisc網(wǎng)站在手機屏幕上的顯示，看上去比較舒服，這都歸功于網(wǎng)站設計師在字體、圖片等元素之間留足了一定的空間。Jisc網(wǎng)站在電腦桌面呈現(xiàn)時會有很多水平導向的區(qū)塊，其實下圖中的Shared services、sector deals是并列關系，在電腦屏幕上是以水平方向呈現(xiàn)的，但設計師并沒有只關注水平方向的間距，同時也考慮到了網(wǎng)站在小屏幕上垂直呈現(xiàn)的習慣，讓網(wǎng)站更清晰、可讀性更高。