はじめに
Android Developersではいくつかのページに渡ってタブレット端末のUI設計について説明しています。
本記事ではそれらの説明を元に、タブレットでアプリを表示した際に問題となりやすいデザインアンチパターンについて説明します。
参考URL
- Supporting Tablets and Handsets
- Tablet App Quality
- Planning for Multiple Touchscreen Sizes
- Multi-pane Layouts
- Developer Stories: The Opportunity of Android Tablets
シングルペインレイアウト
Android Developersではタブレット向けUIとしてマルチペインレイアウトを推奨しています。
これはタブレットにおけるシングルペインレイアウトが以下のような様々な問題を生みやすいためです。
ListViewの全幅表示
タブレットの横向き画面でシングルペインレイアウトのListViewを全幅表示すると個々の要素の表示領域が大幅に拡大される上に表示可能なリスト要素数が減るため、デザイン上の問題が非常に多くなります。
Android Developersでも「ListViews and menus should not use the full screen width.」と明記されています。
ボタンの全幅表示
シングルペインレイアウトでButtonの幅をmatch_parentとしていた場合、タブレットではボタンの幅が広くなりすぎる場合があります。
このようなボタンは大抵幅のみが拡大されるため、Android Developersでは「10 x 0.5-inch buttons」と表現されています。
TextViewの全幅表示
シングルペインレイアウトでTextViewの幅をmatch_parentとしていた場合、タブレットでは表示文字数が多くなりすぎる場合があります。
Android Developersでは行あたりの文字数は50-75文字程度が最適であり、最大でも100文字程度とされています。
(ただし、これは英語圏の話なので日本語環境では最適な文字数は異なると思われます)
EditTextの全幅表示
シングルペインレイアウトでEditTextの幅をmatch_parentとしていた場合、タブレットでは表示文字数が多くなりすぎる場合があります。
特に一行のEditTextの場合、入力文字数制限よりもはるかに幅が大きくなってしまう場合があります。
シングルペインのまま解決する
マルチペインレイアウトにすることが推奨されていても、やはり導入が難しい場合もあります。
そのような場合のための解決方法をいくつか紹介します。
コンテンツの幅を制限し、画面全体を中央寄せしてしまうことで、シングルペインレイアウトの横幅に関する問題を緩和することができます。
画面内の要素を並び替え、マルチペインレイアウト風にみせる方法も有効です。
この方法では画面の表示単位をスマートフォンと分ける必要がないため、Master/Detailパターンのマルチペインレイアウトを導入するよりも簡単です。
リストコンテンツの場合、複数列ならべる(グリッド化する)ことで横方向への融通が効くようになります。
RecyclerViewを利用すると様々な表示に対応できます。
参考URL:
http://developer.android.com/distribute/essentials/quality/tablets.html#optimize-layouts
http://developer.android.com/training/design-navigation/multiple-sizes.html#multi-pane-layouts
画面方向が固定されている
スマートフォンでは縦方向固定、タブレットでは横方向固定という仕様のアプリも見かけますが、できるだけ両方向に対応すべきです。
特にListViewを使った画面では縦方向で使えたほうが情報量が多くなって便利になります。
ただし、画面回転に関する注意点として、Android Developersでは画面は向きが変わっていても同一の機能を持つように努力すべきと書かれています。
つまり、マルチペインレイアウトの画面は回転させてもマルチペインレイアウトと同等の機能を提供するよう努力すべきということで、なかなか難しい問題です。
Android Developersではマルチペインレイアウトを回転させた場合のレイアウトパターンについてはいくつか提案されています。
参考URL:
http://developer.android.com/design/patterns/multi-pane-layouts.html
http://developer.android.com/training/design-navigation/multiple-sizes.html#orientations
また、SlidingPaneLayoutを使うと回転にも対処しやすくなります。
ダイアログの多用
タブレットに限らずAndroidアプリ全般でダイアログの多用は非推奨となっていますが、特にマルチペインレイアウトとダイアログの組み合わせは画面のどの領域がダイアログの発生要因なのかわかりづらくなる場合があります。
ダイアログを利用すべきパターンについてはAndroid Developersに明確な指針があるため、これに従いましょう。
参考URL:
特に、以下のようなダイアログはマルチペインレイアウトと相性が悪くなります。
読み込み中ダイアログ
Master/DetailパターンにおいてDetail領域の表示に読み込み中ダイアログを表示した場合、ダイアログが表示されている間はMaster領域も操作できなくなってしまいます。
このような場合はダイアログを利用せず、Detail領域内でProgressBarを表示したほうが良いでしょう。
入力エラー時のダイアログ
EditTextなどの入力チェックでダイアログを利用している場合も画面全体が操作不能になってしまい不便です。
入力部品にはsetErrorメソッドが用意されているので、これで代用可能かどうか検討しましょう。