如何在网页设计中使用留白

 

  编者按:说起留白,很多奢华品牌网站都邪魅一笑:悄悄地用着,出声的不要。哼哼,偏偏不让你得逞,今天@十萬個為什麽 从留白的用色、可读性、搜索流畅度等方面跟童鞋们分享了留白的使用技巧,听我说,为了广大设计师的贴身福利,帮转一下吧 ლ(ಠ_ಠლ)

  @十萬個為什麽 :所谓留白,有时也称作负空间,两者是同一个概念。尽管这个术语尤其指留“白”,但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。

  这样的空间体现为多种不同形式,例如图片、图表、缝隙、外边距、列甚至一行行文字之间的空间。尽管它似乎“空无一物”,里面没有任何其他设计元素占据一席之地,但我们不应该如此看待它。视之为“无物”,也许打造美感与表现力的机会就流失了。

  处理得当的话,留白确实可以为网页设计带来大量的益处。不应减少网页设计中的留白,相反,应该增加网页中的负空间。一些知名的大众品牌已经在朝这个方向前进,更多的设计师们也在追随他们的脚步。

  更多的留白,等同于更奢华的品牌与网站

  客户往往要求设计师尽可能用尽网页里的空间,因为网页中的空间是昂贵的,只有有限的屏幕来展示信息。无论如何,反其道而行之——增加留白——促使设计师在更严格约束的空间中,打造更加光鲜的品牌信息。

  另外,大家会觉得,留白更多的网站,它的内容比屏幕空间更重要。所以,品牌也显得更尽奢华,因为它牺牲了更多屏幕空间,反而将焦点汇聚在内容信息上。

  奢华的品牌了解这层隐喻,通常都使用更多留白来达到这一确切效果。PotteryBarn是个知名的高档家具零售商,它的网站很聪明地使用了留白,恰恰反映了这一点。留白支配了主页,页面旁边大片的留白,更好地将访问者的注意力集中在页面中间的交易与促销信息上。甚至页面顶部的品牌名称本身,也在字符之间慷慨地运用了留白。

  PotteryBarn


  留白提升搜索流畅度

  两大搜索引擎Google和Yahoo Search,诠释了留白简洁有效,这个简单的例子再适合不过了。

  Google准确地理解了一点,正在搜索某个话题的用户,不想被嘈杂的背景和广告分散注意力。因此,留白支配了整个Google搜索引擎页面,实际搜索框只占据页面中央窄窄一丝空间。类似的,Yahoo搜索也体现了使用留白的妙处。虽然这个页面顶部有长长一条菜单栏,理念还是相同的:大量的留白,使用户专注于搜索,别无他物。

  可读性和易读性得到应有的大幅提升

  用好留白,任何网站的可读性与易读性都会得到改善。如果一个页面上的文字过于拥挤,它就会妨碍舒适的阅读体验,从而阻碍整体用户体验。更多的留白使文字更易浏览,从而提升阅读体验,也更易理解。

  Information Highwayman是个掌握这项原则的个人站点,是D Bnonn Tennant——一名文案和市场专员的个人网站。擅长夸耀的他,知道什么样的网页内容对任何小本经营管用,令人欣慰的是,Tennant在他自己的网站上实践了他所宣扬的东西。标题的字间距、文字段落和菜单栏间距,有利于确保可读性和易读性。

  Information Highwayman


  留白也可以用于不同内容区块之间,不只是为了提升阅读体验,也为了将内容分隔成不同部分,使得信息的吸收更加专注。Andrew

  Lucas的网站很好地展示了这一点。他是名伦敦的设计师,留白在他个人主页上运用得行之有效。

  AndrewLucas


  它让颜色更鲜明

  也许留白最直接,尽管也是最简单的益处,就是突出网页中的其他色彩,使它们更加鲜艳。这点对于吸引访客目光大有帮助,因为颜色深浅、饱和度甚至浓度都更加突出。

  I Am Dan背后的设计师处理得非常棒,他在主页上使用稀疏的色彩,成为了这个概念的典范。他的网站简直就是零星几片红色分割开的留白。通过这种手段,红色突显了他作品集的链接,吸引访客浏览他的站点,有效地突出了他的网站,因此提高了访客响应召唤的几率。

  I Am Dan


  Zurb是家网页设计公司,他们网站也体现了留白如何能突出色彩。它的特点是主页顶部单一的纯色和不同页面的彩色图标(就在虚线附近)。除了极少的颜色使用外,首页的整体设计以留白为主。

  Zurb


  像绿色、橙色和红色这种简单的颜色,能够创造出令人愉快同时吸引注意的外观。上面提到两个网站,都采用了极简的用色方案,因为有如此大面积的留白。因此,用色非常机智得当,使用户赞赏有加。

  留白不是浪费空间

  网页设计师们越来越多抛弃之前的误解——认为设计页面时应该尽可能在屏幕内填塞每个元素、每种颜色。正如上面例子解释过的,留白被用于突出品牌内容、提升可读性与易读性、突显极简色彩时,展现出了强大的影响力。

  俗话说“少即是多”,不论你怎么看,它的确适用于关于留白的一切观点。广义上讲,网页设计中的这种极简处理方式,如今正越来越盛行,这项趋势肯定能持续下去。

时间: 2024-07-28 14:32:20

如何在网页设计中使用留白的相关文章

