習慣養成APP的交互設計&視覺設計

“學樹”（Habitree）是9月時從交互設計到UI設計獨立完成的一個個人項目，也是第一次挑戰時間管理類應用這個有趣的領域。雖然最終因為種種原因很遺憾沒有順利地交付開發和實際上線，但設計階段還是已經有一個相對完整的階段性成果的，在此分享給大家。

好的習慣，像一棵小樹，有破土而出時，帶著未知和青澀的期待，也有經歷春夏的風雨后，熬成滿樹金黃，沉甸甸的喜悅，改變自己，從一個小習慣開始。

學樹是一款專注監督和激勵的習慣育成APP?；诩兪烊松缃?，學樹提供了有趣的“監督+獎懲”雙重激勵機制，邀請你的密友或父母擔任監督人，沒有按時打卡要支付小小的懲金哦。與親友見證彼此成長的同時，也成為分享日常點滴的紐帶，針對積極向上、渴望通過日積月累的好習慣改變自己的你，一定會喜歡上這片樹林的。：）

本文將先展示最終的UI設計稿，同時相當于一個產品功能的概覽和最終實現效果的簡介。需求分析報告和交互設計文檔放在后面，有興趣的朋友可以各取所需。

注：所有圖片的原始分辨率都較大，小圖看不清可以戳大圖。

1 交互設計概述

1.1 產品目標

養成一個好的習慣，或者堅持做一件對自己有益的事情，都意味著對自己現有生活方式的改變。無論目標多么鼓舞人心，堅持之初總數一個伴隨著痛苦的過程，全憑自覺和自制力或許是最好的，但并不是每個人在決心改變之初都做得到。而他人的監督，或者社交、獎懲的壓力等外力，則可以有效地彌補單純依靠“內力“的不足，幫助我們更好地堅持下去。

這一產品目標將覆蓋關注自我提升、自我管理的用戶群體，不但覆蓋面廣，這個群體特有的積極向上、追求更好的自己等特質，更讓產品擁有很多領域都難以媲美的用戶質量。

市面上雖然已有較多習慣育成類APP，但實際上并沒有任何一者能夠有效地在市場中占據統治級的地位。因此，可以認為具備自己特色的優質應用很容易在這樣一個群雄逐鹿的市場中找到立足空間。此外，作為一個核心需求單一、流程短小清晰的工具類應用，起步門檻較低也是這一選題的優勢之一。

綜上所述，本項目將以“引入監督和獎懲的習慣育成“為主題，完成一款習慣育成類APP產品的交互設計，內容集中在統計和分享運動量方面。

1.2 關鍵詞分解

2 問卷/訪談調研

2.1 問卷設計

2.2 調研結論

經線下問卷調研，共回收問卷47份，其中符合目標用戶條件的（即近期有在堅持培養新習慣，或有意嘗試培養新習慣的）的29人次，根據這部分問卷，可得出以下分析結果：

1、是否有意培養新習慣與學歷、在職與否都并無明顯的關聯。

意義：可見產品的目標人群并不受學歷、在職與否的限制，僅與用戶的生活態度、上進心和自我管理意愿有關。

2、在全部有意培養新習慣的受訪者中，只有23%選擇了“有意學習一項新的愛好/技能”，舉例中提及較多的是繪畫和烹飪，其中43%認為目前的學習效果不夠理想（打分低于5）。

意義：可見目標用戶中，較多用戶只是希望在現有能力范圍內培養更好的生活習慣，但希望通過日積月累的練習學習新技能的用戶的需求仍然不容忽視?？梢娪脩魞H通過自制力，或通過市面已有產品堅持學習新技能的效果不夠理想。

3、近期在堅持的新習慣中，作息類（早睡、早起等）、健身類（跑步、深蹲等）、學習類（背單詞、閱讀燈）、戒除類（不良飲食、不良習慣）已幾乎可以涵蓋常見的習慣類型。受訪者中65%認為習慣的培養效果不夠理想（打分低于5）。

意義：可在為用戶提供默認的習慣類型時提供參考?？梢娪脩魞H通過自制力，或通過市面已有產品進行習慣培養的效果不夠理想。

4、受訪者對自我管理類工具或方法的了解來源中，知乎（39%）和豆瓣（26%）已占據過半。

意義：可見這兩個與目標用戶人群的社會身份更相符的內容平臺，在自我管理工具和方法的傳播推廣中占據了重要地位，這對產品的推廣渠道極具指導意義。

5、當前市面上的習慣管理類APP（含相近功能的自我管理APP）在受訪者中的使用分布非常分散，其中種子習慣和微習慣相對集中。多數受訪者都有嘗試使用多個同類產品的經歷。

意義：說明雖然市面上同類產品眾多，但并沒有任何一款產品占據較有分量的市場份額，用戶在多個產品之間逐一嘗試也說明用戶并不滿意當前產品對其習慣養成的實際效果，沒有形成有效的粘度。

6、受訪者最關注習慣養成類APP的功能仍然是與核心需求相關的習慣規則的設置、提醒功能以及統計功能。

意義：APP的首要任務仍然是解決用戶的核心需求——習慣育成。

7、幾乎所有受訪者在“最希望習慣養成類APP記錄的數據”這一問題中，都勾選了堅持的天數、堅持率、簽到時輸入文字的歷史記錄、上傳的圖片歷史記錄、堅持天數的里程碑等全部選項，可見對于用戶而言，與養成記錄息息相關的各類數據的記錄應當盡可能詳細。

8、77%的受訪者有意愿在朋友圈、微博等平臺分享自己的積累成果。

9、與”最關注習慣養成類APP的功能”這一問題不同的是，在“最有可能吸引你開始嘗試使用習慣養成類APP的功能”這一問題中，61%的受訪者選中了“獎懲功能”。

意義：可見獎懲功能在眾多競品同質化嚴重的情況下對新用戶非常具有吸引力。

10、90% 受訪者認為引入金錢獎懲是否有助于堅持一個習慣，同時84%的受訪者認為引入朋友或親人的監督有助于堅持一個習慣。

意義：證明將金錢獎懲和監督引入習慣育成體系具有可行性。

11、受訪者普遍更希望由朋友來監督自己的習慣養成，同時也有32%的受訪者選中了父母，這一數字高于設計問卷時我的猜測。在補充提問中，這部分受訪者選擇父母的主要原因是離家在外求學或工作中，并不排斥向父母展現自己的生活狀態，甚至可以在遠離父母身邊的情況下一個很好的交流切入點，也同時向父母展示了自己上進、積極的一面。而選擇其他親人和陌生網友的則較少，這與當前眾多競品主打陌生人社交的現狀相悖，可以猜測這或許是當前幾乎所有競品都沒有形成可觀的用戶粘度的原因之一。而在引入金錢獎懲的情況下，熟悉的朋友或父母的優勢進一步得到體現，因為懲金由熟悉的朋友或父母收取會可以大大降低用戶因財產損失造成的不安。

意義：考慮完全摒棄陌生人社交功能，引導用戶以親友間互相監督為主，精簡架構，強化特色。

12、受訪者對自己父母使用智能手機的熟練程度打分的平均分為3.9，在補充提問中多數受訪者證實，父母在使用日歷、鬧鐘甚至微信等流程定義清晰、學習成本低的APP中并不存在太大問題。

意義：雖然中老年人使用智能手機APP存在熟練度不足的問題，但對這樣一款流程簡單的應用而言，在交互、視覺設計得當的情況下，由父母監督是存在一定可行性的。

13、有54%的用戶選擇了5元/次作為可接受的單次缺勤懲金上限，另有26%的用戶選擇了10元/次，10%的用戶選擇了20元/次，沒有用戶選擇更高值。

3 產品定義

4 業務需求分析

根據用戶調研和產品定義，整理形成以下11個業務需求。按重要性分為核心需求、主任務需求、配套需求三類：

以下將對3個核心需求和3個輔助需求的業務目標、業務目的、衡量指標和用戶行為進行分析。

4.1 設置習慣

4.2 打卡

4.3 監督功能

4.4 習慣數據記錄

4.5 好友系統

4.6 邀請

5 目標用戶與典型場景

5.1 目標用戶

5.2 人物模型

產品需要為具有特定需要的特定個體類型設計。如果產品涵蓋受眾過多，只會增加所有用戶的認知負擔及導航成本。例如，能夠取悅某些用戶的功能設置可能對其他用戶造成困擾。因此，人物模型有助于避免設計對用戶的理解過于彈性化、將自己過多地代入設計、或將一些邊緣功能當做重點。

5.3 情境場景

通過情境場景可以由敘事的方式簡明描述運用“學樹”實現以上兩個人物模型的具體目標的過程，聚焦于兩個人物模型及其思考和行為方式，從“他們”的角度描述一種理想的體驗。本節將分別對兩個人物模型，就其使用學樹最典型的場景進行描述。

今天是羅媛使用“學樹”的第100天，也是她創建的第一個習慣“堅持100天晨跑”的完成日。她例行在租處附近的公園完成了三公里的晨跑后，在公園里迎著陽光拍了一張自拍，然后點擊打卡，輸入“一百天不長也不短，總算是第一個里程碑！”，并附上了剛才拍的照片后，點擊了上傳按鈕。

在走回家的路上買早餐時，耳機里傳來一聲清脆的提示音，她迫不及待地打開APP，果然是媽媽已經“批復”了她今天的打卡，并回復了一句“女兒好棒！”外加一堆關于持之以恒的格言，“果然是老年人風格”——她心里不禁一笑。自從開始使用“學樹”，她和媽媽之間的關系從之前簡單地互相問候和道平安，到如今關于每天的近況無話不說，這不得不說是“學樹“的功勞——這也是在她開始使用這個應用時始料未及的，她原本只是覺得懲金交給媽媽更放心罷了。

媽媽一并批復的，還有昨晚關于另一條習慣“堅持11點前睡覺”的打卡記錄，雖然“堅持11點前睡覺“這種打卡沒法用照片證明，但既然使用這個應用，她就保持了一份自覺——何況這個APP沒有陌生人社交模塊，完全沒有作假的必要。偶爾沒有按時睡覺她便坦然承認，并向老媽支付了10塊錢的“違約金”。

上班路上，羅媛打開歷史記錄，把“堅持晨跑100天”的結果頗有成就感地分享到了微信朋友圈，很快收到數十個贊，其中有不少朋友紛紛問她這是什么APP，她便通過邀請功能中選擇“在朋友圈中邀請”，按照默認的圖片和文案，在朋友圈發送了一條邀請鏈接。

