伪拟态化(新拟态)UI 的核心是利用
柔和的阴影与高光模拟凸起 / 凹陷的物理质感,颜色搭配遵循「低对比度、同色系渐变」原则,以下是适配
子比主题的实用配置:
1. 基础色值(推荐)
- 主背景色:
#f0f2f5(浅灰,模拟磨砂塑料 / 纸张质感)
- 主色 / 强调色:
#6c63ff(柔和紫,作为按钮 / 链接主色)
- 文字色:
#333333(深灰,避免纯黑的生硬感)
- 次要文字:
#666666(中灰,用于辅助信息)
2. 阴影与高光(关键)
伪拟态化的立体感完全依赖阴影,而非颜色本身:
- 凸起元素(按钮、卡片):
- 亮部阴影:
#ffffff(左上,模拟光源)
- 暗部阴影:
#d1d9e6(右下,模拟投影)
- 示例:
box-shadow: 5px 5px 10px #d1d9e6, -5px -5px 10px #ffffff;
- 凹陷元素(输入框、开关):
- 亮部阴影:
#d1d9e6(右下)
- 暗部阴影:
#ffffff(左上)
- 示例:
box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff;
没有回复内容