目录归档: 屏幕

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 声称自己研发出的专利技术可以保证体积较大的东亚字体获得理想的加载速度。在测试中,我们发现这一技术的确缓解了字体大小这个传统瓶颈对嵌入东亚字体所带来的影响。
继续阅读

发布 VerTick WordPress 直排主题

VerTick 实现效果

我们的网站技术人员 Metaphox 有一天在 Twitter 上看到了 Nehan 这一使用 JavaScript 来实现日文直排(竖排)的工具,就以其为基础做出了一款 WordPress 主题:VerTick。目前这款主题已经基本完工,Metaphox 决定将它发布,以供有兴趣的人使用。同时,关于这款主题的使用细节,我们也对 Metaphox 进行了简单的采访,内文如下。
继续阅读

BBC 新网络视觉系统预览

进行中的新设计。Image: Research Studios

BBC(英国广播公司)作为全球最重要的媒体机构之一,一直在新媒体和设计领域领先全球。从它成功的新闻网站到近年来 iPlayer 网络播放平台都成为各国媒体效仿的对象。本周 BBC 发布了新网络视觉系统的预览,阐述了宏大的新概念。两年前我们提到 BBC 的「Global Visual Language 2.0」,项目旨在为 BBC 网站提供新的统一的视觉语言。该项目使用了新的视觉系统,包括网格、字体、颜色和新的播放器等等。

两年后的今天,BBC 决定更上一层楼,决定更新这一网络视觉系统,以期成为再次媒体设计的全球标准。这次的设计试图「创造一种新的设计哲学」、「寻到 BBC 的灵魂」,以及「让 BBC 更加有区别性和识别性」。这次设计 BBC 也邀请了英国著名设计师和字体师 Neville Brody 作为顾问,由 BBC 创意总监 Ben Gammon 与 BBC 用户体验和设计部门共同完成。设计目标的关键词展现出这次设计的雄心:现代英国、时事、强势、独特、领先、综合、通用和最佳。
继续阅读

Computer Modern 的故事

TAOCP

以 Computer Modern 字体排印的《The Art of Computer Programming》第一卷。

现代个人计算机软件中可以进行排印或者出版准备工作的系统,以所见即所得型为主流,从早期的 Apple MacPublisher、Aldus PageMaker,到曾经非常兴盛的 QuarkXPress,以及现在的 InDesign 莫不如是,甚至连 Microsoft Word 都可以归入此类 1 。但是,在桌面计算机的图形化用户界面尚未普及时,字符终端上其实已经出现了优秀的排字工具。这一工具也许并不够直观,不过这或许也不失为其优点:写作者可以将精力集中于文档的内容、而非其展现形式之上;作为源文件的纯文本并不依赖于平台而存在,易于管理和版本控制;用于处理源文件的程序也可以极富扩展性。这实际上是典型的计算机程序设计理念,这样的系统也的确是出于一个计算机科学家之手——你也许已经猜我在说什么:TeX。

继续阅读

WOFF 使用指南

于一月21日发布的 Mozilla Firefox 3.6 版本提供了对于 WOFF (Web Open Font Format) 字体格式的支持。关于这一字体格式的意义,本站之前的《字体数字化简史与 WOFF》一文已有提及,而我们今天将简单地演示 WOFF 格式的具体使用及其效果。对于网页设计者来说,使用 WOFF 格式与使用此前已经被支持的 TrueType 或 OpenType 格式在方法上并无不同,都是通过 CSS 的 @font-face 等规则完成的。首先是通过指定 WOFF 格式的字体文件之 URL 来定义一个 font-family 名称:


@font-face {
  font-family: myfontname;
  src: url(link/to/the/woff-font/fontname.woff) format("woff"),
       url(link/to/the/ttf-font/fontname.ttf) format("truetype");
}

通过以上代码,支持 WOFF 的浏览器如 Firefox 3.6 将自动下载 link/to/the/woff-font/fontname.woff 这一字体,不支持 WOFF 但是支持内联 TTF 的浏览器则会自动下载 link/to/the/ttf-font/fontname.ttf。(Internet Explorer 两者都不支持,对应解决方案请参见这里。)由网页设计者自行决定的 myfontname 则是这些字体的代称,设计者可以在接下来的 CSS 中使用它来定义页面元素所使用的字体,例如:


#content{
	font-family: myfontname, Georgia, serif;
}

此外,仅限于 Windows、Linux 平台的 Firefox 非标准 CSS 属性 text-rendering 同样可以用来控制 WOFF 的渲染方式。其可取值及对应效果是:

auto
默认值。浏览器会自行猜测应该优化字体的渲染速度、可读性还是精准度。对于基于 Gecko 引擎的浏览器如 Firefox 而言,取此值也就意味着对尺寸大于20像素的文本会使用 optimizeLegibility,否则使用 optimizeSpeed
optimizeSpeed
优化速度。Gecko 将尽可能快速地渲染字体,而不保证字体的可读性和精准度。Kerning (字母间距微调)和 ligatures (连字)将被禁用。
optimizeLegibility
优化可读性。Gecko 将强调文本的可读性而不是字体渲染的速度和精准度,Kerning (字母间距微调)和 ligatures (连字)也会被启用。
geometricPrecision
优化精准度。Gecko 将强调字体渲染的精准度而非速度和可读性,目前其效果与 optimizeLegibility 相同。

请注意这一属性会被 Mac 平台上的 Gecko 引擎忽略,渲染效果将总是 optimizeLegibility

具体用例如下:


/* make sure all fonts in the HTML document display in all its
   glory, but avoid inadequate ligatures in class foo elements */

body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }

根据 Mozilla 的这篇文章,字体业界对 WOFF 的支持也已经开始。FontFont 甚至提供了一个免费的 WOFF 字体展示,其中除了包含本文所介绍的内容,还有 WOFF 的 MIME Type、防止字体外链的方法等。我们在这里给出一个略经修改的在线版本,当然需要使用 Firefox 3.6 来访问。Windows 用户请注意浏览时不应禁用 ClearType。