文字设计和视觉文化

目录归档: 屏幕

信黑体与《失控》单行本:设计师柯炽坚访谈

对于 Type is Beautiful 来说,新近出版的唐茶单行本诸多特点中最为耀眼的一个,莫过于它所采用的特制字体:信黑体(Xin Gothic)。这套出自香港设计师之手、有多个字重的全套黑体字于今年发布,是中文字体领域的一件盛事。我们特别为信黑体用于唐茶丛书一事采访到信黑体设计团队 Visionmark 领衔的设计师柯炽坚(Sammy Or)。柯炽坚作为蒙纳黑体和俪黑的设计者,是中文屏幕字体设计的最重要的设计师之一。

继续阅读

《失控》iOS App 电子中文版本面市

在手持电子设备上进行或长或短的阅读,已经成为许多人日常生活的一部分。身处渐渐脱离纸张的时代,虽然有诸多不舍和不适,也很少有人能只以印刷品度日,完全放弃愈发常见的电子读物。这样一来,鉴于阅读品质对于生活品质的影响,找到适合自己习惯的阅读器具,就成了相当重要的事情。以 iOS 平台上的软件来说,这方面的选择并不缺乏:有 iBooks、GoodReader、Stanza 等泛用阅读软件,也有《纽约时报》、《经济学人》乃至《南都周刊》所发布的专门阅读应用,乃至 Flipboard、Reeder 这样的聚合阅读器。不过,一件事情如果有许多选择,往往也容易令人困惑。面对 Home Screen 上若干阅读器图标时,应该按哪一个呢?

继续阅读

讨论:长文的数字排版与阅读

文章冗长,设计尴尬,怎么办?

长文的排版与设计是我们一直以来的困惑。我们在设计这个网站新版本的时候也遇到这样的问题。我们把讨论时的问题提出来,论点由三位作者提出,也希望大家能够参考和讨论。以下的讨论是我们最近一些想法的汇总,可能漏掉了一些重点或有失偏颇,还请大家指正。

我们说的是长文

具有相当篇幅、以纯文字为主的内容之宏观排版和交互设计是我们讨论的重心,短文和多媒体交互则不在讨论范围。凡字体、字距、行距等排印细节,我们也基本不去涉及。

长文阅读的问题

人缺乏耐性,冗长的文章如果没有经过任何排版处理,会让读者瞬间失去阅读的兴趣,若非读不可则不啻苦行。所以通过改进长文的结构和排版来提高阅读性乃至「诱读性」,是一件十分必要的事情。要吸引读者阅读完长文,必须符合读者的阅读心理:

  1. 应避免内容的长度令读者感觉到压力
  2. 要让读者对阅读的进展和目标有明确的了解
  3. 要给读者不断提供暂停的机会和阅读成就的满足感
  4. 要使多次阅读和检索变得容易

继续阅读

Writer for iPad 出炉

我们之前曾在《争论:为 iPad 设计》一文讨论了 Information Architects(iA)对于当今 iPad 软件设计的批评,也提到了需要我们「拭目以待」的几款来自 iA 自己的 iPad 作品。本周设计界期待已久的其中一款针对纯写作的应用 Writer 正式发布。我们不是专业软件讨论,就简单看看 Writer 在设计上怎样优胜于其他应用。

Writer 的特点简要介绍如下:

  • Writer 拒绝了一切非必要的功能,包括格式和设计的制定。
  • 专注模式(Focus Mode):此模式取消了所有写作之外的功能,包括自动修改、拼写、工具栏、滚动、复制/粘贴,等等。此模式将现在所编写的三行以外的内容全部淡化,进一步让作者专注于所写内容。
  • Writer 放弃了在数字书写中缺乏意义的「页数」模式,转而使用「阅读时间」这一概念,计算当前文章长度所需的阅读时间。
  • 加强键盘:直接加入了常用的标点符号,以及「词前」和「词后」两个键。去掉了智能引号的功能(作者无需考虑左右引号使用的对错,进一步减少了分心。此功能由字体设计大师 Erik Spiekermann 建议)。
  • 与 DropBox 自动同步:随时保存,同时减少了到 iTunes 上操作的麻烦。

