找了半天Chrome上的GR插件，好似还没几个支持新版，所以萌生了自己优化样式的念头。

效果如下：

安装：点击安装

下面我简单介绍一下 DoCute，以及未来可能的发展路径。

关于产品：

DoCute 是一个分享穿着品味的时尚导购平台，在 DoCute 你可以和朋友一起发现、分享、购买喜爱的衣物； 还可以使用 DoCute 来寻找那些网络上、杂志上漂亮衣物的购买地址。

如果你有经营一家时尚衣物的网店，也可以把你出售衣物的购买地址挂到 DoCute 上来，在分享穿着品味的同时还能为你的店铺提升收益…

http://docute.com/single/about/

抛弃所有希望以后，便是自由。

Form 《Fight Club》。

目标：由于购物是一个很复杂的过程，有选购和购买两方面，这篇文章主要就购买流程进行展开分析，寻找最佳购买体验。

场景：

1. 只分析购买流程，所以我们假定买家已找到一个目标商品（不排除还有别的想买）
2. 购买实物。
3. 统一采取支付宝支付。
4. 由于并非所有平台都支持非会员购买，所以在此假设用户已是会员，对于非会员购物流程的对比分析以后再上独篇文章分析。
5. 收货地址统一。

分析：

首先我们定义一个好的购物流程应该是什么样子的，其实就是要步骤少、购买快，最理想的当然是所想即所得，但又不自作聪明的设计。

操作步数（独占窗口浮动层同样算做一步）：

我们先简单统计一下各个站点的购买操作步骤，因为这是比较好量化出来的。

从表格看出淘宝和拍拍两平台基本上都是相同的操作，唯一不同的也只是一个独占浮动层的前端表现方式的不同；顺便列出了其它三个电子购物平台，它们都是B2C传统必须经过购物车购买，还有多余的操作是收货地址和物流方式的层层确认上有了很多不必要的操作，这多半都是为了系统稳健性的技术问题没有得到很好的解决导致的，只有当当的加入购物车后的独立跳转页去提示操作结果的做法实在多余。

操作细节：

在淘宝和拍拍在大体购买流程上难分伯仲的情况下，细节成了产品竞争力的重要体现，我们下面主要就操作流程上的细节区别做一下分析。由于两者在未登录情况下的处理都相同，流程也统一，所以下面只说已登录的场景。

1）同款多型号商品

淘宝：

拍拍：

同样是买同样一个东西，只是size不同，我们都会认识是同一款商品，对于卖家，他们不希望同样的商品进行重复的添加，对于买家也希望同一款东西能在一个地方挑选，因为只是size不同。我想只要是在淘宝有过购买经验的都多少遇到过这个玩意，其便利就在此多做解释。

至于拍拍没有做应该仅仅只是技术投入上的问题，在此就过多阐述。

2）加入购物车提示

淘宝：

拍拍：

首先最为只管的感觉，淘宝的黄色的、警示的、UI统一的“去购物车结算”按钮非常醒目，旁边的“再逛逛”也与“去购物车结算”按钮一大一小、相互凸显。

而相比之下拍拍的这个提示框的两个关键按钮就设计随意了些，非常常规的以局外人的视角在表述这两个按钮的用途，特别是“查看购物车”的文字，没有任何付款的冲动，对于初级网络用户可能也会不知所云。在拍拍的这个提示框里值得注意的是“查看该卖家的其他商品”，什么场景下用户会需要这个按钮？用户买了一件运费和商品价格相当的商品，想多买一些，会感觉没亏太多在运费上。但我们注意到，这个框是需要用户触发“加入购物车”才出现的，也就是说这个提示是用户事先就确定要买多件商品的时候才会触发出现的，所以这个提示的“性价比”并不高，反倒在这个狭小空间影响了其它没有此需求的用户进行主流程操作，我的建议是将此提示放在购物车页面里会更恰当好处。

还有个细节是在弹出框的位置，淘宝应该也是特别处理过的，刚好挡住两个购买按钮，使购买流程始终在一条主线上，不会产生分支的可能。

3）订单提交页（单件）

从之前做商城时的访问计数器的分析表明，有很多准付费用户都会是从这里失踪的，这是一个非常关键的页面，所以要尽量让这个步骤保持简单、流畅。

怎么才是简单的？让用户操作少，填写得少，看到的少。

这点上淘宝再次优于拍拍，这其中最大的原因就是整个页面的排版不同，拍拍是1栏，淘宝是2栏。

