下划线也要画得完美:用户体验的craftsmanship - 张文婷 · Adobe Typekit 用户体验设计师

下划线也要画得完美:用户体验的craftsmanship - 张文婷 · Adobe Typekit 用户体验设计师

UX Coffee的第7期播客中,我们请到了 Adobe 用户体验设计师——张文婷。她是字体设计爱好者,创建了 typedetail.com,也是 underline.js 的作者。我们和她聊了聊

- 设计师在纽约

- 她在 Github 上的两个知名项目: Underline.jsResponsify.js

- 在纽约 Tech Meetup 上做演讲是怎样的体验

- 衍生艺术 vs. 设计

- 她的两个「100天项目」 TypeDetail.comDesignResearch.space

- 字体排印的资源推荐



大家可以通过以下方式订阅收听我们的节目:



---

Riceman: 欢迎来到 UX Coffee 第七期节目!这期节目我们请到了 Adobe Typekit 用户体验设计师张文婷同学~ 她是一位非常 hardcore 的设计师!我们请文婷给大家自我介绍一下吧~

文婷:大家好,我叫张文婷,我现在人在纽约,在 Adobe Typekit 工作,其实我的日常工作还算是传统的UX设计和前端编程,但是业余时间我对 Typography 比较感兴趣,所以在这方面有些涉猎吧。

Riceman:在加入 Adobe 之前你的人生轨迹大概是怎样的呢?

文婷:我是2011年毕业于浙江大学工业设计专业,毕业以后去了杭州的一家公司。要做设计,也要写前端开发。工作了一年之后去了纽约 Parsons 艺术学院的 Design & Technology 专业。2014年拿到MFA之后去了一家创业孵化器,工作了10个星期。在孵化器里就是大家一起组队,带着你的想法快速的做一个项目。之后去了 Viacom(美国知名媒体公司),旗下的节目包括南方公园和海绵宝宝等等,我在那里主要是给他们的电视频道做App和网站。

Hoka:哎?一个电视频道的App是怎样的?

文婷:有点类似于 HBO 和 Netflix,但是内容仅限于我们自己的电视节目。我觉得那个App我们做的还是蛮精美的,大家可以去下载试用一下:)




Riceman:浙大工业设计毕业之后就去了公司做用户体验设计,还要负责前端开发,这些技能是在浙大读书的时候学的吗?

文婷:其实并没有。我去这家公司面试时候只会一点点C语言,连 jQuery 是什么都不知道。我猜可能是老板看我有一定的可塑性,才把我招进去的。前端开发是去公司工作之后才慢慢开始学习的。

张挠挠:这份工作似乎为你后来的学习和工作做了很好的铺垫。

文婷:是的。这算是我的第一份正式工作,我在这份工作里渐渐培养了对前端开发的兴趣,我喜欢自己做出一个东西来的感觉。后来去到纽约 Parsons 读书之后,我发现专业里同学的背景很多样,大家都多才多艺的,我就想着自己要找到一个安身立命的本领。Design & Technology 这个专业其实和Web技术有挺大关系的,我对这方面很有兴趣,所以就越学越多,兴趣就发展成了特长。


Riceman:当时你在国内工作了一年,是怎么就想到想要出国留学的呢?

文婷:其实本来大学毕业就想去的,但是一方面觉得出国要花很多钱,想着自己能够先赚一点钱,自己能够多负担一点再出去。还有一方面也是刚毕业之后想要通过工作来找找自己的兴趣,之后出国学习也能更有目的性。



Riceman:能否给我们介绍一下 Parsons 的 Design & Technology 这个项目?

文婷:Design & Technology 这个专业很大,我那届大概有90人左右。整个项目的多样性非常好,同学来自世界各地,大家的背景也都不太一样,很多人并不是设计背景。有些人是做电影的,有些人是工程师,我觉得这个项目涵盖的领域非常广泛,着重于培养同学「T型人格」上的那一横,而不是一竖。这个项目会把很多领域展示给你看,同时你也可以向很多不同背景的同学去请教。这样的项目的坏处是你比较难以在学校里在一个方向上学得很深入。大部分的教授都是做比较泛的方向,在某个领域深耕的专家是比较少的。

