IT认知实习报告

IT

淘宝电子商务网站内容设计分析

我国随着互联网的普及，网上购物越来越普遍和流行。B2B模式，B2C模式，C2C模式在我国迅速发展。如巴巴，淘宝等网站顺势而生，使电子商务深入人群，被大众所接受推广，越来越普遍提及。因此电子商务也越来越受到企业和人们的关注，在我国快速发展。淘宝网主要面向供应商、客户或者企业产品（服务）的消费群体，以提供某种直属于企业业务范围的服务或交易、或者为业务服务的服务或者交易为主的网站。根据电子商务模式对象分类可以分为：B2B、B2C、C2C、O2O等。

一、调查对象：

国内著名电子商务网站：淘宝网

电子商务模式：C2C模式

二、遵循规则

网页内容设计需遵循下面五个规则：

1.页面易读2.容易浏览3.方便查找4.风格布局保持一致

5.页面快速

三、设计分析

1.页面易读

淘宝网是大型商务网站，用户数多，商品繁杂。假如不简洁易易懂，用户接受不来，用户体验会很差，致使网站不受欢迎。用户会使用完全不同的电脑、显示器、网络连接，以及浏览器，设计者很难确切知道潜在消费者是怎样查看站点的，他们可能使用笔记本电脑、可能使用拨号连接或者高速连接、可能使用台式机或者苹果电脑，所以站点设计者需要提供尽可能多的平台、浏览器，以及网络速度。因此，作为一个通用的规则，在你向主要的站点目录提交你的站点之前，网页中的每一项目都需要在主要的浏览器和两种电脑上时清晰易读。部分细节如下：

(1)设计时不该将文本字体设置得太小或太大。如果站点是专门为视力损伤的客户设计，那么文档的字体大小应该进行相应地调整。

(2)使用词语要正确得体，一个语法混乱、错别字连篇的网站是不会受人欢迎的。对于电子商务网站也要考虑到鼓动性和吸引性的用语。

(3)所有图片中的文本都应该清晰易读。高对比度的颜色，以及字体与字样的选择对于图片的易读性是非常重要的。

(4)文字颜色很重要，不要使背景的颜色冲淡了文字的视觉效果，一般来说，以淡色背景下的深色文字为佳。

(5)为方便或快速阅读可将网站的内容分栏设计，甚至双栏也要比整整一页的视觉效果要好很多。

(6)站点设计者不该使用那些使你的文档变得模糊的背景，或者那些给阅读造成

困难的颜色。

(7)动画都不应该动得太快，那样会使你的目标客户无法阅读。如果你的目标用户必须循环地看三遍甚至更多遍才能捕捉全部信息，那么动画就是动得太快。

(8)当你的站点设计或者再设计正处于模板阶段，试着用不同的浏览器、不同的平台、不同的网络连接查看。要注意IE6.0、IE7.0和Firefo_对网页显示的不同，还要注意宽屏笔记本和窄屏，以及分辨率的差别的自适应性。

（9）搜索的HTML文档必须在图片开启和图片关闭的情况下都能清晰易读。这就意味着在制作HTML文档、背景图片和图片中文本的时候，要使用对比度高的颜色。

2.容易浏览

“容易浏览”表示目标客户在任何时候访问站点都能知道他们所处的位置。如果他们迷路了，他们应该能去看看站点地图、帮助部分、站点搜索，或者从任何一个网页到主页。这可以让浏览者清楚，他们在哪儿，他们想去哪儿，以及他们曾经去过哪儿。这样可以记录用户浏览过的商品信息，找出他们的喜好，推荐商品，便于用户体验。

（1）站点目录的编辑者通常会考虑到目标客户。如果专业的站点目录编辑者，通常是经验丰富的网络使用者，当你在浏览你的站点时遇到了许多困难，你的目标客户就很可能也会在浏览你站点时遇到同样的问题。导航明确、导向清晰、使用方便。由于人们习惯于从左到右、从上到下阅读，所以主要的导航条应放置在页面左边，对于较长页面来说，在最底部设置一个简单导航也很有必要(只要两项就够了：主页和页面顶部)。确定一种你满意的模式之后，最好将这种模式应用到同一网站的每个页面，这样，浏览者就知道如何寻找信息。

（2）文本链接的颜色应该被目标客户所熟悉。蓝色加下划线的文本通常标记一个还未访问的链接;紫色或褐红色加下划线的文本通常标记一个已经访问过的链接。使用超文本链接或图片链接，使人们能够在网站上自如地前进或后退，而不要让他们总是使用浏览器上的前进或后退按钮。链接文本的颜色最好用约定俗成的(未访问为蓝色，点击过的用紫色或栗色);在所有图片上ALT标识符注明图片名称或解释，以便那些不愿意自动加载图片的用户能够了解图片的含义;在每个页面上都应提供“上一页”“下一页”“首页”“回子目录”等超链接。

（3）所有的超链接应该对目标客户都很清晰。像浏览按钮或者文件制表符这样的图片应该明显地标记出来，方便阅读。正如站点设计的第一条规则中说的那样，你的站点设计者应该选择站点图片的颜色、背景、纹理和特殊效果，这样才能对主要的浏览器、电脑屏幕，以及平台来说都是清晰易读的。许多站点设计者喜欢不在文本超链接上加下划线。如果你设计的站点针对的用户是有经验的网络使用者，那么只要超链接文本是独特的，这个设计技术就没有问题。然而，如果你的目标用户并没有很多网络经验，那么最好在超文本链接下面加上下划线。

3.方便查找

用户体验是很重要的一点，假如网站做的太过繁杂，不便查找，想购买某样商品的用户就会放弃搜寻该物品，甚至离开网站不再回来，使企业及买家损失极大。网站提供独特的产品、服务，以及信息应该要容易地在目标用户登录站点后找到。一般来说，目标客户不想在登录你的主页后四处寻找信息，人们愿意浏览直接包含他们寻找的信息的网页。如果他们不能直接去那些包含特定信息的网页，他们往往要非常不情愿地通过七八次的点击才能找到信息。如果他们必须点击更多次，可能就会灰心，然后离开你的站点。目标客户在找到包含他们寻找的信息

的网页后，需要看到那些信息“在折叠的上方”或者是在屏幕的顶端。即使人们不能马上在屏幕的顶端看到产品或者服务，他们需要了解的搜索内容就在这个特定的网页上。因为人们不一定会滚动网页，以确认他们搜索的信息在这个网页上可以获得。

（1）一个经常被问到的问题网页就是一个那些站点设计者没能很好地利用“在折叠的上方”策略的例子。比如说将10个问题放在网页上，而你的目标用户寻找的信息是问题6的答案。如果一个问题一个答案地进行排列，可能问题6就不在上面需要下拉，这容易让人忽略，如果将问题列在一起，然后提供超链接跳转到答案，这样就可以让用户第一眼就可以找到所需要的内容。你所有的FAQs网页都应该按照这样的格式排列。这个策略是很有利的，不仅因为对那些最终客户有益，而且这种格式是搜索引擎友好的布局。

（2）顶部或者尾部要放上相关的内容，如：“关于我们”的网页或区域、“联系我们”的网页或区域、“地址”的网页或区域等。潜在消费者寻找你的联系信息和你公司的正确拼写检查的最可能的地方就是“关于我们”网页，因此，即使你在其他地方提供了联系信息，但将这些信息放在“关于我们”部分也是一个好主意。尤其是在把联系信息放在尾部时，许多最终用户是不会滚动到他们所看网页的底部去查找信息的。

4.风格布局保持一致

网站的风格和布局应该保持一致。布局意味着在站点上栏目排布、导航、图片和留白的位置。这是你放置你的文本、图片以及浏览内容的地方，是你屏幕中的“真正的财产”。布局设计的一致性能够帮助你的目标客户在浏览你的站点时，使他感觉和你做生意很舒服。设计意味着利用你的图片、字体和样式的特殊效果，以及你站点的颜色。在站点的设计过程中，有许多方面都是重复的。站点中的每一个网页在主体文本、超链接，以及标题中使用的字体、样式，以及颜色应该都是一样的。

（1）如果站点中显示提供的产品的照片，那么照片的尺寸的差别应该很小。水平照片的尺寸都应该完全一样，垂直照片的尺寸也应该完全一样。如果你在产品照片中使用阴影效果，则你应该在所有的产品照片中都使用阴影效果。图片和文本不该随机地或者随意地被摆放在网页上。网页上的每一个项目都应该和其他项目有视觉上的联系。相关的项目，比如主导航栏和次导航栏应该放在一起，这样它们就会被看作是聚集成组的而不是不相关的项目。

两个导航栏在视觉上的不同，在造成视觉上对比的同时也显示了它们是怎样联系的。比如，主导航栏会用特殊的颜色被显示在网页的顶端，同时次导航栏会用不同设置的颜色在屏幕的左边开启，这些颜色设置与主导航栏配合得很好。最终客户正在访问的站点的那部分的主导航栏按钮颜色会改变。当最终用户点击主导航栏的链接、次导航栏，或者子导航栏就会打开。子导航栏中的文本重复主导航栏中的文本，更进一步表明左边的导航按钮是主导航栏的子集。

（2）控制小片显示最终客户正在访问的网页。主标题表明最终用户正在访问的网页，副标题强调站点这个部分的主要特色。副标题上的尖头巧妙地提示它们是超链接。

（3）网页底端的文本链接与主导航栏按钮对应，这些链接表明目标客户已经访问过的网页。超链接的颜色与浏览器默认的颜色相近，因为它不认为目标客户像经常在网络上工作的人那样精通网络。如果目标客户迷路了，或者需要调整它们的位置，页面切换图片可以链接到主页和站点地图。导航栏的这个设置在每个网

页上都是一样的，使他感觉和你做生意很舒服。设计意味着利用你的图片、字体和样式的特殊效果，以及站点的颜色。在站点的设计过程中，有许多方面都是重复的。站点中的每一个网页在主体文本、超链接，以及标题中使用的字体、样式，以及颜色应该都是一样的。

（5）如果站点中显示提供的产品的照片，那么照片的尺寸的差别应该很小。水平照片的尺寸都应该完全一样，垂直照片的尺寸也应该完全一样。如果你在产品照片中使用阴影效果，则你应该在所有的产品照片中都使用阴影效果。图片和文本不该随机地或者随意地被摆放在网页上。网页上的每一个项目都应该和其他项目有视觉上的联系。相关的项目，比如主导航栏和次导航栏应该放在一起，这样它们就会被看作是聚集成组的而不是不相关的项目。

两个导航栏在视觉上的不同，在造成视觉上对比的同时也显示了它们是怎样联系的。比如，主导航栏会用特殊的颜色被显示在网页的顶端，同时次导航栏会用不同设置的颜色在屏幕的左边开启，这些颜色设置与主导航栏配合得很好。最终客户正在访问的站点的那部分的主导航栏按钮颜色会改变。当最终用户点击主导航栏的链接、次导航栏，或者子导航栏就会打开。子导航栏中的文本重复主导航栏中的文本，更进一步表明左边的导航按钮是主导航栏的子集。

5.页面快速

如果几秒中内一个网页还没打开，用户就会没有耐心等待，不满足需求，离开网站，所以页面速度是网站留住访问者的关键因素。一个网页为什么需要花费很长时间，这是因为必须先一些附件，比如Flash、代码、图片Shockwave或者特殊效果等等。如果想要客户欣赏你的网站，用户体验良好。最好使用一到两种特殊效果，那些使人眼花缭乱的图片和图标往往会分散访问者对网站内容的注意力，要是这些图片的速度再慢一点，很可能访问者等不及它们完全打开就失去耐性了。使用较多上面的内容的网页一般为视频类或游戏类网页，大多数的网页不属于“视频游戏”的类别，所以最好缩小网页，尤其是主页的时间。网上访问者大部分是“一闪而过”，要保证首页简单而快速，放弃一切显著减慢主页速度的资料。主要方法就是让网页简单，把最重要的信息安排在首页，尽量避免使用过大的图片，更应避免自动音乐或其他多媒体文件。这就要求主页大小不应超过50KB。网页时间部分原则如下：

(1)尽量少地使用Flash动画：仅仅在你的站点最重要的部分吸引注意力的时候才使用动画。即便要使用动画，动画的数据量也要尽可能地小。

(2)遵循简洁规则：你想要你的顾客注意到你站点上所提供的产品、服务和信息，而不是你站点的精美设计。

(3)产品照片使用小图片，被称为“Thumbnails”：在你的产品网页中，许多小图片组成的图库起来要比整张的图片快得多。在你的目标客户产生兴趣以后，再给他们查看大图的机会。

(4)为了更快地，总是从大图片创建成单独的、独特的小图片：所有的图片都应该在图像软件中重新调整大小，而不是在HTML语言中。

(5)尽可能地在站点的多个网页中使用相同的图片：使用图片的一致性可以提高介绍的连续性。比如说，在站点的每一个网页上都放上商标，这对浏览和商标品牌都有好处，同时它还能帮助目标客户了解他们一直在访问的站点到底是谁的。商标图片只需要一次，因为它会被储存在浏览器的高速缓冲存储器中。当访问者在站点中四处浏览的时候，每个网页中的新图片都需要。时间不仅对目标客户来说十分重要，而且对搜索引擎的可视性来说同样十分重要。当搜

索引擎蜘蛛向服务器申请一个网页的时候，如果时间太长，或者服务器不能很快地将网页递交给蜘蛛，那么搜索引擎可能就不会将这个网页加入到索引中。所以要了解目标用户中消费者的多样性，了解不同的消费者可以容忍的时间，做出有意义有价值的信息程序界面。便于用户体验，促进商务交易。

四、结论

淘宝网是大型C2C商务网站，拥有众多用户和企业资源，商品种类繁多。为了使网站能被用户欣赏，简洁易懂，也能被站点目录的编辑者许可，网页内容设计必须遵循页面易读、容易浏览、方便查找、风格布局保持一致、页面快速的五项原则，方便目标客户使用。