2015年5月7日木曜日

Apple Watch Glanceのレイアウト

Glanceに望むもの

Apple Watchを手に入れ、お気に入りのGlanceを設定。
でもなかなかお気に入りのものって無かったりする。

必要な情報なのか?
というのももちろんなんですが、綺麗なものでないと置きたくない。

Glanceは、表示専用画面を一つ作るようなものなので、とても手軽に作れるわけですが、デザイン的な重要さはWatchAppアプリよりも高いのではないだろうか。
デザイン的には、全然 気軽じゃないものだ。

Glanceはテンプレートベース

ご存知の方も多いと思うが、Apple WatchのGlanceはテンプレートベースでレイアウトする。

UpperとLowerに分かれていて、それぞれにテンプレートを適用して実装していく。
UpperとLowerのサイズは決められていて変更することはできない。

どんなテンプレートがあって、それらはどんなサイズになるのか?は、
Apple WatchkitのDesign Guides and Templatesにある
Apple Watch Design Resourcesのファイル見るのが一番早い。
なぜなら、XCode上ではフォントサイズが分からないから。(=サイズの修正は不可)
このリソースにはpsdとsketchのファイルが入っているので、そこからフォントサイズが分かる。

マッチするテンプレートがあれば幸せですが、無い方が多いのではないかと思う。
その場合は、自由に設定ができるGroupで囲まれたテンプレートがあるのでそれが使える。
だが、文字を表示する場合はできるだけそれを避けて、テンプレートのLabelを使えないか検討するのをオススメしたい。
(その理由は後述)

言い換えると、Glanceのデザインを考える際、
「画面デザインを考えてから、合ったテンプレートを探す」のではなく、
「テンプレートから合うものを考える」という方がよいかもしれない。

テンプレートを使うメリット

整ったレイアウトになる
というのは言わずもがなと思うが、他にもある。

1. 端末によってフォントサイズを変えてくれる

Apple Watchには38mmと42mmの端末がある。
端末によって、フォントサイズを変えた方が整うことが多い。
Watchは画面サイズが小さいので、iPhoneよりもそういう場面が増える。

テンプレートで用意されたラベルは、自動的にサイズを変えてくれる。
例えば、
42mmの時は、San Francisco Display/Regular 45pt のものは、
38mmの時は、San Francisco Display/Light 40pt になる。

2. フォントの上下マージン

Apple Watch標準フォントのSan Franciscoには、上下にマージンがある。

テンプレートのLabelは、このフォントの上下マージンが無い状態でレイアウトしてくれる。


左はテンプレートのラベル表示。
右はLowerをGroupにして、自分でラベルを追加した時の表示。(もちろん項目間のスペースは0に設定済み)
テンプレートのように詰めてラベルをレイアウトするのは、頑張ればできなくないが結構大変だと思う。
WatchでのレイアウトではX,Yの絶対座標での位置指定はできないし、(Groupを除いて)要素を重ねて置くことはできないから。

この"詰めれない"というのが、整ったレイアウトにするハードルをかなり上げてしまう。

3. 他アプリとの統一感

Glanceではページをめくって他アプリのGlanceも見る。
その際に、フォントサイズが各アプリでバラバラよりは、統一されていたほうが見やすいに違いない。
テンプレートは色々あるが、使われているフォントサイズはほぼ決まっていて、全体でも5つぐらいしかない。

また、大きい文字(=重要な文字)がある位置も、ある程度決まる。
テンプレート全体を見渡してみても、一番大きい文字が、一番下にレイアウトされることは無い。

提供されているテンプレートを使うとよい という締めくくりになるのだが、
この数日、私は、まさにGlanceのレイアウトで悩んでいた。
数が決まっているテンプレートではあるが、選択するのはとても難しい。
でも、自分でラベルを置いてレイアウトするよりは、よっぽど楽 という結論に今は落ち着いている。
• • •