我想拍拍是想让流程更顺畅，单一化，所以采用单列的布局，不过也随即带来了弊端——页面高度的增加。淘宝的表单基本上在第一屏（包括1280*768）基本都能展现完全，即便我还多于5个的收货地址，而拍拍在收货地址处的间隔太大，更加拉大了页面高度上的差距。虽然拍拍在运送方式的选择框采用的一行多个的排列方式来压缩高度，但在这类需要对比的选项之间（特别是数字对比），纵向排列明显要优于横向排列。

淘宝也并非没有缺点，淘宝的“显示全部地址”链接脱离了用户的操作视线，建议参考拍拍同样放在收货地址列表的最下方。

综合来看，在大方向上淘宝还是略胜一筹，只是在细节上各有千秋。

（PS：凑巧的事，淘宝和拍拍竟然在都在“匿名购买”的选择框都是不可以点击文字选择，粗心到一个地方了，呵呵）

总评：

经过两者的比较，如果在没有新的产品需求的情况下，满分设为10分的话，淘宝我给8分，拍拍7分。我觉得从流程上来说体验已经很简单了，接下来的工作可以在数据分析基础上做一些智能化的尝试，比如不同种类的商品，实物还是虚拟的？不同价位的，不同地区，不同使用熟练度的用户……依据这些进行区别对待（有些类别的商品已经在做，比如游戏交易）。

先就这么多吧，希望大家多拍砖，呵呵。下次有空再来写篇关于选购流程的对比分析吧。

下面主要是对于Web产品在实际设计和开发中遇到的问题，以及一些解决方案。这些细节常常不被设计师和工程师注意到，但它们确确实实会影响到用户的使用感受，其中大部分都是我亲身经历而遭遇不爽后的总结，虽然我不能代表所有用户，但我相信一定会有很多常驻网虫有体验到这些细节，只是我们还无从去量化统计出有多少人被这些细节困扰着。

（以下不分先后主次，想到哪补充到哪，但多数你一定遇到过）

1、不该有的虚线边框

现象：A标签在点击过后都会产生一个虚线边框，随不是说所有都需要去处理，但某些情况下还是需要处理处理的。

解决：1）写CSS时就要考虑到，把边画准点；2）查查unselectable、-moz-user-select等属性；3）click后触发blur。

案例：

http://yahoo.cn

http://www.alibaba.com/Netbooks-UMPC_pid100005061

2、别随便关闭我的dialog好吗？请多给用户一些安全感

现象：很多时候为了给用户更好的体验，减少页面跳转，我们会使用很多浮动层，而为了再减少噪音，我们会把一些浮动层做成独占窗体的，把背景变黑，然后我们再进一步人性化，会在点击浮动层以外区域时自动关闭浮动层，对吧，我想你一定遇到过，特别是很多站点喜欢用thickbox for jquery。而这个时候就产生问题了，如果弹出层里用户已经输入了很多表单信息，而在不知情的情况下很习惯性的随意点击了周边空白区域，惨了，浮动层消失了，未提交的表单内容也随即无处找回了。杯具。

解决：如果浮动层里还有多行文本框或多个单行输入框的表单，还有还是超过2步以上点击操作的dialog，这样的浮动层不宜绑定此类画蛇添足的触发事件。

3、表单的tab index顺序

现象：说到这个问题，印象最深刻的就是人人网，当初还叫校内网的时候，就是因为它的tab index顺序混乱，使得我不再上人人发表文字的。当时的情况是这样的：我在朋友相册里发评论，好不容易打好了一段文字，然后习惯性的按下tab键，接着enter，这时杯具发生了，竟然跳转到了首页，我的评论没有发上去！这到底怎么了，我气愤的重复刚才的操作，发现原来是在我按下tab键时，焦点竟然跑到了页面顶部校内网的logo链接上，恰好这个链接就是返回首页。所以，既然浏览器有tab快捷键这个标准，请各位设计人员和开发人员都务必处理好这个问题。

类似的问题还是出现在常见的登录框，常常在登录流程中多了一个“忘记密码”。

解决：表单元素都有tabindex属性。

案例：

http://www.youku.com/

4、为什么点了没反应？

