響應(yīng)式網(wǎng)站建設(shè)如何合理運(yùn)用“留白”藝術(shù)？
留白是網(wǎng)站設(shè)計中一門重要的工具，它能給網(wǎng)站帶來很多益處。恰當(dāng)?shù)牧舭卓梢杂行怀鼍W(wǎng)站的主題，傳遞核心理念，吸引訪客的注意力，能夠簡化畫面，使各種元素的呈現(xiàn)更有層次、更加清晰，提高網(wǎng)站內(nèi)容的可讀性和可用性，還能增加網(wǎng)站的質(zhì)感，樹立獨(dú)特的形象。留白通常意味著在頁面的不同區(qū)塊之間找到一個平衡點(diǎn)，在網(wǎng)站中運(yùn)用好留白并不容易，在響應(yīng)式布局中用好留白難度就更上一層樓了。這是因?yàn)轫憫?yīng)式網(wǎng)站通常需要設(shè)置不同的斷點(diǎn)適應(yīng)電腦、平板、手機(jī)等多種設(shè)備，頁面上的留白必須確保在不同的設(shè)備上都能給用戶提供友好的瀏覽體驗(yàn)。不過不用擔(dān)心，肥貓今天就是來送福利的，給大家介紹一下什么是留白，以及怎樣在響應(yīng)式網(wǎng)頁設(shè)計中留白。
什么是留白？
留白最早是中國藝術(shù)作品創(chuàng)作中常用的一種手法，一些藝術(shù)大師比如畫家等往往是留白的高手。在他們看來，留白有很高的審美價值，能夠給觀眾留下想象的空間，做到"以無勝有"、"此時無聲勝有聲"。在網(wǎng)站中使用留白也能產(chǎn)生相似的作用。網(wǎng)站中的留白，又稱負(fù)空間，是指合理安排各種設(shè)計元素的空白空間，達(dá)到頁面布局干凈、精致的效果。但是，很多人經(jīng)常會走進(jìn)一個誤區(qū)，認(rèn)為留白就是將網(wǎng)站的某塊區(qū)域設(shè)置成白色。留白的"白"并不是指顏色的"白"，而是指的是空白的"白"，代表的是一種無裝飾、無額外元素的狀態(tài)(下圖灰色的區(qū)域也是一種留白)。它的表現(xiàn)形式多樣，圖片、圖表、外邊距、列甚至是文字之間的空間都是留白的一種。
如何在響應(yīng)式網(wǎng)站中留白？
響應(yīng)式網(wǎng)站最大的一個特征就是在適應(yīng)電腦屏幕的同時在手機(jī)等小屏幕上呈現(xiàn)良好，網(wǎng)站上留白是否恰當(dāng)也要看它是否能夠滿足不同設(shè)備的需求，主要還是針對手機(jī)而言，以下幾點(diǎn)建議也是基于這一點(diǎn)展開的。
重新設(shè)置導(dǎo)航菜單
導(dǎo)航菜單是做網(wǎng)站時首先會遇到的一個設(shè)計難點(diǎn)，但很少有設(shè)計師會將導(dǎo)航菜單與留白結(jié)合在一起。事實(shí)上，導(dǎo)航菜單處也應(yīng)該注意留白問題。這是因?yàn)槿绻麑?dǎo)航菜單處沒有足夠的留白空間，網(wǎng)站在小屏幕上進(jìn)行顯示時，極有可能會出現(xiàn)菜單欄斷行(特別是在水平導(dǎo)航菜單的情況下)，視覺體驗(yàn)較差的效果，另外，移動用戶在點(diǎn)擊菜單項(xiàng)時也容易出現(xiàn)點(diǎn)擊錯誤的情況，會影響了用戶的操作體驗(yàn)。
如何做好導(dǎo)航菜單的留白？如果導(dǎo)航菜單欄上的選項(xiàng)太多，而它們確實(shí)又是不可獲取的，我們可以使用隱藏式菜單，比如漢堡圖標(biāo)，給網(wǎng)站留足空間。不過在使用隱藏式菜單之前，我們可以給導(dǎo)航菜單做一些設(shè)置，讓它在不同的設(shè)備上有以最適合的方式展現(xiàn)，下面肥貓將通過兩個栗子來具體分析如何使用。
就FLA這個網(wǎng)站而言，如果在電腦桌面上顯示時，它會以上圖這種側(cè)面的導(dǎo)航菜單形式出現(xiàn)，而在小屏幕設(shè)備上展現(xiàn)時，左側(cè)的導(dǎo)航菜單會隱藏到漢堡圖標(biāo)中，給用戶充足的空間。除此以外，你可以看見左側(cè)的菜單選項(xiàng)之間是有一定距離的，這是設(shè)計師特意添加的，更方便用戶在小屏幕設(shè)備上進(jìn)行點(diǎn)擊等手勢操作。
相對FLA的網(wǎng)站，Dorigati在導(dǎo)航菜單上的設(shè)置要更復(fù)雜一點(diǎn)。當(dāng)用戶通過電腦等大屏幕進(jìn)行瀏覽時，導(dǎo)航菜單會水平排列在網(wǎng)站上;如果屏幕再小一點(diǎn)，導(dǎo)航菜單會以兩行呈現(xiàn)在用戶面前(如上圖)，有點(diǎn)柵格系統(tǒng)的意味;而當(dāng)網(wǎng)站需要適應(yīng)960px的斷點(diǎn)時，導(dǎo)航菜單的布局會從水平變成垂直的，出現(xiàn)在網(wǎng)站的側(cè)面，Logo也會相應(yīng)的改變位置;如果斷點(diǎn)再小一點(diǎn)，導(dǎo)航菜單就會隱藏到漢堡圖標(biāo)中，出現(xiàn)在頁面的上方。這種方法聽上去比較繁瑣，但是它確實(shí)是比較實(shí)用的一個解決方案，可以讓網(wǎng)站在確保恰當(dāng)?shù)牧舭椎耐瑫r給不同設(shè)備的用戶提供自然、友好的瀏覽體驗(yàn)。
更加關(guān)注垂直方向的留白
過去在設(shè)計針對電腦桌面的網(wǎng)站時，我們常常會注意網(wǎng)站上不同元素在水平方向上的間距。但當(dāng)我們開始安排響應(yīng)式網(wǎng)站的留白時，我們應(yīng)該將更多的注意力放在元素垂直方面上的距離。這是因?yàn)槭謾C(jī)屏幕常常是豎直的。如果不注意元素在垂直方向的間距，會影響各種元素在手機(jī)等小屏幕上的顯示，影響視覺效果的呈現(xiàn)。另外，垂直方向空白區(qū)域或留白的多少從某種程度上也決定著網(wǎng)站在手機(jī)等移動設(shè)備上的加載速度。下面還是讓栗子來證明吧！
下圖是Jisc網(wǎng)站在手機(jī)屏幕上的顯示，看上去比較舒服，這都?xì)w功于網(wǎng)站設(shè)計師在字體、圖片等元素之間留足了一定的空間。Jisc網(wǎng)站在電腦桌面呈現(xiàn)時會有很多水平導(dǎo)向的區(qū)塊，其實(shí)下圖中的Sharedservices、sectordeals是并列關(guān)系，在電腦屏幕上是以水平方向呈現(xiàn)的，但設(shè)計師并沒有只關(guān)注水平方向的間距，同時也考慮到了網(wǎng)站在小屏幕上垂直呈現(xiàn)的習(xí)慣，讓網(wǎng)站更清晰、可讀性更高。
網(wǎng)站上的留白還可以給不同的區(qū)塊劃分界限，給用戶一些喘息的機(jī)會。Mashable的博客就利用負(fù)空間做到了這一點(diǎn)。Mashable在電腦上會顯示為3列：小圖+文本，中圖+文本，大圖+文本，如果在手機(jī)上也以這樣的方式呈現(xiàn)的話，可能已經(jīng)慘不忍睹了。不過設(shè)計師考慮到了手機(jī)的豎屏，在不同元素垂直方向留足了空間，讓不同文本區(qū)塊之間界限清晰可見，也讓界面看上更加簡潔。
因此，在我們設(shè)計響應(yīng)式網(wǎng)站的留白問題時，記得不要總是從元素的水平方向出發(fā)，也要多考慮不同元素、不同區(qū)塊在垂直方向上的間隔、距離，畢竟所有元素在小屏幕上都是傾向于豎直展現(xiàn)的，這樣才能真正發(fā)揮留白在響應(yīng)式網(wǎng)站中的作用。
字體和間距
做好響應(yīng)式網(wǎng)站中的留白還需要注重文本的字體。除了改變字體的大小，我們還可以調(diào)整字體的行高、字距、顏色甚至是兩個文本區(qū)塊之間的距離使文本更容易閱讀，畫面看上去更加和諧。
TheNextWeb網(wǎng)頁在電腦上顯示時頁眉和導(dǎo)航菜單之間留的空白區(qū)域比較大，但在移動設(shè)備上顯示時，空白區(qū)域縮小了(見下圖)，頁眉TNW文本的字體有所減小，圖片下方文本段落之間的間距有所拉大，這都是TNW根據(jù)自身特點(diǎn)合理運(yùn)用留白的體現(xiàn)。
Agraculture這個網(wǎng)站也是一樣，在電腦上顯示時每張圖片上的文字是設(shè)有懸浮效果的。但由于懸浮效果在手機(jī)等設(shè)備上無法顯示，Agraculture在小屏幕上果斷放棄了這一特效，讓文本就直接出現(xiàn)在圖片的正中央。雖然這個改動不大，但是對用戶來說卻保證了舒適的體驗(yàn)效果。
重新調(diào)整圖片
響應(yīng)式設(shè)計中經(jīng)常還涉及到一個大問題，那就是圖片。在網(wǎng)站中運(yùn)用留白的時候我們也要考慮到圖片怎樣合理放置。由于大部分顯示器都是寬屏的，不少網(wǎng)站使用寬屏的圖片。這也意味著在移動設(shè)備中展示時我們需要縮小圖片或者重新定義圖片大小。看看下面的栗子能不能給你一些啟發(fā)吧！
UPPBroadgatePark網(wǎng)站在電腦桌面上顯示時，主頁面上會出現(xiàn)幻燈片，而當(dāng)設(shè)備分辨率小于500px，它會顯示為加長的圖片(如下圖)。雖然圖片加長了，但設(shè)計師在設(shè)計時仍然留意到豎直方向上的空間問題，刪掉不必要的元素，讓網(wǎng)站看上去更加簡潔、清晰。不過實(shí)現(xiàn)這一點(diǎn)確實(shí)有難度，因?yàn)槟阈枰缊D片的大小以及每張圖片的實(shí)際值，這樣才能恰當(dāng)?shù)闹匦露x圖片大小，不過如果你愿意做出這樣的努力，肥貓相信這絕對是物有所值的。
TheGoldenIsles又是另一種情況了。網(wǎng)站設(shè)計師認(rèn)為電腦桌面上的幻燈片在移動設(shè)備上并沒有很大意義，所以為了網(wǎng)站的清晰明了他們直接將圖片隱藏起來。與此同時，將水平的導(dǎo)航菜單以兩列豎直排列下來，填補(bǔ)一定的空間，讓網(wǎng)站不顯空洞無物。
不少設(shè)計師認(rèn)為網(wǎng)頁空間本來就有限，認(rèn)為通過有限的空間盡可能傳遞更多的內(nèi)容才是王道。其實(shí)內(nèi)容越多對用戶來說并不一定是好事，反而可能會對用戶產(chǎn)生干擾。在做網(wǎng)站時我們應(yīng)該牢記少即是多的原則，學(xué)會利用留白給網(wǎng)站帶來獨(dú)特的美感和強(qiáng)大的表現(xiàn)力。趕緊在你的響應(yīng)式網(wǎng)站中運(yùn)用留白吧。
本文標(biāo)簽： 網(wǎng)頁設(shè)計 網(wǎng)站制作
站應(yīng)該怎么做.jpg)
備類網(wǎng)站推廣方案.jpg)
類網(wǎng)站建設(shè)費(fèi)用明細(xì)表.jpg)
站內(nèi)容運(yùn)營方案.jpg)
體材料類網(wǎng)站內(nèi)容運(yùn)營方案.jpg)
站應(yīng)該怎么做.jpg)
站應(yīng)該怎么做.jpg)
浴設(shè)施類網(wǎng)站建設(shè)費(fèi)用明細(xì)表.jpg)
類網(wǎng)站建設(shè)方案書.jpg)
施類網(wǎng)站內(nèi)容運(yùn)營方案.jpg)
站SEO選哪家公司好.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
站SEO選哪家公司好.jpg)
站SEO需要注意什么.jpg)
站SEO選哪家公司好.jpg)
貨.jpg)
意怎么改.jpg)
