Page 1

贾冲


项⽬目⼀一览


你好,我叫贾冲。

我设计了了⼀一款有点特别的⽇日记应⽤用。

接下来让我们共同回顾⼀一下 Coze 的设计故事吧!


我与⽬目录 姓名: 贾冲 ⽣生⽇日: 1994-11

阐述了了项⽬目起因与产品的创意点。

教育经历: 天 津 科 技 ⼤大 学 _ 本 科 应 届 毕 业 ⽣生 信息与计算科学_数学系专业 2013.09—2017.07

我的优势:

囊括设计调研,情景分析,线框原型等设 计流程,描述了了产出视觉稿之前所有的设 计⼯工作。

从情绪版到设计迭代再到⽤用户测试最 后到⾼高保真界⾯面,完整展现了了视觉稿 的产出过程。

联系我吧!

ux_chong@163.com

02 / 32


03 / 32


项⽬目起因 为什什么是⽇日记应⽤用? 写作,或者不不那么严肃地称之为记录,尤其是习惯养成型的记录⾏行行为——⽇日 记,能够吸引到普通⽤用户的时间,太少了了。⽽而⽤用户与产品相处的时间越久, 其中⽤用户体验的重要性就越发凸显,换句句话说,可以优化的交互触点,越 多。 ⽇日记应⽤用呢? ⽤用户基数⼩小,主要任务流程简短,功能需求⼏几乎被市场反复覆盖,甚⾄至主流 ⽤用户已经有降低功能期望的迹象,轻量量型⽇日记应⽤用正在获得市场认可。 本来嘛,写⽇日记就是⼀一件简单的事情,但,也是⼀一件⾼高延时反馈的事情。 设计好⼀一项简单任务很轻松,设计好⼀一项⾼高延时反馈的简单任务不不容易易。 事实上,很难。 恰好,我喜欢。

04 / 32


产品特点 9:41 AM

100%

2017-08-12 ⾯面向 iOS 平台设计

Coze 有点特别,特别在哪⾥里里?

9:41 AM

100%

⻰龙⻔门镇,洛洛阳市,河南,中国

2017-08-12 Coze 的与众不不同之处在于其⼤大胆、有趣、独特的时间轴。 以星期为单位,⼀一周为⼀一环来罗列列⽇日记。 简单点说,我更更愿意称之为星期轴。 Coze 就是这么特别。

⻰龙⻔门镇,洛洛阳市,河南,中国

夏天就要边骑⻋车边 听Hero啊!

当然,交互框架以外,⼀一款优质⽇日记应⽤用该有的功能,Coze 都有。 •

图⽂文混排

云端同步

富⽂文本编辑器器

⽇日记搜索

⽀支持多种格式导出

数字 & Touch ID 双密码

字符统计

接下来,我将尽可能地完整讲述设计 Coze 的故事,包括遇到的挑战以及我是 如何应对的。这很重要,毕竟,设计本质上就是解决问题的⽅方法论。 那么,赶快开始吧!

16:51

292字

与其在家听知了了叫个不不停,不不如出去玩吧! 今天和⽂文博骑⻋车去河边,骑到⼀一半,他突然停 下来,扭头对我说,贾冲,有⾸首歌现在必须给 你听听看。

夏天就要边骑⻋车边 听Hero啊! 16:51

写⼀一篇⽇日记吧!

292字

在追求美好⼀一刻的路路上,我不不再执着于随缘 写⼀一篇⽇日记吧! 了了,⽽而是想办法去制造美好⼀一刻。

Coze 主⻚页⾯面

从2017年年8⽉月19号19点38分开始,此后的两 分钟,很美好...

05 / 32


Talk Is Cheap. Show Me The Work.

06 / 32


竞品分析 在设计调研初期,我做了了⼀一份较为详实的竞品分析。在进⼊入产品打磨阶段后, 回过头来看这份竞品分析,发现其实可以更更加精简⼀一些。

我想通过竞品分析获得什什么? 1. 竞品信息

2. 市场概况

在设计初期找不不到产品切⼊入点时,不不妨看看那些已经被市场所认可的同类型 产品是怎么做的。 •

总结出优秀的功能点

挖掘出共有的问题或疏漏漏

提取出清晰的任务流程

1

2

有着良好市场⼝口碑碑的⽇日记应⽤用是什什么样的? 我选择了了三款与⾃自⼰己想做的产品存在直接竞争关系的⽇日记应⽤用。 在核⼼心功能、产品亮点、⽤用户反馈三⽅方⾯面作出⽐比较。 希望可以得到可借鉴的设计亮点。

核⼼心功能

Markdown

产品定位

字体

图⽚片

密码

搜索

导出

同步

标签

提醒

主题

分享

定位

⽇日历

集中

素记

付费

素记

简化视觉设计和轻量量化功能的⽂文字型⽇日记。

格志

问答⽇日志本以及旅⾏行行⽇日程⽣生活笔记。

Day One

多功能集成型⽇日记应⽤用,承担⽇日记和笔记的⻆角⾊色。

内购(6¥)

Evernote

格志

Dropbox

Day One

IFTTT

订阅(12¥/⽉月)|购买(30¥)

Health

市场概要

⽣生活畅销榜

⼀一季度下载量量

最新评分次数

所有评分次数

素记

29

329K

61

16104

格志

32

39K

26

4790

Day One

9

13K

61

2879

⼀一次性购买(30¥)

排名数据:2017.4.8

⼀一季度下载量量:2017.1.08—4.08

数据来源ASO100

以此为设计过程提供引导。

我归纳了了 1500 条评论中的关键词。

3. 分析⽅方案

4. 示例例 3

4 素记在视觉维度上给⽤用户留留下了了哪些直观的印象?

现在的⽤用户已经不不再是那个只会抱怨打印机难⽤用的职员⻆角⾊色了了(类似的⻆角⾊色 常⻅见于⽤用户体验相关书籍的第⼀一章)。如今的⽤用户会给产品团队提供很多反 馈意⻅见,并且,他们很乐意这么做。

清新19 好看29

找到切⼊入点 为了了更更近⼀一步了了解⽤用户期待的⽇日记应⽤用拥有什什么特质,我查看了了这三个应⽤用的最近 500条评论。 遍历1500条评论并得出有价值的结论有⼀一定的挑战性,后来想到通过⽐比较关键词的 词频或许可以得到有趣的结论。当然,我也沿着关键词路路径查看了了有讨论价值的评

签,试图弄弄清楚⽤用户关注的点有哪些。

1

穷举出三个维度下的关键词

2

查找评论⽂文本中关键词的词频

好看

⻛风格化 在描述这⼀一类词组时,我必须承认遇到了了难题。 它们都关乎视觉感受,但⼜又不不仅仅是好看或者简洁就能概括的。

美观6

⼤大⽅方18

⽽而是更更像⼀一种能够触发⽤用户正向联想的视觉表现⼒力力。 最后,我选择了了“⻛风格化”⼀一词。

舒服24

它代表了了界⾯面在好看与简洁之外的亮点。

漂亮7 下划线词组为素记⽤用户评论独有的⻛风格化描述词组

论。

3

关键词分为三个维度

视觉设计

通过归纳这1500条评论中各类型的关键词,整理理与产品设计相关的情感化标

具体思路路(类似亲和图法)

复古5

改进点

⽂文艺20

清洗词频数据(删减,合并等)

素雅10

⽤用户⾏行行为

4

对⽐比分析竞品之间同维度下关键词的词频

5

得出有效结论

古⻛风5

简洁 整洁6

⾼高颜值。 UI组件、字体、⽂文案、配⾊色营造产品⽓气质.

极简5

⼲干净16

简洁85

简约23

⻚页⾯面结构简单,信息层次⼀一⽬目了了然,⾊色彩选⽤用克制。

07 / 32


切⼊入点 图⽚片添加

1. 视觉设计

云端同步

⽂文字样式

密码设置

2. ⽤用户⾏行行为

⽇日记导出

3. 改进点

1

2

3

定位 素记

格志

Day One

素记的视觉设计深深围绕着⾃自身的市场定位,此外,⽤用户对产品的使⽤用预期 格志

也在⼀一定程度上影响产品评价. 135

简洁

35

Day One

格志和Day One的视觉设计同样简洁,⻛风格化,好看,不不过相对素记来说,

⽤用户⾏行行为

37 ⼀一⽅方⾯面是因为前两者的视觉设计本身较平,不不那么出彩;另⼀一⽅方⾯面,前两者

⻛风格化

视觉设计

前⾯面的⽤用户访谈也可了了解到⽤用户对⽇日记产品的犹豫和忧虑都集中在数据保存 上⾯面,因此,数据同步,导出,备份功能是取得⽤用户信任不不可或缺的功能.

在视觉设计之外的交互⽅方式、功能模块上更更能引起⽤用户的关注度.

素记

及部分设备出现⽆无法同步的问题.格志的同步问题频次出现较⾼高.速记和格志

9 7

格志 素记不不⽀支持定位,⽽而⽤用户⼲干脆就没有提到定位.

但不不能忽视的是,界⾯面简洁在⽤用户评价描述视觉感受时的优先级是最⾼高的,

Day One⽀支持GPS定位和使⽤用照⽚片位置信息定位,⽤用户对GPS定位功能则全

