Web技术:易趣 vs 淘宝

 更新时间:2016年9月20日 19:04  点击:2204

这两个月来,因为工作的需要,对 Web 相关的技术做了一点研究,经过在自己的 站点 上一点实践。觉得自己还算略有心得[实际上是刚刚入门的啦:)]。

本着学以致用的原则,写这篇 Blog 有针对性的做个小小的分析。例子就选择易趣(ebay中国)淘宝这对竞争对手吧。这里对两个公司的称呼排名按照字母表顺序。以下的"易趣"与"淘宝"如无特殊说明则分别指代双方的 Web 页面。

要说明的是,我这里所说的"Web技术"是个比较狭义的概念,内容将限制在 HTML、XHTML、CSS、Web Design、搜索引擎友好等几个方面上。

用 IE 打开各自的站点,从头向下看,乍一看两个站点格局类似--毕竟是竞争对手嘛,连主色调都有些雷同。先引起我注意的是淘宝首页的主导航条,居然是图片做的(分别是“我要买”、“我要卖”、“我的淘宝”、“社区”这四个),而且,那几个图片看起来也不是很漂亮,尤为严重的是,鼠标移到图片上看看,哦,很不好,没有用到 "Alt" 这个对图片非常重要的HTML 标记。这对搜索引擎来说,不是很“友好”。看看易趣主导航条处理的还算不错,看上去舒服一些,当然了,也是用图片做的(有趣的是,易趣的导航条如果不用图片也能做出来一样效果的),不过鼠标移过去可以看到图片的说明(导航条的图片用了 "Alt" 标记)。从这一点来说,易趣的页面设计似乎稍稍强那么一点点。

在易趣站点导航条的上方,我看到了站点地图(Sitemap),找遍了淘宝的页面,我没有发现这个比较重要的站点内容。一个精心制作的站点地图对来访的用户和来访的搜索引擎机器人来说,都是很有参考性的。

既然前面说到了 Alt 标记,不妨接着看看这两个站点整个页面对图片的标记情况。通过 Mozilla Firefox 的 Pageinfo 工具,淘宝的页面内共有图片 80 个(会有一点点误差),不过只有 4 处用到了 Alt 标记。易趣呢,61幅图片,设置了 14 个 Alt 标记,但有内容的只有 7 个。另外一半的标记内是空的。这里所说的两个页面时间以 2004年12月13日22:00 为参考。检测工具是 Firefox 1.0。

上一步的比较我用了 Firefox ,需要说明一下各自在 Firefox 里的显示情况 的是,易趣在页面在 Firefox 中有了不好的表现:无法正常显示。页面出现了变形。估计是设计的时候没有针对不同的浏览器进行测试,也反映了页面代码设计的结构不太好。而淘宝的页面在 Firefox 浏览器中显示良好。得了一分。

通过 Pageinfo 工具我们了解到,淘宝的页面编码是 "GB2312",而易趣用的是 "UTF8",从这一点上如果要说个谁优谁劣有点牵强,但是要肯定的是 UTF8 的扩展性更好一些,这一点应该也和易趣(ebay中国)前一段时间和 ebay.com 总站进行整合有关。

开始看看这个两个站点的 HTML 的源代码。易趣的站点源代码,哦,居然有好大一段 CSS 在那里,复制并粘贴到写字板中,居然有 1,693 字节之多。对于一个大型电子商务站点来说,这个是大忌!想想看,每个页面如果能省下来 1,693 字节,那么一天要节省多少流量? 而如果每个页面都要多解析 1,693 字节,无形中会浪费多少金钱呢? 淘宝在这一点上处理的还算可以,页面中没有看到单独的 CSS 段落。

  误区之一、仅仅停留在发布企业形象和产品信息上

  许多公司在网站建设过程,最早想到的就是把公司产品、业务简介、公司促销活动等信息贴在公司网站上。这样的做法充其量只是多个电子公告板而已,根本没有发挥网络的互动功能。由于传统产业经营者大多生性保守,因此对于主动出击的建议大多会瞻前顾后。其实,网站架设应由网络营销角度出发。换句话说,是否可以透过网络,在现有营销通路以外,提供一个企业与消费者之间直接接触与沟通的渠道,提供企业另一种销售模式机会。因此,传统产业要的网站,应该由营销主管角度优先思索。第二个角度就是从管理角度去思索,例如公司在全省拥有许多营业网点或分公司,各种网点之间的公文传递或资源分配是否可以透过网站,以提高经营绩效。
  
  误区之二、在页面中塞满图片、Java程序、Flash、音乐等

  其实就目前上网速度来看,网页如果加上太多的FLASH或FLAME,或挂上太多图片,势必影响传输速度,这样对普遍缺乏信心的客户而言,很容易就因为不愿耐心等候下载完毕,而选择中途跳开。如此一来,再漂亮的网页也不会有人看!依照我们的网站建设的经验,愈来愈多客户选择实用网站,不愿选择太花哨的网站。因为实在没有耐心等待像SHOCKWAVE程序那么长的下载时间;另外一个干干净净、条理分明的网页比较容易阅读,客户可以在很短时间找到他要的信息,不必被太多视觉污染所干扰。所以企业的网页不需要太多美工,因为要看漂亮的图片,客户自然有合适网站可以上,不必浪费客户下载的时间与金钱。

  如果你在经营自己的在线商务,你的网站最重要的任务就是销售你的产品或服务,其他任何脱离这个基本原则的东西都是垃圾。

  如果你还不同意我的观点,请你先去看看任何前100名的网站吧。就拿网上最著名的Yahoo(雅虎)来说,你见到Yahoo的网站上有Java程序、插件,或者听到过音乐吗?用不着多解释了吧?

  误区之三、很长时间都不更新一次

  如果一个网站的资料一个月才更新一次,请问谁会有兴趣上这个网站?当然资料更新与维护需要成本,因为我们不是在做一个入口网站或专业网站,不需要每天更新;如果能做到每周更新或每两周更新,并在网站上注明更新时间或预告下次更新时间,将有助于告知客户何时可以上网来取得最新资讯。另外所谓活网站的“活”,也是指需具备与客户互动机制,例如邮件列表系统、留言板或客服系统等,当然不需样样功能都具备。必须针对网站的定位,选择适死机制;同时对于客户所提意见的处理,也需及时,不能让客户对网站失去信心!
  
  误区之四、人家有什么我也要有的观念

  许多企业老板常说你看我的竞争对手XXX的网站建设多棒,什么功能都有,网页又漂亮,赶快帮我搞个更漂亮的网站来跟他拼一拼!这样想法真是可悲,网站不是做来好看的,也绝对不是在比谁的网站漂亮!真正关键在于你希望网站,能提供哪些实用的功能?只要做出来的网站能够满足当初设计构想,能帮企业缩短作业流程的时间或提高工作效率,这就是一个有用的网站。尤其是如果你自己的想法一变再变,不管你的网站是委外制作或由公司IT人员自行建置,碰到这样的老板,这个网站想要成功的机会将微乎其微。
  
  误区之五、不重视收集反馈信息,不依照反馈信息作出相应的调整

  一些人往往忽略了网站建设很重要的一点,那就是网站前途是由网站的访问者决定的,让他们满意往往是你的首要任务。我就曾经有过这样的经验。网站建设初期,时常有读者抱怨页面中有乱码且中文折行有问题,后来经过研究,改变了页面的设定,基本上解决了这个问题,从而使我们的访问量更上一层楼。特别重要的一点是,如果我们没有积极地去寻求读者的反馈,我们可能永远也意识不到我们的失误。

  所以说一定要重视访问者的反馈,因为那些将要购买你的产品或服务的客户就在这些访问者中间,只有了解他们的感受,才能使你获得成功。

  误区之六、将宝贵的时间浪费在无益的工作上

  对一名互联网市场推广人员来说,最宝贵的财产就是时间,有时候时间比金钱更重要。而时间又是很有限的资源,所以你必需分出轻重缓急。如果你不知道什么是重要的市场活动、什么不是,那你就是在浪费宝贵的时间。

  有人将搜索引擎奉为法宝,甚至有人想只要在搜索引擎搜索结果中排到前10名,就能一夜成名。这只是个神话罢了,别将你的宝贵时间浪费在那上面。

  你应该特别注意的一件事情是尽量使你每天的工作尽可能自动化,包括履行订单。要想在网上取得成功,你还必须将你大部分时间花在做广告及做市场营销上面。

  误区之七、不能高效率地管理电子邮件

  你与客户及潜在客户之间的电子邮件交流既能让你成功,也能让你失败。你很难有机会单独与他们交流并给他们留下印象,抓住这种机会很重要。

  我们每天都会收到人们发来的商务电子邮件,许多邮件写得就象10岁小孩的作品:错别字连篇,语法错误,格式混乱,难以阅读…… 每个人都会犯错误,所谓人无完人嘛,但这并不是你犯错误的借口。第一, 预早筹划 设计主页未必很艰难。但是这一工作和编制传统的宣传品一样,都需要我们谨慎处理和筹划。也就是说,我们必须首先确定自己需要传达的主要信息,然后仔细斟酌,把所有意念合理地组织起来;然后是设计一个页面样式,接着重复修订。

第二, 尽量精简 主页的作用好比一本书的封面,是为了吸引用户浏览你的网站内容。因此主页的设计应该醒目,切勿堆砌太多不必要的细节,或是画面过于复杂。在主页上清楚列出3项要点,包括机构名称、提供的产品或服务、以及主页内容(其他页面还有什么资料)。切记页面给你的第一印象最为重要。

第三, 尽量简朴 除非是艺术性网站,否则主页的图形力求简朴。避免使用大图片,耽搁用户的等待时间。主页上的颜色最好不超过64种,页顶图象最好保持在大约10KB以下。主页整体要能够迅速传递。如果载入时间超过10-15秒,很多用户就会不耐烦。同时保证你的主页能在次一级浏览器上正常显示。

第四, 善用图像 要设法吸引用户的眼球,主页就要有醒目,新颖的画面、美观的字体。图象内容应该有一定的实际作用,切忌虚饰浮夸,注意合适的图象可以弥补文字的不足。

第五, 使主页易于漫游 主页的其中一个主要功能是作为漫游工具,指引用户查阅你存储在网址或其他地点的信息,因此应该尽量使漫游过程不费吹灰之力。基于清晰和速度的考虑,主页上的链接项目应只限于几个高级的类别,例如公司、产品、服务、支援等,用6至8个链接项目最为理想。此外,提供的信息不应埋藏在重重叠叠的页面之下,穿越5个以上的链接项目已足以令人厌烦。因此,必须在广度和深度之间求取平衡。如果网站上有太多信息,你可能要编制较长的页面或使用更多联接项目,甚至可能要建立多个主页,使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息,肯定受用户欢迎。假若有充足的资源,便应找一位专家来评估设计的主页是否方便易用。并且设法找一些对主页陌生的用户,来试用你的初步制成品。

第六, 提纲挈领 主页一般必须包括以下项目:

标题。此标题必须清楚无误地标示年的网站,标题可以是名称、标语徽号或图象。

电子邮件地址。以便用户及时反馈信息。

版权资料。这是适用于主页内容的版权规定,可以是在主页上标示一句简短的版权声明,用链接方法带出另外几个载有详细使用条款的页面,这样可以避免主页显示得乱糟糟。

联络资料。列出通讯地址、公关或营业部门的电话号码等。

第七, 循环利用现有信息 制作首页时,通常都毋须从头做起,因为有许多现成的文字、图画等资料可供我们重复使用。很多情况下,只要用少许功夫,就可把这些材料转到网页上使用。

第八, 保持新鲜感 网上的新事物层出不穷,每天都有新花样。如果你的主页从不改变,用户很快就会厌倦。在主页上预告即将有新资料的推出,可以吸引用户再来访问。不妨在页头用大字标题宣布新消息。可以定期更改主页的图象,和主页的式样。趣味性的事项可以持续更新。同时,为保持新鲜感,应该时刻确保主页提供的是最新信息,将更新主页信息的工作纳入既定的公关及资料编制计划内。确保链接运作正常。

第九, 贯彻诺言 做不到的事情,千万不要轻易承诺。切勿随便叫用户作出回应行动,例如要求用户填交订货表格,除非你已制定好处理这些订单的方法和交货程序。如果在网上列出联络电话,就要确保能够迅速解决来电者的问题。

第十, 吸引用户浏览 为吸引用户来访问,必须使主页易于寻找。通知其他网站(题材相关的网站),做链接。安排自己的网址列在所有相关网址目录、索引、查找程序页面中。尽量将网址传播出去。




<

回想自己从事Web方面的开发已经有6-7年,对于各种Web技术都已经非常熟悉.可是,身为程序员的我对于制作Web表单界面的事着实心痛。

心痛1:很多后端代码和逻辑要写,可我还不得不费力的在各种网页制作工具中拖放控件放到美工提供的美术模板中。再配上css写上javascript。表单大一点够我弄上一整天。

心痛2:表单这东西,不是老手还干不了,又要漂亮又要有功能所以要和各种各样的table,td,div,javascript,css打交道。稍微不注意,显示效果就和所想的不一样,最后这种事情全成了老手门的活了。新手反只能在旁边看着。

心痛3:……哎不写了。今天不全是来抱怨的。

今天和大家分享一下我所了解的各种语言和平台中表单制作比较好的方式:

基本方式:在平台如ASP.NET中可以使用Visual Studio .NET工具制作表单,在java平台下的jsp中的表单可以使用JBuilder或是Eclipse制作表单,这些工具都提供了可视化的,即见即所得的编辑方式,但此类工具都常偏重于给程序设计,所以要制作一个漂亮的界面,基本上都需要使用工具中的原码编辑来制作。程序编码效率虽然很高,可是很难达到一个美化效果。

Visual Studio .NET工具界面

Eclipse工具界面

推荐方式一:借助DW工具

  DW也就是由macromedia出品的Dreamweaver。Dreamweaver家族一直是Web美工的最爱,也是目前最强大的网页制作工具之一。DW其实对程序人员有一个好处,无论希望制作任何语言和平台下的表单,DW中都可以做到,更重要的是DW能满足任何美术要求下的表单制作。

  DW工具界面

  随着企业intranet和国际internet的迅速发展,越来越多的工作流程,商务交易,教育、培训、会议和讲座,以及个人消费娱乐都被转移到所谓的万维网(World Wide Web,以下简称WEB)上来了。与此相对应的是交互操作的复杂性越来越高。

  随着Browser/Server模式的日渐流行,很多操作都是在浏览器环境下的网页上完成的,并不是只有失效的链接和意外的出错才会使操作者感到烦恼,即便是一次完整的成功操作过程,也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验。

  本文试图阐述WEB交互页面设计的一些指导性原则,这些原则有利于避免发生不愉快的操作体验。这些原则是用户友好性的,是在完成同一种操作要求下,使用户最感到轻松、简单、舒适的WEB交互界面设计原则。我们假定我们讨论的WEB页面都是功能正常的,符合美学观点的。需要说明我们讨论的原则可能会和设计上的美学观点以及既有的功能设计有所冲突。如果发生这种情况,基于“实用的就是美的”观点,我们会建议您酌情放弃原先的美学观点与功能设计。

  1. 输入控件的自动聚焦和可用键盘切换输入焦点

  使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB键(IE缺省实现)或方向键切换聚焦到下一个输入控件。

  输入控件指WEB页面表单(<form>)中显式的,需要用户进行修改、编辑操作的表单元素。对于这些控件,如果没有自动聚焦操作,不可避免的出现一次用户鼠标定位操作(如果用户此前处于键盘输入操作状态或鼠标定位后需要进行键盘输入操作,实际上是键盘鼠标切换操作)。如果鼠标定位后需要进行键盘输入操作,如果不能键盘切换输入焦点,那么不可避免的在切换输入焦点时需要反复的键盘鼠标切换操作,这是很繁琐的。

  如果实现了页面加载完成即自动聚焦到第一个输入控件,并且可以键盘切换输入焦点标定位操作,那么对于用户来说整个页面的输入操作可能都不需要鼠标操作,或次数较少,这是一种便利。毕竟频繁的键盘鼠标切换操作是比较累人的。

  对于有输入栏的对话框或网页,在不干预的情况下就应将当前控制焦点定位在待输入的输入栏上;如果输入栏在一般情况下不需要更改其中的内容,则应直接将焦点定在“确定”按钮上;在几个输入栏之间应支持tab,shift+tab切换操作,“确定”和“取消”应该是切换操作的终点,与具体所在位置无关。

  2.可用Enter(或Ctrl+Enter)键提交,确保和点击提交按钮的效果是相同的

  不要在提交按钮上加入onClick=”…”这样的JavaScript代码。

  用Enter键提交页面是原则1的自然延伸,而且这也是浏览器所缺省支持的。只所以单独列出来是因为实际上有些设计者设计的页面不能达到这种效果,结果导致使用Enter键提交和点击“确定”按钮提交带来的效果不一样。大部分情况下是设计者在“确定”按钮上加入了onClik=”…”这样的代码,通过点击“确定”按钮后,会执行一段JavaScript代码,比如对某些hidden类型的input元素设值。而使用Enter键提交时就不会执行这段代码。

  正确的做法是把这段代码移到表单标签<form>中,以onSubmit=”…”属性引入。

  对于<textarea>表单元素,它会消耗Enter键,因此会使得Enter键提交失效。可以引入JavaScript代码捕捉Ctrl+Enter复合键,一旦捕捉到即执行表单的submit()方法。对于需要频繁提交的场合,比如BBS上,这种代码是很有必要的。

  3. 鼠标动作提示和回应

  对用户的鼠标定位操作,当移动到可响应的位置上时,应给予视觉或听觉的提示。

  动作回应的最简单形式就是鼠标ICON变成手状。浏览器只对具有href属性的HTML标签会自动进行这种变换ICON的行为。对于没有href属性(或没有设置href属性)的标签,可以通过JavaScript设置style属性的cursor为hand。

  目标区域发生变化是更为主动的响应形式。当鼠标指针移到目标区域,此时指针图形改变或文字颜色发生改变均能较大的减轻用户搜索定位目标区域的注意力负担。在按钮上增添直观的图形,尽可能的增大按钮面积;按钮间保持适当的距离,太近增加了用户区别它们之间界限以防误操作的负担,太远增加了用户搜索定位按钮的负担。

  4.尽可能早的在客户端完成输入数据合法性验证

  输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成,否则验证工作应在最早能完成的情况下进行。

  在客户端完成数据合法性验证,可以避免一次服务器请求和回复通讯,这种通讯是需要用户等待的,如果用户等待很长时间后从服务器返回的结果提示出现的错误是在输入时即可发现的,那么这种设计就是不友好的。诸如密码长度限制,用户名允许字符限制等等,显然应该在客户端提交前就应该进行验证。

