谈谈关于web网页设计中的留白原理
规划中存在许多对于留白的仅仅,零零星散在网上也看过许多,总感受比照零星,自个依据自个的感受,重新把留白的原理和一些技巧体系的概括收拾了以下,也对自个的一个提升。共享给咱们。本文章由没位道博主Chuckie Chang共享收拾, 期待咱们沟通。
外文:Whitespace
感知概念:归结于页面规划中的负空间,它将页面规划中的图形、文字、行列、图像和其它元素合理的规划到全部页面空间里,使其显得高雅调和并不损坏原有的空间结构,归于一种空间联系。
页面中留白的运用方式 :How to Use Whitespace
1.坚持导航和内容的明晰流通。
留白不代表必定要用白色,而是预留出一些规模来安排页面空间中的元素,安排页面中的细节: 导航、页眉页脚、图画、文字、列表、LOGO、图像等
如图所示:拿google主页和google商品做一个比照,同一个空间下的logo、导航、文字的明晰元素规划
2. 增强文字和图像的可读性。
研讨用户,规划师即使是创立一些简略简练的规划,其进程也是非常复杂的。
如图所示:这是国内外最闻名的专注写作的社区,标题与摘要,侧边栏与正文区的区隔
3. 建立平衡调和的规划。
网格规划是贯穿全部页面规划的,网格规划在美国视觉规划中是一门深入的学科,坚持各种网格的轻重,平衡规划模块。
如图所示:弹窗与正文的网格平衡,网格体系的黄金份额的平衡
4. 削减视觉疲惫。
充分使用颜色、光、影来适配人的视觉体系,削减疲惫,分配感官色。
如图所示:运用规划师网站和google音乐做一个比照,宽屏下的视觉效果和作品hover时的文字按钮间隔巨细区别, google音乐内容和纯色底色,头部底部的间隔区别
5. 能够给元素的艺术表现供给可继续的空间。
假使你孑立一人,站在一个2平米的石板上和站在一个10平米的石板上,在10平米的规模内你的周围能够放置音响,你能够跳舞(哈哈,抱歉,我即是热于跳舞的才打这个比方),在2平米的石板上你能够拿个麦克风喊麦,能够玩倒竖。留白也能够说能够预留贮存空间,便于拓展和使用。
如图所示:人的活动空间,文字的表达空间
结尾:
总归,咱们剖析留白的时分,需求引进原生的一些原理,会比照简单理解。比方美术中的透视,颜色联系,空间联系,比方网格规划理论,比方页面规划中的中英文字体标准,分辨率,安全宽度,首屏高度标准。经过这些原生的原理,咱们能更好的掌握规划规划和规划细节。OK!期望对咱们有协助。本文章由没位道博主Chuckie Chang共享收拾, 期待咱们沟通。
本文由:大律师http://www.maxlaw.cn/分享