前言

在 2018 年里，参与了日课 2.0 的迭代，负责 App 内一部分功能的设计。

日课是一款极简主义的每日阅读应用（现已改名为岛读），每天精选一篇经典好文，提倡每天花上几分钟来阅读好文。

案例1: 发现想法

产品自上线以来，吸引了一众喜爱阅读的用户。他们在阅读文章的同时，也发表了大量精彩的评论。为了充分利用优质的 UGC 内容和提升DAU，便诞生了「以卡片形式承载精彩评论」的功能，形式相当有趣。

接手此功能时，已有保真度很高的原型，因此我主要负责设计交互流程和制作动效。左右滑动卡片的交互，早从 Tinder 开始就被大众所熟知。Tinder 直到今天仍保留着它滑动卡片的交互，探探也将“左滑无感，右滑喜欢”引入国内。由于其交互方式较为符合直觉，只要反馈足够明显，即使是首次使用的用户也能马上学会，是一种学习成本较低的交互。

松手前，提供及时且明显的提示，左滑时出现「已阅」，右滑时出现「喜欢」；根据拉动的距离，判断松手后卡片是否需要离开；松手后，提供成功操作的反馈，且当前卡片消失，下一张卡片及时出现。

案例2: 打卡

为了提升用户粘度，增加用户成就感，新增了打卡的功能。我主要负责设计打卡的交互、UI样式和动画。打卡机制的设定是，当用户以条件内的速度阅读完当天文章后，文末就会出现打卡入口。

设计打卡的入口样式有三个思路：第一个风格较为复古，灵感来源于念书时候的借书证，去图书馆借还书，管理员都会在借书证上记录和盖戳；第二个风格较为现代，参考了一些平面设计的色块分割方法；第三个风格则是一如既往的简约，做出小纸条的感觉。考虑到用户经常会用到，需要耐看，所以最终选用了最为简约的设计。

下一步是制作打卡成功的动画，提出了引入 Lottie 框架的方案，开发考察后也认为可以。我查阅 Lottie 文档，发现是支持路径动画的，便使用 AE 制作并导出给工程师。

案例3: 分享图片

这是一个失败的案例，因为我制作了比较多方案，但一直没有过稿。后来交由另外一位前辈接手并制作出了目前线上的方案。

简单介绍此功能的背景：在阅读文章时，很多用户都会希望分享某些句子、段落。虽然目前很多软件的分享都是小程序，但生成图片海报依然是一件很有仪式感的事情。

我基于「纸」的质感出发，使用了一些弥散较大阴影，加上较小的圆角，模拟出纸的感觉。元素上，借用了「信」、「书签」、「便签」这几个概念。

案例4：动效

幸于产品的高要求、开发小哥哥的高超技艺，展现在用户手上的日课，动效都非常精致以及柔和。几乎每个动画都会经过三个过程：

先使用 Principle 制作低保真动效，再用 AE 制作高保真动效，反复斟酌修改并确认后，才交给帅气的开发小哥哥。开发哥哥根据效果视频、参数来写动画，而且还会从代码层面提出优化，才有了现在线上的效果。

其他: 背景颜色 小插图 

潮汐 App 中的睡眠模块，根据一天内不同的时间，可以看到不同的颜色渐变，感受从日出到日落的时间流逝。产品需要日课的首页也使用同样的设计，因此我根据24小时调配了一套颜色，每小时变化一次渐变色。

另外在小程序的入口，也会绘制了小插画；以及相关图标的绘制

写在最后

通过日课的项目，让我接触到了一群热爱阅读的用户，他们因为日课而聚集，也因日课的精神而留在这里。日课坚持着克制的设计理念，要求设计师准确地传达出简洁之美。能参与如此赏心悦目的阅读产品的设计，甚是荣幸。