# Lingoway —— 围绕开口、声调与重复设计的中文学习产品

> 案例研究：自发的中文学习概念产品 —— 十六个界面、一套设计系统，以及教学模型背后的决定。

Source: https://ricardoportfolio.xyz/work/lingoway
Language: zh-Hans

---

Lingoway
案例研究 · 02 / 04 · 自发概念项目
概念项目
产品 · 学习 · 体验与界面
# 为真实生活准备的中文。围绕开口、声调与重复来设计。
一个自发的中文移动学习概念，聚焦声调、实用对话与每日短练习 —— 从产品结构一直设计到各种练习模式。
阅读完整故事
![The Lingoway home screen](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20hero-frame.png)
角色
产品策略 体验与界面设计
时间
2026
范围
16 个界面 · 设计系统 学习流程
工具
Figma · 原型 移动端产品设计
![Lingoway case study cover](https://ricardoportfolio.xyz/art/Home%20%E2%80%94%20Lingoway-Banner.jpg)
01 — 问题
## 我想探究的落差：语言应用可以教完内容，却没让开口这件事变自然。
主流中文应用都有这个问题的某个版本：词汇量上去了，声调还是抽象的，对话来得太晚。
01
声调是孤立的
声调练习往往和词汇分开，学习者认得出词，却说不自然。
发音 · 声调系统
02
练习太像上课
我希望每天的短时练习比冗长、以翻译为主的课程树轻快得多。
体验 · 练习节奏设计
03
对话来得太晚
真正有用的句子常被锁在关卡后面，而不是早早出现在真实场景里。
进度 · 内容结构
04
离线就学不了
通勤的人在网络不稳时，同样需要课程、卡片和音频。
基础架构 · 离线优先
02 — 洞察
核心论点
## 声调、语境与重复，应该活在同一个循环里。
这套系统把发音当作每个词的一部分，把实用对话放在离表层很近的地方，并让核心练习可以离线使用。
「教你真的会说的那种语言，而不是只会读的那种。」
03 — 具体的工作
## 一套学习系统，十六个互相连接的界面。
每个界面都围绕同一个想法设计：减少阻力，让学习者可以完全专注在语言上。
![The core Lingoway screens](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20core-screens.png)
![The Lingoway learning flow](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20learning-flow.png)
![Lingoway practice modes](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20practice-modes.png)
![Lingoway screens in context](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20phones-stage.png)
04 — 关键决定
## 决定它形状的判断。
四个结构性决定，定义了这个产品的教学模型。
声调在哪里都用同一套颜色
拼音在词汇、卡片和练习里使用同一套声调配色，让发音始终留在语境中可见。
看实际效果
练习永远只差一次点击
扁平的导航让每日主页、HSK 路径和深度练习工具都很容易回到。
默认可离线
课程、卡片和练习都按无网络可用来设计；只有 AI 对话是例外。
先能用，再讲理论
练习从学习者真的说得出口的句子开始，再通过重复和造句把语法结构显出来。
05 — 回顾
## 为中文做设计，让语言本身成了界面的一部分。
当教学消失在交互里，界面才最好用。每一个声调配色、每一段练习时长、每一个导航捷径，都是刻意的产品决定，而不是装饰。
概念范围：16 个界面 · 10 种练习类型 · 覆盖 4 个 HSK 等级。
进入实验场
Lingoway Red
#E8501E — 主操作 / 活力
Warm Cream
#F4E5D5 — 画布 / 背景
Ink
#161615 — 界面框架 / 深色区块
下一个案例 →
03 Jade Dynasty
有传统，但不落俗套。
查看案例
李启达 Ricardo Costa
产品 · 品牌 · 视觉 · 前端
© 2026 Ricardo Lourenço da Costa
Figma 设计 · React 构建
英国利兹