🎨
WWDC24『SF Symbols 6の新機能』セッションのまとめ
アニメーションプリセット
揺れ (Wiggle)
- 見逃されやすい変更やコールトゥアクションを強調するのに役立つ
- 操作を動きで目立たせたり、シンボルの意味を強調したりすることもできる
左右に振動させる
- シンボルは右または左に動かせる
- 読む方向に振動させたり、逆方向に振動させたりできる
- シンボルは動いてから元の位置に戻る
上下に振動させる
- 垂直に振動させることができる
- 上または下に動いたあとで開始地点に戻る
時計回り、反時計回りに振動させる
- 時計回りまたは反時計周りに動かすこともできる
カスタム角度で振動させる
- 紙飛行機の向きと同じ方向に動かすには、カスタム角度でシンボルの方向を指定する
- 315度に設定すれば紙飛行機が離陸するように見える
- 使いやすくする目的から揺れの多くのシンボルには、推奨の振動方向があらかじめ組み込まれている
- アプリの必要に応じてカスタマイズし別のアニメーションを使用することもできる
回転 (Rotate)
- シンボルにダイナミックな動きを追加して現実世界の動作を模したり視覚的なインジケータとして使用できる
- タスクの進行中に回転を適用するとタスクが期待どおりに進んでいるとわかる
- シンボル全体を回転できる
- シンボルの一部だけを回転できる
呼吸 (Breathe)
- シンボルをスムーズに脈動させて、生きているような印象を与える
- 状態変化を表したりアクティビティの進行を示したりできる
- 進行中の録画セッションなどで役立つ
パルスとの相違点
- SF Symbols 5で導入されたパルスに似ている
- パルスは不透明度の変化でアクティビティの進行を表現する
- 呼吸は不透明度とサイズを変えることでシンボルに動きを与える
- ハートの存在感を強く押し出して生きているような見た目にしたい場合は呼吸の方が適している
置き換え (Replace)
- シンボルが別のシンボルと入れ替わるプリセット
- 置き換えにはマジック置換という新オプションが加わった
- マジック置換では図形付きの2つのシンボルがスマートに切り替わる
- スラッシュは描画したり消したりでき、バッジはベースのシンボルとは独立して現れたり消えたり置き換えられたりする
- マジック置換は新しいデフォルト動作である
- マジック置換の使用が好ましい場合でも、シンボル同士が関連していなければ実行できない場合がある
- 2つのシンボル間でマジック置換を使用できない場合は標準の置き換えアニメーションを使用する
- その場合も アニメーションの方向を指定することはできる
- 2つの共通シンボル間でマジック置換を実行させつつ、人のシンボルに変わる時はOff-Upが使用される
- 独自のシンボルにシンボルコンポーネントを使用する場合もマジック置換が役立つ
- シンボルをSF Symbols 6アプリから再エクスポートしXcode 16にインポートする
可変カラー (Variable Color)
- 色を様々な強度レベルで表示するプリセット
- 色を使って時間とともに変化していくシンボルの状態を伝えることができる
- シンボルのデザインにより可変カラーの繰り返しの印象は異なってくる
開いたループ (オープンループ)
- 一部のシンボルでは色の不透明度の変化を一方通行にするのが適している
- 両端が接していない場合は開いたループと呼ぶ
閉じたループ (クローズドループ)
-
両端が接している場合はクローズドループと呼ぶ
-
可変カラーを繰り返す際のアニメーションを改善した
-
クローズドループのアニメーションがスムーズになった
- 可変カラー対応のシンボルを使う際は注釈を付けて閉じたループのデザインを最適化する
シンボルの利用例
例に使うサンプルアプリ
- アプリに実装された場合の例として植物が好きな人向けの サンプルアプリを設計した
- 植物を分類したり必要なケアのアクティビティを追跡したり植物の健康状態をモニタリングする
マジック置換
- マジック置換を使用して植物に影響のありそうな天気の変化を警告する
- シンボル間をスムーズに切り替える時はマジック置換がこれまでで最も優れた方法なので可能な限り使用することを推奨
揺れ
- ユーザーが自分の環境をスキャンして家にある植物の種類を検出できる
- 検出が完了するとその植物の名前と関連情報がアプリに表示される
- 画面上で行うべき操作を明確に示すためにボタン内部の矢印アイコンが振動し始める
- ユーザーの注意を引き、モンステラを植物コレクションに追加できるように導く
- 見た目の複雑なUIを実装した場合はこのようなアニメーションでユーザーにアプリの使い方を案内する
回転
- 回転する矢印がタスクの進行を表現している
呼吸
- 植物の健康状態や水やりの量を確認できる
- ランの仲間は根を15分ほど水に浸すことで水やりをする
- タイマーを開始させると水滴のシンボルが呼吸プリセットでアニメーション化される
- 視覚的なフィードバックによりアクティビティが進行中であることが示される
注意点
- アニメーションはUIに使うと効果的ですが、多用したり間違った文脈で使用すると目障りで気が散るものになり、重要なコンテンツや操作からユーザーの注意が逸れる
- アニメーションは目的を意識して使用し、ユーザーがしっかりと体験に集中できるように設定する
SF Symbolsアプリ
揺れ
- プリセットはAnimationインスペクタで確認できる
- [Default]設定では各シンボルに推奨の振動方向が適用される
- このシンボルには上向き矢印があるので上方向への振動が推奨されている
- 自分で設定を変更して右に揺らすことなどもできる
回転
- 揺れと同じく回転の場合も設定は推奨の回転方向
- 時計回りや逆回りにできる
パルス
- パルスを有効にすると選択されていたレイヤの不透明度が変化し奥行きを感じさせるダイナミックな動きがシンボルに適用される
繰り返しの指定
- アニメーションの繰り返しも細かく制御できる
- [1回]では繰り返しが1度だけアニメートする
- [間隔をあけて繰り返す]ではアニメーションは繰り返し再生され、その合間にどれだけ一時停止するかを設定できる
- [連続再生]では明示的に停止されない限り再生が繰り返される
カスタムシンボルに注釈を付ける
揺れの方向を指定する
- カスタムシンボルをアプリに使う場合もSF Symbolsアプリでアニメーション機能を利用できる
- ハート型の葉を1つのレイヤに配置し鉢は別のレイヤに配置する
- アニメーションをプレビューすると「いいえ」と首を振っているような動きに見える
- 楽しく踊っているような動きに見せる
- 揺れの方向を上に変更する
呼吸の注釈をつける
- 水滴を呼吸でアニメーション化する
- 動かしたい順序で各レイヤに一滴ずつ追加する
- すべてを1つのレイヤにまとめてプリセットがシンボル全体をアニメーションするようにすることもできる
- 2つ目、3つ目のレイヤを追加する
- シンボルのレイヤでパルスを選択し、既に注釈を付けている場合は呼吸でもその注釈が使用されるので、改めて設定する必要はない
回転
- 葉に1つのレイヤを割り当て、矢印に別のレイヤを割り当てる
- 全てのレイヤが回転してしまう
- 矢印のレイヤで[回転を適用]を選択する
- [回転を適用]を使用したレイヤ回転のアンカーポイントを基準にその周囲を回転する
- [回転のアンカーを表示/非表示]ボタンをクリックすると、新しいコントロールがキャンバスに表示される
- アンカーポイントとガイドがシンボルの余白を示す
- アンカーポイントがガイドの中央に自動配置される
回転の軸を修正する
- 卓上扇風機のようなシンボルを選ぶと、アンカーポイントをレイヤの中央に動かして[回転を適用]を使えるように整えるべき場合もある
- [ポイントにスナップ]ボタンをクリックすると、回転経路のベクトルが表示される
- アンカーポイントがこれらの点に併せて移動する
- 必要であればこれらの2つの点を調べて中間となる座標を手動で入力することもできる
- アンカーポイントは正確に配置する必要があるのでアニメーションがうまく動作するかどうか必ずプレビューする
- シンボルのコンポーネントのように回転のアンカーポイントもこれら3つのウェイトで定義する必要がある
- 定義が完了するとシステムが自動的に値を補間して、あらゆるウェイトおよびスケールのアンカーポイントを算出する
新しいシンボル
- 自動車カテゴリのシンボルが拡充されバッテリーコンバーチブル気温計などが追加された
- 様々なアクティビティを表すシンボルも増えた
- ギリシャ文字、キリル文字、数種のインド数字など特定地域の文字体系も新たに追加された
- プログレスインジケーター、触覚、ホーム、ウィジェット関連など多数のオブジェクトが用意されている
- SF Symbols 6のライブラリがさらに充実し6,000種以上のユニークなシンボルをあらゆるスケール、ウェイト、レンダリングモードで利用できる
参考資料
Discussion