企业形象网站建设解决方案 | 集团公司网站建设解决方案 | 协会门户网站建设解决方案

您所在位置：首页 > 建站知识

网站设计

Website development

谈谈web网页设计中的留白原理

发布时间：2016-05-18 10:44:16

TAGS：网站设计

QQ截图20160517093200

设计中存在很多关于留白的只是，零零散散在网上也看过很多，总感觉比较零散，自己根据自己的感觉，重新把留白的原理和一些技巧系统的归纳整理了一下，也对自己的一个提升。分享给大家。欢迎大家交流。

感知概念：归结于网页设计中的负空间，它将网页设计中的图形、文字、行列、图片和其它元素合理的布局到整个页面空间里，使其显得优雅和谐并不破坏原有的空间结构，属于一种空间关系。

网页中留白的运用方式：How to Use Whitespace

1.保持导航和内容的清晰流畅。

留白不代表一定要用白色，而是预留出一些范围来组织页面空间中的元素，组织页面中的细节：导航、页眉页脚、图像、文字、列表、LOGO、图片等

如图所示：拿google首页和google产品做一个对比，同一个空间下的logo、导航、文字的清晰元素布局

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

2. 增强文字和图片的可读性。

研究用户，设计师即使是创建一些简单简洁的设计，其过程也是非常复杂的。

如图所示：这是国内外知名的专注写作的社区，标题与摘要，侧边栏与正文区的区隔

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

3. 建立平衡和谐的布局。

网格布局是贯穿整个网页设计的，网格设计在美国视觉设计中是一门深入的学科，保持各种网格的轻重，平衡设计模块。

如图所示：弹窗与正文的网格平衡，网格系统的黄金比例的平衡

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

379c6167f6e399b1d77809ea

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

4. 减少视觉疲劳。

充分利用色彩、光、影来适配人的视觉系统，减少疲劳，调配感官色。

如图所示：使用设计师网站和谷歌音乐做一个对比，宽屏下的视觉效果和作品hover时的文字按钮间距大小差异, 谷歌音乐内容和纯色底色，头部底部的距离差异

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

5. 能够给元素的艺术表现提供可持续的空间。

倘若你孤单一人，站在一个2平米的石板上和站在一个10平米的石板上，在10平米的范围内你的周围可以放置音响，你可以跳舞(哈哈，抱歉，我就是热于跳舞的才打这个比方)，在2平米的石板上你可以拿个麦克风喊麦，可以玩倒立。留白也可以说能够预留储存空间，便于扩展和利用。

如图所示：人的活动空间，文字的表达空间

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计

尾声：

总之，我们分析留白的时候，需要引入原生的一些原理，会比较容易理解。比如美术中的透视，色彩关系，空间关系，比如网格设计理论，比如网页设计中的中英文字体规范，分辨率，安全宽度，首屏高度规范。通过这些原生的原理，我们能更好的把握设计布局和设计细节。OK！希望对大家有帮助。

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,6479,0.html

上一篇：云智互联解析网页重设计的7个常见误区与解决方案

下一篇：北京网站制作效果怎么样

您还有可能感兴趣的内容

Related articles

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

相关程序

更多+

客户评价

更多+

感谢云智互联，系统提前完成，在整个项目周期内，云智互联对待我们并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向我们提出更合理、更有效的解决方案，并快速、细致地完成我们的每一个需求，再次感谢以至诚之心做事的云智互联团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的云智互联（北京）科技有限公司，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理

解决方案

更多+

建站经验

更多+

中国互联网协会成员

联系方式

工作时间：09:30-18:30
咨询电话：010-64758810
客服邮箱：net@cnlink.cc

服务领域

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435　京ICP备14020656号
本网站设计已受版权保护，任何公司及个人不得复制，违者将依法追究责任，特此声明。法律顾问：北京市辉瑞律师事务所。