怎样在响应式网站中运用＂留白＂艺术？
留白是网站设计中一门重要的工具，它能给网站带来很多益处。恰当的留白可以有效突出网站的主题，传递核心理念，吸引访客的注意力，能够简化画面，使各种元素的呈现更有层次、更加清晰，提高网站内容的可读性和可用性，还能增加网站的质感，树立独特的形象。留白通常意味着在页面的不同区块之间找到一个平衡点，在网站中运用好留白并不容易，但在响应式布局中用好留白难度就更上一层楼了。这是因为响应式网站通常需要设置不同的断点适应电脑、平板、手机等多种设备，页面上的留白必须确保在不同的设备上都能给用户提供友好的浏览体验。不过不用担心，小飞今天就是来送福利的，给大家介绍一下什么是留白，以及怎样在响应式网页设计中留白。
什么是留白?
留白最早是中国艺术作品创作中常用的一种手法，一些艺术大师比如画家等往往是留白的高手。在他们看来，留白有很高的审美价值，能够给观众留下想象的空间，做到"以无胜有"、"此时无声胜有声"。在网站中使用留白也能产生相似的作用。网站中的留白，又称负空间，是指合理安排各种设计元素的空白空间，达到页面布局干净、精致的效果。但是，很多人经常会走进一个误区，认为留白就是将网站的某块区域设置成白色。留白的"白"并不是指颜色的"白"，而是指的是空白的"白"，代表的是一种无装饰、无额外元素的状态(下图灰色的区域也是一种留白)。它的表现形式多样，图片、图表、外边距、列甚至是文字之间的空间都是留白的一种。
如何在响应式网站中留白?
响应式网站最大的一个特征就是在适应电脑屏幕的同时在手机等小屏幕上呈现良好，网站上留白是否恰当也要看它是否能够满足不同设备的需求，主要还是针对手机而言，以下几点建议也是基于这一点展开的。
重新设置导航菜单
导航菜单是做网站时首先会遇到的一个设计难点，但很少有设计师会将导航菜单与留白结合在一起。事实上，导航菜单处也应该注意留白问题。这是因为如果导航菜单处没有足够的留白空间，网站在小屏幕上进行显示时，极有可能会出现菜单栏断行(特别是在水平导航菜单的情况下)，视觉体验较差的效果，另外，移动用户在点击菜单项时也容易出现点击错误的情况，会影响了用户的操作体验。
如何做好导航菜单的留白?如果导航菜单栏上的选项太多，而它们确实又是不可获取的，我们可以使用隐藏式菜单，比如汉堡图标，给网站留足空间。不过在使用隐藏式菜单之前，我们可以给导航菜单做一些设置，让它在不同的设备上有以最适合的方式展现，下面小飞将通过两个栗子来具体分析如何使用。
就FLA这个网站而言，如果在电脑桌面上显示时，它会以上图这种侧面的导航菜单形式出现，而在小屏幕设备上展现时，左侧的导航菜单会隐藏到汉堡图标中，给用户充足的空间。除此以外，你可以看见左侧的菜单选项之间是有一定距离的，这是设计师特意添加的，更方便用户在小屏幕设备上进行点击等手势操作。
相对FLA的网站，Dorigati在导航菜单上的设置要更复杂一点。当用户通过电脑等大屏幕进行浏览时，导航菜单会水平排列在网站上;如果屏幕再小一点，导航菜单会以两行呈现在用户面前(如上图)，有点栅格系统的意味;而当网站需要适应960px的断点时，导航菜单的布局会从水平变成垂直的，出现在网站的侧面，Logo也会相应的改变位置;如果断点再小一点，导航菜单就会隐藏到汉堡图标中，出现在页面的上方。这种方法听上去比较繁琐，但是它确实是比较实用的一个解决方案，可以让网站在确保恰当的留白的同时给不同设备的用户提供自然、友好的浏览体验。
更加关注垂直方向的留白
过去在设计针对电脑桌面的网站时，我们常常会注意网站上不同元素在水平方向上的间距。但当我们开始安排响应式网站的留白时，我们应该将更多的注意力放在元素垂直方面上的距离。这是因为手机屏幕常常是竖直的。如果不注意元素在垂直方向的间距，会影响各种元素在手机等小屏幕上的显示，影响视觉效果的呈现。另外，垂直方向空白区域或留白的多少从某种程度上也决定着网站在手机等移动设备上的加载速度。下面还是让栗子来证明吧!
下图是Jisc网站在手机屏幕上的显示，看上去比较舒服，这都归功于网站设计师在字体、图片等元素之间留足了一定的空间。Jisc网站在电脑桌面呈现时会有很多水平导向的区块，其实下图中的Shared services、sector deals是并列关系，在电脑屏幕上是以水平方向呈现的，但设计师并没有只关注水平方向的间距，同时也考虑到了网站在小屏幕上垂直呈现的习惯，让网站更清晰、可读性更高。
- 上一篇： 网站稳定运行绝非小事 保障网站安全需要面面俱到
- 下一篇： 运营社群完整的运营方案
推荐站点
牛嘎-vip视频解析成免费
牛嘎vip视频解析网提供最专业的vip会员视频解析，具体包括有：vip电影和vip电视剧免费看、全民解析VIP视频免费看、在线解析、vip视频解析、优酷vip解析、爱奇艺vip解析、腾讯vip解析、乐视vip解析、全网影视vip、芒果vip解析等。
niuga.cn户户通卫星直播中心
户户通,国家新闻出版广电总局广播电视卫星直播管理中心,广播电视卫星直播管理中心,卫星直播管理中心,卫星直播中心。 国家广播电视总局广播电视卫星直播管理中心（简称：卫星直播中心）成立于2011年10月，是经中央编办批准设立的总局直属事业单位。主要负责卫星直播节目平台的建设、播出、运行、管理；组织开展卫星直播广播电视公共服务工作；服务管理卫星直播广播电视用户，受理用户反馈意见和投诉；推进卫星直播广播电视新技术新业态创新融合发展；制订卫星直播技术发展规划，跟踪研究相关新技术,组织技术开发和应用研究；承办总局交办的其他事项。
www.huhutv.com.cnGBT乐赏游戏空间
GBT乐赏游戏空间网站其实是一个共享网盘，其中整理了2006年到现在的各种热门的大型单机游戏，网站内是以时间分类的文件夹。由于是共享网盘，所以网站目前不支持游戏检索，但可以使用“Ctrl+F”进行页面搜索。
gbtgame.ysepan.comopenAI
OpenAI 的知名度在今年 1 月初还仅限于科技圈内，但伴随着 ChatGPT 的全球火爆，OpenAI 进入公众视野。OpenAI 自推出 ChatGPT 预览版之后，网站访问量快速攀升，目前已跻身全球 TOP50 网站。 OpenAI 网站在去年 11 月的全月访问量为 1830 万，主要访问人群是技术社区。而在今年 1 月份，该网站的访问量突破了 6.72 亿，增长了 3572%。 OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.
openai.com互联网档案馆
互联网档案馆（网址web.archive.org），是一个公益项目，专门收集互联网上的各种信息，例如视频、音频、网页等等并存储在他家的服务器中。 互联网档案馆（英语：Internet Archive）是美国的一个由Alexa创始人布鲁斯特·卡利创办于1996年的非营利性的、提供互联网多媒体资料文件阅览服务的数字图书馆，总部位于加利福尼亚州旧金山的列治文区，其使命是“普及所有知识”（英语：universal access to all knowledge.）[注 1][注 2]。该“档案馆”提供的数字资料有如网站、网页、图形材料音乐、视频、音频、软件、动态图像和数百万书籍等的永久性免费储存及获取的副本。 迄至2012年10月，其信息储量达到10PB（即10,240TB）[5][6]。除此之外，该档案馆也是网络开放与自由化的倡议者之一。 ——摘自维基百科 其中值得关注的就是他们的网页备份项目。这个项目已经做到了对于非常多的网页，对于每一个版本都留下了历史记录。即通过这个项目可以访问大多数网页的任意时间节点的版本，即使这个网站本身已经关停. 为了将这个由字符组成的文明尽可能地保存下来，美国的一家名为互联网档案馆（Internet Archive）的非营利性数字图书馆，收集了大量的网页、视频、音频、软件和电子书。 互联网档案馆从 1996 年起利用网络爬虫抓取了大量网页并存档，至今已经超过 3510 亿个网页，其称为「时光机」（Wayback Machine）项目。 「时光机」的页面非常简洁，只有一个输入栏和搜索按钮，有点像 Google 等搜索引擎。在输入栏输入你想「回到过去」的网站，选择想要穿越日期，就能查看当天被保存下来的网页截图。
web.archive.org阿里研究院
阿里研究院成立于2007年，是国内互联网企业中第一家内设研究智库。过去12年，阿里研究院见证、参与和推动了电子商务、数字经济的发展，已成为在国内外数字经济和数字治理研究领域具有广泛影响力的企业智库。 阿里研究院秉承开放、分享、透明、责任的互联网精神，扎根阿里巴巴数字经济体丰富的商业生态，依托海量的数据和案例，洞察新知、共创未来，引领着数字经济和数字治理研究。
www.aliresearch.com全历史
全历史(Allhistory）以AI知识图谱为核心引擎，通过高度时空化、关联化数据的方式构造及展现数字人文内容，尤其是历史知识。让用户沉浸在纵横开阔、左图右史的（历史、人文、社科等）知识海洋中。
www.allhistory.com易搜-网盘搜索
易搜（网站）一个在线网盘资源搜索网站，界面清爽干净而且完全免费，一键聚合四大网盘资源搜索，非常给力！ 易搜(yiso.fun)，一个在线网盘资源搜索网站，一次搞定四大平台！直接在输入框里输入关键词即可开始检索，可以选择特定的搜索线路，或者直接搜索四大网盘资源。
yiso.fun软仓
软仓是一个集合专业软件的导航网站，免费下载供学习使用，本站承诺无毒无广告，纯公益项目，不以此盈利. 软仓是一款免费的设计软件分享网站，收录的都是设计软件，已收录 385 个专业软件，包括 Adobe 系列、AutoCAD、平面设计、三维设计、影视动画、建筑设计、机械设计、电子电路。 软件都是学习版，基本更新到了最新版本，提供了百度网盘下载链接，直接点击即可获取保存或下载。 开发者承诺网站永远免费下载，永远保持网站面貌干净整洁，纯公益项目，不以此盈利为建站目的，全凭兴趣爱好。
www.ruancang.net