提升网页设计品质.docx

1、提升网页设计品质网页设计中，内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中，是一个网站的基础，并且应该在考虑外观之前就决定好。没有好的布局，网页信息流就不能正确传递，所有东西都不能建立起合理的联系。在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括滑门 (sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。1. 滑动样式与传送带

2、(Sliders and Carousels)滑门(Sliders)，也可称为传送带(carousels)，是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技 巧，大家都觉得它很好用，能让你在固定的区块内填充上大量内容。没有滑门的帮助，这些内容可能就要分开放到页面中的各个地方。而大多数时候，你在使用页面 空间时总是捉襟见肘。或者，有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块，也符合他们自己的便利需求。滑门样式的实例导航区提供缩略图与图标运用滑门和幻灯样式时，最好在导航区提供图标或缩略图，以便使导航更加简单直观。缩略图和图标给用户指出明路，

3、向他们解释当前所在位置，以及有哪些浏览选项可供选择（比如说幻灯片的导航可以是水平的，也可以是垂直的）。另外，还能方便他们快速选择特定滑门页。Coda网站的 滑门顶部设计了标签卡，他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明，因为通过看缩略图，用户就能快速得知特定滑门页的内容。而且，这些 图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片， 或者只用数字也行。用于展示产品的滑门样式与上面的例子对应，滑门不仅能用于大容量信息的组织，也能为用户浏览大量产品条目提供方便。 SourceBits (见下图)使用了多层滑门（一个水平的，一个垂直的

4、），用唱片封面作为导航条目。水平滑门两端都有大的圆形箭头图标，实时反映左右导航的可用性。滑动的时候有平滑的动画，用起来非常舒服。同时，你也能看到，各个元素间距都精心设计过，这有助于内容组织，也提升了可用性。鼠标滑过时，每个条目还有漂亮的聚光灯效果。垂直滑动的内容以及超大的水平“点击条”接下来看看 QuickSnapper 的滑门。这是一个完美融入页面整体布局的十分好用的垂直滑门。滑门内容中有大量截屏图，内容被有序地组织起来。这个滑门最赞的地方就是上下方的按钮导航。按钮宽及整个滑门，大的按钮让“推拉”滑门更加容易。还有，这些按钮的:active和:focus效果也很漂亮。滑门脚本你可以参考下面的

5、脚本、技巧和教程制作你自己的滑门： Slick Accessible Slideshow using jQuery Coda-Slider 1.1.1 jquery.scrollable 1.0.2 Create an Amazon Books Widget with jQuery and XML Agile Carousel Easy Image or Content Slider Slider Gallery Coda Slider Effect iCarousel2.标签卡导航元素本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见，但也有

6、很多不常见的运用方式。我们这里 关注的是在一个页面内部的标签卡，而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块，最终又把他们融合到占地面积很小 的一个区块中。标签卡的样式范例出众的背景，大的可点击区域，明显的分割第一个例子来自 Mac Pro网站 的“Performance”部分，其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读，可点击区域很大，各标签视觉上的区分也很明显，这正是 大部分用户期待的样式啊。你也应该能注意到，当前标签卡上还有着十分微妙的渐变背景，与主内容区块很好地融合在了一起。未激活的标签背景则略暗，主内容区 块在其上有微弱的投影，这种

7、做法加强了深度感和立体效果。十分简单而有效的技巧。按钮区分的简洁标签卡以下是另一个利用标签卡紧凑地展示信息的实例。根据 Atebits 的布局结构，介绍性内容的空间被挤压，不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签中，保持了布局的整洁有序。再一次地，当前标签 卡的背景与主内容区融合，不活动标签卡则是较暗的灰色背景。你同样也会发现标签卡之间有着漂亮的分割线，使得每个标签卡看起来都像是独立的按钮。为整个标签集提供清晰的分割线Fontcase 的标签卡设计也很精妙，很有现代感。尽管在未激活标签之间没有分割线，当前标签却有明显的边线。你也能注意到，在整个标签集的上方和下方各有一条

8、边线。标签卡使用了图标与留白来突出文字，提高了易用性。标签卡效果脚本 Create a Slick Tabbed Content Area using CSS & jQuery JavaScript tabifier Yetii A JavaScript Tab Interface Tabbed Page Interface Updated JQuery Nested Tab Set Scriptaculous Tabs Accordian Tabs3. 模态窗口模态窗口（Modal windows），或者称为浮窗，一般用于在空间紧张的页面中展示额外信息。在模态窗口中，你可以放置放大版的图像、

9、额外内容、警告/提示信息、视频等等。用模态窗口展示信息时，记得要同时明确地提示用户如何关闭它。同时，用于打开模态窗口的链接、缩略图、图标或者其他图形元素，一定要保证与模态窗口要展示的内容有足够的关联。相似的图标、摘要、图形元素都能帮助用户建立原始链接与打开的窗口的联系。模态窗口的例子运用到登录和注册流程中的浮窗模态窗口最典型的运用就是登录注册 窗口了（与诸如图像、音频、视频、Flash等“传统”媒体文件相比）。登录和注册表单不是用户每次浏览页面都要用到 的必要部分，所占页面空间理所应当被节约下来。而使用浮窗，则又为用户省去了重开一个页面的时间，毕竟这只是一个很简单的非常用动作。他们能在网站的任

10、何 页面中登录/注册，而不用中断现有流程只要网站的设计者能提供基于Ajax的“静悄悄的” 登录/注册。Grooveshark 整个站点的每一个页面中，这个漂亮的登录窗口都触手可及。注意，点击登录（ Lodin ）按钮后并不会载入一个新页面，而是直接把注册表单替换成了登陆表单（使用了手风琴效果）。非常方便，非常友好的用户界面。消隐页面/使用投影如果要使用模态窗口，让窗口下面的页面淡出焦点十分重要。你可以用半透明背景覆盖或 者为窗口添加投影，或者两者结合。这么做有两个作用：一是能让用户将注 意力集中到浮窗上，然后暂时忽视掉背后的页面。另外，也能增加窗口和页面之间的深度感和区分度，让人在视觉上觉得这

11、窗口确实是漂浮着的。注意看下面的例子 (KissMetrics)，半透明的黑色背景让页面消隐，有助于登录浮窗暂时成为视觉重点。另外，取消和关闭窗口的按钮也设计得很好，够明显，够漂亮。RealMacSoftware 的浮窗只做了投影，而没有让整个页面消隐。只要深度感和区分度做得足够，这样也很有效。模态窗口的脚本 Fancy Lightbox Lightbx 2 Facebook Image/Content Viewer Woork Mootools Lightbox nyroModal JQuery Plugin JQuery Alert Dialog LightWindow ThickBox

12、3.14. 翻转元素 Rollover Elements翻转元素目前被越来越多地运用于商业网站、作品集站点和产品展示页。翻转元素的核心概念就是当用户鼠标移到某个按钮或网页元素上时，处于另一个布局区域的元素就自动显示出来。请看下面的例子深入了解我说的“翻转元素”究竟是什么。翻转实例标签卡翻转下图是 Miro主页 的截屏，他们设计了一个十分精妙的巨大翻转元素。这 本质上和滑门类似 只不过内容切换时不需要点击罢了。小地方的微妙翻转TaoEffect 向我们完美展示了如何通过设计精巧漂亮的翻转元素来添加清爽整洁的额外信息（这种效果最早是应用于前文提到过的Coda网站，但我们选择了TaoEffect作为

13、这一节的实例）。信息的展示十分友好，您只需要把鼠标移到按钮上即可。访问网站你会发现，翻转时有非常轻柔的动画，垂直跳动 + 淡入淡出。你应该也能注意到它的背景是半透明的，跳出来的卡片边缘还有高光和投影，与背景很好的区分开来。内容地图上的翻转元素OneHub 则利用翻转元素实现了另一种效果。这个页面有点像地图，在不同区域做出了标注。鼠标移到标注上时，会显示该标注的额外信息。这种方法用在需要分区域详细解释的产品介绍页上将有特效。与幻灯切换结合的翻转元素另一个蛮有趣的设计来自 SquaredEye 他们在导航按钮上用翻转元素来展示下一页内容的预览图。小提示/翻转元素的脚本 Prototip 2 Cod

14、a Popup Bubbles Build a Better Tooltip with jQuery Awesomeness jQuery plugin: Tooltip Create a Simple, Powerful Product Highlighter with MooTools Easiest Tooltip and Image Preview Using jQuery5. 渐进布局Progressive Layouts“渐进布局”的意思是站点内容按照一定的顺序一块一块地显示给用户。这种组织内容的做法比较反常，但也能在很多网站上看到。渐进布局能帮助用户更容易地深入一长串信息。渐进布

15、局的实例整个站点都由渐进布局构成S（貌似被墙，请点击这里代理访问） 的整个作品集站点都基于渐进布局。您应该能注意到，页面右上角有一个“GO”按钮，每一页面都是从上一页面中的GO按钮链接过来的。这种页面之间的渐进系 统代替了传统的导航和菜单。当然，这样做也有一个很明显的缺点：导航的交互性下降了，用户只能按照网站建设者想要的顺序获取内容。尽管单个页面布局能被存为书签（使用# 锚记），但对于随机访问者来说，则无法通过一个明晰的导航对站点内容建立起直接的整体感知。而且，这种布局一般只有一个“航向”，从易用性的角度上来说，所谓“导航”的概念在这里几乎不能适用。译注：以前看到过一个十分类似，但是更漂亮的站

16、点。现在一时找不到了 有谁知道是哪个？麻烦留言告知一下。垂直方向的渐进布局Danny Blackman 的作品集也是仅通过一张渐进式布局页面来实现的。各块元素相互独立，在一张页面上垂直展示。相邻元素之间有滚动按钮，每个元素都有返回顶部的按钮。菜单或所谓导航还是没有被使用。ScrollTo 脚本 ScrollTo 使用这个jQuery插件，就能轻松建立渐进式布局。6. 网格讨论布局的文章是不可能避开网格不谈的。网格通常被认为是任何平衡、有序、简练的网页布局的基础。很多设计师都认为网格是处理信息容量很大的页面时 的必备武器。有时候单独使用网格就能很好的展示信息，甚至不需要其他技巧。好的网格能够将一

17、个页面中的全部内容都整合进流动布局里，而内容的可读性，或者 如果用户想快速浏览，都不会受到影响。下面的网站使用了严格的网格布局。整个站点只有一张页面，需要融入大量信息。不过，全部信息被整合进这整洁的两栏布局网格中。整个布局严谨、强健、稳固，留白恰到好处。浏览或仔细研读内容都非常方便。使用不同背景区分网格区域使用网格一般是因为你需要在一个很紧凑的区域内放置大量内容。你想要创建整洁有序的网站布局，但是又不能随意添加很多留白来区分区块。如此的话，你就需要使用不同背景来区分网格区域。没了网格间的大量留白，只要网格内还有少量的内边距，也可以看起来很不错。Valleycreek.org 就用了这种战术，尽

18、管已经有一条细线来分割网格区域，背景色的差异还是被用到，以提供更明显的区分。网格生成器、模版和更多工具 Grid System Generator Variable Grid Systems Generator 960 Grid System Grid Designer Grid Calculator 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)7. 手风琴效果（折叠菜单）折叠菜单和滑动门以及标签卡涉及同一个概念：把大量信息压缩到一小块区域里。“手风琴效果”指的是一些被水平或垂直组织