Riceman:你是怎么在这个过程中找到「T型人格」中那一竖的呢?

文婷:这其实是一个很现实的考虑。我们学校的学费很贵,所以我平时自己会在学校外面接一些私活,而这些私活中绝大部分都还是需要你去做开发的,这样就逼着你去学习这些开发技术,这样渐渐地我就形成了自己T型中的那一竖。


Parsons MFA Design and Technology Class of 2016 Thesis Show 海报
图片来源:Parsons MFA Design & Technology Twitter


Riceman:我们三位主播都在硅谷,对纽约的设计圈不是很了解,纽约的设计环境是怎样的呢?

文婷:我最近正好看到一篇杂志的报道,就是讲纽约的设计圈的。文章里说其实很多年轻的设计师都很向往纽约,尤其是 Graphic Design 这个领域。可能交互设计的中心是在硅谷,但如果说到 Graphic Design的话,我觉得可能80%你知道的名家都在纽约,这里设计相关的 Conference 和 Meetup 也不少。如果你想见一个行业大牛,你很多时候都可以约在一个步行可达的咖啡馆,这是这座城市带来的便利。但是纽约地价高,我现在住的公寓小的令人发指,很多设计师到中年就离开纽约了,我觉得纽约可能是一个让人又爱又恨的地方吧。

张挠挠:之前我们有一期嘉宾有提到说硅谷是一个巨大的 bubble,大家从事和关心的事情都差不多,纽约是不是相对来说更多样化一点?

文婷:对,纽约是个大都市,什么样的人都有,虽然平时和我交往的朋友其实还是很同质化的。我很喜欢的一个设计师叫 Jessica Hische,她曾经就说,当她刚从纽约搬到旧金山的时候觉得:「哇,这里的人们都在谈论互联网和风险投资,这太棒了!」,过了没多久,她就厌烦了硅谷的这一套东西,开始怀念听到人们在纽约酒吧里谈论摇滚乐队了。




Riceman:聊完纽约,我们聊聊你的几个个人项目吧。你在 Github 上有两个超过 1000星的开源项目,我觉得这对于设计师来说是一个很了不起的成绩。一个叫 Underline.js,还有一个叫 Responsify.js。你之前还因为 Underline.js 这个项目被邀请到纽约的 Tech Meetup 上给大家做演讲,能否给大家介绍一下 Underline.js 这个项目是干什么的?

文婷:我觉得 Underline.js 是一个很「无用」的项目,但是它却在很大程度上改变了我的职业发展轨迹。大家应该知道,在网页上的文字样式你可以通过写一行简单的 CSS 代码来给文字添加下划线,但不知道大家有没有注意到实际上各个浏览器对于这个文字下划线的渲染都是不一样的。我当时也是看了几篇相关的文章,我很惊讶有很多人在关心这么一个小小的细节。之后我就开始研究怎么去画出一个最完美的下划线。这个细节包括了几个方面:

    • 线的粗细和字体的字重之间的关系应该是怎样的?
    • 最完美的下划线位置是在哪里?
    • 怎样可以让下划线在各种屏幕上显示得 pixel-perfect,不带有毛边?
    • 怎样可以让下划线完美地绕过文字的 descender?

这当中涉及到一些算法,最后我是把它们打包成了一个 javascript library。我后来意识到用 javascript 来做这个事情其实不太实用,因为要考虑到性能的问题,后来我索性就把它朝着更有趣的方向去做了。比如你现在在上可以看到,如果你的鼠标滑过这个下划线,它就会像吉他弦一样震动,然后发出声响,这个音调是根据下划线的长短来决定的。


Underline.js 网站上的下划线琴弦震动效果




Riceman:我之前在 Medium 上看到过一篇它们处理下划线的文章,在准备这期采访的时候我发现他们还把你的这个项目加到了文章最后的参考链接当中。

文婷:对,我是被他们启发的。他们的做法和我有点不一样,是比较偏向于 production 的做法,他们使用的是 CSS 的技术,用的是hack background gradient的办法(可以精确控制那条线画在哪里)。而我用的是 javascript,实现原理是在文字后面加了一个 canvas,然后在上面作图。Medium 的办法 performance 更好,他们也为了 performance 牺牲了一些功能,比如他们的下划线是不会跳过字的 descender 的。Medium 是一个非常注重 typography 细节的公司,也许是在 Web 领域做得最好的。我没想到他们的设计师后来会把我做的这个东西也加到那篇文章里。我觉得如果我的这段经历能给到大家什么启发的话,就是大家千万不要觉得网上那些大牛遥不可及,在 Twitter 上搭讪那些大神,他们其实很乐意和这个圈子的同学交流的,千万不要觉得他们离你和遥远。Typography 这个圈子其实很小,多认识几个人你就发现其实相互之间都会有交集。



文婷在纽约 Tech Meetup 上演讲 | 图片来源


Hoka:我们知道你之前受邀在纽约的 Tech Meetup 上给大家就你的这个 Underline.js 项目做了一个演讲,能给我们讲讲这段经历吗?

文婷:其实是这样的,我之前在 Huffington Post 工作时候的老板是纽约 Tech meetup 的 board member,虽然我们俩都离开了原来的公司,但是我们还是保持着联系。在做了这个项目之后我就想尝试去这个活动上给大家做一个 demo。后来就去了,虽然在台上只有5分钟,但当时我是准备了很长时间的。在做了这5分钟的演讲之后,出乎我意料的是,我一下子拿到了3个工作的offer,其中一个就是我现在做的这个 Adobe Typekit 的工作。我当时其实并没有在找工作,但是 Typekit 当时的负责人的一个朋友去了这次 meetup,回去之后他们就联系了我,只是简单的聊天,没有经过正式的面试,他们突然就说想要给我一个 job offer,对我来说这是一个意外之喜吧。

Riceman:我们看了你那5分钟的演讲,觉得你讲的特别好。作为一名华人设计师,站上那样一个大的舞台给大家做英文演讲,我觉得是一件很不容易的事情。这当中有什么经验可以和大家分享吗?

文婷:其实我是准备了特别久的,其他演讲者应该都没有像我这样准备得这么多。我在台下计算了我应该每分钟讲多少字、具体到哪一句话切ppt等等,但是当我站到台上的时候还是很紧张的,当时其实讲的时候还紧张得漏了一句话,但是我朋友跟我说他们在下面看不出来。要说有什么可以分享给大家的话,我觉得就是那句话「Fake it until you make it」,相信自己可以做到的就对了。还有就是注意不要讲太快,你不是 native speaker,最常犯的一个错误就是讲太快。要注意在台上的节奏,调整好呼吸,慢慢讲,讲得慢会显得你沉着自信。




Riceman: 我们再来讲讲你的另一个开源项目 Responsify.js。给大家介绍一下这个项目吧?

文婷:Responsify.js 是一个比较实用的库,它是用来改善大家做 responsive image 的工作流程。我的前东家 Viacom 的网站上有很多影视作品的海报,这些海报中会有演员的照片。很多时候这些海报是横向的,如果你不做任何处理,那么在手机端看网页的时候,会有两种问题发生:一个是这些海报有可能会缩放得很小,演员的脸都看不太清楚,还有就是有可能有些演员的脸就被切出了 viewport。我的前东家为了解决这个问题,是用的手工裁切的办法,每张海报都会裁好几种尺寸,让它们在 desktop、mobile 和 tablet 上最优化。我觉得这种办法太费人力了,所以就想有没有什么办法把这个流程优化一下,然后就想到了做这个插件,它可以通过指定一张图片的「核心区域」,自动在不同设备中做裁切,确保指定的核心区域清晰可见,并且显示在画面相对中心的位置。这个 resize 和 reposition 的过程是智能的,不需要你给每种设备都设定尺寸和位置。我还给这个插件做了一个配套的 web app,来帮助你生成一个 html 的 image tag 来简单地实现这个效果。

我在发布这个项目之后收到了一些反馈,有些人建议我和另一个智能图像识别的软件合作,来自动寻找图片的 focus area,从而让这个过程更加智能。但我坚持的一点是,这个图片裁切的过程一定要有人工(设计师)的介入,这个 art direction 和 human touch 对于一张图片来说是非常重要的,我觉得这还不是计算机算法可以完全做到的事情。算法在进行艺术创作时只是一个辅助,最终决定艺术方向的应该是人。




张挠挠:我有一个困惑,就是设计师有的时候有自己对产品的执着,会放很多心思在一些设计细节上,但是你的老板或者用户可能并不在意你花了这么些心思时间做的东西,这种情况下要怎么办呢?

文婷:我觉得这个问题很好。我觉得用户体验设计和 typography 设计实际上是很类似的——就是好的用户体验设计和好的 typography 应该是在幕后运作的,用户应该感觉不到他们的存在。如果一个用户说「哇,这个字体好美」,那往往就说明这个字体用的可能是有问题的,它太喧宾夺主了。一个好的字体和排版设计应该是让用户读得更快、更舒服。你可能花了很多心思在这些细节上,但用户很可能不会来表扬你在这些方面做的工作,这是很正常的,设计师在这方面不能太玻璃心。但如果是你的合作伙伴,你的客户和老板不在意,那你就需要注意这个问题了,这时候你作为设计师的职责就是要去教育你的客户和老板,让他们意识到某些设计细节的重要性。我曾经就经历过这样的客户,有的老板确实比较难沟通,但有的其实是有一颗向学的心的。有一个客户一开始对设计不怎么懂,不能理解我的一些坚持和决定,我就给她介绍用户体验设计和字体设计的概念,给她介绍了一些书,她还真的认真地去看了,并且很感激我给她推荐。

张挠挠:对,这让我想起来 Julie Zhuo 老师曾经写过一篇文章讲过这个问题,作为设计师,自己首先应该要明确自己为什么要这样做设计,然后再去做你的客户的沟通和教育工作。




Riceman:我们知道你最近又开始做一个新的个人项目叫 cssicon.space,能给大家介绍一下这是一个什么项目吗?

文婷:这个项目又是一个「没什么用」的项目,其实就是有一个周末,我尝试用 CSS 来画图标,不用 SVG,不用设计软件,就是用 html div, psuedo element 和 CSS 来做,到现在为止画了512个icon了。因为其实 CSS 只能画方形,以及某些种类的圆和三角形,所以这当中需要很多 hack 和 trick 来做。我是想着以后可以把它做成 tutorial 的形式,通过分解这些图标来给大家介绍一些有趣的 CSS 小知识。

Riceman:我去看了一下这个网站,我觉得你做的这些图标让我对 CSS 有了全新的认识,当我们把每一个图标放到足够大的时候,其实是可以想象成一个页面布局的,做前端的同学可能能从你的这个项目中得到启发,一些设计师做出来的比较特殊的排版也许其实是可以用 CSS 的一些小技巧来实现的。


文婷画的一些CSS icon,实现了像小胡子图标这样的复杂曲线



张挠挠:我们知道文婷你在跨媒体设计(transmedia design)和衍生艺术(generative art)这个领域也很有造诣。能给我们介绍一下这个东西的概念吗?两者之前有什么联系和区别?

文婷:跨媒体设计就是在多种媒介形态下做设计,一个例子是比如你要给一个品牌做 VI,除了传统的视觉平面设计,当你要把这个品牌拓展到比如 Web 和手机端,它的设计就可以变得更具有互动性。它跟衍生艺术的区别就在于衍生艺术最后的成果是一个艺术品,你是用艺术来进行自我表达的,只不过这个艺术的表达方式不是油画或者是别的什么传统形式,而是用代码来做。你会用到 Processing 和 JavaScript 来做一些自动生成的图像效果。当你把这种艺术形态冠以一个统一的沟通传达的目标,它就从艺术变成了设计,它有了一个落脚点,有了一个明确的设计目的。

张挠挠:衍生艺术在我们日常的产品设计中有没有什么运用呢?

文婷:我最近正好在网上发现了一个这样的例子:Flipboard 是一个很著名的移动端阅读App,他们在产品设计中用到了 Perlin noise。Perlin是一个数学家,他发明了一种算法叫 Perlin noise,这是一种随机算法,使用这个算法产生的随机和普通的机器随机有些不同,用它创造出来的东西会显得更「有机」、更接近自然。这个算法在 generative art 领域里运用得很广泛,比如你用代码生成一棵树,如果你用普通的机器随机,这棵树的分叉和枝叶就会显得不太自然,加入了 Perlin noise 之后,这棵树会变得自然许多,这也有点像是物理中的布朗运动吧。Flipboard 是一个内容聚合器,内容排版是他们很重要的一个环节。普通的杂志内容是规定好的,所以排版可以做的很精美,但是 Flipboard 需要处理的内容各种各样,每个人看到的 Flipboard 也都是不一样的。他们有上百种版式模板,他们在生成这些版式模板的代码中加入了 Perlin noise 的随机算法,你看到的每一页排版都是随机的,但并不是机械化的随机。


Riceman:太有趣了!之前我还听说过 Flipboard 为了加强 mobile web 端的体验,用HTML Canvas的方法重写了DOM和一些原生 JavaScript 动画效果,使得它们看起来更加流畅。看来这家公司对设计细节和产品体验有着特殊的执念和追求!

文婷:对,其实和 Flipboard 同类型的App挺多的,但是我觉得他们确实做得很好,和其他产品有差异,可能这种体验上的差异是由很多这些细节构成的,你乍看一眼比较两个同类型产品的截图不会发现有很大差别,但是如果你持续使用,不停地翻页阅读,可能就会发现整体上他们家的体验和别的app是有些微妙的差别的。他们的排版更多样,并且不生硬。

我还可以讲一个例子,我之前去参加过一个讲座,那个讲座上字体设计师 Andy Clymer 发布了一款新的字体叫 Obsidian。这个字体的作者本来是一个传统的平面字体设计师,但他突然有一天决定休一个三个月的假期,去上课。他去上的这个学校正好是我母校 Parsons 的前任教授开的,这个学校叫 School for Poetic Computation(名字听起来就很有意思)。他在那里学到了一些本来应该和他的工作没有关系的东西,其中一个技术叫做 Shader。Shader 是一种3D渲染引擎,帮助你在计算机上使用光线渲染阴影,形成三维效果,这位作者被这个技术所启发,创新性地把这个技术运用到了他的字体设计里面。他把每个字母设置了A面和B面,为它们设置了光源,通过光线明暗的变化,为字体的 ornament 做上了平面化的3D效果。



Obsidian 字体细节 | 图片来源



Riceman: 我觉得这种创意的字体现在听起来非常艺术,但是也许在未来有实用价值。虚拟现实、增强现实越来越火,我们也不知道在 3D 的世界里面未来的字体是什么样子的。在VR世界当中的字形、字体跟我们在二维世界中是一样的吗?是不是应该有一些别的形式?

文婷:我觉得你这个点很好,这也是为什么我现在对我的工作很有热情。因为在过去500年字体的媒介都没有变,就是纸媒介;是过去的20年才到了电脑上,后来出现新的媒介是网页。要知道5年前在网页上是不能自定义字体的,就只有四五种字体可以使用;而现在你什么字体都可以在网上用。但是现在我们还在尽量追赶纸媒上字体的细节,很多纸媒上能够实现的细节在网站上还没办法实现。我现在做的很多内容就是怎么样让 web typography 能够追赶到纸媒的程度。

但我又有一个新的观点。Web 是一个新的媒介,它不是跟纸媒完全一样的;现在很多人追求把纸媒上能够实现的细节照搬到 web 上,这当然是一个很好的方向,但有些过于细节的地方照搬的话就忽视了 web 作为新媒体的特性。比如说 responsiveness 这是在纸媒没有的,我纸张就这么大,它不会变化,但是浏览器大小是可以变的,还有 mobile。你要去拥抱这些新的变化,创造新的规则和细节。

你刚才说的关于 VR 这点对我启发很大。Web 还是二维的,但字体在 3D 的环境里面当然要有相应的变化,不能什么都照搬纸媒或者 web。我们有很多设计师在执着地复刻过去,但也有新的东西可以发掘。

Riceman:目前我们看到的 VR 字体是比较简单地把二维的拉成三维的,增加一个厚度,但是就仅此而已了,没有一个专门针对三维世界的字体。

文婷:其实我想的不是怎么把字变成三维的,而是在 VR 世界里你的字会不会变成弧形的,让你看上去是平的,让它的 readability 最好。我用 VR 会头晕,在 VR 里面看书应该很可怕,怎么能让这体验变得更舒适一点,让它变成一个 enjoyable 的体验,这可能对 typography 界是一个挑战。


Riceman:如果有听我们节目的字体设计师,可以 take this challenge,试一下专门为VR世界设计字体。

文婷:这个趋势你可以看出来,很多字体可能几百年前就被设计出来了,但是被 digitize 后怎么能让它们在 retina display 上更好看,都做了相应的优化。比如说 Hinting 这个技术在 print 里是没有的。Hinting 是说当你的字在web上很小,比如6或者8px 的时候,你要 fit to this pixel grid 用原来的字形就会很扭曲。所以会通过 Hinting 把这个 vector 改变一下,让它更适合这个很小的 pixel grid,在有限的空间中实现可读性最好的一个形状。

这是技术根据媒体演变的一个例子。到了3D会有不同的 constraints。我觉得 constraints 是设计的根本所在吧,design is constraint。我做 CSS icon 很开心,因为我有一个很大的constraint —— 我只能用方形、圆型和三角形,不能用一些 crazy paths。限制让我更好地做设计决策,我的很多决策也都是在绕过这些限制。这可能是一个比较浅的例子,但同样的概念可以应用到其他领域里面。




Riceman:对于想学习跨媒体设计和衍生艺术的同学,有什么资源和经验可以跟大家分享?

文婷:有几个资源比较有权威性。一个是 Daniel Shiffman 的 The Nature of Code,这是一本免费的书,可以在网站上读,学他的例子;他的书是基于 processing 的,这本书有人改编成 JavaScript 的版本,在Khan Academy有相关的教程(Advanced JS: Natural Simulations)


Hoka:最近设计圈或者说科技圈还蛮流行做100天项目的,就是一个人每天都要做一件事情,commit 一段时间到这件事上。我们知道你有做两个100天项目,一个是 Type Detail,一个是 Design Research,可以给大家介绍一下这两个项目吗?

文婷:Type Detail 是我当时一个很感兴趣的领域。我还是个 typography 的初学者,做不到看到一个字体就说出这是什么字体,甚至这个字体的类别、有什么特征也没办法直接说出来。Type Detail 是给自己的一个练习吧。我每天选一个字体,去了解它的字体分类、是哪一年被谁设计的、设计师是哪个国家的(因为不同国家的字体有自己的一些特性),然后找出它的特性,看看有哪些不同之处,我会用标注的形式,把特色圈出来,写一段话来解释这点为什么有特色、为什么好、怎么样能够提高 readability 或者是其他方面的性能。但是我没有坚持住,只做了27个字体。有时间的话我还是想把它完成。

做100天项目我建议大家选一个自己有兴趣并且想要有一些进阶或者研究的课题,这样的项目真的会给你带来很多。因为100天这样一个严格的限制,会一直 push 你去找新东西。100天最大的难点不是在于怎么样去找出时间做这个事情。往往是你有这个时间,但过了30天之后你就会很难坚持,因为你要一直去找一些新鲜的东西,这是一个难点,也正是这个难点会推动你去挖掘新的领域。



Type Detail上一个字体标注的例子:Acumin


