育儿-任务项目设计总结

项目背景

qbb是一款为家庭提供宝宝成长记录空间的工具app,用户在宝宝成长过程中,会遇到各种育儿难题。育儿6.0脱胎于原app中的育儿助手模块,结合自有千万级用户宝宝信息大数据,为用户提供精准、高效、专业的育儿内容。而亲子任务和育儿测评模块作为原先育儿助手中的重要功能,在加强用户感知方面起到重要作用,因此这2个模块成为育儿首页中靠前显示的重要模块。

育儿模块的目标是成为用户贴心的智能育儿助手,其中亲子任务模块希望能够与用户产生互动、通过不同宝宝发育时段的不同任务引导用户建立良好的亲子关系,从而与育儿模块建立粘性,提高育儿模块浏览量。

亲子任务一期上线时新版育儿还未上线,采用通过育儿助手对话推送的方式向用户推荐任务。育儿6.0设计过程中,将亲子任务模块独立出来,并置于育儿内容时间轴中,二期设计过程中对任务流程进行了优化,提升用户完成任务的感知。

设计目标

建立用户感知,引导用户主动完成任务

一期设计

需求分析

一期亲子任务模块只是育儿助手bate版本的尝试,产品和设计沟通了大概的需求,即主动推送任务、浏览任务、完成任务的模式,随后设计直接开始设计工作。

育儿助手对话推送 

简要展示任务内容及完成状态,引导用户查看亲子任务

任务详情

信息传达明确直观,用户可以快速获取任务内容,突出任务按钮,完成任务后给予成功反馈

历史任务列表

清晰直观展示不同时间对应任务及任务状态

界面设计

明确需求后确定页面构成 任务详情 任务完成提示  任务列表

任务详情

由于任务推送每次会推送多条任务,而任务之间相互独立,并且希望用户浏览时能聚焦单个任务内容,因此确定采用可以左右滑动切换的单屏卡片形式。

任务列表

以时间段划分,不同时间段对应多条任务,单条任务相互独立并且可以点击,因此将单条任务用模块分割,增强独立性明确操作边界。时段划分采用时间轴形式,便于时间浏览,历史任务的划分视觉上更连贯。

视觉设计

考虑到亲子任务模块和育儿助手及app的视觉一致性,以及亲子任务内容上的专业性,设计上突出内容、简洁明确、不增加过多的气氛元素。任务详情和任务列表卡片采用投影形式与背景区分,背景填充淡灰色以让视觉进一步聚焦卡片。卡片内容采用较大字号突出内容,可操作元素、状态指示元素采用黄色和内容区分。

遇到问题


上线前UI走查中发现任务详情卡片因为没有单独对pad、plus进行适配,显示效果很不理想。分析设计图可知,由于卡片形式单屏占比较大,需要文字以较大字号才能让内容视觉舒适。而pad、plus因为屏幕较大,需要对字号在正常适配基础上再增加数个字号才能保证舒适的效果。因此后面的设计中如果遇到单屏文字较少的情况都需要特别留心大屏显示效果,以保证显示效果正常。

二期设计

需求分析

育儿确定改版后,亲子任务模块由原先的对话推送改为首页展示模块。新的亲子任务直接可以让用户看到对应的任务卡片,因此整个完成任务流程也有了较大变化。

一期亲子任务问题

完成任务流程较长,用户需要点击推送模块-任务详情卡片-点击完成按钮完成任务操作

任务吸引力弱,推送内容只有任务而没有任务目的,用户缺少完成任务的动机

完成任务反馈弱,用户完成任务只有成功弹窗提示,用户参与感底

二期设计目标


通过亲子任务一期的用户反馈及数据分析,二期希望通过缩短任务操作流程、提高任务吸引力、强化任务反馈这3个关键点对模块进行优化设计。

育儿首页亲子任务模块

直接展示亲子任务卡片内容,缩减内容层级

增加任务作用分类,让用户首先感知任务作用,提升用户完成任务动机

增加配图吸引用户,通过完成任务前和任务后的鲜明区别给予强反馈

将完成任务按钮改成打卡,降低心智门槛

育儿首页任务详情卡片

采用模态弹窗卡片形式, 从感知上减小页面层级感,增加流程连贯性

初期设计版本卡片弹窗是可以左右滑动浏览的,以增加用户浏览任务的效率,但由于任务卡片刷新机制的显示,最终设计取消了滑动卡片的功能

完成任务页面

由原先弹窗变为模态完成页面,通过显著文字和奖杯图形给予用户鼓励和奖励感,强化打卡成功反馈

增加”多少人已打卡”和用户头像信息,让用户感觉有很多人在参与,提升任务参与热度认知

增加完成后感受,加强与用户互动性

验证反馈

首页卡片点击率、任务详情任务完成率、任务完成页面完成后感受打分比率

遇到问题

点击任务详情卡片后是底部呼出完成任务模态页面,无法返回操作,必须点击完成才能回到首页。这里的交互引起了产品的质疑,即在弹窗操作后发起全屏模态层是否是正确的交互模式?

打卡完成页面,采用了滑块的形式让用户发表完成后的心情,很多人对这种控件形式表示质疑,认为这种控件形式很难让人产生点击操作的动机

亲子任务二期是在一期的基础上进行设计,更多任务列表和任务列表中的任务详情卡片的设计没有改变。而一期由于其所处的老版育儿助手模块而定义的简约偏内容的视觉风格,和育儿6.0相对丰富的整体调性不太符合。

打卡详情卡片关闭按钮放在左上角是否合适

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,277评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,777评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,946评论 0 245
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,271评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,636评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,767评论 1 221
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,989评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,733评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,457评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,674评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,155评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,518评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,160评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,114评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,898评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,822评论 2 280
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,705评论 2 273

推荐阅读更多精彩内容