语言学习 App 设计:首页改版前后对比

语言 App 的首页只有一个任务:让学习者进入今天的课程。下面的初稿有学习者需要的一切,但读起来像一份成绩单。数据是一行灰色的句子,单元是十二行带百分比的等权重条目,一个吵闹的横幅在推销订阅,而下一步只是底部一个小小的 CONTINUE。

修改后保留了每一项功能,只改变它们的外观和位置。数据变成四个朴素的计数器,单元变成实心横幅,列表变成一条节点之路,再用一个气泡写上「开始」。

整个界面,改版前后

新手初稿

改进后

左边,所有东西的分量都一样。9 px 的数据行、吵闹的黄色横幅、十二行课程和 CONTINUE 按钮同时在争夺注意力,没有一个在说「先点我」。

右边,界面从上到下按学习者的思路排列:我学得怎么样,这是哪个单元,我在单元的哪里,我该点什么。只有一条路、一个气泡和一个动作。

改了什么,量化对比

修改 1:数据保持在一行,朴素呈现

改前

改后

初稿的头部:Hola My Course 和 Spanish course,下面是 41 day streak 和一个西班牙语下拉菜单,接着是一条灰色栏,写着 Level A2 62.5%、XP 1240、Hearts 4/5、Gems 320、League Silver,再下面是一个黄色横幅,写着 GO PLUS NOW、首月五折和一个 UPGRADE 按钮。对比之下只有一行:一面西班牙国旗、带 41 的火焰、带 320 的宝石、带 4 的爱心和一个小小的黄色 PLUS 标签。

初稿把数据拼成了一句话:「Level A2 62.5% | XP 1240 | Hearts 4/5 | Gems 320 | League Silver」。它只有 9 px,是灰色的,还得像文字一样去读。每天打开 App 的学习者不想读自己的数字,他们只想瞥一眼。

修改后给每个数字配上图标和颜色:火焰代表 41 天连续,宝石代表 320,爱心代表 4。它们在一行里以 16 px 粗体排开,眼睛一次扫过就能看到。西班牙语下拉菜单变成了国旗,点开就是语言列表。带着五折和 UPGRADE 按钮的「GO PLUS NOW!!!」横幅,缩成行尾一个小小的 PLUS 标签,优惠从它那里打开。

等级、XP 和 League Silver 挪到了「我的」标签页。它们很重要,但不必每次打开 App 都出现。

可复用的规则:把学习者每天都看的数字做成图标,其余的挪到一步之外。

修改 2:给单元一个实心横幅

改前

改后

一行文字,Unit 3 为粗体,Ordering Food 为灰色,右侧是带下划线的 Guide 链接。对比之下是一个实心紫色横幅,小型大写字母写着 SECTION 1, UNIT 3,20 px 白色的 Ordering Food,一条细分隔线和一个书本图标,底边有一道更深的边。

在初稿里,单元只是个标签。「Unit 3」和「Ordering Food」与一个文字链接排成一行,没有任何东西表明这是下面所有内容所属的标题。

修改后把它做成横幅:350 x 76,圆角 12,品牌紫色,20 px 的标题,以及让它看起来可以按下去的 4 px 深色底边。它是界面上唯一的大块色彩,所以学习者不用读字就知道自己在哪个单元。Guide 链接变成右侧细分隔线后的书本图标,依然一步可达。

可复用的规则:当界面上有一个统领下面所有内容的标题时,给它一块颜色,而不是一行文字。

修改 3:把列表变成一条路

改前

改后

列表中的十二行,每行有图标、名称,右侧是 XP 和百分比:三行带紫色对勾和 100%,Ordering Drinks 带播放图标和 0%,然后是八行带灰色锁和 0%,从 Main Courses 到 Unit Review。对比之下是一条蜿蜒的路,上面有五个粗壮的圆圈:两个紫色打勾的节点,一个带黄色环的紫色星形节点,以及两个灰色锁定节点。

这是撑起整个界面的修改。在初稿里,每节课都是一行 42 px 的条目,11 px 的名称加两个 9 px 的数字。十二行大小相同,等于说十二件事同样重要,学习者还得自己找出那个没完成的。