19

不不过只有简洁显然还不不够,⻛风格化往往更更能触及⽤用户的情感.

是抱怨地理理位置不不准,定位太飘,这也可算作Day One本地化缓慢的问题表

都使⽤用iCloud服务,Day One使⽤用⾃自家云服务.

3 11

Day One

20

39

导出占⽐比整个数据功能很低,推测⽤用户使⽤用导出功能频次⽐比较低,⽽而⽤用户反

6

馈导出功能集中在导出PDF排版问题,另外部分⽤用户希望导出图⽚片格式. 只有格志⽤用户提到了了备份功能,不不过格志新版本加⼊入的iCloud备份解决了了之

现之⼀一.

前下载不不了了备份的问题.

Day One 使⽤用照⽚片位置信息定位则很准,实际上定位功能转由移动端系统⾃自

7

身提供了了.

改进点

20 插图 字体

回忆 希望

的同时,也⾯面临着⼀一个问题,那就是某些字在⼀一些字体种类下显示不不全.

素记

21

素记

格志

17

格志

Day One

Day One的字体问题来⾃自于本地化缓慢.⽤用户的抱怨集中在多样化字体只有英

Day One

43

22

格志⽤用户则没有提到多样化字体.

Day One

我们都知道写⼀一篇⽇日记很简单,但就是很难坚持下去。

13 素记

4

在当前的⼤大环境下,⼈人们越来越喜欢拍照了了,或者说,⼈人们在表达⾃自⼰己的时

写⽇日记的⼀一⼤大乐趣之⼀一便便是回忆,⽽而我在构思产品之初也是从帮助回忆的⻆角

候,都很乐意配上图⽚片.

度出发逐渐发散思维的.

素记不不⽀支持插图,⽤用户的反馈⽆无⼀一例例外希望加⼊入插图功能.

令我在意的是格志⽤用户提到的回忆功能,格志在⾸首⻚页设置了了⼀一个回忆功能

格志⽀支持⼀一次插⼊入5张图,⽤用户的反馈集中在格志的图⽚片展示⽅方式不不友好.

区,显示那⽉月今⽇日和那年年今⽇日.

Day One⽀支持⼀一次插⼊入10张图,极少量量⽤用户希望能插⼊入更更多图,更更多的⽤用户

此外,由于格志⾸首⻚页没有⽤用时间轴排列列⽇日记内容,所以回忆功能区⾥里里的⽇日记

则是抱怨插图过多会引起卡顿,数据同步损失,以及图⽂文排版问题.

内容便便成为了了⾸首⻚页内容焦点,强化了了回忆功能.

Day One

素记

问题下的⽇日记内容,增加主题背景,⾃自动获取天⽓气信息.

27 39

Day One:希望汉化完整,增加中⽂文字体选择,⽀支持录⾳音,记住常⽤用位置, 增加信纸,分享⽇日记到朋友圈,增加字数统计,插⼊入其他⾳音乐app歌曲,改

可⻅见产品定位影响着⽤用户使⽤用预期⼜又影响着⽤用户期望.当然⽤用户的意⻅见并不不是 都要听的.

三款竞品在时间轴设计上都存在着不不同程度上的不不⾜足。 Day One:信息密度过⼤大,没有针对中⽂文排版优化,导致信息识别较弱。

格志⽇日记

打开应⽤用

格志⽇日记:图⽚片展示效果不不友好,信息罗列列单⼀一,主次不不明显。

是否输⼊入密码

输⼊入密码

素记

素记:重复着便便签的设计思路路,没有针对⽇日记的使⽤用场景思考,偷懒了了。

进⼊入主⻚页

⼀一直以来,很多⽇日记产品都理理所当然地认为,打造⼀一个专注、舒适、便便捷 的写作环境极其重要。甚⾄至,格志⽇日记为了了解决⽤用户⽆无从下笔的普遍问 题,提供了了问答形式的解决⽅方案。嗯,我觉得OK。 但,⽤用户从⽇日记中获得 的愉悦感真的全部来⾃自记录的过程么?

点击新建⽇日记

写⼀一篇⽇日记吧!

格志:希望改进插图⽅方式,丰富编辑器器,增加定位功能,可以合并同⼀一格⼦子

21

善卡顿,增加新⼿手引导,增加⽹网⻚页端......

Day One

开始

产品的改进反馈和期望. 素记:希望增加插图功能,增加字体选择.希望保持简单.

44

格志

⽂文,不不⽀支持中⽂文艺术字体. 10

回顾

有不不少⽤用户会被字体打动乃⾄至留留存下去. 字体实际上是视觉设计⻛风格化的⼀一部分,但素记⽤用户在表达对字体喜爱之情

67

素记

备份

24

格志⽤用户希望增加定位功能,但⽤用户占⽐比太低,约3%.

42

好看

导出

除去称赞同步功能的评论,剩下的问题反馈集中在云端同步速度有时过慢以

占⽐比很低.

101

同步

11

进⼊入编辑⻚页

输⼊入⽂文字 输⼊入⽇日记 添加照⽚片 退出编辑⻚页

回到主⻚页

保存⽇日记

记录和回忆这两种⾏行行为是相互促进的良性循环过程。回忆的情感需求要求 ⽤用户写⽇日记,⽇日记写得越多,⽤用户拿来回忆的素材越多,⽽而⽤用户围绕回忆 ⼜又有了了更更强的记录动⼒力力。于是,习惯养成的陡峭曲线在这个循环过程中逐 渐被削平了了。回过头来看时间轴,就是保存回忆的地⽅方。

结束

找到切⼊入点:信息传达更更加直观、更更具情感的时间轴。

08 / 32


⽤用户访谈 我找来了了四位朋友,与他们聊了了聊“写⽇日记”这件事。

每天都写

经常会写

Bo 我现在都在⼿手机上写⽇日记,记⼀一些随想。 ⼿手机上写的都⽐比较短,习惯放进去⼏几张照⽚片。每次翻着⽇日记的⼀一张张照 ⽚片,我就能回想起当天的很多细节。这种体验可能是我⼀一直坚持写下去的 原因之⼀一。 我现在都⽤用 iOS ⾃自带的备忘录写,⽽而且写了了这么多,不不换了了。

偶尔会写

极少会写

Ping

Dong

Feng

我觉得写⽇日记就应该是⼀一件很简单的事,⽽而且不不⼀一定事⽆无巨细,要不不然很 难坚持下去。

相⽐比⼿手机,我在纸上写的更更多⼀一点。写的时候更更慢,⼀一笔⼀一画能留留出来想 的时间。⽤用⼿手机写也不不是不不爽,就总觉坚持不不下来。

很少写,最主要是每天⼀一堆事⼉儿,太忙,⽽而且重复性⼯工作居多。我还是认 为每天写点不不⼀一样的东⻄西有意思。可能将来我会继续写吧。

我还学过Markdown,但写的时候经常忘记⽤用,所以还是觉得更更直观的编辑 ⽅方式适合我。⽽而且⽤用过好⼏几种⽇日记应⽤用,功能太花哨的都卸载了了。

感觉就像往⼿手机⾥里里放点东⻄西就不不再管了了的感觉。

我⼀一般会记录点身边的事情,希望以后回顾的时候能像读⼀一本书⼀一样。

星期轴?可能是个好想法。

整理理访谈后,我标记了了这⼏几点。 优雅、美观地展示⽅方式更更能吸引⽤用户浏览⽇日记。

在第⼀一次访谈的结尾,我邀请这四位朋友每⼈人分享⼏几件值得写下来的事情。 我发现他们在描述时间的时候,很喜欢⽤用“上周”或者“上上周”这样的时间词 定语。时间再往前⼀一点,“⼏几周前”或者“上个⽉月”这样的说法就会更更多⼀一些。 我猜想,在⽤用户回忆的时候,星期的敏敏感度很⼤大程度上要⾼高于⽇日期。

功能轻量量化对中级⽤用户更更具吸引⼒力力。 Markdown 标记语法不不⼀一定适合⼤大部分⽤用户。 ⽤用户不不习惯在⼿手机上进⾏行行⻓长⽂文本编辑。 图⽚片能极⼤大地激发⽤用户情感。 ⾼高级⽤用户⼏几乎不不会更更换在⽤用产品。 时间轴需要从交互框架上重新设计。

第⼆二次访谈,我逐步验证了了这个猜想。只是在短时间跨度,前后两周内,星 期的敏敏感度要⾼高于⽇日期;时间跨度⻓长于两周且短于四周内时,星期与⽇日期在 ⽤用户的回忆中⼏几乎没有差别;更更⻓长的时间跨度以后,⽇日期开始作为⼀一种精准 的时间词定语近乎完全取代星期。

⽬目标⽤用户应该有这些特征。 写作频率介于“偶尔会写”与“经常会写”之间。

回过头看三款竞品的时间轴,⽆无⼀一例例外地将⽇日期作为第⼀一优先级时间词定

有兴趣尝试新鲜事物,但在接受度上有⾃自⼰己的舒适区。

语,弱化星期的级别。也许,这样的元素布局与⽤用户的回忆⼼心理理并不不契合。

有拍照、发动态的习惯,不不⻅见得⾼高频率,但不不排斥发声。 对繁琐、杂乱的事物持有低容忍度。