现象：这个问题在网络好的时候可能不容易凸显，但在网络不稳定或者访问一下国外站点时，就会体现出来。原因处在js还没加载完，而这些按钮和链接必须依赖js才能操作。可能有人会觉得这在小题大做，但确确实实这种问题不只一次被我妈提出，向我寻求帮助：“儿子，怎么这个网站不能用了，是不是我中毒了？”。

解决：解决方式有两个方向，一种是提供不支持js的环境下的方案，让用户能在恶劣环境下也能基本完成操作；当然很多公司因为人力财力或时间上考虑都做不到这点，那么就得在js的加载方式上做文章，实现延时执行，具体做法可以参考taobao ued的Kissy Js框架。

5、让用户点击多选框和单选框旁边的文字即可选中

现象：一定要点击多选框或单选框，这在复杂的界面上，或者当选项很多的时候，会让用户操作不够流畅，甚至对那些老人和鼠标操作不熟练者更是种苛刻的要求。

解决：给多选框及单选框配个label标签吧。

案例：

http://survey.stockstar.com/

6、在表单里回车应该是提交表单

现象：有些站点的表单在按下回车键时会莫名其妙的触发到别的操作上去，或者是完全失效。

解决：分两种情况。首先，第一种是触发了非目标动作，这多数是产生在ASP.Net开发的站点上，是由于标准.Net开发模式的单form模式，要不就一个个表单去写脚本控制，不过我还是建议还原HTML的原始语义，您可以看看.Net上的MVC实现方法。然后是第二种失效的问题，这多数是由于很多站点的表单触发是js脚本触发，并且只绑定在提交按钮的click事件上，解决方式就是加上该有的form标签，把时间绑定在form的submit事件上。

案例：http://hrzp.snda.com/

7、别一下弹出层，一下跳转页面好不好。

现象：很多站点为了提升用户体验，喜欢运用一些layer加载内容（特别），放置用户偏离主线操作流程。但这里如果做得不够彻底，反而会让用户对整个站点没有安全感。

解决：1）链接就该是链接的样子，比如hover上去出现下划线；2）别把链接和弹出layer的按钮放在一组，比如3个tab里别只有2个是ajax切换而1个是跳转页面，如果必须是跳转页面，那么样式上要有所区分，参考1），如果确实都只是图片链接，也最好给个tooltip，如：“前往XXX主页”、“链接到相册”等。

案例：

你看得出哪些是链接？如果都是链接也就没事了，可惜不是。

http://www.renren.com/

8、锚点定位最好不要将目标内容紧贴顶部

现象：锚点可以定位的特性作为Web从业人员应该都知道，但默认的定位位置是比较陈旧的，在它出现的年代页面相对简单，内容单一，复杂度不高，而到今天的网页，页面元素复杂，环境噪音很多，这种情况下，将锚点的内容定位到页面顶部是不太舒服的，也很难获取到用户的注意力，因为大部分网页都有header，所以用户的注意力大部分都处在距顶部80-200像素的位置开始，我们应尽量在锚点切换时让用户的视线跨度小一点，比较优秀的例子就是淘宝的商品详情页的。

解决：1）你可以将锚点的设置合理化一点；2）或者加入js控制其滚动条的位置

