少即是多 怎樣在響應式網(wǎng)站中運用"留白"藝術(shù)？

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

　　什么是留白?

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

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

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

　　重新設置導航菜單

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

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

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

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

　　更加關(guān)注垂直方向的留白

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

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

　　網(wǎng)站上的留白還可以給不同的區塊劃分界限，給用戶(hù)一些喘息的機會(huì )。Mashable的博客就利用負空間做到了這一點(diǎn)。Mashable在電腦上會(huì )顯示為3列：小圖+文本，中圖+文本，大圖+文本，如果在手機上也以這樣的方式呈現的話(huà)，可能已經(jīng)慘不忍睹了。不過(guò)設計師考慮到了手機的豎屏，在不同元素垂直方向留足了空間，讓不同文本區塊之間界限清晰可見(jiàn)，也讓界面看上更加簡(jiǎn)潔。

　　因此，在我們設計響應式網(wǎng)站的留白問(wèn)題時(shí)，記得不要總是從元素的水平方向出發(fā)，也要多考慮不同元素、不同區塊在垂直方向上的間隔、距離，畢竟所有元素在小屏幕上都是傾向于豎直展現的，這樣才能真正發(fā)揮留白在響應式網(wǎng)站中的作用。

　　字體和間距

　　做好響應式網(wǎng)站中的留白還需要注重文本的字體。除了改變字體的大小，我們還可以調整字體的行高、字距、顏色甚至是兩個(gè)文本區塊之間的距離使文本更容易閱讀，畫(huà)面看上去更加和諧。

　　The Next Web網(wǎng)頁(yè)在電腦上顯示時(shí)頁(yè)眉和導航菜單之間留的空白區域比較大，但在移動(dòng)設備上顯示時(shí)，空白區域縮小了(見(jiàn)下圖)，頁(yè)眉TNW文本的字體有所減小，圖片下方文本段落之間的間距有所拉大，這都是TNW根據自身特點(diǎn)合理運用留白的體現。

　　Agra culture這個(gè)網(wǎng)站也是一樣，在電腦上顯示時(shí)每張圖片上的文字是設有懸浮效果的。但由于懸浮效果在手機等設備上無(wú)法顯示，Agra culture在小屏幕上果斷放棄了這一特效，讓文本就直接出現在圖片的正中央。雖然這個(gè)改動(dòng)不大，但是對用戶(hù)來(lái)說(shuō)卻保證了舒適的體驗效果。

　　重新調整圖片

　　響應式設計中經(jīng)常還涉及到一個(gè)大問(wèn)題，那就是圖片。在網(wǎng)站中運用留白的時(shí)候我們也要考慮到圖片怎樣合理放置。由于大部分顯示器都是寬屏的，不少網(wǎng)站使用寬屏的圖片。這也意味著(zhù)在移動(dòng)設備中展示時(shí)我們需要縮小圖片或者重新定義圖片大小?？纯聪旅娴睦踝幽懿荒芙o你一些啟發(fā)吧!

　　UPP Broadgate Park網(wǎng)站在電腦桌面上顯示時(shí)，主頁(yè)面上會(huì )出現幻燈片，而當設備分辨率小于500px，它會(huì )顯示為加長(cháng)的圖片(如下圖)。雖然圖片加長(cháng)了，但設計師在設計時(shí)仍然留意到豎直方向上的空間問(wèn)題，刪掉不必要的元素，讓網(wǎng)站看上去更加簡(jiǎn)潔、清晰。不過(guò)實(shí)現這一點(diǎn)確實(shí)有難度，因為你需要知道圖片的大小以及每張圖片的實(shí)際值，這樣才能恰當的重新定義圖片大小，不過(guò)如果你愿意做出這樣的努力，小飛相信這相對是物有所值的。

　　The Golden Isles又是另一種情況了。網(wǎng)站設計師認為電腦桌面上的幻燈片在移動(dòng)設備上并沒(méi)有很大意義，所以為了網(wǎng)站的清晰明了他們直接將圖片隱藏起來(lái)。與此同時(shí)，將水平的導航菜單以?xún)闪胸Q直排列下來(lái)，填補一定的空間，讓網(wǎng)站不顯空洞無(wú)物。

　　不少設計師認為網(wǎng)頁(yè)空間本來(lái)就有限，認為通過(guò)有限的空間盡可能傳遞更多的內容才是王道。其實(shí)內容越多對用戶(hù)來(lái)說(shuō)并不一定是好事，反而可能會(huì )對用戶(hù)產(chǎn)生干擾。在做網(wǎng)站時(shí)我們應該牢記少即是多的原則，學(xué)會(huì )利用留白給網(wǎng)站帶來(lái)獨特的美感和強大的表現力。趕緊在你的響應式網(wǎng)站中運用留白吧!