Apple HIG を Web の design tokens に翻訳する
この記事は中国語の原文を機械翻訳したものです。原文を読む
Apple の Human Interface Guidelines はネイティブアプリ向けに書かれたものですが、階層の明確さ、コンテンツ優先、ユーザーのシステム設定の尊重といった多くの原則は、Web でも同じように成り立ちます。難しいのは、pt、Dynamic Type、セマンティックカラーといった概念を CSS に置き換えることです。
フォントサイズ：Dynamic Type → rem
iOS のデフォルトのフォントサイズは pt 単位です。Web ではそのまま 16 で割って rem に換算します。
| スタイル | iOS (pt) | Web (rem) |
|---|---|---|
| Large Title | 34 | 2.125 |
| Title 1 | 28 | 1.75 |
| Title 2 | 22 | 1.375 |
| Body | 17 | 1.0625 |
| Footnote | 13 | 0.8125 |
px ではなく rem を使う利点は、ユーザーがブラウザでデフォルトのフォントサイズを大きくしたときに、サイト全体が比率を保ったまま拡大されることです。これはほぼ Web 版の Dynamic Type と言えます。
セマンティックカラー
コンポーネントには #000 を書かず、var(--color-label) と書きます。ダークモードでは、変数を 1 か所で再定義するだけで済みます。
:root {
--color-label: #000000;
--color-background: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--color-label: #ffffff;
--color-background: #000000;
}
}
HIG と食い違う点
iOS の secondaryLabel は、白背景上のコントラスト比が 3.4:1 程度しかなく、WCAG AA が求める 4.5:1 に届きません。ネイティブアプリならシステムの「コントラストを上げる」オプションで補えますが、Web ページにはそのようなスイッチがないため、ここでは不透明度を 0.6 から 0.75 に引き上げています。
同様に、#007AFF も本文中のリンク色としてはコントラスト比が約 4.0:1 しかないため、リンクテキストにはもう少し濃い #0066CC を別途使っています。
モーション：スプリングカーブ
CSS の linear() 関数は、一連のサンプリング点で任意の曲線を記述できます。そのため、cubic-bezier で近似するのではなく、実際の減衰バネの方程式をサンプリングして CSS に書き込めます。
バネは終点付近で約 1.4% 跳ね返ります。振れ幅はごくわずかですが、まさにこの動きが、押したときのフィードバックに「弾力がある」と感じさせてくれます。
コメント