正在加载页面…
/ 三网边缘节点加速连接中
兔兔龙小剧场 / 全速小跑
“兔兔龙正迈着小短腿,全速帮你搬运页面内容…”
跳到正文
ANS
VibeHub
术语图鉴
实践指南
写需求
课程
练习
EN
返回 ANS
搜索
正在进入 VibeHub 实训中心…
/ 正在加载 AI 实战词典、互动闯关与三分钟配方
兔兔龙小剧场 / 狂敲键盘
“兔兔龙正戴上黑框眼镜,帮你把 AI 黑话翻译成人话…”
前端 VibeCoding 术语 | ANS VibeHub
AI
54
前端
146
后端
73
产品
25
测试
14
技术栈
20
Git
15
设计风格
24
收藏
0
术语图鉴
前端
146 个词条
网页基础
15 个词条
前端
Frontend
老听人说前端、后端,这两个到底有什么区别?
组件
Component
把这个重复出现的商品区做成组件,改一个地方就能同步更新。
状态
State
提交按钮点下去先显示保存中,成功或失败后再更新提示。
Markdown
AI 写的文档里全是 # 和星号,这是什么?能变成好看的排版吗?
HTML
AI 写出来的代码里一堆 < > 和英文单词,这些东西是干嘛的?
CSS
按钮能点但颜色一直是灰色,帮我找出是哪条样式把主题色覆盖了。
文档对象模型
DOM
点击新增后页面确实多了一条任务,但源 HTML 里找不到它,帮我确认运行时到底插入了什么。
页面标题
Title Tag
每个商品详情页的浏览器标签都显示对应商品名,同时保留页面里的 H1。
页面元数据
Page Metadata
请分别检查这个页面在标签页、搜索摘要、链接分享和安装入口里显示了什么。
网站图标
Favicon
把网站在标签页和书签里的小图标换成我们的品牌图形,但不要改页头 Logo。
Open Graph
文章页的分享卡要有正确标题、摘要、绝对图片地址和规范 URL,改完请用真实分享预览检查。
Web 应用清单
Web App Manifest
检查 Web App Manifest 的名称、图标、start_url 和 display,重新安装后验证启动结果。
撤销
Undo
这个改动不对,把这一步撤销掉,回到我动手之前的样子。
无障碍
Accessibility
帮我检查一下页面的无障碍:图片有没有文字说明、所有按钮能不能用 Tab 键点到、对比度够不够。
语义化标签与标题层级
Semantic HTML
SEO 检查说我页面缺少 H1,什么意思?
小程序
6 个词条
小程序
Mini Program
我想让顾客在微信里预约,不用再装一个 App。
WXML
小程序这页加一个活动标题和预约按钮。
WXSS
把小程序里的预约按钮做醒目一点,周围也留点空。
rpx
同一个按钮尺寸,换一台手机怎么变宽了?
页面生命周期
Page Lifecycle
在详情页改完预约,返回列表怎么还是旧时间?
分包加载
Subpackage Loading
首页先打开,不常用的售后页能不能晚点再加载?
按钮与链接
2 个词条
按钮
Button
帮我加个按钮,点了就能把内容存下来。
链接
Link
这段文字要能让人点,点了跳到另一个页面。
表单
19 个词条
输入框
Input
页面上要有个填邮箱的地方。
多行文本框
Textarea
要让用户写一大段话,一行肯定不够。
数字输入框
Number Input
数量那里只能填数字,最好能直接按加减。
单选框
Radio
这几个选项只能选一个,选了新的要把旧的取消掉。
复选框
Checkbox
这几个选项不冲突,用户想选几个都行。
开关
Switch
像手机设置里那样,这个功能一拨就开、再拨就关。
滑块
Slider
价格范围想用一根可以拖着走的滑杆来调。
评分
Rate
想让用户给商品打个分,用星星就行。
选择器
Select
选项有几十个,全摆出来太占地方,收起来点一下再挑。
自动完成
Autocomplete
输入前几个字,下面自动猜我要写什么,点一下就补全。
级联选择器
Cascader
选地址那种,先选省、再选市、再选区,一层层点下去。
树选择
Tree Select
选项是一层套一层的,得能展开再选。
日期选择器
Date Picker
日期别让用户手输,给个日历直接挑。
时间选择器
Time Picker
让用户选几点几分,别让他自己打字。
上传
Upload
用户要能把自己的图片传上来。
表单
Form
帮我做个注册页,用户填完信息点提交那种。
颜色选择器
Color Picker
主题色想让用户自己挑,别写死。
表单标签
Label
每栏前面得写清楚要填什么,不然用户看不懂。
占位文字
Placeholder
邮箱输入框的占位文字写成 you@example.com 这样的示例格式,标签「邮箱」要一直显示,不能只靠占位文字。
内容展示
25 个词条
表格
Table
订单数据堆在一起太乱了,帮我排成表格,一行一条。
列表
List
这些内容一条一条排下来就行,格式统一。
卡片
Card
每个商品做成一张小卡片:图在上面,名字价格在下,整张都能点。
标签
Tag
文章得标出是教程还是新闻,让人一眼能分出来。
徽标
Badge
消息图标右上角那个红色小数字,显示有几条没读。
头像
Avatar
评论区得看到是谁在说话,带上头像。
描述列表
Descriptions
详情页把信息列清楚就行:名称、时间、状态,一项一项的。
统计数值
Statistic
首页要几个特别大的数字,比如用户数、成交额。
标签页
Tabs
内容太多了,帮我分几个页签,点一下就换一屏。
分段控件
Segmented
就两三个选项并排,点哪个选哪个,像 iPhone 那种切换条。
折叠面板
Collapse
问题很多,先只显示标题,点开了再看答案。
时间轴
Timeline
物流到哪一步了,按时间排出来,让用户看得明白。
树形控件
Tree
文件夹那种一层层展开的,点小三角展开下一级。
走马灯
Carousel
首页大图想几张轮着播,自动切换,还能点左右箭头。
空状态
Empty
没数据的时候别一片空白,放张图加句话,告诉用户接下来怎么办。
图片
Image
文章里要能插图,手机上别变形。
文件项
File
传上来的附件得能看到文件名和大小,还能删掉。
图标
Icon
按钮上加个小图形,让人不看字也知道是干嘛的。
引用
Quote
把这句别人的原话单独突出一下,标明是谁说的。
视频
Video
我想在页面里放个视频,用户点一下就能看。
聊天界面
Chat UI
把这个聊天窗口补全消息列表、输入区、发送中和失败重试,别把错误藏起来。
筛选
Filter
只显示本周、未完成、负责人是我的任务,其他任务先不看。
图表
Chart
用图表比较这六个月的订单变化,但不要让人只看颜色猜数值。
应用图标
App Icon
用现有品牌形状做一个适合主屏幕、搜索和设置显示的方形 App Icon,别改应用里的工具栏图标。
排序
Sort
报价列表打开时最新的放最上面,金额那列能点一下按大小排。
弹窗与提示
12 个词条
警告提示
Alert
页面上方要一直挂着一条黄色提示,告诉用户账号快到期了。
轻提示
Toast
就是那种角落冒出来一句“已保存”,过两秒自己消失的小提示。
通知
Notification
右上角铃铛点开,里面列出所有系统消息。
弹窗
Modal
点击按钮后弹出一个居中窗口,背景变暗,必须确认或关闭后才能继续。。
抽屉
Drawer
从右边滑出来一块面板看详情,背后的列表还能看见。
气泡确认框
Popconfirm
点删除时在按钮旁边冒一句“确定吗”,别直接弹大窗。
气泡卡片
Popover
点一下头像,旁边浮出一张小卡片显示资料。
文字提示
Tooltip
鼠标放上去飘出一行小字,解释这个图标是干嘛的。
进度条
Progress
上传文件得让用户看到传到多少了,不然以为卡死了。
骨架屏
Skeleton
加载时先显示灰色的框框占位,别一直转圈。
结果页
Result
付款成功后显示付款结果、订单信息和下一步操作,别直接跳走。
旋转加载指示器
Spinner
加载慢的时候给个转圈的东西,不然用户以为坏了。
导航
9 个词条
导航菜单
Menu
功能越来越多,得有一列菜单让用户找得到入口。
面包屑
Breadcrumb
页面层级太深了,顶上显示一下当前在哪,能点回上一层。
分页
Pagination
内容太多一页放不下,底下加上 1、2、3 翻页。
步骤条
Steps
下单分三步,顶部要显示现在走到第几步了。
下拉菜单
Dropdown
鼠标放到用户名上,往下展开“设置”“退出”几个选项。
锚点
Anchor
页面很长,点右边的小目录直接跳到对应段落。
回到顶部
Back to Top Button
滚到很下面之后,右下角出个按钮一键回顶部。
跳过导航链接
Skip Link
有人说用键盘得按好多下 Tab 才能到正文,能不能让他一步到位?
搜索
Search
在项目列表顶部加搜索,输入名称或关键词后快速找到可能相关的项目。
官网区块
10 个词条
首屏
Hero
网站最上面那块太空了,想要大图加大字那种,一眼知道我们是干嘛的。
CTA
想在页面里放个显眼的地方,让人看了就想点“免费试用”。
用户原声
Customer Testimonial
光自己夸不够,放几条真实用户说的话更有说服力。
页头
Header
最顶上那条怎么排?logo、导航、登录按钮都得塞进去。
标志
Logo
保持品牌核心形状,为桌面、移动和深色背景选择合适的 Logo 变体,分别截图验收。
顶部导航栏
Navbar
顶上的导航要把主要栏目都放进去,我在哪个页面得看得出来。
页脚
Footer
页面最底下那块也得有,放点链接和版权信息。
FAQ
把用户最常问的问题整理成一问一答,放在页尾。
定价区
Pricing
做三档套餐并排对比,中间那档标个“最受欢迎”。
社会证明
Social Proof
放一排合作客户的 logo,再加一句“10 万+ 团队在用”。
页面布局
9 个词条
顶部导航布局
Top Nav
最经典那种结构:上面一条导航,下面全是内容。
左侧栏布局
Sidebar
左边一列功能菜单,右边大块区域显示内容,像后台那样。
单页滚动布局
Single Page
所有内容放在一个长页面里,往下滚就能看完。
文档三栏布局
Doc Layout
像技术文档那样:左边目录、中间正文、右边本页大纲。
卡片网格布局
Card Grid
内容做成一排排卡片,宽了多放几列,窄了自动换行。
居中窄栏布局
Centered Column
内容别铺满全屏,中间窄窄一条、两边留白,像博客那样。
瀑布流
Masonry
图片高矮不一样,别硬裁成一样高,矮的下面自动补上新的就行。
分屏布局
Split-screen
首页左右各一半,左边放品牌介绍,右边直接登录,手机上改成上下。
响应式设计
Responsive Design
手机宽度下把三列改成一列,桌面的导航和卡片布局保持不变。
CSS 布局
11 个词条
间距
Space
元素都堆在一起了,帮我把留白调舒服点:相关的靠近,不相关的分开。
外边距
Margin
这个块和旁边那个太贴了,把它们之间撑开一点。
内边距
Padding
字都顶到盒子边上了,让内容和边框之间留点空。
弹性布局
Flex
把这几个按钮排成一行,间距均匀,还能垂直居中。
网格布局
Grid
这些卡片排成整齐的格子,屏幕窄了自动变成两列。
层级
Z-Index
那个弹窗被别的内容挡住了,让它显示在最上面。
吸顶
Sticky
往下滚的时候,让导航栏一直钉在页面顶部。
定位
Position
把这个小图标固定在卡片右上角,别的内容怎么排都不影响。
居中
Centering
这个框帮我水平垂直都居中——怎么就那么难?
盒模型
Box Model
这个卡片明明设为 320px,为什么加了内边距后反而挤出容器?
内容溢出
Overflow
这张卡片的内容底部被遮住了,帮我检查是不是纵向溢出,别让按钮被裁掉。
文字
3 个词条
排版
Typography
这页文字全糊在一起了,帮我分出标题、正文和提示,一眼能看出重点。
衬线与非衬线
Serif & Sans
标题想要那种笔画带小装饰的字体,正文用干净点的。
文本截断
Text Truncate
标题太长就把后面的藏起来,结尾显示省略号。
外观
12 个词条
分割线
Divider
上下两块内容太挤了,中间加一条淡淡的线隔开。
圆角
Border Radius
把卡片的尖角磨圆一点,看着柔和些。
阴影
Shadow
给卡片下面加一层淡淡的投影,让它像浮在页面上。
透明度
Opacity
这张图太抢戏了,把它调得半透明一点。
渐变
Gradient
背景别用纯色,让颜色从蓝慢慢过渡到紫。
圆角的气质
Corner Feel
全站的圆角统一一下,别有的方有的圆,看着乱。
毛玻璃
Backdrop Blur
导航栏做成半透明的,后面的内容滚过去时模模糊糊。
深色模式
Dark Mode
给产品加真正的深色模式,文字、边框、图表和代码块都要跟着切换。
设计令牌
Design Token
把主色、间距和圆角整理成设计令牌,别在每个组件里重复写一组数值。
对比度
Contrast
页面上那段灰色说明文字太费眼了,帮我调清楚一点。
视觉层级
Visual Hierarchy
这个页面看起来特别乱,什么都一样大。帮我排个主次:主标题最突出,说明次要一点,按钮最显眼。
减少动效
Prefers Reduced Motion
有人开了系统减少动效,我的页面动画还在动,要处理吗?
动画
6 个词条
过渡
Transition
按钮变色太突兀了,能不能慢慢变过去?
动画
Animation
让这个图标一直循环动,比如轻轻上下浮动。
缓动
Easing
动画一卡一卡的不自然,能不能像真实的东西那样有快有慢?
弹性
Spring
弹窗出现时带一点回弹,像弹簧那样轻轻晃一下。
渐入渐出
Fade In / Out
切换内容的时候,让旧的淡出、新的淡入。
关键帧
Keyframe
让 logo 一直转,AI 说要用 keyframes?
鼠标
7 个词条
悬停
Hover
鼠标放上去的时候按钮变个色,让人知道它能点。
按下
Active
点下去那一瞬间,点击按钮时需要有明确的按下凹陷反馈。
聚焦
Focus
Tab 键切换的时候看不出当前停在哪,能不能给个明显的框?
拖拽
Drag
这些卡片希望能按住拖动,换个顺序。
禁用
Disabled
表单没填完之前,提交按钮要是灰的、点不了。
鼠标指针
Cursor
鼠标移到能点的东西上,变成小手。
选中高亮
Selection
用户划选文字时的底色,想换成品牌色。