字体设计上,iA 取消了作者对于字体定义的权利,而是直接设置好了一套适合书写的字体和格式设置。字体选择了来自 Bold Monday 的等宽字体 Nitti Light,并不如传统的罗马体美观,却能在写作时确保你能慢而准确地进行阅读。同时行距、字距、字体大小等都比传统文字编辑软件进行了更优化的设计。

Writer 的设计理念直接对应了 iA 对于很多 iPad 应用设计的相关性和功能性的批评。在设计中完全放弃了众多设计师职业所爱的「美观」和「正确」,针对「专注写作」这个概念做了最大化的功能和视觉削减。由于尚未拿到这款应用,还未能评价字体的选择和文字设计在 iPad 下的表现,尤其是针对 iA 前文大肆批评的不顾 iPad 硬件特点(对比度、分辨率等)的设计,Writer 的体验是否有大幅的改善。另外对于非西语的支持,也要等到下一个版本。

iPad 时代的报纸与杂志设计

本文刊载于《艺术与设计》2010年8月期。发表时有少量改动。文章实效性已失很多,内容与从前的文章《争论:为 iPad 设计》多有重叠,权作存档。

苹果平板电脑 iPad 一月份的推出无疑给传统媒体打了一大针鸡血。全球媒体兴冲冲地听着乔布斯的布道,发布会结束,各大传媒和出版机构旋即加入苹果的阵营,希望搭上这次他们看来是出版业革命的快车。

其实对于 iPad 的高期望值绝非空穴来风。与传统平板电脑一样,iPad 为手持设备提供了前所未有的大触摸屏,同时用作显示和交互界面。但是与其他平板电脑不同的是,iPad 仰赖苹果的设计和用户体验,以及苹果改变工业的能力,无法不让出版业界有特别的期待:在音乐产业和手机产业之后,终于轮到我们被改变命运了。当乔布斯坐在发布会演讲台的沙发上,以前所未有的姿势和动作悠闲地翻阅着数字版《纽约时报》时,各媒体数字部的兴奋度可以想像。

于是 iPad 一经上市,传统媒体最迟在数周内就纷纷推出了自己的 iPad 版。从在数字平台占据优势的《纽约时报》,到紧追不舍的《金融时报》、《华尔街日报》和《时代》等。中文世界的媒体包括《南方周末》等也迅速加入了这个行列。到了五月份,《连线》杂志 iPad 版的推出更是将这种乐观情绪推上了新的高潮。包括 Adobe 等多方评论称,传统出版业终于在 iPad 中找到了未来的出路。

然而到底各出版物 iPad 版到底表现如何,iPad 是否能挑起出版未来的重任,却充满问题与未知。
继续阅读

Retina Display 带来的字体问题

iPhone 4 带来的 Retina Display 推出之初为业界带来了好消息。由于精度更加接近印刷物,设计师们期盼 Retina Display 可以带来印刷物般的阅读体验。然而对于很多 iPhone 4 用户来讲,这却并非事实——加强的屏幕精度似乎影响了阅读,这一点对于中文用户尤甚。我们的朋友 Julius Hui 今天在 Twitter 上将这个问题展开为六点,描述的很清楚:

  1. 300ppi 螢幕解像並不加強閱讀享受
  2. 由於字體太 sharp 的關係,與發強光的螢幕造成強烈反差,很刺眼
  3. 由於分辨率比正常大了一倍,字體看上去都幼(细)了。在激光打印上很夠黑的 Georgia 在 iPhone 4 螢幕上都變得很幼(细),襯線體變得不好讀
  4. 由於字體太 sharp 的關係,閱讀時會被字體的細節部分干擾
  5. Heiti 的粗幼(粗细)不均和嚇人的喇叭頭很明顯
  6. 即使開英文介面,中文也會強制大家用 Heiti, 而不是3GS 以前的 Hiragino,頓時覺得介面很爛

