语义层
听懂这些词。
用大白话解释 UI 与设计术语——毛玻璃、Bento 网格、视觉层级,每个词条都链到对应的组件、风格与可复制的 Prompt。
毛玻璃效果 磨砂玻璃质感的半透明表面,能透出并模糊背后的内容。 查看词条 新拟物风格 在同色表面上用双向阴影「雕刻」出凸起或凹陷的元素。 查看词条 粗野主义 刻意不加修饰的原生美学:硬边框、默认字体、撞色。 查看词条 Bento 网格 大小不一的圆角卡片像便当盒一样整齐拼合的布局。 查看词条 拟物化 模仿真实材质与物理物体的界面设计。 查看词条 黏土风格 圆润、粉彩、像黏土捏出来的蓬松造型。 查看词条 深色界面 以深色表面、浅色文字和去饱和强调色构建的界面。 查看词条 渐变 两种或多种颜色之间的平滑过渡。 查看词条 视觉层级 通过编排让用户先看到最重要的内容。 查看词条 留白 元素之间与周围刻意留出的空隙。 查看词条 对比度 让元素彼此可分辨的亮度或颜色差异。 查看词条 圆角 元素边角的圆润程度。 查看词条 背景模糊 把元素背后内容模糊掉的 CSS 滤镜。 查看词条 微交互 回应单个用户操作的小动画反馈。 查看词条 悬停状态 指针停留在可交互元素上时的视觉变化。 查看词条 设计令牌 给设计决策起名并复用,如颜色、间距、圆角。 查看词条 间距刻度 一组固定的间距档位,通常按 4 或 8px 递进。 查看词条 视觉重量 元素吸引视线的强度。 查看词条 首屏主视觉 页面顶部承载主标题与行动召唤的第一屏区块。 查看词条 行动召唤(CTA) 引导用户完成关键操作的按钮或链接。 查看词条 吸顶导航 页面滚动时固定在视口内的导航栏或侧栏。 查看词条 栅格系统 让页面元素对齐的栏结构。 查看词条 字号阶梯 一组固定的字号与字重档位,构建文字层级。 查看词条 渐进式披露 先展示必需项,其余按需展开。 查看词条 骨架屏 加载时用灰色占位图形预演内容布局。 查看词条 空状态 列表或视图没有数据时的展示。 查看词条 轻提示(Toast) 自动消失、不阻塞页面的简短反馈消息。 查看词条 模态与遮罩 遮罩之上的对话框,处理完才能继续操作页面。 查看词条 命令面板 键盘唤起的搜索框,可执行任意动作。 查看词条 响应式设计 同一套布局自适应所有屏幕尺寸。 查看词条 缓动曲线 决定动画如何加速与收尾的曲线。
查看词条 动效时长 动画持续多久——界面元素压在 300ms 以内。
查看词条 弹性动画 用物理模拟代替固定曲线、带着速度收尾的动画。
查看词条 变换原点 元素缩放或旋转所围绕的锚点。
查看词条 错峰入场 让一组元素依次入场,用次序传达层级。
查看词条 进场与退场 元素出现与消失的成对动作——退场比进场柔和。
查看词条