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

作为一名网页设计师,从08年开始接触网页设计,至今已过5个年头,刚开始,我相信大家都觉得网页设计很难很难,也不知道怎么去提高自己的网页设计能力,今天,除了自身的努力勤奋以外,还需要技巧和经验。我站在过来人的身份给大家说说如何来提高你的网页设计能力!在此,25学堂致力于打造最前沿的网页设计师加油站!

先介绍哪八种网页设计布局?这里所说的布局不是网站的架构和整体布局。而是以下8种网页布局技术,包括

sliders (滑动器),

tabs(选项卡),

progressive layout (前进式布局),

structured grids(结构化网格),

modal windows(弹出窗口),

rollover elements (翻滚元素),

accordions (手风琴)

mega drop-down-menus (大的下拉菜单).

下面我们就一一来解说这八种网页设计布局技术。

第一种: 滑动器和旋转木马

滑动器,也称为旋转木马, 是一种组织有序,可交互的并且可流畅表达信息的方式。 滑动器是一种非常流行的技术因为确实非常实用。你可以把大量的内容放在一个固定紧凑的区域, 如果没有滑动器, 这些内容不得不被放在页面的某些地方,在很多情况下, 你可能并没有空间给他。 当需要的时候你可能想要显示一些信息。silders 可以帮助用户一次只关注一个内容块,这很有用并且很方便。 这就是slider为什么会迟早会派上用场。

1、缩略图和图标在导航区  

当你要设计一个内容滑动器或者图片幻灯片时, 最好是通过在导航区域使用一些图标或者一些缩略图给用户一个简单直观的导航。缩略图和图标给用户一些简介,说明他们在幻灯片中 并且给出一些可用的导航的选项。(比如, 一个幻灯片, 可以有垂直跟水平导航)。 除了这些, 用户可以从滑动器里面快速的选择特定的页面。   在Coda site的一个滑动器的应用, 你可以看到一些tabs(选项卡)在滑动器的上方。 他们创造了一种滑动器/选项卡的混合元素。 这是一个非常棒的想法, 因为通过看缩略图, 用户可以简单的找到一个页面。 而且,图标增加了一种非常强烈,难忘记并且清楚的视觉支持。 除了图标和标签, 你也可以用一些缩略图甚至数字达到同样的目的。

2、滑动器被来产品展示导航

与上面的例子不同, 滑动器(slider)不仅可以被用来显示大块的信息, 而且也可以帮组用户以一种方便的方式浏览成千上万的产品。 这里有个例子,SourceBits(见下图) 用了多个选择器(sliders)(一个垂直的一个水平的)提供给用户一个引人的方式去浏览CD封面的。   滑动器(slider)在两边各有一个圆形的按钮指明是怎么样导航的。 很平滑的过渡,因此滑动器(slider)看起来非常吸引人而且使用起来很舒服。 而且你还可以发现每个插图间有很好的空隙, 因此可以简单的点击每一个单独的图标并且有很好的组织。 每一个物品也有非常棒的镭射悬停效果。

3、拥有水平的大点击条垂直内容滑动器

让我们看一下滑动器(slider)在QuickSnapper的使用。  功能性的垂直滑动器(slider)完美的使用在布局里。 滑动器(slider)里面有大量的物品快照。 这样的有序安排让用户很容易在元素内找到物品。这个滑动器(slider)最好的部分是上下的两个按钮, 他们扩展了滑动器的宽度。 这大按钮使滑动器(slider)变的更简单使用。

这里有一个例子, 如果你选中其中一个展示产品,然后决定去看看别的物品, 你可以简单的点击上面或下面的大按钮去浏览。 这非常方便而且友好。 并且, 如果你去网站试一下, 你会发现这些按钮非常的好,激活跟焦点效果 看上去很棒并且增强了可用性。

 

第二种:选项卡导航元素

基本上选项卡(tabs)导航是一种跟滑动器很类似的技术。 你可以在紧凑的区域保持大量的数据,而这个区域远远小于你通常所需要的大小。选项卡(tabs)导航是一个惯例,大家都在使用他, 并且有一些不用的方式去实现它。这里我们将专注于使用选项卡导航元素在一个页面,而不是用他(tabs)来做网站主要内容导航。一个选项卡(tab)元素明显的分割不同的内容块, 而又把他们同时放在一个很小的区域。

特殊的背景,可点击的大块,清楚的隔离   第一个例子来自 Mac Pro website 的“Performance” section。这是一个良好构建的选项卡(tabs)元素的完美例子。 在这些选项卡(tab)上面的标签是可读的, 有大的点击区域,并且很好到做到了视觉隔离, 因此他们看起来是绝大多数用户做期盼的样子。并且 你可以看到当前打开的选项卡(tabs)的背景与显示主要内容的区域的背景是一致的, 而没有激活的选项卡用稍微更深的背景并用阴影来增加他的深度, 看起来是藏在激活选项卡的后面。 这是非常简单的效果但是非常有效。

 独立按钮的整洁选项卡  

这里有另外一个用紧凑的方式充分利用选项卡(tabs)去表达信息的例子。 Atebits 的布局已经创建好, 这里没有很大的空间可以显示多个内容块。 因此,他们把三个章节放在选项卡里, 保持整洁有序。 当前打开的选项卡与主要内容区域的颜色是一样的, 而未激活的选项卡用的深一点的灰色背景。 你会注意到选项卡之间的一个好的分隔进一步的定义了每一个的按钮。一个细微的斜角被用来清楚的分隔按钮。

这个选项卡集合的清晰分离 有另外一个非常好的有着现代感的选项卡集。 尽管这样的设计没有隔离每个选项卡,但是激活的选项有一个清楚的边界与未激活的分开。 而且你可以看到这里这个选项卡集有分别在上线有一个边界。 这些选项卡用图标和空格来支持文字, 使选项卡变得更容易使用。

第三种: 弹出窗口  

弹出窗口(Modal windows),或者浮动窗口(floating windows), 是一种在没有足够空间的布局里面非常棒的表达补充信息的方式。 在弹出窗口里, 你可以呈现一个大一点的图片, 额外的内容, 警告,贴士,视频等等, 让用户可以更容易的注意到。当你放信息在一个弹出窗口的时候, 你需要让你的用户清楚怎么去关闭这个窗口。   还有很重要的一点, 触发弹出窗口的一个链接,缩略图,图标或者是任何图像元素应该与弹出窗口的内容紧密相关。 一个类似的图标,标题,或者是视觉效果能帮助用户建立原始链接跟打开窗口之间的关联。   Examples of Modal Windows 弹出窗口的例子

1、为了注册和登录的弹出窗口   最常在弹出窗口中用到的元素(区别于传统的媒体文件像图片,音频,视频,屏幕截图等) 是登录和注册窗口。当你使用一个浮动窗口为了登录/注册, 你正在为每一个页面上节省大量的空间。 而且, 用户不用仅仅只是为了登录去载入一个完全新的页面。 他们能在任何页面登录而不让他们当前的会话被打断。 当然, 如果设计师确定登录或者注册过程可以用ajax在幕后实现。   Grooveshark 用一个很好的注册窗口在网站上的每一个页面。注意登录按钮(login-button)在注册窗口(signup-Window)并不打开一个新的页面, 而是用登录的表单替代注册的表单。 这是非常方便而且友好的方式。

2、渐出页面或者用一个阴影   如果你将要使用一个弹出窗口, 渐出窗口背后的页面是很重要的。 可以使用半透明背景, 投影,或者两者同时。 通过做这些, 你做了两个重要的设计决定。 第一, 你带领你的用户关注于弹出窗口,并且远离窗口后面的页面。   另外, 你增加了页面的深度并且是弹出窗口跟页面隔离, 这让窗口看起来是真的物理上的浮动。 在下面的屏幕快照 (KissMetrics) , 你可以看到一个登录表单包含在一个浮动窗口中, 后面的页面褪色模糊。顺便说一下,注意取消/登录按钮也设计的非常好。   用一个在窗口背后的阴影代替整个页面的褪色。这个技术也很好的增加了深度和隔离感。

第四种: 滚动翻转元素即浮动层,弹出层等技术

一个滚动翻转的元素(Rollover Elements)是当今越来越流行的一个设计元素, 特别是在公司的网站,工作档案和产品的网站。 他的主要的思想是当用户的鼠标悬停在某些元素上,例如一个按钮, 一些内容将自动的弹出显示在页面上。 下面有一些例子帮助你更好的理解它是怎么工作的   Examples of Rollovers 翻滚的例子

下面介绍什么是翻转的标签项     可以从Miro’s homepage 网站的截屏里看到他们哟你了一个设计很好的打的翻转元素(Rollover Elements)。这个元素跟滑动器类似, 但是并不是用一个按钮去滑过这些页面, 这个滑动自动的发生。

细小的翻转悬停元素 TaoEffect 是一个很好的用翻转元素(Rollover Elements)非常漂亮的表达附加信息的一个例子。(这个效果第一次是在coda的网站上使用的名单是这里我们用这个例子代替)这些信息用一种非常友好的方式呈现,你所有要做的就是让你的鼠标悬停在这个按钮上。   如果你访问这个网站,你可以看到这个翻转是非常好并且很流畅的动态过度。这个打开的过程是用一个垂直的渐变的扫出。最后你可以看到背景是半透明。同时也用突出的边界去增加与其他的内容的隔离度。

用翻转元素的内容地图 OneHub 用翻转元素(rollover elements)实现另外一种效果。类似于一个地图, 这个页面被分成很多快提示。 当用户鼠标悬停在某一个提示上时,附加信息就会自动的现实出来。 这个效果对于想要展示产品的特性或者给用户更多的解释和说明的网站非常有用。

整合在幻灯片中的翻转元素   SquaredEye给出了另外一种有趣的设计方式。 旋转木马式的菜单让用户可以用翻转元素预览上一个和下一个页面。 在一些情况下这种方法非常的有用。

 

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