Issuu on Google+

探索网页空间与内容的和谐

传播与设计学院 07 艺术设计学 林 姗 07300737 课程:人机界面设计(2010-03~2010-06) 指导老师:由 芳


面对现代互联网中形形色色的网站, 我们对网站的审美能力也日益提高。 有些网站很简单,但内容感觉并不少,让人感觉很丰富, 有些网站内容很多分类很复杂,但是排列的逻辑清晰,同样让人赏心悦目, 当然,也还有许多网站存在各种各样的问题, 作为使用者可以知道在哪个地方我们会不知所措。 虽然网站中的各个版面总是有劣有优, 作为构建着, 可以尽量的将网页的元素和布局调整得符合浏览者的需要。 怎样才是有效的方法呢? 我们一起来探索„„


网站选择——时尚类 时尚类网站内容丰富,图片精美,有很强的视觉冲击力。但是也由于内容多,所以在整 个版面的排布上容易出现混乱的感觉。页面元素的选择和布局的优化显得更重要。 下面是三个时尚类的网站,ELLE 的法国网站,屏数为 3 屏。时尚网为 4 屏,而太平洋 女性网则为 5 屏。有一些时尚网站,屏数多达 10 屏甚至更多。就是一个首页,就囊括了所 有的内容。这个问题不仅是出现在这一类的网站,一些视频类的网站也有同样情况,例如凤 凰款频,屏数就达到了 10。 我们知道,一个网站对黄金位置就是首页的第一屏,第二屏也非常重要,第二屏之后的 那些内容,相对来说就算是次要的了。在一个页面放满了东西,包括了每个方面,实际上, 在页面靠下那些内容,真正在首页就会去浏览的人并不多。换句话说,也就是浪费空间了, 而且还落下个啰嗦复杂的不良印象。

ELLE 法国网站

时尚网

太平洋女性网


另外有些网站,版面就控制得很好,这些网站多数是某一品牌的产品网站。里面文字很 少,图片占了大部分的位置,界面也非常简洁,通常是不需要拉动滚动条的,因为只有 1 屏的长度。注意力也就只是集中在这里了。

CARTIER 网站

CHANEL 网站

这两者虽然都是时尚类的网站,但是重点不一样,像时尚网一类的,不仅是一个品牌的 产品,而且有各种各样的时尚信息,包括了时尚的方方面面。而像 CHANEL 的网站,就只 是针对了自己的品牌,没有其他的干扰。 但即使是这样,时尚网站同样也可以借鉴品牌网站的形式,在首页中只展示最热门最重 点的内容,而非所有内容,但是很容易的找到并浏览其他感兴趣的内容。有限的页面可以使 浏览者更加专注于当前的页面内容,并由当前的页面进行发散。至少可以避免这样的情况: 下拉了几屏之后发现滚动条还剩那么多,烦躁得马上按下了那个醒目×。


这些时尚网站中,VOGUE.com.cn,在这个时候恰好有一次官方的网站改版。在这个官 方改版中,我觉得可以借鉴,也可以思考改版前后的优劣,其中还存在什么问题,如何解决。 自 1892 年第一期 VOGUE 在美国诞生以来,VOGUE 这一品牌就被奉为世界的 Fashion Bible。VOGUE 具有显著的权威地位,她对相关时尚产业的扶持作用是无与伦比的。VOGUE 是全球杂志品牌的领导者,更是流行时尚的风向标,每月吸引世界各地忠实读者达 1800 万 之多。 我们先来看一些 VOGUE.com 的其他国家地区的网站:

1

3

2 4

1

墨西哥

2

韩国

3

俄罗斯

4

希腊


关于 VOGUE.com.cn 的描述 中国版 VOGUE 由康泰纳仕公司与人 民画报社合作出版。VOGUE 用极具视觉冲 击力的高品质的视觉图片来呈现时尚潮 流,受到了广大读者、设计师乃至整个时 尚行业的推崇。同时,中国版 VOGUE 已 被行业内推举为全球最有影响力和时尚权 威性的版本之一。VOGUE.com.cn 就是中 国版的官方产品网站。

2010 年 4 月改版前

改版前 优 点

存 在 问 题

2010 年 4 月改版后

改版后

1、版面简洁,文字数量合理。

1、图片精美,视觉感较活跃,色调比较流行。

2、屏长合适,感觉不会太繁杂累赘。

2、分类清晰,版面分割清楚,版式也较主流。

1、导航太小不明显,而且非主流,与

1、屏数太多内容太繁杂。空间浪费严重。全

现在所习惯的横排方式相差太远。

部都重点就是没有重点。有死拼硬凑的感觉。

2、图文结合的具体内容,排布太混乱,

2、文字数量太多。作为时尚网站,文字并不

主题分类也没有什么逻辑。

是最重要的角色,点到即止反而更有效果。

3、视觉感比较平淡,重点不突出

3、信息架构啰嗦重复混乱,不够清晰精简。


结合 VOGUE.com.cn 一些地区的网站,以及中国大陆的网站改版前后来看。改后的版 本虽然色彩活跃了不少,一些原来网站不合理的地方也有改进。但是,整体上,原来的网站 更加符合普遍的 VOGUE 网站的风格。 总结以上的,可以归纳出人性化的网站应该具备的,有以下一些特征: 适合长度的屏数

突出重点的内容

符合习惯的布局

充分利用的空间

清晰的网站导航

合理的信息架构

