忘れてしまうぐらいなら記事にしてしまえ！ ということで、スマートフォンUI考察 シリーズ と題して書いてみようと思います。
第一回は iPhone標準レイアウト
HTMLではこんな配置が多いかと思います。
iPhone, Androidなどスマートフォンでは、解像度は高くなったとはいえ、画面サイズが小さいので全て1画面に収めるのには無理があります。
必要なの要素を、どれだけ省略してすっきり画面内に収めるか。というのが腕の見せ所(?)かと思います。
なにはともあれ、iPhoneの標準アプリがとっても参考になります。
時計
それらの機能はグロバールナビゲーション的なタブ切替として一番下に配置されています。
iPhoneで"タブ"と呼ばれるもの(UITabbedPane)は、下に表示されるのが一般的です。
この画面のレイアウトは、登録系画面の基本的な形になるかと思います。
AppStore, Youtube
ヘッダ部分に表示切替のトグルボタン(SegmentedControll)が配置されています。
タブで表示内容を決め、トグルボタンでさらにフィルタをかけるイメージです。
この画面のレイアウトは、一覧表示系の画面にて使用される形になります。
登録系画面では使用されないはず。
カレンダー
追加ボタンは、通常 ヘッダの右に配置される事が多いです。
この画面では追加ボタンがあるため、表示切替のトグルボタンは、フッダに配置されています。
たまに、ヘッダに 追加ボタンと表示切替のトグルボタンの両方がヘッダに配置されているアプリもあります。
カレンダーの種類を設定する画面へのボタンがヘッダ左に配置されています。
階層的に親画面になるものは、ヘッダ左に遷移ボタンが配置されます。
遷移元画面へ戻るボタンで、 <□□ の形のものがありますが、これは実際遷移を行ったときに表示されるものです。 カレンダーアプリではよく使うこの画面をデフォルトの画面にしているため、親画面を経由していません。 そのため □ の形状のボタンになっているのと思います。
Map
検索バーは通常画面上部に表示されます。
ヘッダ + 検索バーが表示されるレイアウトもありますが、コンテンツ表示可能サイズが小さくなってしまうので、その場合は検索バーは通常は非表示にする事が多いと思います。
Safari
ページタイトルは、検索バーの中に書くことでサイズを節約できています。
標準アプリはUIの統一感がとれているとおもいませんか？
自然に使っているけど、よく考えられているんだろうなーと思います。
標準アプリ以外の有名どころのアプリも少し見てみます。
処理ボタンがヘッダの下にあります。
ちょっと標準形式から崩れているので、何をするボタンだろう？ 表示切替かな? と始めに思ったりしなかったでしょうか?w
foursquare
標準形式にまだ似ているので、分かりやすいんじゃないかと思います。
ただ、
横の 周辺のスポット 、世界中 のトグルボタンは、この画面内の表示切替なのに、マップ表示の画面に飛ぶ処理ボタン(地球儀のマーク)がその横にあるのは分かりにくいなぁーと思います。
画面が少ないから、いろんな機能、ボタンを収めてしまいたい！と思うのは良くわかるのですが、
横に並んでいるものは、画面遷移をするもの、画面内の情報を切り替えるもの は混在させない方が分かりやすいかと思います。
今回はこんなところで。
次回も続く予定。たぶん。