Takafumi Horiuchi

Practice Log n Share

记录并分享日常音乐练习的应用

记录页。上方是练习记录网格,下方是今日进度条(共54分钟)和分类卡片。“乐曲练习”已计时超过27分钟,以亮色和白色边框突出显示。 分享页。汇总9月17日上课当天至24日的练习,共4小时38分钟,并展示分类条形图和无需横向滚动即可查看所有分类的每日明细表。
应用包含这两个界面。体验网页演示。

1. 概述

一款iPhone应用,拿着乐器也能轻点一下记录练习时间,并在上课时展示给老师。通过记录和分享两个界面,让日常练习成为课堂交流的依据。

我负责问题界定、UX/UI设计、真机调试、开发实现和说明资料制作。开发过程中与AI协作,界面与操作方案是否采用则由我自己判断。

我在自己的练习和课程中使用了这款应用。老师表示练习内容一目了然,也提出了记录更多细节的需求(意见概述)。

2. 背景与问题

我业余吹奏次中音萨克斯,每两周上一次课。老师问“最近练得怎么样?”时,我却没有办法具体说明练了什么、练了多久。

萨克斯用背带挂在身前,练习时不方便在纸上写字。练习日志的纸页越来越多,记录也逐渐分散。

萨克斯挂在背带上,试图在纸上写字却很不方便的情景。 练习日志的纸页不断增加、散落,查找记录变得困难的情景。
拿着乐器不便书写纸页增多,记录分散

我试用的时间记录应用可以轻点一下开始计时,但如何把记录整理成老师一眼就能理解的形式,仍是一个问题。

3. 设计原则

我希望把练习时的记录与上课时的分享连成一个完整流程。因此,以两项要求作为决定界面和操作方式的依据。

练习时,不增加输入负担

拿着乐器也能轻点类别,记录时间。

展示给老师前,不增加整理工作

记录自动汇总,无需加工,就能展示练了什么、练了多久。

4. 功能与设计

把操作与练习时间放在同一张卡片上

轻点类别开始计时,轻点其他卡片切换类别,再次轻点同一卡片停止计时。卡片突出显示当天的时间,仅在计时中提亮颜色并加上白色轮廓。操作的位置,也是确认正在记录什么的位置。

记录页。上方是练习记录网格,下方是今日进度条(共54分钟)和分类卡片。“乐曲练习”已计时超过27分钟,以亮色和白色边框突出显示。
“乐曲练习”正在计时。
在同一张卡片上即可查看类别、当天的练习时长和计时状态。

无需横向滚动,就能看全练习明细

为了省去分享前的整理,应用自动汇总上次上课以来的记录。每日明细表优先让所有类别同时可见,即使需要缩小文字。我希望展示屏幕时,能和老师一起讨论练习时间的分配。

分享页。汇总9月17日上课当天至24日的练习,共4小时38分钟,并展示分类条形图和无需横向滚动即可查看所有分类的每日明细表。
在一个界面中呈现统计时段、总时长、类别分配和每日明细。

让练习的积累成为继续坚持的动力

我把当天的进展,以及按月、按年积累的练习可视化。也希望让老师看到自己付出的努力,能成为继续练习的动力。

单日:以一小时为参考,填满进度条

当天练习的进度条初始范围为零到一小时,不同类别的时长以不同颜色叠加。我希望填满进度条的过程能成为继续练习的动力。

练习40分钟后的显示示例。颜色代表练习类别。数据为虚构记录。

长期:用绿色格子呈现每天的积累

每个格子代表一天,绿色深浅表示当天的练习时间。让按月、按年累积的格子能够一览无余,希望日常记录不断增加的过程,能促使自己坚持练习。

一格代表一天,红框标记阶段节点。最右列的记录尚未完成,下方日期还没有记录。数据为虚构示例。

5. 制作过程

通过调研与对话,明确记录和分享的作用

我用ChatGPT调研已有应用,梳理问题与思路。在当时的调研范围内,找到了时间管理应用,但没有找到适合与老师沟通的分享机制。我将通过对话具体化的概念整理成规格说明,交给Codex实现初版。

亲自试用初版,让操作区域适配屏幕

我亲自操作生成的初版,提出UI和UX改进要求,逐步调整为改良版。初版中单独显示的计时信息与停止操作被整合进卡片,当天的时间也更加醒目。同时探索了让操作面板完整显示在屏幕内的布局。

9月9日的初版。六张小型分类卡片与今日总计40分钟分别放在记录页的不同区域。

初版

9 月 21 日的改良版。每张大卡片显示类别与当天练习时长。正在计时的视谱练习显示为 10 分钟,并以亮色突出。

改良版

使用相同的虚构数据进行比较:6个类别,当天共40分钟。
初版中分开显示的计时信息与停止操作,在改良版中整合进了卡片。

考虑到练习时会一直打开这个界面,我以黑色为基调,同时希望通过类别颜色营造轻快的感觉。

亲手比较操作手感,再做选择

仅靠文字或图片提出要求,无法细调出“顺畅移动、利落停住”的感觉。因此,我与AI制作了一个辅助调试工具,让自己能切换方式和参数。我以操作面板停在屏幕内为标准,在真机上比较,最终选择了浏览器原生的滚动吸附,并应用到产品中。

滚动调节工具。切换五种吸附方式的选项与参数,旁边是用于体验操作手感的手机界面。
切换方式和参数,在真机上亲手比较滚动停止时的感觉。

借助独立评审,由自己决定是否采用

我使用两个独立的 AI 会话反复进行评审:先审视 Claude Code 提出的问题与改进建议,再让 Codex 验证并落实必要修正。有些建议偏离了我想要的界面和使用体验,因此我根据应用的目的与实际操作感受决定是否采用。

这一流程重复了约 15 次。当 AI 评审不再指出重大缺陷时,我将其作为结束这一轮改进的依据之一。

6. 使用体验与后续方向

打开应用,成为开始练习时的习惯

我将应用安装在自己的iPhone上,每天练习时使用,确认拿着乐器也能轻点一下记录的便利性。练习开始时打开应用,逐渐成为一个积极的习惯。回顾当天练习的顺序与分配,并留意下次上课的日期,都有助于我规划练习。

老师希望记录更多细节

老师表示练习内容一目了然,如果能记录具体的音阶种类,会更加实用(意见概述)。这些观察基于个人经验,来自我自己的练习和与老师的课程。

下一步:兼顾记录的详细程度与便利性

我正在考虑在“音阶”下增加“五声音阶”等子类别。如何保持记录操作简便,仍在探索。分享界面也在考虑用类别与子类别的层级展示,替代每日明细表。