苹果风Apple HIG
你可能会说
就想要苹果官网那种高级感：大图、大字、大量留白。
苹果风是一种借鉴 Apple 产品界面和官网表达方式的设计风格常见做法包括充足留白、清楚的单屏重点、连续圆角和克制的半透明材质。想做出这种风格，素材质量、文字对比度和内容节奏比照抄圆角或模糊数值更重要。
左右滑动查看完整示例
设计原则 · Principles
- 每个视区先确定一个重点：留白服务于聚焦和节奏，不是单纯把内容拉得很散
- 圆角与组件尺寸成比例：大卡片可以更圆，小控件要保证边界和点击区域清楚
- 毛玻璃只在需要看见背景关系的浮层使用：同时保证对比度，并准备关闭模糊时仍可读的背景
- 阴影表达前后层级：近层边界清楚，悬浮层可以更柔和；数值要根据背景现场调试
- 渐变承担明确作用：可以点出关键词或材质光感，但不要牺牲文字可读性
什么时候用
- 产品发布页，重点展示少量核心优势和产品图全新的它，来了。
- 强调工艺与体验，并有真实产品细节支撑示例价格购买 >
- 已经具备高质量图片、视频或渲染素材
- 消费级产品介绍，需要展示关键界面和设备适配专注森林★ 4.9 · 效率类第 1 名
什么时候不用
- 数据密集工具使用过大留白，降低扫描效率数据密集的后台，大留白是浪费
- 同时堆叠毛玻璃、大圆角和强渐变处处毛玻璃
- 素材质量不足，却依赖视觉效果掩盖内容低清图片 + 不协调圆角 + 默认字体素材与组件细节不一致会削弱整体品质
- 表单字段间距过大，破坏连续阅读和填写报销单审批（每字段间隔 80px）表单工具应优先保证信息密度与填写效率
组成结构 · Anatomy
大圆角 16-28px
毛玻璃材质
分层软阴影
渐变点缀
Aa大字紧字距
充足留白
示例使用较大圆角；实际半径要跟随卡片、按钮和图标尺寸
导航与浮层可以透出环境色，但要保证对比度和无模糊时的可读性
近处边界与远处柔影共同表达悬浮关系，数值不是固定配方
用于强调或材质光感，范围应由内容和对比度决定
标题可以更大、更紧凑，但中英文应分别测试字距和换行
用留白突出当前卖点，同时保留下一步操作和必要说明
AI 提示词 · Prompt
做一个消费电子产品页。每一屏聚焦一个用户能感知的核心特点，用产品画面和简短说明支撑它；导航和购买入口保持轻量、易找。产品参数和效果只用现有可核验资料，缺少的先标“待补充”，不要自己编。
典型使用场景
消费电子产品发布页
左右滑动查看完整示例
系统级毛玻璃窗口
左右滑动查看完整示例
App 分发详情页
左右滑动查看完整示例
穿戴设备健康页
左右滑动查看完整示例
延伸阅读 · 权威出处