Tag Archive for '导航'

Web 2.0与网页设计(web 2.0 for designers)

译言有很多好文章,下面这篇关于web2.0时代的网站设计,非常值得推荐。转载自这里原文出处

Web 1.0时代的网络是一小撮人为一大群人撰写内容的网络。人们从源头便可直接获取信息,要图片设计信息就去Adobe.com,要Windows信息就去 Microsoft.com,要看新闻就去CNN.com。然而,随着时间流转,越来越多的人在阅读网页之外也开始自己写些东西。一个有趣的结果随之而来 ——突然之间,信息多得我们无法与之保持同步了。我们没有足够的时间去关注所有想要我们关注的作者,而浏览有相关内容的全部网站更是显而易见不可能的事情。很明显,当个人写作渐渐成为主流的时候, Web 1.0的老模式应该改改了。

Web 2.0在此时登场,在这一模式下,网络上的信息是分布在分布式的小单位“微内容”。网络的构成元素由文档变成了数据。我们不再需要访问不变的旧式信息来源。现在我们所依赖的是一套以其新而有效的方式聚合并重组网络上“微内容”的新工具。

这些工具,也就是Web 2.0接口,将是设计创意闪光的先锋领域。

在这方面已经有了很多成功案例,比如RSS聚合、搜索引擎、门户、API(应用程序界面,它可以提供与数据相连的接口)和Web服务(通过XML-RPC、 SOAP和其它技术存取数据)。Google地图在功能上和类似服务差异不大但它提供的接口要优秀得多。Flickr的接口可以算是最具创意并且也是最受欢迎的。Del.icio.us则提供了个人和社群服务,它的覆盖面远不止一个网站。这些接口设计正在改变我们存储和共享数据的方式。至于内容来自何处倒不是那么重要了。

人们常常把Web 2.0描述为“作为平台的网络”,把网络看成是一个内容互动的平台之后,我们很容易发现这种变化对于设计的重大影响。想象一下吧,当来自不同领域的不同群体——公司、个人、政府等等——存储了一系列数据之后,我们便能通过一个接口将信息混合,这一点是任何单一传统网站都不可能做到的。举例来说,Amazon.com的内容数据库是对外开放的,任何人都可以针对一些特殊要求去设计一些更好的接口(比如Amazon Light)。它的力量在于,借助接口,人们可以通过内容的定制或与其他数据的重组创造出新的更有价值的工具。

对于网页设计师而言,Web 2.0有6个值得注意的趋势。在这篇介绍性的文章里,我们将为您介绍这些趋势并一一举例说明。在以后的文章里,我们会针对具体趋势作细节性的探讨。

用语义标记语言写页面:和XML接轨

语义标记,也就是精确描述页面每一部分作用的标记,是实现Web 2.0过程中最重要的一环。最常用的标记语言HTML和XHTML一般用于显示目的,设计师们可以通过对HTML标签应用CSS来改变页面风格。

这些标记语言并非完全没有语义能力。设计师们用它们能够描述页面,但这仅限于(X)HTML内建的标签范围内。比如,设计者可以用标签分别标记标题、段落、清单、引用以及自定义列表等项目。这些标签对一些简单的文档已经够用了。但是在大多数情况下,(X)HTML内建的这些标签远不足以精确描述页面内容。对于 Web 2.0来说,对页面的描述不仅是一项需求,它是实现Web 2.0的关键。尽管HTML和XHTML的潜力尚未被挖尽,RSS这项技术已经证明了语义标记语言毋庸置疑的实力。RSS利用XML实现网页内容的联合。它可以让网站更方便地告知访客什么时候有更新。现在你不再需要一遍遍地点开你所喜爱的网站来查看更新了,你只需在RSS阅读器中输入RSS源的地址,阅读器就能自动定期查看站点,在发现更新之后接收信息并且提醒你。它可以大大节约你的时间。

提供Web服务:超越站点

在语义语言得到运用之前的早期互联网上,网站仅仅是一系列“页面”的组合。十年前的网站往往更像是在线用户手册(干巴巴的静态HTML网页),它们的互动方式也仅仅是Flash、动画和JavaScript而已。在那时,网站推广就像是推销“地皮”——那是一个在线商城和门户网站在虚拟世界激烈竞争的时代。

从 90年代末,特别是这个世纪的头一两年开始,XML语言和Web服务开始推动网站的面貌发生改变。XML技术实现了不同系统间的内容共享和传输,Web服务提供了和站点内部相连的接口。视觉设计为内容提供了外观界面,而Web服务则是为同一内容提供的程序接口。这是一个相当有用的技术。如果网站开发者提供了Web服务API的话,任何人都可以建立一个和该站点内容相连的接口。

Amazon.com和eBay是这种由单一站点向Web服务转变的两个成功范例,所有人都可以通过Web服务使用它们提供的海量商业数据。依赖eBay的Web服务所建立的Andale是一个很有意思的网站,它通过分析价格和销售数据来告诉卖家当前的热销商品及其价格。

信息重组:内容为王

2004 年11月12日,在网络媒体协会的一次会议上,美联社CEO Tom Curley发表了一个重要而有远见的讲话,他说:“…在(互联网发展)的下一阶段,内容本身将会会比它的展现形式更重要…诸如搜索、RSS和TiVo之类录像程序——我这里说的只是一部分——等杀手软件正在逐渐打破我们试图存放内容的容器。”

Curley的讲话是针对记者和媒体行业的,但他的深刻见解对网页设计者们来说同样重要。网页设计在Web 1.0时代的目的是建立一个内容独占的站点。但如今,内容已经不可能由单一网站独享了——除非你试图与社会性的网络对抗并把内容锁在一个受保护网站之中。

Web 2.0时代的网站设计相对于网站本身,更注重事件驱动型体验的建立。RSS成为其重要组成部分并非只是巧合。不需要任何无关设计,RSS摘要就可以让人们订阅你站点上的内容并随时通过RSS阅读器阅读它们。

搜索也可以和RSS相结合,帮助人们通过标题和标签(可以通过PubSub或Feedster等等)来订阅所需的内容。这种所谓的“未来搜索”不仅能帮助人们整合不同来源的内容,也避免了人们因为站点的视觉设计而与之失之交臂的可能性。

由于内容以RSS的形式在网上流动并且以此方式被重新整合,网站设计者们的思维应当超越站点本身,并且要着重考虑如何去打内容牌。

导航和关联的主人:用户决定

由于Web 2.0内容重组的特性,访客们初次看到信息的地方很可能并不是最早发布它的站点。因此,传统上为访问某一特定内容而设计的网站导航系统将被针对Web 2.0的新特性而设计的导航系统所取代。这种分布式导航可能的形式包括RSS阅读器、博客上的链接、搜索引擎,也可以是其他一些形式的内容聚合程序。

这一特性也带来了一些副作用,其中一条就是有用信息的来源经常变动,而访客甚至不需知道信息的真正来源。还好,内容聚合程序内建的一些功能已经注意到了这一问题——它们能够记录访客的活动。通过记录微内容的访问量,聚合程序可以通过访客的历史行为预测他们在未来可能关心的内容。这就是我们在Daypop、 Del.icio.us和Blogdex等网站上所看到的。对人们历史兴趣的记录可能会在未来发挥作用。

这些第三方接口的强大功能使得访客不必访问内容的发布页就能获取信息,使用导航系统的人因此将越来越少。最常用的导航系统将由用户行为来决定,而不再需要特别的设计。

随时间而添加的元数据:由社群建设的群体信息

Web 1.0有一个看上去彻底改变了传统出版方式的特点,即随时修改出版物的可能性。在网上,纸上出版物的“版本”、“印数”等概念消失了。网上有的只是网站和它的当前状态。现在我们已经习惯这一形式了,乐观者们的希望可能会变成现实:随着时间增长,网上的内容只可能变得越来越好——元数据被不断添加,描述逐渐深入,话题变得明晰,参考更加全面。

Web 2.0在这方面走得更远,在该模式下,用户可以添加属于他们自己的元数据。在Flickr和Del.icio.us上,任何人都能给数字媒体(文件、书签、图片…)添加标签。不过,自行添加标签还不是最有趣的。最有趣的是所有人的标签放在一起时体现出的那些趋势。

举例来说,当我们在Del.icio.us上为一个书签添加“Web 2.0”的标签之后,我们可以进入del.icio.us/tag/Web 2.0这个页面看看别人给哪些项目添加了类似标签,也许还能从中发掘出一些我们本不知道的宝贵信息。搜索引擎可以查找网站设计者添加的那些元数据, Del.icio.us则为那些被传统模式所忽略的人所添加的元数据提供了一个杠杆。

转向程序设计:风格和结构的分离

