自分用のメモです。
抜け、間違いその他あると思います。
UIデザインの基礎
設計
-
加速度センサーや心拍数センサー等が着用者の日々のパーソナルデータを提供する。他のiOSデバイスと違い、常に身につけるものであるという事を意識する。
-
アップル·ウォッチは、物理オブジェクトとソフトウェア間の境界をあいまいにするように設計されている。この体験に貢献できるデザインにするべきである。
-
表示サイズと手首上の位置を最大限に活用できるようにデザインされるべきである。
-
ウォッチアプリはiOSアプリを補完するものであり、それに代わるものでは無い。相互作用が簡潔である必要があり、シンプルなインターフェースが求められる。
インターフェース
- ナビゲーションベースとページベースが利用できる。組み合わせる事はできない。モーダルを表示する事もできる。
操作
- シングルタップ
- スワイプ（垂直、水平、左端）
- フォースタッチ（押し込む）
- デジタルクラウン（竜頭）
- ジェスチャは開発者が追加する事はできない
- ピンチなどのマルチフィンガージェスチャはサポートしていない
Grances
- テンプレートベース
- スクロール不可
- 読み専門で操作はできない。タップすると iPhone 側でアプリが開く。
- 必須では無い。ユーザーが Grance を標示するか選択する事ができる。
- 一番下の部分はページインジケータドット用に確保されている。
- ユーザーの現在の状況に適した情報を表示するように時間と場所の情報を使用する。
- 有益な情報を表示する必要がある。ただアプリを起動する為だけに利用してはいけない。
通知
- ショートルックとロングルックがある。
- ローカルまたはリモートの通知をユーザーに提示するためにショートルックがある。
- ショートルックはプライバシー情報が少なめな最小限の情報を表示する。
- ユーザーが手首を下げるとショートルックは消える。下げずにタップすると、より詳細な情報であるロングルックが表示される。
- 頻繁な通知はユーザーが煩わしく感じ、無視する可能性がある。必要最低限なものにする。
- ショートルックはテンプレートベースで、アプリケーション名、アプリのアイコン、および付随する通知からタイトル文字列が含まれてる。アプリ名はアプリのキーカラーを使用して表示。
- ショートルックのタイトルは短く簡素にする。
- ロングルックは構造以外、カスタマイズ可能。
- ロングルックは静的インターフェースを提供する必要があり、アクションを定義したボタンを4つまで設置できる。最後に dismissボタンが追加される
- 必要に応じて動的インターフェースを提供することができる
モーダルシート
- モーダルシートはユーザーの注意を引きたい時や、タスクの完了もしくはデータの破棄を明示的に確認する時に使用すべきである
- モーダルシートは単一のスクリーンか、ページベースインターフェースで複数の画面を用意できる
- 左上隅に閉じるボタンが用意され、タップもしくは左エッジスワイプでモーダルシートを閉じることができる
- 閉じるボタンは必須であるが、テキストを変更することはできる
- タスクがユーザーの確認を必要とする場合、モーダルシートの中にボタンを表示することができる。ボタンをタップすると必要な処理を行い、モーダルシートを閉じるべきである
- モーダルシートからモーダルシートを呼ぶことは避ける
レイアウト
- ボタンは2つまで横に並べる事ができ、テキストでは無くアイコンを使用します。ユーザーのタップターゲットを確保するためです。
- アップルウォッチ実機のベゼルが視覚的パディングを提供するので、開発時はシミュレータの画面の端までスペースを全て利用してください。
- 異なるサイズのアップルウォッチで同じインターフェースを使用するため、アプリは相対的な位置を使用し必要に応じて要素を拡大します。
- 各要素は「上から下」「左から右」にレイアウトされます
- テキストボタンは常に全体が表示されることを保証するために、全ての幅を使用してください。
- 二次アクションを提示するコンテキストメニューを使用してください
- 必要に応じて異なる画面サイズ用のアセットを用意してください
色
- 背景色は黒を使用してください。デバイスのベゼルとシームレスにブレンドする事で、画面の端が広がる錯覚を得られるからです。明るい背景色は避けましょう。
- 全てのアプリはキーカラーを設定します。状態表示に使用するほか、ブランディングの一環として利用します。
- 可読性を上げるため、テキストは高コントラストのカラーを使用してください
- ボタンやコントロールの双方向性を示すためだけにカラーを使用しないでください
- 色覚障害の方の多くは赤と緑を見分ける事が困難です。赤と緑のみの使用箇所が無いかテストします
- 色の持つ意味は文化によって様々です。できるだけあなたの意図する意味が伝わる色かどうか確認してください
タイポグラフィ
- 組み込みのシステムフォントはアップルウォッチで読み易い様に特別に設計された動的なフォントです。
- カスタムフォントを使うこともできるが、テキストサイズの変更に応じて動的に処理を加える処理を追加する必要がある
- 可能な限りシステムフォントを使用してください
- アプリ単体で一つのフォントを使うようにしてください
- 手動でシステムのフォントサイズを決定する場合は、19pt以下だと Sanfrancisco Text Font, 20pt以上だと Sanfrancisco Display Font が選ばれます。
アニメーション
- 適切なアニメーションとは、「状態を表現し、フィードバックを提供する」「アクションの結果を可視化する」
- 静止画像のシーケンスで事前にアニメーションを作成し、Watch app bundle でそれを保存しておく事でスムーズにユーザーに提供できます。WatchKit extension で動的にアニメーションを作成し、アップルウォッチに転送すると遅延が発生します。
ブランディング
- 成功するブランディングはアプリのブランド性を高めるだけではなく、ユーザーに快適な、記憶に残る体験を与えます。
- ユーザーは目的を遂げるか、楽しむためにあなたのアプリを使用します。広告を見るために起動するのではありません。最高のユーザー経験のためのデザインであることを忘れないでください。
- アップルウォッチのスペースは限られています。ロゴを表示したい誘惑に抵抗しましょう。アプリでロゴを表示する事は web でロゴを表示する事と同じではありません。ユーザーは通常、アプリを開く前にあなたのアプリアイコンを目にします。
UI Elements
Labels
- 静的テキストを表示
- ユーザーインタラクションはできない
- プログラムで更新できる
- 複数行表示ができる
- フォントは組み込みの動的システムフォントを使用するのが望ましい
- カスタムフォントを使用する場合は派手なレタリングや色を使うことで明瞭さを犠牲にしない
Images
- 画像オブジェクトは1つ、または複数の画像アニメーションシーケンスを表示する
- 画像オブジェクトは自身の外観を持たない。画像を表示するのみ。
- ユーザーインタラクションはできない
- アニメーションを開始および停止するためのプログラム的コントロールを提供する
- @2x として全てのアセットを作成する。Retina用に作成する必要はない
Groups
- グループはあなたのインターフェイスでコンテンツをレイアウトするための重要なツールである
- グループは他のオブジェクトのコンテナとして機能する
- グループはそれ自体の外観を持っていないが、カスタムの背景色または画像で構成することができる
- グループは位置、サイズ、余白、および他のレイアウト関連のプロパティを指定するための属性を持つ
- グループオブジェクトは水平、または垂直にアイテムをレイアウトすることができる
- 1つ以上の他のインターフェイス要素が含まれる
- グループ要素の中の余白と間隔を指定するための属性がある - 背景として画像やソリッドカラーを表示することができる
- 背景とコンテンツに対して corner radius を設定できる
- グループは主に Xcode でデザインを実装するためのツールである
- 洗練されたレイアウトを作成するために、グループをネストすることができる
- 異なるサイズのアップルウォッチ用に画像サイズを拡大、圧縮しない。基本となるデバイスの正しいピクセルサイズで用意する
Tables
- 表には、単一の列内のデータ行を表示する。動的に変更する事ができる。
- 複数の行タイプをサポート
- スクロール可能
- 背景色、画像を持つ事が可能
- コンテンツ、ヘッダ、フッタで同じ行型を使用する
- コンテンツ内に、激しく異なる行型を混在させない。セクションを区切る場合のみ異なった行型を用いても良い。もしくは行を整理してください。
- 一度に表示するコンテンツは20行程度に抑えるべきである。それ以上ある場合は、まずすぐに関連のあるサブセットのみ表示し、残りを表示するオプションをユーザーに与える。
- グループ内部に表を埋め込まない。表は含まれる行の数によってサイズを動的に変更するため。
Buttons
- ボタンはアプリケーション固有のアクションを実行する
- 背景のカスタマイズ可能
- 角丸である
- Label, もしくはグループオブジェクトを含める事ができる
- ボタンの背景は platter と呼び、カスタムカラーや画像を表示する事ができる
- ボタンは横幅全てを使う事を強く推奨されている。もし横に複数のボタンを置きたい場合は２個までに制限される。
- 可能な限りボタンの高さを一致させる
- ボタンは他の要素と区別するために角丸になっており、標準 corner radius は 6pt である。
Switchs
- スイッチは２つ相互に排他的な選択肢、または状態を提示する
- 必ずラベルが含まれる
Sliders
- スライダーはバー両端の画像をタップして値を変更する
- 水平な線と両端の画像で構成されている
- ユーザーに数値は表示しない
- カスタム画像を使用する場合、スライダーの用途に合ったものにする
Maps
- マップは静的なスナップショットであり、ユーザーインタラクションは無い
- タップするとマップアプリへ飛ぶ
- コンテンツに利用可能なサイズを超えたマップオブジェクトを作成しない
- 注釈は5つまで表示可能
- ピンは３色あり、緑は開始地点、赤は目的地点、紫は関心地点に使用する
- カスタム画像を注釈に用いる事ができる（注釈の下縁が目標座標に位置する）
Date and Timers
- 日付とタイマーオブジェクトはアップルウォッチの時刻関連の値を表示する特殊なラベルである
- 日付ラベルは、日付、時刻、またはその２つを表示する
- 形式、カレンダー、タイムゾーンのさまざまな方法を使って目的と時刻を表示するように構成できる
- タイマーラベルは指定された時間までカウントダウン、もしくはカウントアップする事ができる
- 様々なフォーマットでそのカウント値を表示できる
- WatchKit Extension 側で更新する必要は無い
Menus
- ディスプレイを押し込むジェスチャでコンテキストメニューが表示される
- 1〜4つのメニューを表示できる。左から右、上から下に配置される
- メニューは階層的ではなく、スクロールしない
- メニューアクションは現在の画面に適用される
- 各アクションは画像とラベルの文字列を持つ必要がある。ラベルの文字は２行までに抑える
- メニューはオプションである
Icon and Image Design
アイコンと画像サイズ
- ホーム画面のアイコンは、iOSアプリと機能的に類似している場合はアイコンは同じものを使用し、iOSアプリを補完、またはコントローラー的な動作をする場合はそれに応じて変える
- 全ての画像やアイコンは png 形式が推奨される
- アイコンにはテキストは付かない
- ユニバーサルイメージを利用する
- シンプルにする
- 異なるサイズ用のアイコン画像を作成する
メニュー画像
- フォースタッチ内メニューアイコンの色情報は無視されます
- グリフを作成する場合、線は 4px 以上を使用する
- メニュー画像は png 形式が推奨される