⾄至此,我从提问开始,对时间轴进⾏行行重构思考,逐渐勾勒勒出星期轴的形态。

⽇日常活动区域较为稳定。 ⽣生活节奏相对松弛,有⼀一定空闲时间。

09 / 32


⽤用户画像 每天都写

经常会写

偶尔会写

极少会写

Lili

喜欢简单⽣生活的普通⼥女女⼤大学⽣生 “有时候我仅仅需要记录⽇日常⽣生活的⼀一个简单⽅方式,想着哪天要是⽆无意间翻 到以前记下的琐事和想法,⼀一定会很有意思吧.”

每⽇日使⽤用应⽤用偏好

记录时间偏好 最低

最⾼高

动机

20:00-23:00 ⽹网易易云⾳音乐

VSCO

Medium

Pinterest

13:30-17:00

08:00-11:30

姓名:Lili

记录⽣生活,创造美好回忆。

年年龄:19岁 学校:天津科技⼤大学 学院:国际学院 年年级:⼤大⼆二

⽅方便便记录,帮助回忆

居住状态:6⼈人宿舍

舒晴的⼀一天通常是这样度过的:早晨七点起床,洗漱,吃早饭,去上课路路上兴 许会拍⼏几张照⽚片,中午吃过饭会刷⼀一刷朋友圈和Pinterest,之后稍作休息,下 午上课.吃过晚饭后⼀一般会去操场听歌散步,之后会去图书馆⾃自习,晚上回宿舍后 在熄灯前会整理理好明天要⽤用的物品和洗漱,熄灯之后,躺在床上会听⼀一会⼉儿 歌,脑袋想太多的话会拿出⼿手机写⼀一点东⻄西,⼤大多都是各种奇怪想法,通常在 ⼗十⼀一点半之前会睡着.课业时间之外在学习Python编程,总之很少待在宿舍.每 周⽇日下午会专⻔门留留出时间整理理⾃自⼰己的物品.每个⽉月会认真挑选⼀一部电影去电影院 看.最近共享单⻋车进⼊入校园后,舒晴会在天⽓气好的时候,或许去趟沙滩,或许去 看看夕阳.

熄灯时间:23:00 情感状态:单身

优先的关键特性 编辑器器(⽂文本样式,插图⽅方式,图⽂文排版)

需求

数据安全(数据云端同步,备份,导出格式,断点续写) ⽇日记展示(时间轴排列列,图⽂文排版) 回忆功能(那年年今⽇日,那⽉月今⽇日)

轻轻松松即可养成写⽇日记的习惯。

提醒机制(提醒时间,提醒⽂文案)

经过⼤大⼀一不不断尝鲜效率⼯工具⽽而⼜又⼤大多沦为鸡肋肋应⽤用后,她终于承认⾃自⼰己的⽇日常 ⽣生活其实很简单,没有那么多场景和任务去⽤用到那些强时间管理理的应⽤用. 舒晴每隔⼏几天会写⼀一点东⻄西,或是值得纪念的⼩小事抑或是奇奇怪怪的感想,想 起来的时候记⼀一下,就这种感觉,⽐比备忘录要深⼊入⼀一点,⼜又⽐比记笔记轻松许多. 对她来说,如果有⼀一款应⽤用能够让这些简单⽣生活记录起来随性舒服,并且排版 简单⼜又好看,是⾮非常棒的.

最⾼高⽬目标 舒晴想要轻松,容易易地记录⾃自⼰己的⽇日常琐事和随想,创造出与过往回忆不不期 ⽽而遇的惊喜感.

10 / 32


情景挖掘 Lili 会在什什么情景下使⽤用⽇日记应⽤用? 这个问题听起来有些宽泛,但我尝试着将这个问题情感化,提取出2个有代表 性的情景,探索其中的操作⽅方式。

Lili 和朋友们⼀一起去游乐园畅玩了了 ⼀一天,有好多趣事得记下来。

Lili 本想打开⽇日记写点什什么,结果 翻起了了以前写的⽇日记。

从过⼭山⻋车上下来,Lili 和朋友们坐在草坪旁边的⻓长椅上⾯面休息喝喝⽔水,这时她打

Lili 躺在床上,眼睛注视着⽇日记主⻚页⾥里里的时间轴,⼀一篇篇⽇日记在指尖滑动下⼀一

开 Coze ,想即刻记录点什什么。在打开相册要添加照⽚片时,Lili 发现⼀一位朋友

⼀一掠过眼前。滑到上上周六时,屏幕上的葡萄藤照⽚片让 Lili 想起那个不不算遥

竟然瘫在椅⼦子上迷迷糊糊地要睡着,朋友们⻅见此⼀一个个放下⽔水杯,要 Lili 抓

远的下午,奶奶让她回⽼老老家吃刚摘下的葡萄。葡萄有点酸,但她和奶奶说了了

拍了了下来这有趣的⼀一瞬间。随后,Lili 在⽇日记⾥里里打上了了时间戳,起身和朋友们

好⻓长好⻓长的话。此番想起去年年是不不是也写过回去吃葡萄了了呢?Lili 打开搜索

去玩另⼀一个项⽬目了了。

⻚页,想通过搜“葡萄”看能搜出些什什么,结果真的写过,只不不过是前年年写的。

记录场景下,Lili 可能有哪些需求?

浏览场景下,Lili 可能有哪些需求?

• 快速便便捷地添加⽇日记

• 时间轴沿周罗列列⽇日记

• ⽀支持添加多张照⽚片

• 连续性地浏览⽇日记,创造故事性的体验。

• 相册⻚页可以快速切换拍照模式

• 沉浸于每⼀一篇⽇日记

• ⽂文本编辑⽀支持时间戳

• 图⽂文混排展示⽇日记

• 记录照⽚片的地理理位置

• ⽇日记搜索⽀支持关键字

• 收藏⽇日记 • ⾃自动保存

11 / 32


体验地图 在依靠⽤用户画像资料料的前提下,模拟⽤用户 Lili 进⾏行行⽇日记应⽤用的⽇日常使⽤用。

• 可更更改⽂文本样式

• ⾃自动保存

• ⽅方式新颖

• ⽀支持字数统计

• 查找⽅方便便

• 导出TXT

• ⾃自动获取天⽓气

• 往⽇日回忆

• 导出PDF

• 天⽓气标签

• 条理理清晰

• 快速流畅

• 导出图⽚片

• 同步速度过慢

• 容易易误操作

• 反应卡顿

• 排版出错

• 密码验证

• ⽂文字⼊入⼝口&照⽚片⼊入⼝口

• 编辑⽅方式直观易易懂

• 看着舒服

• ⼊入⼝口明显

• ⽀支持多种字体

• ⽀支持添加多张照⽚片

• 界⾯面简洁

• ⼀一步到位

• ⽀支持撤销操作

• 导⼊入照⽚片地理理位置

• 图⽂文排版优雅

• 忘记密码

• 点击后需要再选择编辑⽅方式

• 多种字体需要内购

• 添加多张照⽚片引起卡顿

• ⽂文字输⼊入延迟

• 排版容易易混乱

• 照⽚片排版粗糙

• 数据丢失

• ⽇日记展示稠密

• 字体显示不不全

• 不不能添加照⽚片

• 仅本地保存数据

• 时间点不不清晰

情绪⾼高低的依据来⾃自设计调研前期所收集的信息,包括竞品分析与⽤用户评论。 尽管判断任务流程节点的重要性仍然难以摆脱感性的影响,但通过体验地图,可以为功能设计提供指导。

12 / 32


功能结构

功能还可以再精简吗? Coze ⽇日记若⼀一味地堆叠功能,极有可能增添⽤用户的认知负担,其结果就是 在交互体验和功能使⽤用上,都难以达到理理想效果。 因为对⽤用户⽽而⾔言,沿星期轴滑动浏览⽇日记是⼀一种新的交互体验(相对于市 场上绝⼤大部分⽇日记应⽤用来说)。重新设计的星期轴,不不同层级的跳转步 骤,都需要⽤用户去重新适应,尽管后续的可⽤用性测试表明⽤用户适应起来很 快,并且乐在其中,但与此同时,⽤用户的注意⼒力力重⼼心也借此放到了了交互⽅方 式上⾯面。⽽而注意⼒力力,是有限的。

调研阶段与迭代过程中删去的功能 • • • • • • • • • •

树洞洞 账户注册 地图定位 添加标签 照⽚片墙 添加视频 添加⾳音频 更更换信纸 更更换字体 天⽓气图示

此番想到⼀一个有趣但稍⽋欠恰当的类⽐比:《阿凡达》剧情可以复杂些吗?我想 不不是不不能,⽽而是在⾰革命性的电影技术加持下,观众的观影注意⼒力力⼏几乎都集中 在感官体验上⾯面,所以《阿凡达》的剧情不不能复杂化,不不然⼤大部分普通观众 可能会因为接收的信息量量过载转⽽而牺牲观影体验。 所以,如果该功能不不能为⽬目标⽤用户提供持续的积极体验,那么可以勇敢地舍 弃。思考这个问题能够⼀一步⼀一步让功能精简的边界变得清晰。

13 / 32


线框草图 部分草图迭代过程:

设计⽅方向确定

Coze 主⻚页⾯面

尝试⼀一次,第⼀一版视觉稿。 线框草图可为探索设计⽅方向带来巨⼤大便便利利。为此,我对界⾯面多次重新划 分,先⾃自⼰己感受合理理性,⽽而后找来⽤用户进⾏行行简易易的可⽤用性测试,⼀一起讨论 分析⻚页⾯面结构是否合理理,信息是否清晰。 前期对创意及⻚页⾯面结构的反复打磨,对后期的设计帮助很⼤大。即便便第⼀一版 视觉稿在细节上不不甚理理想,但将第⼀一版视觉稿与草图放在⼀一起后,我再次 确信,⽬目前的设计⽅方向值得继续推进。

14 / 32


主⻚页结构

周⽇日

时间顺序

未来⽇日期

未写⽇日记

8⽉月27⽇日

⼆二级浏览主⻚页 8⽉月20⽇日

同⼀一天

eg. 周⼆二

8⽉月13⽇日

周⼀一

8⽉月1⽇日

8⽉月7⽇日 8⽉月6⽇日

7⽉月30⽇日

Swipe

同⼀一天 7⽉月23⽇日

7⽉月16⽇日

展开说⼀一下。

⼀一级浏览主⻚页

在内容展示⽅方⾯面,采⽤用图⽂文混排设计,并且重点突出图⽚片,打破单⼀一节奏 的乏味感,让整个⻚页⾯面富有节奏感,创造出翻阅杂志的体验。单⻚页展示单 篇内容,帮助⽤用户更更轻松地聚焦内容,区分信息层级和主次。

15 / 32


信息架构

16 / 32


线框原型

Tap

3D Touch

Swipe

Swipe

主要任务路路径

Swipe

次要任务路路径 单击

9

10

11

12

13

14

3D Touch

上滑

左滑

右滑

注释

15

16

进⼊入今天⽇日记⻚页 添加今天的⽇日记 键⼊入关键字并搜索

周与周之间的过渡提示 Tap

选中⼀一个⽇日期

3DTap Touch

Swipe

3D Touch 预览⽇日记

浮出底栏添加⽇日记

搜索

搜索结果

⽇日历

⽇日历

3D Touch ⽇日历

主⻚页

主⻚页__纯⽂文字版

Tap Swipe

Tap 进⼊入搜索⻚页⾯面

进⼊入设置⻚页⾯面

1

2

3

退出相册⻚页

Tap

4

5

6

Tap

Tap

7

8

点击收藏⽇日记 ⾃自动保存并返回主⻚页

将照⽚片导⼊入⽇日记

相机取景框 下拉进⼊入拍照

Tap

保存并返回主⻚页

删除导⼊入的照⽚片 Tap Tap

将分割线与时间戳 结合

Swipe

Tap

进⼊入编辑器器

Tap

左右滑动以浏览⽇日记

向下滑出键盘以预览⽇日记

Tap

主⻚页

直接进⼊入相册

⽂文本编辑

⽂文本编辑

添加照⽚片

17

⽂文本编辑

⽂文本编辑

主⻚页

主⻚页

18

相⽐比线框草图,低保真线框原型已经可以进⾏行行较为细致的⽤用户测试了了。 不不过,更更多细节优化的任务需要交给⾼高保真视觉原型。

添加照⽚片__最多⽀支持5张照⽚片

⽂文本编辑__更更多

17 / 32


18 / 32


19 / 32


视觉⻛风格 圆⻆角 相对于其他类别的应⽤用,⽇日记应⽤用常附带私密属性。圆润、舒适、富有亲和 ⼒力力的视觉体验对获取⽤用户的信任感⾄至关重要。圆⻆角设计已经在很多应⽤用设计 中证明了了其具有绝佳的亲和⼒力力与⾃自然感。

⽆无框 ⽆无框,即极少甚⾄至没有分割线,运⽤用格式塔原理理与版⾯面设计规则将信息拉开 主次,借此展现层次感。保证信息可读性与 UI 控件易易⽤用性的同时,整体的布 局和框架仍然⼗十分容易易识别和操作,使得操作和内容都互不不影响。伴随⽆无框 设计⽽而来的常常是⼤大量量留留⽩白。

对称 设计坚持极简主义,为此我在 Pinterest以及Uplash 上查看了了⼤大量量极简主义 的作品。我发现,在⼤大量量留留⽩白的同时,极简主义也常有对称的意味。结合⽆无 框设计,精简的对称可以帮助⽤用户更更好地理理解交互框架并激发⽤用户探索使⽤用 的乐趣。

20 / 32


设计迭代 和⽤用户测试⼀一样,我挑出了了⼀一部分,将迭代过程进⾏行行了了整理理。

主⻚页

相册⻚页

2017-08-20

取消

全部照⽚片

58 %

今天

1

2

3

4

5

8⽉月

全部照⽚片

使⽤用

2017-08-20 星期⽇日

星期 9:41 AM

9:41 AM

2017

2017-08-20 星期⽇日

2017-08-20

⽇日历⻚页 GS

星期

编辑⻚页

100%

9:41 AM

100%

全部照⽚片

2017-08-20

2017-08-20 星期⽇日

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

⽤用户在选中2号后,⼼心理理默认操作是点击 常驻底栏进⼊入2号当天添加⽇日记,但常驻 底栏并没有刷新对应⽇日期,这给⽤用户带来 不不⼩小的困扰。失败的设计。

9⽉月

星期

全部照⽚片

⽇日

关于⼩小圆点:由于星期轴上的标签在视觉上呈 循环态,所以在⽤用户左右滑动浏览时,需要恰 到好处地展示周与周之间的过渡状态。⼩小圆点 正是为此⽽而⽣生。

北北宇治中学校,宇治市,京都府,⽇日本

⼀一

⼀一

⼆二

100%

9:41 AM

全部照⽚片

⼆二级星期轴的迭代思路路:最初的控件结构维持 不不 动 , 转 ⽽而 精 ⼼心 打 磨 视 觉 设 计 中 的 每 ⼀一 处 细 节。字体从宋体改为更更柔和也更更符合应⽤用视觉 ⻛风格的苹⽅方字体。在为当前星期⽇日增加按钮样 式后,明确当前焦点的位置,更更鲜明的指引⽤用 户点击,符合⽤用户的⼼心理理预期。

完成

完成

3

5

6

7

8

9

10

11

12

13

14

14

16

17

18

19

20

21

22

23

⽇日历⻚页⾯面的迭代思路路:早期的⽇日历⻚页如上。底栏是否常驻 是思考的重点。在⽤用户测试中,⽤用户常常想进⼊入其他⽇日期 添加⽇日记,此外,底栏与顶栏的“今天”存在功能重复。将 常驻底栏转换为随⽤用户点选⽇日期⽽而向上浮出。另外改进了了 视觉设计,⼒力力求带来更更好的体验。

卷纸落在地上滚了了⼀一⽶米 2

4

开始写⽇日记...

去⻝⾷食堂发现喜欢的菜卖光了了

1

3

洗脸⽔水溅在鞋上

帧动画示意图:

100%

9:41 AM

I 4 09:41

5

the

q w e

83字

a s d 09:41

r

t f

y u g h

2017

I’m

i j

⽇日

o p k

⼀一

⼆二

100%

9:41 AM

2017 ⽇日

⼀一

⼆二

l

83字

09:41

眼睫⽑毛进到眼睛⾥里里 刚挤的⽛牙膏掉到⽔水池⾥里里

去掉天⽓气标签的原因:在⽤用户回访中,我发现 闹铃在周末突然响起 天⽓气标签功能难以给⽤用户带来持续积极的使⽤用 体验,因为新鲜度很快就降下来了了。并且他们 告诉我,若某天的天⽓气留留下印象,他们更更喜欢 ⾃自⼰己⽤用⽂文字去描述⼀一下。所以,对于有些鸡肋肋 的天⽓气标签,应去掉。

83字

z x c v b n m

眼睫⽑毛进到眼睛⾥里里 刚挤的⽛牙膏掉到⽔水池⾥里里

123

写⼀一篇⽇日记吧! 闹铃在周末突然响起

space

return

开始写⽇日记... 开始写⽇日记... 写⼀一篇⽇日记吧!

预览

使⽤用

完成

21 / 32


⽤用户测试

100%

9:41 AM

2017-08-21

2017-08-28

⽇日

⼀一

⼆二

第三⼤大街,天津市,天津市,中国

快速浏览⻚页设计 ⽇日常之六⼗十五 17:26

因为⽤用户从线框草稿阶段即开始参与可⽤用性测试,所以测试的次数⾮非常多,有 简有繁。我从其中挑出了了两个测试,将迭代过程进⾏行行了了整理理。

246字

中午和⽂文博⼀一起吃了了饭,他跟我讲了了许多他 认识的很优秀的⼈人,也分享了了打⼯工做家教的 经历,很有意思。 返校的路路上,他步速明显⽐比来时放缓...

写⼀一篇⽇日记吧!

写⼀一篇⽇日记吧!

100%

9:41 AM

Tap

1. ⽤用户往前浏览了了很多⽇日记,现在想回到最新⼀一周,怎么做?

