Bottom tab bar、side drawer、Floating Action Button (FAB) は、トップレベルのモバイル ナビゲーションに最も頻繁に使用されるパターンです。 明確でシンプルなナビゲーション パスを設計したい場合は、アプリでこれらのパターンのいずれかを使用します。
Bring in Actual Copy
ビジュアル階層に満足したら、プレースホルダーとダミー テキストを実際のコンテンツ（実際のコピーまたはユーザーに関連のあるコンテンツ）に置き換えを開始します。 この段階でダミー テキストを避けるべき重要な理由があります – ローレム イプサムは、ページがユーザーの目標達成をどのようにサポートするかを伝えません。 また、私たちが作成するビジュアル要素の多くは、製品に含まれるコンテンツに基づいています。 実際のコンテンツを追加し始めると、いくつかの UI 要素 (または、UI セクション) が製品に必要ないことに気づくでしょう。
Wireframe に実際の詳細を詰めていくと、今あるレイアウトがうまく機能していないことに気づくことがあります。 この場合、反復して、伝えようとしている情報を表現するより良い方法を見つけることが重要です。
実際のコピーでページを埋めたら、ページがユーザーにとって流れるかどうかをテストします。 ページ内の一部のコンテンツは順序がずれている可能性があります。 これは、ページ上のコンテンツを再編成し、構成を改善する絶好の機会です。
以下は、実際のデータを持つ私たちのホーム画面のワイヤーフレームの例です。 異なるフォント サイズを使用して、一部の UI ブロック（食品カテゴリなど）に優先順位を付けています。
Ensure Your Content Scales Well
あなたのデザインがiPhone XSなどの中型の電話画面で素晴らしく見えたとしても、iPhone 5やiPhone XS Maxのユーザーが同じ素晴らしい体験ができるわけではありません。 ワイヤーフレームを作成するときに中型の画面から始めるのはまったく問題ありませんが、異なる画面サイズ（小さい画面と大きい画面の両方）でコンテンツがどのように見えるかをチェックし、必要に応じて調整することも不可欠です。
iPhone XSとiPhone 5のホーム画面デザイン
ページ間をつないで流れを作る
デザインは個々の画面の集合として出荷できますが、それらの画面から流れを作るほうがよいでしょう。 UX フローは、インタラクション シナリオの詳細をチームが理解しやすいようにします – 人々が製品をどのように操作することになっているかを伝えます。 たとえば、UXフローを視覚化した後、ホーム画面と検索結果のページの間に余分な状態を導入する必要があることに気づくかもしれません（システムのバックエンドが結果を返すのに数秒かかるため）。 参照番号があると、他のチーム メンバーや利害関係者とプロジェクトについて議論するときに、非常に楽になります。 テストはユーザー インタラクションを意味するため、この用語はプロトタイプのコンテキストでよく使用されます。 しかし、ワイヤーフレームから作成したフローに対して、簡単なテストを実施することは可能です。 Balsamiqを使えば、ワイヤーフレームを連結して、クリックするだけの簡単なプロトタイプを作成することができます。 5782>
Conclusion
ワイヤーフレームの最終的な目標は、コンテンツのアウトラインを特定し、デザインプロセスの今後のステップのための強固な基盤を作ることである。 よく設計されたワイヤーフレームは、ビジュアルおよびインタラクション設計をはるかに容易にします。
他の設計活動と同様に、異なるツールやプロセスを試すのに十分な時間をかければ、ワイヤーフレーム作成の独自のスタイルを見つけることができるでしょう。 Practice makes perfect.
Words by Nick Babich
Originally published on Balsamiq’s UI Education Site