🎨
WWDC23『SF Symbols 5の新機能』セッションのまとめ
これまでのSF Symbols
- 最初のSF Symbolsはモノクロのシンボルのみで構成されていた
- 一貫性をもたらし親近感を生み出した
- 2021年 SF Symbolsは新たなレンダリングモードを提供し高い汎用性を持つようになった
- 階層、パレット、マルチカラー
- そして昨年2022年には可変色が導入され、シンボルで異なる強さのレベルを伝えたり、時間の経過とともに一連の流れを伝えたりできるようになった
アニメーション
アニメーションの説明
- アニメーションはインターフェイスにバイタリティ動きダイナミズムを加えることのできる新しい方法
- すべてのシンボル、スケール、レンダリングモードで機能し、シンボルをこれまで以上にカスタマイズできるようにする
シンボルレイヤーとアニメーションの関係
- シンボルはそれを定義する統一レイヤー構造がある
- レイヤーが正しい順序で配置されているか確認することはレイヤーにどのように色が適用されるか決定するのに役立つ
- レイヤーはシンボルがどのようなアニメーションにするか重要な役割を果たす
- デフォルトではシンボルはレイヤーごとにアニメーションする
- すべてのレイヤーを一度に動かしたいシナリオがある場合はシンボル全体をアニメーション化できる
アニメーションにおける空間の概念
- 空間はシンボルに動きが加えられたときに奥行き感を生み出すための次元性を意味する
中央
- 中央の平面は3次元空間の中心に位置する平面である
- 平面はシンボルの位置決めや移動の基準点となる
前面
- 前方の平面とは見る人に最も近い面である
- 前面に配置されたシンボルは大きく表示される
後面
- 後方の面が見る人から最も遠い面である
- 後面はシンボルがインタラクションする次元の範囲を定義する面
- 後面のシンボルは小さく表示される
その他
- シンボルは方向性に基づいてこれらの平面を使用する
- アニメーションの種類によってシンボルは平面内を上と下にあるいは下と上にさまざまな方法で移動する
- 平面から完全に外れることもある
アニメの種類
表示 (出現)
- 出現アニメーションはインターフェイスにシンボルが登場するときに使う
- ある要素が徐々に姿を現しシンボルを現し注目を集める視覚効果
非表示
- 出現の反対でシンボルがインターフェースから取り除かれるときに使う
- 削除または消去された要素について通知を受ける必要がある場合などに視覚的なフィードバックを提供するのに役立つ
バウンス
- 物体の跳ね返りをシミュレートする高速で伸縮性のある動き
- シンボルとのインタラクションが成功したことを知らせる
- アクションが行われたことを知らせる
- フィードバックを提供する
- シンボルが伝えようとしているコンセプトを強化しより遊び心を見せることができる
- シンボルをよりインタラクティブで魅力的なものにし、エネルギー感を生み出すこともできる
スライダーの例
- スライダーは左の最小レベルから右の最大レベルまで連続的な輝度レベルを表す
- スライダーの両脇にある
sun.minとsun.maxのシンボルはその機能を視覚的に伝える - スライダーが右端までドラッグされるとバウンスアニメーションが発動する例
- 画面が最大輝度レベルに達したことを知らせる視覚的なフィードバックを提供する
スケール
- スケールのアニメーションはシンボルのサイズを変えることで視覚的なフィードバックを提供する
- サイズを大きくスケールアップするかサイズを小さくスケールダウンする
- アクションが行われたことを確認する
- シンボルの重要性を強調し注意を集める
利用ケース
- 元の大きさに戻る前に一瞬だけ大きくして、シンボルとのインタラクションが認められたことを視覚的にフィードバックする
- シンボルが縮小され元のサイズに戻った場合押されたような印象を与える
- 物理的なボタンの動作を模倣しており、アクションが認識されたときの理解の助けになる
- 人の動作に反応し、より触れたという感覚を持つようなインターフェイスを作りたい際に最適
スケールアップの例
- フォルダの上にカーソルを置くとスケールのアニメーションが起こりシンボルのサイズが大きくなる
- このアクションは拡大された状態で持続しシンボルに注目を集めるのに役立つ
- 次のシンボルに移ると同じアニメーションが起こり今度はフォルダからリストにフォーカスが移る
バウンスとスケール
- バウンスはアクションが発生したこと、あるいはアクションを起こす必要性を伝える
- スケールはアイテムが選択されたとき、フォーカスやフィードバックを提供する
- スケールはステートフルであり、エフェクトが削除されるまでスケーリングされた状態が持続する
パルス
- 不透明度を変化させ進行中のアクティビティを伝える
- パルスはシンボルにレイヤーを使用することでそれが伝えようとしているアイデアを強化できる
画面共有の例
- このマークは画面を共有している人を表す
- セッション中に進行中のアクティビティをさりげなく伝えるためにシンボル全体をパルスにすることもできる
- あるいはこの機能を最大限活用するため、画面を表す形状だけをパルス化し、アクションが起こっている間により明確で正確な情報を提供できる
可変カラー (可変色)
- カラーバリエーションは、強さのレベルを変化させシンボルの状態が時間とともに変化することを色を頼りに伝える
- 可変カラーもアニメーションライブラリの一部となり、累積的と反復的の表現方法がある
累積的
- 前の状態を維持したままレイヤーを次々にハイライトする
- ワイヤレス接続を可能にするWi-Fiシンボルを表現する
反復的
- レイヤーを順番にハイライトしていくが、一度に1つずつハイライトしていく
- 利用可能なネットワークを探すWi-Fiシンボルを効果的に表現できる
反転オプション
- 反復効果はWi-Fiシンボルに適用され、それに加えて反転オプションがある
- これは可変カラーを選択する際に選択できる別の設定である
- ハイライトされたレイヤーを元のポイントに反転させ、アクションが中断されるまですぐにまたシーケンスを開始する
置き換え (置換)
- あるシンボルが別のシンボルと入れ替わるアニメーションの一種である
- 機能の移行を示すシンボルの状態の変化を伝えるため使用される
- どのシンボルをどれと置換するかを決めることができる
- デフォルトのレイヤーごとまたはシンボル全体をアニメーション化することができる
- それに加えて方向性という概念がある
ダウン/アップ
- シンボルが下方に移動し視界から消え、その後に新たなシンボルが上方に移動しながら現れる
- これにより2つのシンボル間のスムーズな移行が実現し、通常は人の入力に従って一方がもう一方にダイナミックに置き換わる
アップ/アップ
- シンボルは上方へ移動し視界から消え、続いて新しいシンボルが安定した上方への動きで現れる
- これにより前へ前へと進んでいく感覚が生まれ、シームレスに展開する出来事を表現できる
プレイとシンボルを置き換える例
- プレイシンボルを操作しアクションを開始するとすぐにポーズシンボルに切り替わる
- 一時停止が次のアクションであることを示すことができる
テキスト選択にあわせてシンボルを置き換える例
- 取り消し矢印、やり直し矢印、貼り付けアクションを表すクリップボードのシンボル
-
Helloという単語を選択するといくつかの記号はすぐ他の記号に置き換わる - ハサミは切り取りを書類はコピーを表している
- 単語が選択された後、次にどのようなアクションが可能かを理解するのに役立つ
アニメーション描画
体、顔、耳を描く
- シンボルをデザインするための手順をおさらいする
- シンボルは基本的にベクトル描画
- 完全に囲まれた形として、クマの体、顔、耳を描くことでシンボルのデザインを定義する
前足、オフセットパスを描く
- 次に前足と消去レイヤーとして使うオフセットパスを描く
レイヤーを分ける
- シンボルをどう動かしたいか視覚化する必要がある
- 前足と消しゴムのレイヤーは別々のレイヤーとしてフォアグラウンドに配置する
- アニメーションに奥行きを持たせシンボルをよりダイナミックにすることができる
完成したデザイン
レイヤーに塗りつぶし (描画)または消去の注釈をつける
- 塗りつぶしまたは消去でレイヤーに注釈を付ける
- 塗りつぶしでは、選択されたレイヤーにパスが描画される
- 消去では、選択されたレイヤーのパスが削除されシンボルのレンダリング方法に影響する
マルチカラーの注釈
- マルチカラーの注釈をつける
消去レイヤーの効果
- 部分的に隠れていた形状の一部が見えるようになる
- 消去レイヤーを使わなくてもシンボルをアニメートできるが、大きな違いがある
- 消去レイヤーを使ってシンボルを描くとシンボルのアニメーションが改善され正確で精度の高い動きになる
- 消去レイヤーがないシンボルは静止した状態ではうまく機能するが、動くと深みと活気を失ってしまう
- 形がスムーズに流れていかない
- 連続性とまとまりに欠け不十分な視覚体験となる
- 消去レイヤーを使った描画は、描画と補間の複雑な工程が少なくて済むためスピードが速いだけでなく、アニメーションの可能性を最大限に引き出す
- カスタムシンボルにアニメーションを使用する予定がある場合は必ず確認する
- シンボルが動いているときは、パスの調整が必要かもしれない
新しいシンボル
- ステアリングホイール、チャイルドシート、座った姿などのシンボルで自動車カテゴリを拡大した
- アーケードゲーム機、アーケードスティックさまざまな種類のボタンなどゲームカテゴリに新しいシンボルが加わった
- EVプラグの種類を表す新しいシンボルも追加された
-
月の出、月の入り、虹のような、新しい天気のシンボルも追加された
-
その他のオブジェクトを用意した
参考資料
Discussion