iA: iPad 版《Wired》是纸老虎

这是之前说的第二篇关于 iPad 版《Wired》的西人评论,出自著名的用户体验 / 信息架构研究站 iA (Information Architects)。虽然本文中的部分批评乃针对英文排版而言(例如对连字符的运用),但大部分仍然值得中文 iPad 内容软件开发者细读。—— 编者

首先,他们把纸版杂志硬塞进了狭小的 iPad 屏幕当中。这个漂亮但注定要失败的软件缺乏交互逻辑,为弥补这点,他们提供了一套怪诞的导航方式。最终,它变成了一个充满内部链接、外加几条录像和音频(「互动」)的东西,并被送上了市场。该死,1990 年代又复活了。

好的图片能够自圆其说。但文字就不一样了。要完成自己的使命——沟通,文字需要高超的修辞技巧和字体排印能力。在屏幕上,这一切则更加复杂。《Wired》的记者和平面设计师们仍属业内顶尖,但 iPad 版《Wired》的字体与交互设计就差得远了。以下就是 iA 对《Wired》软件的邪恶意见。

一栏?两栏?这与品味无关

iPad 的竖版状态本身就构成了合理的栏宽,而且左右还都能留下一点空白。横版留的白就更多了。为什么不用呢?这是一个拥有无限垂直空间的媒介,没必要设计成紧密的多栏版式。我知道,多栏看上去很有经典的质感,但沉甸甸的黑色转轮电话同样很经典。在实际使用时,多栏版式的易用度跟转轮电话是差不多的。iPad 的尺寸和分辨率只有杂志印刷纸张的一半,也就是说,它的颗粒度只有这张的四分之一。因此,你必须改变思路。

多栏版式行不通的原因如下:

一、会令正文变碎,让页面变乱,减少呼吸空间。

二、会令换行数目增加,让文字右侧像狗啃过一样。

三、会把长文章切成许多互不连接的文字块,这会增加分辨阅读方向的难度。

四、会增加连字符(-)的数量,形成更多文字空洞,这会让滚动区域变长。

五、会把你锁定在纸张思维,页面的高度会被固定。

六、这样设计出来的版式,读起来经常会想:下一步该怎么着?

七、会增加读者的导航知觉负载。例如,他们会想:到了第二页如果我往左滑动会发生什么?会跳到下一篇文章的第二页?还是第一页?

Wired for iPad's column design, by informationarchitects.jp 多栏与单栏版式比较。制图:iA。(点击可看大图。)

我再强调一次:以 iPad 目前的尺寸和分辨率,把长篇文章设计成多栏版式纯粹是扯淡的怀旧主义设计。栏数越多,越糟。

为屏幕优化的字体讲求的是易读性,而不是一味遵从铅字和纸张时代的旧标准。如果你无法了解这点,至少应该保持栏与栏之间留有足够的空间。(提示:栏距和行距一样,在屏幕上必须比在纸上大,因为屏幕上的字更模糊。)

screen-resolutionC.jpg 作者用 InDesign 模拟的效果。制图:iA。(点击可看大图。)

ipad-resolutionC.gif iPad 上的效果。制图:iA。(点击可看大图。)

《Wired》软件的分栏问题不只局限于文章页。在某些页上,栏宽窄得让你阅读时非常容易疲劳。下面的版式很漂亮,但要读那些文字简直就是折磨。

Column width problem of Wired for iPad, by iA 作者用 InDesign 模拟的效果。制图:iA。(点击可看大图。)

Column width problem of Wired for iPad, by iA iPad 上的效果。制图:iA。(点击可看大图。)

(《纽约时报》软件有同样的问题。如果使用易读的字号,横版的五栏模式以及竖版的三栏模式都会造成一行只有三到五个单词。这看上去感觉很经典怀旧,但读起来仿佛像在听 1920 年代滑稽电影那傻傻的急促配乐。《纽约时报》的软件用的是卡片模式,导航方式是往右滑动,这也带来了其他的问题。[会有很多死角。])

亲爱的纸张设计师……

在纸上效果好的字体在屏幕上不一定效果好,因为反锯齿技术会令它们显得不稳定。Hoefler+Frere-Jones 的这条推讯很有点讽刺意味:

《Wired》的 iPad 版很棒,祝贺 @sdadich 和《Wired》团队!这不仅仅因为他们用了很多 @H_FJ 的字体哦。

没错,真的是「用了很多字体」啊。不过字体公司开心,读者可未必。

