您好,欢迎来到网上分类目录网!
*
大众美图 |12个完全免费可以发外链网站当前位置:网上分类目录网 » 站长资讯 » 资讯文章 » 站长新闻 » 文章详细 订阅RssFeed

怎样在响应式网站中运用"留白"艺术?

来源:本站原创 浏览:622次 时间:2020-08-21

留白是网站设计中一门重要的工具,它能给网站带来很多益处。恰当的留白可以有效突出网站的主题,传递核心理念,吸引访客的注意力,能够简化画面,使各种元素的呈现更有层次、更加清晰,提高网站内容的可读性和可用性,还能增加网站的质感,树立独特的形象。留白通常意味着在页面的不同区块之间找到一个平衡点,在网站中运用好留白并不容易,但在响应式布局中用好留白难度就更上一层楼了。这是因为响应式网站通常需要设置不同的断点适应电脑、平板、手机等多种设备,页面上的留白必须确保在不同的设备上都能给用户提供友好的浏览体验。不过不用担心,小飞今天就是来送福利的,给大家介绍一下什么是留白,以及怎样在响应式网页设计中留白。

什么是留白?

留白最早是中国艺术作品创作中常用的一种手法,一些艺术大师比如画家等往往是留白的高手。在他们看来,留白有很高的审美价值,能够给观众留下想象的空间,做到"以无胜有"、"此时无声胜有声"。在网站中使用留白也能产生相似的作用。网站中的留白,又称负空间,是指合理安排各种设计元素的空白空间,达到页面布局干净、精致的效果。但是,很多人经常会走进一个误区,认为留白就是将网站的某块区域设置成白色。留白的"白"并不是指颜色的"白",而是指的是空白的"白",代表的是一种无装饰、无额外元素的状态(下图灰色的区域也是一种留白)。它的表现形式多样,图片、图表、外边距、列甚至是文字之间的空间都是留白的一种。


如何在响应式网站中留白?

响应式网站最大的一个特征就是在适应电脑屏幕的同时在手机等小屏幕上呈现良好,网站上留白是否恰当也要看它是否能够满足不同设备的需求,主要还是针对手机而言,以下几点建议也是基于这一点展开的。

重新设置导航菜单

导航菜单是做网站时首先会遇到的一个设计难点,但很少有设计师会将导航菜单与留白结合在一起。事实上,导航菜单处也应该注意留白问题。这是因为如果导航菜单处没有足够的留白空间,网站在小屏幕上进行显示时,极有可能会出现菜单栏断行(特别是在水平导航菜单的情况下),视觉体验较差的效果,另外,移动用户在点击菜单项时也容易出现点击错误的情况,会影响了用户的操作体验。

如何做好导航菜单的留白?如果导航菜单栏上的选项太多,而它们确实又是不可获取的,我们可以使用隐藏式菜单,比如汉堡图标,给网站留足空间。不过在使用隐藏式菜单之前,我们可以给导航菜单做一些设置,让它在不同的设备上有以最适合的方式展现,下面小飞将通过两个栗子来具体分析如何使用。


就FLA这个网站而言,如果在电脑桌面上显示时,它会以上图这种侧面的导航菜单形式出现,而在小屏幕设备上展现时,左侧的导航菜单会隐藏到汉堡图标中,给用户充足的空间。除此以外,你可以看见左侧的菜单选项之间是有一定距离的,这是设计师特意添加的,更方便用户在小屏幕设备上进行点击等手势操作。


相对FLA的网站,Dorigati在导航菜单上的设置要更复杂一点。当用户通过电脑等大屏幕进行浏览时,导航菜单会水平排列在网站上;如果屏幕再小一点,导航菜单会以两行呈现在用户面前(如上图),有点栅格系统的意味;而当网站需要适应960px的断点时,导航菜单的布局会从水平变成垂直的,出现在网站的侧面,Logo也会相应的改变位置;如果断点再小一点,导航菜单就会隐藏到汉堡图标中,出现在页面的上方。这种方法听上去比较繁琐,但是它确实是比较实用的一个解决方案,可以让网站在确保恰当的留白的同时给不同设备的用户提供自然、友好的浏览体验。

更加关注垂直方向的留白

过去在设计针对电脑桌面的网站时,我们常常会注意网站上不同元素在水平方向上的间距。但当我们开始安排响应式网站的留白时,我们应该将更多的注意力放在元素垂直方面上的距离。这是因为手机屏幕常常是竖直的。如果不注意元素在垂直方向的间距,会影响各种元素在手机等小屏幕上的显示,影响视觉效果的呈现。另外,垂直方向空白区域或留白的多少从某种程度上也决定着网站在手机等移动设备上的加载速度。下面还是让栗子来证明吧!

下图是Jisc网站在手机屏幕上的显示,看上去比较舒服,这都归功于网站设计师在字体、图片等元素之间留足了一定的空间。Jisc网站在电脑桌面呈现时会有很多水平导向的区块,其实下图中的Shared services、sector deals是并列关系,在电脑屏幕上是以水平方向呈现的,但设计师并没有只关注水平方向的间距,同时也考虑到了网站在小屏幕上垂直呈现的习惯,让网站更清晰、可读性更高。

推荐站点

  • 网站库网站库

    网站库是全人工编辑的开放式网站分类目录,收录国内外、各行业优秀网站,旨在为用户提供更全面的网站分类目录检索、优秀网站参考、网站推广服务、网站黄页、网上娱乐冲浪导航网站。

    www.wangzhanku.com
  • 导航啦分类目录导航啦分类目录

    导航啦分类目录-您网上冲浪导航专家!导航啦分类目录-专业提供为广大站长收录的开放式网站分类目录平台,收集国内外、各行业优秀正规网站,全人工编辑收录,为百度、谷歌、有道、搜狗、必应等搜索引擎提供索引参考, 同时也是站长推广网站值得信任选择的平台。

    www.daohangla.com
  • 网站库网站库

    网站库wangzhanku.cn是为广大网民提供高质量网上娱乐冲浪导航网站,汇聚众多高质量娱乐、工作、学习等网站让广大网民轻松畅游互联网,同时面向广大互联网站长提供免费的网址收录、免费网站收录、免费外链平台。

    www.wangzhanku.cn
  • 网址库网址库

    网址库是免费的网站分类目录收录网站,致力于建立全面的网址库平台:免费收录网站、网址;收录国内外各行业优秀的网站网址,让你轻松畅游互联网,找到您想要的网站、信息资源;加入网址库让我们共同成长。网址库!网址酷!上网,您需要网址库! 网址大全,实用网址一网打尽!

    www.wangzhiku.cn
  • 迈克菲McAfee AVERT迈克菲McAfee AVERT

    McAfee官方中文译名为“迈克菲”。公司的总部位于美国加州圣克拉拉市,致力于创建最佳的计算机安全解决方案,以防止网络入侵并保护计算机系统免受下一代混合攻击和威胁。迈克菲是全球最大的专业安全技术公司。所提供的具有前瞻性且经实践验证的解决方案和服务,可为全球范围内的系统和网络提供安全保护,同时,能够帮助家庭用户和各种规模的企业防范恶意软件和新出现的网络威胁。 迈克菲是网络安全和可用性解决方案的供应商。所有McAfee产品均以著名的防病毒研究机构(如 McAfee AVERT)为后盾,该机构可以保护McAfee消费者免受病毒的攻击。McAfee杀毒软件是全球畅销的杀毒软件之一,McAfee防毒软件,除了操作界面更新外,也将该公司的WebScanX功能合在一起,增加了许多新功能。除了帮你侦测和清除病毒,它还有VShield自动监视系统,会常驻在System Tray,当从磁盘、网络上、E-mail文件中开启文件时便会自动侦测文件的安全性。

    www.mcafee.com
  • 北京大学公开课北京大学公开课

    北京大学公开课百年北大,是一代又一代学子梦想过的大学殿堂,北大人作为社会菁英和优秀人才的代表,更是有许多值得我们借鉴和学习的成功经验和智慧,即使我们没有进入北大学习的机会,也一样可以从他们丰富的人生历练中汲取营养,帮助我们更快地走向成功。 本书汇集了北大哲学、心理、管理、成功、气质和幸福6门最受欢迎的公开课,甄选了众多北大教授和著名北大学子的思想精髓、经验之谈,其中包括胡适、梁漱溟、林语堂、季羡林、周国平、俞敏洪、李彦宏等人的精彩言论和真实的人生经历,并结合大量生动的故事,详尽地阐述了北大人的生命智慧和人生哲理,带给世人难能可贵的经验启迪。

    opencourse.pku.edu.cn