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 下からスライド
でした。
思ったよりフリップ多いなーとの印象。
• • •

2011年6月25日土曜日

スマートフォンUI考察-iPhone標準レイアウト

スマートフォン向けのアプリを作ろうとするとき、アプリを見直して、何がどこにあるのが一般的かを毎回ぼーっとみています。
忘れてしまうぐらいなら記事にしてしまえ! ということで、スマートフォンUI考察 シリーズ と題して書いてみようと思います。

第一回は iPhone標準レイアウト

HTMLではこんな配置が多いかと思います。

iPhone, Androidなどスマートフォンでは、解像度は高くなったとはいえ、画面サイズが小さいので全て1画面に収めるのには無理があります。
必要なの要素を、どれだけ省略してすっきり画面内に収めるか。というのが腕の見せ所(?)かと思います。
なにはともあれ、iPhoneの標準アプリがとっても参考になります。

時計

時計アプリには時計の他にストップウォッチなど、複数の機能があります。
それらの機能はグロバールナビゲーション的なタブ切替として一番下に配置されています。
iPhoneで"タブ"と呼ばれるもの(UITabbedPane)は、下に表示されるのが一般的です。

この画面のレイアウトは、登録系画面の基本的な形になるかと思います。

AppStore, Youtube

フッダ部分にタブ形式でグローバルナビゲーション。
ヘッダ部分に表示切替のトグルボタン(SegmentedControll)が配置されています。
タブで表示内容を決め、トグルボタンでさらにフィルタをかけるイメージです。

この画面のレイアウトは、一覧表示系の画面にて使用される形になります。
登録系画面では使用されないはず。

カレンダー

タブがないパターン。
追加ボタンは、通常 ヘッダの右に配置される事が多いです。
この画面では追加ボタンがあるため、表示切替のトグルボタンは、フッダに配置されています。
たまに、ヘッダに 追加ボタンと表示切替のトグルボタンの両方がヘッダに配置されているアプリもあります。

カレンダーの種類を設定する画面へのボタンがヘッダ左に配置されています。
階層的に親画面になるものは、ヘッダ左に遷移ボタンが配置されます。
遷移元画面へ戻るボタンで、 <□□ の形のものがありますが、これは実際遷移を行ったときに表示されるものです。 カレンダーアプリではよく使うこの画面をデフォルトの画面にしているため、親画面を経由していません。 そのため □ の形状のボタンになっているのと思います。


Map


検索バーは通常画面上部に表示されます。
ヘッダ + 検索バーが表示されるレイアウトもありますが、コンテンツ表示可能サイズが小さくなってしまうので、その場合は検索バーは通常は非表示にする事が多いと思います。

Safari

Mapと似た配置になります。
ページタイトルは、検索バーの中に書くことでサイズを節約できています。

標準アプリはUIの統一感がとれているとおもいませんか?
自然に使っているけど、よく考えられているんだろうなーと思います。

標準アプリ以外の有名どころのアプリも少し見てみます。

Facebook


処理ボタンがヘッダの下にあります。
ちょっと標準形式から崩れているので、何をするボタンだろう? 表示切替かな? と始めに思ったりしなかったでしょうか?w

foursquare


標準形式にまだ似ているので、分かりやすいんじゃないかと思います。
ただ、
横の 周辺のスポット 、世界中 のトグルボタンは、この画面内の表示切替なのに、マップ表示の画面に飛ぶ処理ボタン(地球儀のマーク)がその横にあるのは分かりにくいなぁーと思います。

画面が少ないから、いろんな機能、ボタンを収めてしまいたい!と思うのは良くわかるのですが、
横に並んでいるものは、画面遷移をするもの、画面内の情報を切り替えるもの は混在させない方が分かりやすいかと思います。

今回はこんなところで。
次回も続く予定。たぶん。
• • •

2011年6月8日水曜日

MacOSXのchromeでスマートフォン用UserAgentを偽装