Web 1.0时代,网页的视觉设计经历了两个发展阶段。早些年里,设计者们使用GIF动画和表格等小技巧来扮靓网页。而在最近几年,CSS逐渐流行起来,人们通过添加一个定义了风格信息的独立CSS文件实现了页面风格和结构的分离。尽管如此,视觉设计仍然是人们关注的核心——因为这是区分内容和吸引用户注意最主要的方法。

进入Web 2.0时代之后,网站的地位降低了,视觉风格也因此不再那么重要。Web 2.0时代流行的是XML,相对页面布局和内容展现方式,词语和语义更为重要。内容在网络中流动,并通过程序来存储。从非常现实的意义上说,如今我们的设计更多针对的是机器而不是人。这听起来有点像《黑客帝国》里的事情,不过Amazon.com的CEO Jeff Bezos说:“Web 2.0…它讲究的是让网络变得更适合电脑使用。”

这对网页设计者来说意味着什么呢?这意味着设计者需要考虑如何让内容和站点本身一样吸引人。这意味着设计者需要转向Web服务的开发,意味着设计者的思维应当超越站点的展现方式,并更多地考虑API和内容聚合。简而言之,设计者会更像是程序员。Web 2.0有一个简单的前端和强有力的后端,Bezos的话就是这个意思。

总结

Web 2.0意义深远。它像所有重大变革一样,从社会、文化甚至是政治等多方面影响着使用者。Web 2.0的设计者和开发者们是受影响最大的人群之一——不仅仅是因为他们需要新的技术手段,更重要原因是,他们需要认识到,内容应当作整体的一部分对待,它们并不是孤立存在的。

在这里我们作一些总结,下面我们再来看看这6个趋势:
1. 用语义标记语言写页面:和XML接轨
2. 提供Web服务:超越站点
3. 信息重组:内容为王
4. 导航和关联的主人:用户决定
5. 随时间而添加的元数据:由社群建设的群体信息
6. 转向程序设计:风格和结构的分离

我们撰写这个专栏的目的是帮助设计者们分析Web 2.0的这些动向并向他们阐述其意义。我们将继续探讨构建Web 2.0的一些新技术,详细介绍那些成功的新接口,并思考它给用户带来的社会性影响。

我们希望关注新技术前景的设计者们今后能帮助我们重点关注它们的实用意义,关注Web 2.0当前(和未来)对网站设计产生的细微而深刻的影响。

相关内容

转载:导航设计的重要性

对于文中提到的问题,我们一般的解决方法是另外制作一个标准的小导航栏,只有一行,便于调用,并且背景可以透明。

下面的文章阐述了导航的设计,导航是网站设计中非常重要的一个环节,之前我在网站项目制作的阐述中有所忽略,看到如此妙文,特别转载一下,原文出自UCDChina.com

很 多网站为了某个活动、节日什么的,经常都会做一个专题页面。这些页面往往都和网站其他的页面不同,不用那些循规蹈矩的布局,有漂亮的大块图片、甚至是声色 俱佳的Flash~ 这些页面,可能是从网站内部某个吸引人的地方,吸引你点入;也可能是某个软件的网站,从软件里链接出来的;也可能是和别的网站合作,从别处链接过来的…… 这样的页面的确都做得很吸引人,但也容易忽略一个很基础的问题,比如下图这个页面:

blog1.gif

恩,乍一看还挺精彩的,不过少了一样很重要的东西——导航条。而且,竟然连个网站的Logo都没有…汗一记~ 据小兔所知,一些网站是有专门做这样的专题页面的人,可能还独立在正常的设计团队之外,做这些页面的设计师往往被“要有视觉冲击力”、“漂亮精彩”、“不 要走网站的老路子”等等来要求,于是他们绞尽脑汁设计的时候,就把网站的导航条放到一边儿去了,这个,不重要啦,不放或者把它扔到页面最下面的角落里去。

不重要?少了小小一个导航条,可能给你带来很大的损失。

最糟糕的情况,是到访这个专题页面的很多都是网站的新用户。新用户往往对于网站是什么样子、具体有些什么都没有概念,而精彩的专题活动页面,往往是计划中吸引用户的重要途径之一。

来到这个页面的访客,就像是在某个冒险游戏里触发了剧情的新手,“呼”的一 下,来到了一个崭新的房间。一个庞大的RPG游戏里,这就是一个个迷宫的开始了。这个房间里好像有不少东西,但是怎么没任何出口、更别提标注出口取向的标 识了~就只有不少神奇的瞬移点,一踩上去,“哗”,又去了另一个地方。。我最讨厌这种游戏里的迷宫了,完全没有方向感。

