インターフェースを洗練させる は何をしますか？
このスキルは、小さな設計・エンジニアリングの詳細を積み重ねて、より洗練されたインターフェースにするために使用します。
出典：コミュニティPR #1659（linus707 による）を元に作成。
使用タイミング
- ユーザーが「UIの感触がおかしい」「平坦」「安っぽい」「詰まっている」「ぎくしゃくしている」「未完成」と言ったとき。
- コントロール、カード、リスト、ダッシュボード、ナビゲーション、フォーム、ツールバーを作成しているとき。
- コンポーネントにホバー、アクティブ、フォーカス、エントリー、イグジット、ローディング、空の状態が必要なとき。
- フロントエンドレビューで具体的な「改善前/改善後」の推奨事項が必要なとき。
基本原則
同心円状の半径
近接するネストされた角丸の面では：
外側の半径 = 内側の半径 + パディング
パディングが大きい場合は、無理に計算に従わず、レイヤーを別々の面として扱います。重要なのは光学的な一貫性であり、計算式を崇拝することではありません。
光学的位置合わせ
幾何学的な中央揃えは、常に視覚的な中央揃えとは限りません。アイコンボタン、再生ボタンの三角形、矢印、星、非対称なアイコンは、わずかなオフセットが必要なことがよくあります。可能であればSVGを修正し、そうでなければピクセル単位のマージンやパディングの変更で調整します。
シャドウと境界線
境界線は区切りとフォーカスリングに使用します。カード、ボタン、ドロップダウン、ポップオーバーに奥行きが必要な場合は、重ねられたシャドウを使用します。シャドウは透過的で、さまざまな背景で機能するよう十分に控えめにする必要があります。
テキスト折り返し
- 見出しや短いタイトルには
text-wrap: balanceを使用します。 - 中程度の長さの本文、キャプション、説明、リスト項目には
text-wrap: prettyを使用します。 - 長い散文、コード、整形済みコンテンツでは両方とも避けてください。
- カウンター、タイマー、価格、表など、変化する数値には
font-variant-numeric: tabular-numsを使用します。
フォントスムージング
macOSでは、プロジェクトがすでに適用していない場合、ルートレイアウトでアンチエイリアスフォントスムージングを適用します：
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
画像の輪郭線
画像のエッジが表面にぼやけて見えないように、微妙なインセットの輪郭線が必要なことがよくあります。
img {
outline: 1px solid rgba(0, 0, 0, 0.1);
outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
img {
outline-color: rgba(255, 255, 255, 0.1);
}
}
ニュートラルな黒または白のアルファ輪郭線を使用します。画像の輪郭線をブランドカラーの色合いにしないでください。
モーション
インタラクティブな状態変化にはCSSトランジションを使用します。これは、ユーザーがモーションの途中で意図を変えたときに再ターゲットできるためです。キーフレームは、段階的なワンショットのエントランスやローディングシーケンスのために取っておきます。
適切なモーションのデフォルト：
- エントリー：opacity、小さな
translateY、そして必要に応じてblurを組み合わせます。 - イグジット：エントリーよりも短く静かに、通常は150ms。
- プレス：触感のあるボタンには
scale(0.96)、動きが気を散らす場合は無効にする方法を用意します。 - アイコンの切り替え：瞬時に表示を切り替えるのではなく、opacity、scale、blurでクロスフェードします。
トランジション範囲
transition: all は決して使用しないでください。変更するプロパティを指定します：
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
will-change は、transform、opacity、filter などのコンポジターに適したプロパティの最初のフレームのスタッターに対してのみ使用します。will-change: all は決して使用しないでください。
ヒットエリア
インタラクティブなコントロールは、少なくとも40x40px、理想的にはレイアウトが許せば44x44pxのヒットエリアを持つ必要があります。表示されるアイコンが小さい場合は、疑似要素で拡張しますが、拡張されたヒットエリアが重ならないようにします。
レビュー出力
UIポリッシュパスをレビューする際は、具体的な変更点を「改善前/改善後」の行で報告します：
| 原則 | 改善前 | 改善後 |
|---|---|---|
| 同心円状の半径 | 親と子で同じ半径 | 親の半径がパディングを考慮 |
| 表形式の数字 | カウンターが数字の変化でずれる | カウンターが tabular-nums を使用 |
| トランジション範囲 | transition: all | 明示的なトランジションプロパティ |
スニペットだけでは明らかでない場合は、ファイルパスとプロパティを含めます。確認したが変更しなかった原則は省略します。
チェックリスト
- ネストされた角丸要素が光学的に一貫している。
- アイコンが視覚的に中央揃えされている。
- ボタン、カード、ポップオーバーが適切な理由で境界線またはシャドウを使用している。
- 見出しと短いテキストが不器用な折り返しになっていない。
- 動的な数値が表形式の数字を使用している。
- 画像に必要に応じてニュートラルな輪郭線がある。
- エントリーとイグジットのアニメーションが分割され、控えめで、適切な場合は中断可能である。
- ボタンに触感のあるアクティブ状態があり、誇張された動きがない。
transition: allおよびwill-change: allが使用されていない。- 小さなコントロールにも使用可能なヒットエリアがある。