惬读的设计

Design is an opportunity to 
continue telling the story

躺在文件夹里的旧设计

一个阅读者的初衷

气质的养成来源于精神生活,阅读是精神生活的主食。回想阅读岁月,每一个惊心动魄的故事,每一块字句凝练的精神内核,每一页纸张的质感都曾让我感动、深思,它们是我回忆中的珍宝。

书架一角

工作之后,阅读越来越具有职业目的性,学习行业技术的时间越来越多,人文性的阅读越来越少。学会了很多阅读不曾给予的知识,却也时常回味顾往的美好。阅读,对于我来说,变成了一种欲望。

去年,我做了一点尝试,我尝试用设计去做一点和阅读相关的东西。我深知阅读完精彩书籍之后的激动,那种与同好者交流的渴望。我想做一款概念设计,让读者与读者社交,了解其他用户的相关阅读书目。

驱动力来自一节公开课

刚好那段时间接到了站酷公开课的需求,需要分解讲解 动画原型工具 Form。

实际需求和概念想法一拍即合,下一步便是思考如何将自己的概念辅助与实践。

追求宁静阅读

Munchery 的设计美学不是惊艳的
而是满足的恬淡感

我非常欣赏 Munchery 的配色与配图,恬淡而又醒目,视觉的设计营造了相关产品的氛围感。

「惬读」的 Style Guide

