Mobile app はスマートフォン画面のセットを構築します。1 枚のスクリーンショットではなくフローです。オンボーディング、メイン画面、設定、その間の状態を、実際のスマートフォンサイズのアートボードのボードとして配置します。アプリ形状のデザイン用テンプレートです。タッチターゲット、モバイルナビ、画面間のフローです。
1 画面ではなく、セット
フローをブリーフに書きます。「習慣トラッカーアプリ: サインアップ、今日のビュー、ストリーク、設定」と書けば、エージェントが画面セットを構築します。それぞれが結果内の 1 つのアートボードです。mobile viewer はそれらを、順に進めるボードまたはグリッドとして配置するので、フローがスクリーンショットの山ではなくフローとして読めます。
画面は画像ではなくライブです。タップで進み、コントロールにホバーし、ナビが実際にどこかへ行くかを確認します。スマートフォン幅で。タッチターゲットとボトムナビが破綻するのはここです。
Mobile app · Devin · e2e · gate PASS
Frond — A plant-care app in three finished screens — today, detail, reminder — device frames and all.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile app: a plant-care app: today screen, plant detail, and watering reminder.”
モバイルルール、チェック済み
ゲートのスマートフォン幅チェックがここでは最重要です。ヒットターゲットサイズ、行き止まりのナビ、最後の行を飲み込むボトムバーです。テンプレートはそれらのルールを読み込むので、エージェントはそれに合わせて構築します。指用のサイズのコントロール、どこかへ到達するナビ、小さな画面でも生きるタイポグラフィです。
得意なこと
- アプリのコンセプト作業 — 構築前のアイデアの画面セット
- 機能フロー — 新機能が既存画面にどう通るか
- モバイル特有のパターン — シート、ボトムナビ、スワイプ状態
- ステークホルダーレビュー — 仕様書ではなくボードとしてのフロー
画面セットのステアリング
他の結果と同じステアリングを、モバイル形状で。
- ⌥-click でコントロールや画面領域を選び、正確な場所にコメント
- 追記 で欠けた画面や間違ったフローを修正(「サインアップと今日の間に空の状態を追加」)
- Tweaks でデザインが公開するパラメータ(密度、角丸半径)を調整
- Variants で同じフローの 2 つの異なる案
スマートフォン vs モックアップ vs Web サイト
- Mobile app — スマートフォン形状の画面、タッチスケールのコントロール、モバイルナビ
- UI mockups — デスクトップまたは Web インターフェースの絵
- Interactive website — 動くサイト、マルチページ、デスクトップファースト
画面セットがスマートフォンサイズでタッチ形状なら、たとえその「アプリ」がモバイル Web フローでも、このテンプレートです。
ヒント: 完成と呼ぶ前にすべての画面をスマートフォン幅で確認しましょう。ここで最も多い FAIL は、デッドゾーンに落ちるボトムバーや最終行のコントロールで、デスクトップサイズでは見えません。
エクスポート
画面セットは 画面ごとの PNG、またはセットとしての PDF にエクスポートします。デッキ、仕様、ステークホルダー資料向けです。ファイルはプロジェクトフォルダに残り、次のステアリングに使えます。