Cover

Design is an opportunity to continue telling the story

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

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

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

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

好的设计…是谨慎克制的

Pics10

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

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

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

我停止了对潮流的追逐,我开始停下做动画,思考产品设计最需要的,用户最想得到的,开始做更多的产品,学习实践中的开发知识。规避误区,解决问题。
所以这一次的模板设计,和旧设计有着本质的不同,我的设计观变了。旧版惬读中某些部分的设计比较稳固,比如说字体、配色、氛围感,而有些部分欠考虑,显得轻佻,比如说未经思考的产品逻辑,没有花太多心思打磨的交互动画。模板设计第一件事,便是确定配色和字体。

神似但不形似的样式

Pics11

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

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

字体排版的考量

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

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

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

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

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

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

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

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

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

CSS in my mind

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

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

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

并非终章

写到这里,惬读的设计故事就差不多了,但它的故事并未完结,它将传递到每一个写作者的手中,继续衍生一个又一个故事。
希望使用惬读模板的用户能够看到这篇文章,也希望你们写作时能有和我此刻一样的体验。
Pics16

使用惬读写作的文章

最后,感谢叶冠锐先生、王艺宁先生在模板设计中的一些建议和帮助。当然,如果你发现了什么问题,或者有什么好的改进想法,欢迎建议和斧正。
好了,朋友们,属于我的短篇结束了,下一个短篇请你来撰写。

「原文阅读地址」