合适长度的屏数 突出重点的内容 对于时尚网站,除开最新的推荐热点,重点 的就是时装秀、流行趋势、新装图片、模特写真 之类的,以及一些面对会员的优惠和活动。关注 这类网站的也大多数是年轻女性或是时尚设计 师。原来的网站页面过长,包含了全部的内容, 现在保留最能引起兴趣的部分。 借鉴高档奢侈品的网站。将原来的大于 3 屏 的长度,简化为 1.5 屏。不需要经常拖动滚动条 的屏幕,使用效率更高,用户也可以更好的关注 屏中显示的内容,而且不会因为看到过长的页面 而失去耐心。

改版尝试首页


符合习惯的布局 充分利用的空间 将原来的元素布局进行调整,沿用网站原来的一些设计元素,调整位置和大小使更符合 浏览的习惯。简化一些累赘的内容,更充分有效利用空间。 首页调整的地方包括: 1 搜索框和常用功能的排列 2 中央动态图片新闻 3 秀场下拉菜单的排布和内容 4 会员活动与优惠 5 版权和其他网站链接

官方页面

改版尝试页面


部分内页的调整和改版 这里是网站的其中的一个内页——时装秀场。这里面的排布初看似乎是挺简洁合适的。 但是当进行一些操作时就会发现一些问题。 1 下拉的菜单,虽然分为三个不同的类,但是里面的选择都是一样的,都是品牌的名字,和 底下深灰色的(惊讶的长达 3 屏左右)品牌列表相重复了。品牌的名字对于一般的人作用并 不大,除了那些无比热衷的潮人,以及行内的设计师。 2 进入某品牌后, “秀场报道”后面隐藏着图片的微缩,不注意的话是看不到的。而图片的 下方是一些相关的信息,而这些信息又还属于重复累赘的范围,在同一页面中出现了两次。 “查看各季发布”的按钮隐藏得太好,如果没有往下看,其实谁也不知道。另外就又还是那 又长又烦的品牌列表,和一些链接到其他图片的按钮。

官方页面

改版尝试页面

内页改版的地方包括: 1 在首页和具体栏目之间再加一个概括页面,包括该大类的重要内容的摘要。 2 将红色区域的可选择的下拉列表省去,只剩下图标和说明文字。 3 将“选择季节”的下拉菜单,和深灰部分的“品牌列表”整合为可伸缩的方便选择切换的 活动列表。放在靠右的地方,符合一般人用右手点鼠标的习惯。 4 “秀场报道”和图片的微缩分别独立开来。秀场报道一直可见,并把原来红色区域的一些 信息合并过来。图片微缩放在第二屏,需要的可以查看,不影响第一屏大图片动画的观看。 5 将文字按钮转化成图片按钮来表示。主要是可以使整个页面简洁而有活力些,避免死板。


“时装发布”一些改版尝试的图片:

鼠标移动到图片上会出现控制播放的箭头

鼠标移动到图标上会出现相应的注释

点击视频图标出现相关视频或推荐视频

当地区的框为红色表示所代表的子列表激活

点击相应的图标出现图片微缩列表并自动播放

增加了收藏夹功能,满足个性化的需要


清晰的网站导航

官方版本导航

改版尝试导航

标签排列

官方版本将标签全部放在一起,太多的堆叠让人眼花缭乱,分不清楚。而且链接太多太 碎,感觉不整体不明显,也比较乱,容易忽略。搜索框也不够明显和独立,特别当右侧的广 告的底色为白色时,搜索框就更难找到了。 改版尝试将不同角度的分类标签分开放,主要的与日常操作思维相符合的标签放在左 边,其他相对次要的内容标签统一放在靠右的地方。另外将一些常用的操作,如收藏、搜索 等放在一个统一的相对块状的位置,避免太过零散。也会容易找到。 

下拉列表形式 官方版本的导航列表是纵向 展开的,而且由于信息架构的安 排,有些下拉的菜单很长,动作很 大,选择起来不方便,甚至觉得有 些笨拙。

将纵向的改为横向的列表,利用网站主要内容和导航条之间的空间,而不 去破坏主要页面中的其他元素。菜单弹出的动作感觉相对优雅一些。此外人在 浏览中选择东西时,手左右移动的范围要比上下移动的范围要大得多。左右的 选择会比上下的容易一些。


合理的信息架构 在官方的网站的信息架构中,我们看得出,内容非常多,分类也很多,似乎非常详细, 但是实际上,里面有许多内容是重复的,或者硬是拆开了相似的内容拼凑出来的分类。把那 些重复的归到一起,放在一个比较合理的位置,再将没有必要独立成为栏目的内容合并成一 个新栏目。通过这样来减少信息架构的累赘,简单明了的栏目,不容易产生误会,可以保证 更容易浏览到自己感兴趣的内容。


总结与评价 在课程学习中,老师总是在引导我们去找出实际生活,与她所教授的书本中总结的知识 的联系。这样的思维,让我用改版的方式去做一个网站。 这些问题总在反复的提问和回答: 哪些地方和我们的生活习惯不相符合/相符合? 在日常情况下我们是如何操作的? 当我们碰到一个这样的情况时,我们怎样去解决? 这个界面给人的感觉是什么? 这个界面是否让人觉得易于接受和理解? „„ 这次的作业,很客观的说,并没有我先前所认为的理想。 遗憾的是,我并没有完全用一个新的事物来代替先前的网站,说起来也只不过在原有的 基础上修修补补。也没有做出一个完整的合理的交互系统,真正能够使一个网站站到一个更 高的起点。 高兴的是,在整个的改版过程中,我充分地锻炼了选择取舍以及有限空间中的优化的能 力,通过自己的创造,对原有的东西的改造,使得整个网页慢慢趋于优良的状态。 在改版过程中,有非常纠结的地方,或是取舍,或是颠覆,可是在慢慢的调整和思考中, 总能找出合适的解决方法,这就是学习的过程。

—— 林

姗 2010-07


un essai d'améliorer un site web网站改良尝试