如何使用八种布局提高你的网页设计能力(下)

今天下面我接着上一篇的文章继续跟大家说说下面4种布局技术。

 

第五种. 前进式布局

一个前进的布局(Progressive Layouts)是一种用一定顺序去描述一系列内容块的方式, 它不是通常的组织内容的方式,但是也有很多网站使用它。 一个前进的布局(Progressive Layouts)能帮助用户容易的浏览一个长的系列。

前进式布局的例子

一个有前进式页面构成的网站案例分享

Sursly.com 的整个作品集的呈现是基于前进式的布局(Progressive Layouts)。 你可以在每一页的右上角看到一个go的按钮。 我们可以通过它之前面的页面找到它。这个页面的前进系统是导航栏和菜单的替代品。 当然,这样布局的主要的缺点是很难去导航甚至很难实现交互的目的。

尽管在这种布局里面每个单独的页面可用锚点来标记书签, 但是他很难让一些随机用户立刻得到一个可用导航选项的整体映像。 除此之外, 这个布局通常只用在单向的导航-前进。 从可用性的角度来看, 这并不好。

 垂直前进式页面

Danny Blackman (例子见下) 用前进式的布局(Progressive Layouts)展示了一个作品集。这些独立的元素全部都垂直的呈现在一个页面上。 自动滚动的功能可以带领用户从一个页面的元素到另外一个元素。而且, 没有使用菜单和主导航, 仅仅用按钮带领用户从一个到下一个或者返回。

滚动的脚本

ScrollTo - 这是一个Jquery的插件, 可以用在垂直前进的布局里面,就像上面那个例子一样。

 

 

第六种: 网格布局  

没有一个讲布局的文章可以不提到网格。网格经常被认为是任何平衡的,有序的和简洁的网页布局的一个基本部分。很多设计师用他们来给用户提供一种更为 有效的交流大量信息的方式。 网格可以不用任何其他的技术来显示信息。 一个好的网格系统能把一个页面的所有信息放在一个流畅的布局里面, 但是也能考虑到每个不同块的可读性和可扫读性。   在下面的网站里, 你可以看到它使用了一个非常精确的网格布局。这整个网站只有一个内容页面, 因此这个页面就要展示相当多的信息。 然而,这些信息被组织在一个整洁的两列网格里面, 创立了一个非常精确,明显和固定的有大量间隙的布局; 而且内容是可读和可扫描的。

用不同的背景来分割网格区域

当你创立一个格子的时候, 你可能要放大量的信息在一个非常紧凑的区域。 你需要保持整洁有序, 但是却没有足够的空白空间。因此你可以对每一个格子使用不同的背景。 你可以用很少的内间距来而不用在两个格子之间留空隙, 而且看起来也不错。

案例分析Valleycreek.org,你可以看到这个非常的策略被用来创立一个良好结构的布局。 你可以看到一个非常的细的线被用来分割不同的格子, 除了这些, 颜色的对比也可以提供非常清晰的分隔。

 

第七种:手风琴  

手风琴式菜单和滑动器跟选项卡是基于同样的概念:他们把大量的信息压缩到一个更小的区域里面。手风琴是块状的以垂直的或者水平的方式组织起来, 就像一个选显卡被点击, 一个内容块滑到另外一个 —— 手风琴的菜单一样, 因此得名。 手风琴的例子   Functionality and large clickable areas 功能性的可点击的大块 Alex Cohaniuc 用了一个精心设计的手风琴菜单。 把所有的作品集里面的作品放在一个手风琴中是非常明智,因为他隐藏了(非必要的)一些关于项目的详细信息而且只在必要的时候显示他们。 这个手风琴设计的非常好的原因如下, 首先你可以注意到每一个画布的标题头非常大,更容易点击。 而且,你能看到每一个标题头用一个三角形的标记去说明是否这个手风琴键被打开了。最后,在这个设计中,当前的风琴键的标题头用了一个非常不同的背景色。

水平的内容滑动器 Jason Reed 用一个手风琴把整个网站的所有内容放在一个页面里面。 这个手风琴用和页面其他的部分相同的风格和元素而不是用一些外观完全不一样的元素。 另外, 这个手风琴是水平的(尽管导航选项也有垂直的)。 而且, 我们来看下选项卡。首先, 你会看到在选项卡之间有大量的间隙。 这些选项卡,标题头, 并没有向上个例子那样分隔开, 因此就用大量的空间被用来作为分隔。而且, 可读的大的标签被放在手风琴里面。 这些小的细节非常重要, 因为用户需要精确的知道每个标签项里面是什么内容。

包括图片和信息的手风琴 Marius Roosendaal 用另外一个非常出色的垂直手风琴设计展示作品图片。 每一个内容块用一张图片展示一个作品。 然而每一个图片都有一个文字标签。你可以看到一个小的按钮用来显示/隐藏它的描述。你也会发现可以链接到一个有更大更详细的作品的弹出窗口。 你不能再在这个小手风琴里面显示大量的信息, 因此惯用的做法就是放一个链接可以带领你看到更多的信息。

 

第八种:大下拉菜单或多层菜单

 

导航不一定是一个链接的简单集合; 最近他被彻底改造不仅仅只是导航选择项, 而是一个网站内容的层次结构。 因此大下拉菜单通常被用在电子商务或者产品的布局里来展示产品的详细信息。 像这样的菜单是一个新的趋势, 并且非常快能被用户发现。 因为他能立刻提供给用户想要的信息, 不需要任何的点击, 这个跟翻转元素(rollover elements)的概念很相似。

 大下拉菜单的例子

一个大下拉菜单的经典例子是 Ruby On Rails Guide的索引(Guide Index)。 这个菜单被用来作为组织良好,表达清晰的二级导航菜单。  跟上级的菜单不一样的是,这个菜单在右手边有一个转换器按钮来触发下拉菜单。

包含信息的多层菜单 Porsche.com是上面所讲技术的一个非常完美的例子, 保时捷 (Porsche)的首页 包含一个多级菜单,使用户可以浏览所有的保时捷生产的汽车不需要任何点击。在第三层,有一个显示选定汽车的信息的窗口。这个窗口包含汽车相关的图片,链接 还有一些概要信息。 当然, 一个大的内容块也是一个可以点击的区域, 因此所有的细节特性可以立刻被点击。 为了更好的理解这项技术, 点击下面的图片访问整个页面。

搜索结果显示在一个下拉菜单里

与这个技术相关的一个趋势是包含搜索结果在一个下来菜单里的策略。这个技术被用在 Media Temple Knowledge Base     设计师选用展示信息在一个下拉菜单里面而不是用一个全新的页面去显示搜索结果, 这样结果可以随着你的输入而更新。 然而,注意这样一个事实,不应该忘记提供一个链接,跳转到一个提供全面的搜索结果的页面。

每天更新,
全站高品质素材免费下载!