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のレイアウトで悩んでいた。
数が決まっているテンプレートではあるが、選択するのはとても難しい。
でも、自分でラベルを置いてレイアウトするよりは、よっぽど楽 という結論に今は落ち着いている。