你好!我是 Liberogic 公司的 UI 设计师,哈西。
突然提问一下,你们是否曾有过这样的烦恼呢?那就是满怀热情地安装了习惯养成应用,却完全无法坚持使用的困扰。
我擅长开始做某件事,但从未坚持过。
世界上有许多优秀而精美的应用程序。
起初,我每天都会认真记录。但是,工作变得繁忙,参加聚会,在某个不经意的日子里,"连续记录"就中断了,这时我的动力瞬间消失殆尽……。
最初时那些让人在意的提醒通知,不知不觉中变成了白噪音,那些应用在手机屏幕的角落里慢慢沦为化石。
那一瞬间袭来的"算了,放弃了"的挫败感。我想,肯定不只是我一个人体会过这种感受。
有没有人能拯救我这样三天打鱼两天晒网的人生呢(没有
更加让我感到困扰的是"应用程序的分散"。
习惯追踪器、用药日历、家庭账簿……在这些不同的应用之间不断切换,反而增加了操作的繁琐。更糟的是,订阅服务种类繁多,管理变得松散,最后甚至忘记了取消订阅。这样就本末倒置了。
正是在这一刻,设计师任性的想法爆发了。"与其如此,不如干脆自己动手,只集成必要功能,打造一个完全属于自己的应用程序呢?"
就这样,我开始与 AI(Claude Code)携手合作,开发了一款专为我的生活量身定制的"独家习惯养成驾驶舱"!
至少AI应该会告诉我们最优解
1. 【功能介绍】用系统包裹自己的"懒惰",系统化了"偷懒"的精心设计功能
那么,接下来为您介绍我们实际实现了哪些功能。
我希望在学习现有应用优点的同时,打造一个专为我的生活量身定制的终极"仪表板"。
为了将必要的应用整合到一个地方,我们首先开始创建了一个习惯养成应用。
我们还提供了亮色模式和深色模式,您可以根据早晨和夜晚分别选择使用。
🌱 初始屏幕
初始屏幕显示想要继续的习惯输入界面,可以以自己输入的方式进行。
向下滚动,你会看到一个"回答问题形成习惯"的链接。点击该链接后,系统会根据你的回答为你推荐匹配的习惯建议。
在初始界面引入习惯养成诊断
此外,我们还为那些初期不清楚想要养成什么习惯的用户创建了习惯导航功能,用户只需回答几个问题,就能选到适合自己的习惯。
🌱 习惯追踪器:告别非此即彼的世界
首先,为了养成习惯,即使是很小的步骤,能够坚持积累下去的事情会比较好。
开发了带有"5级评价"功能的习惯养成应用。以前使用的应用往往只有"做到了"或"没做到"的两种选择。但在这个应用中,不仅"完美完成的日子"会在日历上显色,就连"稍微努力了一下"Lv1的日子也会在日历上显色。
例如运动,可以从「Lv1:称体重」「Lv2:去卫生间时做深蹲」开始,直到「Lv5:在游泳池游1公里·进行40分钟的击拳训练」,根据每天的努力程度记录进度。
虽然懈怠的日子会显示为空白,但配合后面讲到的懈怠税系统,即使有所中断也可以在其他日期进行恢复,所以有懈怠的日子也不会是什么负担。
第二天再开始就好了。正因为有这种轻松的心态,我每天至少能坚持站上体重秤!
日历会以绿色渐变色逐渐染上颜色,形成"色彩堆积"的视觉效果,让用户能够直观地欣赏这一过程。从一个月的角度来看,用户可以清楚地看到自己积累了多少,这样也能提高工作动力。
通过日历功能实现可视化
查看日历UI时,当你真正完成习惯目标时,颜色会改变。颜色的深浅和色调会根据等级而变化,这样你就能清楚地看到自己的习惯执行情况,有助于保持动力。
提供习惯存档功能和新建习惯功能
一旦某个习惯养成到一定程度,我认为开始养成新习惯也不错,所以我们也提供了习惯存档功能和新建习惯功能!点击「习惯养成完成」按钮就可以添加新的习惯。
🏛️ 偷懒税:将罪恶感转化为存款
这是与前面提到的习惯追踪器相关联的另一个功能!
在偷懒的日子里向自己征收「税款(默认300日元)」的系统。
每个人都有无法坚持的时候。
因此我们需要通过惩罚来约束自己,但仅仅是罚款会让人厌烦。
你知道为什么有人会发胖吗?因为他们逃向了更轻松、更懒惰的方式,通过饮食来满足多巴胺,依赖简单的快乐激素。所以,即使加强惩罚,对于我们这些习惯养成能力差的人来说也没有意义。
「其实应该把偷懒的部分捐款出去比较好吧……」我也这样想过,但要是对自己这么严格的话,我绝对有信心会再也不打开这个应用(笑)。
偷懒税的缴款目标是「转入自己的指数投资账户」。
也就是说,罚款,但又不是罚款。是为了自己的罚款。
我把偷懒的内疚感也转变成了对未来自己的资产投资。
我进一步深化的是根据月度达成率的「减税制度」。
- 「达成率90%以上可减税50%」
- 「80%以上可减税25%」
这样的机制被引入了。
画面上会显示「再提高1%就能减免25%!」,看到这个时会产生「今天即使只是Lv2也要加油」这样莫名其妙的动力。
习惯养成的最大敌人是「某一天偷了懒,连续记录中断的那一刻,会想放弃一切」。
但由于有这项减税制度,"我虽然一天没有工作,但还有减税的机会!"让人能够坚持下去。
一次失败不会让我放弃,这是一款彻底贴近懒散自我的温柔设计。
✨ 护肤追踪器 & 💊 药物管理:应用程序跳跃为零
✨ 这是我一直想要的护肤检查工具
习惯、药物、家庭账簿……用不同的应用程序分别管理这些内容,对于我这样懒散的人来说是"麻烦至极"。为了消除这种"在应用程序之间来回切换"的烦恼,我已经将日常护理和健康管理完全集成到这个驾驶舱中。
由于可以直接沿用习惯养成应用的功能,所以实现起来很简单。
🧴 皮肤护理追踪器,即使疲倦的日子也能包容你
护肤也是一项重要的生活习惯。打开屏幕时,它会问你"你进行到第几步了?",我们为你准备了5个阶段的步骤。
疲惫不堪回家的日子可以选择「Lv1:仅洗脸(清水洗脸或用洗面奶洗脸)」就足够了。如果还有一点精力,可以升级到「Lv2:基础护肤(洁面+爽肤水)」「Lv3:标准护肤(+乳液)」,而在特别的日子里,你甚至可以加上精华液的「Lv4:精致护肤」……这样就能根据当天的精力状态灵活记录护肤步骤了。
此外,每个级别的名称和护理内容(说明文)可通过"步骤设置"根据个人偏好进行自定义。屏幕顶部会显示"本月平均 Lv"和"Lv3 以上连续天数"等信息的可视化,这样你可以在不勉强的范围内保持动力——比如"最近太累了,一直在 Lv1,今天就努力达到 Lv3 吧"。
💊 彻底协助懒人的「药物管理」功能
而且,我个人最容易放弃的就是药物管理。
这个应用不仅仅是输入药物名称,还可以非常细致灵活地登记「早、中、晚」的服用时间、「饭前、饭后、随意」的服用方式、每个时间的服用数量,甚至「每天、隔日、指定曜日」这样的复杂用药频率。
当有未完成的药物时,屏幕上方会显示一条引人注目的红色警告「⚠️有未服用的药物。请确认。」,督促你立即行动。
屏幕下方还会显示「本月用药达成率」和「遗漏次数」这样的真实数据(在开发测试屏幕上暴露了用药达成率仅5%的懒惰模样……笑)。
但请放心。
即使有漏服的日子,也可以从日历中回溯并事后补记,这种「事后可补」的设计依然存在,所以你可以不用陷入完美主义,按自己的节奏继续使用。
随着年龄增长,用药种类也会增加,这个功能非常便利,而且看医生时还能分享过去服用过的药物信息,非常有帮助(我这种人总是忘记带药物手册)。
🍺 聚会管理:激发健康和节约动力的神级功能
而且,个人来说改变我生活最大的,就是这个「聚会管理」功能。
这款应用不仅仅是记录喝酒的次数,而是在管理每月饮酒次数上限(例如「每月最多4次」)和预算的同时,将日常的「小小克制」转化为视觉化的奖励。
🍵 一键点击就能积累!「节酒储蓄」
在日常生活中
「今天还是不在家喝酒了」
这样克制住的日子,只需一键点击主屏幕上的「今天没有晚酌」开关。
就这样,日历上会标上绿色标记,500日元会作为「节酒储蓄」一下子加入账户。
每天微不足道的克制积累成了真实的金额,随着月末的临近,你会获得「这个月居然节酒了3,000日元(6天)!」这样莫名的成就感和多巴胺。
可以把节省下来的钱用于投资或存储。
也可以从心愿单的节省部分中支出,这样就能真实感受到节酒带来的其他回报,我相信这样更能坚持戒酒或节酒。
🛡️ 饮酒时自律的「防醉酒模式」
这款应用的隐藏亮点就是"防酒醉模式"。聚会开始时打开这个模式。随后,屏幕中央会大大地显示倒计时到预先设定的"目标回家时间"。当然,遇到"今天很开心,再待会儿吧!"的情况时,可以通过点击"修改回家时间"或"🎉继续玩下一轮!"按钮灵活地延长时间。设计非常贴心,体贴懒散的你。
此外,屏幕上还设置了"🍺酒精"、"🥤软饮"、"💧水"的杯数计数器。实时判定"每2杯酒精配1杯软饮"这样的配速,仪表盘会以绿色"OK"提示。这样可以大幅减少第二天的宿醉和"为什么要喝那么多……"这样的后悔。
📊 除此之外,我们还添加了许多便利的功能供饮酒聚会时使用
聚餐结束后,你可以记录店铺名称(如"鳥貴族 渋谷店")、实际支付金额、同行人员备注等信息。我们还增加了一项功能,当你输入 Google Maps 网址时,系统会自动填充相关信息。由于每月操作次数较少,AI 建议即使进行 API 集成也不会产生额外费用,所以我们就实现了这个功能。
此外,我还经常忘记在喝酒聚会时结账,所以我添加了这个功能来记录这些事项。
不用担心支付问题,这很好。
而且在月底的"月度报告"中,通过避免晚酌的天数产生的"节酒存款"和比饮酒预算节省下来的差额(饮酒时浮出来的金额)会被合并,作为"总节省额"以令人满意的方式可视化。例如,"这个月总共省了9,000日元!"一目了然,所以可以想象"用这笔钱买那个一直想要的小工具吧",这是一个既能获得健康又能获得金钱的最喜爱的功能。
2. 开发完成后:Claude 成为设计师最好的"翻译机"
就这样,我把自己的懒散和任性统统融入了一个应用,最终成型了。作为一个开发新手,能走到这一步,完全要感谢我的搭档Claude。
工程师们看到可能会说"你疯了吗?"而感到生气,但这次我采用了一种超直白的单文件结构——"将 HTML、CSS 和 JavaScript 全部放在一个 index.html 文件中"。不过,这对我们(我和 Claude)来说简直是完美的选择。
当文件分散在多个文件中时,仅仅是说明"需要修改哪个文件的哪个地方"就很费力了,但如果只有一个文件,只需将代码整个丢进聊天,Claude 就能瞬间把握全部内容。
Claude 能把我'我想要这样的行为表现'这种抽象的想法,翻译成漂亮的代码。有时候闭合标签的错误或 JavaScript 的加载顺序会导致整个应用崩溃,我们两个人会在半夜追查错误日志,虽然有这样的麻烦,但那感觉就像电影里的搭档冒险一样,反而很有趣(笑)。
与 GitHub 的集成、与 Cloudflare 的集成等,通过聊天交互,AI 会告诉你账户注册方法,并直接提供官方网站的链接,所以与 AI 聊天时可以很快地完成集成。
3. 下一道高墙:设计师走进安全性的深渊
借助Claude的帮助,我成功拥有了一款在外观和动作上都凝聚了"我的理想"的最棒玩具(应用)。
……但是,此时出现了一个新问题。
在日常使用这个驾驶舱的过程中,我突然清醒了。"等等,这个应用里存储着我真实的健康状况、每天的用药记录、最近的家庭预算账单,还有我偷懒的历史记录,也就是说,赤裸裸的隐私数据堆积成山啊。"
目前,我暂时用简易的PIN码(密码)进行屏幕锁定,聊以自慰。但说实话,我对安全性方面完全是个外行。以我和AI现有的知识做出来的这套系统,我对于将重要数据存放其中仍然有些不放心。
作为设计师,正因为我们创造"舒适的体验",其背后的"绝不泄露、绝不被破坏"这一点安心感也应该是重要的一部分。
我想用智能手机的Face ID或最新的Passkeys(密钥)来开启,这样只有我能安全、便捷地快速打开!
虽然产生了这样的想法,但安全是一个不可简单处理的超级专业领域。
这已经超出我的能力范围了……。
我想和工程师沟通后谨慎推进此事。
我们计划在将来也引入家计簿管理工具,只需上传信用卡的使用历史记录,系统就能自动进行记录,我们也想添加这样的功能。不过由于对安全性方面存在顾虑,所以暂时搁置了。
总结
工具已齐备。接下来想打造"安心"!
我本来因为'没有开发知识'这个理由,只是在脑子里想想就完事了的创意,多亏了AI这个最强的搭档,现在真的活了起来,成为了改变我生活的实际工具。我不再责备自己做不到完美,通过付出一点点'偷懒税'就可以无数次地重新开始。正是因为这个温柔的系统,连曾经是三天打鱼两天晒网高手的我,如今也能每天开心地养成习惯。
但是,便利性越高,保护好它的责任也就越重。
本文章中未提及,但我们正在逐步添加通知功能和家庭预算管理功能等。
虽然家计管理等功能由于需要从安全的角度谨慎对待,目前仍在开发环境中进行开发。
所以,敬请期待下次的更新!
UI 设计每天都在更新!LP 设计也在考虑如何融入可访问性。最近有点远离标记工作,在思考"是不是应该提升自己的 JavaScript 水平?"北村匠海粉丝!
hasshi
网页设计师 / 2018年入社 / 内心里始终是初出茅庐的设计师