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

 

  留白的优秀案例——但是还有一点装饰——Layervault的个人网站。从本质上讲,留白区域是”未使用的区域”,尽管留白区域看起来未使用,没什么作用,但实际上留白区域的作用相当大,给予设计呼吸的空间,提供了布局上的平衡。留白区域的环绕与陪衬,良好的衬托出中心区域的表现。

  我们为何要重视留白?

  如果你在浏览网站,当布局太糟糕时,你会很费力的才能确定信息内容;太紧密的字间距、段间距,没有明显的区分隔断(或者说没有足够的留白空间),那么这个网站的用户体验肯定是很差的。


  Mailchimp的留白使用的很利索,突出了品牌信息。相似的,如果你的网站也这么”紧密”,没有足够的”留白”,那么用户会对网站丧失耐心;尽管做一个优秀的网站需要天赋、时间以及知识,但不要忘了,用户是很挑剔的,网站做的好,一般不会表扬你,网站一旦有问题,立马就指责你。我们应该视留白为布局的最重要手段,多给元素点呼吸空间,这样信息的层次感将更加明确,用户指引效果也更好。

  留白区域的好处

  上面已经提到过了,更平衡的布局,元素更清晰的呈递效果,更能吸引用户注意。


  Dan Edwards 的个人网站,采用了很多留白,留给了字体和设计作品足够的空间。保持层次感,留白区域能够很好的指引用户,如果元素过多,那么用户的注意力会分散。留白能够让用户尽快的寻找到所需要的信息,提高用户体验。

  如何在设计中使用留白?

  了解重要性之后,下一步要做的事情就是学会去做。

  KISS 原则(Keep It Simple, Stupid)

  其实我喜欢称之为KIS原则,我讨厌愚蠢(Stupid)这个字眼!但是保持一切简洁,是设计亘古不变的道理,没有必要完全填满。某些情况下,”不完整才是完整,残缺才是完美。”设计师的任务就是利用(布局,留白,色彩,尺寸,字体)来营造一个视觉焦点,吸引用户的注意力。

  设计做的简洁一点,不但设计师轻松,开发者也轻松,当然,用户浏览起来也轻松。去除不必要、不重要的元素,只保留必要元素。

  而且不要为了留白而一味留白,要注意设计元素之间的联系性。如果留白用的好,既能保持联系性、一致性,又能让设计通俗易懂,从而提高了网页的适用性。


  Squarespace使用了材质、色彩、留白、字体营造了一种纯净的品味

时间: 2025-01-01 12:39:05

我们为何要在设计中重视“留白”的相关文章

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

  编者按:说起留白,很多奢华品牌网站都邪魅一笑:悄悄地用着,出声的不要.哼哼,偏偏不让你得逞,今天@十萬個為什麽 从留白的用色.可读性.搜索流畅度等方面跟童鞋们分享了留白的使用技巧,听我说,为了广大设计师的贴身福利,帮转一下吧 ლ(ಠ_ಠლ) @十萬個為什麽 :所谓留白,有时也称作负空间,两者是同一个概念.尽管这个术语尤其指留"白",但它所指的区域并不一定要是白色的.它只是网页布局中环绕各元素的空白空间. 这样的空间体现为多种不同形式,例如图片.图表.缝隙.外边距.列甚至一行行文字之

web设计中的网页表单关于编码设计的小技巧

原文地址: http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html 备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如"用户名"+输入框, 这里的"用户名"项在英文中是label,约定翻译为标签 页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为&q

如何在网页中使用留白

所谓留白,有时也称作负空间,两者是同一个概念.尽管这个术语尤其指留"白",但它所指的区域并不一定要是白色的.它只是网页布局中环绕各元素的空白空间. 这样的空间体现为多种不同形式,例如图片.图表.缝隙.外边距.列甚至一行行文字之间的空间.尽管它似乎"空无一物",里面没有任何其他设计元素占据一席之地,但我们不应该如此看待它.视之为"无物",也许打造美感与表现力的机会就流失了. 处理得当的话,留白确实可以为网页设计带来大量的益处.不应减少网页设计中的留

微博UED:WEB设计中的排版

首先谈一下"Metro"--由微软公司开发内部名称为" typography-based design language"(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌.生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计.现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥.庞杂无序,简洁之风深入人心--减少元素,以显现本质.良好的排版有助于Web设计更加简洁有效. 概念: 排版就是将有限的视觉元素

WEB设计中的排版 如何便于用户高效、准确获取相关信息

首先谈一下"Metro"--由微软公司开发内部名称为" typography-based design language"(基于排版的设计语言). Metro是基于瑞士平面设计的设计原则(清晰,真实,美观),来源于交通指示牌.生活中人们行色匆匆,更需要提供快速,简洁,直接,明确的设计.现在的互联网又何尝不是如此,快捷获取信息的同时,信息泛滥.庞杂无序,简洁之风深入人心--减少元素,以显现本质.良好的排版有助于Web设计更加简洁有效. 概念: 排版就是将有限的视觉元素

网站BANNER设计中 中英文字体的结构分析

本来想写"Advertisemen中的字体结构分析",后来发现这个标题写得有点大,偏离了在目前工作中的针对性,因此缩小到banner的范围,以下内容仅个人在目前工作中对banner设计上的一点浅见,仅起抛砖引玉的作用. Banner的传达方式 [TOPIC] 针对网站中的banner Banner的本身形状:形状决定了其固定的构成方式,一般为矩形,横幅,左右结构和居中; Banner的文字特点:主题式,一般分为主标题和副标题,文字较多;设计的时候还需要考虑应用到网站各种尺寸推广图的可读

设计中的沟通 用铅笔来绘制“粗糙”的草图

在Web UI 模型出现之前,经过了很长一段的时间,设计师们都会选择使用缩略图(Thumbnail Sketching)来展现自己的创意,表达自己的思路.这种技巧就像是设计师专门用于沟通的一种艺术,而这种艺术现在却渐渐淡出大家的视线. 而通过本文,就让大家重新审视品味一下这种艺术. 对于设计师而言,对线框图的期望其实是一种能够在繁重设计工作中整理自己思路的方式.而绘制缩略图更多的是就是为自己累计更多的创意,从中找到自己思维中的闪光点. 草图是绘制线框图的地基 线框图(Wireframing)是我

创造设计中的优雅与节奏

首先是跑题的部分,最近听到"交互设计师的危机"的说法.这个话题已经有了不少讨论,比如Cooper上的文章"交互设计前途渺茫"(Alan Cooper,被誉为交互设计之父,见www.cooper.com,它的"concept Projects"我认为是情景应用于设计表达的一个良好范例).DavidW同学做了翻译,并有感而发的写了一些文章如"交互设计师如何提高自己的能力"其中颇具讽刺的语言风格很让人喜欢.又如Mark Blythe

网页设计中META标签写法的常见错误及后果

错误|设计|网页|网页设计 网页设计中META标签写法的常见错误及后果[摘要]:网页设计中META标签描述和关键词写法的常见错误包括:整个网站所有的网页使用同样的META标签内容,META标签中网页介绍信息与网站内容缺少相关性等.本文归纳了网页设计中META标签写法的常见错误,并分析了出现不合理的META标签设计的可能后果. 网页设计中META标签写法的常见错误及后果 搜索引擎优化通常会涉及到网页META标签的话题,META标签内容写作的是网络营销导向网站建设中网页设计的基本工作内容之一,在网络