一天下來，就有好幾個朋友加了她好友，并邀請她作為自己的監督人?！翱磥硪院蠛糜蚜斜砝锩鏁鼰狒[呢“——她這樣想道。一來，楊鵬就完成了一次流程沒有任何冗余、提示清晰、又突出產品特色的注冊和首次登錄體驗。

李露買完早餐回來時，老頭子還在洗漱。她倒好豆漿，把油條擺進盤子后洗了洗手，走到床頭柜前拿起女兒送的iPhone，果然看到了“學樹”APP發出的一條新的提示：貓大媛已在“堅持100天晨跑”中打卡簽到并邀請您批復，快來看看吧。

貓大媛是女兒的網名，取自家里那只同樣叫媛媛的貓。李露打開應用后，輕車熟路地在待批復列表中找到了這條記錄，此外還有昨晚發出的“堅持11點前睡覺”的打卡，她習慣準備好早飯后一并處理。

打開女兒晨跑的打卡記錄后，她看到了女兒自拍里那張熟悉的笑臉——這是她自從在女兒手把手的指導下學會使用這個應用后，她每天早上最大的盼頭。自從在女兒的邀請下成為她的“監督人”后，她每天都能看到女兒的照片，對女兒每天的拼搏和努力都能看在眼里，母女間電話時的話題也更多了。

她分別進入兩條記錄的詳情頁面，按下“有效”按鈕并在彈出的輸入框中給女兒打了很多鼓勵的話，雖然女兒在電話里開玩笑說過她對這樣的“格言集”不怎么感冒，“這樣下去100天您都可以出書了?！?。

完成批復后，她順手點進了女兒個人資料的詳情頁，這里羅列著女兒開始使用“學樹”三個多月以來的點點滴滴，包括剛才兩個習慣在內，女兒一共創建了6個習慣，其他4各習慣的監督人都是她的朋友。每個習慣點進去都可以看到簽到次數、缺勤率、每天的簽到記錄等等，時常翻看這些，也是李露閑暇時的一大樂事。

午飯時，李露打開微信朋友圈，看到女兒曬出的“堅持晨跑100天”的結果截圖，她也給女兒點了個贊。能看到女兒這樣積極地在繁重的工作之余也努力成為更好的自己，她是發自內心地欣慰和感動。

6 用戶體驗目標

根據第4節梳理出的業務需求，3個核心業務需求3個輔助業務需求同樣可以轉化為用戶使用產品的體驗目標，即期望得到的最終成果?！皩W樹”的主要用戶體驗目標可以總結為以下6點：

7 關鍵因素分解

根據業務目標（見第4節）對用戶意愿進行分析，可以得出使用產品前的動機和可能面臨的擔憂。而根據用戶體驗目標對用戶行動進行分析（見第6節），則可以明確用戶在使用過程中可能面對的障礙。如何創造動機、排除擔憂和解決障礙，是將這三大關鍵因素轉化為合理的設計依據的關鍵。

7.1 設置一個習慣

初步解決方案：將創建習慣的按鈕設置得更加引人注目擔憂

初步解決方案：交互設計注意簡化跳轉邏輯、符合常規操作習慣、降低用戶學習成本，視覺設計注意簡潔

7.2 打卡

初步解決方案：點擊打卡按鈕后直接跳轉進入記錄上傳頁面，在兩步流程內完成打卡

初步解決方案：在設置時由用戶選擇是否需要上傳照片作為證明。如果選擇需要，則在打卡時必須上傳照片才能通過流程；如果選擇不需要，則在打卡時不出現上傳照片的控件。

7.3 監督

用戶體驗目標：負責任地對對方的習慣育成過程完成監督，并逐漸增進彼此之間的熟絡程度或感情

初步解決方案：在監督頁面的文案中提示用戶負責地批復打卡記錄才是對好友負責的做法，而不是顧忌情面

初步解決方案：在打卡記錄上傳后即時彈出推送消息，提醒監督人進行批復。未批復則此后每天同一時間彈出同樣的推送提醒

初步解決方案：將監督人功能與被監督人的功能區分在兩個一級頁面中顯示，讓監督功能的入口易于用戶尋找

7.4 查看歷史記錄

初步解決方案：在查看缺勤率較高的記錄詳情時弱化容易致使用戶產生挫敗感的數據，顯示鼓勵性的文案

初步解決方案：初次使用時通過引導頁告知用戶主界面的可點擊元素

7.5 好友功能

用戶體驗目標：在平臺內通過社交互動帶來參與感和歸屬感

初步解決方案：有未讀消息時，在消息中心按鈕上顯示未讀紅點

障礙：沒有在工具類應用內聊天的習慣，對即時性的聊天產生反感

初步解決方案：只保留最基本的非即時的點贊和留言功能（澆水）

7.6 邀請功能

用戶體驗目標：吸引更多熟人進入平臺，對平臺產生歸屬感，加深使用習慣

動機：希望邀請朋友一起使用本產品，或希望邀請親人使用本產品作為自己的監督人

初步解決方案：提供合理的默認邀請文案供用戶使用，在單獨邀請QQ、微信好友時，文案開頭將自動添加被邀請人的昵稱

8 競品體驗路徑分析

本節依據知乎、豆瓣上相關應用推薦中的口碑和影響力，以及Apple Store中的排序，選擇種子習慣、微習慣、 New、iHabit共計4個主要競品，對“設置一個習慣、打卡、監督、查看歷史記錄、分享歷史記錄、好友功能、邀請功能”這條體驗路徑中7個主要用戶接觸點上的驚喜和問題進行分析。

8.1 種子習慣

共有設置提醒、設置私密、存檔習慣、刪除習慣等設置項，所有習慣都是無限期，無法對一個習慣設置里程碑，用戶可能因無法獲得階段性的成果而感到厭倦

1.打卡：點擊按鈕打卡，可上傳文字或照片記錄，再點擊一次按鈕則取消（并刪除當天的圖文記錄）

3.查看歷史記錄：詳情頁面顯示習慣內容、堅持總天數、點贊數、每天的簽到記錄、

4.好友功能：有基于陌生人社交的“關注/粉絲”型好友系統，可查看對方的習慣培養詳情，有私信、評論或點贊功能

5.邀請功能：邀請接口包括：微信、朋友圈、微博、QQ、QQ空間

6.整體評價：主打陌生人社交的習慣育成應用，可以參與他人已創建的習慣，并在同一個“習慣圈子”內參與互動和排名競爭。習慣培養過程有生動的具象化設計。無監督和獎懲功能?？偠灾?，是一個習慣培養功能上中規中矩、卻在陌生人社交模塊上筆墨較重的社區應用。

8.2 微習慣

設置一個習慣：為參與或創建一個習慣提供了較為醒目的入口，并為新用戶設計了操作導引

共有設置提醒、提示音、設置私密、刪除習慣等設置項?？勺杂稍O置“每周計劃完成幾次”和“計劃堅持多少天”（天數可重置）

打卡：點擊按鈕打卡，可上傳文字或照片記錄，再點擊一次按鈕則取消（并刪除當天的圖文記錄）

打卡頁同時作為習慣的詳情頁，同時顯示連續堅持的天數、簽到總計數、與該習慣相關的文章推薦、今日打卡的用戶頭像列表，使整個頁面略顯龐雜

查看歷史記錄：用卡片的方式顯示習慣列表，點擊后進入詳情頁（打卡頁）。未對習慣培養過程進行具象化處理。

好友功能：有基于陌生人社交的“關注/粉絲”型好友系統，可查看對方的習慣培養詳情，有評論或點贊功能，有PK功能，無私信功能（實際上造成陌生用戶之間只是一個數據參照體，無法形成有效的交流）

邀請功能：邀請接口包括：微博、微信好友、朋友圈、QQ、短信、郵箱

整體評價：同樣是主打陌生人社交、社區化的習慣育成應用，可以參與他人已創建的習慣，并在同一個“習慣圈子”內參與互動和排名競爭，但缺少用戶之間單獨交流的空間使得其打造陌生人社交的目實現得并不理想。習慣培養過程缺乏生動的具象化設計，只有冰冷的數據。同樣沒有考慮監督和獎懲功能。分享鏈接無法生成具有吸引力的分享圖片，只能生成純文字鏈接。該競品的一個優勢在于界面設計得非常遵守iOS規范，視覺效果干凈得體。

8.3 iHabit

1.設置一個習慣：有設置提醒、刪除習慣、備注等設置項，可設置截止日期

2.打卡：點擊按鈕打卡，只能上傳文字記錄，點擊一次日歷上已簽到的日期則取消該日期的簽到記錄（并刪除當天的文字記錄）

打卡頁同時作為習慣的詳情頁，以日歷形式顯示總堅持的天數、本月簽到天數和本周簽到天數

4.查看歷史記錄：顯示簡潔的歷史記錄列表，點擊后進入詳情頁（打卡頁）

打卡頁設置統計頁入口，進入統計頁可以查看歷史簽到數據的柱狀圖。未對習慣培養過程進行具象化處理。

7.整體評價：不設置社交功能，僅供個人記錄習慣的一個小巧而富有美感的國外應用。在突出核心需求、保持簡潔性和富有設計感上都做得很不錯。但功能點確實過于局限，僅憑借用戶的自覺簽到，沒有在此基礎上為用戶提供更多的幫助。

8.4 結論

通過競品分析，再對比前文中對“學樹”的定義，可以看出，“學樹”對習慣了帶有陌生人社交系統的同類應用的用戶而言，在使用初期可能會感到不適應，但很快用戶在習慣了毫無冗余元素的界面、精簡的流程和基于純熟人社交的好友系統后后，會逐漸發現對這類應用而言，刪除陌生人社交并不會影響其核心功能。而隨著使用的深入，將習慣的培養過程具象為插畫風格的樹木生長過程，將帶給用戶感官上美的感受和與日俱增的驚喜感。因此，“學樹”的情緒曲線具有顯著遞增特點。在信息架構、流程設計以及正式的原型設計階段，這一結論有助于設計能夠堅持特色、揚長避短，對雖然會造成一定損失但利大于弊的功能刪減做到“忍痛割愛”，對突顯產品特色的驚喜點進行勇敢、膽大心細的創新。

9 交互稿