WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in SF Symbols

What's new in SF Symbols

DesignSwiftUI & UI FrameworksEssentials
元の動画を見る

ハイライト

SF Symbols 3 では、600 近くの新しいアイコン (合計 3,000 以上) が追加され、ローカライズされた言語のサポートが拡張され、階層レンダリング モードとパレット レンダリング モードが導入され、レイヤーの注釈による細かい色の制御が可能になります。

主要内容

シンボルはユーザー インターフェイスの最も基本的なコミュニケーション要素です

アプリの設定ページをクリックすると、歯車アイコンがシンボルになります。シンボルは、ユーザーと製品間のコミュニケーションの最も単純な形式です。これらは言語に依存せず、ユーザーが迅速に移動してアクションをトリガーできるようにします。

SF Symbols は、これらのシンボルを、San Francisco フォントとシームレスに動作するアイコン ライブラリに結合します。各シンボルには 9 つの太さと 3 つのサイズがあり、テキスト ラベルと自動的に位置合わせされ、ダイナミック フォントや太字テキストなどのアクセシビリティ機能をサポートします。

（00:48）

記号のバリエーション: 白抜き、塗りつぶし、スラッシュ

同じシンボルが複数の形式を持つ場合があります。デフォルトでは、テキストのストローク スタイルと一致するため、アウトライン (ワイヤーフレーム バージョン) になっています。より目立つ効果が必要な場合は、塗りつぶしバージョンを使用すると、色を保持するためのより大きな領域が提供されます。

機能を削除または無効にするために使用されるスラッシュのバリアントもあります。囲まれたバリアントでは、シンボルを円、正方形などのコンテナ内に配置します。

（03:05）

ローカリゼーション拡張機能: アラビア語、ヘブライ語などをサポートします。

今年、私たちは SF シンボルのテキスト システムの対象範囲を拡大し、アラビア語、ヘブライ語、デヴァナーガリー語に加え、中国語、日本語、韓国語、タイ語のバリエーションのデザインを追加しました。

これらのローカライズされたシンボルは、右から左へ記述するシステムを含むユーザーのデバイス言語に自動的に適応します。シンボルがミラー化されたときに意図した効果を失う場合は、特定の書記体系用に特化したバージョンを設計する必要があります。

（06:25）

詳細

シンボルの構造: 閉じたパスとポイントの互換性

各シンボルはベクトル点から始まり、パスを形成する直線セグメントとベジェ曲線で構成されます。シンボルのデザイン ソースは、異なるウェイトとサイズの間で補間されたときに一貫した形状を維持できるように、完全に囲まれた形状である必要があります。

主要な設計ルール:

  • 閉じたパスを使用し、開いたエンドポイントを使用しない
  • ストロークはアウトラインに変換する必要があります
  • すべてのバリアントはポイント互換である必要があります (ベクトル ポイントの数が同じ)

この設計の利点は、システムが異なるフォントの太さの間をスムーズに補間して、9 つのフォントの太さの変更を実現できることです。

（08:35）

レイヤーのアノテーション: プライマリおよびセカンダリの関係を定義する

シンボルは複数のオブジェクトを組み合わせることができます。たとえば、共有シンボルは矢印と四角形の組み合わせです。レイヤーの注釈を使用して、これらのオブジェクトをグループ化できます。

  • プライマリー（メインフロア）
  • 二次
  • ターシャリー（3階）

これにより、カラーコントロールの準備が整います。たとえば、円形のコンテナ内のスクリーンは通常、ターシャリとラベル付けされ、前景要素はプライマリとラベル付けされます。

4 つのレンダリング モード

1.モノクロ（モノクロモード）

これはタイポグラフィの性質に最も近いモードで、すべてのシンボルに単一の色を使用し、差別化よりも一貫性を強調します。どの記号も強調表示せずに混合する必要がある場合に使用します。

Image(systemName: "heart.fill")
    .symbolRenderingMode(.monochrome)
    .foregroundStyle(.red)

キーポイント:

  • すべてのパーツに同じ色を使用する
  • 透明度はシンボル全体に適用され、レイヤーの注釈は無視されます。
  • ツールバー、ナビゲーションバーなど、統一感のある外観が必要なシーンに適しています。

2.階層型

単一の色を使用しますが、不透明度を変えることで視覚的な階層を作成します。主要な層は 100% 不透明で、2 番目と 3 番目の層の透明度は低くなります。

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

キーポイント:

  • メインレイヤーは完全に飽和し、2 番目のレイヤーは半透明、3 番目のレイヤーはより明るくなります。
  • レイヤーの注釈に基づいて透明度を自動的に割り当てます
  • 単一のトーンを維持しながら構造を強調する必要があるシーンに適しています

