モバイルアプリワイヤーフレーム

ダイアグラム17ノード1つのプロンプトから作成
読み取り専用プレビュー

フレームワークについて

フィットネスアプリのモバイルワイヤーフレーミング

このテンプレートは、最も重要なユーザーフローを1つのキャンバス上に示す慣例に従い、フィットネストラッキングアプリの3画面モバイルワイヤーフレームを示します。3つの画面はプライマリナビゲーションタブを表します——ホーム(日々の進捗)、ワークアウト(アクティビティ選択)、プロフィール(個人データ)。

各画面はモバイルUIの慣例に従います:上部にステータスバー、中央にコンテンツエリア、下部に永続的なタブバー。ホーム画面はゴールリングのパターン(Apple Watchで普及)を使用します。円形のプログレスインジケーターはモチベーションの点で直線バーより優れているためです。ワークアウト画面は親指ゾーンのスクロールに最適化されたリストレイアウトを使用します。

ステークホルダーとの議論や開発者への引き渡しの出発点として使用してください。AIにより多くの画面(ワークアウト詳細、設定、ソーシャルフィード)を追加したり、アプリのドメインを変更したり(金融、フードデリバリー、教育)、特定のカラースキームで高精度に変換するよう依頼してください。

含まれる内容

得られるもの

  • 3つの主要画面:ホーム、ワークアウト、プロフィール
  • 全画面で一貫したタブバーナビゲーション
  • デイリーゴールリングとクイックスタッツを持つホーム画面
  • カテゴリ平均を含むワークアウトリスト
  • ストリークトラッキングと設定を持つプロフィール画面
ダイアグラム

モバイルアプリワイヤーフレーム

ワイヤーフレームモバイルアプリUXフィットネスUIデザインプロトタイプ

✦ Free preview · Sign in to use

よくある質問

よくある質問

別の種類のアプリに変更できますか?

はい。AIに「これをフードデリバリーアプリのワイヤーフレームに変換して」または「口座、支払い、設定画面を持つバンキングアプリにして」と伝えてください。レイアウト構造はあらゆるモバイルアプリのドメインに適応します。

画面を追加するにはどうすればよいですか?

AIに「タイマー、心拍数、エクササイズリストを表示するワークアウト詳細画面を追加して」または「3画面のイントロ付きのオンボーディングフローを追加して」と依頼してください。新しい画面が既存のものに並べて追加されます。

高精度にできますか?

AIに「特定のUI要素を追加して:角丸ボタン、カードシャドウ、青と白のカラースキーム」と依頼してください。Figmaの精度には及びませんが、初期段階のデザインレビューには十分な詳細が得られます。

モバイルアプリワイヤーフレーム

無料で開始。クレジットカード不要。

Free preview · Sign in to use