在别人的网页设计中寻找“高品质”

提升网页和博客设计品质的一些实例和技巧 "高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧. 接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找"高品质"的过程. 01. 留白在好的网页设计中我最留意的是那些对设计元素之间

从零开始教你打造网页设计中的极简风格

  什么是极简设计 极简设计,严格上讲不能算作一种视觉风格,而是一种设计哲学.它在保持了基本的骨架内容的基础上,剔除掉多余的元素.装饰.色彩和纹理,是通过不断思考而进行化繁为简的设计过程.这样做的结果是突显了主题内容.所以,它是扎根于设计思想根部的概念. 极简主义起源于苏格兰,当时在各个文化领域都掀起了极简的风潮:平面设计.建筑.音乐.文学.绘画等.直到现在,也开始在网页设计中盛行. 尽管极简设计风格在十年间并未得以足够的关注度,早先的互联网领域中根本看不到它的影子,样式复杂的LOGO和广告,艳

让我们谈谈网页设计中的卡式设计

  前言 "我要卡式的",这是上一期客户在和我聊需求的时候说的第一个需求点.毫无疑问,卡式不论是适应PC还是手机都表现优秀.从在线商城到社交媒体网站,卡式设计成为网页设计中的一股强大风潮且风头正劲.其中最重要的原因想必就是它的灵活性. 卡片,可以是任何形状.颜色和形式.但是总的来说,他们都包含了图片.图标和一些基本的文字信息,例如标题.用户名和位置信息. "然而,其风靡起来的核心还在于其简单性.你很少见到复杂的卡片设计,它之所以出现的目的就是为了引导用户去点击它"

网页设计中的负空间

  前言 由于屏幕是有限的,因此网页设计也是有限的.可以这么说,在屏幕这个小小的盒子中,每个像素都是一块不动产. 就算是菜鸟,也懂得一个页面不能加载过多的内容,但涉及到究竟应该规划多少留白,包括经验老道的设计师或许也很茫然. 留白,另一说为"负空间",这两个词常常互换使用.它们共同所指的都是屏幕中出现的元素之间的一种关系.所谓留白不一定是要白色,或黑色.就算是图案.色彩或纹理背景都可以被称为留白.负空间是在内容外创造一个空白的环境,好让观者将注意力更加集中于内容. 这篇文章中,我们将讨

手把手帮你学会在网页设计中运用负空间

  由于屏幕是有限的,因此网页设计也是有限的.可以这么说,在屏幕这个小小的盒子中,每个像素都是一块不动产. 就算是菜鸟,也懂得一个页面不能加载过多的内容,但涉及到究竟应该规划多少留白,包括经验老道的设计师或许也很茫然. 留白,另一说为"负空间",这两个词常常互换使用.它们共同所指的都是屏幕中出现的元素之间的一种关系.所谓留白不一定是要白色,或黑色.就算是图案.色彩或纹理背景都可以被称为留白.负空间是在内容外创造一个空白的环境,好让观者将注意力更加集中于内容. 这篇文章中,我们将讨论,怎

网页设计中的隐藏菜单示例

  如何在网页中运用隐藏菜单提升整体设计效果,让下面这些示例来告诉你吧. 在网页设计中使用导航图标这一趋势正迫使我们再度审视导航菜单.它们在设计中的位置以及在用户体验中的角色.尽管这一理念并没有弱化其在导航方面的意义和重要性,但其能够给设计师和开发人员带来更多的创意空间. 根据项目的不同,导航图标彼此区别很大,但是其中大多数会偏向于使用流行.简单.贴合移动端的三行图标,这一类图标外观漂亮,而且在几乎任何环境下都比较带感.这个小图标能够用来隐藏小菜单,也能够隐藏复杂.内容量大的菜单. 如果再给打开

创建不平衡的平衡:在网页设计中使用不对称设计

不对称设计技术可以非常直观有趣和创建不同的焦点.下面是一些鼓舞人心的例子和关于如何使用不对称设计的技巧. 不对称仅仅是缺乏对称性,但不对称并没有缺乏平衡与和谐. 不对称和对称的设计都可以创造一种活力和紧张的感觉,但也某种意义上的和谐取决于使用的比例.虽然大多数人往往首先能想到的是对称性,因为这是一种 很常见的自然现象--想想达芬奇的维特鲁威人或动物的脸的样子;但不对称也是一种自然现象,只是不同的方式出现,例如人类往往会出现左或者右撇子居多. 不对称设计的用途非常广泛.通常被用于创造出一种混乱或混

我们为何要在设计中重视“留白”

  留白的优秀案例--但是还有一点装饰--Layervault的个人网站.从本质上讲,留白区域是"未使用的区域",尽管留白区域看起来未使用,没什么作用,但实际上留白区域的作用相当大,给予设计呼吸的空间,提供了布局上的平衡.留白区域的环绕与陪衬,良好的衬托出中心区域的表现. 我们为何要重视留白? 如果你在浏览网站,当布局太糟糕时,你会很费力的才能确定信息内容;太紧密的字间距.段间距,没有明显的区分隔断(或者说没有足够的留白空间),那么这个网站的用户体验肯定是很差的. Mailchimp的

分享网页设计中寻找“高品质”的过程

"高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧. 接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找"高品质"的过程. 01. 留白 在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用.留心不同内容区块之间的