WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Explore the SF Symbols 3 app

Explore the SF Symbols 3 app

SF SymbolsDesignSwiftUIUI Frameworks
元の動画を見る

ハイライト

SF Symbols 3 アプリには、コレクション、互換性チェック、ローカリゼーション プレビュー、新しいレンダリング モード プレビュー、カスタム シンボル 注釈、および画像のコピーが追加されています。開発者は、設計から開発までの完全なプロセスでシステム シンボルとカスタム シンボルを管理できます。

主要内容

カード ゲームを作成するには、インターフェイスに多数の小さなアイコンが必要です。プレイヤーを招待するには、「人プラス番号」が必要です。 4 つのスートはスペード、ハート、クラブ、ダイヤモンドです。ルールの入り口には本がなければなりません。デッキ操作にはアイコンを積み重ねる必要もあります。

以前なら、これは簡単に崩れてしまったでしょう。デザイナーはライブラリ内のアイコンを探し、エンジニアはコード内のシンボル名を推測します。シンボルが古いシステムをサポートしているかどうか、言語の方向に応じて変更されるかどうか、ダーク モードで色を維持できるかどうかはすべて個別にチェックされます。カスタム アイコンも通常の SVG または PNG リソースに分類され、SF シンボルの配置、フォントの太さ、レンダリング機能が失われます。

SF Symbols 3 アプリは、これらの手順を 1 つのツールにまとめています。開発者はまず、プロジェクトで使用されるシンボルをまとめたコレクションを構築します。シンボルが選択されると、情報インスペクターに名前、廃止された名前、SF シンボルのバージョン、およびローカライズされた表現が表示されます。レンダー インスペクターでは、モノクロ、マルチカラー、階層、およびパレット モードをプレビューできます。

これにより、開発プロセスのブレークポイントが直接解決されます。設計段階では、[シンボルのコピー] または [イメージのコピー] を使用して、シンボルをデザイン ドラフトに挿入できます。開発中に、シンボル名をコピーしたり、完全なカスタム シンボルを Xcode にエクスポートしたりできます。カスタム シンボルを使用して、アプリ内のレイヤーに注釈を付けたり、SF Symbols 3 の新しいレンダリング モードにアクセスしたりすることもできます。

プロジェクトシーンから始めてシンボルを収集する

カードゲームの例は非常に具体的です。まずカード ゲーム コレクションを作成し、次に [人間] カテゴリからプレーヤー シンボルをドラッグして追加します。それから検索してくださいsuit4つの色を見つけて、検索してくださいstackデッキを見つける、検索するbookルールのエントリを見つけます。

コレクションの機能は、3000 を超えるシステム シンボルから「私が使用しているシンボル」を分離することです。その後の互換性のチェック、色のプレビュー、デザイン ドラフトへのコピーはすべて、この短いリストから始まります。

互換性とローカリゼーションを確認する

同じ視覚シンボルに新しい名前と廃止された名前が付いている場合があります。音声にプレーヤーのシンボルを追加します。person.fill.badge.plusiOS 14 に対応する SF Symbols 2.0 以降で利用可能。旧名person.badge.plus.filliOS 13に対応したSF Symbols 1.0から利用可能です。

アプリがまだ iOS 13 をサポートしている場合は、古い名前で互換性の問題を解決できる可能性があります。新しい名前に切り替える前に、システムの最小バージョンが上がるまで待ってください。この判断は情報チェッカーによって行われるため、開発者が異なるシステムを 1 つずつ試す必要はありません。

ローカリゼーションもここでチェックされます。ルールブックのシンボルは、ユーザーの言語に応じて対応するテキストを表示し、左から右または右から左の言語方向に応じて本の開く方向も調整します。デフォルトでは、接尾辞のないシンボル名が使用され、システムがユーザーの言語での表現を選択できるようになります。

SF Symbols 3 の 4 つのレンダリング モードをプレビューする