经过反复的调节与对比,色彩方面,背景色选取了一张较有纸质感的灰色,同时也能对比出卡片的纯白。文本部分层次感主要依赖于墨黄色(#545452)的透明度变化,最后,整体的品牌和行为召唤(Call to Action)使用了鲜亮而不过分刺眼的橘色。

我更喜欢 Futura Lt Light 的数字
饱满且更简约

文本部分的考量主要在于「选取哪种富有汉字韵味的字体作为 Title 字体」,在对比了方正清刻本悦、颜宋、风雅颂等字体后,我发觉我对于颜宋有一种特殊的偏爱:独特的辨识感,可读性强,而其余中文部分配以思源黑体,数字配以 Futura 字体,这种现代字形与颜宋的结合居然并不突兀,也是出乎了我的意料之外。

看看周围人在读什么

用户利用 Mapbox 构建的
每日运动轨迹地图

Mapbox 这款产品令人赞叹不已,它挖掘了地图的更多玩法并提供了优美的设计平台。我想利用 Mapbox 的样式定制功能来自定义地图,查看周围人在阅读什么。

我想为惬读营造的界面感觉,如果用形容词来形容,那便是:「纸质般的」、「温暖的」、「安静的」,基于之前的色彩风格,我在 Mapbox 中定义了地图样式。

Mapbox 自定义了地图样式
可惜地图数据不全

当时想用地图来了解周围人在读什么,他/她之前在读什么,或者更延伸一步,产生借/换/卖等读书交易和社交,但最后设计到了查看阅读记录。

发现佳句

长大后才渐渐理解这句话的意义
引导的设计可能还需考量

我从那些伟大而又引人内省的章句中获益良多,所以我希望引导具有人文色彩,在用户每一次打开应用时,出现不同的字句,扣人心弦而又富有新鲜感。

综上,在积累了足够多的情绪版后,我制作了一版简易交互原型,能较好的阐述这款概念设计的想法。

重新思考,提炼,新模板诞生

一年后,当需要为字里行间设计模板时,我突然想起了这个未完成的项目,如果没有字里行间产品的需求,我估计这个概念,至今仍然会躺在某个文件夹的深处。

15 年夏天 1 天速成的
交互动画文件

但是,想要拿来就用,需要克服很多问题:

  1. 概念设计是一回事,产品实现是另外一回事,在旧版的惬读设计中,很多产品逻辑不能自圆其说。
  2. 旧版设计是应用设计,而这一次,我需要设计的是文章模板,门道并不相同。
  3. web 技术虽可解决中文 webfont 问题,但需要学习并借鉴 CSS 思想进行排版规划

带着这些思考,我开始进行重设计。

好的设计...是谨慎克制的

设计不应过分追逐潮流应了解趋势
根据自己产品的实际情况平衡设计
这句大白话我花了很久才理解其中深意

曾经,为了磨练技巧,热衷于在 Dribbble 上制作一些「语不惊人誓不休」的设计,但是,随着产品经验的丰富以及对开发技术的理解,我越来越困惑:「为什么可以简单解决的问题,偏偏要选择复杂的解决方案?炫丽的交互动画真有其存在的意义吗?」

履行某种功能的产品具有工具属性,它们既不是装饰物也不是艺术品。因此,它们的设计应该是中性的。器具应当隐退,为人的自我实现留出空间。

我停止了对潮流的追逐,我开始停下做动画,思考产品设计最需要的,用户最想得到的,开始做更多的产品,学习实践中的开发知识。规避误区,解决问题。

所以这一次的模板设计,和旧设计有着本质的不同,我的设计观变了。旧版惬读中某些部分的设计比较稳固,比如说字体、配色、氛围感,而有些部分欠考虑,显得轻佻,比如说未经思考的产品逻辑,没有花太多心思打磨的交互动画。模板设计第一件事,便是确定配色和字体。

神似但不形似的样式

根据阅读的需求,配色方面稍作改进
提升配色的对比感,以求更好的可读性

配色方面沿用旧版的配色,然而稍作调整,追求更明亮的阅读氛围感,橙色更饱和,背景使用纯白,正文使用更具对比感的 #404040。

字体排版的考量

在字号调配过程中,我发现 14 px 精致感固然好,然而可读性较差,16 px 较为易读,然而屏幕空间有限,单屏承载的字数过少,破坏阅读节奏,最后折中选取了 15 px。行高同理,经过比较,在 2 倍行高和 1.5 倍行高中,选取了较为通透,同时保证阅读节奏的 1.7 倍行高

在 iPhone 上的可读性对比
思源黑体 Regular 比 Normal 更胜一筹

在最初的设计中,使用了思源黑体 Normal ,然而在知乎读到了蒙纳高级字体设计师许瀚文先生对思源黑体的评价:

Normal 用在光亮底色网站壁纸,Regular 则用在暗色、黑色壁纸上;或Normal 用在 iPad app 上,Regular用在 iPhone app 上。

仅从视觉来说,Normal 的纤细感固然感人,但是设计目的是提升阅读体验,一番对比后,我选择了 Regular。

「初始」与「终止」的感觉

对于写作来说,最难的莫过于开头和结尾。对于读者来说,开头需要意味深长,令人产生遐想,结尾需要休止感,以便进行回味,仪式感很重要。

模板头部的设计经过了多次迭代

开头和结尾使用了橙色的横线,具有明亮的阅读体验,让读者了解文章内容何时开始,何时结束。同时赋予了文章一种仪式感和清新韵味。

CSS in my mind

在设计模板时,我参考了很多杂志设计,印刷设计,然而,我设计所面向的并不是纸质,而是屏幕,如果仅仅使用 Photoshop 制作模板,会不可避免的在开发流程中出问题。事实上,很多排版设计是在 CSS 中完成的。

在工程师搭建的规则基础上
完善排版与布局。

事实上,我的职责不仅仅是模板设计,还有布局规则的定制,CSS 便是规则制定工具,利用 CSS 进行排版,不但便于与工程师沟通,也能更好的理解数字排版的本质,优化设计。

并非终章

写到这里,惬读的设计故事就差不多了,但它的故事并未完结,它将传递到每一个写作者的手中,继续衍生一个又一个故事。

希望使用惬读模板的用户能够看到这篇文章,也希望你们写作时能有和我此刻一样的体验。

使用惬读写作的文章

最后,感谢叶冠锐先生、王艺宁先生在模板设计中的一些建议和帮助。当然,如果你发现了什么问题,或者有什么好的改进想法,欢迎建议和斧正。

好了,朋友们,属于我的短篇结束了,下一个短篇请你来撰写。