項目背景
qbb是一款為家庭提供寶寶成長記錄空間的工具app矢赁，用戶在寶寶成長過程中稿静，會遇到各種育兒難題蛮浑。育兒6.0脫胎于原app中的育兒助手模塊迎献，結(jié)合自有千萬級用戶寶寶信息大數(shù)據(jù)达舒，為用戶提供精準(zhǔn)值朋、高效、專業(yè)的育兒內(nèi)容巩搏。而親子任務(wù)和育兒測評模塊作為原先育兒助手中的重要功能昨登，在加強用戶感知方面起到重要作用，因此這2個模塊成為育兒首頁中靠前顯示的重要模塊贯底。
育兒模塊的目標(biāo)是成為用戶貼心的智能育兒助手丰辣，其中親子任務(wù)模塊希望能夠與用戶產(chǎn)生互動、通過不同寶寶發(fā)育時段的不同任務(wù)引導(dǎo)用戶建立良好的親子關(guān)系，從而與育兒模塊建立粘性糯俗，提高育兒模塊瀏覽量尿褪。
親子任務(wù)一期上線時新版育兒還未上線，采用通過育兒助手對話推送的方式向用戶推薦任務(wù)得湘。育兒6.0設(shè)計過程中杖玲，將親子任務(wù)模塊獨立出來，并置于育兒內(nèi)容時間軸中淘正，二期設(shè)計過程中對任務(wù)流程進行了優(yōu)化摆马，提升用戶完成任務(wù)的感知。
設(shè)計目標(biāo)
建立用戶感知鸿吆，引導(dǎo)用戶主動完成任務(wù)
一期設(shè)計
需求分析
一期親子任務(wù)模塊只是育兒助手bate版本的嘗試囤采，產(chǎn)品和設(shè)計溝通了大概的需求，即主動推送任務(wù)惩淳、瀏覽任務(wù)蕉毯、完成任務(wù)的模式，隨后設(shè)計直接開始設(shè)計工作思犁。
育兒助手對話推送?
簡要展示任務(wù)內(nèi)容及完成狀態(tài)代虾，引導(dǎo)用戶查看親子任務(wù)
任務(wù)詳情
信息傳達明確直觀，用戶可以快速獲取任務(wù)內(nèi)容激蹲，突出任務(wù)按鈕棉磨，完成任務(wù)后給予成功反饋
歷史任務(wù)列表
清晰直觀展示不同時間對應(yīng)任務(wù)及任務(wù)狀態(tài)
界面設(shè)計
明確需求后確定頁面構(gòu)成 任務(wù)詳情 任務(wù)完成提示? 任務(wù)列表
任務(wù)詳情
由于任務(wù)推送每次會推送多條任務(wù)，而任務(wù)之間相互獨立学辱，并且希望用戶瀏覽時能聚焦單個任務(wù)內(nèi)容乘瓤，因此確定采用可以左右滑動切換的單屏卡片形式。
任務(wù)列表
以時間段劃分策泣，不同時間段對應(yīng)多條任務(wù)衙傀，單條任務(wù)相互獨立并且可以點擊，因此將單條任務(wù)用模塊分割着降，增強獨立性明確操作邊界差油。時段劃分采用時間軸形式，便于時間瀏覽任洞，歷史任務(wù)的劃分視覺上更連貫蓄喇。
視覺設(shè)計
考慮到親子任務(wù)模塊和育兒助手及app的視覺一致性，以及親子任務(wù)內(nèi)容上的專業(yè)性交掏，設(shè)計上突出內(nèi)容妆偏、簡潔明確、不增加過多的氣氛元素盅弛。任務(wù)詳情和任務(wù)列表卡片采用投影形式與背景區(qū)分钱骂，背景填充淡灰色以讓視覺進一步聚焦卡片叔锐。卡片內(nèi)容采用較大字號突出內(nèi)容见秽，可操作元素愉烙、狀態(tài)指示元素采用黃色和內(nèi)容區(qū)分。
遇到問題
上線前UI走查中發(fā)現(xiàn)任務(wù)詳情卡片因為沒有單獨對pad解取、plus進行適配步责，顯示效果很不理想。分析設(shè)計圖可知禀苦，由于卡片形式單屏占比較大蔓肯，需要文字以較大字號才能讓內(nèi)容視覺舒適。而pad振乏、plus因為屏幕較大蔗包，需要對字號在正常適配基礎(chǔ)上再增加數(shù)個字號才能保證舒適的效果。因此后面的設(shè)計中如果遇到單屏文字較少的情況都需要特別留心大屏顯示效果慧邮，以保證顯示效果正常调限。
二期設(shè)計
需求分析
育兒確定改版后，親子任務(wù)模塊由原先的對話推送改為首頁展示模塊赋咽。新的親子任務(wù)直接可以讓用戶看到對應(yīng)的任務(wù)卡片旧噪，因此整個完成任務(wù)流程也有了較大變化。
一期親子任務(wù)問題
完成任務(wù)流程較長脓匿，用戶需要點擊推送模塊-任務(wù)詳情卡片-點擊完成按鈕完成任務(wù)操作
任務(wù)吸引力弱，推送內(nèi)容只有任務(wù)而沒有任務(wù)目的宦赠，用戶缺少完成任務(wù)的動機
完成任務(wù)反饋弱陪毡，用戶完成任務(wù)只有成功彈窗提示，用戶參與感底
二期設(shè)計目標(biāo)
通過親子任務(wù)一期的用戶反饋及數(shù)據(jù)分析勾扭，二期希望通過縮短任務(wù)操作流程毡琉、提高任務(wù)吸引力、強化任務(wù)反饋這3個關(guān)鍵點對模塊進行優(yōu)化設(shè)計妙色。
育兒首頁親子任務(wù)模塊
直接展示親子任務(wù)卡片內(nèi)容桅滋，縮減內(nèi)容層級
增加任務(wù)作用分類，讓用戶首先感知任務(wù)作用身辨，提升用戶完成任務(wù)動機
增加配圖吸引用戶丐谋，通過完成任務(wù)前和任務(wù)后的鮮明區(qū)別給予強反饋
將完成任務(wù)按鈕改成打卡，降低心智門檻
育兒首頁任務(wù)詳情卡片
采用模態(tài)彈窗卡片形式煌珊， 從感知上減小頁面層級感号俐，增加流程連貫性
初期設(shè)計版本卡片彈窗是可以左右滑動瀏覽的，以增加用戶瀏覽任務(wù)的效率定庵，但由于任務(wù)卡片刷新機制的顯示吏饿，最終設(shè)計取消了滑動卡片的功能
完成任務(wù)頁面
由原先彈窗變?yōu)槟B(tài)完成頁面踪危，通過顯著文字和獎杯圖形給予用戶鼓勵和獎勵感，強化打卡成功反饋
增加”多少人已打卡”和用戶頭像信息猪落，讓用戶感覺有很多人在參與贞远，提升任務(wù)參與熱度認知
增加完成后感受，加強與用戶互動性
驗證反饋
首頁卡片點擊率笨忌、任務(wù)詳情任務(wù)完成率兴革、任務(wù)完成頁面完成后感受打分比率
遇到問題
點擊任務(wù)詳情卡片后是底部呼出完成任務(wù)模態(tài)頁面，無法返回操作蜜唾，必須點擊完成才能回到首頁杂曲。這里的交互引起了產(chǎn)品的質(zhì)疑，即在彈窗操作后發(fā)起全屏模態(tài)層是否是正確的交互模式袁余？
打卡完成頁面擎勘，采用了滑塊的形式讓用戶發(fā)表完成后的心情，很多人對這種控件形式表示質(zhì)疑颖榜，認為這種控件形式很難讓人產(chǎn)生點擊操作的動機
親子任務(wù)二期是在一期的基礎(chǔ)上進行設(shè)計棚饵，更多任務(wù)列表和任務(wù)列表中的任務(wù)詳情卡片的設(shè)計沒有改變。而一期由于其所處的老版育兒助手模塊而定義的簡約偏內(nèi)容的視覺風(fēng)格掩完，和育兒6.0相對豐富的整體調(diào)性不太符合噪漾。
打卡詳情卡片關(guān)閉按鈕放在左上角是否合適