第三⼤大街,天津市,天津市,中国

进⼊入⼆二级浏览主⻚页

⽤用户在实际使⽤用中可能产⽣生各种使⽤用需求,所以在设计阶段都需要提供对应 的解决⽅方案。就像现在所问,实际上是⼀一个快速浏览的需求。

⽇日常之六⼗十五 17:26

246字

中午和⽂文博⼀一起吃了了饭,他跟我讲了了许多他 认识的很优秀的⼈人,也分享了了打⼯工做家教的 经历,很有意思。 返校的路路上,他步速明显⽐比来时放缓...

Tap 2017

⻰龙⻔门镇,洛洛阳市,河南省,中国

在⽅方案探索早期,⽤用户可通过单击星期轴标签⽽而跳转到最新⼀一周,但测试中 ⽤用户反馈跳转效果太突然,没有防备。然⽽而单击改为双击得到的反馈是,他 们不不知道要双击抑或想不不起来要双击。

合并 信息可以帮助⽤用户将视线更更好的聚焦于卡⽚片。为 此,我将⽇日期放置在卡⽚片右上⽅方,并增加年年与⽉月⽇日的字 号对⽐比,使得⽤用户只需扫视卡⽚片⼀一⻆角便便可知晓⽇日期,从 ⽽而专注于浏览内容。

Dbl-Tap

⽇日常之六⼗十五

3

3. 迭代过程

灵感来⾃自 iOS 11 App Store & Sketch ⽂文件存档回滚界⾯面

舍去 ⽆无关信息后,⻚页⾯面的沉浸感进⼀一步提升,但⽤用户

⽚片信息易易扫,突出重点,但⻚页⾯面整体沉浸感太弱。

其他时间

⽇日常之六⼗十五

9:41 AM

17:26

246字

⽇日常之六⼗十五

经历,很有意思。 返校的路路上,她步速明显⽐比来时放缓...

Tap

9:41 AM

17:26

246字

2017-08-14

中午和美绪⼀一起吃了了饭,她跟我讲了了许多她 认识的很优秀的⼈人,也分享了了打⼯工做家教的 经历,很有意思。

100%

返校的路路上,她步速明显⽐比来时放缓...

2017-08-14

中午和美绪⼀一起吃了了饭,她跟我讲了了许多她 认识的很优秀的⼈人,也分享了了打⼯工做家教的

中午和美绪⼀一起吃了了饭,她跟我讲了了许多她 认识的很优秀的⼈人,也分享了了打⼯工做家教的 经历,很有意思。 返校的路路上,她步速明显⽐比来时放缓...

⻰龙⻔门镇,洛洛阳市,河南省,中国

2017

08-14

经过可⽤用性测试发现,⽤用户在上下滑动浏览时,眼睛会 ⾃自然地专注在卡⽚片上⾯面,⽽而位于顶栏居中位置的⽇日期变 动,增加了了⽤用户将卡⽚片与⽇日期对应的⼯工作,严重⼲干扰主 线操作。

设计始终围绕⽤用户⽬目标⽽而开展,⽽而在快速返回⾄至最新⼀一 周⻚页⾯面这样的⽬目标下,添加⽇日记、搜索、设置以及其他 星期⽇日期对⽤用户来说,属于⽆无关信息,需要舍去。

最新⼀一周

246字

在操作的时候更更专注了了吗?结果并不不理理想。

内容 展示是设计早期关注的重点。配合留留⽩白,使得卡

Swipe

100%

9:41 AM

17:26

2. 解决⽅方案

提示⽤用户回到最新⼀一周。

08-14

2

Long Press

⻓长按星期标签 卡⽚片浏览⻚页快速滑动⾄至最新⼀一周

100%

⽇日期随着卡⽚片在⻚页⾯面的位置改变⽽而 变动,消耗了了⽤用户有限的注意⼒力力。

胡思乱想 15:14

573字

我意识到了了这⼀一点,突然脑⼦子⾥里里⾯面跟过幻灯 ⽚片⼀一样的。铁轨,⼤大雪,星空,宇宙,陨 ⽯石,飘落的樱花,庭院⾥里里⾯面的⾬雨⽔水,哭泣的 拥抱和回头看不不⻅见的⼈人,这些东⻄西都在...

⻰龙⻔门镇,洛洛阳市,河南省,中国

第三⼤大街,天津市,天津市,中国

Long Press

2017

08-07

⻰龙⻔门镇,洛洛阳市,河南省,中国

Swipe Tap

胡思乱想

1

15:14

胡思乱想 15:14

⼆二级浏览主⻚页

1

⼆二级浏览主⻚页

573字

573字

我意识到了了这⼀一点,突然脑⼦子⾥里里⾯面跟过幻灯 ⽚片⼀一样的。铁轨,⼤大雪,星空,宇宙,陨

胡思乱想 15:14

100%

9:41 AM

573字

我意识到了了这⼀一点,突然脑⼦子⾥里里⾯面跟过幻灯 ⽚片⼀一样的。铁轨,⼤大雪,星空,宇宙,陨 ⽯石,飘落的樱花,庭院⾥里里⾯面的⾬雨⽔水,哭泣的 拥抱和回头看不不⻅见的⼈人,这些东⻄西都在...

⽯石,飘落的樱花,庭院⾥里里⾯面的⾬雨⽔水,哭泣的 拥抱和回头看不不⻅见的⼈人,这些东⻄西都在... 第三⼤大街,天津市,天津市,中国

2017

08-07

我意识到了了这⼀一点,突然脑⼦子⾥里里⾯面跟过幻灯 ⽚片⼀一样的。铁轨,⼤大雪,星空,宇宙,陨 ⽯石,飘落的樱花,庭院⾥里里⾯面的⾬雨⽔水,哭泣的 拥抱和回头看不不⻅见的⼈人,这些东⻄西都在...

第三⼤大街,天津市,天津市,中国

为什什么不不吃早饭? 11:57

第三⼤大街,天津市,天津市,中国

写⼀一篇⽇日记吧!

143字

贾冲我告诉你 你…你 唉 明明上午会饿得肚⼦子咕咕叫,中午⼜又吃很…

第三⼤大街,天津市,天津市,中国

2017

07-31

22 / 32


⽤用户测试

搜索⻚页设计

搜索,⽤用户使⽤用频次不不⾼高,但作为⼀一款优质⽇日记应⽤用,其必备的功能。

GS

9:41 AM

58 %

搜索⽇日记

GS

58 %

全部

输⼊入关键字搜索⽇日记

收藏

全部

收藏

2017年年

9:41 AM

取消

搜索⽇日记

取消

收藏

9:41 AM

20 8⽉月

终...终于赶上樱花季了了

12 3⽉月

设计师的⽣生涯 最重要的就是保持对设计的热情,不不要被⽣生活的琐事所 磨灭,其次是要给⾃自⼰己不不断地创造⼀一些⾜足够困难但是...

1

眼睫⽑毛进到眼睛⾥里里…

终于赶上樱花季了

3

2 天⽓气

在看到落英缤纷的那⼀一刻,所有烦恼…

回忆

34篇

21篇

12篇

21 7⽉月

34篇

该天⽓气标签下收录了了34篇⽇日记。该模块在 后续的迭代中随天⽓气标签功能⼀一并去除。 5篇

13篇

3篇

5篇

13篇

回忆 2017年年

21 2⽉月

100%

9:41 AM

21 8⽉月

今天我什什么都不不想⼲干

在思考搜索⻚页设计时,我想起 主⻚页上有个“⼿手⽓气不不错”的按钮,帮助 ⽤用户直达最佳搜索结果的功能按钮。那么,Coze 的搜索⻚页能否在⼀一定程度 上,帮助⽤用户直接看到他们想看的⽇日记呢? 所以我在搜索⻚页上⾯面整合了了“收藏”、“天⽓气”、“回忆”模块。后⾯面删去了了“天 ⽓气”模块。 在设计探索阶段,图⽂文混排的设计⽅方案⼏几乎取⾃自微信朋友圈。虽然纯粹 是“玩⼼心使然”,不不过倒是为正式的设计迭代提供了了⼀一些指导。

⼲干嘛在躺着喂,⽆无聊就去学习啊魂淡!

那⽉月今⽇日

终...终于赶上樱花季了了

9:41 AM

取消

输⼊入关键字搜索⽇日记

我居然会垂钓?!

那年年今⽇日

2016年年

那⽉月今⽇日

全部

今天才发现⾃自⼰己竟是垂钓界的“天才”...

3篇

全部

2

那⽉月今⽇日

2017年年 12篇

终于赶上樱花季了了

26 3⽉月

在看到落英缤纷的那⼀一刻,所有烦恼…

天⽓气

21篇

全部

现在就想看的那篇⽇日记,可能⼀一进⼊入 搜索⻚页就看到了了。

⽇日常之六⼗十四

20 8⽉月

日常之六十四 眼睫⽑毛进到眼睛⾥里里…

12 1⽉月

取消

2017年年

2017年年

21 2⽉月

9999

100%

输⼊入关键字搜索⽇日记

100%

迭代思路路

取消

9999

灵感来⾃自 Pinterest 通知⻚页⾯面

