2013年2月5日火曜日

【WinRT】AppBarについて


右クリックすると出てくるナゾの物体,AppBar.
今回はこいつについてUIを中心に軽く書いていこうと思う.


AppBarのボタンについて
いろいろなアプリを見て気づく通り,
AppBarには丸で囲まれたボタンを使う.
はるか昔のエントリで書いたが,
多くのアプリでこの中に使っているものは実は文字である.
SkyDriveのAppBar

Segoe UI Symbolという標準で搭載されているフォントを使い,
私用領域に格納されているシンボル文字を使うことが多いのである.

どのようなシンボル文字が登録されているかというと
MSDN(http://msdn.microsoft.com/ja-jp/library/windows/apps/jj841126.aspx)
に明示されているし,IMEから文字一覧を開いても見ることができる.

AppBarにButtonを配置し,
WinRTプロジェクトを作成した時にCommonフォルダ下にできている
StandardStyles.xamlにある
AppBarButtonStyleというスタイルを使用して
Contentにこのシンボル文字を放り込んでやると
AppBarに置くフォーマットのボタンが出来上がる.
もしくは,StandardStyles.xamlにあるSkipBackAppBarButtonStyleみたいに
専用のスタイルを作成してそれをButtonに適用してもいい.

ちなみに,WindowsPhoneやWinRTにおいて,
ボタンというものはこういった丸囲みボタンがデフォルトである.
AppBar以外でもボタンといえばこれ,といった認識を持っておいたほうがいいだろう.


AppBarに載せてはいけないモノ
AppBarに載せたくなるが,載せてはいけないモノがある.
それは以下のとおりである.

  • 検索
  • 共有
  • 設定

この3つ.
さて,気づいたであろうか.
実はこの3つはWindowsキーを押したり画面右端からスワイプしたりして表示させる
チャームの中に存在する項目である.
チャーム

検索をさせたい,設定をさせたい,共有をさせたい
といったときはAppBarでなく,チャームから行わせることになる.
それぞれ専用のUIが必要になってくるので,実はそれほど軽くない.
がんばれ.


各ボタンの配置について
ボタンにはいろいろな特性がある.
画面上の特定オブジェクトに対する機能を果たすボタン
画面全体に対する機能を果たすボタン
ページ遷移をする機能を果たすボタン
AppBarではそれぞれで配置が決められている.

まず,画面上の特定オブジェクトに対する機能を果たすボタン
例えばSkyDriveにおいて[選択した画像ファイルを削除する]機能であったり,
新聞アプリにおいて[選択した記事をお気に入り登録する]機能であったり.
つまり,GridViewやListViewなんかで右クリックして選択したアイテムに対する機能である.
こういったボタンは下AppBarの左側に配置する.

次に,画面全体に対する機能を果たすボタン
例えば[画面全体の更新]機能であったり,
[ログイン]機能であったり.
こういったボタンは下AppBarの右側に配置する.

最後に,ページ遷移をする機能を果たすボタン
例えば,[お気に入り登録した記事へ遷移する]機能であったり,
[ホーム画面へ戻る]機能であったり.
こういったボタンは上AppBarに配置する.
[ホーム画面へ戻る]機能は下AppBarに配置されてることが多いが,
実はこれは誤りで,本来は上AppBarに配置しなければならない.

ただし,こうしろと書いてあるものの,
当のMS謹製アプリなんぞでも全然沿っていなかったり,
特にアプリ審査には関係ないようである.
すべてのアプリがこうだったら感覚的に操作できるようになるよねっていう
MSの思惑であり,それが望ましいという程度のようだ.

とはいっても前項目の載せてはいけない検索,共有,設定は禁忌である.
リジェクト要因に十分成りうる.

なお,今後このUI規定がどの程度までリジェクト要因として関わってくるかは
測定不能であるため,従えるなら従っていたほうがいいに決まっている.


なんか書こうと思ったことの半分くらいしか書けていないが
長くなったのでここらでポストしようと思う.
冒頭で軽くと書いたのに軽くなくなった.
また気が向いたら書く.

0 件のコメント:

コメントを投稿