Zhenyang 作品集

设计案例:浪花日记小程序

一款「关注心情」的小程序
 
notion image
 

产品介绍

浪花日记是一款日记小程序,试图把「记日记」这件事变得更简单。与其他日记产品不同的是,浪花日记集成了微信公众号,任何时候将文字、图片、位置等信息发送到公众号,就成为当天的日记,像聊天一样简单。
在日记功能上,浪花日记也做了很多有趣的尝试,比如心情日历和时光机:在产品上加入了「每日心情」的设计,可以选择最符合的 emoji 作为当天的心情,并汇总成心情趋势,按周、月和全部查看,直观看出来你最近的心情波动;时光机功能则会提醒你在一个月前或一年前你写下的内容。
欢迎微信搜索「浪花日记」体验。

角色

  • 项目唯一设计师
  • 负责需求定义、产品规划、以及全部设计工作
  • 产品测试、运营推广等相关工作
 

一、起源

 
几年前有一个叫 Ohlife 的日记网站,我是它的忠实用户,在上面记了 1000 多天的日记,可以说它帮助我养成了写日记的习惯,使用之前无法想到它能给我带来这样的影响,也让我相信一款好的产品可以有影响用户的力量。
Ohlife 创造了一种巧妙的设计帮助用户写日记,让写日记这件事变得简单:每天定时发送一封邮件到你的邮箱,回复这封邮件的内容就是你当天的日记。这个看起来平淡无奇的方案,为什么说「巧妙」呢?
原因有两点:一是使用场景的转移,用户几乎不会想着每天访问网站去写日记,但是会每天查收邮件,把一个需要付出额外成本的使用场景融合到一个日常的使用场景中,产品被使用的概率就提升很多;二是让写日记这件事变得没有压力,它去除了任何格式的限制:没有固定问题,没有固定格式,没有用户激励体系,没有连续打卡多少天……回复邮件时,内容可长可短,不想写可以不写,想发图就可以发图,完全由你当时的心情决定。
可惜的是,Ohlife 在 2014 年关闭了服务。在 Ohlife 关闭之后,我也尝试过一些类似功能的日记产品,但几乎在设计、体验上都与 Ohlife 相差甚远。于是我用回实体的手帐。在接下来的几年,国内外即时通讯工具迅速发展,逐渐占据了越来越多的使用场景,特别是在微信发布小程序后,我们开始思考将日记和 IM 相结合的工具。
Ohlife 网站截图:功能说明
Ohlife 网站截图:功能说明
Ohlife 网站截图:日记详情
Ohlife 网站截图:日记详情
 

如何结合?

微信占据了用户大量的屏幕使用时间,并且逐渐将场景从聊天扩展到生活、购物、金融、出行等多个领域。在所有产品中属于绝对「高频」的一个,用户已经形成习惯每天都会打开查看,所以不需要有额外的记忆负担。而新建一款产品,需要在用户头脑里建立「场景」和「产品」的映射关系,只要映射关系加强到一定程度时,用户才会在遇到类似场景时想起打开这款产品。沿袭 Ohlife 的思路,我们把「写日记」加入到用户每天已经存在的使用路径中,不需要额外建立「场景」和「产品」的映射,让用户自然而然地完成写日记这件事。而用户在微信中最常见的操作就是和好友聊天,如果我们能够通过聊天完成写日记的过程,那将完全不需要改变用户的使用习惯,对用户来说是相当自然的流程。

目标

浪花日记试图把「写日记」这件事变得更简单,像聊天一样简单。
 

二、产品探索

如何写日记?

为了实现「自然」的写日记过程,我们想到了公众号,公众号除了发布内容外,也可以接收用户发来的信息,我们则可以将小程序和微信公众号集成机器,实现任何时候将文字、图片、位置等信息发送到公众号,就成为当天的日记,过程就像和你的好朋友说心里话。此外,考虑到用户对小程序产品的认知,小程序也需要拥有完整的日记功能:写日记、看日记、改日记、查看个人信息等,于是我们开始构思小程序的设计。
notion image
 

一个日记小程序应该有什么功能?

开始规划日记小程序的功能之前,我们一直在思考:日记的核心是什么?
我们找到的答案是──日记关乎心情。每个人的心情难免经历起伏波动,开心、难过、沮丧、彷徨……这些特别私人的情绪通常不容易表达出来,通常也没有产品来记录这些时刻,而日记的定位是一个私密空间,所以「记录用户心情」也成为我们的目标。
 
notion image
 

心情

