IMAGE & MEDIA
图片与媒体 UI 设计模式
图片与媒体(Image & Media)分类收录 10 种常用界面模式:图片揭示动画、前后对比滑块、悬停放大图、渐变蒙层图、设备样机、画廊网格等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。
揭示clip-path擦除进场
图片被一层"幕布"盖住,进场时从一侧擦开——比淡入有力得多。
对比滑块前后拖拽
拖动中线左右滑,两张图实时分割对比——修图、装修、改造类内容的王牌。
悬停放大缩放卡片
悬停时图片缓缓放大 5-12%,配文字浮现——列表卡片的标准交互。
蒙层压暗scrim可读性
图片底部压一层透明→深的渐变,白字放上面永远清晰可读。
样机手机设备框App
App 截图套进带刘海/灵动岛的手机壳里,产品瞬间可感。
画廊网格图片墙混排
大小格子混拼的图片墙:一张 2×2 主图压阵,小图错落围绕。
灯箱大图预览画廊
点击缩略图后深色幕布升起,大图居中 + 左右切换 + 底部说明。
懒加载模糊渐进LQIP
先显示一张 20px 的模糊缩略图,真图加载完淡入接替——Medium 的经典手法。
照片堆叠拍立得实体感
几张照片像桌面上的实体照片一样错位叠放,悬停时散开。
拼贴杂志图文自由
一张大图 + 错落小图 + 文字块的自由拼贴,像杂志版面一样有呼吸。
🔍
没有匹配的模式
换个关键词试试,比如「滚动」「导航」「渐变」;也可以清空搜索框查看全部。