（11:30）

3.パレット (パレットモード)

2 つ以上の対照的な色の使用を許可し、各色を個別に制御できます。注釈は同じレイヤーに基づいていますが、各レイヤーに異なる色を割り当てることができます。

Image(systemName: "person.2.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(
        .blue,
        .orange,
        .red
    )

キーポイント:

  • 最大 3 つの独立した色のレイヤーをサポート
  • 3 次カラーが存在する場合は 3 つのカラーパラメータが必要です。そうでない場合は、2 次カラーが 3 次カラーに適用されます。
  • シンボル内の異なる要素を明確に区別する必要があるシナリオに適しています

4.マルチカラー (マルチカラー モード)

物理世界のオブジェクトの外観、または従来の色のセマンティクスを反映して、シンボルの固有の色を表現します (たとえば、追加は緑、削除は赤)。

Image(systemName: "globe.americas.fill")
    .symbolRenderingMode(.multicolor)

キーポイント:

  • シンボルに事前定義された配色を使用する
  • フルカラー、部分カラー（アクセントカラーあり）も可能
  • マルチカラー情報のないシンボルはモノクロ モードにダウングレードされます。

（15:53）

カラーライブラリのアップデート

SF Symbols 3 の更新されたカラー ライブラリ:

  • ブラウンは、以前は macOS でのみ利用可能でしたが、すべてのプラットフォームで利用できるようになりました。
  • ティールをより緑の色合いに再定義
  • シアン (シアン) は、古いティールのカラー値を使用する新しいカラー名です。
  • インディゴとパープルは、すべてのプラットフォームにわたってより一貫した色相定義を持ちます。

すべての色は、明るい、暗い、高コントラストの外観に自動的に適応します。

重要ポイント

1.階層モードを使用してリスト項目の読みやすさを向上させます

  • 内容: 複雑なリストでは、各リスト項目のアイコンに階層モードを使用します。
  • 実行する価値がある理由: モノクロ モードでは、すべてのアイコンの視覚的な重みが同じになります。階層モードでは、透明度によって主要素と副要素が区別され、アイコンの構造がより明確になります。
  • 開始方法: リストで使用されているシンボルを見つけて、レンダリング モードを次のように変更します。.hierarchical、主要素と副要素が識別しやすいかどうかを観察します。

2.パレット モードを使用して、機能ボタンの視覚的なグループを作成します

  • 対処方法: 関連する機能ボタンのグループに同じパレットの配色を使用します。
  • 価値がある理由: ユーザーは色を通じて機能カテゴリをすばやく識別できるため、認知負荷が軽減されます。
  • 開始方法: 3 ～ 4 つのカラー スキーム (編集用のオレンジ、削除用の赤、共有用の青など) を定義し、対応する機能グループのアイコンに適用します。

3.シンボルをカスタマイズするときは、閉じたパスの原則に従ってください

  • やるべきこと: Figma または Illustrator でカスタム シンボルをデザインするときは、すべてのパスが閉じられ、ストロークがアウトラインに変わっていることを確認してください。
  • 価値がある理由: SF シンボルの複数のウェイト間を正しく補間できるのは閉じたパスだけであり、サイズ間でシンボルの一貫性を確保できます。
  • 開始方法: SF Symbols 3 アプリケーションを使用してシンボル テンプレートをエクスポートし、テンプレート上に描画し、エクスポートする前に開いたパスがあるかどうかを確認します。

4.アプリのシンボルカラーリングシステムを設計します

  • やるべきこと: アプリのブランドカラーと機能分類に基づいて、パレット モードの一連のカラー マッチング ルールを定義します。
  • 実行する価値がある理由: 統一カラー マッチングにより、ユーザーは色の意味記憶を確立し、インターフェイスの専門性と一貫性を向上させることができます。
  • 開始方法: アプリ内のシンボルを使用しているすべてのシーンをリストし、機能ごとにグループ化し、グループごとに 2 ～ 3 つの配色を定義して文書化します。

5.マルチカラー モードを使用してブランド認知度を強化

  • 対処法: ブランドの象徴的な要素 (アプリのロゴ アイコンなど) については、マルチカラー モードを使用して、固有の色を維持します。
  • 価値がある理由: マルチカラー モードのシンボルはデザインの元の色を保持するため、ブランドの認知度や感情的なつながりを強化できます。
  • 開始方法: 強い色の意味を持つシンボル (天気アイコン、ブランド アイコンなど) を選択し、レンダリング モードを.multicolor

関連セッション

コメント

GitHub Issues · utterances