博学乃学识渊博，知道的多，了解的广。堂乃我们之集体。博学堂以提高我们整体的知识为目标开展活动。博学堂为前端开发者和网站设计者提供了一个交流分享的平台。一起分享代码的乐趣，总结项目的成长，展望新技术的发展。

博学堂是国际站UED内部的分享平台。专注于知识分享、工作交流、成果推广等领域，致力于构建自由、开放、互助的分享环境。只要你敢喷，我们就给你提供舞台！ 自愿参与，广泛的话题，充足的时间，充分的自由！

简单列举了曾经的分享主题：
1. JIRA系统应用：Jira系统是优秀的项目管理与工作流跟踪软件，目前已经在UED全面部署应用。

2. JS开发心得：主要分享在大图预览与智能联想开发过程中的编程思路、难点解决方案。内容涉及： 图片缩放及拖拽预览解决方案； 模块化编程的应用思路； 探讨如何保证复用性的同时，使程序具备一定的扩展性。

3. 异步上传组件：异步上传组件的设计思路及其布署方案。

4. 大图预览及其组件设计，内容有：A 封装用prototype JS，甚至iframe都动态生成;B 只有放大超出区域才启用拖动，且拖动限定范围;C 拖动启用半透明预览/虚线框定位平滑过渡效果;D 放大缩小加入动画效果;E 长按平滑放大/缩小效果实现,增量增加比例;F 放大比例条

5. UED在项目中的流程框架

6. 前端利器之 Fiddler

7. Unicorn基于High Performance Web Sites的最佳实践

8. UED图片格式，压缩处理

9. 阿里巴巴国际站前端核心框架结构讨论会

10. WordPress分享等

以上更多的只是简单的和不完全的列举，博学堂为阿里巴巴国际站UED积累了很多宝贵的资料和分享，接下来希望这样的交流能够有更多的人参与进来，并且可以分享到更多的人。

在D2上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想，现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是D2想告诉你的。

• 本届主题：蜕变·成长
• 论坛时间：2009年12月19日(星期六)
• 论坛地点：杭州市滨江区网商路699号, 阿里巴巴B2B园区 （地图）
• 举办单位：阿里巴巴
• 特别致谢：CSDN、JavaEye、谋智网络、百度、豆瓣、华章图书、口碑网、
  蓝色理想、腾讯网、图灵教育、淘宝网、支付宝。
• 官网地址：d2forum.org
• 推广视频：http://v.youku.com/v_show/id_XMTM2NDI0MDU2.html
• 报名地址：http://www.d2forum.org/d2/4/sign_up.html（截止时间：2009.12.14 0:0:0）
• 日程安排：
  

  时间	主题	嘉宾
  08:45 – 09:15	入场
  09:15 – 10:15	《模板语言与大前端》	金大为（百度）
  10:30 – 11:30	《从YUI2到YUI3看前端的演变》	张克军（豆瓣）
  11:30 – 13:00	午饭/休息/参观（阿里巴巴免费提供午餐）
  13:00 – 14:00	《SilverlightQQ项目实践——Silverlight架构思考》	甄焱鲲（腾讯）
  14:15 – 15:15	《前端安全概览及防范》	吕峰军（淘宝）
  15:30 – 16:30	《前端性能优化与自动化》	鄢学鵾（口碑）
  16:30 – 18:00	交流互动

  注意：以上安排可能会根据具体情况进行一些补充与修改。

在广交会门口倒是有很多买家来索取资料，其中不乏有Alibaba的忠实用户，可以听到很多买家夸奖阿里巴巴的词汇，买家和供应商都忙于展会无暇和我们多聊。一位苏丹GG说晚上有空，约他一起吃饭深入了解他的贸易过程。苏丹GG爽快答应了，下午如约来到我们摊位前回合。由于他是穆斯林，所以我们跟随他去他推荐的阿拉伯餐厅。 苏丹GG持荷兰护照，阿拉伯语是母语，英语，法语，荷兰语都熟练，为一家波兰公司做采购工作，世界各地采购，海运到汉堡，然后他自己开车从汉堡到华沙。我刚从德国回来，还和他简单交流了一下德国开车的爽劲。 他来广交会之前两天还在韩国，刚刚发了两集装箱二手车到利比亚，他老婆是利比亚人，他已经从日本韩国倒腾了好个柜的二手车去利比亚，他自己在利比亚的贸易公司有二十多人，他说也从中国买过新车去利比亚，江淮，奇瑞这两个牌子都买过。几乎所有的供应商信息都从阿里巴巴上找，也用Made-in-china。从80多届广交会开始做了十多年外贸，用阿里巴巴也至少四五年了。对阿里非常了解，知道阿里是个国际化的公司，他从韩国和日本的Gold supplier手上淘腾二手车，还从南美贩卖白糖去波兰。对我们的反馈规则也非常了解，知道群发反馈，知道他用阿里巴巴的反馈系统是先把邮件发给阿里巴巴，阿里巴巴再把邮件发给供应商。知道看供应商的详细字段，他也主动提到了在阿里巴巴上遇到困难，有时候明明是贸易公司要说自己是工厂，明明是几间房的小工厂要把自己写的很大，但是他说了90%的Gold supplier还是好的，信息都是真实的。他喜欢和中国人做生意，即使有时候语言不是很通顺他也能感受到中国人的热情。

