YL
IMAGE & MEDIA

图片与媒体 UI 设计模式

图片与媒体(Image & Media)分类收录 10 种常用界面模式:图片揭示动画、前后对比滑块、悬停放大图、渐变蒙层图、设备样机、画廊网格等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

图片与媒体

Image & Media

10 条

图片揭示动画

Image Reveal (clip-path)

揭示clip-path擦除进场

图片被一层"幕布"盖住,进场时从一侧擦开——比淡入有力得多。

前后对比滑块

Before/After Slider

对比滑块前后拖拽

拖动中线左右滑,两张图实时分割对比——修图、装修、改造类内容的王牌。

悬停放大图

Hover Zoom

悬停放大缩放卡片

悬停时图片缓缓放大 5-12%,配文字浮现——列表卡片的标准交互。

渐变蒙层图

Gradient Overlay Image

蒙层压暗scrim可读性

图片底部压一层透明→深的渐变,白字放上面永远清晰可读。

设备样机

Device Mockup

样机手机设备框App

App 截图套进带刘海/灵动岛的手机壳里,产品瞬间可感。

画廊网格

Image Gallery Grid

画廊网格图片墙混排

大小格子混拼的图片墙:一张 2×2 主图压阵,小图错落围绕。

灯箱

Lightbox

灯箱大图预览画廊

点击缩略图后深色幕布升起,大图居中 + 左右切换 + 底部说明。

模糊占位加载

Blur-up Loading

懒加载模糊渐进LQIP

先显示一张 20px 的模糊缩略图,真图加载完淡入接替——Medium 的经典手法。

照片堆叠

Photo Stack

照片堆叠拍立得实体感

几张照片像桌面上的实体照片一样错位叠放,悬停时散开。

拼贴布局

Collage Grid

拼贴杂志图文自由

一张大图 + 错落小图 + 文字块的自由拼贴,像杂志版面一样有呼吸。