ViboDesign
CATEGORY

调感觉

样式与动效 · 6 个词条

Build with precision

文本乱序

Text Scramble

文字先显示成一串乱字符,再逐步落定成真正内容,常用来做科技感标题动画。

弹簧动画

Spring Animation

像被弹簧拉着一样,先冲一下、轻微回弹,再稳稳停住的动效。

缓动对比

同样距离,不同节奏

Linear匀速直走
Move
Ease-out快进慢停
Move
Ease-in-out先蓄力再收住
Move

缓动

Easing

动画不是一直匀速跑,而是按一条速度曲线决定先快还是先慢,这条曲线就叫缓动。

这是一段很长很长的标题文案,用来展示两行截断之后尾部如何自动出现省略号。

https://vibodesign.app/docs/really-long-slug-for-preview

文本截断

Truncation

内容太长放不下时,用省略号或行数限制把它收住,避免把卡片或列表撑坏。

焦点环

Focus Ring

键盘或辅助技术把焦点移到某个控件上时,外面出现的一圈高亮边框,用来告诉你现在操作到哪了。

拖拽排序

抓住卡片,拖到新位置

3

需求梳理

明确目标与范围

线框草图

摆结构与信息层级

视觉定稿

统一风格与细节

拖放

Drag & Drop

按住一个元素把它拖到别处放下,用来排序、归类、上传或移动内容。

调感觉 · ViboDesign