web-dev-qa-db-ja.com

モバイルアプリケーションのフローをどのようにマッピングしますか?例を提供できますか?

私は現在、モバイルアプリケーションのIA/UXに取り組んでおり、それをマッピングしているので、従来のサイトマップは意味がなく、フローチャートも理解できません。すべてのモーダルウィンドウをマッピングするのに意味のある適切なシンボルセットを誰かに教えてもらえますか

13
MSaforrian

Rahulが説明した手法に加えて、特定のコンテキストで「アプリケーションマップ」のHagan Riversのアプローチを適用することに成功しました。各画面を正確に1対1で表現するのではなく、彼女の手法は、ユーザーがメニューシステムに関してアプリケーションのフローを「認識する」方法を検討しようとします。彼女はまた、モーダルダイアログフローを非常にうまく処理できる「ハブ」と「スポーク」の概念を使用しています。

このアプローチの基本については、 OmniGraffle&Application Map および LukeW – Application Maps を参照してください。

この手法の詳細については、彼女がこの手法を詳しく説明した2010 UIE Web Appマスターツアーの議事録(私が行ったように)を入手することを検討してください。

8
Paul Hibbitts

私たちは、厚いシャープマーカーを使用してさまざまな画面全体をスケッチし、次にそれらを印刷または切り取り、壁にテープで貼り付けます(多くの場合、オフィスのガラス板)。 。利点は、ディスカッションを促進するための適切な忠実度があり(詳細ではありませんが、会話を促進するには十分詳細です)、チーム全体がそれを見てコメントできる領域に表示されます。ワイヤフレーミングツールでウィジェットをドラッグするのに多くの時間をかけるよりも、この方法の方が好きです。

この方法の最大の利点は、さまざまな画面を壁の論理領域に配置しようとすると、非常に早い段階で複雑さが明らかになることです。それが複雑すぎると、すぐにそれらすべてをどこに配置するべきかわからず、それでも意味をなさないことに気付くでしょう。これは、簡略化する必要がある早期の警告サインです。また、モバイルユーザーインターフェイスを設計する場合は、シンプルさが優先されます。

編集:出会ったばかり X付箋 。これらを上記の提案と組み合わせて使用​​してみてください。

UX Sticky Notes

3
Rahul

IOS向けに開発している場合:iOS5の新しいストーリーボードは完全なソリューションではありませんが、古いInterface Builderよりも優れています。

0
Kris9000

ワイヤーフレーム化する前に、各ステップのタイトルまたは機能の一部(「サインアップ」、「ログイン」、「ウィジェットリスト」、「アカウント情報」)をシャープで投稿します。次に、それらの投稿をホワイトボード上で平手打ちし、アイテムの周りにボックスを描画してそれらをグループ化し、ページ間を移動する矢印を描画します。プロセスを文書化するために、あらゆる構成でデジタル写真を撮ります。

0
sirtimbly

Axure を試してください。フローダイアグラムとワイヤフレーミングのシンボルのバランスが取れているので、すぐに始めることができます。モーダルウィンドウを自由に表示するための十分な自由度が得られます。例えばハイブリッドフロー/ワイヤーフレームの作成。

実際のデザインということで、どういう意味かわかります。どれだけ話すかによっては、数値参照を使用せずに整頓するのが難しい場合があります。幸運を。

0
KemanoThief