企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

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

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

TAGS:网站设计

QQ截图20160517093200OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联


OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计中存在很多关于留白的只是,零零散散在网上也看过很多,总感觉比较零散,自己根据自己的感觉,重新把留白的原理和一些技巧系统的归纳整理了一下,也对自己的一个提升。分享给大家。 欢迎大家交流。OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

感知概念:归结于网页设计中的负空间,它将网页设计中的图形、文字、行列、图片和其它元素合理的布局到整个页面空间里,使其显得优雅和谐并不破坏原有的空间结构,属于一种空间关系。OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网页中留白的运用方式 :How to Use WhitespaceOKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1.保持导航和内容的清晰流畅。 OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

留白不代表一定要用白色,而是预留出一些范围来组织页面空间中的元素,组织页面中的细节: 导航、页眉页脚、图像、文字、列表、LOGO、图片等  OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如图所示:拿google首页和google产品做一个对比,同一个空间下的logo、导航、文字的清晰元素布局OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联


OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联


OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2. 增强文字和图片的可读性。 OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

研究用户,设计师即使是创建一些简单简洁的设计,其过程也是非常复杂的。  OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如图所示:这是国内外知名的专注写作的社区,标题与摘要,侧边栏与正文区的区隔OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3. 建立平衡和谐的布局。 OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网格布局是贯穿整个网页设计的,网格设计在美国视觉设计中是一门深入的学科,保持各种网格的轻重,平衡设计模块。  OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如图所示:弹窗与正文的网格平衡,网格系统的黄金比例的平衡OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

379c6167f6e399b1d77809eaOKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

4. 减少视觉疲劳。 OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

充分利用色彩、光、影来适配人的视觉系统,减少疲劳,调配感官色。  OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如图所示:使用设计师网站和谷歌音乐做一个对比,宽屏下的视觉效果和作品hover时的文字按钮间距大小差异, 谷歌音乐内容和纯色底色,头部底部的距离差异OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

5. 能够给元素的艺术表现提供可持续的空间。 OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

倘若你孤单一人,站在一个2平米的石板上和站在一个10平米的石板上,在10平米的范围内你的周围可以放置音响,你可以跳舞(哈哈,抱歉,我就是热于跳舞的才打这个比方),在2平米的石板上你可以拿个麦克风喊麦,可以玩倒立。留白也可以说能够预留储存空间,便于扩展和利用。  OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如图所示:人的活动空间,文字的表达空间OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网页设计</a> Web优化 <a href=https://www.yzlink.cn target=_blank class=infotextkey>网站优化</a> 网站留白设计OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

尾声:OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

总之,我们分析留白的时候,需要引入原生的一些原理,会比较容易理解。比如美术中的透视,色彩关系,空间关系,比如网格设计理论,比如网页设计中的中英文字体规范,分辨率,安全宽度,首屏高度规范。通过这些原生的原理,我们能更好的把握设计布局和设计细节。OK!希望对大家有帮助。OKr北京网站设计开发,小程序开发,公众号,微信开发-云智互联

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

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

客户评价

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

    潘涛

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

    谭娇

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

    陈曦

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

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

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