UPDATE: I updated most of the examples to show the difference between InDesign and iPad. I did so since many said that while they agree that it’s not appropriate to just export designs from Indesign into an iPad app, they didn’t see the typographic issues (it’s actually one and the same argument). The iPad examples not fair as they’re scaled down contrast enhanced screen shots (losing granulatrity), but since I cannot mimic a higher resolution on the computer screen, this was to only way to show what happens when you increase contrast and scale down the fonts to the perceived size. If you want an appropriate comparison, you need to hold your iPad WIRED app next to the screen shots.
Good pictures speak for themselves. But text is a different story. It needs a lot of rhetoric skill and typographic care to do what it should: to communicate. On the screen things become even more complicated. While WIRED journalists and graphic designers are still at the top of their game, the typography and the interaction design of the iPad app doesn’t come even close. Here is a short, evil rundown of how iA sees the new WIRED app.
The iPad portrait mode allows for a nice column width with enough white space left and right. The landscape offers even more white space. Why not use it? In a medium with infinite vertical space there is no need to create dense multi column layouts.—Yes, multi-columns look classy-classic but so do heavy black rotary telephones. In practice, multi column article pages are as useful as heavy dial disc cellphones. At half of the size and half of the resolution of a printed page, that is, at one quarter of the granularity of a printed page you have to change your game. Columns for iPad article pages don’t work, because:
They fragment the text body, clutter and suffocate the notoriously small iPad screen estate
1.会把整段的文字搞得支离破碎,就为了把它们塞进小得让人喘不过气来的iPad屏幕里去
They force you to use small text sizes or disproportionally increase the number of line breaks, creating a nervous zig-zag reading path
2.强迫你使用小字体或增加不成比例的换行符号,结果是“之”字型的阅读路径让人心里堵得慌。
Breaking long text into disconnected page blocks, they complicate the overall orientation and interaction (scrolling in article vs swiping between articles)
3.把长文分割成各个小块,将软件的整个定位和交互功能搞复杂了(文章内用滚动对比文章间用滑动)。
They require more hyphenation; they generate big text holes or ugly ragging; on small canvas they don’t save space, they waste it
4.很多单词都被断开了,因此产生了很多空洞和段落没有对齐,屏幕不大却不好好利用,反而浪费空间。
They force you into a paper metaphor and a defined page height
5.强迫用户感觉还是在读纸质版,页面高度是设定好的。
They create numerous what-now?-moments
6.让读者感到无尽的困惑,“接下来我该怎么办?”
They complicate the mental navigation model: For example, what happens if I scroll left on the second page of an article? Do I go to the second or the first page of the neighboring article?
7.翻页时不自然:例如,如果用手指在一篇文章的第二页向左滑动,我是回到相邻文章的第一页还是第二页?
Let’s make this clear once and for all: at the current surface and resolution of the iPad, multi column layouts for long screen texts are sentimental nonsense. And the more columns you use, the worse it gets.
再最后说一次:就目前iPad的屏幕和分辨率,用多列来显示长文简直是无稽之谈。列数越多,情况越糟糕。
If you can’t see the beauty of screen-optimized typography that focuses on readability instead of old standards based on lead and paper limits—at least make sure that you have enough gutter between the columns.
This is how it looks in InDesign on an iMac 24 inch:
这是在InDesign在24寸Mac上的显示效果:
This is how it looks on iPad:
这是在iPad上的显示效果:
The column problem on the WIRED app is not limited to the article pages. On some pages, column widths are so narrow that the text turns into a nerve straining reading puzzle. The following layout looks pretty, but I can’t read it without hearing the Benny Hill theme song as a background music: