THE JOURNEY · 六站旅程
跟着做一次东西,需要的词自然就都遇上了。每站三分钟,学完即用。
STATION 01 / LAY THE GROUND
Every page begins as an empty room.
这一站的词,用来告诉 AI 你想把东西放在哪——先定骨架,再谈血肉。
本站 15 词
基础卡片
Card
内容分组容器。
悬浮卡片
Elevated Card
带一点阴影抬起。
描边卡片
Outlined Card
靠描边分层。
STATION 02 / SHOW THE WAY
A good interface walks ahead of its user.
这一站的词,用来告诉 AI 人该怎么在页面之间走通——导航、标签、步骤与折叠。
本站 38 词
下划线标签
Underlined Tabs
不同内容区域切换。细线跟着文字走,不要叫 Slider。
滑动指示标签
Tabs with Sliding Indicator
标签切换时底部指示线平滑滑动。
胶囊标签
Pill Tabs
选项是独立胶囊,当前项填充。
STATION 03 / LET THEM SPEAK
Every click is the user saying something.
这一站的词,用来告诉 AI 怎么让人表达自己——按钮、输入、选择与上传。
本站 67 词
主按钮
Primary Button
页面主操作。
次按钮
Secondary Button
与主按钮配对。
描边按钮
Outline Button
弱一点但仍是按钮。
STATION 04 / ANSWER EVERY ACTION
Silence is the only bad answer.
这一站的词,用来告诉 AI 每个动作都该有交代——反馈、加载、空状态与浮层。
本站 32 词
徽章
Badge
数字或状态点,常挂在图标上。
类别标签
Tag
表示类别,通常不可点删。
芯片
Chip
可交互、常可关闭。不是 Tag。
STATION 05 / LAY OUT THE DATA
Data, set down gently.
这一站的词,用来告诉 AI 怎么把数据安顿好——表格、看板、甘特与日历。
本站 18 词
表格
Table
静态数据表。
数据表
Data Table
可排序筛选的业务表。
数据网格
Data Grid
键盘导航、单元格交互。不是静态 Table。
STATION 06 / GO FURTHER
From a page, to a product.
这一站的词,用来告诉 AI 走得更远——移动端、桌面端,以及 AI 应用自己的界面。
本站 42 词
主从布局
Master-detail Layout
左列表右详情。
属性编辑栏
Inspector Panel
选中对象的属性。
筛选栏
Filter Bar
一排筛选控件。
ACT II · 幕后之旅
保存去了哪里?AI 为什么听不懂?八节场景小课,把幕后的事说清。