拟物化Skeuomorphism
你可能会说
早期 iPhone 那种，按钮像真按钮、笔记本像真本子。
拟物化是一种模仿现实物体外观和操作线索的界面设计风格它会借用皮革、金属、纸张、旋钮和实体按钮等熟悉线索帮助用户理解操作。现在多用于复古主题、乐器类应用和局部装饰，材质细节不能压过文字和功能。
左右滑动查看完整示例
MELLOWTAPE STUDIO RECORDER INPUT LIVE
TAKE 04 · UNTITLED ROOM00:02:18
LR
INPUT◀◀●REC▶OUTPUT
设计原则 · Principles
- 选择用户熟悉的现实物体，让材质和形状帮助理解功能
- 用高光和投影表达凸起、凹下和可以按动的状态
- 先保证操作含义清楚，再增加皮革、金属或纸张等细节
- 纹理只用于不影响阅读的区域，并控制图片体积
- 在现代产品中优先局部使用，避免材质覆盖所有内容
什么时候用
- 面向初次使用设备的人，用现实线索帮助理解教长辈用平板点这里发语音
- 复古、手账和乐器应用，材质本身是主题日记本复古手账应用，材质支持主题表达
- 相机和合成器等拟真控制面板木相机、录音、合成器的拟真面板
- 现代界面里的少量局部材质装饰现代浅色界面里，局部一条皮革当点缀
什么时候不用
- 把正文直接放在干扰阅读的复杂纹理上正文落在纹理上
- 过度依赖大图材质，造成加载和缩放问题一个界面使用多张材质图资源需评估
- 数据密集工具让装饰降低扫描效率报表中心材质与任务不匹配效率工具应优先保证数据与操作清楚
- 整站复制旧系统外观，却没有明确复古目的登录
发展历程 · History
2007.01
iPhone 发布，拟物界面受关注
滑动解锁、翻页日历等界面把现实动作和材质带入触屏产品，帮助用户理解交互方式。
2010—2012
质感表现广泛出现
iOS 5/6 中的黄纸备忘录、木质报刊亭和绿毡 Game Center，呈现了不同的现实材质隐喻。
2013.09
iOS 7 扁平化转向
iOS 7 以更简化的界面取代此前大量皮革与亚麻纹理；这一变化加速了业内对扁平化的讨论。
2020s
装饰性材质再被探索
新拟态、玻璃和空间材质等方向再次引起讨论；拟物元素更多作为局部表现方式出现。
组成结构 · Anatomy
横线黄纸 + 红边距线
玻璃高光按钮
亚麻布纹
真实投影
棕色渐变打底，上下两条虚线当缝线，文字用内阴影压出凹刻感
repeating 渐变画横线，左侧一条红色边距线，配手写感字体
可用浅色渐变和内高光提示光滑材质；只在需要时使用，避免影响文字
两组交叉的细密 repeating 渐变，大面积空白处的经典打底
大而柔、带环境色的投影，让元素像真的浮在桌面上
AI 提示词 · Prompt
做一个复古旅行日志应用，让相册、地图和收藏内容具有清楚的识别线索。用少量有意义的材料和触感提示帮助理解功能，按钮与文字仍要清楚；不要把纹理和高光铺满整个界面。
典型使用场景
拟物化磁带录音台
左右滑动查看完整示例
MELLOWTAPESESSION / VOCAL 04● RECORDING
VOICE-8 dB
GUITAR-14 dB
iOS 6 计算器
左右滑动查看完整示例
1,024
C±%÷789×456−123+
iOS 6 设置开关页
左右滑动查看完整示例
iOS 报刊亭书架
左右滑动查看完整示例
延伸阅读 · 权威出处