合理的在网页留下空白,可以有效提升人们的阅读体验,所谓留白,有时也称作负空间,两者是同一个概念。尽管这个术语尤其指留“白”,但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。

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

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

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

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

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

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

留白提升搜索流畅度

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

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

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

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

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

留白也可以用于不同内容区块之间,不只是为了提升阅读体验,也为了将内容分隔成不同部分,使得信息的吸收更加专注。Andrew
Lucas的网站很好地展示了这一点。他是名伦敦的设计师,留白在他个人主页上运用得行之有效。

它让颜色更鲜明

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

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

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

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

留白不是浪费空间

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

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

如何在网页界面设计中正确的留出空白空间相关推荐

  1. 网站建设在网页界面设计中该如何做到简约

    网站建设在网页界面设计中该如何做到简约是关于网站建设在网页界面设计中该如何做到简约的文章,同信长春网站公司帮您了解网站建设在网页界面设计中该如何做到简约的方面的知识. 提供的服务或产品,是供年轻人或孩 ...

  2. 如何在网页设计中正确应用色彩?

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 如何在网页设计中正确应用色彩? 在网页设计中正确应用色彩从来都不是一件容易的事情!当网页上的产品介绍.推 ...

  3. 佳能打印机清零后不显示界面_Vignelli佳能在界面设计中的无形

    佳能打印机清零后不显示界面 Over the last year, for reasons that are not related to this article, I had the chance ...

  4. 浅析网页界面设计——首页设计

    杨科宇曾发表过一篇文章<浅析网页界面设计--首页设计>,文中为我们分享了如何进行首页的界面设计.现转载于此,供大家借鉴学习.全文如下: 首页设计,需开宗明义突出主题 开宗明义,无论是对于一 ...

  5. android 距离右边距,APP界面设计中间距与边距的要点

    原标题:APP界面设计中间距与边距的要点 广州UI设计别样设计表示,无论是做网页设计.后台系统设计.还是APP界面设计,都要遵守一定的设计规范,俗话说的好,无规矩不成方圆,在无需创新的情况下遵守设计规 ...

  6. 瓢城旅行社网页界面设计(HTML+CSS)

    瓢城旅行社网页界面设计(HTML+CSS) 目录 瓢城旅行社网页界面设计(HTML+CSS) 效果展示: 一.布局分析 二.部分代码 1.导航栏的导航设计 2 .搜索栏的实现 3 .首页内容的实现 4 ...

  7. 怎么做极简ui设计?UI界面设计中的极简原则【萧蕊冰】

    怎么做极简ui设计?近几年,互联网的飞速发展引起了科技领域的巨大浪潮,UI设计行业需求大量专业优秀人才,吸引了很多想要学习UI设计的人.UI设计也就是用户界面的设计,作为引导用户快速正确使用产品的主要 ...

  8. 设计灵感|如何在海报设计中正确使用双色调风格?

    双色调风格是将画面中两个不同的部分用两种不同的颜色叠加,产生出融合统一的画面效果,借助明亮的色彩来凸显画面所表达的内容,值得在海报设计中尝试一下! 集设网 www.ijishe.com 设计师交流社区 ...

  9. UI设计实例|界面设计中,版式实战运用以及设计思路

    什么是用户体验界面版式设计版式设计是现代设计艺术的重要组成部分,是视觉传达的重要手段.表面上看,它是一种关于编排的学问:实际上,它不仅是一种技能,更实现了技术与艺术的高度统一,版式设计是现代设计者所必 ...

最新文章

  1. Apache 与Tomcat
  2. GNOME启动时激活NumLock
  3. php 的包管理,php composer包管理器
  4. Cesium Vue开发环境搭建
  5. 【做题记录】CF1451E2 Bitwise Queries (Hard Version)
  6. 【英语学习】【Daily English】U05 Places L03 I'd like to open an account
  7. Spring Boot 2 - 初识与新工程的创建
  8. 《细说PHP》读书笔记
  9. 【Flask+SocketIO】如何用Flask做一个快捷迷你的局域网聊天室
  10. java毕业设计博弈论学习网站Mybatis+系统+数据库+调试部署
  11. 2006年最一针见血的199句话!经典
  12. c语言 发纸牌 实验报告,“21点”纸牌游戏实验报告
  13. python:微信支付链接转化成图片(data格式、PNG格式)
  14. 很抱歉,EXCEL遇到错误,使其无法正常工作,因此需要关闭EXCEL。是否希望我们立即修复?...
  15. 用户故事地图,产品经理必须掌握的分析利器
  16. Oracle表数据转换为XML格式数据
  17. 基于ssm框架实现网上购物管理系统【附项目源码+论文说明】
  18. VFW连接视频驱动不成功问题解决
  19. python从入门到实践:数据类型、文件处理
  20. 将一串数字拆分成单个数字

热门文章

  1. ubuntu qt creator编译出现:-1: error: Warning: File ' has modification time 3.8e+04 s in the future
  2. 大厂HR:我让你测试一个(电梯、杯子、笔、桌子、洗衣机),你会怎么测试它?
  3. 2021年安全员-C证考试资料及安全员-C证模拟考试题库
  4. 企业信息化由谁主导会更好?
  5. 学习笔记-局域网和城域网(二)
  6. 艾永亮:以超级产品战略的角度,写一份竞品分析
  7. 手机照片局部放大镜_想让旅行照与众不同?堪比PS的手机修图神器了解一下!...
  8. 用C#打开Windows自带的图片传真查看器
  9. 回撤率 python_回的解释|回的意思|汉典“回”字的基本解释
  10. java 航班_Java实现简单航班查询系统-Go语言中文社区