19、的区块，通过点击，一个内容区块滑向另一个区块，并将其内部内容展示出来，和手风琴的推拉过程有点相似。手风琴效果的实例功能性和大点击区域Alex Cohaniuc 的手风琴菜单设计的很好。把作品项目藏到手风琴里是的做法其实挺有道理的，因为这能把每个项目的不必要信息隐藏起来，等访客有需要的时候再显示。说这项设 计好是因为：一，每块画布的标题都很大，很好点击；二，每块标签卡都使用了一个小箭头来反映开合状态；三，鼠标滑过时，当前标签卡有将它区分出来的不同背 景色。水平内容滚动Jason Reed 使用手风琴将整个站点糅合进一张页面里。他没有赋予手风琴以特别不一般的视觉特征，而是让它融入了页面之中。另外，

20、这是一个水平方向推拉的手风琴（尽管标 签卡是垂直方向的）。请注意看他的标签卡，每个标签卡之间的距离很大，这些标签卡，或者说标题，并不像上一个例子有那么明显的区分，设计师利用了留白来将 它们各自独立。鼠标移上去的时候，这些十分易读的标签就会变成橙色，让用户能够非常明确地了解到自己将要点击的标签后面都有什么。包含图像和信息的手风琴Marius Roosendaal 使用另一个非常漂亮的手风琴来“储藏”他的作品图像。与上面两个例子一样，每一个内容区块都是一个项目的展示。不过，此例的手风琴里的每个图像还附加有一 些文字介绍。你能注意到一个小按钮被用来显示/隐藏介绍。他同时也提供到更详细介绍或者更大预览

