你知道自己想要什么,
只是不知道它叫什么。
看示例、学名字、理解场景,然后直接告诉 AI。
这里有 63 个真实的 UI Pattern,每一条都能点、能玩、能抄 Prompt。
这三个是独立开发者最常问的
点一下标题,下面的内容就展开;再点一下,收起来。
原图约 3–5MB,缩略图约 200KB。清理时可以选择「删除原图,保留缩略图」,这样浏览不受影响但能省下大部分空间。
可以。删除后的照片会进入「最近删除」,保留 30 天。在「最近删除」里选择「恢复」即可回到原位置。
系统会比较图片的内容哈希和拍摄参数。同一张图的不同分辨率、不同格式会被判定为重复,你可以选择保留画质最好的一张。
先认识这 10 个
Bottom Sheet
底部弹出面板
从屏幕底部往上滑出来的一块面板,停在那儿不占满全屏。
Modal
模态框 / 对话框
点了一下之后,屏幕中间冒出一个窗口,不处理它就别想继续用后面的页面。
Toast
轻提示
操作完成后屏幕角落飘出来的小提示,几秒后自己消失。
Snackbar
带操作提示条
和 Toast 长得差不多,但底部多了一个可选的操作按钮,比如「撤销」。
Skeleton
骨架屏
数据没到之前,先用灰色块把未来的布局摆出来。
Accordion
手风琴 / 折叠面板
点一下标题,下面的内容就展开;再点一下,收起来。
Tabs
标签页
同一层级的几组内容并排放着,切换标签就切换整块内容——而且每组都有自己的 URL。
Switch
开关
一个左右滑动的开关,一开一关,状态永远摆在明面上。
Slider
滑块
一条可以左右拖动的轨道,拖动就能得到一个数值。
Empty State
空状态
列表空空如也时显示的那块内容——它该解释为什么空,以及下一步做什么。
8 个分类
Navigation导航10让用户在页面和层级之间移动,并且始终知道自己在哪。Actions操作6让用户可以触发一件事——这是界面上「能按的东西」。Input输入13接收用户的信息:打字、选择、开关、拖动、上传。Containers容器与展开9把东西装起来,或者临时展开一层——浮在页面上的那一层。Feedback状态反馈10告诉用户「刚才发生了什么」「现在是什么状态」「接下来能干什么」。Data Display信息展示7把一批信息摆出来让人读:列表、表格、标签、统计。Interaction交互模式8不只是组件,而是「一套操作习惯」——长按、滑动、下拉刷新。General通用0不属于任何单一分类,但你会天天见到的基础件。