而没有导航栏的页面,再怎么漂亮,都像是个没门没窗的房间,外面有没有东西、有些什么,屋里的人都一概不得而知。如果要描述用户脑海中的模型,基本就是这样的:
blog21.gif
他们看到了一些内容,不过这是在哪个网站、这网站里有些什么?恐怕都没有留意到,更不要说吸引他去看看了,对于网站的访问就结束了。

对于新访客来说,导航不仅是指引他去网站各处的路标,更能帮助他们尽快建立脑海中关于网站的概念。

blog31.gif

吸引人的页面和吸引人的内容,固然能够赚取到不少点击量,随着一步一步点击,也有把初次访客转化成固定用户的几率,但是比较一下上面的两个图,效果相比之下区别明显。

写到这儿肯定有人要说,我们的专题活动页面都是给本站用户的,所以这事情没那么严重啦。真的么?

即使某个游戏我已经上手了,我依然很怕什么时候又不小心被“唰”地传送到了一个新的地方,天哪,怎么回去?没有路?没有路,那给我用个回城卷轴总可以了吧?什么?还不能用回城卷轴?!…orz…

即使算是网站熟悉的用户,你一样要提供给他来去的路。用后退按钮?自己修改网址?这些办法都落后得掉牙了,可别让熟悉你们网站的用户都迷路了。

如今的我们在规划和设计网站的时候,都会记得放上一个醒目好用的导航,并注意导航在整个站点页面中的统一性。只不过专题页面、活动页面偶尔会变成了漏网之鱼。导航不统一、只留着LOGO回首页的还算事小,那些没Logo没导航的,实在让人哭笑不得。

还只顾着打造漂亮的房间?小心,游戏里的迷宫走不出去,而网页——只要轻轻在右上角的叉叉上一点,用户就和你的网站拜拜了。

相关内容

网站项目1:专区的页面草图设计

需求分析是网站项目制作的开始,需要我们站在传播者和接收者两个角度去分析问题,得到项目的关键点和主要表现方式,之后还会引入一些标准化的方法来避免人为因素的影响。

现在开始进行页面草图的设计,页面草图是一个页面的框架,确定各个模块的位置。在页面设计中,将遵循一些基本的规律,如页面布局的重要性,九宫格法则和模块权重分配等。

当我们在设计这个专题的时候,设计上大致分为网站标准元素、页面整体风格、模块设计等。

网站标准元素。包括:
1 网站本身的VI准则。要符合网站本身的一些颜色设定,logo规则,形状规则,以及如导航栏,关于等这些元素的一致性。在这个车厂专区的设计中,这一部分比较好做,我们考虑的更多的是车长本身的VI,因为这是一个专区,在一些频道的设计中,这点需要考虑周到。
2 传播方的设计准则。如果我们是要传达某个产品,介绍某个厂商,那么这个产品和这个厂商是有自己的形象设计的,要遵循。

页面整体风格。包括:
1 页面的基调颜色。一般不超过两种。
2 logo大小和位置。
3 多少个屏。
4 多少栏设计以及栏位的比例。先在很多时候一般是混合设计,但一般来说总是有一个主要的栏位分配,两栏或者三栏。

模块设计。模块是网络项目设计时候的一个基本单位,模块组成一个网页。

模块的基本属性包括:
0 这是什么模块。
1 标题。
2 内容样式。文字,图片,flash,或者混排。
3 可以点击的内容设计。
4 点击后呈现内容。点击后可以是打开新窗口,或者是ajax的某个效果。
5 “详细” 点击。有时候模块是显示了内容的摘要,“详细”点击呈现的就是所有的内容,这些内容的文案是要在设计阶段准备好的。
6 “更多”点击。
7 数据来源。模块中的数据分为静态和动态,动态模块中的内容会自动更新。

根据前面的需求分析,我们制作了这个厂商专区的页面的第一个草图。

1112_MG_1700

看上去还不错,不过我们发现了一些问题。

1 “心跳加速吗”字体样式和官方网站不一样。对于这样的专区设计必须要保证品牌一致性。
2 首屏左边的菜单功能多余。用户对菜单的点击会产生的情况无法判断。
3 下方有5个模块,图片过少。静止图片对于现在的浏览用户的带宽来说,已经不是什么问题了。图片不能滥用,但也不用过于吝啬。
4 模块的具体定义。因为是草图,所以模块还需要具体设定,以及每个模块的呈现形式,数据来源等。

相关内容