Appearance
最近在做小程序，但是感觉自己的 UI-UX 总是做的不好，又不知道怎么让 AI 改。整理了常见的 20 个 UX 交互，不用知道他们是怎么实现的，只需要把名字和对应的场景对应起来就好了。
1. 可滑动标签页与同步指示器 (Swipeable Tabs)
这个是很常见的 UX 了，几乎主流软件都有这种交互，虽然天天用，却不知道它的名字。
传统的 Tab 切换往往是生硬的点击跳转。而这个交互模式加入了两个细节：
- 正文区域支持手势滑动
- 头部的指示器（那根小短线）会根据你的滑动进度，按比例平滑过渡
2. 卡片展开转场 (Card Expansion Transition)
这个也是一个比较常用的 UX 交互模式，能够得到丝滑的转场效果。
在展示卡片内容（比如摘要卡片、工具卡片）时，传统的做法是点击卡片，然后硬切到一个新页面。这会让用户产生"我离开了刚才那里"的错觉。
使用卡片展开转场，元素会在原地平滑放大，无缝变形为详情页。视觉焦点没有发生跳跃，体验极为连贯。
3. 共享元素转场 (Shared Element Transition)
如果你是苹果的用户的话，那么你对这个 UX 一定不会陌生。
这是 UI 设计中非常高级的一种微交互。当用户从列表进入详情时，列表中的图片或标题等核心元素，会直接"飞"到详情页对应的位置上。
它在视觉上连接了前后两个状态，大大降低了界面突变带来的认知负荷。对于图片、笔记或是学术论文类应用，这是提升产品调性的绝对利器。
4. 滑动胶囊底部导航 (Sliding Capsule Bottom Navigation)
iOS 相册同款导航栏，用这个你的 App 立马变得高级起来了。
底部导航（Bottom Bar）是移动端使用频率最高的区域。相比于只是单纯地改变图标颜色，这个模式引入了一个"胶囊"状的背景滑块。
当你切换 Tab 时，这个胶囊会像水滴一样滑过去包裹住新的图标。这种充满生命力的动态反馈，能极大缓解用户在枯燥操作中的疲劳感。
更多资源
GitHub 仓库：https://github.com/igniscloud/ui-ux-demo
在线体验：https://igniscloud.github.io/ui-ux-demo/
一句话总结
记住这 20 个 UX 交互模式的名字和场景，让 AI 做 App 的时候也能做出更丝滑的 UX。
