为什么空白区域在网页设计中重要 - 设计 - 伯乐在线
& 为什么空白区域在网页设计中重要
在网页设计中，空白区域是指不同设计元素间的区域。文字之间、段落之间、图片之间、链接和页脚之间等的区域都是所谓的空白区域。空白区域并不一定是“白色的”，而是内容上的空白。
使用空白区域有助于浏览网站或网页的不同部分。不过设计的网页模板设计师通常低估了空白区域的重要性。空白区域减少了访客需要浏览，一气呵成的文字量。不同的视觉隔离设计元素都能有效地用于空白区域。有效地使用空白区域可以使网站模板干净利落并清新。让我们来探讨下有关网页设计空白区域（也称负空间）的几个方面。（编注：关于负空间，这里有《》。）
当设计一个网站模板时，设计师通常把空白区域用于组织文字、对比图片、聚焦和吸引访客的目光。这增加了浏览范围以及可浏览性。正空间——是图片和文字都被合适地放置，可以很好地突出负空间。空白区域也用于创造高价值品牌。同时，空白区域也是昂贵及高品质的代名词。
空白区域的类型
网页设计中有两类空白区域。有效空白区域是有意留下好的结构和布局空间。同样，也用于突出内容。在网页设计布局时，留下无内容的网页或空白区域。这种区域被称为消极空白。
行距（Line spacing）
当留有足够的行距，网页模板更具可读性并且便于浏览。假如行距太紧凑，就不便于浏览。而当行距太宽，字与字之间过于分开，会不易于访客阅读。借助CSS，可以达到标准行距。
行与行之间的距离也被成为—— 行距（leading）。这通常设置在标准字体的 120-150%，就10pts这类来说，12~15pt 为最佳。小于此间距可能会让副本不宜辨别或浏览。大于这个间距可能给访客浏览带来障碍。
在设计一个网页模板时，这是围绕一个特定元素的空间。这可以由CSS页面空白控制。尝试着与整个布局保持一致。间距一致也会使页面模板更专业有序。当考虑空白页面时，要考虑纵向和横向距离。
过大面积的空白会带来距离感。在设计网页模板时，你应该注意像素是否适合屏幕。设置过多的空白实属浪费。
当设计网页模板时，你需要确保文字没有与图片、侧边栏、导航以及页眉相左。必要的空白可以给访客一个休息的空间。网页设计常适用于800×600分辨率的屏幕。随着时间的推移，这也发展为.
标题是可控制内容分隔的一种很好的方式。有H1、H2及H3等不同的类型。这可以强调不同的内容。标题上方或下方的空白区域对于分隔相关部分的内容是十分有用的。
空白区域也具有平衡布局的作用。假如没有足够的空白区域，访客的眼睛就不能得到休息。网页设计应该保持开放空间和内容的平衡。网络营销机构发现，在错误区域过多的空白区域就像过高的页脚会误导用户。他们可能认为已经结束并离开页面。用户希望网页空白内容比印刷媒介中的少。
最近网页模板空白区域或负空间的设计都得到关注。它的存在或使用不是定义上的数量而是对于网页贡献的方式。
空白区域在网页模板设计中得到越来越多的重视。如今它被视为不可或缺的一部分而并非背景。不少网页模板设计师把它用于强调内容、增强网页可读性和平衡网页布局。改革和创新正在日益替代墨守成规和习俗。虽然适量地使用负空间有助于实现预期效果，但是过量使用弊大于利。
原文：　　翻译：敏捷 –
如需转载，但请注明原文/译文出处、译文超链接和译者等信息，否则视为侵权，谢谢合作！
可能感兴趣的话题
关于设计频道
分享UI、网页、交互、用户体验设计和各种设计教程。
新浪微博：
设计频道微信公众号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线【翻译】网页设计中如何科学留白？ - 简书
【翻译】网页设计中如何科学留白？
April 30, 2015 by你是不是经常盯着你刚刚完成的设计，想着“好像缺了点儿啥”？再具体点儿，你是不是曾得到过这个设计“太空了”或者“太满了”的结论？对我们设计师来说，这些场景总能轻松的让我们在设计中花去大量的时间。这确实也没什么意外的。毕竟，我们工作的最本质工作都围绕着如何创造性地“填补空白”。然而，尽管这是我们工作的核心部分，它也是设计中的重要方面之一。如何有效地利用空白？
Effective Use of Whitespace:.
空白真的“空”吗？你是不是曾经认为空白是“设计之间的空间”？这是个完全错误的观点，尽管这是面对我们设计中一些荒凉之处时，我们普遍存有的一个想法。空白区域并不只是设计元素之间的填充，人家自己也是个很重要的设计元素呢，好嘛！空白就像砖块之间的砂浆，或者彩色玻璃马赛克拼贴中的粘合剂一样。尽管我们的眼睛被训练得善于欣赏内容——砖块和彩色玻璃——但是真正承载它们并帮助形成整体设计流的却是这些空白。
Effective Use of Whitespace:.
就像马赛克拼贴没有胶水一样，我们的设计如果没有空白就是一堆彩色垃圾。一旦你认识到了这些你设计中所谓的“空白元素”的重要性，那时你就能更好的将空白的使用能力提升到极致。聚焦现在我们已经确立了留白的重要性，那么我们该如何使用它？我们先来做个小练习。在你最新换的浏览器里打开一个新的标签页并让它转到。你第一眼看见了什么？我敢打赌一定是色彩鲜艳的谷歌标识，对吧？这个标识在哪儿？它当然没有在你视线自然开始的地方——窗口顶端。那么，你的注意力是怎么被吸引过去的呢？
Effective Use of Whitespace: Google.
猜对了——留白。谷歌用大量的空白区域自然地把你的焦点调整到了页面中央，那个它极简化的设计主体部分所在。留白是引导用户视线的最基本的方式之一。我们可以用这一设计工具在布局中创造自然的焦点区域。用户的注意力和焦点被吸引到了这个区域，然后我们就可以把重要内容放在里面来更高效地传达我们的信息了。组织与能够调动用户焦点一样，留白还为设计师们提供了一种简单的方式，使不同的设计元素更有条理。和我们用空白把整片的文字分割成更容易理解的段落一样，它在为我们的设计构建清晰的组织时也极为有效。
Effective Use of Whitespace:.
利用留白来组织内容是，一个有用的小技巧就是要统一。采用这种方法时，考虑好内容分组的问题很有用。尽量对页边距、分区、文字和图片等元素使用一套统一的空白尺寸。利用留白进行组织的一个好处就是，它既方便调整，又会对设计有深远的影响。所以，尽情尝试吧！强调还是因为在引导用户视线上的显著效果，留白可以使你设计中的一些元素更突出。在我们先前讨论组织中的统一性主题的基础上，巧妙地打破这种连贯性可以迅速引起用户的注意。
Effective Use of Whitespace:.
当你在设计时创建了一套稳定的空白使用原则时，用户的眼睛立刻就会习惯这个规则。在用户继续浏览你的设计时，这种连贯性上的一点点打断，即使非常微小，也会马上凸显出来。有个很棒的例子——你可以试一下，很容易——非常细微地调整一下你想强调的标题的字间距。掌握了这个技能，试着在你的设计中的区域间用更细微的变化应用它。不一定是留“白”上面的技巧全都围绕着引导用户的视线。毕竟，这是留白最擅长做的。也就是说，尽管我们说“留白”，但它不一定非得是“白色”的。没有什么不成文的设计法则规定你设计中的主要元素之间的空间是什么颜色。
Effective Use of Whitespace:.
一个可以在实践中看到的例子就是单页设计趋势。当你被限制于只能用一个页面承载内容时，有效的空白利用可以将吸引焦点、清晰组织和强调主体发挥到最大限度。大块的内容通常在这些情境中被设计成贯穿、流通的。在这些情况下，只要把这些内容块中的颜色换掉，就会在帮助我们维持上面所说的设计中三个方面的同时，也为在有限空间内的内容设计提供了突破点。读了这些方法，希望你能用一个新鲜的视角看待你的设计中的空白。> 关于网页的“空白”设计的讨论
保定分公司
关于网页的“空白”设计的讨论
现在的很多网站越来越喜欢把更多的内容和元素整在一个页面当中，一方面网页上空间有限，位置寸土寸金，觉得一定要填满才不会浪费;另一方面，生怕漏掉了某部分内容，把一个页面弄得越来越多彩，以为这样可以更能满足用户的要求。但是一个网页的内容和颜色并不是越多越好，从另一个角度来说，空白恰可以将用户的焦点聚集在网页的内容上，比如，某购物网站的空白可以让用户在购物的时候将更多注意力集中到商品上，而不是看起来的干扰信息。网页的空白有以下几个方面的好处，在设计中我们应该加以考虑。今天小编为您进行以下分析。首先，网页的空白能够让让网页的颜色显得更加鲜明。这也是空白最直接的好处，空白越多，越能突出网页中其他的色彩，使它们的颜色更加鲜艳，从而让用户直接就能感受到视觉带来的颜色冲击。这点对于吸引网站访客眼光有着很大的作用，因为空白使得网页衬托出的颜色深浅、饱和度甚至浓度都更加突出。例如，小米科技的首页左边部分，如下图，大多数的白色就让小米的主要风格颜色-橙色变得更加突出鲜艳，相信在用户的眼里，对小米科技商标的印象应该都是橙色的。特别是一些比较鲜艳的简单颜色，更能够创造出令人愉快同时吸引注意的外观，加上网页的空白部分衬托，更能够让用户印象深刻。其次，网页中的空白可以提升网页内容的可读性和易读性。一个网站内容并不是越多越好，空白可以改善与提升一个网站的可读性与易读性。如果一个网页上的文字过于拥挤，就会影响到用户阅读的舒适阅读，降低用户的体验。如下图是两个网站的对比，很明显图一和图二相比，图一的标题的文字段落、字间距等给人的感觉更舒适和宽敞，更有利于增强可读性。同时，网页中的空白可以让用户更加专注。几乎所有的搜索引擎之所以页面设计得如此相似简洁，有一点也是为了能够提高用户的体验，让用户更加专注地在搜索框中搜索信息，而不被网页上的其他信息干扰。因此，大多数的搜索引擎首页都是空白占大多数，页面中只有一个搜索框，因为空白让用户更加专注，能够减少对用户的打扰，让用户专注也是网站拥有良好用户体验的一种表现。总之，网页中留空白不是在浪费网页空间。传统的网页设计可能会认为设计页面的时候应该尽可能在页面中内填充各种颜色和加入各种元素。但从上面提到的几个方面有可以看出，网页的空白也提升信息可读性与易读性、可以让网页的颜色更加鲜明让用户印象更加深刻，可以提升用户的专注度体验。所以，网页中的空白不一定总是缺陷，如果能够认真利用，是可以带来不一样的用户体验。公司~中企动力，您身边专业的专家，为您提供等一站式服务！
为您提供一对一解决方案
周一至周五9:00——17:30
400-660-5555
全国7×24小时热线服务
专属专业顾问1对1报价
客服热线：
关注我们：
欢迎您免费咨询，请填写以下信息，我们收到后会尽快与您联系为什么空白区域在网页设计中是重要的
在中，空白区域是指不同设计元素间的区域。文字之间、段落之间、图片之间、链接和页脚之间等的区域都是所谓的空白区域。空白区域并不一定是&白色的&，而是内容上的空白。
使用空白区域有助于浏览网站或网页的不同部分。不过设计的网页模板设计师通常低估了空白区域的重要性。空白区域减少了访客需要浏览，一气呵成的文字量。不同的视觉隔离设计元素都能有效地用于空白区域。有效地使用空白区域可以使网站模板干净利落并清新。让我们来探讨下有关网页设计空白区域（也称负空间）的几个方面。
当设计一个网站模板时，设计师通常把空白区域用于组织文字、对比图片、聚焦和吸引访客的目光。这增加了浏览范围以及可浏览性。正空间&&是图片和文字都被合适地放置，可以很好地突出负空间。空白区域也用于创造高价值品牌。同时，空白区域也是昂贵及高品质的代名词。
空白区域的类型
网页设计中有两类空白区域。有效空白区域是有意留下好的结构和布局空间。同样，也用于突出内容。在网页设计布局时，留下无内容的网页或空白区域。这种区域被称为消极空白。
行距（Line spacing）
当留有足够的行距，网页模板更具可读性并且便于浏览。假如行距太紧凑，就不便于浏览。而当行距太宽，字与字之间过于分开，会不易于访客。借助，可以达到标准行距。
行与行之间的距离也被成为&& 行距（leading）。这通常设置在标准字体的 120-150%，就10pts这类来说，12~15pt 为最佳。小于此间距可能会让副本不宜辨别或浏览。大于这个间距可能给访客浏览带来障碍。
在设计一个网页模板时，这是围绕一个特定元素的空间。这可以由CSS页面空白控制。尝试着与整个布局保持一致。间距一致也会使页面模板更专业有序。当考虑空白页面时，要考虑纵向和横向距离。
过大面积的空白会带来距离感。在设计网页模板时，你应该注意像素是否适合屏幕。设置过多的空白实属浪费。
当设计网页模板时，你需要确保文字没有与图片、侧边栏、导航以及页眉相左。必要的空白可以给访客一个休息的空间。网页设计常适用于800&600分辨率的屏幕。随着时间的推移，这也发展为.
标题是可控制内容分隔的一种很好的方式。有H1、H2及H3等不同的类型。这可以强调不同的内容。标题上方或下方的空白区域对于分隔相关部分的内容是十分有用的。
空白区域也具有平衡布局的作用。假如没有足够的空白区域，访客的眼睛就不能得到休息。网页设计应该保持开放空间和内容的平衡。网络营销机构发现，在错误区域过多的空白区域就像过高的页脚会误导用户。他们可能认为已经结束并离开页面。用户希望网页空白内容比印刷媒介中的少。
最近网页模板空白区域或负空间的设计都得到关注。它的存在或使用不是定义上的数量而是对于网页贡献的方式。
空白区域在网页模板设计中得到越来越多的重视。如今它被视为不可或缺的一部分而并非背景。不少网页模板设计师把它用于强调内容、增强网页可读性和平衡网页布局。改革和创新正在日益替代墨守成规和习俗。虽然适量地使用负空间有助于实现预期效果，但是过量使用弊大于利。
原文：/white-spaces-web-design
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'