YL
INTERACTION

交互进阶 UI 设计模式

交互进阶(Interaction)分类收录 12 种常用界面模式:自定义光标、文字选中样式、纵向时间线、拖拽滚动、下划线动画标签、看板拖拽等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

交互进阶

Interaction

12 条

自定义光标

Custom Cursor

光标跟随缓迟仪式感

小圆点 + 缓迟圆环的双层光标,悬停可点元素时圆环放大——仪式感拉满。

文字选中样式

::selection Styling

选中划词细节品牌

用户划选文字时的高亮颜色——一行 CSS 的小细节,藏着品牌感。

纵向时间线

Vertical Timeline

时间线里程碑历史节点

一条竖线串起一列节点:圆点 + 日期 + 事件,品牌故事的标准讲法。

拖拽滚动

Drag to Scroll

拖拽横向滚动抓手

桌面端也能像手机一样按住拖动横向列表,光标变成"抓手"。

下划线动画标签

Animated Underline Tabs

下划线标签滑动指示条

一条 2.5px 的品牌色下划线在标签间平滑滑动,比"跳变"高级一个档次。

看板拖拽

Kanban Drag & Drop

看板拖拽任务Kanban

卡片在列间拖来拖去,被拖的卡微微倾斜浮起,目标列出现落点指示。

分页控件

Pagination

分页页码列表翻页

页码 + 省略号 + 前后箭头:当前页品牌实心,其余可点。

筛选标签

Filter Chips

筛选标签多选chips

一排可多选的胶囊标签,选中的变深色并长出小叉——可随时移除。

通知堆叠

Notification Stack

通知堆叠消息层叠

多条通知像扑克牌一样层层叠起,越往后越小越淡——空间减半信息不减。

滑动删除

Swipe to Delete

滑动删除手势移动端

列表项左滑露出红色删除层,iOS 邮件同款手势。

无限滚动

Infinite Scroll

无限滚动加载信息流

滚到底部自动加载下一页,底部一枚小 spinner 代替"下一页"按钮。

快捷键提示

Keyboard Hints

快捷键kbd键帽效率

<kbd> 键帽样式的快捷键提示:描边 + 底部厚边,一眼"可按"。