PageTalks » User Experience

New Toys For Web Designers

Robin — Sat, 30 Oct 2010 11:52:12 +0000

有时候在想，前端的核心技术完全由浏览器厂商做主，开发人员做事情总是收到各种限制真是不爽。就算到了HTMLx(x>5)，也被局限于浏览器的框框。虽然现在WebOS的概念很棒，可惜PalmPre出师未捷身先死。老态龙钟的HP也干不出什么能和Google、Apple叫板的事情。总之，前端工程师们最多到手机上做做WebApp或者Air应用找找乐子。

好吧，抱怨完了之后，我们说说现在还有“玩头”的canvas。想必大家都已经看过N多canvas的例子，不管是canvas做的动画还是游戏，都显得十分理想。按下F12，你却发现这些例子的代码是十分的庞大的，证明要操控canvas做一些“有实用性”的事情，是很有难度的。

毕竟，Canvas的API只提供了画点、画线、画圆、画正方形之类的基本接口，简陋的让人难以接受。这个时候的Canvas跟Flash是完全没有可比性的，Flash的Tween、Sprite之类的类已经封装的非常完美，其暴露给开发者的API已经高于Canvas的那些API太多太多。

但另一方面，Canvas也给我们了“制作”Flash的机会。毕竟Flash的底层无非也就是画点、画线的方法。

在这里，我想介绍一下几个比较好的针对Canvas的脚本库。在实际工程中，是绝对救星。

Cake.js

Cake.js是一个非常有魅力的库。首先，它解决了几个让你十分头疼的问题：

Canvas内部没有对象的概念，没法针对某个图形或形状进行监听等操作
浏览器之间的复杂兼容性
Canvas缺乏动画操作API
Canvas和SVG不能互转

Cake.js很好了解决了以上所有问题。它不仅提供了Circle、Rectangle之类的基础对象，而且这些对象能够如同DOM对象一样进行监听等操作。其提供了较为高效的动画函数，如同Flash里的TweenLite。
更有趣的是，Cake.js提供了一个SVGParser，支持从SVG绘制Canvas！

如果你要用canvas制作例如游戏之类的高度交互的应用，那么你要么用cake.js，要么自己实现一份cake.js。

大家可以到这里去看看cake.js的一些演示：http://glimr.rubyforge.org/cake/canvas.html

Processing.js

Processing是一个很有名的数据可视化语言，之前的浏览器解决方案一直是利用java applet技术，可惜applet尴尬的局面至今没有能够缓解，所以java applet并不是一个很好像大众分发的技术方案。

但是某人（jQuery的作者之一）实现一个JS版的Processing.js。准确的说应该是一个Processing语言的JS解析器，然后利用canvas展示。

传承了Processing的所有优点。如果你已有Processing的脚本，你是可以直接无痛迁移到Canvas上的。

对于比较了解Processing的朋友，这个库你是绝对需要的。

Pre3D

有的同学可能已经迫不及待用Canvas做3D了。可是Canvas的3D Context的标准都没有，WebGL也还是少数浏览器的特权。退而求其次，就是用2D来模拟3D了。这里面的大部分原理就是坐标的矩阵变幻了，对于Canvas来说，这些操作全部用JS来实现，效率肯定比WebGL之类的C所写的原生3D API低好几个数量级的。但是这是目前唯一可行的方案。

所以这个库的名字叫做“Pre3D”，意味Canvas的3D时代还为来临，是3D的前期。

若是准备做3D图形的展示，这个库可以让你事半功倍；倘若是要做游戏，这个库也是爱莫能助的。

限于技术限制，Pre3D没法追踪你创建的虚拟对象，你无法与它们进行交互。你能有的仅仅是对Camera对象进行rotate、translate之类的操作。

但是这些对于制作出类似CanvasMol应用是错错有余的。

依旧蛋疼

即使你克服了一切利用Canvas来做游戏，你却发现你的游戏在有些浏览器下跑的很慢，在有些浏览器下完全无法使用。

想退回利用DOM进行游戏对象的操作？现在已被正式，canvas对于多个游戏对象的操作也许好于直接操作DOM对象(via link)。

好吧，对于刚刚定稿的HTML5我们要耐心，耐心，再耐心。

