2011年6月27日月曜日

スマートフォンUI考察-設定ボタンの場所

アプリケーションには設定画面が付き物。
Androidの場合は、メニューボタンを押して出てくるメニューで設定画面へのボタンを用意できるのでさほど困らないのかな。
iPhoneの場合はちょっと悩みの種です。

iPhoneでは、
 1. アプリ内で設定画面を用意する
 2. 端末の設定にて設定画面を用意する
の2種類が考えられます。

2.端末の設定画面 はアプリ外の画面になるので見落としがちになります。
そのため、登録が必須なもの..アカウント設定など..はアプリ内で作る事が多く、本当にオプション的なもののみ 端末の設定で用意する事が多いようです。

では、アプリ内で設定画面を表示するボタンは、どこに配置するのがよいのでしょうか??
標準アプリではアプリ内の設定画面を用意しているものは少ないので、有名どころのアプリをみてみます。

twitter
アカウント設定画面(Root画面)の フッダ(ToolBar)左 の [設定] ボタン

facebook
メニュー画面(Root画面)の ヘッダ左 を押すとActionMenuが表示されその中に各種設定へのリンクボタン

Skype
フッダ(TabBar) の 一番右 の [アカウント情報] のタブ

foursquare
フッダ(TabBar) の 一番右 の {アカウント名}のタブ

Evernote
全てのノート画面(Root画面)の ヘッダ左 の [設定]ボタン
(ヘッダ右にもボタンあり)

Dropbox
フッダ(TabBar) の一番右 の [設定] のタブ

Instagram
フッダ(TabBar) の一番右 の {アカウント名} のタブ

Google Latitude
フッダ(TabBar) の一番右 の [設定] のタブ

ロケタッチ
フッダ(TabBar) の一番右 の [ステータス]タブ 画面の ヘッダ右 のボタン (アイコンのみ)

beluga
Pods画面(Root画面)のヘッダ左 の ボタン (アイコンのみ)
(ヘッダ右にもボタンあり)

bump
メニュー画面(Root画面)のヘッダ右 のボタン(アイコンのみ)
(ヘッダ左にはボタンなし)

byline
フォルダ画面(Root画面)のヘッダ右 の[設定]ボタン
(ヘッダ左にはボタンなし)

※ Root画面と書いているのは、初期表示画面ではなくて、ナビゲーションの最上位に位置する画面をさしています。

ずらずらと書きましたが、まとめると

TabBarを使用している画面は、
タブの一番右のボタンに配置

TabBarを使用せず、ヘッダがNavigationタイプになっている画面は、
ヘッダ左右共にボタンがあるときは 左に配置
ヘッダに1つだけボタンがあるときは 右に配置

が多いようです。

みなみに、ヘッダがNavigationタイプでの設定画面への画面遷移(Transition)は
twitter フリップ
Evernote フリップ
beluga 下からスライド
bump フリップ
byline 下からスライド
でした。
思ったよりフリップ多いなーとの印象。
• • •