用途:该技能是设计类技能的子参考,用于在用户希望界面模仿现实物体、真实材质与物理隐喻时提供拟物化风格的实现指引。资料说明它并非设计主技能的直接触发项,而是子参考。
核心原则:真实质感(皮革、拉丝金属、木纹、纸张);物理光照与深度(高光、投影、内阴影、倒角、环境光遮蔽);现实世界隐喻(硬件式开关、带物理刻度的旋钮、带装订环的记事本)。
视觉要点:颜色取决于模拟材质,金属/硬件可用 Industrial Chic,木/皮革可用 Monochromatic Brown;字体匹配物理对象,如纸张用打字机字体、数字屏用 LCD 字体、硬件按钮用凸版无衬线;细节包含螺丝、缝线、反光与渐变。
Web 实现:大量使用分层背景图(纹理)、复杂渐变与多重 box-shadow,示例中给出 .skeuo-button 的拉丝金属背景、内高光、下阴影与按下状态。
App 实现:资料提供 SwiftUI、Flutter、React Native、Jetpack Compose 的示例:通过叠加形状与渐变构建立体感,用 overlay 描边做高光边;按下状态同时减小阴影与缩放;Flutter 用 AnimatedContainer 过渡;React Native 用 Pressable 的 onPressIn/onPressOut 配合 ImageBackground 与线性渐变库;Compose 用 Brush.verticalGradient、border、shadow 与 graphicsLayer 缩放,纹理用 painterResource。
注意事项:确保隐喻对用户任务有意义;不要过度使用导致界面杂乱,交互元素保持高度写实,但结构性布局应保持简洁。
限制:这是样式参考,不能替代特定环境的验证、可访问性测试或专家评审;对比度与响应式行为需另行验证。资料未提供具体价格、收费、平台、效果数据或安装命令。