即时通讯工具和社交网络的发展,带来了多种多样的个性化表达方式,文字已不能满足用户的表达需求,越来越多的用户喜欢使用表情或 Gif 来传递情绪,Emoji 更是成为所有社交平台和通讯工具的标准配置。
究其原因,Emoji 简单、直观、通用,能传达复杂的情绪,而且几乎不需要学习。所以我们设计了「心情」功能。用户可以为每天的日记设置当天心情,一天之中也可以设置多个心情。如果用户通过微信公众号发送 Emoji 到小程序,我们也会将它识别为当天的心情。
小时候写日记会写上当天的天气,想到这个场景,也让我们想到心情除了真正记录「心情」外,还有很强的通用性,可以用来记天气、运动、工作、甚至食物。为此我们参考了 Emojipedia 每年发布的 Emoji 排行榜,以及 iOS、Android、微信等平台对 Emoji 的分类,并根据日记的场景重新进行了分类。
notion image
notion image
 

心情日历

心情不是一个个碎片,而是一段连续的体验,所以比起每天的心情,我们更关心长期的心情变化,通过更长周期的心情记录,才能反映出最近在经历低谷或者高潮,已经是否需要做出调整。所以我们在产品上提供查看直观查看心情趋势的功能:心情日历。心情日历将用户每天设置的心情按月聚合,展示到日历中,这样用户可以快速回顾本月的心情趋势,看到心情的起伏。
notion image

记录格式

数字产品在记录内容的丰富性上拥有天然的优势,比如发表情、发图片、发位置都已经成为用户的日常操作,我们也利用这种优势加入到产品中,为日记产品添加了图片和位置等多媒体格式的支持,并且实现将用户直接通过公众号发送的图片、位置记入当天日记的功能。
notion image
 

让不同心情的时刻都有办法记录

在浪花日记中,可以记录文字、表情、图片和位置,通过几种格式的搭配组合可以创造出满足不同类型用户的记日记需求。
比如思维活跃、灵感不断,可以把日记当成灵感收集箱,想到什么想法就通过公众号记下来;
比如心情不好,不想说话时,可以发送 Emoji 代表你的心情;想说话的时候也可以写长长的文字;
比如喜欢摄影,可以每天把拍到的照片发到公众号中,日记就变成你的相册;
比如出去游玩时,可以每到一处新景点,在日记中添加一个位置和拍的图片,这样日记就是你的游记;……
无论你处于怎样的心情和情境, 浪花日记都可以灵活帮助你记录你的一天。
 

时光机

日记不仅关于此刻,也关于回忆,在一段时间后翻翻之前的日记也是很有趣的体验。在产品上,我们增加了时光机,一个可以回顾一段时间前写下的日记的功能。
 

三、视觉

书写和阅读体验

在视觉上,日记最重要的就是书写和阅读体验,尽管数字产品在功能上要丰富得多,但纸笔带来的书写体验却是无可比拟的,另外我们也喜欢一本排版优秀的杂志带来的阅读体验。
 
notion image
 

设计探索

虽然无法直接复制这种书写和阅读体验,但我们可以在视觉元素和排版上模拟这种熟悉感,所以初期的探索方向主要在这两种方向上进行尝试。
notion image
 

颜色

我们希望用户在写日记时放松地表达自我,在视觉上尝试尽量减少用户使用的压力,所以主要在颜色和风格上都追求简洁,大量使用白色和浅灰色。在高亮颜色上,我们选择了能传递「浪花」感觉、接近大海颜色的深蓝。
notion image
 

图标

我们希望产品能够营造亲和、友好、放松的环境,因此在设计图标时采用了柔软、简洁的线框图标。
notion image
 

Logo

日记产品叫做「浪花日记」,要如何传递「浪花」视觉形象?并且能传达出是一个和日记有关的产品?还是设计一个更简单易懂的笔或者本子的图标?
notion image
 
在进行了很多关于「浪花」的尝试后,有一天突然意识到抽象的海浪形状与钢笔在纸上留下的笔迹很相似,所以以此设计了产品 Logo。
notion image
 
 

四、信息架构

设计探索过程更偏向于一个个独立的页面,缺少统一的结构,因此需要停下来考虑产品的信息架构。
 
今日
我们设想的主要场景是通过微信公众号来记日记,小程序作为辅助。小程序的流量来源,除新注册用户外,多数来自公众号在记日记成功后返回的查看链接,因此日记小程序中最重要的功能围绕今天的日记展开的,包括查看日记和写日记。
往日
同时为了方便用户查看以往的日记,我们将「往日」也放在了导航中,并以月份来组织。
心情
「心情」则是产品中比较有趣的功能,足够简单且通用,也很容易激励用户去尝试我们的产品。我们想将这个功能推广给用户,将「心情」作为单独的导航功能。
个人
另外将用户的数据、设置等功能归入了「个人」页面。
 
notion image
 

五、最终设计稿

notion image
badge