去年这个Type Detail有点失败,没有做完;今年我就想「赎罪」,我就做了一个新的,100天的 Design Research。大部分内容还是跟字体有关系,因为这是我主要的兴趣点。但是只做字体没办法延续100天,因为有些内容枯竭了,我开始逼迫自己去学一些新的东西。我觉得这是对我的一个锻炼吧。之前我的兴趣点非常狭窄,就是字体。现在我会把某一天里发生的一些好玩的事情转化成一个主题。比如说我做了一个播客的主题,就是因为那一天你们给我写了信。还有就是有时候会去 MOMA、Met 看一些展览;之前就是随意地看,现在可能就会把背景和艺术家稍微做一些研究。我自认为对艺术不是特别敏感,有时候看不懂我就算了。现在做一些调查、看一些评论,我好像能够理解得多一点了。也是帮助我发掘别的相关的兴趣点。


Riceman:去年做 Type Detail 做了27个字体,我们也知道你现在在 Adobe 做 Typekit,我很好奇作为一个字体爱好者你有什么喜欢的字体想推荐给大家的?

文婷:我一般都避免回答这个问题,因为每个字体都很美,很难说某个字体是最好的。Massimo Vignelli说一个设计师只需要5个字体,我是不太同意这个观点的。我觉得应该在不同情境里选不同的字体去用一下,探索一下。字体在不同用途下发挥的作用都不一样,你只有在使用这个字体的时候才能够真正看到这个字体到底好处在哪里。我最近喜欢的是 Acumin,是 Typekit 最近新发出来的一个字体。它有点类似于 Helvetica,但它很适合 responsive web。我刚才提到字体设计也在适应新的媒介,我觉得 Acumin 就做得很好。它包括了很多种的字重,在 responsive web 的不同 layout 里都能找到适合的字体。


Design Research 网站设计


Riceman:我们看到你做的 Type Detail 和 Design Research 这两个百天项目的网站都非常有设计感,特别是网站的字体排版有一种平面设计排印的感觉。你在做网站的时候有什么心得可以给大家分享一下?

文婷:最近我在 designresearch.space 这个网站上花了一些功夫,就像你说的,想要尽量靠近平面设计的细节程度。比如说一个平面设计领域的细节可能大家不太熟悉,就是一个段落开始的第一个字符是引号的时候,为了让排版看上去左对齐,要把引号放到外面来。这个细节在 Web 上很少见到,但 Medium 有做到,如果你在 Medium 上打一段字第一个字是引号,它会把引号给拉出来,然后第一个字母还是跟剩下的左对齐。我有在我的 Design Research 网站上加这个部分。还有 small cap 这些,在纸媒里面比较常见但在 web 不太常见的一些细节, 也是为了锻炼自己的排版技巧,还有就是探索怎么把过去的一些好的细节带到 web 领域。我也想开发一个工具类的东西让这个工作做起来更方便——很多时候内容是用户生成的,我在没办法改你的内容的情况下怎么能让排版更完美?Medium 就在做这件事情,比如平时打字的时候大家不会打 smart quote,都是 dummy quote (前引号和后引号都是垂直的,看起来是同一个引号),Medium 会自动判断然后帮你转换。

Riceman:很多在纸媒里面的最佳实践在 Web 领域很少看到,可能是因为在技术上你需要花费额外的心思和功夫才能够做到。如果有一个工具能够让所有网站能够方便的遵循平面设计上字体排印的最佳实践的话会非常有帮助。

文婷:这个其实已经存在了,叫 typeset.js 。我也在用它,但它有一些做法我不是特别同意,所以我想去做一个自己的版本。我用它的时候改了一些源代码,有些 features 我把它们 disable 了。但它本身已经很好了,我刚才说的那几个功能 typeset. js 都实现了,包括自动转换 smart quote 和 small caps,大家有空可以去看一下。

Riceman:不知道在中文世界里有没有这样的 script 库存在。中文的字体排印是另一个非常大的话题。因为我们今天聊得还是以英文字体为主,以后我们可以请一些中文字体的专家来介绍一下这方面的知识。

