网页设计留白与渐变

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标签改为其他标签!