<
[!--infotagslink--]

相关文章

  • Windows VPN服务器配置图文教程 超详细版

    VPN可以虚拟出一个专用网络,让远处的计算机和你相当于处在同一个局域网中,而中间的数据也可以实现加密传输,用处很大,特别是在一些大公司,分公司处在不同的区域。...2016-01-27
  • 解决执行maven命令时提示Process terminated的问题

    这篇文章主要介绍了解决执行maven命令时提示Process terminated的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25
  • PS滤镜里为什么没有素描?PS CS6素描滤镜在哪?

    我们在作图的时候需要用到“素描”滤镜,但是点开滤镜选项就是找不到。该怎么快速找到“素描”滤镜呢?请往下看。 1、点开滤镜选项时,发现没有素描这一项。2、别急,我...2017-01-22
  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢,导致php脚本超时了,但也有其它很多原因,下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25
  • Cloudflare国内自选IP节点整理收录

    一般来说为了达到隐藏自身 IP,我们都会选择一些 CDN 服务,目前用的最多的免费 CDN 是 Cloudflare。但是正常情况下 Cloudflare 是不能自己选择IP,有时候分配给我们的 IP 可能表现不佳,也只能将就着用。但是我们都希望可以用上 CF 比较快的 IP。那么自选IP,就显得很必要了。...2022-09-23
  • Mybatis Plus select 实现只查询部分字段

    这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-01
  • MySQL性能监控软件Nagios的安装及配置教程

    这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14
  • php file_get_contents 设置代理抓取页面示例

    file_get_contents函数在php中可以直接打开本地文件也可以直接抓取远程服务器文件,如果简单的采集我们可以使用file_get_contents直接来操作,如果有防采集我们可能需要...2016-11-25
  • 解决Mybatis 大数据量的批量insert问题

    这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09
  • mybatis-plus 表名添加前缀的实现方法

    这篇文章主要介绍了mybatis-plus 表名添加前缀的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-26
  • iOS APP h5快捷程序 .mobileconfig的生成

    1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序,文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档,管理日益增...2021-12-23
  • mybatis-plus 返回部分字段的解决方式

    这篇文章主要介绍了mybatis-plus 返回部分字段的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-02
  • 详解如何清理redis集群的所有数据

    这篇文章主要介绍了详解如何清理redis集群的所有数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18
  • Redis连接池配置及初始化实现

    这篇文章主要介绍了Redis连接池配置及初始化实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-29
  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28
  • mybatis的Configuration详解

    这篇文章主要介绍了mybatis的Configuration详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-04
  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
  • pandas pd.read_csv()函数中parse_dates()参数的用法说明

    这篇文章主要介绍了pandas pd.read_csv()函数中parse_dates()参数的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-05
  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多,但发现,它们基本都有一个弊端:空格往往清除不了 经过不断的研究,最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02