WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
SF Symbols 2

SF Symbols 2

SwiftUI & UI FrameworksDesign
元の動画を見る

ハイライト

SF Symbols 2 は、Apple のシステム アイコン ライブラリを macOS Big Sur に拡張し、元の 1,500 以上のシンボルに 750 以上のシンボルを追加するとともに、テンプレート V2、ローカリゼーション、マルチカラー シンボル、レイアウト配置ルールも追加します。

主要内容

多くのアプリアイコンの問題は、美しいグラフィックがないことではありません。本当の問題は、アイコンがテキストと連動しなければならないことです。フォント サイズが変更されると、アイコンは太く表示できなくなります。ユーザーがより大きなダイナミック タイプ (ダイナミック フォント) をオンにすると、ボタン内の記号も変化します。インターフェイスがアラビア語またはヘブライ語に切り替わると、方向関連の記号が右から左への読み取り順序に適応する必要があります。

SF Symbols のアイデアは、アイコンを植字システムに組み込むことです。 San Francisco フォントと一緒に設計されており、小、中、大の 3 つのスケールを提供し、異なるスケール間でストロークを補正します。このようにして、アイコンがテキストに近い場合、開発者は幅と高さを手動で推測する必要がなく、視覚的な重みとベースラインの関係を維持できます。

SF Symbols 2 は、第 2 レベルの問題を解決します。このシステムは、より多くのプラットフォームとより多くのシナリオをカバーする必要があります。 macOS Big Sur は SF シンボルのネイティブ サポートを開始します。 750 を超える新しいシンボルがシンボル ライブラリに追加されました。 SF Symbols アプリはカスタム コレクションをサポートしています。テンプレート V2 は、ラインマージンを使用して正のマージンと負のマージンを表現します。ローカライズされたシンボルは拡大し続けます。マルチカラー シンボルを使用すると、天気予報やフォルダ バッジなどのアイコンに事前設定された色を付けることができます。

詳細

1. コピーしたグリフの代わりに UIKit でシンボル名を使用します

(05:28) UIKitの入り口はUIImage(systemName:)。セッションでは、SF Symbols アプリによって表示されるシンボル名をコード内で使用する必要があることが強調されています。たとえば、play.fillそしてshuffle、グラフィック文字自体をソース コードにコピーしないでください。

// SF Symbols: simple usage and symbol configuration

import UIKit

class MainPlayerViewController: UIViewController {

    @IBOutlet weak var playButton: UIButton!
    @IBOutlet weak var shuffleButton: UIButton!
    @IBOutlet weak var playImageView: UIImageView!
    @IBOutlet weak var shuffleImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupButtons()
    }

    func setupButtons() {
        let buttonConfig = UIImage.SymbolConfiguration(textStyle: .headline, scale: .small)
        playImageView.preferredSymbolConfiguration = buttonConfig
        playImageView.image = UIImage(systemName: "play.fill")
        shuffleImageView.preferredSymbolConfiguration = buttonConfig
        shuffleImageView.image = UIImage(systemName: "shuffle")
    }

    @IBAction func playAction(_ sender: Any) {
    }

    @IBAction func shuffleAction(_ sender: Any) {
    }

}

キーポイント:

  • UIImage.SymbolConfiguration(textStyle: .headline, scale: .small)テキスト スタイルとシンボル スケールの両方を指定します。 -textStyleシンボルをダイナミックタイプの変化に追従させます。トランスクリプトは、テキストと記号が一緒に大きくなったり、小さくなったりすることを示しています。 -preferredSymbolConfigurationつけるUIImageView, そのため、両方のアイコンが同じ一連の視覚的構成を共有します。 -UIImage(systemName: "play.fill")そしてUIImage(systemName: "shuffle")シンボル名を使用します。セッションには、シンボル自体をコピーするとコードが使用できなくなることが明確に記載されています。

2. SwiftUI での画像、ラベル、テキスト添付ファイルの使用

(07:44) SwiftUI は短くなります。Image(systemName:)シンボルを取得する責任を負い、imageScaleスケールを調整し、fontポイント サイズ、フォントの太さ、テキスト スタイルを受け入れます。

// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "shuffle")
            .font(.headline)
            .imageScale(.small)
    }
}

キーポイント:

  • Image(systemName: "shuffle")UIKit のようなシンボル名を使用します。 -.font(.headline)SwiftUI のフォント システムにシンボルを入れます。 -.imageScale(.small)シンボルのスケールのみが変更され、フォント サイズはアイコンの幅や高さのようにハード調整されません。

(08:10) SwiftUI 2020 も追加されましたLabel, 「テキストと記号」を直接表現する共通コントロールに適しています。

// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("Sharing location",
              systemImage: "location.fill")
    }
}

