9.8 通用交互说明
原文链接：http://qinsman.com/1610_habitree/
本文由 @ Qinsman 原创发布于人人都是产品经理。未经许可，禁止转载。
时间: 2021-07-30 10:26:25 人气: 9 评论: 0
本文通过展示UI设计稿、需求分析报告和交互设计文档，全面详解养成APP的交互体验与视觉设计。
“学树”（Habitree）是9月时从交互设计到UI设计独立完成的一个个人项目，也是第一次挑战时间管理类应用这个有趣的领域。虽然最终因为种种原因很遗憾没有顺利地交付开发和实际上线，但设计阶段还是已经有一个相对完整的阶段性成果的，在此分享给大家。
好的习惯，像一棵小树，有破土而出时，带着未知和青涩的期待，也有经历春夏的风雨后，熬成满树金**，沉甸甸的喜悦，改变自己，从一个小习惯开始。
学树是一款专注监督和激励的习惯育成APP。基于纯熟人社交，学树提供了有趣的“监督+奖惩”双重激励机制，邀请你的密友或父母担任监督人，没有按时打卡要支付小小的惩金哦。与亲友见证彼此成长的同时，也成为分享日常点滴的纽带，针对积极向上、渴望通过日积月累的好习惯改变自己的你，一定**喜欢上这**树林的。：）
本文将先展示最终的UI设计稿，同时相当于一个产品功能的概览和最终实现效果的简介。需求分析报告和交互设计文档放在后面，有兴趣的朋友可以各取所需。
注：所有图**的原始分辨率都较大，小图看不清可以戳大图。
养成一个好的习惯，或者坚持做一件对自己有益的事情，都意味着对自己现有生活方式的改变。无论目标多么鼓舞人心，坚持之初总数一个伴随着痛苦的过程，全凭自觉和自制力或许是最好的，但并不是每个人在决心改变之初都做得到。而他人的监督，或者社交、奖惩的压力等外力，则可以有效地弥补单纯依靠“内力“的不足，帮助我们更好地坚持下去。
这一产品目标将覆盖关注自我提升、自我管理的用户群体，不但覆盖面广，这个群体特有的积极向上、追求更好的自己等特质，更让产品拥有很多领域都难以媲美的用户质量。
市面上虽然已有较多习惯育成类APP，但实际上并没有任何一者能够有效地在市场中占据统治级的地位。因此，可以认为具备自己特色的优质应用很容易在这样一个群雄逐鹿的市场中找到立足空间。此外，作为一个核心需求单一、流程短小清晰的工具类应用，起步门槛较低也是这一选题的优势之一。
综上所述，本项目将以“引入监督和奖惩的习惯育成“为主题， 完成一款习惯育成类APP产品的交互设计，内容集中在统计和分享运动量方面。
关键词分解：习惯，打卡，监督，奖惩，金钱
经线下问卷调研，共回收问卷47份，其中符合目标用户条件的（即近期有在坚持培养新习惯，或有意尝试培养新习惯的）的29人次，根据这部分问卷，可得出以下分析结果：
1、是否有意培养新习惯与学历、在职与否都并无明显的关联。
意义：可见产品的目标人群并不受学历、在职与否的限制，仅与用户的生活态度、上进心和自我管理意愿有关。
2、在全部有意培养新习惯的受访者中，只有23%选择了“有意学习一项新的爱好/技能”，举例中提及较多的是绘画和烹饪，其中43%认为目前的学习效果不够理想（打分低于5）。
意义：可见目标用户中，较多用户只是希望在现有能力范围内培养更好的生活习惯，但希望通过日积月累的练习学习新技能的用户的需求仍然不容忽视。可见用户仅通过自制力，或通过市面已有产品坚持学习新技能的效果不够理想。
3、近期在坚持的新习惯中， 作息类（早睡、早起等）、健身类（跑步、深蹲等）、学习类（背单词、阅读灯）、戒除类（不良饮食、不良习惯）已几乎可以涵盖常见的习惯类型。受访者中65%认为习惯的培养效果不够理想（打分低于5）。
意义：可在为用户提供默认的习惯类型时提供参考。可见用户仅通过自制力，或通过市面已有产品进行习惯培养的效果不够理想。
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元/次，没有用户选择更高值。
意义：对惩金设置的区间具有参考意义。
根据用户调研和产品定义，整理形成以下11个业务需求。按重要性分为核心需求、主任务需求、配套需求三类：
以下将对3个核心需求和3个辅助需求的业务目标、业务目的、衡量指标和用户行为进行分析。
产品需要为具有特定需要的特定个体类型设计。如果产品涵盖受众过多，只**增加所有用户的认知负担及导航成本。例如，能够取悦某些用户的功能设置可能对其他用户造成困扰。因此，人物模型有助于避免设计对用户的理解过于弹性化、将自己过多地代入设计、或将一些边缘功能当做重点。
根据调研结果和上述目标，可以构建两个典型的人物模型：
通过情境场景可以由叙事的方式简明描述运用“学树”实现以上两个人物模型的具体目标的过程，聚焦于两个人物模型及其思考和行为方式，从“他们”的角度描述一种理想的体验。本节将分别对两个人物模型，就其使用学树最典型的场景进行描述。
5.3.1 典型场景——罗媛
今天是罗媛使用“学树”的第100天，也是她创建的第一个习惯“坚持100天晨跑”的完成日。她例行在租处附近的公园完成了三公里的晨跑后，在公园里迎着阳光拍了一张自拍，然后点击打卡，输入“一百天不长也不短，总算是第一个里程碑！”，并附上了刚才拍的照**后，点击了上传按钮。
在走回家的路上买早餐时，耳机里传来一声清脆的提示音，她迫不及待地打开APP，果然是妈妈已经“批复”了她今天的打卡，并回复了一句“女儿好棒！”外加一堆关于持之以恒的格言，“果然是老年人风格”——她心里不禁一笑。自从开始使用“学树”，她和妈妈之间的关系从之前简单地互相问候和道平安，到如今关于每天的近况无话不说，这不得不说是“学树“的功劳——这也是在她开始使用这个应用时始料未及的，她原本只是觉得惩金交给妈妈更放心罢了。
妈妈一并批复的，还有昨晚关于另一条习惯“坚持11点前睡觉”的打卡记录，虽然“坚持11点前睡觉“这种打卡没法用照**证明，但既然使用这个应用，她就保持了一份自觉——何况这个APP没有陌生人社交模块，完全没有作假的必要。偶尔没有按时睡觉她便坦然承认，并向老妈支付了10块钱的“违约金”。
上班路上，罗媛打开历史记录，把“坚持晨跑100天”的结果颇有成就感地分享到了微信朋友圈，很快收到数十个**，其中有不少朋友纷纷问她这是什么APP，她便通过邀请功能中选择“在朋友圈中邀请”，按照默认的图**和文案，在朋友圈发送了一条邀请链接。
一天下来，就有好几个朋友加了她好友，并邀请她作为自己的监督人。“看来以后好友列表里面**更热闹呢“——她这样想道。一来，杨鹏就完成了一次流程没有任何冗余、提示清晰、又突出产品特色的注册和首次登录体验。
5.3.1 典型场景——李露
李露买完早餐回来时，老头子还在洗漱。她倒好豆浆，把油条摆进**子后洗了洗手，走到床头柜前拿起女儿送的iPhone，果然看到了“学树”APP发出的一条新的提示：猫大媛 已在“坚持100天晨跑”中打卡签到并邀请您批复，快来看看吧。
猫大媛是女儿的网名，取自家里那只同样叫媛媛的猫。李露打开应用后，轻车熟路地在待批复列表中找到了这条记录，此外还有昨晚发出的“坚持11点前睡觉”的打卡，她习惯准备好早饭后一并处理。
打开女儿晨跑的打卡记录后，她看到了女儿自拍里那张熟悉的笑脸——这是她自从在女儿手把手的指导下学**使用这个应用后，她每天早上最大的盼头。自从在女儿的邀请下成为她的“监督人”后，她每天都能看到女儿的照**，对女儿每天的拼搏和努力都能看在眼里，母女间电话时的话题也更多了。
她分别进入两条记录的详情页面，按下“有效”按钮并在弹出的输入框中给女儿打了很多鼓励的话，虽然女儿在电话里开玩笑说过她对这样的“格言集”不怎么感冒，“这样下去100天您都可以出书了。”。
完成批复后，她顺手点进了女儿个人资料的详情页，这里罗列着女儿开始使用“学树”三个多月以来的点点滴滴，包括刚才两个习惯在内，女儿一共创建了6个习惯，其他4各习惯的监督人都是她的朋友。每个习惯点进去都可以看到签到次数、缺勤率、每天的签到记录等等，时常翻看这些，也是李露闲暇时的一大乐事。
午饭时，李露打开微信朋友圈，看到女儿晒出的“坚持晨跑100天”的结果截图，她也给女儿点了个**。能看到女儿这样积极地在繁重的工作之余也努力成为更好的自己，她是发自内心地欣慰和感动。
根据第4节梳理出的业务需求，3个核心业务需求3个辅助业务需求同样可以转化为用户使用产品的体验目标，即期望得到的最终成果。“学树”的主要用户体验目标可以总结为以下6点：
用户需求：设置一个习惯
用户需求：打卡
用户需求：监督
用户需求：查看历史记录
用户需求：好友系统
用户需求：邀请
根据业务目标（见第4节）对用户意愿进行分析，可以得出使用产品前的动机和可能面临的担忧。而根据用户体验目标对用户行动进行分析（见第6节），则可以明确用户在使用过程中可能面对的障碍。如何创造动机、排除担忧和解决障碍，是将这三大关键因素转化为合理的设计依据的关键。
用户体验目标：顺利地开始体验习惯育成的过程
关键因素分解：动机创建一个习惯，快速开始体验产品
初步解决方案：将创建习惯的按钮设置得更加引人注目担忧
初步解决方案：
初步解决方案：交互设计注意简化跳转逻辑、符合常规操作习惯、降低用户学习成本，视觉设计注意简洁
动机：快速完成当天任务的记录
初步解决方案：点击打卡按钮后直接跳转进入记录上传页面，在两步流程内完成打卡
担忧：
初步解决方案：
障碍：不清楚是否必须上传照**
初步解决方案：在设置时由用户选择是否需要上传照**作为证明。如果选择需要，则在打卡时必须上传照**才能通过流程；如果选择不需要，则在打卡时不出现上传照**的控件。
用户体验目标：负责任地对对方的习惯育成过程完成监督，并逐渐增进彼此之间的熟络程度或感情
关键因素分解：
动机：完成被监督人的嘱托，负责地监督其打卡的有效性
初步解决方案：在监督页面的文案中提示用户负责地批复打卡记录才是对好友负责的做法，而不是顾忌情面
担忧：忘记批复打卡记录，影响被监督人的体验
初步解决方案：在打卡记录上传后即时弹出推送消息，提醒监督人进行批复。未批复则此后每天同一时间弹出同样的推送提醒
障碍：找不到监督功能
初步解决方案：将监督人功能与被监督人的功能区分在两个一级页面中显示，让监督功能的入口易于用户寻找
用户体验目标：由日积月累的数据得到满足感
关键因素分解：
动机：
初步解决方案：
担忧：看到历史缺勤率较高，产生挫败感
初步解决方案：在查看缺勤率较高的记录详情时弱化容易致使用户产生挫败感的数据，显示鼓励性的文案
障碍：用户不知道显示为树木的控件是可以点击的
初步解决方案：初次使用时通过引导页告知用户主界面的可点击元素
用户体验目标：在平台内通过社交互动带来参与感和归属感
关键因素分解：
动机：
初步解决方案：提供好友系统和相互点**、留言的功能
担忧：担心漏掉查看好友的点**或留言
初步解决方案：有未读消息时，在消息中心按钮上显示未读红点
障碍：没有在工具类应用内聊天的习惯，对即时性的聊天产生反感
初步解决方案：只保留最基本的非即时的点**和留言功能（浇水）
用户体验目标：吸引更多熟人进入平台，对平台产生归属感，加深使用习惯
关键因素分解：
动机：希望邀请朋友一起使用本产品，或希望邀请亲人使用本产品作为自己的监督人
初步解决方案：提供邀请好友加入学树的入口
担忧：邀请人数较多时需要操作多次
初步解决方案：允许批量发送邀请链接
障碍：需要重复输入邀请文案
初步解决方案：提供合理的默认邀请文案供用户使用，在单独邀请**、微信好友时，文案开头将自动添加被邀请人的昵称
本节依据知乎、豆瓣上相关应用推荐中的口碑和影响力，以及Apple Store中的排序，选择种子习惯、微习惯、 New、iHabit共计4个主要竞品，对“设置一个习惯、打卡、监督、查看历史记录、分享历史记录、好友功能、邀请功能”这条体验路径中7个主要用户接触点上的惊喜和问题进行分析。
设置一个习惯
共有设置提醒、设置私密、存档习惯、删除习惯等设置项，所有习惯都是无限期，无法对一个习惯设置里程碑，用户可能因无法获得阶段性的成果而感到厌倦
1.打卡：点击按钮打卡，可上传文字或照**记录，再点击一次按钮则取消（并删除当天的图文记录）
2.监督：无监督功能
3.查看历史记录：详情页面显示习惯内容、坚持总天数、点**数、每天的签到记录、
4.好友功能：有基于陌生人社交的“关注/粉丝”型好友系统，可查看对方的习惯培养详情，有私信、评论或点**功能
5.邀请功能：邀请接口包括：微信、朋友圈、微博、**、**空间
6.整体评价：主打陌生人社交的习惯育成应用，可以参与他人已创建的习惯，并在同一个“习惯圈子”内参与互动和排名竞争。习惯培养过程有生动的具象化设计。无监督和奖惩功能。总而言之，是一个习惯培养功能上中规中矩、却在陌生人社交模块上笔墨较重的社区应用。
设置一个习惯：为参与或创建一个习惯提供了较为醒目的入口，并为新用户设计了操作导引
共有设置提醒、提示音、设置私密、删除习惯等设置项。可自由设置“每周计划完成几次”和“计划坚持多少天”（天数可重置）
打卡：点击按钮打卡，可上传文字或照**记录，再点击一次按钮则取消（并删除当天的图文记录）
打卡页同时作为习惯的详情页，同时显示连续坚持的天数、签到总计数、与该习惯相关的文章推荐、今日打卡的用户头像列表，使整个页面略显庞杂
监督：无监督功能
查看历史记录：用卡**的方式显示习惯列表，点击后进入详情页（打卡页）。未对习惯培养过程进行具象化处理。
好友功能：有基于陌生人社交的“关注/粉丝”型好友系统，可查看对方的习惯培养详情，有评论或点**功能，有PK功能，无私信功能（实际上造成陌生用户之间只是一个数据参照体，无法形成有效的交流）
邀请功能：邀请接口包括：微博、微信好友、朋友圈、**、短信、邮箱
整体评价：同样是主打陌生人社交、社区化的习惯育成应用，可以参与他人已创建的习惯，并在同一个“习惯圈子”内参与互动和排名竞争，但缺少用户之间单独交流的空间使得其打造陌生人社交的目实现得并不理想。习惯培养过程缺乏生动的具象化设计，只有冰冷的数据。同样没有考虑监督和奖惩功能。分享链接无法生成具有吸引力的分享图**，只能生成纯文字链接。该竞品的一个优势在于界面设计得非常遵守iOS规范，视觉效果干净得体。
1.设置一个习惯：有设置提醒、删除习惯、备注等设置项，可设置截止日期
2.打卡：点击按钮打卡，只能上传文字记录，点击一次日历上已签到的日期则取消该日期的签到记录（并删除当天的文字记录）
打卡页同时作为习惯的详情页，以日历形式显示总坚持的天数、本月签到天数和本周签到天数
3.监督：无监督功能
4.查看历史记录：显示简洁的历史记录列表，点击后进入详情页（打卡页）
打卡页设置统计页入口，进入统计页可以查看历史签到数据的柱状图。未对习惯培养过程进行具象化处理。
5.好友功能：无
6.邀请功能：无
7.整体评价：不设置社交功能，仅供个人记录习惯的一个小巧而富有美感的国外应用。在突出核心需求、保持简洁性和富有设计感上都做得很不错。但功能点确实过于局限，仅凭借用户的自觉签到，没有在此基础上为用户提供更多的帮助。
通过竞品分析，再对比前文中对“学树”的定义，可以看出，“学树”对习惯了带有陌生人社交系统的同类应用的用户而言，在使用初期可能**感到不适应，但很快用户在习惯了毫无冗余元素的界面、精简的流程和基于纯熟人社交的好友系统后后，**逐渐发现对这类应用而言，删除陌生人社交并不**影响其核心功能。而随着使用的深入，将习惯的培养过程具象为插画风格的树木生长过程，将带给用户感官上美的感受和与日俱增的惊喜感。因此，“学树”的情绪曲线具有显著递增特点。在信息架构、流程设计以及正式的原型设计阶段，这一结论有助于设计能够坚持特色、扬长避短，对虽然**造成一定损失但利大于弊的功能删减做到“忍痛割爱”，对突显产品特色的惊喜点进行勇敢、胆大心细的创新。
原文链接：http://qinsman.com/1610_habitree/
本文由 @ Qinsman 原创发布于人人都是产品经理。未经许可，禁止转载。
