18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

谈谈web网页页面设计方案中的留白基本原理

2021-03-09分享 "> 对不起,没有下一图集了!">

谈谈web网页页面设计方案中的留白基本原理


短视頻,自新闻媒体,达人种草1站服务

 

设计方案中存在许多有关留白的只是,零零散散在网络上也看过许多,总觉得较为零散,自身依据自身的觉得,再次把留白的基本原理和1些技能系统软件的梳理梳理了下列,也对自身的1个提高。共享给大伙儿。本文章内容由没位道博主Chuckie Chang共享梳理, 欢迎大伙儿沟通交流。

外文:Whitespace

认知定义:归结于网页页面设计方案中的负室内空间,它将网页页面设计方案中的图型、文本、队伍、照片和其它元素有效的合理布局到全部网页页面室内空间里,使其显得雅致和睦其实不破坏原来的室内空间构造,属于1种室内空间关联。

网页页面中留白的应用方法 :How to Use Whitespace

1.维持导航栏和內容的清楚顺畅。

留白不意味着1定要用白色,而是预留出1些范畴来机构网页页面室内空间中的元素,机构网页页面中的细节: 导航栏、页眉页脚、图象、文本、目录、LOGO、照片等

如图所示:拿google主页和google商品做1个比照,同1个室内空间下的logo、导航栏、文本的清楚元素合理布局

 

 

2. 提高文本和照片的可读性。

科学研究客户,设计方案师即便是建立1些简易简约的设计方案,其全过程也是是非非常繁杂的。

如图所示:这是中国外最著名的潜心创作的小区,题目与引言,侧面栏与文章正文区的区隔

 

 

3. 创建均衡和睦的合理布局。

网格合理布局是贯穿全部网页页面设计方案的,网格设计方案在美国视觉效果设计方案中是1门深层次的学科,维持各种各样网格的轻重,均衡设计方案控制模块。

如图所示:弹窗与文章正文的网格均衡,网格系统软件的金子占比的均衡

 

 

 

 

4. 降低视觉效果疲惫。

充足运用颜色、光、影来兼容人的视觉效果系统软件,降低疲惫,配制感官色。

如图所示:应用设计方案师网站和谷歌歌曲做1个比照,宽屏下的视觉效果实际效果和著作hover时的文本按钮间隔尺寸差别, 谷歌歌曲內容和单色底色,头顶部底部的间距差别

 

 

5. 可以给元素的造型艺术主要表现出示可不断的室内空间。

假若你孤独1人,站在1个2平米的石板上和站在1个10平米的石板上,在10平米的范畴内你的周边能够置放音响,你能够舞蹈(哈哈,很抱歉,我便是热于舞蹈的才打这个比如),在2平米的石板上你能够拿个话筒喊麦,能够玩倒立。留白还可以说可以预留存储室内空间,便于拓展和运用。

如图所示:人的主题活动室内空间,文本的表述室内空间

 

 

尾声:

总而言之,大家剖析留白的情况下,必须引进原生态的1些基本原理,会较为非常容易了解。例如工艺美术中的透視,颜色关联,室内空间关联,例如网格设计方案基础理论,例如网页页面设计方案中的中英文本体标准,辨别率,安全性宽度,首屏高宽比标准。根据这些原生态的基本原理,大家能更好的掌握设计方案合理布局和设计方案细节。OK!期待对大伙儿有协助。本文章内容由没位道博主Chuckie Chang共享梳理, 欢迎大伙儿沟通交流。


"> 对不起,没有下一图集了!">
在线咨询