WebDesign @ 01 November 2006, “3 Comments”

提到雅虎通Pingme服务的那篇里,我说到网页上的文案内容不该用图片来显示,但是没说为什么,只是加了个链接到W3C的相关规范。现在做个小结,说说把文案放在图片里显示的缺点和应该采用的办法,也算是补记一下笔记。对这方面很熟悉的读者可以不必看了。

  • 图片比文字占用带宽大得多,因为用户在使用带宽质量不好的时候或者在流量计费的情况下会特意关掉图片,但是不应该因此在使用网页上受到影响;
  • 图片不能缩放,视力不好或者显示器分辨率高的用户看起来就很吃力,再说浏览器上对文字放大缩小的功能已经存在很久了;
  • 为了自己工作省力省心,如果文字需要修改或者调整,那么每次修改(包括标点符号),负责文案的都得找你协调,你要重新再做一次,这还不包括不同语言和繁体简体的处理;
  • 除非搜索引擎做了对图片进行OCR或者其他分辨识别功能,否则搜索引擎爬虫是看不到图片里的文字的;

我当时说在IMG的ALT里添加图片上的文案内容其实只是一个勉强和粗糙的办法,最好的办法是用一个HTML元素,比如DIV,将图片的URL放在CSS该元素里的background-image属性里,文字内容就放在HTML里,直接写或者从数据库或者CMS系统提取,这么做基本上弥补了上面讲到的把文案放在图片里显示的缺点,一个例子就是雅虎自己的雅虎收藏+的首页Banner。

当然这种办法也有一些难度,主要有两个:

  1. 需要一定的CSS技巧(比如如何保证放大缩小时外框不会“破”掉,以及保证在跨平台跨浏览器上显示的统一),在此推荐一本好书:Bulletproof Web Design,里面有很多精彩的灵活使用HTML/CSS的方法和技巧。
  2. 不像用图片,使用CSS需要在不同的操作系统下和不同的浏览器里进行测试,这是比较麻烦,但也不是没有办法解决,这里提供一个在线测试页面在不同平台和浏览器下显示的服务:browsershots.org,另一个办法就是使用虚拟机,比如Virtual PC等。

再推荐个我刚刚发现的一个网页设计的专业Blog:淘宝UI团队的Blog,专业、专注,并乐于分享。我自己还没开始用淘宝,不过已经从几个地方听说淘宝的网页设计很专业,很高兴能看到他们也在使用blog这个工具。希望明年的网志年会能有一个专门的技术track,并且有个用户界面和网页标准方面的研讨会,让这样的团队blog跟大家见面和交流。

Reading, WebDesign @ 26 October 2006, “5 Comments”

 点石成金:访客至上的网页设计秘笈

认识Windy有段时间了,一开始是一起参与SocialBrain.org组织的《Free Culture》和《We The Media》中文翻译项目,后来才知道她是专门从事用户互动和界面设计,为不少网站提供咨询。最近Windy告诉我她翻译的Steve Krug的《Don’t Make Me Think》的中文版:《点石成金:访客至上的网页设计秘笈》,已经发行了。《Don’t Make Me Think》是一本非常非常好的书(原书的第一和第二版我都买了,据说第三版快要出来),现在出了中文版,当然要买一本收藏,再给公司买了一本,推荐给同事们,并要求程序员都看至少一遍。

在书店里翻这本书时,第一个发现就是它非常忠实原著(中文版是基于英文第二版),包括从的Look -and-Feel。原书使用了大量的网站截图和示意图,都在中文版基本上得到忠实重现,甚至包括小标题的颜色也是跟原书一样。这对其他类型的书没有太大的必要,但作为一本关于设计和用户体验的书,这就很重要了。相信Windy和出版社为此做出了不小的努力,可能也是因此造成了成本比较高,使得很多人嫌它太贵(平均几乎4页1块钱)。

《Don’t Make Me Think》讲的是网站设计如何提高网站的可用性(Usability),其核心思想就是从用户的角度说的一句话:“Don’t make me think”(简称和标签:DMMT),在原书里作者对这句话做了个解释:

It means that as far as humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatory.

就是中文版中说的“不言而喻、一目了然、自我解释的”。这是地球人,至少是从事网页设计的都明白的道理,但是真的明白为什么,和怎么在实践中做到,并不是件容易的事情。这本书可以起到很大的帮助,因为它

  1. 传递了它要说的东西(什么是DMMT, 为什么要DMMT, 和怎么做到网页设计能够DMMT);
  2. 简单,直接,清晰、有效地做到了1;
  3. 以一本很薄,读起来很轻松的书,做到了1和2;

比如在第2章“我们实际上是如何使用Web的”里,短短几页就说清楚他发现用户在使用页面上的三点“事实”:

  1. 我们不是阅读,而是扫描
  2. 我们不作最佳选择,而是满意即可
  3. 我们不是追根究底,而是勉强应付