.cover-flow .mask {
    position: absolute; left: 0; top: 0; pointer-events: none;
    background-image: -moz-linear-gradient(0deg, #f4f4f5 15%, rgba(244, 244, 245, 0) 80%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0.15, #f4f4f5), color-stop(0.8, rgba(244, 244, 245, 0)));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff4f4f5,endColorstr=#00f4f4f5,gradientType=1);
}

效果：

觉得以后可以在页面上多多运用，能给人耳目一新的视觉体验。（因为IE下是用滤镜实现的，所以较复杂的界面还是不提倡使用）。

扩展阅读：

moz-linear-gradient

webkit-gradient

Microsoft.gradient

这都是由于最开始那个看似“明确”的需求导致的。人与人是有差异的，我们要时刻谨记这一点，不能总用我们的理解去定义一个需求。就拿我们最常听到的需求描述来举例吧：“我们想做个和这个网站一样的功能，你看下就知道了，一模一样的做。”到如果就拿着这样的需求进入设计开发阶段，那么你们很可能要加班了。在这样模糊的需求面前，你很难保证需求方眼里的“这个网站”和你眼中的“这个网站”是希一样的，哪怕再小的功能点。

即便需求方如何的肯定你口里对项目的描述，详细的需求设计和需求确认的工作的不能少，因为在讲究用户体验的今天一个不起眼的细节都可能产生大工作量，你很难短时间内口述清楚这些细节，何况你也还不能保证对方的理解能力很强。假设客户只是和你说要做个Lv那样的包，没说一定要整张牛皮、没说花纹要完全对称、没说要那哪种等级的皮革、内胆要什么布料……你做出来的包很可能超出预期或达不到要求。

即便时间紧迫，但为了避免返工也必需如此。

千万别自以为是，经验只能加速这个过程，而不能省去。多聆听，少替需求方描述需求，不然他会以为你懂了。

第一次在好德便利店看到ALKAQUA就被深深的吸引，爱不释手，但最终还是因为价钱，没有狠心买下，结果回家后一直在想它。直至今天，毫不犹豫的买下了它。

喜欢ALKAQUA最主要的原因就是因为它瓶子的设计，看到ALKAQUA的第一感觉就是口渴，就是想将其喝下，它的纯粹，简约，自然，让我欲罢不能。我们来看看它是什么样子。

极致简约设计。

标签背面的这个巧妙的设计也更让我有透心凉的感觉，很好的传达了ALKAQUA的纯净特质。

不能不说作为一瓶水的设计，ALKAQUA是出众的。

1. 过来后，您所在的团队是“盛大游戏-互动产品中心-产品开发部（上海）”；
2. 工作地点位于上海浦东张江高科。
3. 日常工作内容：创新性Web2.0产品的开发，游戏论坛、商城、活动等相关应用的开发，Web开发技术的研究，部门人员培训；
4. 我们希望你是各种Web 2.0网站的热心用户，足够的互联网精神，最好还能附上你们的各种Web2.0网站的个人主页；
5. 如果你来了盛大，会是这样子的：http://www.snda.com/cn/joinsnda/grow7.html。
6. 当然我喜欢你的工作不只是为了养家糊口，如果你想亲手创造影响更多人的互联网应用，又符合下面的岗位要求，那就赶快来吧，一定有你充分发挥潜力的空间。

职位要求：

高级PHP开发工程师

1. 3年以上PHP开发经验，具备卓越的抽象能力、架构分析能力与设计能力；
2. 对PHP语言有十分深入的了解，熟悉掌握JS/AJAX等技术，熟悉Python/Perl语言者优先；
3. 具备优秀的编程能力，熟练掌握常用数据结构和算法，有较强的创新能力；
4. 对OOP有较为深入的认识，掌握常用设计模式；
5. 对Mysql有十分深入的认识，熟练掌握关系数据库理论；
6. 熟悉UCenter Home，Discuz!优先。
7. 熟悉Linux操作系统的安装、应用、维护和管理，熟练掌握shell操作及各种应用配置；
8. 有过大规模、分布式、可扩展系统研发经验者优先；
9. 具备良好的团队合作精神和积极主动的沟通意识。

高级JAVA开发工程师

1. 三年以上使用Java语言进行开发的经验，有Spring, struts2 和Ibatis开发经验；
2. 精通jsp,servlet,java bean,JMS,Jdbc等技术开发，熟悉J2EE规范，熟悉各种常用设计模式；
3. 熟悉基于数据库的设计和开发；
4. 熟悉Linux操作系统和MySql数据库；
5. 良好的沟通技能，团队合作能力，热爱互联网平台架构事业；
6. 熟悉数据库设计，了解数据库性能调优者优先；
7. 熟悉企业设计模式，具有大型企业级系统设计、开发、调优经验者优先；
8. 具有大型在线应用的设计、开发经验者优先。

高级.NET开发工程师

1. 大学本科以上学历，计算机及相关专业毕业，3年以上工作经验；
2. 精通Windows平台下的Web技术开发，具有丰富的项目经验，熟悉ASP.NET，熟悉ADO.NET编程模型，熟练掌握NET Framework, C#，熟练使用Visual Studio.NET开发工具；
3. 具有良好的代码编写风格，熟悉Web程序代码安全；
4. 善于与他人沟通、合作，具有团队精神，良好的自学能力；
5. 熟悉数据库设计，了解数据库性能调优者优先；
6. 熟悉企业设计模式，具有大型企业级系统设计、开发、调优经验者优先；
7. 具有大型在线应用的设计、开发经验者优先。

有意者可直接发简历到: wuchao # snda.com并注明“应聘XX职位”。

好得设计驱动技术创新，好的技术为设计提供无限的想象。

摘自《淘宝网前端应用与发展》。