语言学习App设计:Talkie怎样让练习连贯界面设计预览

语言学习App设计:Talkie怎样让练习连贯

作者:界达设计工作室(JVDS) 阅读时间:约 5 分钟

Talkie这套语言学习App设计,有趣的是题目一直在变,页面的节奏却很熟悉。浅绿底色、珊瑚红选项和底部的Continue,从入门选择延续到练习,让人容易找到下一步。

先问一件事,再给一颗明确的按钮

水平页没有直接抛出专业等级,而是用几句简短的话描述能说到什么程度。选项纵向排列,选中项变成珊瑚红,下面留出较大空白。这种安排适合初次使用:先理解问题,再比较答案,不必同时学习一组陌生缩写。

顶部进度条旁写着步骤数,返回箭头在左边。它把“这一页该做什么”和“还剩多少”放在同一个视野里。每日目标页沿用这套位置,时长选项改变,操作方法没有改变。

目标页在继续按钮下面还写着可到个人设置修改。这个不显眼的小句子很有价值,它让每日目标更像一个可调整的选择。借鉴这类入门流程时,应把与当前选择相关的说明放在附近,而不是让人完成设置后再去帮助页找答案。

Talkie水平和每日目标页面的进度条、选项及继续按钮
入门步骤顶部与底部|步骤数提示剩余过程,继续按钮保持固定位置。

兴趣标签允许用户停在不确定的位置

兴趣页把Reading、Psychology和Design等选中项标红,其余标签为白色。选项像一组小纸片,长度跟随文字变化,几行排布比把每项做成全宽大按钮更轻巧。标题下的多选说明也解释了为什么可以同时出现多块红色。

界达设计更看重底部的Skip for now。首次使用时未必知道自己想聊哪些话题,跳过让这个问题不至于挡住学习。自填入口也在同一页,已有分类和补充内容都有位置。

图里Fitness出现两次,Add other也用了与选中项相同的红色。若继续打磨,可以先去掉重复分类,再给新增入口更明确的动作样式。这样保留了标签的活泼感,也能区分“这是我的兴趣”和“我要增加一种兴趣”。

Talkie兴趣页面的红色选中标签、自填入口与跳过按钮
兴趣页中央|红色标出已选内容,下方保留自定义和跳过路径。

四种题型共享页面骨架,各自保留表达空间

图片题用四格插画让人辨认动物,选词题把选项排成纵向条目。口语题中央留给句子和麦克风,组句题则把已选词放进白色区域,下方是候选词块。不同练习用不同的作答方式,这比强行套成相同卡片更贴近内容。

这些屏幕仍然保留顶部进度,反馈语和Continue靠近下方。看完题目、得到回应、继续下一题的视觉顺序是稳定的。对语言练习反馈设计而言,统一的应是任务阶段,题目区域可以自由变化。

口语页在肯定反馈下面补了句意,回应比单独一句“很好”多了一点学习内容。后续评审可沿着这个方向检查错误答案、重试和词块撤回;它们是否存在、点击后怎样出现,当前静态图无法确认。

图片题的动物都画在相似浅绿方块里,选中的猫多了一圈深色边界。红色在发音按钮上,边框在答案上,两个动作没有抢用完全相同的样式。相邻的两只猫形象接近,正式题库还需要检查图像能否对应唯一答案,这属于内容检查,不能靠漂亮反馈替代。

组句题的已选词从左向右排在白色区域,候选词中的已用位置则变成浅色块。空白与占位表现了词块的来去关系。若再补一个移回候选区的画面,设计师和开发者就能一起确认撤回方式,避免只有正确完成时的好看状态。

Talkie图片、选词、口语和词块题中的反馈与继续动作
练习页底部|四种题型在相近位置显示结果和继续入口。

让角色活泼,让选择可以复述

浅绿背景让大段空白显得柔和,珊瑚红集中在选项、发音和录音等位置,插画的黑色线条又把轻松感拉回来。题目中文字没有沿用夸张造型,因此角色与教学信息各有自己的语气。

目标后的庆祝页写着时长与词汇数量的关系。这可以作为文案排布来观察,不能当成实际学习效果。教育产品借鉴这种奖励页时,更适合告诉人刚完成了哪些设置、接下来会练什么,让鼓励有可核对的内容。

设计检查清单

  • 连续翻看入门页,确认返回、进度和继续的位置一致。
  • 把新增兴趣和已选兴趣做成可区分的状态。
  • 为图片题、口语题分别补齐错误与重试画面。

准备做一款学习产品?

课程内容、首次使用设置和练习反馈,需要一起放到真实屏幕里看。界达设计工作室(JVDS)提供UI/UX设计与网站设计、开发服务,可协助梳理学习产品的界面与介绍网站。

联系界达设计,聊聊你的项目

链接复制成功

从想法到落地,我们一起完成

以用户体验为核心,打造真正可用、可增长的数字产品

和我谈谈您的项目