🎨
WWDC21『SF Symbolsの新機能』セッションのまとめ
SF Symbolsの基本
アクセシビリティサポート
- Dynamic TypeとBold Textのアクセシビリティ機能をサポートする
スケール
- Small、Medium、Largeのスケールがある
- スケールは同じポイント数を維持しスケールだけが変わる
- 太さは視覚的に調節されウェイトはテキストと整合する
垂直配置
- 垂直配置でシンボルはスケールやウェイトに関わらずSan Franciscoのキャップハイトの中央に配置される
水平配置
- シンボルによってはネガティブマージンがある
- 類似したバリエーションなら一貫した見た目を維持する
バリアント
- コンテキストがなければアウトラインがデフォルトになる
- 選択しやすいように目立たせる場合は塗りつぶしが良い
- スラッシュや囲み(円、四角、長方形など)などがある
新しいシンボル
- 約600の新しいシンボルが追加された
- 3,000以上のシンボルが利用可能
ローカライズ
- スクリプトカバレッジをアラビア語、ヘブライ語、デーヴァナーガリー語に拡大した
- デザインはタイ語、中国語、日本語、韓国語に拡大した
シンボルの構造
パスの描き方
- 全てのシンボルはベクターポイントが起点となる
- ベジェ制御点を使って直線と曲線が作られる
- 完全に包囲された形としてパスを作ることでシンボルのデザインソースを定義する
- さらにソースを追加してスタイルの幅を広げポイントの互換性を確認する
- いずれのソースもベクターポイントの数が同数になる必要がある
- 次にデザインソースを補間しウェイトとスケールの異なるインスタンスを作る
- パスに隙間がないことが非常に重要である
ストロークではなくパスにする
- ストロークをアウトラインに転換する必要がある
レイヤーによる階層
- アノテーションで全面と背面の要素を決定できる
- パス内のベクターをレイヤーのようにグループ化し、シンボルの構造の第一、第二、第三レイヤーを確認でき階層を作る
レンダリングモード
新レンダリングモード
- 階層とパレットが追加された
階層
- 単一のカラーと不透明度を使いシンボルに視覚的階層を与え、深さと強調を加え１つの色相で見栄えをコントロールする
- 共通の形を持つシンボルがいくつか並んだ時、このモードで違いを目立たせシンボルを読みやすくし 認知を促す
- シンボルの要素を取り除くことなく透明度の調整で視覚的に余分なノイズを減らせる
- シンボルに第一、第二、第三要素の階層をアノテーションすることで可能になる
- シンボルに基調のカラーが塗られると自動的に階層全てのレイヤー 違った透明度が適用されシンボルの特性を強調する
階層の分析
- ほとんどのシンボルに3つの階層はない
第二の要素
- シンボルの第一要素に触れることなく、間に隙間があるものは第二の要素とする
第三の要素
- 境界線が触れ中に囲まれているものは第三の要素とする
パレット
- 階層レンダリングモードは単一のカラーを使うが、パレットレンダリングモードでは２つ以上の対照的な色を使う
- それぞれの要素に使われるカラーを個別に調整できる
- パレットレンダリングモードには不透明度のコントロールがある
- 階層と同様レイヤーアノテーションのデータに依存する
- ２色だけ使用する場合は第三レイヤーは第二レイヤーと同じ設定になるのでアノテーションの際に考慮する
マルチカラー
本質的または本来のカラー
- マルチカラーはシンボルの本質的または本来のカラーとする
- 現実の世界においてそのオブジェクトの外見に関連する複数色使用する
コンセプトカラー
- コンセプトと指定した色で意味を表現する
- 以下は
追加のコンセプトは緑、削除のコンセプトは赤の例
色の指定
- 各カラーはカスタマイズ可能
- 全体にカラーを塗る
- 一部に塗る
- シンボルの一部がマルチカラーでそれ以外はアクセントになる
- マルチカラーの情報が何もない
- モノクロでレンダリングされます
モノクロ
- モノクロはSF Symbolsのタイポグラフィに最も近いもの
- 中立的なカラーで他のシンボルと競争することなくうまく溶け込む
- カラーと不透明性が使用できる
- 他のレンダーモードと違いレイヤーのアノテーションデータに関わらず、すべてに不透明度が適用される
- 均一性を最優先するなら統一性と一貫性が最も優れたモノクロが理想的
SF Symbolsアプリ
- レンダリングモードが追加された
カラー
- SF Symbolsアプリにある全てのカラーがAppleの全プラットフォームで利用できる
- カラーライブラリにアップデートがあり、茶色は以前はmacOSのみでしたが全プラットフォームで使用できるようになった
- 以前のティールのカラー値の名前がシアンに変更された
参考資料
Discussion