设计渲染说明

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(宽松,适合长时间阅读)