与之前 iA 评论 iPad 的设计一样,在原本的设计和字体选择下,新的屏幕硬件并无法给予提升的阅读体验,反而造成了阅读障碍。精度过高的文字与大大超过印刷品的对比度一起,造成了视觉疲劳。英文方面,Helvetica 表现尚可,而 Georgia 根据传统电脑屏幕 hinting 而成的磅数和字体细节已经在新屏幕上变得不合时宜。中文方面,由于 Hiragino 中文系并没有跟随 iOS4,iOS4 所使用的 Heiti 不仅设计美感不足,过多的细节变化(粗细,笔划头尾)也在 Retina Display 上一览无余,加上屏幕的对比度提高,使得阅读变得困难重重。相反 Hiragino 系日文字体则由于其笔划设计更加匀称,在 Retina Display 上则表现较佳。

Retina Display 所带来的精度问题将为苹果和设计师们带来新的挑战。苹果应全面修订和更改其字体策略,对于衬线字体的选择和设计要尤其考虑,Georgia 等字体的设计不再可以胜任阅读。这一问题将在 Retina Display 可能在 iPad 等用于阅读的设备中使用时更加凸现。同时如果能将 Hiragino 系中文字体带入 iOS,则是中文用户的福音。设计师们也要改变对 Retina Display 的盲目乐观的态度。如果不认真对待,提高了的精度和对比度带来的新屏幕在现在来看,与其说是机遇,不如说是挑战。

视觉分辨力与 Retina Display

现有 iPhone 屏幕与 Regina Display 屏幕使用次像素抗锯齿渲染对比示意
更正:感谢 Apple4us 的 Rio 指正本文,实际上在 iPhone OS 之中,次像素渲染技术并未启用(甚至在 Mac OS X 上面,次像素渲染也并非会在所有 LCD 显示器上默认开启)。究其原因,也许是考量到屏幕旋转后次像素排列的方向变化会导致渲染结果不佳(但是在 iPad 上模拟的效果看来并无显著区别),或者苹果认为启用次像素渲染所带来的收益不能抵消其能耗。以下文字中关于次像素渲染的部分烦请忽略。

如果不考虑盲文和有声书,阅读的基础是「看」。视觉是阅读的最基本条件,优秀的字体与排印产品也主要是通过视觉来取悦读者。但是,就像人耳不能区分音高差异极小 1 的两个声音,视觉也有其分辨极限。十九世纪末人们就通过研究 2 发现,想要在一定条件下将两条明暗相间的细线区分开来,它们之间需要有 0.59 角分(arcminute)的差距。0.59 角分在 10 英寸的距离上大致相当于 0.0017 英寸,取其倒数 583,再考虑到两条细线各自需要至少一明一暗两个点,我们可以合理地推论,当印刷品的墨点密度达到每英寸 1200 点(1200 Drops Per Inch, DPI)以上,就可以满足相当挑剔的阅读要求。所以目前比较优秀的家用打印机,都标称能够达到 1200 乃至 2400 DPI 的分辨率,这样的印刷品质量已经与传统的、墨点密度可以视作无限的凸版印刷相媲美。当然,如同黑胶唱片,凸版印刷自有另一番独特的趣味,不过这已经超出了本文的范围。

继续阅读

争论:为 iPad 设计

《连线》app 的一页多栏设计

一、行宽与阅读