21、图的链接。在一个小小的手风琴里当然不能塞进特别特别多的 信息，所以如果可以的话，还是尽量给每个项目都加上到详细内容的链接吧。手风琴脚本 Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous A Downoads Page Slide out and drawer effect UI/API/1.7.1/Accordion jQuery Plugin jQuery UI Accordion Simple JQuery Accordion menu jQuery Accordion Madne

22、ss jQuery Examples Horizontal Accordion8. 超大下拉菜单导航不一定非得是几个简单的超链接组合。最近，导航设计有一个流行趋势：不仅仅提供“航向”选择，也提供网站内各“终点站”位置以及“终点站”之间 的从属关系。所谓“超大”下拉菜单常见于电子常务网站，用于展示他们庞杂的商品分类。这种样式正成为设计趋势，因为它能通过普通的翻转就提供大量分类信 息，而不需要用户额外的点击。超大下拉菜单的实例超大下拉菜单的一个经典例子是 Ruby On Rails Guide 的Guide Index。这个菜单提供了一个组织良好、样式精美的二级导航。注意，与一般的做法不同，激活二

23、级菜单需要用户点击，Guide Index右边有“切换” 图标，并且有着与将要弹出的二级菜单相融合的背景色。弹出的二级菜单也有细微的投影。译注：这站点在IE的Quirks模式下有显示异常（话说显示不异常的页面还基本上没有）下面的截图里的投影，我也看不到带更多信息的多级菜单Porsche 对于上面说到的技巧来说，简直是一个完美的例子。Porsche 的主页提供一个多级菜单，让用户不用一次点击就能快速了解他们生产的所有汽车。第三级菜单中，所选汽车的信息被直接提供：包括图片、许多链接、以及其他关 于本车的快读信息。当然，这个更大的区块就是一个巨大的可点击区域。所有细节和特别介绍都直接链到相应页面。要