レンダリング インスペクターは、ツール内にシンボル カラー プレビューを配置します。モノクロモードでは 1 色を使用します。マルチカラー モードでは、シンボルの組み込み色が使用されます。カード スーツは自動的にハートとダイヤを赤、スペードとクラブを黒にし、ダーク モードにも適応します。

SF Symbols 3 には、レイヤー化とカラー パレットが追加されています。レイヤード モードでは、1 つの色のみが選択され、システムは異なる不透明度を使用してレイヤーの深さを表します。パレット モードでは、2 つまたは 3 つの色を指定して、シンボルのさまざまな部分をより細かく制御できます。

カスタムシンボルは同じプロセスに入ります

システム ライブラリには「ハートの女王」シンボルはありません。からのスピーチcrown.fillまず、[ファイル] > [カスタム シンボルとして複製] を使用してカスタム シンボルとしてコピーし、名前を変更します。queen.heart.fill。

形状の変更は外部ベクトル ツールを使用して行われます。 SF Symbols アプリはテンプレート SVG をエクスポートします。デザイナーは、Sketch などのツールを使用してパスを変更し、編集したテンプレートをカスタム シンボルにドラッグして戻します。シンボルはすぐに更新されます。

カスタム シンボルは、新しいレンダリング モードをマークすることもできます。マルチカラーモードでは、赤いハートのパスを新規レイヤーにドラッグして赤色にし、王冠の下部を黄色にします。レイヤード モードでは、ハートをプライマリ レイヤーに配置し、クラウンの残りの部分をセカンダリ レイヤーに配置します。

詳細

コレクションを使用して箇条書きを整理する

(00:54) SF Symbols 3 アプリは、左上隅にあるプラス記号を使用してコレクションを作成できます。コレクションは、現在のプロジェクトで選択されているシンボルを保存するために使用されます。

Collection: Card Game

person.badge.plus.fill
suit.spade.fill
suit.heart.fill
suit.club.fill
suit.diamond.fill
book

キーポイント:

  • Collection: Card Gameカード ゲームのアイテムのコレクションの構築を表します。
  • person.badge.plus.filliOS 13 との互換性のために音声で使用される追加されたプレーヤー シンボルの古い名前です。
  • suit.spade.fill、suit.heart.fill、suit.club.fill、suit.diamond.fill検索語から導き出された4つのカードスートに対応suit。
  • bookこのプレゼンテーションはルールの入力に使用され、ローカリゼーションを使用して視覚的表現を調整することを示しています。

シンボル名を選択するときは、最初にシステムのバージョンを確認してください。

(02:37) 情報インスペクターには、シンボル名と利用可能なバージョンが表示されます。スピーチ内の [プレーヤーの追加] シンボルには 2 つの名前が使用できます。

let modernName = "person.fill.badge.plus"     // SF Symbols 2.0, iOS 14
let legacyName = "person.badge.plus.fill"     // SF Symbols 1.0, iOS 13
let targetMinimumOS = "iOS 13"
let selectedName = legacyName

キーポイント:

  • modernNameInformation Checker より、iOS 14 以降を最低限サポートするアプリに適しています。
  • legacyNameは警告マークが付いた非推奨の名前ですが、iOS 13 では上書きできます。
  • targetMinimumOS音声の制約を示します。家族の中にまだ古いシステムを使用している人がいます。
  • selectedName古い名前は、同じ視覚シンボルを iOS 13 で利用できるようにするために選択されました。
  • 廃止された名前は、古いシステムとの互換性を保つためにのみ適しています。最小バージョンを上げた後は、新しい名前に移行する必要があります。

ローカライズされたシンボルは、システムの選択において優先されます。

(03:43) Information Inspector は、さまざまなローカリゼーションでシンボルがどのように見えるかを示します。書籍のシンボルはユーザーのローカル テキストに置き換えられ、テキストの方向も調整されます。

let automaticLocalizedSymbolName = "book"
let arabicSpecificSymbolName = "book.ar"
let chineseSpecificSymbolName = "book.zh"
let nameUsedInMostApps = automaticLocalizedSymbolName