苏丹GG理解帮助我们提升阿里巴巴网站，就能帮助他更好的做生意，他向我详细描述了他的采购过程。他会先在阿里巴巴上搜索供应商，他会仔细看供应商介绍的页面，他最关心的是供应商是工厂还是贸易公司了，所以他会重点关注工厂面积，员工人数这两个字段，然后发询盘给三五个供应商，让他们针对他要采购的产品报价，他甚至和我们说了他会怎么写这封EMAIL。然后他收到这些供应商的回复之后，会实地去考察，而且他说去一个地方不会只考察一家厂，对中国的产业带有一定了解，会同时考察几家厂。 吃饭的时候他给我看了N张纸片，上面都是他从阿里巴巴网站上抄下来的供应商地址信息，他说接下来的几天就要去温州等地看厂，还有河北，义乌，大连等地的六家供应商。苏丹GG还不失时机的用我的手机给温州和大连的供应商MM打电话，席间大量肉麻的“GOOD xxx, BEST xxx”的词就略过不表，也许老外做生意的讨论是要猛夸对方，把人夸晕了好合作。由于温州MM不太会英文，所以苏丹GG居然让她打我的手机，我瞬间就变成苏丹GG的best friend，还挂上了阿里巴巴的名头，真是生意人啊，汗。 考虑到第二天要和苏丹GG在展会门口碰头一起去，记录苏丹GG的采购行为，也就满口答应温州MM说可以联系我，帮她翻译。没想到第二天展会门口不见苏丹GG踪影，更没想到的是后来的几天温州MM和工厂一直把我当成苏丹GG的翻译使用，重要信息的沟通都通过电话我来传递，暴汗！

苏丹GG领我们去的餐厅，几乎没有中国客人，菜单也只有英文和阿拉伯文，胡乱点了几个他推荐的阿拉伯菜，苏丹GG饭前居然还要去饭店专门准备的祈祷室祈祷，我们等的无聊也只有先去洗个手了（庆幸一下）。饭菜上来后，我按苏丹GG的吃饭，挤了一大块柠檬到汤里去，第一口就差点把我熏倒（幸好没加他的辣酱）。我们处于中国人的热情点了四五个菜，完全吃不了，苏丹GG说穆斯林不能浪费食物，还有人在挨饿呢，看我们吃的斯文就直接手抓，撕好饭菜放到我们每人的盘里，幸好我们几个不挑食也还算能吃，折腾了一个多小时终于把他分过来的饭菜干完。 饭毕我们想先告辞了，没想到苏丹GG兴致极高，拉着我们在酒店大堂谈女人谈人生谈理想。 说他可以娶四个老婆但是只娶了一个，搞定几个老婆完全平等是很麻烦的。又和我们说行业黑幕他都知道，说他为波兰的公司采购，完全可以把价格报高一点，问厂家要回扣，没人会知道，但他是穆斯林，上天会知道，会让他下地狱，所以他不会这么做。说他也完全可以在中国伪造一个工厂帐户，让波兰把货款打过来，然后他卷着钱去利比亚，没人能找到他。但他也不会这么做，并不是因为他怕波兰的公司，他在利比亚也有他自己的小生意（倒腾汽车），但他不会这么做，因为他是穆斯林，他说所有的生意都建立在诚信的基础上，波兰老板相信他，他相信中国工厂。 他还向我打听他目前30%定金，货物装船前余款付清的交易条件是否可靠是否安全，他说所有的过程都有合同，签名按手印，一旦波兰公司说有问题，他就有问题，工厂也有有问题。那他只能去找警察，警察会关闭工厂的。 由此看来貌似苏丹GG对产品的检验，对中国的司法制度，还是有一些担心的。几天展会站下来，苏丹GG也察觉我们的疲态，他后面的验厂行程也排的很满，终于放过我们，各自回宾馆休息。回来的路上我们严重惊讶苏丹GG的能说，也许是常年在异国他乡找不到人说话憋的吧，呵呵。