Eye Tracking and Web Usability: A Good Fit?

Robin — Sun, 04 Apr 2010 13:43:44 +0000

Since its inception, eye tracking has been employed by cognitive scientists to study reading, learning, attention, and neurology; by marketers to examine the effectiveness of ad and package designs; and by human factors engineers to guide automotive and airplane cockpit design. These and other disciplines have had great success leveraging eye tracking as a behavioral research method and to inform the design of communications and interactions. Recently, as eye tracking technology has become more affordable and accessible, academics, research suppliers, and eye tracking equipment makers have been experimenting with applying eye tracking to behavioral research in new domains.

眼球跟踪技术在可用性研究方面是个万金油。在近几年，几乎运用到了大多数公司的UX研究里面。这个直观的实验方法能给实验者关于用户注意力分布的直接统计数据。但是其中更深层次的关联，也许并不是仅仅越吸引眼球，就越重要或者越“有趣”吧？

Browser Size Tester

Robin — Wed, 31 Mar 2010 08:59:30 +0000

Are you enjoying designing on your 24′ inch LCD Monitor? Well, most designers, I believe, do. More often than not, they forget to test on a monitor that their clients may use.
Grab a test tool for browser size. Meanwhile, by analyzing the browser size and focus distribution graph, you can better plan your layout.

用24寸的显示器来做设计应该很爽吧？相信大多数设计师都是这样。但往往，我们会忘记在客户最常使用的显示器尺寸下进行测试。同时，通过分析浏览器显示器尺寸以及用户的注意力分布图，我们可以更好的安排页面布局。以下提供了两个浏览器尺寸测试工具。

http://whereisthefold.com/
http://browsersize.googlelabs.com/

WAVE – Web Accessibility Evaluation Tool

Robin — Sun, 28 Mar 2010 13:45:22 +0000

WAVE is a free web accessibility evaluation tool. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

Just enter the URL of a webpage you want to test and that is all. So if you care about web accessibility, you have to check it out:
URL: http://wave.webaim.org/

WAVE是一个简单的网络应用，它的目的就是帮你检测网页上的可用性漏洞，当然都是一些基础的检测，但是这个测试仅仅需要你输入一下网址，多么方便啊。检测之后，会给出一份简单的报告，只不过没有指明具体是哪个出了问题。如果能给出一些改进方法那就更好了⋯⋯汗，我变的越来越懒了。
地址：http://wave.webaim.org

Quick Tips For Creating a Mobile Optimized Site

Robin — Fri, 26 Mar 2010 12:43:46 +0000

Last year mobile web usage increased 148% worldwide. In the near future as smarthpones become more and more ubiquitous this number will continue to shoot up. As a developer, the time has arrived for you to seriously consider whether you should begin accommodating your mobile audience.

构建面向移动终端友好的站点。国内这项业务已经成了新的站点开发服务。我们面对的仍然是一些老问题：浏览器兼容性、浏览器兼容性以及浏览器兼容性⋯⋯
玩笑⋯⋯其实除了浏览器兼容性，还有设备兼容性（！？），例如显示屏尺寸、色彩等等。这篇文章简单的给出了一些基础性的建议。先翻阅一下咯。

An Easy Job

Robin — Fri, 29 Aug 2008 08:58:46 +0000

这几天刚想写几篇关于色彩的文章以表我的拙见，不了这几天在Blueidea上面看到了一篇非常好的同类文章，打消了再写这个文章的念头：网页效果图设计之色彩索引作者froglt从色彩倾向和暗示出发，结合实例分析了不同色彩在设计作品中的不同意义。（当然那个色标我怀疑是盗用的别人的资料就是……）对于艺术专业出生的人来说，这些知识可能在高中就知道了；而对于像我这样的业余爱好者来说，一份这样的资料有着很强的参考和教育价值。汗颜一下，我的素描还是很恶心，什么时候才能开始学色彩啊……

另外一篇是关于一个老生常谈的问题了——可用性。真的没什么好说的，原文基本把所有主流的可用性理论都进行了分析，对于用户体验的设计可谓是一种“纲领”性文章：30 Usability Issues To Be Aware Of小声告诉大家，中文翻译可以在Blueidea上找到……