前言

在 2018 年里，參與了日課 2.0 的迭代，負責 App 內一部分功能的設計。

日課是一款極簡主義的每日閱讀應用（現(xiàn)已改名為島讀），每天精選一篇經(jīng)典好文，提倡每天花上幾分鐘來閱讀好文。

案例1: 發(fā)現(xiàn)想法

產品自上線以來，吸引了一眾喜愛閱讀的用戶。他們在閱讀文章的同時，也發(fā)表了大量精彩的評論。為了充分利用優(yōu)質的 UGC 內容和提升DAU，便誕生了「以卡片形式承載精彩評論」的功能，形式相當有趣。

接手此功能時，已有保真度很高的原型，因此我主要負責設計交互流程和制作動效。左右滑動卡片的交互，早從 Tinder 開始就被大眾所熟知。Tinder 直到今天仍保留著它滑動卡片的交互，探探也將“左滑無感，右滑喜歡”引入國內。由于其交互方式較為符合直覺，只要反饋足夠明顯，即使是首次使用的用戶也能馬上學會，是一種學習成本較低的交互。

松手前，提供及時且明顯的提示，左滑時出現(xiàn)「已閱」，右滑時出現(xiàn)「喜歡」；根據(jù)拉動的距離，判斷松手后卡片是否需要離開；松手后，提供成功操作的反饋，且當前卡片消失，下一張卡片及時出現(xiàn)。

案例2: 打卡

為了提升用戶粘度，增加用戶成就感，新增了打卡的功能。我主要負責設計打卡的交互、UI樣式和動畫。打卡機制的設定是，當用戶以條件內的速度閱讀完當天文章后，文末就會出現(xiàn)打卡入口。

設計打卡的入口樣式有三個思路：第一個風格較為復古，靈感來源于念書時候的借書證，去圖書館借還書，管理員都會在借書證上記錄和蓋戳；第二個風格較為現(xiàn)代，參考了一些平面設計的色塊分割方法；第三個風格則是一如既往的簡約，做出小紙條的感覺?？紤]到用戶經(jīng)常會用到，需要耐看，所以最終選用了最為簡約的設計。

下一步是制作打卡成功的動畫，提出了引入 Lottie 框架的方案，開發(fā)考察后也認為可以。我查閱 Lottie 文檔，發(fā)現(xiàn)是支持路徑動畫的，便使用 AE 制作并導出給工程師。

案例3: 分享圖片

這是一個失敗的案例，因為我制作了比較多方案，但一直沒有過稿。后來交由另外一位前輩接手并制作出了目前線上的方案。

簡單介紹此功能的背景：在閱讀文章時，很多用戶都會希望分享某些句子、段落。雖然目前很多軟件的分享都是小程序，但生成圖片海報依然是一件很有儀式感的事情。

我基于「紙」的質感出發(fā)，使用了一些彌散較大陰影，加上較小的圓角，模擬出紙的感覺。元素上，借用了「信」、「書簽」、「便簽」這幾個概念。

案例4：動效

幸于產品的高要求、開發(fā)小哥哥的高超技藝，展現(xiàn)在用戶手上的日課，動效都非常精致以及柔和。幾乎每個動畫都會經(jīng)過三個過程：

先使用 Principle 制作低保真動效，再用 AE 制作高保真動效，反復斟酌修改并確認后，才交給帥氣的開發(fā)小哥哥。開發(fā)哥哥根據(jù)效果視頻、參數(shù)來寫動畫，而且還會從代碼層面提出優(yōu)化，才有了現(xiàn)在線上的效果。

其他: 背景顏色 小插圖 

潮汐 App 中的睡眠模塊，根據(jù)一天內不同的時間，可以看到不同的顏色漸變，感受從日出到日落的時間流逝。產品需要日課的首頁也使用同樣的設計，因此我根據(jù)24小時調配了一套顏色，每小時變化一次漸變色。

另外在小程序的入口，也會繪制了小插畫；以及相關圖標的繪制

寫在最后

通過日課的項目，讓我接觸到了一群熱愛閱讀的用戶，他們因為日課而聚集，也因日課的精神而留在這里。日課堅持著克制的設計理念，要求設計師準確地傳達出簡潔之美。能參與如此賞心悅目的閱讀產品的設計，甚是榮幸。