在简洁中突出信息本身成为迭代的重⼼心。 统⼀一的卡⽚片设计,为信息归类与划分主次助⼒力力很⼤大。同时,圆⻆角设计也增添 4

了了质感,视觉上更更加舒适。这些都为了了使⽤用户在进⼊入搜索⻚页后,增加对模块

5 ⼀一篇⽇日记最多能导⼊入5张照⽚片,⽽而搜索⻚页⽇日 记 卡 ⽚片 务 必 要 能 展 示 全 部 照 ⽚片 数 量量 。 因 此,在未满载状态与满载状态下,照⽚片之 间的间距不不同。

2

化内容的关注度,减少⽆无效搜索。 ⽤用户测试在搜索⻚页设计迭代中,占的⽐比重并不不很⼤大,但仍旧提供了了⼀一些关键

2017

思路路。 去除⼩小蓝点、提⾼高信息区分度等这些改进点都出⾃自于⽤用户测试后的反馈。

23 / 32


Icon 设计

设置 icon

部分 icon 迭代过程:

主⻚页 icon

顶栏 icon

Icon 设计上采⽤用简洁的线性⻛风格。 粗线条与圆⻆角的搭配带给⽤用户舒适感与亲切感。

Icon 尺⼨寸 64px

64px 4px 36px 16px 64px

48px 4px

44px

10px

4px 4px

40px

64px

富⽂文本编辑 icon

44px 56px

信息类 icon

⻚页⾯面涉及的 icon

24 / 32


Logo 设计 设计迭代

字体 Venti CF

设计探索初期,试图通过图形映射应⽤用的⾸首⻚页结构。不不过,视觉效果稍显笨

⾊色彩

拙。

纯⽂文本怎样呢?简洁⼜又不不乏细节。等等,这样看起来⼜又有点像...时尚或者阅 读类应⽤用了了。 iTunes 512X512

抽象化概念值得尝试⼀一下。 将⾸首字⺟母 C 作为 logo 主轮廓,字⺟母 O 作为辅助轮廓,结成圆环。在时钟与 笔触这两种意象的交叠下,进⾏行行设计迭代。

确定概念初稿后,进⾏行行更更细致的设计迭代。

iPhone Retina

Spotlight Retina

Setting Retina

120X120

80X80

58X58

收尾阶段的优化集中在字⺟母 C 两个端点的圆⻆角修正以及各图形之间的⽐比例例调 整,使得 logo 整体兼具印刷感与轻快感。 ⾄至此,”A simple,dirty logo” 完成了了。严格来讲,该设计依旧存在很⼤大的优 化空间,甚⾄至,可以有更更好的概念⽅方向。但在有限的时间与设计资源下,

考虑到完整迭代图可能会带来视觉困扰,所以仅选取了了部分迭代图。

logo 设计⼯工作在此处收尾,是最优选择。

25 / 32


UI 控件 标注尺⼨寸

⾸首⻚页导航

编辑器器 9:41 AM

196px 40px

2017-08-20

9:41 AM

2017-08-20

color: #666666 100% opacity: 100% font-size: 36px font-face: Futura-Medium

48px 62px

132px

6px

输⼊入关键字搜索⽇日记

72px 26px

20px

取消

9:41 AM

取消 40px

82px

fill: #FFFFFF 100% opacity: 98% radius: 0px

116px

232px

116px

88px

750px

富⽂文本⼯工具栏

100%

fill: #F9F9F9 100% opacity: 100% radius: 36px

写⼀一篇⽇日记吧! 20px

相册 9:41 AM

⽂文字属性

fill: linear * #5AE0EF 100% * #57CBF9 100% opacity: 100%

26px

750px

40px

#666666 100% opacity: 100%

100%

2017-08-20 星期⽇日

22px

搜索

图形属性

⾸首⻚页底栏

100% 128px

标注间隔

color: #666666 100% opacity: 100% font-size: 36px font-face: PingFangSC-Medium

fill: #F9F9F9 100% opacity: 100% radius: 0px

100%

全部照⽚片

40px

64px

250px 88px

22px

750px

156px

572px

9:41 AM

100%

14px

26px

按下响应状态

22px

设计

取消

设计

color: #666666 100% opacity: 100% font-size: 32px font-face: PingFangSC-Regular

相册_展开

9:41 AM 9:41 AM

2017-08-20

100% 18px

全部照⽚片

⽇日历

100%

按下(press)响应状态时为50%透明度

88px

9:41 AM

100%

全部照⽚片

88px

40px

20px 20px

48px

⼈人物

按下(press)响应状态时 icon 样式改变 266px fill: #999999 100% opacity: 100%

视频

设置 9:41 AM

16pt 字体 fill: #666666 100% opacity: 100%

100%

设置

24pt 字体

⽇日记标签 60px

设置_导出

22:14

32px

279字

28pt 字体 132px

color: #555555 100% opacity: 100% font-size: 24px font-face: SFUIText-Regular

9:41 AM

100%

304px 114px

图⽚片

PDF

58px

fill: #57CBF9 100% opacity: 100% radius: 8px

26 / 32


UI 控件

部分 标注尺⼨寸

⼆二级主⻚页星期轴

color: #999999 100% opacity: 100% font-size: 36px font-face: PingFangSC-Semibold

搜索⻚页⽇日记卡⽚片

标注间隔

图形属性

相册⻚页照⽚片尺⼨寸与间距 10px

88px

58px

56px

⼀一

⼆二

fill: #F5F5F5 100% opacity: 100% radius: 28px

144px

color: #57CBF9 100% opacity: 100% font-size: 48px font-face: PingFangSC-Semibold

#5AE0EF

8px 22px

⼆二级主⻚页图⽚片

⾊色彩 #57CBF9

750px

fill: #FEFEFE 100% opacity: 98% radius: 0px

⽂文字属性

fill: #FFFFFF 100% opacity: 100% radius: 24px

102px

#333333

102px 24px

750px

1

#555555 224px

44px

#666666

20px

480px

#7A7A7A

224px

20px

604px

#BBBBBB

⽇日记导出卡⽚片 23px

12px

486px

235px 2017年年8⽉月20⽇日 星期⽇日

⽇日常之六⼗十四

⼀一级主⻚页星期轴

color: #666666 100% opacity: 100% font-size: 48px font-face: PingFangSC-Regular

color: #333333 100% opacity: 50% font-size: 72px font-face: PingFangSC-Semibold

眼睫⽑毛进到眼睛⾥里里

230px

color: #333333 100% opacity: 100% font-size: 88px font-face: PingFangSC-Semibold

fill: #BBBBBB 100% opacity: 100%

刚挤的⽛牙膏掉到⽔水池⾥里里

快速浏览⻚页⽇日记卡⽚片

闹铃在周末突然响起 09:41

552px

6px 6px

fill: #FFFFFF 100% opacity: 100% radius: 0px

⻰龙⻔门镇,洛洛阳市,河南省,中国

2017

08-14

北北宇治中学校,宇治市,京都府,⽇日本

⼀一级主⻚页图⽚片

984px 354px

646px

770px

52px 44px

去⻝⾷食堂发现喜欢的菜卖光了了 428px

胡思乱想 15:14

573字

fill: #FFFFFF 100% opacity: 100% radius: 28px shadow: outer * x, y - 0px, 32px * blur - 32px

我意识到了了这⼀一点,突然脑⼦子⾥里里⾯面跟过幻灯 radius: 24px

卷纸落在地上滚了了⼀一⽶米 洗脸⽔水溅在鞋上 视频缓冲条装死不不动 我今天碰⻅见了了你 哈哈开玩笑

⽚片⼀一样的。铁轨,⼤大雪,星空,宇宙,陨 ⽯石,飘落的樱花,庭院⾥里里⾯面的⾬雨⽔水,哭泣的 拥抱和回头看不不⻅见的⼈人,这些东⻄西都在...

27 / 32


Font 属性

虽说《iOS⼈人机交互指南》没有对中⽂文进⾏行行详细说明,但我参考了了 San Francisco(SF 字体)属性表,适当地调整了了字符的⼀一系列列属性。(Sketch 下)

28 / 32


29 / 32


30 / 32


结语 项⽬目之初的我,设想的设计流程是这样的: 筛选想法

敲 定 项 ⽬目

设计调研

设计探索

找 准 ⽅方 向

⽤用 户 测 试

设计迭代

视觉原型

设计探索

找 准 ⽅方 向

⽤用 户 测 试

设计迭代

视觉原型

现在的我,实际⾛走过的设计流程是这样的: 筛选想法

敲 定 项 ⽬目

设计调研

在实际设计过程中,各部分来回打磨次数远超图示效果。 ⼀一千次否定,只为⼀一次肯定。

31 / 32


This is it. 我 想 把 我 看 过 的 书 、 学 到 的 理理 论 、 听 过 的 ⽅方 法 ⼀一 个 个 糅 合 在 ⼀一 起 , 像 做 ⾯面 包 ⼀一 样 。 我 期 待 ⾃自 ⼰己 在 完 成 以 后 , 从 『 ⾯面 粉 』 到 『 酵 ⺟母 』 甚 ⾄至 到 『 温 度 』 , 都 能 有 ⾃自 ⼰己 真 切 的 认 知 与 看 法 。 由 浅 ⼊入 深 地 分 析 需 求 , 不不 断 优 化 交 互 逻 辑 , 邀 请 种 ⼦子 ⽤用 户 ( 就 是 我的朋友们)测试并收集反馈,反复推演与验证,持续打磨视觉 细 节 , 直 ⾄至 最 后 , 尽 全 ⼒力力 ⽤用 不不 那 么 枯 燥 的 语 ⾔言 去 描 述 这 段 设 计 旅 程。 以 上 这 些 , 是 我 感 到 充 实 与 快 乐 的 地 ⽅方 。

