网页设计中,内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中,是一个网站的基础,并且应该在考虑外观之前就决定好。没有好的布局,网页信息流就不能正确传递,所有东西都不能建立起合理的联系。
在这篇文章中,我们将讨论八个布局解决方案/技巧,这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括:滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。
1. 滑动样式与传送带(Sliders and Carousels)
滑门(Sliders),也可称为传送带(carousels),是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧,大家都觉得它很好用,能让你在固定的区块内填充上大量内容。没有滑门的帮助,这些内容可能就要分开放到页面中的各个地方。而大多数时候,你在使用页面空间时总是捉襟见肘。或者,有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块,也符合他们自己的便利需求。
2.标签卡导航元素
本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见,但也有很多不常见的运用方式。我们这里关注的是在一个页面内部的标签卡,而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块,最终又把他们融合到占地面积很小的一个区块中。
3. 模态窗口
模态窗口(Modal windows),或者称为浮窗,一般用于在空间紧张的页面中展示额外信息。在模态窗口中,你可以放置放大版的图像、额外内容、警告/提示信息、视频等等。用模态窗口展示信息时,记得要同时明确地提示用户如何关闭它。
同时,用于打开模态窗口的链接、缩略图、图标或者其他图形元素,一定要保证与模态窗口要展示的内容有足够的关联。相似的图标、摘要、图形元素都能帮助用户建立原始链接与打开的窗口的联系。
4. 翻转元素 Rollover Elements
翻转元素目前被越来越多地运用于商业网站、作品集站点和产品展示页。翻转元素的核心概念就是当用户鼠标移到某个按钮或网页元素上时,处于另一个布局区域的元素就自动显示出来。请看下面的例子深入了解我说的“翻转元素”究竟是什么。
5. 渐进布局Progressive Layouts
“渐进布局”的意思是站点内容按照一定的顺序一块一块地显示给用户。这种组织内容的做法比较反常,但也能在很多网站上看到。渐进布局能帮助用户更容易地深入一长串信息。
6. 网格
讨论布局的文章是不可能避开网格不谈的。网格通常被认为是任何平衡、有序、简练的网页布局的基础。很多设计师都认为网格是处理信息容量很大的页面时的必备武器。有时候单独使用网格就能很好的展示信息,甚至不需要其他技巧。好的网格能够将一个页面中的全部内容都整合进流动布局里,而内容的可读性,或者如果用户想快速浏览,都不会受到影响。
7. 手风琴效果(折叠菜单)
折叠菜单和滑动门以及标签卡涉及同一个概念:把大量信息压缩到一小块区域里。“手风琴效果”指的是一些被水平或垂直组织的区块,通过点击,一个内容区块滑向另一个区块,并将其内部内容展示出来,和手风琴的推拉过程有点相似。
8. 超大下拉菜单
导航不一定非得是几个简单的超链接组合。最近,导航设计有一个流行趋势:不仅仅提供“航向”选择,也提供网站内各“终点站”位置以及“终点站”之间的从属关系。所谓“超大”下拉菜单常见于电子常务网站,用于展示他们庞杂的商品分类。这种样式正成为设计趋势,因为它能通过普通的翻转就提供大量分类信息,而不需要用户额外的点击。
本文来自悦普网络营销 转载请注明