本以为访谈就此结束了，没想到回杭州的这天，温州MM给我打了N个电话，要我和苏丹GG说好去温州工厂的行程。一个细节很有意思，温州MM让苏丹GG到了温州机场后打车去钱库汽车站，她会在那边等他，两三个小时的路程一般300人民币。苏丹GG说这么远，他会乘公交车去的。（生意人还是挺省钱啊！） 苏丹GG搞错了从广州到温州的航班号（外国人在中国不容易啊），第二天才到龙岗附近的工厂，工厂老板出差，温州MM由于伤口发炎住院也没有陪同。工厂里的人无法和苏丹GG沟通，只能给我打电话。一开始我翻译了很多行程上的抱怨，还威胁时间紧，晚上就回广州。后来渐渐明白苏丹GG抱怨的主要目的是想把之前打样确认的7块钱的报价砍到5块钱。啰嗦了一个上午，工厂主管急了，说或者帮苏丹GG联系好回广州的航班，或者就是等晚上回来和老板自己砍价。苏丹GG乖乖的选择了等待。一个细节是，虽然工厂主管的已经完全可以决定报价了，虽然苏丹GG着急要走也知道工厂老板不能说英文，但他非常坚持要和工厂老板通电话，并且一定要见一面，猜想这是他做生意确立诚信的一种重要方式。（苏丹GG看人还是挺准的，和我们吃饭就能看出我们几个有没有结婚，工作多久了等等信息）
晚上十点，他们艰苦的谈判过程又是通过电话我来传递的。并且我了解到这次波兰公司的两个老板也和苏丹GG一起来到工厂，但两个老板不懂英文，苏丹GG和他们说着爆快的鸟语（荷兰语或者阿拉伯语），一些关键的价格，规格，成本等信息在三种语言之间传递。工厂想改变样品规格来降价，苏丹GG之前已经在这家工厂试了600万个了，但小尺寸的东东在波兰无法使用，最终厂家降了一毛钱，波兰老板要严格按打样的样品确定规格材质和质量。苏丹GG下了每月一个柜的订单，先下了12个集装箱的合同，而且要求精简包装，以便一个集装箱装下更多的货物。一个值得我们关注的细节是，工厂刚开始做外贸，还没有自营进出口权，所以波兰的公司无法打钱给工厂，工厂只接受30%的定金开始生产，全部完成之后请苏丹GG来工厂验货，然后付全款，要求人民币现金，苏丹GG居然能够接受。（估计他知道找外贸公司走这个单子价格就贵了，神奇的是他居然能搞到这么多人民币，而且他能接受工厂不开发票。）另外一个值得关注的是，厂家报的不是通常FOB价格，而是出厂价，要苏丹GG自己开车到工厂来提货的。苏丹GG像我打听工厂到宁波有多远，我真是佩服苏丹GG的专业度，货代都完全自己搞定。最后搞笑是明天他们要回广州，晚上必须签好合同，工厂只能提供中文的合同，纠结了一天的样品规格，价格，付款方式，运输条件等等，大家用N种语言纠结了一整天，苏丹GG居然接受先签中文合同，说没问题，明天一早就去银行取钱，无语，这也许就是他说的一切生意都建立在诚信的基础上吧。

最后，工厂老板非常高兴，也许是表示对于我的感谢，居然扯出自己是诚信通忠实用户来，汗，我本应该趁机推荐他出口通的，呵呵。 苏丹GG和波兰老板也很满意（他们在广州那边砍到的最低价也要8块多），让工厂的人帮忙订回广州的票，居然是两张机票，一张汽车票，苏丹GG自己要乘汽车从温州回广州。如果他不是想趁机溜出去跑跑自己的生意帮自己看工厂的话，我真是佩服他的节俭。 Google了一下，虽然苏丹是穷国人均年收入400美元，利比亚在卡扎菲的领导下还是富国，人均年收入过一万美元，苏丹GG在利比亚有自己的汽车生意，应该不会太穷，节俭的作风和我们经常的FB真是不可同日而语啊。

就记录到这里，很多啰嗦的细节，希望对大家了解外贸业务和阿里巴巴有所帮助。

在进行互联网用户浏览行为的定量研究中，阿里巴巴中国站用户研究小组开发了一个基于服务器日志的可视化分析工具。（视频）

这个分析工具可以通过用户产生的服务器日志数据自动还原出网站结构，并按照页面流量阈值绘制站点地图，并将关键的页面流量数据及其他商业指标进行可视化处理，标注在这张特殊的网站地图上。

用户研究员可以快速获得网站重要页面及产品的直观图像甚至健康状态。

这个工具也被加入了丰富的交互功能，允许用户分析员选中或者搜索某个页面(节点)，查看当前页面的主要用户来源和流向，并打印出URL列表。

同时它也支持按照session或者cookie对用户的群体行为进行多步回溯，从中发现用户浏览网站或者产品使用上的群体行为。

现在这个工具可以在普通笔记本上在10分钟内处理1000万PV的日志样本。假设再加上实时的log数据，或许这个工具也将改变网站产品设计和内容运营的方式，成为一个”Real Time Game”

以下是详细介绍：
随着网站用户的增加，越来越多的网站希望能够了解用户的访问行为。面对纷繁复杂的数据，很多研究者致力于研发直观明了操作便利的可视化软件。本文将介绍我们小组研发的网站用户行为可视化软件G2G (the Guide to Galaxy or loG).

一．实现原理：
1.前提：
用户在访问网站过程中，网站数据仓库记录了用户的IP地址，访问时间，访问的URL，来源Refer（注1）, CookiID等相关信息，这些信息被称为日志。G2G根据日志分析页面的转换率（注2）， 主要来源和去向，群体用户的访问步骤等。

2.结构：
G2G分为两个页面，左页面是时间步数序列图，右页面是页面分布图。
左页面纵坐标为时间：0-24小时，横坐标为用户访问步长：1-800步。每个像素代表用户在一分钟内是否访问过，颜色越红，访问用户越多。例如，当某个用户的访问步长是100步时，则在横坐标为100处，纵坐标为用户访问时间处标注颜色。如果用户在接连不断的访问网站，则在相应位置会出现一条纵线。