キーポイント:

  • automaticLocalizedSymbolNameローカリゼーション接尾辞がないと、システムはユーザーの優先言語での表現を選択します。
  • arabicSpecificSymbolNameスピーチで言及された内容を示す.arXcode で特定のローカリゼーションを指定するためのサフィックス。
  • chineseSpecificSymbolNameスピーチで言及された内容を示す.zhサフィックス。
  • nameUsedInMostApps開発者がユーザーの言語や本の向きを手動で決定するのを防ぐために、接尾辞のない名前を維持します。

アプリでのレンダリング モードのプレビュー

(04:28) レンダー インスペクターは 4 つのモードを切り替えて、色、背景、レイヤー効果をプレビューできます。

Monochrome: one color, such as system purple
Multicolor: intrinsic colors, such as red hearts and diamonds
Hierarchical: one color with opacity-based layers
Palette: two or three specified colors

キーポイント:

  • Monochrome一般的なツールバーやナビゲーション アイコンに適した単一色を使用します。
  • Multicolorシンボルの組み込み色を使用して、カード スートは赤と黒を自動的に区別します。
  • Hierarchical色と透明度でレベルを表現するSFシンボルズ3の新モードです。
  • PaletteSF Symbols 3 の新しいモードで、2 色または 3 色を指定できます。
  • 背景セレクターはダーク モードをテストでき、スペードとクラブはスピーチ中に暗い背景で色を調整します。

システム シンボルからカスタム シンボルをコピーする

(06:20) 既製のアイコンがない場合は、システム シンボルからカスタム シンボルをコピーできます。からのスピーチcrown.fillコピーアウトするqueen.heart.fill。

Select: crown.fill
Menu: File > Duplicate as Custom Symbol
Rename: queen.heart.fill
Export: template SVG
Edit: vector editor
Import: drag edited template back onto the custom symbol

キーポイント:

  • Select: crown.fill開始点としてターゲット形状に近いシステム シンボルを選択します。
  • File > Duplicate as Custom SymbolSF Symbols アプリ内でカスタム シンボルを作成します。
  • Rename: queen.heart.fillカスタム シンボルにビジネス関連の名前を付けます。
  • Export: template SVG編集可能なテンプレートをエクスポートします。
  • Importドラッグ アンド ドロップを使用して、変更したテンプレートをカスタム シンボルに戻すと、アプリが即座に更新されます。

カスタム シンボルのラベル カラー レイヤー

(07:12) カスタム シンボルを選択すると、サイドバーにラベル コントロールが表示されます。ギャラリー ビューでは、より大きな編集ビューが提供されます。

Multicolor annotation:
  heart layer -> red
  lower crown layer -> yellow

Hierarchical annotation:
  heart layer -> primary
  lower crown layer -> secondary

キーポイント:

  • heart layer -> redスピーチからのマルチカラーの注釈。ハートの部分は個別にレイヤー化され、赤色に着色されています。
  • lower crown layer -> yellowクラウンの下部を黄色のレイヤーの上に置きます。
  • heart layer -> primaryレイヤードモードで赤いハートをメインレイヤーとして設定します。
  • lower crown layer -> secondary残りのリューズをセカンダリとして設定します。
  • 同じカスタム シンボルをコレクションに追加すると、すべての新しいレンダリング モードをシステム シンボルと一緒にプレビューできます。

デザイン ドラフトでは [シンボルのコピー] と [イメージのコピー] を使用します。

(09:04) システム シンボル、モノクロ レンダリング、テキストを一緒に配置する場合は、シンボルのコピーを使用することをお勧めします。シンボルがテキストとしてデザイン ツールに貼り付けられます。

System symbol + text + monochrome:
  Edit > Copy Symbol
  Command-C
  Paste as text

Custom symbol or color rendering:
  Edit > Copy Image
  Option-Command-C
  Copy Image As: PNG or SVG, point size, pixel scale