キーポイント:

  • Labelテキストと記号をセマンティック コントロールとして扱います。 -systemImageそれでもシンボル名を渡します。
  • このタイプの書き込みは、ツールバー、リスト行、設定項目、ステータス プロンプトに適しています。

3. macOS Big Sur は AppKit シンボルをネイティブにサポートします

(08:34) SF Symbols 2 のプラットフォームの変更点は、macOS Big Sur が SF Symbols のネイティブ サポートを開始することです。 AppKit が使用するものNSImage(systemSymbolName:accessibilityDescription:)シンボルを取得し、補助機能の説明を提供します。

// Using SF Symbols in AppKit

if let shuffleImage = NSImage(
    systemSymbolName: "shuffle", accessibilityDescription: "shuffle") {
    shuffleImageView.image = shuffleImage

    // Configure symbols
    let config = NSImage.SymbolConfiguration(textStyle: .body, scale: .small)
    let shuffleButtonImage = shuffleImage.withSymbolConfiguration(config)
}

キーポイント:

  • systemSymbolNameAppKit に同じ SF シンボル名のセットを使用させます。 -accessibilityDescriptionVoiceOver などのアクセシビリティ機能について、人間が読める形式の説明を提供します。 -NSImage.SymbolConfiguration(textStyle:scale:)UIKit の構成モデルと一致しています。 -withSymbolConfiguration(config)アプリケーション構成後に画像を返します。開発者が複数のサイズを手動で描画する必要はありません。

4. テンプレート V2、ローカリゼーション、およびマルチカラー シンボル

(10:29) カスタム シンボルのテンプレートは引き続きデザイン ソース ファイルであり、SF Symbols アプリからエクスポート、変更し、Xcode にインポートできます。テンプレート V2 の構造は、3 行 9 列、つまり 3 つのスケールと 9 つの重みを維持します。変更点はマージンです。従来の長方形のマージンが線マージンになり、プラスとマイナスのマージンが表現できるようになります。

Template V2 を使用する場合、プロセスは SF Symbols アプリからシンボル テンプレートをエクスポートし、小、中、大の 3 行とウルトラライトからブラックまでの 9 列を保持し、各レイヤーに一意の説明的な名前を保持してから、変更された SVG テンプレートを Xcode アセット カタログにインポートします。

キーポイント:

・3列で小、中、大に対応します。 ●9列でウルトラライトからブラックまで対応します。

  • トランスクリプトには、ファイルの整合性にとってレイヤー名が重要であり、テンプレートを変更するときに構造を保持する必要があることが明確に述べられています。
  • テンプレート V2 の行マージンは、位置と名前を使用して位置合わせ情報を表現し、色は視覚的な手がかりとしてのみ使用されます。

(11:57) ローカライズされたシンボルは自動的に適応されます。カスタム シンボルの場合、アセット カタログをローカライズし、各 SVG テンプレートのロケールを指定するアプローチがとられます。右から左へ記述する言語で、シンボルを直接反転できる場合は、シンボルの方向をmirrors。

カスタム シンボルのローカライズはアセット カタログ レイヤーで処理されます。SVG テンプレートのロケールを指定します。右から左へ記述する言語に遭遇した場合、シンボルのセマンティクスのみが直接反転を許可し、シンボルの方向は次のように設定されます。mirrors。

キーポイント:

  • システム シンボルのローカライズでは、開発者がコード内のバリアントに手動で名前を付ける必要はありません。
  • カスタム シンボルは、アセット カタログ レイヤーでロケール バージョンを提供する必要があります。 -mirrorsセマンティクスに準拠したシンボルを直接反転するのに適しています。それが適切でない場合は、ローカライズされたバージョンを別途設計する必要があります。

(14:27) マルチカラー シンボルは、天気、バッジ、および複数のカラー レベルを必要とするその他のアイコンに使用されます。 AppKit の例では、isTemplateのためにtrueモノクロの着色可能なテンプレート動作を使用します。に設定falseマルチカラーバージョンも保存可能です。

// Tinting symbols

if let folder = NSImage(
    systemSymbolName: "folder.badge.plus", accessibilityDescription: "add folder") {
    folder.isTemplate = true
}

if let folder = NSImage(
    systemSymbolName: "folder.badge.plus", accessibilityDescription: "add folder") {
    folder.isTemplate = false
}

キーポイント:

  • isTemplate = true単色の、着色可能なテンプレート シンボルに対応します。 -isTemplate = falseシンボル自体のマルチカラー レンダリングを保持するために使用されます。
  • 転写では、マルチカラー シンボルの色がシステム カラーと同様に外観に動的に適応されると説明されています。

