Godzilla. 2018-03-16
网站建设
关于网格系统在网站建设中的全面运用(三)
强调重点
平衡和简单的布局通常比过于复杂的布局更舒适。另一方面,你必须要小心,不要一直使用规范的手法而使你的版面看起来很枯燥无聊。例如,为了强调,您可以通过合并多个列来脱离网格或突出某些设计元素。这可以创建可视化的兴趣视点,并在您的主要设计元素中建立更好的层次结构。
从网格系统中跳出来创建重点,可以通过突出关键部分来极大地改进你的设计,或者让它看起来真的很傻。Wallpaper网站在突破四栏的时候做得很好,并着重强调了他们想让你看的视频区域。
但是你要小心,打破你的网格的节奏往往会导致一个看起来很坏或者过分强调太多部分的布局,这样就不会起到真正的强调作用。
(Etsy网站)
(Wallpaper网站)
控制界限
网站建设中一个常出现的问题是何时在设计中使用网格系统?答案是:永远!使用网格系统总是一个好的决定,因为它们有助于平衡、层次结构、整齐性和一致性。
总有这样一种观点,即网格系统限制了你的工作。但这是一件好事,因为网格系统实际上可以促进你的创造力,并以建设性的方式引导你的决定。这样的限制对你的工作来说是一个很好的起点。所以当你有一个限制框架,比如你的客户给你的广告的尺寸,你就有一个起点来围绕它建立你的设计。网格的大小可以让你注意到这些限制因素。
在下图的例子中,从华尔街日报网站界面,你可以看到一个标记为绿色广告的区域,网格系统所产生的限制效果导致设计决策与维度构建的内容在这一区域生成。
(The Wall Street Journal网站)
心智地图
如果你设计的网页很成功了,你的网格系统还将帮助你建立一个你的网站页面独特的心智模型。这也意味着你的页面的结构不应该完全不同,一个有共同特性的主页面应该是你的计划的一部分,调整到每个页面时保持风格、布局、规范和主页面一致也应该是你的计划的一部分。
让我们再来通过几个页面看看Etsy是如何成功解决这个问题的。只有这一次,让我们关注它们的网格系统如何支持不同的内容需求,以及如何将它们从页面到页面进行组合并定制统一规范。在我看来,他们在保持某种一致性方面做得很好,这种一致性创造了一个统一的印象,把页面整齐地统一起来。因此,他们能通过内容引导用户,用户知道该期待什么。他们的心智地图是健全的,没有任何意外,会破坏用户在浏览整个网站时的用户体验。
Etsy的设计师为网站的所有页面创造了一个共同的风格调性,页面看起来很优雅、简洁、统一,因为他们知道如何灵活运用网格系统进行设计工作。
(Etsy网站)
(Etsy网站,www.etsy.com)
(Etsy网站)
结语
总的来说,网站建设中系统灵活运用网格系统设计网站的内容是使内容主题脱颖而出的关键。没有什么比一致的网格线更有效地将各种形式的内容紧密联系在一起了。创建一套强大的引导线进行布局设计,用户可以跟随它的方向,引导用户的眼睛和动作,就像无形的视觉锚。这通常会导致更牢固的关系,将你的设计工作联结在一起并产生凝聚力。保持简洁高效!你的设计工作将更容易维护和创建。
浏览次数: 1224 次
文章评论: