电子商务网站网页设计规则

电子商务网站的网页设计规则也可以适用于很多非商务方面的网站。总结网站页面建设经验,网页设计需遵循下面五个规则:页面易读、容易浏览、方便查找、风格布局保持一致、页面快速下载。换句话说,你的站点应该让你的目标客户容易使用。为了使你的站点能被你的目标客户欣赏,而且能被站点目录的编辑者许可,必须遵守所有这些规则。这些规则的优势在于:它们不仅可以应用到你的站点目录提交上,还可以应用到你的目标客户身上。

规则一:页面易读

可能你的目标用户正在使用完全不同的电脑、显示器、网络连接,以及浏览器。事实上,没有人能够确切知道潜在消费者是怎样查看你的站点的,他们可能使用笔记本电脑、可能使用拨号连接或者高速连接、可能使用苹果电脑,故站点设计者需要提供尽可能多的平台、浏览器,以及网络速度。因此,作为一个通用的规则,在你向主要的站点目录提交你的站点之前,网页中的每一项目都需要在主要的浏览器和两种电脑上时清晰易读。下面列出了页面易读方面的细节:

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

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

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

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

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

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

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

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

(9)站点设计者不该使用那些使你的文档变得模糊的背景,或者那些给阅读造成困难的颜色。

规则二:容易浏览

“容易浏览”意味着你的目标客户在任何时候访问站点都能知道他们所处的位置。如果他们迷路了,他们应该能去看看站点地图、帮助部分、站点搜索,或者从任何一个网页到主页。这可以让浏览者清楚,他们在哪儿,他们想去哪儿,以及他们曾经去过哪儿。

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

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

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

规则三:方便查找

网站提供的独特的产品、服务,以及信息应该很容易地在你的目标用户登录站点后找到。一般来说,你的目标客户不想在登录你的主页后四处寻找信息,人们愿意浏览直接包含他们寻找的信息的网页。如果他们不能直接去那些包含特定信息的网页,他们往往要非常不情愿地通过七八次的点击才能找到信息。如果他们必须点击更多次,可能就会灰心,然后离开你的站点。

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

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

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

规则四:风格布局保持一致

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

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

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

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

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

规则五:页面快速下载

我们都知道,页面下载速度是网站留住访问者的关键因素。如果5秒还不能打开一个网页,一般人就会没有耐心。页面快速下载保证客户能以最快地速度进出网站。我们生活在一个高节奏的时代,没人乐意等待,互联网也不例外。虽然互联网速度较几年之前已有了质的飞跃,但事实上技术进步再快,也赶不上人们的要求。所以千万别试图挑战访问者的耐性。

一个网页为什么需要花费很长时间下载,这是因为必须先下载一些附件,比如Flash、程序、图片Shockwave或者特殊效果等等。如果想要“眩”你的网站,建议最多使用一到两种特殊效果,那些使人眼花缭乱的图片和图标往往会分散访问者对网站内容的注意力,要是这些图片的下载速度再慢一点,很可能访问者等不及它们完全打开就失去耐性了。使用较多上面的内容的网页一般为视频类或游戏类网页,大多数的网页不属于“视频游戏”的类别,所以最好缩小你的网页,尤其是主页的下载时间。

应该时时提醒自己,网站首页就像一个广告牌。当开车经过一个广告牌时,没有时间阅读上面的详细说明,也不可能赞赏其复杂的图案,广告标志从眼前一闪而过,必须在一瞬间给人留下印象。网上访问者也是“一闪而过”,保证你的首页简单而快速,放弃一切显著减慢主页速度的资料。

要保持页面下载速度的主要方法是让网页简单,只把最重要的信息安排在首页,尽量避免使用过大的图片,更应避免自动下载音乐或其他多媒体文件。这就要求主页大小不应超过50 KB。下面是一些通常减少你网页下载时间的原则:

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

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

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

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

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

下载时间不仅仅对于你的目标客户来说十分重要,而且对搜索引擎的可视性来说同样十分重要。当搜索引擎蜘蛛向你的服务器申请一个网页的时候,如果下载时间太长,或者你的服务器不能很快地将网页递交给蜘蛛,那么搜索引擎可能就不会将这个网页加入到索引中。

了解目标用户中消费者的多样性即不同的消费者可以容忍的下载时间是不同的。如果你是一个图片设计站点或一个在线游戏站点,你的消费者很可能为了体验你的创造性资源而等待网页的下载。然而,如果你是向忙碌的制造商出售机器零件,访问有价值信息的容易程序就应该是你主要关心的问题。

这些准则是相互关联的,理解这一点非常重要。比如,假如说你的主页在某个主要搜索引擎中关于你的目标关键词所排的位置是第一位,同时人们点击链接访问你的站点。如果你的站点设计者将大量的图片、动画,以及文字放在你的主页,导致了下载速度放慢,那么大多数人就都不愿意等待网页的下载。因此,如果你的站点设计者没有考虑到下载时间或者其他的设计规则,那么在搜索引擎中占有一个非常好的一号位置就这样被浪费掉了。

本文摘自《网络营销-网商成功之道》已出版。

时间: 2024-09-22 06:11:45

电子商务网站网页设计规则的相关文章

PS打造具有空间感的iPhone苹果应用电子商务网站网页设计制作教程

今年苹果公司将推出新的iPhone5. 与往年一样,相应会有很多配套Apps推出,所以苹果应用程序的网络营销也会如火如荼的展开. 这就是为什么我们要有与众不同的Idea,去创建一个iphone相关的网站. 如果你想通过网店来销售公司的Apps. 如果你有很多iphone5 Apps. 我们将教你如何创建一个好看的布局,用电子商务网站出售你的iphone应用程序. 老方法,先看看整体样式. 1.新建文档,Size:1100*721px,填充背景色 #2b2b2b. 2.下一步是填充背景,与第3篇<

10条电子商务网站的 易用性规则

目前,电子商务网站愈发激烈的竞争着,尽管你可能用最低的价格在卖最好的东西,用户的购买体验也是非常重要的,对电子商务网站来说,易用性就是让用户尽可能快而简单的完成购买,一条小小的改进,有时候带来改变是无法想象的.本来讲述了10条电子商务网站的易用性规则. 1.用户无需注册直接购买 很多公司都喜欢让用户注册,但注册过程实在太冗长了,尤其对那些临时光顾的用户,强迫注册会将他们吓跑. 让用户直接往购物车里添加货物,在结算前,另 外提供一个注册选项以方便他们的下一次购买是一个很有效的方法,在任何时候都要明

电子商务网站的设计

问题描述 电子商务网站的设计架构,有哪几部分,我们是准备设计B2C模式的电子商务网站,具体到银行接口部分是怎么一个实现流程 解决方案 解决方案二:跟普通的网站设计也没什么2样,银行或者是提供借口的公司会给一个网关接口你,你在链接接口的时候把参数传递过去就行了,会有演示流程给你的.解决方案三:你是说银行支付吧你到支付宝问下,他们给你个接口的!

网站网页设计的黄金布局比例

作为一个网页设计师开始一个项目时经常会考虑到网页的布局,虽然现在很多人倾向使用Grid css框架(如960,blueprint),但有时也需要设计一些独特的布局本文我们要探讨如何将黄金分割理论运用到网页设计中,大部分涉及到的技术也同样适用于其他的设计或艺术类工作,当然主要还是针对于网站设计布局. 黄金比例 黄金分割又称黄金比例,是一个数学上是术语,用来表示两个元素的比例,它的值大约等于1.618.黄金分割从文艺复兴时就开始了.那个时代的艺术家对黄金分割十分推崇,并且广泛运用在各种设计作品上,数

交互设计:电子商务网站导航设计

最近在UCDCHINA上看一些电子商务设计的东西,因为手头一个项目就是如此.发现最新一期的话题是"导航设计".我觉得结合最近的一些思考,有很多想法是可以说一说. 说到电子商务的导航, 很多人都会指向2个电子商务网站,淘宝和亚马逊.但是以此来设计电子商务网站的导航,其实是不准确的,因为在不同商品数量级上,淘宝和亚马逊的做法,不一定合适现在的电子商务网站. 1.海量商品的导航 淘宝和亚马逊商品数量众多,据数据显示,淘宝现在有4000万商品,为4000万商品设计导航和为4000个商品设计导航

工行网站网页设计有漏洞 网友可上去随便调侃

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 12月29日下午,有网友向网易科技频道爆料称,工商银行网站被黑.经网易科技查证,并不是工商银行的网站被黑,而是网页设计有漏洞. 网易科技打开网友发来的链接,工行网站的新闻页面上确实显示有"看吧,我把工行黑了!"字样.经过网易分析发现,该网页是允许用户自己更改地址栏的文字,并可以显示在网页的内容中所致. 有业界人士分析认为,

B2C电子商务网站评论设计的5个不同境界

<奖励推荐计划,谁乐意推荐>文章是一帮老美经济学家做的试验,文章很长,主要描述试验过程和应用案例,但核心观点只有几个,而且也是很符合常理的,比如"奖励推荐计划是有效的,但效果有天花板和奖励额度不成正比,原因是奖励额度的增加一方面会增加推荐收益,但同时也会增加社会和心理成本─不公平交易所带来的愧疚感"-等等 而我总结出来的适合"电子商务商品评论设计"的结论只有一个: 在自发情况下,推荐者离推荐受益的可能越远,其推荐的可能性越高,而其推荐被信任的程度越高.

服装类垂直行业的电子商务网站产品设计

从产品角度看,电子商务是一个复杂的系统,真以为买卖然后支付就完事,那就太傻太天真了.即使牛逼如淘宝,产品进化也从未停止.淘宝近期就推出了货到付款和大金额信用卡支付的两项服务,而且支付环节还走入了线下.连跑在第一名的都不敢放松,后来者的有啊当然更不敢掉以轻心,方舟计划.阿拉丁计划一筐.好事,没有强敌竞争,你的产品不可能更好的进步. 今天瞅了一下服装类垂直行业的电子商务公司Vancl,典型的营销驱动型公司,价格鲜明,但产品粗放. 我一直认为服装鞋帽类电子商务最重要的一个产品就是建立一个用户资料库.这

电子商务网站SEO的8个建议

电子商务网站优化已经成为电商网络营销最重要的策略之一,一个整体优化状况不好的电子商务网站,供求信息不仅不能在搜索引擎检索到,甚至在网站内部分类目录.站内搜索.导航系统等都很难被潜在用户找到,这样电子商务平台网站商业价值就不断被缩小,所以网站优化是不可缺少的一部分,电子商务网站一定要重视起来,不要只有网站没有"商务",那么如何在众多的电子商务网站中脱颖而出呢?需要做的很多,这里木木仅指出电子商务网站SEO的8个建议. 一.挖掘海量关键词 电子商务网站首先就需要海量的流量,流量越大,转化越