Web Patterns
ガイドライン本文にある複数の部品を、利用者の目的に沿って組み合わせる参照例です。 製品別規則は共通構造を変えず、その製品だけの表現を具体化します。
App Shell / Sidebar / Mobile Navigation
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
今日の記録
ナビゲーションと主内容の責任を分け、文書scrollを保ちます。
Form
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
Chat
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
Schedia候補を二つに整理しました。どちらも編集できます。
あなた長期的な影響から比較したいです。
Loading / Empty / Error
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
データを読み込んでいます
取得済みの見出しや操作はそのまま残します。
Confirmation / Destructive Action
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
ワークスペースを削除
対象、影響、復旧可否を説明してから、赤い実行操作で確認します。
Authentication
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
Overview / Dashboard
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
今日確認すること
3件の確認待ちがあります。
確認待ちを見る最近の変化
- 資料Aが更新されました
- ToDoを2件完了しました
List / Detail
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
週次報告
今週の判断と次の行動を共有します。
資料を開くSearch / Filter / Results
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
2件の結果
- 佐藤 健 — 開発
- 佐藤 葵 — 営業
Settings
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
Multi-step Flow
画面全体の構造と状態遷移を確認します。 派生参照ビューを読む
2 / 4 内容を確認
チーム情報を確認
名前と参加者を確認して、次の段階へ進みます。