文婷:在 Web 上最大的问题还是 CJK (Chinese, Japanese, Korean) 的字体文件太大了。西文字体最主要的就是52个字符加一些标点符号;中文有5000多个常用字,每个字体文件很大,很难做 Web font。我加入 Typekit 之前有一个想法是怎么让中文字体做成 Web font。现在看到的绝大多数网站上用的好看的中文字体都是用图片的方式实现的。我有在 Github 上问一些人能不能一起开发,后来发现已经有人开发出来了,叫做 Justfont。Typekit 也有,只不过还没有发布给中国市场,在日本市场已经有了。它叫做 subsetting,原理是,虽然我们中文常用字有5000个,但你这个网页上不可能用5000个字,可能只有300个字;我们就把字体做一个 subset (子集),生成一个只包含这300个字符的子文件,这样就可以实现中文、日文和韩文的 Web font。台湾做的 Justfont 就实现了这样的功能。我的百天项目里有一天就是做的这个 font subsetting 的研究,有好多相关链接我都搜罗了一遍放在里面。百度和阿里巴巴的程序员也做了一个 Dynamic Subsetting 的开源项目。

Riceman:Adobe 这样的公司能够担负起这个责任去推广 CJK 的 web font,是非常让人激动的!这给网页设计带来更多的可能性,引入的中文字体如果能被网页开发者广泛使用会是对中文世界的一个进步。

文婷:对。这个技术已经有了,因为一些别的因素还没有推广到中国市场去,但是现在马上要推广过去了。




Riceman:在节目最后想问问你有没有什么给大家推荐的字体设计或者排版设计方面的资源?

文婷:好。第一个想推荐的是 The Elements of Typographic Style 这本书,可以说字体排版领域的圣经。其他相关的资源我有收集很多,我有放在这个网页里。如果想找更多内容,我的这个网站上有更多的资源,大家可以用搜索功能,因为那个清单真的是很长。包括文章、书籍和一些人的作品,还有一些相关领域的设计师、程序员你可以去关注。


Riceman:最后想请你介绍一下你这个暑假在国内开设的这个跨媒体设计、衍生艺术课程,给大家讲讲主要内容和怎么报名参与吧。

文婷:我今年夏天会去上海和广州开这样一门短期课程,叫做《设计之美与数字之美:JavaScript创意编程》。大家可以去微信搜索「想当然」这个公众号,里面会有相关介绍,也有关于创意编程的其他相关人士开的课程,大家可以关注一下。这个课程主要是讲 Generative Art,是用 JavaScript 做一些创意编程,生成一些很炫的图案和动画。我会介绍一些算法,你最终可以用 JavaScript, 也可以用 Processing 或者别的技术实现。我觉得好处就是可以给你带来一些不一样的探索领域,通过算法和基本原理的介绍,你从这里出发可以衍生出不同的应用,有一些很奇妙的化学反应。

Riceman:如果完全没有编程背景或设计背景是否可以参加?

文婷:理论上来说是面向零基础的,但是建议大家上课之前去学一些基本的 Javascript。因为这门课里 Javascript 是工具,所以可能需要你稍微自学一下 Javascript 这个语言的基本语法。但是就算你没有设计或编程背景也可以参加。在上海的课程是一周的沉浸式课程,就是7天全职的课程。在广州是周末跟晚上上课。大家可以去「想当然」的微信公众号看具体的课程安排和每天的课程内容介绍。


Riceman:有什么联系方式可以留下来和大家进一步沟通呢?

文婷:我在 Twitter 上是 @designjokes,在微信上是 382194086,大家可以搜索找到我。


--

文中照片由网络和文婷本人提供。



大家可以通过以下方式订阅收听我们的节目:



微信内搜索「UXCoffee」,或者扫描下方二维码关注UX Coffee微信公众账号
编辑于 2016-09-03

文章被以下专栏收录

    一档关于用户体验的播客节目。我们邀请来自硅谷和国内的学者和职人来聊聊产品设计、用户体验和个人成长。微信公众号: uxcoffee