5. レイアウト時に記号を表記体系の一部として扱う

(16:02) セッションの最終レイアウト提案は非常に具体的です。シンボルに固定フレームを指定しないでください。シンボルには独自の視覚的なサイズがあり、同じテキスト スタイルまたはポイント サイズに従ってテキストと一緒に植字するのに適しています。ベースラインを水平方向に、位置合わせガイドを垂直方向に見てください。

レイアウトの仕様は、いくつかのチェック項目で完了できます。シンボルは、隣接するテキストと同じポイント サイズまたはテキスト スタイルを使用します。シンボルとテキストはベースラインに従って配置されます。垂直レイアウトのシンボル列は中央揃えを使用します。固定フレームを回避し、アスペクトに合わせてスケールし、それに基づいて調整します。sizeThatFitsサイズの導出;シンボルが CALayer の明示的領域に配置されると、コンテンツの重力は中心に保たれます。

キーポイント:

  • シンボルは固定サイズのビットマップとして扱われるべきではありません。
  • テキストと位置合わせする場合、ベースライン位置合わせは中央位置合わせよりも信頼性が高くなります。
  • 垂直リストでは、シンボル列を中央揃えにすることができますが、テキスト列は先頭揃えのままです。
  • シンボルが CALayer の明示的な領域に配置される場合、コンテンツの重力は中央に留まる必要があります。

重要ポイント

  • Dynamic Typeに追従できるプレーヤーコントロールエリアを作成。対処法: 再生、一時停止、シャッフル、ループをすべて SF シンボルに置き換えます。実行する価値がある理由: セッションのデモンストレーションUIImage.SymbolConfiguration(textStyle:scale:)文字サイズの変更に合わせてシンボルを作成できます。開始方法: SF Symbols アプリで確認してくださいplay.fill、shuffleこのタイプの名前では、ボタン画像は次のように一律に構成されます。.headlineそして.small。

  • macOS サイドバーのシンボルとテキストの配置が改善されました。対処法: フォルダー、受信トレイ、お気に入りなどのサイドバー アイコンを macOS Big Sur ネイティブのシンボルに置き換えます。実行する価値がある理由: AppKit はすでに機能していますNSImage(systemSymbolName:accessibilityDescription:)SFシンボルを直接使用します。開始方法: を使用して、各サイドバー項目のアクセシビリティの説明を提供します。NSImage.SymbolConfiguration(textStyle: .body, scale: .small)統一された構成。

  • ステータス アイコンにマルチカラー セマンティクスを追加。対処法: 天気、同期ステータス、フォルダー バッジなどのアイコンは、必要に応じてマルチカラー バージョンのままになります。実行する価値がある理由: SF Symbols 2 には事前定義されたマルチカラー シンボルが用意されており、色は外観に応じて動的に調整されます。開始方法: デザイン ドラフトで多色をマークします。 AppKit では、多色を保持する必要があります。NSImage設定isTemplate = false。

  • 右から左に書く言語のカスタム アイコンを確認してください。対処方法: 方向関連のカスタム シンボルをローカリゼーション レビュー リストに追加します。実行する価値がある理由: このセッションでは、アラビア語やヘブライ語などの右から左へ記述するシステムについて明確に言及しています。一部のシンボルはミラーリングできますが、一部は個別に設計する必要があります。開始方法: アセット カタログをローカライズし、SVG テンプレートのロケールを指定します。直接反転できるシンボルの方向を設定します。mirrors。

  • 設計からコードまでのシンボル命名プロセスを確立します。機能: デザイナーは SF Symbols アプリでコレクションを作成し、開発者はシンボル名を使用してコードを記述します。実行する価値がある理由: セッションは、アプリから Xcode への検索、コピー、ペーストのプロセスを示し、記号文字自体をコピーしないように注意します。開始方法: リボンごとにコレクションを作成し、shift-command-C で名前をコピーし、その名前を UIKit、SwiftUI、または AppKit 初期化子に入力します。

関連セッション

  • SF Symbols の最新情報 - SF Symbols 3 はこのゲームを継続し、シンボルの数、ローカリゼーション、カラー レンダリング機能を拡張しています。
  • カスタム シンボルの作成 — カスタム シンボルのレイヤー構造、デザイン制約、レンダリング モードについて詳しく説明します。
  • UIKit および AppKit の SF シンボル — UIKit および AppKit でのシンボルの構成、色、およびコントロールの統合を拡張します。
  • SwiftUI の SF シンボル — SwiftUI で画像、ラベル、シンボル スタイルを使用する方法について引き続き説明します。
  • SF Symbols 4 の新機能 - SF Symbols 4 のその後のライブラリ更新と表現機能についてフォローアップします。

コメント

GitHub Issues · utterances