24、了解究竟是怎么回事，就点击下面的图片自己 去看看吧！在下拉列表里显示搜索结果最近还比较流行的一个技巧和上面谈到的有点类似：在下拉列表里显示搜索结果。 Media Temple Knowledge Base 就使用了这一技巧。他们没有使用一个新页面来显示用户的搜索结果，搜索结果在一个下拉列表里随着你的输入而实时变化。不过，请注意，完整搜索结果页的链接仍然存在，您若要在自己的设计中使用这种设计，还请不要忘记这一点。在下拉区块中显示额外信息G 继续登场。你能看到他们在顶部菜单中使用了超大的下拉区块来展示产品。下拉区块中的产品排列组织得非常好，图片提供了强健的视觉支持。这个菜单还提供了诸 如价格和屏幕

25、尺寸等额外信息，让顾客能够在查看具体页面之前就有所选择。因为很多人都很关心产品价格至少对于很多有购买需求的人来说。菜单脚本 Animated Drop Down Menu with jQuery Superfish v1.4.8 JQuery Drop Down Menu Make a Mega Drop-Down Menu with jQuery How to Make a Smooth Animated Menu with jQuery Designing the Digg Header: How To & Download Create a multilevel Dropdown men

26、u with CSS and improve it via jQuery更多资源你应该也会喜欢（全是英文）： 5 Useful Coding Solutions For Designers and Developers（代码解决方案） Designing Drop-Down Menus: Examples and Best Practices（下拉菜单） Slideshows in Web Design: Where And How To Use Them（幻灯片） 40 Creative Design Layouts: Getting Out Of The Box（40个创新性布局） Web Design Trends For 2009（2009年网页设计趋势） Table Layouts vs. Div Layouts: From Hell To Hell?（表格布局vsDiv布局：走出地狱，升入地狱？ ）关于作者Matt Cronin 是一位富有激情的平面设计师，网页设计师/开发者，Cocoa程序员，摄影师，数字艺术家，等等。他也热爱写作，已经为Smashing Magazine写过很多好文。他现在正着手于一个叫做i VAEOU 的项目，不久之后就能面试。 Follow Matt on Twitter.译文原文来自笨活儿，转载请保留本链接：提升设计品质的8个布局方案。