右页面的每个圆圈代表网站的一个URL，圆圈大小代表访问量，越大代表访问量越高。颜色代表转换率，越蓝代表转换率越高。基本上，蓝点可以看做是起点，橘黄色的点可看做是终点。
URL的排列采取目录结构方式，内圈代表最简单的目录，越往外圈，目录越深。例如，某个url名称为a/b/c.html，则a作为一个url在最内圈，a/b在次外圈，a/b/c.html在第三圈。在很多情况中，a和a/b只是纯目录结构，并非实际页面，因此并没有用户会访问到它们。此时会以正方形表示，以此为圆心的空心圆圈大小代表其子节点的访问量，在此例中，a的空心圆圈的大小就是a/b，a/b/c.html，a/d，a/d.html等等a/*的页面的访问量之和。

二．功能
G2G除了可以显示上述信息之外，还有以下几种功能可以帮助研究者从不同角度查找信息。
1.可以搜索或者选中一个节点，即URL，查看其主要来源和去向，也可以查看按照时间序列的多步路径。
2.可以从左页面中选中某个区域，点击搜索，在右页面中将会显示选中区域时间段内的页面访问量，转化率等信息。

三．应用点举例
有些信息很明显，例如从左页面上，我们很容易看出一天24时内，何时是访问高峰期或低谷期，因此准确选择合适的时间做一些更换服务器等维护工作。
我们也可以直观分析外站的搜索引擎引入的流量，从而判断哪种搜索引擎更有效，以及这些用户在网站中的访问模式。
另外，我们在研究中发现一个有趣的插曲，在阿里巴巴十周年时，从淘宝首页访问到阿里巴巴的用户中，大部分被引导到阿里巴巴十周年专题。
研究者如果对数据比较敏感，或者能够从多种角度查找信息，则会发现更多有趣的现象。

四：总结
网站用户的行为轨迹对网站来说是一笔很巨大的财富，如果能够充分利用这些信息，将对网站的发展意义重大，我们期待更多研究者参与网站用户行为的可视化研究领域。

注1：用户访问当前页面的前一个来源页面，例：用户从A页面的某个连接进入B页面，则B页面的Refer是A页面。
注2：转换率是指从当前页面跳转到其他页面的比例。

2006年4月，美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森（Jakob Nielsen）发表了一项《眼球轨迹的研究》报告（原文：F-Shaped Pattern For Reading Web Content）。

报告中提出，大多数情况下浏览者都不由自主的以“Ｆ”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。

研究者用了几种不同的页面做眼动仪测试，得到了3张热度图，用颜色来表示浏览者眼光聚集的热度，分为最热（红色）、较热（黄色）、不热（蓝色）和基本不关注（灰色）4种。其中图3搜索结果页因SERP中网站标题、网页摘要较宽，第二条线会随之加长，但仍然是F形状。

图1：F型浏览

研究人员这样诠释F型浏览：

第一步：水平移动

浏览者首先在网页最上部形成一个水平浏览轨迹。

第二步：目光下移，短范围水平移动

浏览者会将目光向下移，扫描比上一步短的区域。

第三步：垂直浏览

浏览者完成上两步后，会将目光沿网页左侧垂直扫描；这一步的浏览速度较慢，也较有系统性、条理性。

F型浏览背后的问题

F型浏览模式这个理论已经推出很久了，我在很多网站和BLOG上也看到过这样的分享。我在思考几个问题：

• 1. 出现F型浏览模式的原因是什么？它的背后是什么样的用户需求？
• 2. F型浏览会受到网站内容、用户需求影响而发生改变吗？会出现别的形状吗？
• 3. F型浏览模式能够给我们什么启示？如何指导我们进行SERP的设计？

带着这些问题，我进行了一些资料的发掘和尝试，进而有了更多的疑问。

什么造成了F型浏览？

Jakob Nielsen花费的苦心用三种不同的网页进行测试，目的是为了告诉我们，F型浏览在不同的网站上都是通用的，用户的F型浏览行为并不会受到网站内容和设计出现太大的不同。

但是他并未进一步分析出现F型浏览的原因，结果让很多人误认为这真的是一种“不由自主”的行为。

也正因为如此，F型浏览也很容易被看出很多漏洞来。比如：

为什么不是E而是F？因为我们看到很多眼动仪测试的图片F下面并未一只有一个水平浏览线，而是多个。

为什么下面的一个水平浏览线要短于上面的一条，而实际上我们看到的很多眼动仪图片却是下面的水平浏览线要长于上面的一个？

而进一步的研究也发现，当考虑到网页丰富的内容元素，比如图片时，F型浏览很容易就被打破。如图，你能看到一个典型的F吗？

图2：图片因素对F型浏览的影响

那么，研究人员又来补充F型浏览了，他们说，当有了图片元素影响后，用户的浏览行为发生了改变，不再呈现F型浏览，而是出现了一个E字：

我想，再这么推下去，还是避免不了漏洞百出，E出来了，F出来了，将来还会有L，I,C，Z……

还是早早透过现象去分析本质，让我们早点接触F型浏览背后的原因更好。

F型浏览背后的研究以及眼动仪确实能够帮助我们发现一些问题，但是F型浏览的理论在很多场合下显得不是很靠谱。不要被F型浏览忽悠，主要是要警惕那些片面理解F型浏览的拿来主义者。

我认为，F型或者是E型浏览方式，绝对不是无意识的“不由自主”的行为，而是网站内容、设计，用户需求和用户习惯多重因素作用下的结果。

• 用户的习惯：从左向右，从上到下，这也是传统阅读习惯在网络上的延伸。
• 互联网用户的阅读习惯：有些像我们阅读黄页或者产品目录的方式：快速扫描的方式，捕捉关键点，读短句子，忽视长篇大论——这些是可以有定论的。
• 用户的需求：这种习惯是如何养成的？我想是因为互联网用户心中有个需求：寻找某个东西。这个东西可能是具体的，比如搜索某个产品。也可能是模糊的，比如浏览新闻网站，我们是想扫描一下看看有没有“激发兴趣”的关键词。当发现这些“关键词”后，我们会阅读更多的辅助信息以帮助决断：这究竟是不是我要找的东西，当发现是的时候，会产生到详情页面的点击，当然发现不是的话，就会继续向下阅读，继续又一次循环。
• 用户的耐心是有限度的，所以随着扫描的进行，页面长度的拉伸，他们若找不到太多兴趣点，兴趣自然会逐渐消减，因此就可能形成了所谓的F型或者金三角热区。

用户在浏览的时候，大脑里出现了三个词语：也许是，是，否。
当词语是“也许是”的时候，用户水平浏览以获取更多信息，当答案是否时，用户放弃水平浏览，下移阅读下一段或者下一个搜索条目。当答案是是时，一般会产生一个点击。如图所示:

图3：F型浏览是有意识的行为

这是我心中的F型浏览模型：

• 纵向扫描用以对比：信息为第一维度要关注的信息，用户寻找的是最重要而且有差异化的信息，用户扫描的速度非常快。用户对比中会产生“定位”，从而产生水平阅读。
• 横向阅读用以判断：信息为第二维度信息，信息可以没有差异化，用户会降低扫描的速度以获取更多有用的信息，帮助自己做判断，要不要点击到详情页。
• 用户的对比需要有差异化的信息,因此当用户做了一次过滤后,原本差异化的信息变为雷同时,F的纵向条开始转移到另外一组信息处，比如在淘宝上搜索mp3，当我经过过滤，筛选出一组均是米奇的MP3时，图片的差异化就没有了，我的F纵向直接过渡到标题或者其他信息。

在以下的图片无差异化的list上，我甚至有可能直接将F的纵向浏览转移到价格或者地区上。

因此，我们可以把F型理解得更加宽泛一些，这样就不用去纠结上面一横长还是下面一横长或者是两横中间的距离，当然也不会纠结为何F会有多条水平横线。

非典型性F型浏览——用户需求、网站设计等因素的影响

上面出现一张掺杂了一张图片的搜索结果页（图2），那么我想，当出现多张图片时，效果又是如何呢？

刚好，这几天我想买个电脑包，去淘宝上搜索电脑包，然后不做任何筛选，直接看搜索到的结果。我有意识观测自己的行为（当然，做研究不用采用我的方式），然后发现：

1. 我首先只看图片——图片能够帮助我快速决断，这个包的颜色、款式、风格是否是我所要寻找的（因此快速出现了一条长长的垂直浏览线）。

2. 当图片满足需求后，我会横向阅读该包的说明（标题）。——如果标题中包含了诸如“二手”，“18寸”等字眼，我就会放弃横向浏览，直接用一个斜线过渡到下一个产品图片。

3. 当快速扫描标题未出现让我say no的字眼时，我将视线落到了价格上。请看倒数第二个红色的包包，图片通过，标题通过，然而价格超出预算，于是我放弃用斜线过渡到下面的产品。

我们假设有一个同样和我在买电脑包的人，假设他不关心颜色，不关心款式，只关心价格（很多做批发的也许是这样的）——那么他一来这个搜索结果页，会不会首先从价格所在的列开始纵向浏览，排除，选择，横向研究并下决策——放弃还是点击？这是完全有可能的。

在电子商务网站上，因为图片大多数是第一选择要素，它有天然的优势能够帮助做选择，因此我们的浏览视线从左上方开始，先纵向再横向，纵向和横向的意图是有着微妙的差异的。这个稍后再说。

我们再看看口碑网，同样设计的搜索结果页的浏览视线：

我，代表着一个普通的来找租房的用户。普通的找租房的用户关心什么？

他第一关心的是户型和地段。其次是价格。

因此，他的浏览视线即有可能是这样的——

• 1. 越过了图片先看标题，因为标题一般会包含小区名称，户型等重要因素。
• 2. 当标题里有让他say no的字眼时，其他的信息（图片、价格、更多介绍等）统统都会视而不见。快速纵向浏览到下面的列表。
• 3. 当标题里有字眼满足需求后，用户会横向扫到价格字眼，做第二次判断。
• 4. 当价格超出心理预期时（或过低时），用户放弃此列表，视线出现Z型的下移，下移到下一条列表的标题。
• 5. 当价格同时满足期望时，一般会产生一个到详情页面的点击（两个黄色区域）。

在下面的例子中，同样是图片，却仅仅起到一个辅助的作用，当用户通过标题或者价格掌握的信息不足以判断时，才会做为参考因素。

再看看网站设计，是如何影响用户浏览行为的。

而，在以相册方式展示的SERP页面，用户的行为又是怎么样的呢？

比如，在淘宝商城，切换成gallery形式。我的需求是寻找一个双肩的电脑包，图片仍然是第一维度要关注的，因此我的视线很有可能呈现Z状，当我发现了有合适的款式和颜色的包包后，我才会扫描第二维度的信息：价格或者标题等。

但是，我又发现，除非我有意识，才能够保证是一个Z型浏览，大多数情况，我在Gallery形式展示的list上，视线呈现放射状的，散乱的，没有规律的，我也许会被其中的某张图片先吸引到——这张图片也许是居中的而不是左上角的图片，然后再由这张图片开始，向上或者向下浏览。

这种galley的设计，虽然能够突出图片的影响，但是实际上倒并不方便用户做“对比和筛选”，会漏掉一些信息，因此可能会出现上上下下的重复浏览——这也许也是国外主流的电子商务网站没有把这种形式作为主要的list设计的原因，当然，这是我个人的猜测。——如果有机会，我们会利用gallery做一下眼动仪的测试，来验证这个结论。

一个tips是，当以gallery方式呈现产品时，同一行的产品不宜过多。

F型浏览给我的启示

我认为，F型浏览不是绝对的，也不是无意识的，而是受到网站设计、用户需求、用户习惯多重因素影响。那么，我们的SERP设计，尤其是List items设计，要遵循什么原则呢？

只所以写这篇文章，我也由于近期在项目里遇到了一个问题：

list页面如何承载多种曝光需求？

鉴于这个页面的重要性，很多业务部门都希望能够在list页面做一些曝光，仅一个产品列表而言，有部门希望能够放出公司或者产品的认证信息，有的部门或许觉得没必要让用户点击到详情页，可以放出更多信息，比如公司的联系方式，产品运营方，或许希望list能够包含供应商的更多信息，比如规模，主营产品，设备和加工能力，工艺等。

但是，list一个豆腐块状的大小，怎么能够包含那么多信息呢？

所以，我们需要说服各个业务方：list页面设计的目的不是让用户阅读，做决策，而是快速寻找，定位，判断，而真正的决策是需要用户到了详情页甚至是与供应商联系过才能做出的。list页面的设计目的需要单纯，才不至于顾此失彼，忽略了最主要的目的，堆积了大量的信息，反而降低了用户的浏览、对比、定位的效率。

我们能做什么？

1. 信息优先级的划分

就电子商务网站而言，我认为可以划分三个优先级。

第一步：快速浏览以对比：定位和排除。

第二步：获取更多信息以判断。

第三步：研究并决策——下一步动作或者放弃。

严重声明一点：以上的信息优先级要视网站性质、受众需求而有不同，不能适应任何类型的SERP。比如，同样是电子商务网站，淘宝和alibaba就有很大的不一样。淘宝面向的个人买家，而alibaba.com面向的是全球的批发商、中小型的企业采购。用户类型差异比较大，采购类型差异比较大，因此需求就不一样，关注的信息维度就不一样。

对于批发商来讲，因为一个产品要采购大量，一般也都是来样加工订制，不像是淘宝的现货采购，也比较注重长期的供货关系，因此对单品细节的关注就稍微要偏弱一些，更关心供应商本身的信用、供货能力、主营产品等。

而且，行业不同，采购类型也不一样，关注的信息维度也不一样。上周去上海建材展访谈的客户，都能够明确帮我们确认一个事实：行业特征对于SERP设计的差异化需求凸显。——这个话题以后再说。

Heidi想要表达的意思就是：根据你的网站的用户需求和产品特征，你脑子里需要出现这样一个表格——里面的内容需要调整为最适合的优先级。

如果设计师或者产品经理没有传达出信息优先级的概念，那么市场研究人员很可能提供出一个大杂烩，用户关心什么信息，产品图片，描述，认证，信用，价格，物流，供应商资质…………我知道他们当然什么都关心，但是——在什么阶段关心什么是要区分的。

2. 帮助用户更快完成任务

当我们脑子里已经有了这张表，并且和项目组达成共识后——达成共识比较不容易，但是我们可以靠用户调研、访谈、行业研究提供足够的proof来得出一个比较合理的信息优先级，那么剩下的任务就是如何更好表现这些内容。

同样的饺子馅，不同的包法显然能够给用户不同的感官感受，包得不好，不但有碍于观瞻，也极有可能破掉，破坏了一锅汤不说，还进了水，导致饺子没有味道。

既然用户在SERP页面的目标很清晰——找到它！

用户在SERP的任务又是可以被我们预测的——他有三个步骤需要完成（参见表格）

每个任务的目标同样也是相对比较清晰的，那么我们设计的任务就是在每个阶段让他能够更加有效率完成子任务目标。

当然你可以说：那我们干嘛要分成三步呢？既然要简化工作量，干脆让他一步完成不更好吗?

但是事实上，用户的这三步也是一个时间轴，不是在同时存在的需求，而且当我们把所有的信息都同时呈现时，反而会极大降低他完成第一步的效率。

我认为，SERP能够满足前两个级别的需求就可以了，第三步可以放到详情页去完成。

如google的搜索list：

想一下：如果标题字数太多，或者没有和下面的描述区分开来，没有做关键词的加粗，是不是会导致用户第一步筛选效率降低？

再对比两个网站的list items：

去哪儿——酒店搜索列表页：

口碑网——餐馆搜索列表页：

两者相比，我个人认为去哪儿的表现要优于口碑网。

1. 去哪儿信息层级非常明确——地段以及酒店品牌第一维度。
2. 价格单独成列——非常易于二级筛选。
3. 图片相对不重要，因此只给出数量和链接。
4. 给出了非常有帮助做选择的促销信息。

而口碑网的表现：

1. 图片非常不重要，但是仍然占据了黄金位置。
2. 由于标题位于图片上部，用户在纵向浏览时，经常被图片因素干扰，不利于快速浏览。
3. 地图、周边等信息，我认为属于第三优先级，却出现在这里，导致每个item非常复杂。
4. 评论：口碑给出了单个用户的评论，有失客观和公正性，会误导客户。
5. ……

几个值得尝试的行动：

1. 信息区块划分——遵循用户习惯和F型浏览，F型浏览反应了用户的浏览习惯，从上至下，从左至右。

2. 加粗、显化能帮助用户提高效率的关键词或者信息

例如SERP搜索关键词的加粗，主要的目的就是让用户快速抓住字眼，然后判断：这是不是我要找的产品。

另外，降低噪音。上面这张图，个人认为将那个跳动的旺旺图标转移到右下角的位置能够帮助用户提升对图片和标题的浏览对比。

像价格这样的字段，一般来说比较重要（第二优先级），那么处理方式有两种：

单独成列——用户很容易纵向对比，这也是很多网站的做法。

单独成列的时候，我们可以不对价格进行太多视觉上的强化。

但是若做成不单独的列，就需要着重加粗，以帮助用户纵向快速跳跃式的对比。

——不然，就会是这样的：

3. 条目设计的拓展性

很有可能你的三段论会受到产品团队的赞赏，但是他们需要更多的信息表现出来。因此他们并不认为只有前两个优先级的信息才能够被放到SERP页面上，其他的只能到详情页查看。

而且，他们的观点也很有sense：

为什么要用户一个一个点开去判断这到底是不是他要找的东西呢？那不是无效的点击吗？

那么，即使已经有了优先级划分，list items设计还要考虑一定的拓展性——可以不展示，在用户有需求的时候展开。

还有更多行动需要你参与：

1. 提出更多质疑，Heidi个人所得必然有一定的局限性。
2. 帮Heidi验证结论正确与否：提供范例或者反例。
3. 检查自己所在的网站或者看过的list设计：信息优先级是如何划分的? 用户在使用中任务是如何完成的？是否有障碍？如何去优化？

最后致歉：这篇文章历经了一个星期才断断续续写完，由于时间点非常多，不可避免有一些内容的重复性，写得又臭又长，如果读完发现没有收获，我说一声抱歉，哈哈。

Blog原文地址：http://heidixie.blog.sohu.com/130458835.html 这里的格式有点乱，可以点击到我的搜狐博客里阅读。

【SERP系列】：

前言——什么是SERP，以及SERP设计的难点和问题

个性化如何影响SERP页面用户的行为

User Experience Design Team with 40’s staff go in for excellent experience in e-Commerce.  User Researcher is the priority position in the whole process. We located Hangzhou China, a beautiful city.

We need a person who is :
Passionate about understanding users;
Passionate about envisioning great user experiences;
Energized at identifying and solving user experience problems.

Job responsibilities:
Lead usability planning and execution efforts for the global trading platform. You will be expected to evaluate each new project results with user data.
Research international buyer, and they purchase target and behavior, build a framework to enrich users’ details such as Persona with motion.

Very desirable skills:
Creative method in remote user research with Internet.
Experience in import-export area, or in e-commerce area.
Good communication in Mandarin

Basic Qualifications:
Advanced degrees in Psychology, Human Factors, Industrial Engineering, or Computer Science.

Candidates should have a thorough knowledge of methods for gathering usability data. The candidate must be self-sufficient and capable of leading the usability effort for a product with a technical user base. Also, the candidate must have excellent oral communication skills.
Candidates should be experienced in setting measurable usability goals and using those to drive data gathering and design.

]]> http://www.aliued.com/2009/07/26/257/feed/ 4 http://www.aliued.com/2009/07/09/239/ http://www.aliued.com/2009/07/09/239/#comments Thu, 09 Jul 2009 05:21:42 +0000 呆聋瞎 http://www.aliued.com/?p=239 文章转自 呆聋瞎的博客

老help首页：

新用户看到的：

具体为什么这么改，我这里没有讨论，在这里跟大家分享的更多的是做这个项目的过程中所体会到的，所学到的有关如何做项目的一些体会，希望对大家有帮助。下面把我的一些个人感受写下来，其目的一是为了对自己工作的一个总结，项目的心得体会只有总结提炼出来才是自己的宝贵财富，才是自己的积累；其二是想把工作中自己遇到的一些问题写出来，可能这些问题不光我会遇到，其他的同学也会遇到相似的问题，写出来跟大家交流分享。

一、接需求

现在我们在接到一个需求后，先不要急于了解需求具体要做什么要改什么，要先了解了解需求前提，这个需求提出的原因，为什么会有这个需求，为了解决什么样的问题，不解决会有什么后果，解决了会带来什么好处，需要多少代价解决，把需求要解决的问题拿来作为以后项目实施的检验物，在具体做的时候多想一想这样做是否真的能解决问题，项目发布后也可以拿来做结果的验证，通过项目是否真的解决了这个问题。

然后去仔细了解项目/需求具体要做些啥，需求所涉及到的改动范围，涉及到的功能点，针对每一个改动点做细化，深入了解其骨髓。例如：在help改版需求里有一个要增加help搜索功能的改动点，表面上看起来很简单，只要在search框上添加一个help下拉菜单就可以了，实际实现这个改动并不简单，首先我们的help detail数据跟news数据一样，都是通过news后台输入的，如果用户在help里用search,通过什么样的方式过滤掉news 而只调help的数据，如果用户在community里用search来搜news,如果他用的词是news和help交叉的词汇搜索，会把news和help一并搜出来，这时候是否要过滤掉help，如果过滤是否技术可行，投入成本如何，如果不过滤那是否要在前台展示层面做区分。这些问题只有做了深入了解并加以解决，需求才能实施顺利。

二、出方案

在仔细了解过需求后，下面就是出方案了，在具体做方案前，先做一个前期的research,这个可长可短，根据项目实际情况而定。但还是要有的，有必要花一些时间去看一些同类网站同类产品做为参考，可以扩展自己的思路。也能为自己穷举方案提供借鉴。

具体出方案要做到全面，之前做需求出方案往往只出个首页，里面页面认为简单就基本省略了，其实线框方案出全面，有两个好处。一，对自己来讲，有利于将自己脑子里想的东西输理一遍形成于纸上，从而让自己的观察角度放在一个频道整体去看，而不是仅仅在做一个首页的改版；其二，对于线框图方案确认后做精确化时间预估时，为前端估资源提供一个明确的依据，在help项目里这点上其实是做的不好的，help基本上是只出了2种状态的 help首页，里面的页面并没有出最终版的线框图，导致后来新前端进来，对要做的工作是不清楚的，也就没有办法做出资源评估。当然最后的解决办法是只让新前端评估和制作首页的部分，其他的页面是只存在在自己脑子里的东西，就只有自己清楚了，这部分工作是只有自己去搞定了。

三、制定可执行时间计划表

方案确认后，根据方案将需求进行拆分，分解出项目/需求各节点/里程碑，拆分的越精细项目就越可控。需要考虑的是每个节点所需的参与方及具体参与时间，在这个节点上需要协调的因素，然后就到项目中的执行了。

四、项目中的执行

在这一阶段就是去执行你的时间计划表了。逐一对项目各节点进行把控。就像安装windows的进度表，整体进度拆分成若干段逐段完成，控制住了这些节点/里程碑，也就控制了整个项目。要是真的在这中间有什么问题发生，也能清晰的看见是发生在项目的哪个环节，从而方便我们后续分析跟进，找出问题原因并解决。

五、发布后的总结，后期数据检验

项目发布后，看看项目进度表，针对项目各环节里出现的问题，想一想下次如何改进，写项目心得，将体会和感受提炼出来，这样才是自己的。

后期通过数据采集，去检验项目之前制定的目标是否达到了，要解决的问题是否真的解决了，如果没有，需要进一步去分析原因，总结经验。

附注团队里其他同学给的建议的一些节选：

From Panda:

对于所有设计师而言，在“接需求”这个阶段，不但要搞清楚需求方为什么要做这个项目，更要搞清楚这个项目是给什么人看的，这些用户对于这个项目的期待是什么样的，也许是可以写下来，项目发布之后来验证的。

From Heidi:

这些心得，若是我们在书上见到或者听别人说，也许都会觉得稀松平常，经常念叨着，而只有自己亲身经历得到的，才能够引发共鸣，记忆深刻。

Jacky这篇心得，看似也是很简单，但是在日常项目里，也许我们还会不自觉走向反面：

1. 一接到需求不多问几个为什么就迫不及待去做方案

2. 想得不够详细，方案只出了一层皮，日后修修补补

3. 方案缺乏说服力——因为调研不够，在评审的时候，别人问你有没有看过竞争对手的网站，才慌不迭去“研究”

4. ……

最简单的往往是最容易被忽视的，也往往是最重要的，就像所有知识和技能的“基础”一样。

From rita:

喜欢新版本help，附上的心得体会也很方法论，讲求方法可以帮助我们少走很多弯路，顶“先了解需求前提”，往往很多时候被忽略，一开始就钻进细节里，先把握大局可以让方向更准确。

From yama:

“人类总得不断地总结经验，有所发现，有所发明，有所创造，有所前进。 ”

通过总结可以把零散的、肤浅的感性认识上 升为系统、深刻的理性认识，从而得出科学的结论，

以便发扬成绩，克服缺点，吸取经验教训，使今后的工作少走弯路，多出成果。

This post continues to showcase how faceted search is deployed with a view of improving user experience. The last post presents a set of websites using left column to narrow down search results. TG would like to show some exemplary sites which take a different approach - faceted search at the top.

First and foremost, TG is particularly thankful to Hbeidi Xie, who contributed and shared her experiences in coming up with a faceted search design solution. Heidi noted that the design should be based on use case; a comprehensive users’ task analysis and user behavior pattern are crucial to the success of creating an effective search tool.

Oftentimes, website functions and features are launched without conducting a prior research. Many would argue that there’s a strong need of time-to-market, hence everything has to be done fast. Right!! only if the product is what users want and how they want it to be.  TG agreed with Heidi that there’s no perfect solution as it may become obsoleted as time passes by. A workable design solution to a particular product is what we care.

Should the faceted search be positioned at the top or on the left?  TG think it does not matter. So long as the tool is simple enough to help users perform their tasks and get what they are looking for, we shall accomplish our jobs.

Wikio.com :

An information portal with a news search engine that searches press sites and blogs. TG is fond of vertical display of faceted search in particular as it does not require any scrolling, all attributes are condensed at the top and accessible in many occasions.

like.com :