谈谈web网页设计中的留白原理(2016版)
2016-05-17 00:00
447 查看
设计中存在很多关于留白的只是,零零散散在网上也看过很多,总感觉比较零散,自己根据自己的感觉,重新把留白的原理和一些技巧系统的归纳整理了以下,也对自己的一个提升。分享给大家。本文章由没位道博主Chuckie Chang分享整理, 欢迎大家交流。
外文:Whitespace
感知概念:归结于网页设计中的负空间,它将网页设计中的图形、文字、行列、图片和其它元素合理的布局到整个页面空间里,使其显得优雅和谐并不破坏原有的空间结构,属于一种空间关系。
网页中留白的运用方式 :How to Use Whitespace
1.保持导航和内容的清晰流畅。
留白不代表一定要用白色,而是预留出一些范围来组织页面空间中的元素,组织页面中的细节: 导航、页眉页脚、图像、文字、列表、LOGO、图片等
如图所示:拿google首页和google产品做一个对比,同一个空间下的logo、导航、文字的清晰元素布局
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/8c38b83537332e88b7323d3db1dc480d)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/415f6bd2a1c87bd26ac1d80ccf8a68b3)
2. 增强文字和图片的可读性。
研究用户,设计师即使是创建一些简单简洁的设计,其过程也是非常复杂的。
如图所示:这是国内外最知名的专注写作的社区,标题与摘要,侧边栏与正文区的区隔
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/6f217ae23c47eac761b9a93b13cca0f5)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/9de346f93d7d2b05b7292591072dc3d0)
3. 建立平衡和谐的布局。
网格布局是贯穿整个网页设计的,网格设计在美国视觉设计中是一门深入的学科,保持各种网格的轻重,平衡设计模块。
如图所示:弹窗与正文的网格平衡,网格系统的黄金比例的平衡
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/b3e9c9c4e8ad0a75e305777108926d8d)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/3f6c829c2b8f6069c25a1761fa9b26f0)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/b9e229f8e0a43e1418e3d17b6761f03f)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/b2856d98dd7a3c58182d882cbf45356b)
4. 减少视觉疲劳。
充分利用色彩、光、影来适配人的视觉系统,减少疲劳,调配感官色。
如图所示:使用设计师网站和谷歌音乐做一个对比,宽屏下的视觉效果和作品hover时的文字按钮间距大小差异, 谷歌音乐内容和纯色底色,头部底部的距离差异
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/e1c64549536301c10cab789b57a3bb85)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/e2ff91107b5da568dbbc09ff1afd0b36)
5. 能够给元素的艺术表现提供可持续的空间。
倘若你孤单一人,站在一个2平米的石板上和站在一个10平米的石板上,在10平米的范围内你的周围可以放置音响,你可以跳舞(哈哈,抱歉,我就是热于跳舞的才打这个比方),在2平米的石板上你可以拿个麦克风喊麦,可以玩倒立。留白也可以说能够预留储存空间,便于扩展和利用。
如图所示:人的活动空间,文字的表达空间
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/cb9b6a66dc6a6aace46b00cd457876b4)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201606/38128fa9674d07b43303c12bd5af5baf)
尾声:
总之,我们分析留白的时候,需要引入原生的一些原理,会比较容易理解。比如美术中的透视,色彩关系,空间关系,比如网格设计理论,比如网页设计中的中英文字体规范,分辨率,安全宽度,首屏高度规范。通过这些原生的原理,我们能更好的把握设计布局和设计细节。OK!希望对大家有帮助。本文章由没位道博主Chuckie Chang分享整理, 欢迎大家交流。
外文:Whitespace
感知概念:归结于网页设计中的负空间,它将网页设计中的图形、文字、行列、图片和其它元素合理的布局到整个页面空间里,使其显得优雅和谐并不破坏原有的空间结构,属于一种空间关系。
网页中留白的运用方式 :How to Use Whitespace
1.保持导航和内容的清晰流畅。
留白不代表一定要用白色,而是预留出一些范围来组织页面空间中的元素,组织页面中的细节: 导航、页眉页脚、图像、文字、列表、LOGO、图片等
如图所示:拿google首页和google产品做一个对比,同一个空间下的logo、导航、文字的清晰元素布局
2. 增强文字和图片的可读性。
研究用户,设计师即使是创建一些简单简洁的设计,其过程也是非常复杂的。
如图所示:这是国内外最知名的专注写作的社区,标题与摘要,侧边栏与正文区的区隔
3. 建立平衡和谐的布局。
网格布局是贯穿整个网页设计的,网格设计在美国视觉设计中是一门深入的学科,保持各种网格的轻重,平衡设计模块。
如图所示:弹窗与正文的网格平衡,网格系统的黄金比例的平衡
4. 减少视觉疲劳。
充分利用色彩、光、影来适配人的视觉系统,减少疲劳,调配感官色。
如图所示:使用设计师网站和谷歌音乐做一个对比,宽屏下的视觉效果和作品hover时的文字按钮间距大小差异, 谷歌音乐内容和纯色底色,头部底部的距离差异
5. 能够给元素的艺术表现提供可持续的空间。
倘若你孤单一人,站在一个2平米的石板上和站在一个10平米的石板上,在10平米的范围内你的周围可以放置音响,你可以跳舞(哈哈,抱歉,我就是热于跳舞的才打这个比方),在2平米的石板上你可以拿个麦克风喊麦,可以玩倒立。留白也可以说能够预留储存空间,便于扩展和利用。
如图所示:人的活动空间,文字的表达空间
尾声:
总之,我们分析留白的时候,需要引入原生的一些原理,会比较容易理解。比如美术中的透视,色彩关系,空间关系,比如网格设计理论,比如网页设计中的中英文字体规范,分辨率,安全宽度,首屏高度规范。通过这些原生的原理,我们能更好的把握设计布局和设计细节。OK!希望对大家有帮助。本文章由没位道博主Chuckie Chang分享整理, 欢迎大家交流。
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 创业如何选择WEB开发语言
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- 自学成才的秘密:115个 web Develop 资源
- 使用批处理修改web打印设置笔记 适用于IE
- Apache Web让JSP“动”起来
- 谈谈网页设计中的字体应用Font Set
- web下载的ActiveX控件自动更新
- 推荐六款WEB上传组件性能测试与比较第1/10页
- 关于三种主流WEB架构的思考
- 使用 Iisext.vbs 列出 Web 服务扩展文件的方法
- 使用 Iisext.vbs 删除 Web 服务扩展文件的方法
- 使用 iisext.vbs 禁用 Web 服务扩展的方法
- 用vbs 实现从剪贴板中抓取一个 URL 然后在浏览器中打开该 Web 站点
- web标准知识——从p开始,循序渐进