32 / the End


从选题到数据获取、清洗、整理理再到视觉素材以及图表布局,⼒力力求在真实 数据的基础下,⽤用清晰易易懂的图表,传达出影⽚片背后的数据故事。


影片信息

影片信息

前作《银翼杀手》于1982年上映

2019

2020

2022

2023

洛杉矶警察局重新动用连锁9型复制人的银翼杀手,找到

洛杉矶警察局重新动用连锁9型复制人的银翼杀手,找到

老型号的复制人并处决他们。

老型号的复制人并处决他们。

2025

2028

2030

2036

2042

B 2048

B


我聊了了聊具体的设计⼯工作以及为什什么要这样做。

贾冲 2017.11.09—11.13


流利利说是⼀一款英语⼝口语学习App,依靠⾃自主研发的实时 语⾳音评分技术,通过闯关游戏的形式,引导⽤用户开⼝口讲, 希望⽤用户不不知不不觉“流利利说”英语。

⾯面临的挑战

解决⽅方案

⽤用户粘性

助教服务

产品运营

游戏化设置 社区同伴激励

⽤用户特征 学习时⻓长

发展阶段 ⼯工具平台到⽤用户社区,最后往内容平台升级。

1

做免费的⼝口语练习⼯工具。

2

拓拓展移动端的英语学习社区。

3

做付费的产品和服务,切⼊入付费课程。

他们要找的⼈人 社交时⻓长

英语流利利说 App “眼睛⾥里里闪烁着渴望与好奇光芒的⼈人。” —— 王翌 初⾼高中学⽣生

⼤大学⽣生

上班族

当然,在专业⽔水准过关的前提下~

02/ 18


业务⽬目标 流利利说 的AI+教育模式已经在2017年年2⽉月实现盈利利。从 2013年年上线⾄至今,积累⽤用户5000万,其中付费⽤用户有60 万。付费课程为“懂你英语”与“懂你英语⽩白⾦金金版”,前者通 过应⽤用内提供课程内容学习,周期为⼀一个⽉月起跳;后者为 ⼀一对⼀一真⼈人上⻔门教学。在⽤用户⾃自发付费模式下,流利利说⾯面 对的是增量量市场,⽽而⾮非存量量市场。

作为⼀一名⽤用户,简单说说我的背景信息。

⽤用户⽬目标 提⾼高⼝口语能⼒力力 提⾼高⼝口语流利利度,纠正发⾳音,积累⼝口语单词量量。 养成练习⼝口语的习惯。

年年龄:20-23 设备:60% iPhone 40% MacBook 英语能⼒力力:CET-6 使⽤用时⻓长:1⼩小时左右,每周5天(懂你英语⽤用户) 需求:在轻松有趣的⽅方式下,锻炼⾃自⼰己的⼝口语能⼒力力,养成 练习⼝口语的习惯。

获取英⽂文知识 免费模式 加⼤大⼴广告投⼊入⼒力力度,扩增投放形式,线上引流,线下推⼴广 ——梳理理应⽤用内⼴广告热区分布,注重社交平台的运营。

付费模式

获得兴趣相关的英语语料料。 获得英⽂文学习的知识与技巧。 了了解⽂文化习俗。

那么,如何尽可能地到达⽤用户⽬目标和 业务⽬目标的最佳交叉点呢?

分享&社交

让⽤用户在应⽤用内停留留更更⻓长时间,进⼀一步开发付费意 愿,让⽤用户为结果付费。

与朋友分享⾃自⼰己学习的成果,获得成就感;分享⾃自⼰己学习 的经验,获得认同感。

加⼤大对内容的投⼊入,不不断更更新课程内容。懂你英语付 费⽤用户催促课程更更新的问题已经出现,Level 7 课程正 在 iPhone X 上公测。

结识兴趣形同的语伴。 记录⾃自身的学习过程。

03/ 18


? ??

提升 视觉 效果 降低视觉负担 聚焦内容 减少混乱

沉浸感

专注

温度

04/ 18

简单


在经历第 N 次不不断延伸⼜又折回的⻚页⾯面层级跳转后,我梳理理了了信息架构,把重复的部分 ⽤用蓝⾊色标注了了出来,看看有什什么新发现。

学习

流利利吧

排⾏行行榜

搜索

消息中⼼心

单词笔记

滚动横幅

设置

听⼒力力

圈⼦子

个⼈人主⻚页

⼝口语数据

说客

我的课程

视频

定级测试

精选⼝口语课

关注

完成的课程

热⻔门配⾳音课

推荐

赞过的帖⼦子

情景实战课 定制学

活动数据

兑换码

轻松学

账户充值

存在内容重合

05/ 18


⽤用户路路径

⽤用户⽬目标

学习

我的课程

选择⼀一个课程

⽤用最少的操作步骤即可开始学习

查看已添加的课程很容易易

在⼀一个界⾯面内预览所有课程

可以精准筛选出想学的课程

开始学习

不不⽤用离开当前界⾯面就能筛选

⽤用户痛点

设计机会

已添加课程列列表内容优先级不不明显

⼀一直往下翻,直到找出此刻想学的课程

我想要学习的课程埋没在⼤大量量已添加的课程中

我喜欢这⻔门课程,但是没法标记起来

梳理理优先级,建⽴立视觉层级对⽐比

在我的课程⾥里里可以轻松搜索

提供⼀一个有助于排列列已添加课程的过滤器器

提供⼀一个通过标签整理理已添加课程的⽅方式

06/ 18


添加课程 学习 ⽤用户路路径

⽤用户痛点

设计机会

搜索

热⻔门配⾳音课

流利利吧

⽤用户⽬目标

精选⼝口语课

选择⼀一个课程

开始学习

搜索

选择⼀一个课程

快速搜索

搜索结果中能找到想要的课程

查看搜索历史

发现相关的课程

在可能出现的众多结果中并 不不容易易找到想要的课程

不不清楚课程的具体名字

添加到我的课程列列表

这⻔门课程就这么埋没在我的 课程列列表中了了

可按照标签进⾏行行搜索

按照热度与难度进⾏行行课程排列列

我的课程⾥里里能直达搜索

关键词+模糊词搜索

⻓长按&3D Touch预览课程内容

提供⽅方便便的筛选器器

07/ 18


搜索 学习

流利利吧

学习

视与听

流利利吧

我的

排⾏行行榜

搜索

消息中⼼心

定制学

滚动横幅

圈⼦子

个⼈人主⻚页

单词笔记

滚动横幅

设置

我的课程

视频

关注

排⾏行行榜

听⼒力力

圈⼦子

个⼈人主⻚页

精选⼝口语课

听⼒力力

⼝口语数据

⼝口语数据

说客

热⻔门配⾳音课

说客

活动数据

我的课程

视频

定级测试

情景实战课

精选⼝口语课

关注

完成的课程

词汇课

热⻔门配⾳音课

推荐

赞过的帖⼦子

情景实战课 定制学

活动数据

存在内容重合

轻松学

定级测试 完成的课程

增加全局搜索,将词汇、课程、帖⼦子、⽤用户聚合在⼀一起

兑换码

轻松学

我的消息

我把分布在各个主Tab中的听⼒力力、视频、说客抽离出来,重新聚合 成“视与听”Tab

账户充值

将词语笔记改版,使之成为词汇课,列列⼊入轻松学课程模块中 将流利利吧中的滚动横幅转移到“视与听”中,减少与关注内容的重 复,使⼴广告与媒体共存,增加紧密性 将排⾏行行榜与⼝口语数据转移⾄至“我的”Tab,并且重新设计列列表样式, 提⾼高消息承载能⼒力力与辨识度

Old IA VS New IA 08/ 18

赞过的帖⼦子 设置 兑换码 账户充值


线框草图

线框原型 搜索课程、帖⼦子、⽤用户、词汇

轻松学

定制学

我的课程 XXXXXX

XXXXXX

XXXXXX

XXXXXX

视频

xx%

XX%

听⼒力力

说客

视频

说客

XXXX年年XX⽉月XX⽇日

XX%

XX%

听⼒力力

XXXXXXXXXXX XXXXX

XXXXXXXXXXXXXX XXXXXXXX

精选⼝口语课

XX:XX

XXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXX

XXXXXX

XXXXXX

XXXXXXX

流利利吧

我的

XXXXXX

XXXXX次播放

XXXXXXXX

XXXXXX

XXXX年年XX⽉月XX⽇日 XXXXXXXXXXXXXX XXXXX

X⼩小时前

XXXXXXXXXXXXXX XXXXX

热⻔门配⾳音课

学习

视与听

学习

学习

视与听

流利利吧

我的

学习

视与听_视频

关注

圈⼦子

关注

XXXXXXXXXXXXXXXXXXXXXXXXXX