キーポイント:

  • Edit > Copy Symbolシステムシンボルやモノクロモードに適しています。
  • Paste as textシンボルに SF フォントを使用すると、自動的にベースラインが調整され、フォントの太さが周囲のテキストと一致します。
  • Edit > Copy Imageカスタム シンボル、および多色、階層、パレット レンダリング モードに適しています。
  • Copy Image AsPNG または SVG を選択し、ポイント サイズとピクセル スケールを指定できます。
  • コピー画像はデザインドラフト用です。これを Xcode プロジェクトに配置する場合は、シンボルのエクスポートを使用して完全なカスタム シンボル機能を保持する必要があります。

重要ポイント

  1. やるべきこと: アプリケーションの「箇条書きリスト」を作成します。
  • 実行する価値がある理由: コレクションを使用すると、使用される実際のシンボルを 3,000 を超えるシステム シンボルから分離でき、同じリストに基づいて設計と開発を行うことができます。
  • 開始方法: SF Symbols 3 アプリを開き、プラス記号を使用してプロジェクト コレクションを作成し、検索したシステム シンボルをそのコレクションにドラッグして、名前、利用可能なバージョン、ローカリゼーション パフォーマンスを 1 つずつ確認します。
  1. やるべきこと: 古いシステムをまだサポートしているアプリのシンボリック名移行テーブルを作成します。
  • 実行する価値がある理由: 情報インスペクターは、新しい名前と古い名前の利用可能なバージョンを表示します。これにより、下位バージョンのシステムがシンボルを検出できなくなる可能性があります。
  • 開始方法: キーシンボルを選択し、現在の名前と放棄された名前を記録します。たとえば、次のように置きますperson.fill.badge.plusそしてperson.badge.plus.fillこれを移行テーブルに追加し、最小システム バージョンが上がった後に置き換えます。
  1. やるべきこと: 国際化されたインターフェイスのシンボル プレビュー チェックを行います。
  • 実行する価値がある理由: 一部の記号は、言語や書き込みの方向によって変わります。事前にプレビューすると、ルールブック、矢印、テキスト関連のアイコンの向きの問題を特定できます。
  • 開始方法: 情報インスペクターでローカリゼーションのパフォーマンスを確認します。コード内では接尾辞のないシンボル名を使用することをお勧めします。たとえば、bookこれにより、システムはユーザーの言語に基づいて適切なバージョンを選択できるようになります。
  1. やるべきこと: ブランド機能用のカスタム SF シンボルを作成します。
  • 価値がある理由: カスタム シンボルは、SF シンボルのフォントの太さ、サイズ、新しいレンダリング モードに接続でき、通常の画像リソースよりもシステム インターフェイスに適しています。
  • 開始方法: ターゲットに近いシステム シンボルを選択し、[ファイル] > [カスタム シンボルとして複製] を実行し、テンプレート SVG をエクスポートし、ベクター ツールで変更してから、SF シンボル アプリにドラッグして戻します。
  1. やるべきこと: まず検証のために、色付きのアイコンをデザイン ドラフトに入れます。
  • 実行する価値がある理由: Copy Image では、カスタム シンボルまたはカラーレンダリングされたシンボルを PNG/SVG としてデザイン ドラフトに挿入でき、チームは Xcode に入る前に視覚効果を確認できます。
  • 開始方法: レンダー インスペクターでマルチカラー、階層、またはパレットを設定し、編集 > イメージのコピーに移動し、必要に応じてイメージのコピーを使用してサイズと形式を指定します。

関連セッション

  • SF Symbols の新機能 - SF Symbols 3 の新しいシンボル、レイヤード レンダリング、パレット レンダリング、およびマルチカラーの更新を紹介します。
  • カスタム シンボルの作成 - カスタム シンボル テンプレート、パス編集、レイヤー注釈、補間ワークフローについての詳細な説明。
  • UIKit および AppKit の SF シンボル — UIKit および AppKit がカラフルな SF シンボルを使用するための特定の API を示します。
  • SwiftUI の SF シンボル — SwiftUI でシステム シンボル、カスタム シンボル、バリアント、レンダリング モードを使用する方法を示します。

コメント

GitHub Issues · utterances