一、(到目前为止),在 iPad 上用非屏幕字体仍然不是好主意,除非把字号放到很大(这又会带来其他问题)。iPad 屏幕的字体显示技术很难搞。但如果你希望别人来读你的内容,难搞也得搞。

二、大体上说,混用多种字体就好比把句子写得很长。除非你的控制能力达到了天才级别,否则别干这种事。坏消息是:你没法完全控制字体在 iPad 上的显示效果,目前的这种分辨率把细微的差别都抹平了。

screen-resolutionX.gif 作者用 InDesign 模拟的效果。制图:iA。(点击可看大图。)

ipad-resolutionx2.gif iPad 上的效果。制图:iA。(点击可看大图。)

装饰元素

漂亮的印刷设计是没法直接转为漂亮的屏幕设计的。在印刷品上,页面装饰元素能够体现品味和品牌价值。在屏幕上,它们就会变成令人迷惑的东西。

screen-resolutionG.jpg 作者用 InDesign 模拟的效果。制图:iA。(点击可看大图。)

ipad-resolutionG.jpg iPad 上的效果。制图:iA。(点击可看大图。)

一、在旧的 640 x 480 的小屏幕上,视觉装饰元素会占据宝贵的屏幕空间。这些元素密度一高,iPad 那 1024 x 768 的屏幕显得更小了。

二、iPad 屏幕本身的尺寸跟半页杂志差不多,而它的粗黑边框会令人产生幽闭感。如果此时再用内容和留白以外的元素占据空间的话,会让整个空间显得越来越小。

三、电子设备的导航操作不像翻书页那么简单。屏幕上的每一个元素——只要没有明确的语义或结构特征——都有可能被误会为导航控件。一旦用户意识到它其实只是装饰元素,就会有意识地忽略它。然后,重要的导航元素也会开始被忽略,最后整个软件就变成了一张地毯。(谁能想到那些标成黄色的字是内部链接啊?)

广告整合

iPad 版《Wired》里都是全屏广告,内容部分没有讨厌的广告条,这是值得赞赏的。但它目前的广告整合方式还是有很多大问题。

一、内容部分的设计不错,但很难和广告区分。约翰·格鲁伯因为某种原因还是给了它正面评价,但也提到:「……很多时候,尤其是遇到连续几页的广告时,页面上缺少视觉提示,告诉你当前页的底下还有几页。」基本上,每个页面都需要看上第二或第三眼才知道究竟是广告还是内容。你经常需要去滚动一下,才能区分两者。这不仅仅是易用性问题了,还是个新闻伦理问题。快翻到最后几页时,我没有兴趣再去区分了,只顾着迅速把剩下的页面翻完,内容根本没读。

二、一叠这样的平面图片卖五美元(约人民币三十五元——编者)真不便宜。(别告诉我插几段录像进去就算互动了。)而这些 JPEG 图片中 75% 都是广告,我觉得自己简直太二了,花五美元买了一堆广告,一批无法阅读的内容,导航还乱七八糟的,没事吧我?

我知道《Wired》的成本不只五美元,他们整个系统的效率还需要提高。《Cooks Illustrated》没有广告,卖 7.95 美元。(而且很棒。)—— @nevenmrgan

上面指出的大部分问题(栏宽、字体选择、装饰元素、纸张思维)以及很多其他问题(无法拷贝粘贴,无法放大)似乎都是由于使用 InDesign 所致,这个软件是为纸张设计优化的。

乔布斯(又)说对了

我们应该用原生工具来写 iPad 软件。这不是因为乔布斯这么说了,而是因为这些工具能让你做出有血有肉的产品。换句话说,它让你理解 iPad 技术的目的、潜力和局限。

《Wired》有必要担心吗?毕竟他们已经卖出了两万四千份,而 iA 的软件还没出呢。但尽管《Wired》一天赚的钱可能就比我们的软件一辈子赚得多,我还是对于他们的长期销量非常悲观。

《Wired》软件发布时的成功并不奇怪。这是读者被品牌光环蒙蔽(「是《Wired》哦,看上去很《Wired》哦,肯定很酷的,就跟《Wired》那么酷。」)、记者被惯性思维引导的结果。Adobe 自己那充斥着 1990 年代气味的扯淡宣传语很好地呈现了这种惯性思维:

杂志的未来,就是现在。

不,不是。未来不是现在,从来不是。新闻的未来也绝对不会=用一款印刷设计软件输出的一叠加插了视频的广告图片。大伙儿还得再使把劲才行。