一切起因于《连线》(Wired)杂志的 iPad 版的推出。该 app 的推出马上得到了赞誉,被 Adobe 称为「杂志的未来」(当然也由于这次制作是和 InDesign CS5 紧密合作推出的)。然而 Information Architects(iA)发文《iPad 上的〈连线〉是纸老虎》(由 Apple4us 的 Lawrence Li 翻译成中文)抨击《连线》app 的设计缺陷。其中最引争论的一点是关于 iPad 多栏设计的缺陷。在 iA 看来,iPad 的屏幕尺寸和交互属性决定了它不应该使用传统报纸一样的多栏设计。理由如下:

  1. 多栏设计硬性分割了正文,凌乱地将文字塞满了本来就很小的 iPad 屏幕。
  2. 多栏设计迫使设计师使用小字号,和加多断行,使阅读路径变得曲折困难。
  3. 将长文断成一个个缺乏联系的文字块,这种设计增加了整个导航和交互的复杂性(究竟应上下滚动(scroll)还是左右滑动(swipe))
  4. 多栏设计需要更多的连字符(hyphen);如果左右对齐,每栏的文字内被迫出现众多空档,如果左对齐,右边会出现难看的文字不齐
  5. 多栏设计让设计师经常按印刷品的思考方式想问题,每一页的页高也变成是固定的

继续阅读

Google 提供在线字体服务

Google 于五月十九日开放在线字体服务(Webfonts),正式加入在线字体提供商的行列。与我们已经介绍过的 Monotype Web Fonts、FontShop 等字体商不同,Google 此次提供的字体与其诸多既有服务一样,不出所料地完全免费。

Google 目前提供的字体共有十八种,均为目前流传较为广泛的免费字体,包括为 Android 而开发的 Droid 系列,被称为「Fonts for Scholars」的 Cardo,为代码印刷而设计的 Inconsolata,业余之作而不胫走红的 Yanone Kaffeesatz 等等;更为引人注目的是本站曾介绍过其人其事的 IM Fell 字体,此次经由 Google 声势浩大地一口气发布了十个字体族,它的介绍页面也颇费篇幅地讲述了字体背后的历史。

与我们此前介绍的 Fonts.com 所提供的服务相比,使用这些字体无需付费,也不必注册,只消通过 Google Font API 在网页的 head 区域插入一行代码,即可获得对应某个字体的、以 @font-face 形式定义的 CSS font-family 定义,继而就可以在 CSS 中如同使用本地字体一样使用它们。对于浏览器的支持情况也不错,Google 声称 Chrome 4.249.4 以上、Firefox 3.5 以上、Safari 3.1 以上、IE 6 以上均可渲染。使用 iPhone OS 和 Android 的设备目前尚不支持此项服务,不过这一功能的实现应指日可待。对于我们来说,也许唯一的遗憾就是此次发布的字体仅限于拉丁字符集。

在 Google 公布在线字体服务之后,Typekit 紧接着宣布它们此前的几周内已经与 Google 密切合作,在 GitHub 上放出了 JavaScript 开源项目 WebFont Loader ,让用户可以更进一步地控制字体的加载和渲染,也使得其他人能够在自己的网站上提供网络字体服务。此次 Google 所公布的诸多免费字体亦都被增加到了 Typekit 的字库中,所有用户都可以使用。用户还可以选择使用 Google 的 AJAX API 来调用 Typekit 的字体,这样一来在 Google 的免费服务和 Typekit 的付费服务之间切换,只需要更动一行代码。

Google 这一字体服务的显示效果可以在我们的测试页面上看到。(更新:Google 提供了自己的效果预览器。)

Monotype Web Fonts 测试

Monotype Fonts.com Web Fonts 测试页面

Monotype 今天宣布,Fonts.com 开始提供网页字体(web fonts)嵌入服务,加入了 FontShopTypeKit 的队伍,表明网页字体将成为字体商新的利润点。

Monotype 的 web fonts 除了凭借 Linotype 拥有庞大优质的字库外,还支持超过四十种语言,包括日文和繁/简体中文,这也是我们最为关注的亮点。Monotype 声称自己研发出的专利技术可以保证体积较大的东亚字体获得理想的加载速度。在测试中,我们发现这一技术的确缓解了字体大小这个传统瓶颈对嵌入东亚字体所带来的影响。

继续阅读