空白是網(wǎng)站設(shè)計(jì)的重要工具，可以為網(wǎng)站帶來很多好處。適當(dāng)?shù)南[可以有效突出網(wǎng)站的主題，傳達(dá)核心概念，吸引訪客的注意力，簡化圖片，使各種元素的呈現(xiàn)更加層次分明，提高網(wǎng)站內(nèi)容的可讀性和可用性。增加網(wǎng)站的紋理，建立獨(dú)特的形象。消隱通常意味著在頁面的不同塊之間找到平衡。在網(wǎng)站中使用空白區(qū)域并不容易，但在響應(yīng)式布局中使用它更加困難。這是因?yàn)轫憫?yīng)式網(wǎng)站通常需要設(shè)置不同的斷點(diǎn)以適應(yīng)各種設(shè)備，如計(jì)算機(jī)，平板電腦，手機(jī)等。頁面上的空白必須確保用戶可以在不同的設(shè)備上提供友好的瀏覽體驗(yàn)。但不要擔(dān)心，小飛在這里發(fā)送好處，告訴你什么是白色，以及如何在響應(yīng)式網(wǎng)頁設(shè)計(jì)中留空。

什么是留白?

最早的白色空間是中國藝術(shù)作品創(chuàng)作中常用的技巧。一些藝術(shù)大師如畫家通常是白色空間的主人。在他們看來，白色空間具有很高的審美價(jià)值，可以為觀眾留下想象空間，實(shí)現(xiàn)“沒有勝利”，“此時(shí)沒有聲音”。在網(wǎng)站上使用空白也可以產(chǎn)生類似的效果。網(wǎng)站中的空白區(qū)域，又稱負(fù)空間，是指合理布置各種設(shè)計(jì)元素的空白空間，實(shí)現(xiàn)干凈精致的布局。但是，很多人經(jīng)常陷入誤解，認(rèn)為空白是將網(wǎng)站的某個(gè)區(qū)域設(shè)置為白色。白色的“白色”并不是指顏色的“白色”，而是指空白的“白色”，表示沒有裝飾且沒有額外元素的狀態(tài)（下圖中的灰色區(qū)域也是一種白色空間）。 ）。它有各種各樣的表達(dá)方式，圖片，圖表，邊距，列，甚至文本之間的空間是一種空白。

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

響應(yīng)式網(wǎng)站的最大特點(diǎn)之一是它們適用于移動(dòng)電話等小屏幕，同時(shí)適應(yīng)計(jì)算機(jī)屏幕。網(wǎng)站上的空白區(qū)域是否合適取決于它是否能滿足不同設(shè)備的需求，主要針對(duì)手機(jī)，以下點(diǎn)建議也是基于此。

　重新設(shè)置導(dǎo)航菜單

導(dǎo)航菜單是在進(jìn)行網(wǎng)站時(shí)首次遇到的設(shè)計(jì)難度，但很少有設(shè)計(jì)師將導(dǎo)航菜單與空白區(qū)域相結(jié)合。實(shí)際上，導(dǎo)航菜單還應(yīng)該注意留空的問題。這是因?yàn)槿绻麑?dǎo)航菜單中沒有足夠的空間，當(dāng)網(wǎng)站顯示在小屏幕上時(shí)，菜單欄很可能會(huì)被破壞（特別是在水平導(dǎo)航菜單的情況下）和視覺經(jīng)驗(yàn)很差。此外，移動(dòng)用戶在單擊菜單項(xiàng)時(shí)也容易出現(xiàn)點(diǎn)擊錯(cuò)誤，這會(huì)影響用戶的操作體驗(yàn)。

如何將導(dǎo)航菜單留空？如果導(dǎo)航菜單欄上有太多選項(xiàng)并且它們實(shí)際上不可用，我們可以使用隱藏菜單（例如漢堡包圖標(biāo)）為網(wǎng)站騰出空間。但是，在使用隱藏菜單之前，我們可以對(duì)導(dǎo)航菜單進(jìn)行一些設(shè)置，以便可以在不同設(shè)備上以最合適的方式顯示。下面，小飛將分析如何通過兩個(gè)栗子使用它。

就FLA網(wǎng)站而言，如果它顯示在計(jì)算機(jī)的桌面上，它將以上圖所示的導(dǎo)航菜單的形式出現(xiàn)，并在小屏幕設(shè)備上顯示時(shí)，導(dǎo)航菜單在左側(cè)將隱藏在漢堡圖標(biāo)中，為用戶提供充足的空間。此外，您可以看到左側(cè)菜單選項(xiàng)之間有一定的距離，這是設(shè)計(jì)師特別添加的，這使用戶可以更輕松地執(zhí)行手勢，例如點(diǎn)擊小屏幕設(shè)備。

