WWDC 2015 | Design | Session 805
51:54
https://developer.apple.com/videos/play/wwdc2015-805/
※WWDCセッション関係の記事は、セッション内容を要約して内容を伝えるのが目的ではない。各セッションビデオで何が話されているかの項目をテキスト化することで後で何かを調べたいときにどのビデオを見れば良いか判断する材料にするために書いている。
Apple Watchのアプリケーションを開発するときに、デザイン上陥りやすい問題を10個あげて、そんなことはしないようにと警告しています。
他のセッションでも繰り返し注意していたパフォーマンス問題が1つ。
アプリケーションのナビゲーションの問題が4つ
ボタンの操作しにくさや表示のわかりにくさの問題が4つ
アプリケーションアイコンが1つ
それぞれにどうすればよいかのアドバイスを実例を使って説明しているのでわかりやす。
[Apple Watch Design]
Personal Communication
Holistic Designe
Lightweight Interaction
※Holistic…全体的な
[Top 10 Common Pitfalls]
1) Slow apps
Desiging for Performance
- Progress Loading
・Ordering Content
最初の画面表示部分に必要なデータのみを読み込む。
- Optimize graphics
・Compress
JPEG…圧縮度を大きくしてサイズを小さくしても見た目が変わらないようにできる
PNG…使用する色数を減らしても見え方が変わらない場合がある。24bit -> 8bit
・Avoid transparency
・Right size
2) Complex apps
Apple Watch is Not a Miniature iPhone
Quick and
Focus on the Essentioal
Complement Your iPhone App
3) Tedious navigation
Page-based model - ページ数は増やしすぎない
Hierarchical model - 2階層、最高でも3階層以下に
二つを組み合わせたUIにすべきではない。どちらか一方に決める。
4) Confusing labels
トップページのタイトルを左上にしない。ボタンじゃ内から
上の階層に戻るバックボタンは「Back」にiPhoneのように上位階層のタイトルにすると長すぎる。
モーダルシートではDissmis, Cancel, Close,など
階層モデルでモーダルシートの閉じるボタンを< Backとすると階層と区別つかない。
※この項は説明がうまく理解仕切れなかったため上記要約は間違っているかもしれません。
5) Using menus for navigation
[Bonus Pitfall]
Menuにする場合には、tint colorを付けるなどする（なぜかよく聞き取れなかった）
28:00〜
6) Buttons that don't look like buttons
色があるとどのアプリを使っているか認識しやすい。
> を付けると場所を取り過ぎるので付けないほうがよい。
chevrons ※山形袖章
ボタンアイコンの周囲を円で囲うことでボタンと認識させる。
or rounded rectangle
逆にrouded rectangleにするとタップできると混同されてしまう。
7) Inadequate tap targets
※inadequate 不適当な、未熟な
細かすぎて指で操作できない
80x80 on 42mm
75x75 on 38mm
53pixel以下は使うな
アイコンボタンは横に3個より多く並べないこと
8) Tiny Fonts
SF Compactフォントを使うことをすすめる
Dynamic Typeをサポートする。
9) Background colros and unnecessary padding
小さな画面サイズをフルに使い、読みやすくするためには
背景色を付けて表示領域を狭めたり、透過背景にして画像を貼るのも見にくくする。
ボタンサイズを不必要に小さくするのもよくない。
10) Mismatched app icon
Remove text
Simplify glyphs
Retain colro and style
