谈谈web网页设计中的留白原理(2016版)

[复制链接]
查看: 1452|回复: 25

1968

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
59454
发表于 2016-5-27 10:46:47 | 显示全部楼层 |阅读模式



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


外文:Whitespace


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


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


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


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


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


et203271149091.jpg


et203271149092.jpg


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


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


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


et203271149093.jpg


et203271149094.jpg


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


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


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


et203271149095.jpg


et203271149096.jpg





et203271149097.jpg


4. 减少视觉疲劳。


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


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


et203271149098.jpg


et203271149099.jpg


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


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


如图所示:人的活动空间,文字的表达空间


et2032711490910.jpg


et2032711490911.jpg


尾声:


总之,我们分析留白的时候,需要引入原生的一些原理,会比较容易理解。比如美术中的透视,色彩关系,空间关系,比如网格设计理论,比如网页设计中的中英文字体规范,分辨率,安全宽度,首屏高度规范。通过这些原生的原理,我们能更好的把握设计布局和设计细节。OK!希望对大家有帮助。本文章由没位道博主Chuckie Chang分享整理, 欢迎大家交流。
回复

使用道具 举报

1943

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
58422
发表于 2016-6-11 13:06:29 | 显示全部楼层
很不错
回复 支持 反对

使用道具 举报

1968

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
59454
 楼主| 发表于 2016-6-11 13:22:46 | 显示全部楼层
真心顶
回复 支持 反对

使用道具 举报

1584

主题

1万

帖子

5万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
58643
发表于 2016-6-11 13:46:13 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

1943

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
58422
发表于 2016-6-11 12:55:24 | 显示全部楼层
不错不错
回复 支持 反对

使用道具 举报

1943

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
58422
发表于 2016-6-11 13:37:24 | 显示全部楼层
LZ真是人才
回复 支持 反对

使用道具 举报

1943

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
58422
发表于 2016-6-24 11:54:15 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

1968

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
59454
 楼主| 发表于 2016-6-24 11:56:13 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

1943

主题

1万

帖子

5万

积分

网站编辑

Rank: 8Rank: 8

积分
58422
发表于 2016-6-24 11:20:50 | 显示全部楼层
真心顶
回复 支持 反对

使用道具 举报

1584

主题

1万

帖子

5万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
58643
发表于 2016-6-24 11:32:47 | 显示全部楼层
难得一见的好帖
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩推荐

网站优化如何利用META标签提升网站关键词排

2017-07-04 陕西

如何做好网站的站内优化以及网站建设的SEO

2018-02-27 淄博

网站如何用三个方法做到让用户和搜索引擎都

2018-02-27 青岛

为什么为了更好的SEO优化而在网站上拼命写

2018-02-27 泰安

为何现在较少的网站优化站外这一个非常重要

2018-02-27 菏泽

网站优化做不好怎么办?SEO服务分析网站优化

2017-06-23 海南

归纳总结网站推广中seo优化为何离不开多元

2018-02-27 日照

美丽说的SEOseo多牛

2016-06-07 四平

让SEO服务更专业

  • 帝国网络服务有限公司
  • 客服电话:400-050-4004
  • 深圳市南山区西丽硅谷
    大学城创业园C区117

精彩SEO教程,快速SEO查询

关注我们

Copyright 威海SEO优化  Powered by©帝国网络优化公司  技术支持:威海SEO优化服务公司