モバイルUIのデザインでは、4段階の拡張を意識して、なるべくシンプルな形から計画的に構造を作る方針をとることが効果的です。私はこれを「モバイルUI構造の4段活用」と呼び、構造設計の指標の一つとしています。

モバイルUIはフォームファクタの都合上、物理的な制限の力が強く働くため、デザインではなるべく情報量を少なく抑える工夫が求められます。もちろん、どのようなデザインでも「シンプルに保つ」ことは原則的に同じだと思いますが、モバイルUIの場合はより顕著になるはずです。そのような環境に向けて最初からいきなり膨大な情報を複雑なナビゲーションで扱うようなUIを作ってしまうと、その後の機能拡張が難しくなりますし、小さい画面の中で大量の情報をあちこち行き来しながら触れることになるので、普通に使いづらくなります。

情報を増やす／減らすという観点に限れば、初めから情報量を不必要に増やさないよう努力することも、一つの有効な手立てです。結果的に情報量が増えることを抑えきれないなら、情報を増やすことをデザインとして計画に織り込んでおく考え方です。要するに、UIの屋台骨をしっかりと建ててから、拡張の方向性を示し、時間をかけて段階的に拡張していくのです。

私はこのことを、UIデザインにおけるアーキテクチャ設計と考えています。「モバイルUI構造の4段活用」は、その指標としてうまく作用するはずです。

第1段階：単一表示

単一のビューで構成された、シンプルなUI形態です。コンテンツエリアに加えて、ツールバーなど最低限のコントロールを提供します。もっとも基本的で、プリミティブな構造です。

例：
画像ビューア、ビデオプレイヤー、リスト、アウトラインなど。

第2段階：階層化

「単一表示」から、ドリルダウンによる階層化、またはスタック型のシート表現による階層化を施したUI形態です。情報をグループなどで構造化している場合には、“概要－詳細”のパターンを適用できます。

各階層には単一表示のビューが並んだり、それぞれが階層化されたより複雑なネスト構造を持つ場合もあります。

「階層化」はもっとも一般的で、採用事例が多くなるパターンとなるはずです。しかし、「単一表示」を飛ばしてはじめから階層化を検討してしまうともったいないので、まずは「単一表示」から検討してみましょう。そして第3段階以降に移ることは慎重に考えてください。

そのほか、シートをモーダル化するパターンもありますが、モードを重ねるとUIの自由度が下がり、タスクを強く意識しながらUIに触れる必要性が生じるため、意味のあるモーダル化にとどめましょう。

例：
設定UI、タイムライン（ソーシャル）、マップ、ウォレットアプリなど。

第3段階：並列化

「単一表示」や「階層化」から、さらに同様の構造を横に並べて並列化したUI形態です。タブによる並列化や、スライド可能なページ構造化がこれに該当します。アウトライン／アコーディオンによる並列化もある意味でこのパターンになるのかもしれませんが、単一表示の中での展開というより、ビューを差し替えるナビゲーションとしての並列化と捉えると、よりしっくりくるかもしれません。

タブバーパターンを採用する場合は、タブの消費数を極力抑え、将来の拡張に備えましょう。「設定タブ」のような存在は非常にもったいないため、そういったグローバルにおく必要のないナビゲーション要素は奥に追いやり、一等地には猶予あるスペースを確保してください。

例：
タブナビゲーション、iOSの「時計」アプリなど。

時計アプリのような例は「単一表示」からの直の並列化になるので、あまり構造が複雑にならずに並列化を実現できます。ウィジェットや単機能ユーティリティに向いています。

第4段階：更なる拡張

第3段階の「並列化」まで達してもなお、さらに上位もしくは下位にグループを形成する必要がある場合に限り、更なる拡張を検討してみてください。場合によっては単なる拡張では通用せず、UI全体の再構成が必要になるかもしれません。

第4段階に達したUI構造は複雑性との付き合いが続きます。ここまできたら、モバイルの範疇を超えた情報量を片手サイズのデバイスに収める覚悟で構造を考えなければならないでしょう。そうなると、ユーザーがUIの空間をイメージしながら滞りなく行き来できる構造を保つことが難しくなります。単なるビューの拡張としてではなく、何か特徴的な単位（「アプリ」や「サービス」など、明示的な単位）で表すか、別の表現を考えてみるなどの工夫を行ってみてください。

ここまでくると原理原則が通用しづらくなりますので、シンプルさを犠牲にする覚悟で、十分に気をつけて設計をしてみてください。グッドラック。

設計の勘所

タブナビゲーションの採用をまずは避けてみる

当初からタブバーをつけてしまうと、タブの仕組みに沿ってUIを考えてしまいがちになります。タブバーはグローバルナビゲーションとして機能するので、それ以上の拡張を期待できません。
（タブバーを内包する構造を作るべきではない、表示可能なタブ数に上限がある。）

タブではない形でまずはUIの構造を考えてみましょう。

タブナビゲーションのタブ数を極力3以下に抑える

タブナビゲーションでは、タブ数を極力3つ以下に抑えるよう努力してください。この3は目安であって、ルールやパターンではありませんが、いずれにしろ5つが上限になってくるので、今後の拡張性を踏まえ、3つ程度にするのが妥当です。

もしも2つ以下のタブで対応可能な構造であれば、そもそもタブナビゲーションの採用をやめてみましょう。

ドロワーなど、独自構造のナビゲーションの採用は慎重に

プラットフォームのデザイン言語にないパターン、独自実装が必要なUI構造の採用は、何であれ慎重に検討してください。ドロワーは上下タイプのシート型を除いて、採用することは極力避けましょう。タブ数の上限突破を意図したタブナビゲーションの独自実装は、UIの複雑化に拍車をかけるだけなので、後戻りを難しくします。複雑な構造設計に自信を持てる場合のみ、その道を進むことを推奨します。

複合的に組み合わせてみる

アプリ全体で第○段階の構造を一貫させるのではなく、タスクごとに構成されるそれぞれのUI構造に対して、個別に考えてみてください。ある部分では第3段階、別のある部分では第1段階の構造、というふうに組み合わせてみることで、柔軟にUIを構築できます。

基本コンセプトを可能な限り維持する

拡張を繰り返す過程であっても、当初に決めたUIのコンセプトは一貫させましょう。「構造を変えたから／拡張したから、コンセプトも変える。」…のではなく、基本的なUIの使い方、コンテンツへの触れ方、ユーザー体験に関しては、一貫して同じ思想の下で設計し、常にユーザーが同じようにUIに触れられる環境を保ちましょう。