mixiアプリ for touchを考える (4)【デザイン】
さて、前回のエントリーで色んな制限を学んだので、ようやくデザインに入ります。
今回デザインするみんなでケンテイ(´∀｀)は、モバイル版／PC版共に提供をしていますが、PC版を見ていただくとわかるように、モバイル版を力いっぱい流用したデザインです。決して手抜きじゃないよ
なので「PC版／モバイル版、どっちを参考にする？」という悩みは無いのですが、基本的にはもし両方のデザインが既にあるのならば、PC版のデザイン＋モバイル版のレイアウトが無難ではないでしょうか。
みんなでケンテイ(´∀｀)は、基本的にテキストコンテンツの
- リスト（一覧）表示
- 回答フォーム
- 結果表示
で構成されており、iPhone標準アプリの「連絡先」のような構成です。
ただ、「連絡先」で利用されている「A simple list in a plain table view（プレーンテーブル）」（iPhone ヒューマン インターフェイス ガイドライン参照）は、基本的に画面いっぱいを占領してしまうため、ロゴ等を掲載するスペースが一切ない、かつみんなでケンテイ(´∀｀)で見られるような、複数項目のリストを一画面に収めるためのUIではありません。
そこで「設定」アプリで見られる「A grouped list in a grouped
table view（グループ化テーブル）」というグループ化されたTableスタイルを基準として考えます。
グループ化されたTable Viewは任意の数のグ ループを含むことができ、各グループは任意の数の行を含むことができます。各グループの先頭に はヘッダテキストを付けることができ、フッタテキストを後に付けることができます。
（参照：iPhone ヒューマン インターフェイス ガイドライン）
とあるように、グループ化した複数のリストを1ページ内で同居させるためのUIです。うん、みんなでケンテイ(´∀｀)向きだね。
あと、一番今回デザインをする上で一番悩んだのが、いわゆるグローバルナビゲーションの処理。
Webサービスでは上の方に配置するのがセオリーですが、iPhoneやAndroidのネイティブアプリでは、「タブバー」（図 枠線部）と呼ばれるもの常に下に張り付き、同様の動きをはたしています。
このタブバーはコンテンツをスクロールしても動きません。
Webでいうcssの{position:fixed;bottom:0;}の状態です。
技術的な問題でも結構実は難解なのですが、それ以上に「グローバルナビ」として利用しようとすると、必ずファーストビューに収まることは必須！
そのためには前回のエントリーで書いたmixiアプリ for Touchのファーストビュー、320ピクセル×317ピクセルにタブバーを収める必要があります。
参考までにiPhone標準アプリのタブバーの高さは49ピクセル。
そうなるとmixiヘッダーを除いた実質的アプリファーストビューは、iPhoneの場合、縦表示だと320ピクセル×268ピクセル、ランドスケープモードにしちゃうと480ピクセル×120ピクセル。120ピクセルってっおい！
てなわけでタブバーの表示は断念。
その後も色々とゴニョゴニョしながら作ったデザインがこちら
グローバルナビゲーションはWebでは一般的なタブ表示。iPhoneライクなタブバーのデザインも考えたんですが、みんなでケンテイ(´∀｀)はポップなアプリなので空気読んでかわいめの角丸タブ。
また、またグループ化テーブルも、よりポップにするために枠を増やしたり色を変えたりアイコンつけたりゴニョゴニョ。でもリスト表示やリンクがあるものには「>」を付けるなど、最低限のセオリーは守れば、案外「っぽい」ものはできるものです。
ちなみにこれは実機でテストして初めて感じたことですが、iPhone／Android端末は思いのほかフリックでのスクロールが快適で、長いページ（1000ピクセル超）のページでもストレスを感じないということ。
代わりにファーストビュー以降のコンテンツは流し読みをしてしまうために、かなり目に止まりにく印象を受けます。ぶっちゃけファーストビュー以降はもう一番下のコンテンツまであまり順位付けが変わらないんじゃないか、つまりは「見て欲しい」順番に並べても効果が薄いという懸念が。
そこでフリックしてスクロールしながらも、少しはブレークポイントになって欲しいと思い、コンテンツの枠の色を随時変更したりしています。
一番下に上部と同じグローバルナビのタブを配置したのも、あっという間に斜め読みしてスクロールしきってしまったユーザーへの配慮です。
ただ、これでもまだコンテンツに目を留めるという施策にはなってないのかなぁ。まだまだUIの検討は続けていきますが今日はここまで。
