網頁設計留白與漸變

1、如何在網頁設計中使用留白

處理得當的話，留白確實可以為網頁設計帶來大量的益處。不應減少網頁設計中的留白，相反，應該增加網頁中的負空間。一些知名的大眾品牌已經在朝這個方向前進，更多的設計師們也在追隨他們的腳步。

2、網頁在設計上,兩邊的留白規范是什麼？與不同解析度的適配有關嗎？

有的，你可以把寬度設置為百分比 這樣就可以隨著解析度的變化而變化了

3、PPT的留白設計可以增強頁面的可讀性和易讀性嗎？

我們且看下面幾張PPT頁面：

不知你發現沒有？這些PPT頁面具有一個共同點，那就是：文字很少，頁面上有大面積的空白。

沒錯，今天我們就來談談PPT中的留白設計。

01.什麼是留白？

先不提留白，我想大多數人都聽說過這樣一個名詞：少即是多。

我最初知道這個概念是在「無印良品」里知道的，隨著極簡主義的流行，它也越來越廣為人知。

去掉那些多餘的東西，取少而不取多。這在PPT的應用時造成的後果就是留下大量的空白。

不過，空白也不是瞎留，頁面中的每一個元素都應該與其他某個內容存在某種視覺聯系。

這其中，包括空白在內。

「留白」或者版式設計中常提到的「負空間」指的是無內容的空間。

留白並不完全是留出白色，留白意味著留出空白。

留白追求「以虛顯實」，「無」中生「有」。

那麼為什麼要留白呢？也就是留白的作用是什麼呢？

留白有如下作用：

1.減少頁面的壓迫感

當PPT頁面上黑壓壓的全是內容，沒有任何留白存在時，會給觀眾帶來一種壓迫感，常常讓人看得很疲勞。

當頁面中存在適合的留白時，就會讓畫面更加有呼吸感，更加透氣，會明顯的減輕觀眾的視覺負擔。

2.表現出頁面內容之間距離的不同

合適的留白有助於劃分信息的層次，體現不同內容之間的邏輯關系。

3.令頁面的構成發生變化

留白的運用，會使頁面的整體結構的形式發生變化。簡單地說，就是利用留白劃分版面。

4.讓主題更突出

留白使文字清晰易懂，將注意力吸引至某部分，並有助於打造整體氛圍。

5.簡化頁面

留白令頁面結構一目瞭然，不用再去仔細尋找信息，而是一眼就可以看到。

02.留白的分類

在PPT設計中，留白分為兩類，即：巨型留白和微型留白。

1.巨型留白

巨型留白指大型的、核心元素之間的間隙，或這些元素與整個頁面之間的空隙。

在巨型留白中，留白區域通常會非常的大，讓觀眾的注意力完全集中於頁面的內容，這就是巨型留白所形成的效果。

巨型留白通常應用於封面、封底或文字比較少的頁面中。

巨型留白在封面中的應用：

巨型留白在封底中的應用：

2.微型留白

微型留白指小元素之間的空隙。譬如：主標題與副標題之間的距離、文字之間的間距、色塊與色塊之間的距離、版面的規劃等。

微型留白包括：字體、行距、段落、列表、圖標等。

下面是微型留白在PPT中的應用：

或許但從頁面上來看，微型留白沒有什麼特別，但其實其中標題與內容之間的空間、色塊與色塊之間的距離、文字與樣機之間的距離等，都經過精心的設計。

這些微不足道的空間和距離就是所謂的微型留白，就是這些才讓頁面不至於「失衡」，更方便觀眾理解頁面的信息。

03.該怎麼留白？

說了那麼多，那麼PPT該怎麼留白呢？

簡而言之，就是四點：留出呼吸、留出韻味、留出焦點、留出空間感。

1.留出呼吸

留出呼吸，就是精簡文字，減少元素，讓頁面更具有呼吸感。

就好比於我們每天呼吸的空氣，當空氣中顆粒物（元素）特別多時，人的呼吸也會不順暢。

2.留出韻味

前面提過，留白追求「以虛顯實」，「無」中生「有」。

留白具有「無物勝有物」的感覺，這就猶如中國的水墨畫。留白運用在設計中，韻味也會出現。

3.留出焦點

少就是多，元素越少，越集中一起，人的注意力就不會被其它的元素所搶走。

4.留出空間感

留白越大，空間越廣闊。縮小主體的面積，讓其周圍的面積增大，空間感就會增強。

下面我們來通過一個案例來說明留白該怎麼留：

下面是一張PPT的原稿，我們該怎麼對它進行修改，令它更美觀呢？

首先，我們先確定主體內容與頁邊的距離，也即確定版心。

然後，我們在確定文字內容在頁面大體的位置，並確定它們之間的距離，也即「微型留白」。

讓我們看看放上文字後是什麼效果：

這么做，好像頁面已經可以了。但請不要知足於止，我們還需要對頁面進行視覺呈現處理。

我的選擇是加一張「地鐵」圖片作為背景：

但很明顯的是，頁面右側有點空，這是不合適的留白。

所以我把圖片進行水平翻轉。

仔細看你會發現，圖片中「地面」是對頁面無益的內容，相反它還影響了文字的呈現。

所以我將蒙版換成了漸變蒙版。

簡單做個小結：

01.什麼是留白？

留白就是留出空白。

02.留白的分類

巨型留白和微型留白。

03.該怎麼留白？

留出呼吸、留出韻味、留出視覺焦點、留出空間感。

4、頁面設計中為什麼要留白？

在網站設計時，大家可能會經常聽到「留白」，留白的合理運用在網站設計中是比較重要的。適當的留白讓網站用戶的視覺體驗更好，讓網站設計的整體感官效果大不一樣，從而提高網站建設的整體品質。今天我們賽飛網路網站設計人員具體為我們分析下「網站設計中為什麼要留白」。 在網站設計時，若是字間距、段間距太過緊密的，沒有足夠的留白，網站擁擠不堪，那麼這個網站的用戶體驗肯定是很差。1）留白做為網站布局的最重要手段之一，適當的給網站空間呼吸，網站信息的層次感將更加明確，用戶體驗效果也更好；2）平衡的布局，元素更清晰的呈遞效果，更能吸引用戶注意；3）保持層次感，留白區域能夠很好的指引用戶，如果元素過多，那麼用戶的注意力會分散，留白能夠幫助用戶盡快的查找到所需要的信息，提高用戶體驗，贏得用戶好感。 不同情況下，網站留白的要求也就不盡相同，若是充分利用留白滿足網站的設計需求，大家在留白設計時應注意以下幾點： 1.可適當的使用網格進行輔助，幫助適當的在元素之間留白； 2.留白是不斷嘗試的過程，通過不斷的實踐操作才可更好的做好網站的留白設計； 3.留白並不是浪費空間，適當的留白比起填滿網站效果更好。 4.留白要適當，留白過少，網站過於擁擠，留白過多，過猶不及，網站顯得空洞。

5、高端網站設計都懂的，如何在網頁設計中留白

說起留白，很多奢華品牌網站都邪魅一笑：悄悄地用著，出聲的不要。哼哼，偏偏不讓你得逞，今天@十萬個為什麽 從留白的用色、可讀性、搜索流暢度等方面跟童鞋們分享了留白的使用技巧，聽我說，為了廣大設計師的貼身福利，幫轉一下吧 ლ(ಠ_ಠლ)
@十萬個為什麽 ：所謂留白，有時也稱作負空間，兩者是同一個概念。盡管這個術語尤其指留「白」，但它所指的區域並不一定要是白色的。它只是網頁布局中環繞各元素的空白空間。
這樣的空間體現為多種不同形式，例如圖片、圖表、縫隙、外邊距、列甚至一行行文字之間的空間。盡管它似乎「空無一物」，裡面沒有任何其他設計元素占據一席之地，但我們不應該如此看待它。視之為「無物」，也許打造美感與表現力的機會就流失了。
處理得當的話，留白確實可以為網頁設計帶來大量的益處。不應減少網頁設計中的留白，相反，應該增加網頁中的負空間。一些知名的大眾品牌已經在朝這個方向前進，更多的設計師們也在追隨他們的腳步。
更多的留白，等同於更奢華的品牌與網站
客戶往往要求設計師盡可能用盡網頁里的空間，因為網頁中的空間是昂貴的，只有有限的屏幕來展示信息。無論如何，反其道而行之——增加留白——促使設計師在更嚴格約束的空間中，打造更加光鮮的品牌信息。
另外，大家會覺得，留白更多的網站，它的內容比屏幕空間更重要。所以，品牌也顯得更盡奢華，因為它犧牲了更多屏幕空間，反而將焦點匯聚在內容信息上。
奢華的品牌了解這層隱喻，通常都使用更多留白來達到這一確切效果。PotteryBarn是個知名的高檔傢具零售商，它的網站很聰明地使用了留白，恰恰反映了這一點。留白支配了主頁，頁面旁邊大片的留白，更好地將訪問者的注意力集中在頁面中間的交易與促銷信息上。甚至頁面頂部的品牌名稱本身，也在字元之間慷慨地運用了留白。

6、為什麼頁面設計中常常要留白？

留白，另一說為“負空間”，這兩個詞常常互換使用。它們共同所指的都是屏幕中出現的元素之間的一種關系。所謂留白不一定是要白色，或黑色。就算是圖案、色彩或紋理背景都可以被稱為留白。負空間是在內容外創造一個空白的環境，好讓觀者將注意力更加集中於內容。 

在網頁設計中，在哪裡留白顯得更加重要。可以這么說，它決不僅僅處於視覺審美的需要，它得肩負更重要的角色，即在視覺審美與引導用戶之間達成完美平衡。而且，如果現在有一段文字，留白還需在此基礎上讓文字清晰，創造具有可讀性的環境。 

 在網頁中，兩塊較大內容元素之間的空間（在此稱大空間），這類留白能吸引並引導用戶的眼球掃描頁面的方式。當運用得當，就能引導用戶的視線去注意那些你想突顯的元素。這在品牌標識展示或增加用戶交互行為的時候最為有效。 

在兩個較小的內容元素之間的空間（在此稱小空間）諸如一個文字，或一行文字，列表，圖標等，恰當的留白也能讓這些元素更加易於辨認。 當你看到一張大圖片，留白在視覺審美中發揮了很大的作用。舉例來說，如果內容亂七八糟絕不會是一張好看的圖片。 豐富的留白將為你的頁面灌注一種精緻優雅的氛圍。為了更好的理解和運用它，我們將要梳理不同類型的留白（大空間和小空間），以及運用它們的不同的方法（被動和主動）。

 這類型的留白空間很大程度影響用戶的視覺流，不管是潛在引導或者強勢推動都可以讓注意力引導到你想要他們停留的地方。但在此要強調的一個法則即是距離越大動力越強。想要打破平衡，然而，由於太多的留白違反了格式塔原則，其結果就是消弱了對象間的關系。

7、網頁設計中，如何製作一個高為5px的表格，做留白用的

.space{border-top:5px solid #fff;}
那裡需要間距就調用它,調用方式為:<div class="space"></div>,可以自由把div標簽改為其他標簽!