发现

说客

圈⼦子

XXXX

XXXXX

成员 XX个

成员 XXX

XXXXXX

XXXX

成员 XXX个

成员 XXXX

订阅 XXXXXXX

热⻔门

我的

我的圈⼦子

X⼩小时前

听⼒力力

流利利吧

视与听_听⼒力力

XXXXX· XXXXXX

视频

视与听

热⻔门

XXXX

XXK

当前热⻔门

XXX

XXX

XXXX

XXXXX

XXXXX

XXXXX

X⽉月X⽇日

X⽉月X⽇日

X⽉月X⽇日

添加圈⼦子 XXXXX

XXX · XXXXXX

XXXXX · XXXX

XXXXXX

XXXX

XXXX

XXXXX 成员 XXXX个

XXXXXX

XXXXXX XXXXX 成员 XXXX 个

XXXX· XXX

XXXXXX

XX⼩小时前

成员 XXXXX 个

XXXXXXXXXXXXXXXXX

XXXXXXX 成员 265427

学习

视与听

流利利吧

视与听_说客

09/ 18

我的

学习

视与听

流利利吧

流利利吧_关注

我的

学习

视与听

流利利吧

流利利吧_圈⼦子

我的


情景实战课⼊入⼝口

中国移动

21:50

中国移动

58%

搜索课程、帖⼦子、⽤用户、词汇

轻松学

21:50

58%

搜索课程、帖⼦子、⽤用户、词汇

定制学

轻松学

定制学

我的课程 少年年时代

写作进⾏行行时

星际穿越

林林肯 爱乐之城

因为时间关系,在对⽐比稿中,我简单注释了了 界⾯面上⼀一些新按钮以及交互事项。

银翼杀⼿手2049 寻梦环游记

时空恋旅⼈人

熟记词汇课 56%

后⾯面我会把更更加深⼊入的设计过程以及详细的 界⾯面注释(可能还有动效视频)整理理成⼀一篇 ⽂文章,分享到知乎上⾯面。

84%

72%

90%

精选⼝口语课

考试

考研

让我们从⽤用户进⼊入应⽤用看到的第⼀一个界⾯面开 始吧。

四级

六级

⾼高考

中考

饮品

餐厨

经济

职场

兴趣

画室下午茶

美语思维

桑拿英语

你够专注吗?

⽔水果

调整课程顺序

热⻔门配⾳音课

学习

Before

VS

10/ 18

视与听

流利利吧

After

我的

学习

视与听

流利利吧

我的

词典笔记并⼊入轻松学,成为单词课。


我的课程 课程内容整理理⼊入⼝口 课程内容以列列表样式排列列 中国移动

21:50

58%

中国移动

21:50

我的课程

我的课程

搜索我的课程

⼝口语

21

配⾳音

36

58%

搜索我的课程

词汇

⼝口语

18

21

配⾳音

36

词汇

18

少年年时代

星际穿越

林林肯

少年年时代

星际穿越

林林肯

56%

72%

90%

56%

72%

90%

6/13

26/32

⽉月光男孩

敦刻尔克

15/18

6/13

26/32

⽉月光男孩

敦刻尔克

15/18

整理理 41%

8/20

地球脉动 II

16%

24/24

天才少⼥女女

2/9

降临

41%

8/20

Before

VS

11/ 18

After

24/24

查看已完成课程

地球脉动 II 天才少⼥女女 选择排序⽅方式

多选

⻓长按出现删除选项

16%

2/9

降临


视与听_视频

中国移动

21:50

58%

中国移动

21:50

58%

⼗十四天搞定发⾳音

⼗十四天搞定发⾳音

视频

听⼒力力

说客

好久没有读英文小说了, 今天一起开始吧!

05:53

视频

听⼒力力

J.K.罗琳⼜又写番外故事了了,这次她补充 了了哪些内容?

说客

不不是桂是假发

123056

3⼩小时前

05:53

J.K.罗琳⼜又写番外故事了了,这次她补充 了了哪些内容? 不不是桂是假发

123056

05:53

贾⽼老老板邀请⼤大卫.芬奇执导《Suit&Tie》 MV,这背后有什什么故事?

3⼩小时前

能年年⽝犬

学习

Before

VS

12/ 18

视与听

流利利吧

After

我的

学习

38094

视与听

⼀一天前

流利利吧

向上滑动,视频可显示区域扩⼤大,隐藏横幅⼴广告。

我的


视与听_听⼒力力 进⼊入听⼒力力播放器器界⾯面

中国移动

21:50

中国移动

58%

21:50

58%

⼗十四天搞定发⾳音 2017年年11⽉月10⽇日

座头鲸与⻁虎鲸存在合作关系? 地道英语

视频

听⼒力力

说客

2017年年11⽉月10⽇日 座头鲸与⻁虎鲸存在合作 关系?

[What’s Up]还记得字 ⺟母歌吗?

What’s Up

地道英语

字幕 2017年年11⽉月09⽇日 听英语听到忘了了时间忘 了了我~

学习

Before

VS

视与听

04:32

⼜又有罢⼯工游⾏行行了了,这次 是德国。

流利利吧

17:24

我的

After

Before

13/ 18

VS

After


视与听_说客

中国移动

21:50

58%

⼗十四天搞定发⾳音

“我想吃,想爱,还想在一瞬间变成 天上忽明忽暗的云 这句话用英语怎么说 (●゚ω゚●)

视频

听⼒力力 发现

热⻔门

理理性派

银桑

不不是桂是假发

听写练习室

11⽉月9⽇日

11⽉月8⽇日

11⽉月8⽇日

学习

14/ 18

热⻔门

听海海电台

聚焦⼝口语

VS

点击切换⽂文本标签

订阅

聚焦⼝口语

眺望电台

Before

说客

⼀一天

Aimer

听海海电台 视与听

听写练习室 流利利吧

After

我的

滑动切换顶部Tab ⽽而⾮非说客内容


我的

中国移动

21:50

58%

搜索我的课程

贾冲

排⾏行行榜

流利利号:23910857 配⾳音

录⾳音

帖⼦子

订阅

8

23

12

46

⼝口语⼒力力 · 累计打卡 1 天

打卡

我的信息

1

英⽂文⽔水平定级测试

Lv 3 初级

已完成的课程 我赞过的帖⼦子 兑换码 账号充值 ⾦金金币兑换 学习

Before

VS

15/ 18

特权专区

视与听

流利利吧

After

我的


关注+热⻔门推荐

中国移动

21:50

58%

发帖

我会成为你的眼睛和双⼿手

关注

圈⼦子

Gakki的微笑 · ⼤大学⽣生优选 2⼩小时前

还记得第⼀一次⽤用英⽂文交流的⼼心情吗?

24683

594

1.6 K

当前热⻔门 康妮 · ⼤大学⽣生优选

不不是桂是假发 · 学单词

⾏行行⾛走的⼒力力量量

万圣节你想好 Cos 装了了

能年年⽝犬 · 围炉夜谈 3⼩小时前

你坚持过最⻓长时间的⼀一件事是什什么? 学习

Before

VS

16/ 18

视与听

流利利吧

After

我的

数据标签仅预览,不不可点击


圈⼦子

中国移动

21:50

58%

发帖

我会成为你的眼睛和双⼿手

关注

圈⼦子

我的圈⼦子 仰望星空

很⾼高兴⻅见到你

成员 2732

成员 75755

Rock&Roll

旧时光

成员 183681

成员 6829

滑动浏览我的圈⼦子

创建圈⼦子

添加圈⼦子 热⻔门推荐

练课闯关

⼝口语练习

⽣生活娱乐

滑动浏览标签

赏点好建议 成员 954855

新鲜事

切换内容需要点击标签

成员 1593491

新⼿手看这⾥里里 成员 762376

叫我第⼀一名 成员 265427 学习

Before

VS

17/ 18

视与听

流利利吧

After

我的


我渴望⼀一个机会

对我来说, ⽤用户体验设计绝不不⽌止于愉悦感。 作为⼀一名设计师,当⼈人们喜欢我的想法的时候,我会有巨⼤大的满⾜足感,更更不不⽤用说参与到5000万⽤用户 喜爱的产品设计中,幸福感油然⽽而⽣生。 我喜欢UI/UX,多学科背景可以完美融⼊入,汇聚⼀一点;我喜欢⽤用理理科的思维结合设计⽅方法论来应对挑 战,这让我能够快速分析和解决⽤用户体验问题;我喜欢结合⾃自身的美学品味与⽣生活经历,创造出让⼈人⼀一 ⻅见钟情的优雅体验。

我是⼀一名能量量型的设计师,⽆无论是性格还是设计思维乃⾄至写作⻛风格都是如此。我对⾃自⼰己的设计产物有 近乎完美主义的品控要求,近乎即认真但不不偏执。 ⼀一路路坚持到现在,诚意⾃自不不必多说。作品,是我的实⼒力力,所以真诚地希望能给⼀一个机会,实习也⾏行行。 最后 为创造出优秀产品的 LiuLiShuoers 致敬!

贾冲 / 18301472118 / ux_chong@163.com

the End

贾冲—交互设计岗—作品集  

For job

贾冲—交互设计岗—作品集  

For job

Advertisement