项目背景

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

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

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

设计目标

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

一期设计

需求分析

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

育儿助手对话推送 

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

任务详情

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

历史任务列表

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

界面设计

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

任务详情

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

任务列表

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

视觉设计

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

遇到问题

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

二期设计

需求分析

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

一期亲子任务问题

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

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

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

二期设计目标

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

育儿首页亲子任务模块

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

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

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

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

育儿首页任务详情卡片

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

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

完成任务页面

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

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

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

验证反馈

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

遇到问题

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

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

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

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