Overview(概述)
本文采用 Apple Human Interface Guidelines (HIG) 的分类方式组织,从基础到具体:Foundations → Patterns → Components。
设计原则
| HIG 原则 | 博客体现 |
|---|---|
| Clarity(清晰) | 内容优先,UI 元素用途一目了然,无装饰性复杂度 |
| Consistency(一致) | 统一的 token 系统,相同组件在不同页面使用相同样式 |
| Deference(克制) | 克制的 hover 效果,动效保持最小化,UI 不干扰阅读 |
Foundations(基础)
Color(色彩)
配色只有两点是我认为重要的:
- 暖色调基底:我在用的一个主题,温暖舒适的阅读体验
- 强调色 #FB8F68:尽可能地,我希望用这个颜色来代表我,所以一般我认为需要强调的,我都会用这个颜色
Typography(排版)
基础字号 17px,符合 Apple HIG 推荐的移动端阅读标准。中文字距 0.01em。
行高分四档:
- 标题 1.22(紧凑)
- 列表 1.5(紧凑,让列表项聚合)
- 次要信息 1.65(图注脚注)
- 正文 1.75(宽松,适合长时间阅读)