WWDC25：Get to know the new design system

昨日に続けてデザインシステムのセッションの備忘録。コンテンツ重視の姿勢は iOS 7 から一貫しており、そのための Liquid Glass だし、それゆえに　Liquid Glass は装飾ではなく導入においてまずアプリの構造を見直すべきである、という趣旨と受け取った。

既存のアプリに Liquid Glass を導入は、ただ 最新の Xcode でビルドすれば対応が完了するというレベルでないことを示しており、デザイナーはもちろんだが、開発者もこの思想を深く理解した上で取り組む必要のある大仕事だと心構えるべきだと感じた。

---

• Design language
  • デザインシステムの設計において：
    • 細かなディテイルの及ぼす影響に焦点を当て
    • すべてのレベルに意図を込め、小さなコントロールから大きなサーフェスまで、すべての要素と全体との関係性を考慮した
  • システムカラーファミリー：ライト／ダーク／コントラスト比を上げた状態（Increased Contrast appearances）すべてにわたって機微に調整され、Liquid Glass と調和を持っている
  • タイポグラフィの再定義：明確さと構造を強めるため、bolder かつ left-aligned として視認性を高めている
  • もっとも意義深い変更：シェイプの扱い方
    • ハードウェアの一貫したベゼルと同じ精度でUIを揃える（曲率／サイズ／比率）
    • 3つのシェイプタイプ
      • Fixed：一定の角丸
      • Capsule：高さ / 2 の角丸
        • 自然と同心性が与えらえれる：システム全体で用いられている（スライダー、スイッチ、バー、ボタンなど）
        • タッチフレンドリーなレイアウトに focus と clarity をもたらすが
        • 高密度なレイアウトを持つデスクトップ環境では：
          1. mini, small, medium controls: rounded rectangle
          2. large controls: capsule
      • Concentric：親要素とのパディングから計算した同心な角丸
      • プロダクトのUI要素が Liquid Glass と調和することが重要（システムのリズム＆トーンを破壊せず、引き立てるべき）
      • 3つのシェイプを使い分けることで、システムと親和性を持ち、Apple API の扱いも容易になる
    • 自身のアプリをアップデートする際、角丸が詰まりすぎたり flared でないことに注意
      • e.g. nester container → concentric or capsule
      • tips: use concentricShape
• Structure
  • Liquid Glass を最大限活用するために：
  • アプリが immersive かつ content-focused になるにつれ、必要に応じたインタラクションのサポートが必要：落ち着き (unobtrusive) を維持しながら
  • Liquid Glass：コンテンツに浮かぶ新しい funcitonal layer
  • Depict relationships
    • サーフェスとの関連性を明確に表現すること
    • どのように出現し、その source と関連し続けるか、空間的でもあり grounded でもありながら
    • 旧来の action sheet：画面下から出現 → どのアクションと紐づくか不明瞭
    • Liquid Glass ではアクションボタン (source) から action sheet を出現させる
    • 関連付けを明確にするため、それがタップ要素から直接拡張したようにインタラクションを ancohring する
  • Reflect navigation focus
    • マテリアルの細かなバリエーションにより、ナビゲーションが深まったりシフトする際に、その意図を引き立たせる
    • cue: モダリティを示唆する dimming layer e.g. sheet
      • タスクがメイン導線を interrupt していることを、Liquid Glass と dimming layer とをあわせて表現する
      • sheet が引き上げられるごとに、さらに不透明度を高め、より深いエンゲージメントを与える
  • Elevate controls
    • 旧来はコントロールはその背景に溶け込んでいた
    • Liquid Glass はそれらを持ち上げ、背景のコンテンツとより分離をもたらし、インタラクティブ可能であることを強く示唆する
    • Clean up your bars
      • 装飾にこだわるよりも、階層がレイヤやグルーピングによって表現されるべき
  • Organize for legibility
    • 正しくAPIを用いることで自動的にバーアイテムはグルーピングされ、背景を共有することで、見やすさと空間的な明確さをもたらす
    • もし期待通りにならなければ
      • bar がごちゃついていたら: 不要なアクションを secondary action に移動する
    • シンボルとテキストをグルーピングしないように
    • プライマリアクションは分離させ、色をつけること
    • tab bar:
      • 検索が基本
      • accessory view：画面固有のアクションを置かないように (e.g. checkout button)
  • Prioritize content
    • Liquid Glass はその見やすさを維持するために、コンテンツとの分離が必要
    • Scroll Edge effect
      • decorative ではない：オーバーレイのようにblock したり暗くしたりしない
      • スクロールビューは自動的にそれを覆うコントロールがあれば edge effect を表示する (soft / hard)
  • Extend to the edge (e.g. sidebar)
    • Background extension effects
• Continuity
  • 他のデバイスを行き来して作業してもユーザー作業は継続している
  • デバイス・キャンバスサイズごとに最適化されたレイアウト
  • User shared content
    • 意図的にグルーピングはレイアウトに寄らず維持されるべき
    • 同じ意味に同じシンボルを使うべき
      • しかしラベルを用いた方が伝わりやすい場合もある
    • Liquid Glass において bar はテキストよりもシンボルに依存しており、この変化はプラットフォームによらない
      • メニューではラベルに加えてシンボルを伴った方が認識を助ける
      • ただし共通のアクションに対するシンボルの反復や異なるアイコンを割り当てることは避け、省略する
  • Structure components to scale
    • Define a shared anatomy：コンポーネントのある部分はプラットフォームをまたいで共有されるべき
    • Support core interactions：核となるインタラクションを共有することで、プラットフォーム間における構造の変化を、その振る舞いが埋める