MacOSXのchromeでスマートフォン用のUserAgentを偽装して表示したかったので、User-Agent Switcher のExtensionを入れてみたのですがなんか上手く動かず、イラっとして起動用スクリプト書いてみました。
UserAgentの値はMAX FACTORY スマートフォン機種情報一覧から頂きました。有難うございます。
起動アプリはgmailになってます。(URLの変数の値を変えると変更できます)
終了時にchromeのエラーが出力されたりするのですが...気にせず使ってますが...なにか間違っていたらすいません。

#!/bin/sh

# 指定されたUserAgentをつかってGoogleChromeを起動します。@ Mac
# 
# chromeの設定は ${USER_DATA_DIR}の場所に入ります。

USER_DATA_DIR="/~/Library/Application Support/Google/Chrome/smartphonedev"
URL="https://mail.google.com/mail/"

# UserAgent一覧
iPhone4="Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7"
iPhone3GS="Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16"
iPad="Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

HT03A="Mozilla/5.0 (Linux; U; Android 1.5; ja-jp; HT-03A Build/CDB72) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1"
Xperia="Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1"
GalaxyS="Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; SC-02B Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
IS01="Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; IS01 Build/S6191) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1"
IS02="Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 8.12; MSIEMobile 6.5) KDDI-TS01"
IS03="Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; IS03 Build/S2080) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17"
Desire="Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; HTCX06HT Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17"
Aria="Mozilla/5.0 (Linux; U; Android 2.2.1; ja-jp; S31HT Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

while true; do
    cat >>EOF
使用するUserAgentを選択してください
1:iPhone4
2:iPhone3GS
3:iPad
4:HT-03A
5:Xperia
6:GalaxyS
7:IS01
8:IS02
9:IS03
10:Desire
11:Aria
数字を入力してください
EOF
    read ACT
    case ${ACT} in
     1)  USER_AGENT=$iPhone4 break ;;
     2)  USER_AGENT=$iPhone3GS break ;;
     3)  USER_AGENT=$iPad break ;;
     4)  USER_AGENT=$HT03A break ;;
     5)  USER_AGENT=$Xperia break ;;
     6)  USER_AGENT=$GalaxyS break ;;
     7)  USER_AGENT=$IS01 break ;;
     8)  USER_AGENT=$IS02 break ;;
     9)  USER_AGENT=$IS03 break ;;
     10)  USER_AGENT=$Desire break ;;
     11)  USER_AGENT=$Aria break ;;
     *)
      printf "エラー: 無効な項目 \"%s\" が入力されました\n" "${ACT}"
      ;;
    esac
  done
 
echo userAgent = "${USER_AGENT}"

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="${USER_DATA_DIR}" --app="${URL}" --user-agent="${USER_AGENT}"
exit 0


user-data-dir を指定するとか知りませんでした。
開発テストではdirを切り分けるとなにかと良いかも。
• • •

2011年6月7日火曜日

UITabBarControllerのloadViewのタイミング

iOS の UITabBarController でちょっとハマったのでメモ。

UIViewController と UITabBarController とでは loadView, viewDidLoaded のイベントのタイミングが違うみたい。
@interface MyViewController : UIViewController {
}
@end

@implementation MyViewController
- (id) init {
    NSLog(@"super init call!");
    self = [super init];
    if (self) {
        NSLog(@"init call!");
   }
   return self;
}

- (void)loadView {
    [super loadView];
    NSLog(@"loadView call!");
}

- (void)viewDidLoad {
    [super viewDidLoad];
    NSLog(@"viewDidLoad call!");
}
@end

こんな感じのUIViewController の場合、
1. super init call!
2. init call!
3. loadView call!
4. viewDidLoad call!
の順番で呼ばれます。

... が 継承元を UITabBarController にした場合、つまり上記のコードでinterface部分を
@interface MyViewController : UITabBarController {
}
@end
とした場合は、
1. super init call!
2. loadView call!
3. viewDidLoad call!
4. init call!
の順番で呼ばれるみたい。

なので、UITabBarController の init の所でプロパティの初期化をするようなコードを書いいると、
loadView のタイミングでは初期化されていない という状態になってしまいます。

Tabだからそういうもんかもしれないかもしれないけど、おかしい気もする。うーん ?

私的には
UITabBarControllerを継承してクラスは作成しない方向でこれからは組む
...と心に決めましたw
• • •