與FLA網(wǎng)站相比，Dorigati在導(dǎo)航菜單上的設(shè)置有點(diǎn)復(fù)雜。當(dāng)用戶瀏覽諸如計(jì)算機(jī)的大屏幕時(shí)，導(dǎo)航菜單將水平排列在網(wǎng)站上;如果屏幕較小，導(dǎo)航菜單將以兩行顯示在用戶面前（如上所示），這有點(diǎn)像網(wǎng)格系統(tǒng);當(dāng)網(wǎng)站需要適應(yīng)960px斷點(diǎn)時(shí)，導(dǎo)航菜單的布局將從水平變?yōu)榇怪?，出現(xiàn)在網(wǎng)站的側(cè)面，徽標(biāo)將相應(yīng)地改變位置;如果斷點(diǎn)較小，導(dǎo)航菜單將隱藏到漢堡圖標(biāo)。在，它出現(xiàn)在頁面的頂部。這種方法聽起來很麻煩，但它是一種實(shí)用的解決方案，允許網(wǎng)站為不同設(shè)備的用戶提供自然，友好的瀏覽體驗(yàn)，同時(shí)確保適當(dāng)?shù)目瞻讌^(qū)域。

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

過去，在設(shè)計(jì)計(jì)算機(jī)桌面網(wǎng)站時(shí)，我們經(jīng)常注意到網(wǎng)站上不同元素的水平間距。但是當(dāng)我們開始為響應(yīng)式網(wǎng)站安排空白時(shí)，我們應(yīng)該更多地關(guān)注元素的垂直距離。這是因?yàn)槭謾C(jī)屏幕通常是垂直的。如果不注意元素的垂直間距，就會(huì)影響手機(jī)等小屏幕上各種元素的顯示，影響視覺效果的外觀。此外，垂直空白區(qū)域或空白區(qū)域也決定了移動(dòng)設(shè)備（如移動(dòng)電話）上網(wǎng)站的加載速度。讓我們讓栗子證明吧！

下面的圖片顯示了手機(jī)屏幕上的Jisc網(wǎng)站，由于網(wǎng)站設(shè)計(jì)師在字體，圖片和其他元素之間留出了一定的空間，因此看起來更舒服。 Jisc網(wǎng)站在桌面上呈現(xiàn)時(shí)會(huì)有很多水平方向的塊。事實(shí)上，下圖中的共享服務(wù)和部門交易是并列關(guān)系。它們在計(jì)算機(jī)屏幕上水平呈現(xiàn)，但設(shè)計(jì)師不僅關(guān)注水平方向。間距，同時(shí)還考慮到網(wǎng)站在小屏幕上的垂直習(xí)慣，使網(wǎng)站更清晰，更具可讀性。

網(wǎng)站上的空白也可以劃分不同塊的邊界，并為用戶提供一些喘息空間。 Mashable的博客使用負(fù)空間來做到這一點(diǎn)。 Mashable將在計(jì)算機(jī)上顯示為3列：小圖像+文本，中間圖像+文本，大圖像+文本，如果以這種方式在手機(jī)上顯示，則可能很糟糕。然而，設(shè)計(jì)師考慮了手機(jī)的垂直屏幕，在不同元素的垂直方向留下足夠的空間，使不同文本塊之間的界限清晰可見，界面更簡潔。

因此，當(dāng)我們設(shè)計(jì)響應(yīng)式網(wǎng)站的空位問題時(shí)，記住不要總是從元素的水平方向開始，還要考慮不同元素和垂直方向上不同塊的間距和距離。畢竟，所有元素都在小屏幕上。所有這些都傾向于垂直顯示，以便他們真正在響應(yīng)式網(wǎng)站中發(fā)揮作用。

　字體和間距

在響應(yīng)式網(wǎng)站中做好空白區(qū)域還需要面向文本的字體。除了改變字體的大小，我們還可以調(diào)整行高，字距，顏色甚至兩個(gè)文本塊之間的距離，使文本更容易閱讀，圖片看起來更和諧。