这条路只靠形状和颜色就说清了一切。已完成的节点是带对勾的紫色,当前节点是带星星和进度环的紫色,锁定的则是带锁的灰色。每个节点 64 px,底边深 5 px,当前节点外的环是 92 px,十二节课中的三节用黄色填满。隔着房间也能看出单元的状态,完全不需要文字。

什么都没有丢。名称从节点里打开,XP 显示在当前课程的气泡里,100% 变成了对勾,0% 变成了锁。其他课程在路的更远处。Duolingo 让这条路径成为学习类 App 的标准,它在这里奏效的原因也一样:进度是你沿着走的东西,而不是你读的东西。

可复用的规则:当条目有状态和顺序时,用形状和颜色表示状态,用位置表示顺序。

修改 4:在当前节点上放一个「开始」气泡

改前

改后

列表下方右下角有一个紫色小按钮,写着大写的 CONTINUE。对比之下是一个带细边框的白色气泡,写着 Ordering Drinks 和 Start, 12 XP,指针朝下指向黄色环里的紫色星形节点。

在初稿里,下一步是十二行下面一个 91 x 30 的 CONTINUE 按钮。它离自己要开始的课程很远,学习者得自己把两者联系起来。它还是全大写,和上面的 UPGRADE 按钮一样,所以看起来不像主要操作。

修改后把操作放在它作用的对象上。当前节点上方的气泡写出课程名「Ordering Drinks」,并写着「Start · 12 XP」。它有 2 px 细边线,没有阴影,所以读起来像是路的一部分。只有当前课程有名字,所以只有一件事可点。

可复用的规则:把主要操作放在它作用的对象旁边,并在操作里写出对象的名称。

更小的修改

• 每项功能都保留。 西班牙语下拉菜单变成国旗。My Course 标题变成「学习」标签。League Silver 和联赛标签挪到「我的」标签页。优惠从 PLUS 标签打开。
• 统一边距。 初稿左边 14 px,右边 12 px。修改后的界面两侧都是 20,块与块之间是 16。
• 一对强调色。 紫色(#7C3AED)是横幅和节点上的操作色。太阳黄(#FFC53D)只用于进度环和 PLUS 标签。
• 字号体系。 初稿的字号在 9 到 15 px 之间。修改后的界面整体更大,计数器 16 px,单元标题 20 px。
• 扁平的标签栏。 实心和描边图标混用的五个标签,变成风格统一的四个图标,没有文字标签。
• 没有阴影。 层次感来自更深的 4 px 和 5 px 底边,而不是投影。

审视你自己的学习界面

获取 Figma 文件

这个免费文件包含新手初稿、改好的界面,以及每个部件的组件。

免费 Figma 文件

语言学习界面改版,前后对比

两个界面和每个部件都是 Figma 组件。免费,仅可查看,复制到你的草稿即可使用。

在 Figma 中打开

常见问题

语言学习 App 的首页应该怎么设计?

顶部放几个朴素的计数器,接着是实心的单元横幅,一条用颜色和形状表示状态的课程节点之路,以及当前课程上的一个「开始」气泡。学习者应该不用读字,就能看出自己在哪里、该点什么。

为什么语言 App 用路径而不是列表?

路径一眼就能显示状态和顺序。已完成、当前和锁定的课程看起来各不相同,学习者不必读完十二行才能找到下一节。

语言 App 首页应该显示哪些数据?

学习者每天都看的那些:连续天数、宝石或积分,以及爱心。等级、XP 和联赛可以放在「我的」标签页。

学习类 App 的升级优惠应该放在哪里?

作为数据行里的一个小标签,点开才显示优惠。课程上方的大横幅会和课程争夺注意力。

课程节点应该多大?

大约 64 px,这是舒适的拇指点击目标。修改后的界面使用 64 px 的节点,底边深 5 px,当前节点外有一个 92 px 的环。

来源

• 两个界面都是我们自己在 Figma 中设计和测量的。App 名为 Hola,所有数据都是虚构的。两个界面的数字保持一致:41 天连续、320 宝石、4 颗爱心,以及 12 节课中的第 4 节 Ordering Drinks,12 XP。
• 研究的模式:Duolingo 的学习路径,以及 Babbel。
• 图标来自 Phosphor(MIT)。字标使用 Baloo 2 ExtraBold。没有照片。
• 最初作为轮播图发布在 App Brainy。