Iwark/AndroidWearBootcamp0828.md

## AndroidWearBootcamp0828.md

      
    Raw
  

              AndroidWearBootcamp0828.md
            
          
    Android Wear Bootcamp

Material Design

マルチデバイス時代のユーザー体験の一貫性の課題


同一プラットフォーム上の他社製アプリとの間の操作感の一貫性
同一サービス／アプリが複数のForm Factorで提供されている場合のブランド表現／操作感の一貫性

Material Designに対応すべき理由


より洗練されたブランド表現

色の使い方の洗練
対応出来るUIパターンの柔軟性


ユーザー満足度（幸福度）の向上

多デバイスのAndroid上での体験との一貫性


先進的なUI/UX体験（いい評判／ユーザー獲得の機会向上）

Material Designへの４つの対応


Surfaces & shadows（それぞれのUIの「深さ」／紙が置かれているようなイメージ）


フラット　ミニマリズム　->　オシャレ、見かけでUIを議論していると進歩がない
実際にユーザーが直接的に理解しやすいのは物理的・空間的なもの。


Meaningful & delightful motion


空間的な意識を持ち続けるためのアニメーション
ズームイン／アウトなど、空間的な理解をナチュラルに行わせる


Print-like aesthetic


見た目に関すること。

スペースを上手く使う
ランダムなグリッドは使わない


Adaptive design


画面のサイズが変わっても同じ体験をしてもらう

開発者としての視点


Android Design Guidelineに対応しているものは無駄にはならない
Support Libraryが更新・追加されてMaterial Designに対応していく
Google I/O 2014 Appのソースコード・開発者ブログの参照を推奨

最新のAndroid L


Viewの背景からの高さを指定できる（柔らかいShadow）
Animationを強化するAPIが沢山追加

順次、旧バージョンでも再現できるようにしていく


Wearとの関連


Notification機能の強化
Notificationの本来の目的

ユーザーの滞在時間が長い = ユーザーの人生を邪魔
生活を豊かにするには、テクノロジーは見えないところで活躍するべき
ユーザーが必要なときに勝手に判断して必要な情報を届けるべき
ユーザーの人生を邪魔しないデザインをする


ユーザーがOn/Offできる設定機能を提供するべき

Android Wearの概要

Android Wearの目的


隣に座っているのにTwitter / Chatで話している状況は健全な状態か？
画面上の体験からユーザーを解放して、実際の時間を大切にしてもらうべきでは？

通知


BigTextStyle

普通の通知だと表示できないような長さの通知


BigPictureStyle

非常に大きなピクチャを見せる


カスタム

リッチな通知


早い体験、通知からのアクションを必要最小限にする

通常のサイズ 64dp
拡張のサイズ 256dp
システムまたは2本指ジェスチャーにより拡大


通知のスタック

Yo!は逆手にとってユニークだったが…
通知の優先度が非常に大切

MIN LOW DEFAULT HIGH MAX
ユーザー体験を悪くしない


後方互換あり


Wear上での通知


Android Wearの為に新しい機能を追加する必要はない

iconはbackgroundに表示される
テキストはiconの上に表示される
Actionは次のページに配置される


新しく機能を追加すれば、通知を拡張することができる

通知にPageを追加する
通知をスタックする

setGroupするだけ


音声入力を受け取る

「今から帰ります」
Intentをあらかじめ作成しておく


Wearの拡張


データを送信

Google Play Services

Gradleに追加


Node API

getNodes - どの端末が今接続しているのか


Message API

通知を送る等、簡単なメッセージの送信
ActivityPathを作って そこに送信
他のアプリケーションからは見られない、セキュア


Data API

通知で表示はしないが、データを共有したい場合
位置情報の共有とか
DataMapに追加


カスタムUIの作成

どこまでをWearで行わせて、どこからをモバイル端末で行わせるか
標準に近いUIも簡単に作れる

BoxInsetLayout
CardFragment
CircledImageView
ConfirmationActivity
DelayedConfirmationView
DismissOverlayView
GridViewPager（よく使う）
WatchViewStub


異なるスクリーン形状への対応（丸いスクリーンとか）

BoxInsetLayout

子要素を内包する (上下左右に余白を入れられる)


WatchViewStub

スクリーン形状に応じて異なるサブレイアウトを指定


View.onApplyWindowInsets()

Viewの中でInsetの形状を判別
Insetのポリシーを上書き


レイアウトガイドライン

背景サイズは160x160dpを考慮

ページ遷移の際にチラ見される部分を含む


マージンは丸形で大きくなる

12dp -> 26dp


丸形の場合はアクションを中心に配置
丸形の場合は文字を中央揃えに


ボイスアクション

システムで提供するボイスアクション

タクシーを呼ぶ
メモを入力
アラーム設定
タイマー設定
自転車に乗る／降りる
ジョギングを開始
トレーニングを開始
心拍数を表示
歩数計を表示


Speech Recognizer


新しいUIを考える


デザイン原則

ユーザーを止めない
大きなジェスチャを想定してデザイン
まずはストリームカードで実現できないか考える


UIパターン

カード

標準
単一アクション
拡張
ページ


アクションボタン
アクションカウントダウン
端末で開く
2D Picker
ボイスコマンド


各種寸法

背景画像は最低幅600px
ピーキングカードの高さは68dp
大きいアクションアイコンはアセットのサイズ64dp　内側は48dp
背景透過は#000で透明度50%
フォントはRoboto LightとRoboto Light Condensed


参照

Android Wear UI Toolkit参照
Android Wear Sample User Flows


事例

Lyft

最寄りのタクシーを取得
乗車場所の指定
値段とドライバーのレーティング


AllTheCooks


参考資料

Wear
Design
WearDev
Android


対応事例LT

nanapi 即レスアプリAnswer


音声での返信はRemoteInputで簡単にできそう

自分のスレッドの通知から音声と選択肢で返信
選択肢は汎用性の高いものを５つ
アプリを起動して返信
Serviceを起動して返信
サポートライブラリが優秀なので簡単に実装が可能


どういうシチュエーションで使うのか

スマホで返信できない場合
簡単な定型文で返信できる場合
選択肢

それな
ちょっと待って〜！
ありがとう
うんうん
えっ


改善点

選択肢の最適化
通知のスタック
通知タイミングの最適化


まとめ

通知に対するアクションはかなり簡単。対応がオススメ。
通知の背景だけでもかなりオリジナル感がでる。


VASILY ファッションアプリiQQN


Androidファースト

ロールバックが容易。グロースハックに最適。
iOSの方で効率的な開発ができる


Wear対応

Notificationの最適化

少しの変更でグッと変わる。工数はかからない。
iQON Androidでは49種類のNotificationが存在

背景を関連画像にして最適化
Wearだけに影響を出したい場合はWearableExtender


カードの追加と音声入力

RemoteInputで音声入力を扱う
addActionでカードの追加を行う


年末にはリリース
想定しているユースケースは空き時間でのダラ見


今後の展望

2015年からはタブレットファースト、海外展開
スマートフォン、WearableのO2O強化