當(dāng)計(jì)算機(jī)上顯示“下一頁”頁面時(shí)，標(biāo)題和導(dǎo)航菜單之間留下的空白區(qū)域很大，但是當(dāng)在移動(dòng)設(shè)備上顯示時(shí)，空白區(qū)域會(huì)縮小（請參見下圖），并且字體會(huì)顯示在空白區(qū)域中。標(biāo)題TNW文本減少。小，圖片下方文字段落之間的間距已經(jīng)放大，這是TNW根據(jù)自身特點(diǎn)合理利用白色空間的體現(xiàn)。

阿格拉文化網(wǎng)站也是如此，每個(gè)圖像上的文字都被暫停。但是，由于浮動(dòng)效果無法在手機(jī)和其他設(shè)備上顯示，阿格拉文化在小屏幕上果斷地放棄了這種特殊效果，因此文本直接出現(xiàn)在圖片的中心。雖然這種變化不大，但它保證了用戶的舒適體驗(yàn)。

　重新調(diào)整圖片

響應(yīng)式設(shè)計(jì)經(jīng)常涉及一個(gè)大問題，即圖片。當(dāng)使用網(wǎng)站上的空白區(qū)域時(shí)，我們還需要考慮圖片的合理放置方式。由于大多數(shù)顯示器都是寬屏，因此許多網(wǎng)站都使用寬屏圖像。這也意味著我們需要縮小圖像或在移動(dòng)設(shè)備上顯示時(shí)重新定義圖像大小。看看下面的栗子是否可以給你一些靈感！

當(dāng)UPP Broadgate Park網(wǎng)站顯示在計(jì)算機(jī)桌面上時(shí)，主頁上會(huì)出現(xiàn)幻燈片放映，當(dāng)設(shè)備的分辨率小于500px時(shí)，它將顯示為擴(kuò)展圖片（如下所示）。雖然圖片延長了，但設(shè)計(jì)師在設(shè)計(jì)時(shí)仍然關(guān)注垂直空間問題，刪除不必要的元素，使網(wǎng)站看起來更簡潔明了。然而，要實(shí)現(xiàn)這一點(diǎn)真的很難，因?yàn)槟阈枰缊D像的大小和每個(gè)圖像的實(shí)際值，以便正確地重新定義圖像大小，但如果你愿意做出這樣的努力，小飛認(rèn)為這絕對(duì)是值得的。

黃金群島是另一種情況。網(wǎng)站設(shè)計(jì)師認(rèn)為計(jì)算機(jī)桌面上的幻燈片在移動(dòng)設(shè)備上沒有多大意義，因此為了清晰起見，他們直接隱藏了圖片。同時(shí)，水平導(dǎo)航菜單垂直排列兩列以填充一定的空間，使網(wǎng)站不空和空。

許多設(shè)計(jì)師認(rèn)為網(wǎng)絡(luò)空間本質(zhì)上是有限的，并且通過有限的空間傳遞盡可能多的內(nèi)容是最重要的。事實(shí)上，更多的內(nèi)容對(duì)用戶來說不一定是好事，但它可能會(huì)干擾用戶。在做網(wǎng)站時(shí)，要牢記少即多的原則，學(xué)會(huì)用空白給網(wǎng)站帶來獨(dú)特的美感和強(qiáng)大的表現(xiàn)力。在響應(yīng)式網(wǎng)站中使用它！

小飛也有一個(gè)好消息告訴你，起飛頁（http://www.qifeiye.com/?t_wd=a5）的自支撐平臺(tái)的許多模板都利用了白色空間的藝術(shù)。該網(wǎng)站看起來更簡潔，有禪宗。含義。另外，上面導(dǎo)航菜單的導(dǎo)航總結(jié)，重點(diǎn)是垂直方向，白色空間，調(diào)整字體和間距，重新定義圖片等建議，可以滿足起飛頁面自助站平臺(tái)。您可以使用您的起飛頁面使您的網(wǎng)站在PC和移動(dòng)設(shè)備上看起來與眾不同。然而，小飛還提醒你不要為移動(dòng)網(wǎng)站做太多優(yōu)化，所以最好單獨(dú)做一個(gè)移動(dòng)網(wǎng)站，我們主張基于響應(yīng)式網(wǎng)站進(jìn)行微調(diào)。來到起飛頁面自助平臺(tái)，成為一個(gè)快速響應(yīng)的網(wǎng)站！

« Jumeiyou和其他多家電平臺(tái)簽署誠信公約，建立電子商務(wù)誠信環(huán)境 | 技術(shù)也很好！為什么老虎機(jī)和釣魚機(jī)總能獲勝？ »