八、用户体验设计

四层体验从浏览到学习

金字塔入口 → 词条列表 → 详情展开 → 学习模式。层层递进，从发现到掌握。

◇

金字塔入口

可交互总览

▦

词条列表

筛选+搜索+排序

☐

详情展开

16字段完整呈现

↻

学习模式

闪卡+推送

8.1

入口：金字塔总览

用户进入「英语单词术语」栏目，首先看到一个可交互的金字塔图——点击展开，层层深入。

插件与扩展 Plugins & Extensions

70 / 70

VS Code 插件

Figma 插件

浏览器扩展

应用软件 Applications

320 / 520

Figma

Sketch

Photoshop

Illustrator

Premiere

After Effects

Word / Pages

Excel / Numbers

Keynote / PPT

开发工具 Dev Tools

280 / 350

VS Code

Xcode

AI 编程工具

Git / GitHub

浏览器 DevTools

部署运维

编程语言 Languages

490 / 490

通用概念

HTML

CSS

JavaScript

Swift

Python

TypeScript

操作系统 OS

310 / 310

计算机基础 Fundamentals

330 / 330

点击任意一层
展开该层全部子分类

点击子分类
进入词条列表页

进度显示
当前词量 / 目标词量，直观呈现

8.2

词条列表页

面包屑导航 + 筛选过滤 + 搜索排序 + 卡片网格。多种维度帮助用户快速找到目标词条。

Frame

画框容器

Component

组件

Auto Layout

自动布局

—

Variant

变体

Instance

实例

Constraints

约束

8.3

词条详情

展开卡片或弹窗显示全部 16 个字段。信息分层呈现，从核心到补充，一目了然。

Opacity

/oʊˈpæsəti/

noun

频率 5

不透明度

The degree to which an element is see-through, from 0% to 100%.

📍坐标L1-UI 界面通用

📊CEFRC1

常见软件

FigmaPhotoshopIllustratorAfter EffectsCSS

界面语境：Opacity: 80%（属性面板）

常见搭配

reduce opacity降低不透明度

set opacity to设置不透明度为

layer opacity图层不透明度

💡 提示
Opacity 影响整个图层（含子元素），Fill 只影响填充色不影响效果。
CSS 中 opacity: 0.8 = 80%

8.4

学习模式可选功能

四种学习模式满足不同场景：闪卡自测、按频率深入、按软件聚焦、每日推送。

↻闪卡模式

随机抽词，显示英文 → 用户猜 → 翻转显示中文释义。经典记忆训练方式。

随机抽取词条，自测记忆

翻转显示完整释义

标记已掌握 / 未掌握

▲按频率学习

先学完频率 5 的全部词 → 再学频率 4 → 逐级深入。投入产出比最高的学习路径。

频率 5 → 每日必见词

频率 4 → 高频专业词

逐级深入，稳步推进

◎按软件学习

选择"我用 Figma" → 只显示 Figma 相关词条。聚焦工作场景，学以致用。

选择常用软件

只显示相关词条

工作即学习，即学即用

⏰每日推送

每天 10 词，从未掌握池中按频率抽取。日拱一卒，循序渐进。

每天10 个词条

从未掌握池按频率抽取

支持邮件 / App 推送

闪卡示意 · 点击翻转

Opacity

点击翻转查看释义

体验就绪

进入词库，开始你的界面英语学习之旅

进入词库