也许这三条说出来之后,不少人都会说,切,废话嘛,就应该是这样的。但是在作者直接清楚地总结出来之前,我不知道有多少网站规划和设计者不仅真正意识到这些,并且在实践中有针对地进行网站和网页设计。在第一次读到这章的时候,这三点已经值回一半的价钱了。

还有,这本书在解释和分析的时候,用了生活中日常的体验和网站设计相互参照,比如页面标记和高速路牌,网站的导航和在大超市里购物的类比,让读者能产生共鸣,更容易理解和接受。

但这也导致了它不是一本很容易翻译好的书,因为字面上直接的翻译未必能让有不同生活文化背景的中文读者产生和美国读者能得到的同样有效的反应。那么是直接译好还是从中文里找个对应的通俗说法翻译好?我猜这也许曾经给了windy一些小麻烦。阅读的时候,大家不妨注意一下这方面,并把这当作体会从文化差异在用户使用设计上造成需要面对的一个难题,a bonus point,算是英文读者不能得到的额外收获 ;-)

在这也挑几个骨头:原书名是Don’t Make Me Think, 不知道为什么中文版的题目是“点石成金”,而这句话在书里被直接翻译成了“别让我思考”。“思考”这词在这显得似乎过于严肃了点,如果翻译回英文,恐怕contemplate, ponder, 和reflect似乎更合适。觉得翻译成“别让我动脑子”比较好些,也适合原书行文的口气和风格。另外,这本书的副标题是“访客至上的网页设计秘笈”,“网站设计”更恰当些。

最后,如果要推荐一本网站设计(非具体技术实现类)的书,我就推荐这本。

Security, Tech, Web @ 12 October 2006, “3 Comments”

几天前,车东提到了雅虎中国发布的Y!pingme服务

什么是Pingme呢?原本想抄一下它们首页的文本,结果发现介绍文字居然是一大块GIF图片,*?^%$#@?!,disable掉图片,居然没有ALT的描述(建议网站开发人员参考W3C的Web Content Accessibility Guildinestext-equivalent一节)。那就抄车东写的解释吧(让我们赞美一下“代码重用”:p):

什么是PingMe呢? 就是一个web界面的雅虎通留言簿,没有注册过雅虎帐号的用户只要点击网站上的PingMe图标call me via Yahoo! Messenger就可以直接与你聊天了。过几天,你的雅虎通上忽然跳出一个:webchat####用户,那就是来自网站的用户留言了。

恩,就酱紫,简单明了。

让我感到好奇的是那个Pingme的图标和链接在网页上的代码,于是view source了一下车东的页面,最主要的代码是这样的:

< a xhref="http://cn.pingme.messenger.yahoo.com/webchat/ajax_webchat.php ?yid=[雅虎通ID]&sig=[40位ASCII字符]"

就是说pingme的URL带两个参数,一个是yid,就是用户的yahoo ID,一个是sig,长度为40的ascii字符串,估计是sha1哈希值。

咳,不知道是因为做过两年电信的SP呢,还是因为这方面比较paranoid一点,看到这段HTML,我立刻就想到:假设有个网页爬虫,爬一遍陶宝和雅虎中国的社区站点页面,就能收集到一大堆yahoo ID和pingme的URL,而且能够知道这些用户是

  1. 是雅虎通的活跃用户;
  2. 有自己的网站/网页 ;
  3. 使用pingme服务;
  4. 多半是淘宝店主(这可以根据页面URL和页面内相关链接或者关键字发现吧);
  5. 如果是淘宝店主,稍微分析一下页面,应该能发现她/他卖的是什么产品吧(谁实证一下是否可以?;));

就可以对他们进行非常有针对性的SPAM营销了。

稍等一下,做到这点的前提条件之一是相对于yid的那个sig必需是固定不变的,恩,也许这个URL是动态生成的?看输出到浏览器的页面代码是不行的,那就自己申请一个Pingme服务看看 …… 哈,还真是固定的,申请页面的第二步就直接给出了HTML代码,跟上面的一样(除了是我自己的yid和一个不同的sig值)。那么,上述的SPAM计划应该是可行的了。

给Pingme团队一个建议:提供用户javascript代码,Javascript在页面装载后到服务器获取一个有时效的sig值,再返回这段HTML代码,这样,就算网页爬虫拿到了今天的yid和sig组合,但是过一天或者过半小时就失效了。

当然,这么做可能会引起比较大的改动和其他问题,比如对服务器压力会增加,怎么处理这些链接在web cache上的更新,怎么处理Pingme主人正在进行的聊天,保证合理合法的聊天不会被中断等等。

当然的当然,我这是站着说话不腰疼……

说到最后,这是我的Y!Pingme :-)

发送雅虎通信息给我吧