タブレットアプリの画面レイアウトを考えてみる
#win8dev_jp
意外に10インチ以上のタブレットの画面を考えてみると、広くて収集つかなかったりする。もちろん逆もありますが。
なのでいくつか他のパターンにしてみる。
（同時表示する）コンテンツはシンプルなら
最もシンプルなのはこの1画面パターン。ゲームに代表されるが多数のコンテンツを表示させない際には便利である。
ただ、1画面でも結構作りにくいので分割はすることもある。
2分割もあるが、両サイドを使って3分割もある。Webに似ている。
分割のメリットは中央のメインコンテンツが正方形に近くなり、縦横のレイアウトにフレキシブルに対応しやすくなる点である。ここに一部多数のコンテンツを表示するならこういった形になる。
ここで大事なことは、たとえ一画面でも随時必要なコンテンツ以外は表示させないこと。メニュー的なものは基本表示しない考えて設計したほうがいい。たまに必要なメニューはすべてこのようにアプリケーションバーにしまっておくこと。
多数のコンテンツが中心
次により多くのコンテンツが主役になった場合はもちろん、画面全体をスクロールさせる。
横の場合は、タイトルを残す場合と残さない場合があったり。
これにコンテンツを入れていくのだが、単純に同じタイプのコンテンツが並ぶだけならよいが、さらにもう1階層さまざまな画面がある場合は、このようなレイアウトが適切になる。
Windows 81. のWindows ストアやNewsアプリなどはこれ。Windows 8.1 ではハブコントロールとして用意されているので使いやすい。Windows Phone でいうところのパノラマアプリケーションと同じ感覚で使える。
Windows ストアに並ぶアプリケーションを見てみるとその多くが上記のパターンに落ち込むことがわかる。あとは、どのパターンがいいか考えてみればいい。あくまでコンテンツ中心で想像するとおのずと決まってくるはずだ。
実際は何を使うのか？
ここで使うコントロール（パネル）は主にこのあたりになる。
- Grid パネル
- ハブコントロール
- ScrollViewer + StackPanel
実際にはもっとパネルの種類は多いが、メインで使うのはこのくらいである。
これらを使う際に注意することがあるとすれば、Gridパネルを細かく何階層にもわたってネストさせて実装しないほうがいいということ。描画時に毎回画面配置の計算が入りパフォーマンスが低下するから。
これはガイドラインに過ぎない
最後に、一番大事な注意点 。「これはガイドラインというか考え方の案の1つであって、こうでなければいけない」 というものではないということ。画面デザインをするときは「何を表示するのか」を考えながら 「この目的のためにはもっともよいUIはこれ」 というのを作っていく。
なので、このようなレイアウトパターンにならなくても、ユーザーに最適なものがあるのならばそっちを優先すべきである。
- タイマーのアプリを作る
- 画面で行うのはセットされたタイマーの確認と設定
- すぐ確認できるようにするための画面デザインは何か？
- 最も効率よく時刻設定や呼び出し方の設定をするための画面デザインは何か？
- 作ったものは最適であるか？不足はないか？無駄なものはないか？
こんな感じで進めるといいと思う。
「この目的のためにはもっともよいUIはこれ」
これが一番大事です。