🎨
HIG『SF Symbols > カスタムシンボル』項目のまとめ
概要
- カスタムシンボルを作成するには、必要なデザインに似たシンボルのテンプレートを書き出してから、ベクトル編集ツールを使用して変更する
- 注釈をつけてカスタムシンボルの各レイヤーに特定の色や階層レベルなどを割り当てることができる
- 各種レンダリングモードをサポートすることができる
- 目標とするシンボル。詳細はアイコンを参照する
- シンプルである
- 認識しやすい
- インクルーシブである
- 表現するアクションやコンテンツに直接関連する
必要に応じてカスタムシンボルに負のサイドマージンを割り当てる
- SF Symbolsは負のサイドマージンに対応している
- バッジなどの幅を広げる要素がシンボルに含まれる場合に横方向の位置揃えを最適化するために割り当てる
- フォルダシンボル（バッジを含む場所など）のスタックを横方向に位置揃えできる
- サイドマージンは、
left-margin-<variant-specifier>またはright-margin-<variant-specifier>の形式がある
カスタムシンボルにアニメーションを適用するためにレイヤーを最適化する
- シンボルのレイヤーごとにアニメーションを適用したい場合は、SF Symbolsアプリで対象のレイヤーに注釈をつける
- Z方向によって、可変色シンボルのレイヤーにカラーを適用する順序が決まる
- 可変色シンボルの順序は前方から後方、後方から前方のどちらで実行するかを選択できる
- レイヤーグループごとにアニメーションを適用し、関連するレイヤーをまとめて動かすこともできる
カスタムシンボルのアニメーションをテストする
- 形状やパスが想定通りに表示されるかテストする
- カスタムシンボルはなるべく形状全体を使って描画する
-
person.2.fillシンボルに類似したカスタムシンボルを作るときは、左側の人物を表すために形状を切り取らず、左側の人物全体の形状を描画し、2人の間にある空間を表すために右側の人物のオフセットパスを描画する - このオフセットパスにあとで消去レイヤーの注釈をつける
SF Symbolsアプリより
エンクロージャやバッジなどの一般的なバリアントを含むカスタムシンボルは作成しない
- SF Symbolsアプリには、カスタムシンボルのバリアントを作成するためのコンポーネントライブラリがある
- このコンポーネントライブラリを使えば、含まれているSF Symbolsとのデザイン上の一貫性を維持しながら、カスタムシンボルでよく使うバリアントを作成できる
カスタムシンボルに代替テキストラベルを指定する
- 代替テキストラベルは、見えているUIやコンテンツをVoiceOverが説明するために使用される
- 視覚障がいのあるユーザがナビゲーションしやすくなる
参考資料
Discussion