SlideShare une entreprise Scribd logo
1  sur  13
Android Wear
Design Guideline
“OK Google”
http://developer.android.com/design/wear/index.html
ここに書いてある内容のピックアップ
(読めばわかります)
Soyeon LEE
2014.07.15
一言で言うと、
“今までとは違うよ”
Android Wearが提供するWearable deviceのアプリをデザインする
ことは、スマホやタブレットのデザインとは大いに違うことで
す。異なるメリットやデメリット、異なるユースケース、異な
る人間工学のことを考えないといけません。
“Designing apps for wearable devices powered by Android Wear is
substantially different than designing for phones or tablets: different
strength and weaknesses, different use cases, different ergonomics.”
Suggest: The Context Stream
アプリからの通知や、ユーザーのTPOを考えた適切
な提案はカードの形で画面に表示する。ユーザーが
通知をたくさんチェックしなくても、Wearをパッ
と見ただけで重要な情報をチェックできる。
上下にスワイプしてPagesやButtonsを表示可能、右
にスワイプしてカードを終了させられる。
Demand: The Cue Card
Wearの提案が物足りないときは、Cue Cardを
操作することもできる。”OK Google”と呼ぶ
か、Cue Cardをタップ。Cue Cardを上にスワ
イプするとタップできるVoice Commandのリ
ストを表示することもできる。
主なUI Feature二つ
Home Screen
Watch faces
Ambient mode
Date and Battery display
Settings screen
Full screen apps
Other UI
Features
だいたい見ればわかる感じ
Android Wear Notification and Application Patterns
http://commondatastorage.googleapis.com/androiddevelopers/design/
Android_Wear_Patterns_20140626.pdf
Launched automatically
Creative Vision
アイコンタップしたりするんじゃなくて、Wearがユーザーのコンテキ
ストを把握して、必要な情報をタイムリーに出す
Glanceable
パッと見わかるように。情報を詰め込みすぎない
All about suggest and demand
“Wearはあなたの個人秘書みたいなものです。あなたの嗜好を知ってて、必要
なときだけ邪魔するし、居合わせていて常に良い答えを用意してます”
提案もするし命令も受ける、丁寧で役に立つもの
(出しゃばらないということを強調している印象)
Zero or low interaction
簡単で早いタッチ、スワイプ、音声でほとんど操作可能
デリケートな指の操作はできるだけ使わなくしたい
Focus on not stopping the user and all else will follow
Design Principles
時計というのは「ながら操作」するもの。
操作のために他にやってることを止めない
ようにする
操作に5秒以上かかるならもっとフォーカ
スさせてみること
Design for big gestures
あまり細かい操作しなくても良いようにする
他にも色々あるけど読めばわかります(たぶん)
強制じゃないけど、こういう考え方とやり方でデザインしてください、な感じ
・Bridged Notifications
App Structure
めっちゃ簡単単純通知
Android Appで対応してれば簡単に使える
下記は簡単(シンプル)な順で並べたアプリ構造の例、
これをそのまま使うか組み合わせて使うと良い
アプリの立ち上げ・終了についてユーザーに色々考えさせないでほしい
・Contextual Notifications
イベントドリブンで通知を飛ばす方法
例えば、ユーザーが走り出したら運動アプリを起動させたり
リビングに入ったら、リビング照明コントロールUIを出したり
しかし何をトリガーとして通知を飛ばすかは良く考えてほしい
あまり飛ばしすぎるとユーザーはウザがって
あなたのアプリの通知を全部ブロックしちゃうかもよ
Contextual card in the stream
・2D Picker
複数のオプションをリストで見せるときに訳に立つデザインパターン
e.g.) Google検索
カードの数を最小限にすること、最も重要なカードを最初に表示すること、
それぞれのカードをシンプルにすること、操作速度の最適化を行うこと
ナビゲーションは、下スワイプ→右スワイプの順で行うようにする
最初のカードを下スワイプ、最も左側に配置されているカードの右スワイプ
でアプリを終了させるようにする
・Breaking out of the card (with custom layouts)
一時的にフルスクリーン表示をすることも良い方法
カードで実現できないときだけフルスクリーンを使うこと、カードっぽい
デザインでユーザーを混乱させないこと、フルスクリーンでやることが終
わったら自動で終了させること、仕方なく手動終了させるときは長押し
Full screen UI app
UI Patterns
Cards
App icons
Pages
Dismissing cards
Action buttons
Continuing activities on phone
Actions on cards (such as media controls)
Card stacks
2D Picker
Voice commands
Selection List
Action countdown and confirmation
だいたい見ればわかる感じ
Wearでできることに限界があって、Androidデバイスに
飛ばして続きをやりたいときのUIパターン
→続きはスマホで
Style
Screen Size
様々なサイズがあり得るので固定でデザインしな
い。特に四角い画面と丸い画面、両方考えてデザ
インすること(言うのは簡単だけどさ)
Emulatorでチェックすること
Specific Assets Required
マテリアルデザインとも関係ありそうな内容
平面だけど立体構造が想像できるように、決まったAssetsを正しく並べること
Peek Card Readability
カードの情報がパッと見読みとれるか、正しくクロップされていて、
スワイプすれば追加の情報が見られることがわかるようになっているか
確認すること
Low Information Density
情報を詰め込まない
一瞬でパッと見で情報が読み取れるようにすること
関連性のある背景イメージを使うことで情報が伝わりやすくすること
Separate Information into Chunks
どうしても追加の情報を出さないといけないとき、
カードレイアウトをごちゃごちゃにせず、追加のページを設けること
あるいはContinuing activities on phone(スマホで続く)パターンを使う
Keep Notifications to a Minimum
何度も強調している内容。ウザがられないように、通知はほどほどに
Use Clear, Bold Typography
システムフォントはRoboto
文字のサイズ・色の指定があるので従うこと
できるだけ文字は大きくする
究極の目標は、さりげなく最大の情報を伝達すること(言うのは簡単だけどさ)
Use Consistent Branding and Color
アイコンの使用はオプショナル、
使うなら指定の場所(カードの右上)に配置すること
背景イメージにアイコンを配置したりブランディングに使わないこと
背景イメージはカードの情報と関係のあるイメージにすべき
Copywrite Sparingly
要らないテキストは入れない
「読む」ためのデザインではなく、「パッと見」のためのデザインにすること
Be Discreet if Necessary
通知の際Peek Cardにセンシティブな情報は表示しない
出すならスワイプしないと見えない位置に置くなどの配慮をすること
Confirmation Animation
「〜〜が完了しました」の表示はAndroidが提供するもの→
を使ってもよし、カスタマイズしてもよし
アニメを入れるなら、1000ms以下のシンプルなものにする
まとめると、
“ごちゃごちゃさせないで”
- Wearは読むものではない、パッと見するもの
- ユーザー操作は最低限にする:タップ、スワイプ、音声程度
- アクションに5秒以上かかるならもっかい考えて
- 情報を詰め込まない、最低限の情報だけを表示する
- 通知飛ばしまくってユーザーにウザい思いさせないで
- どうしても色々情報を出さないといけないときはスマホに飛ばす

Contenu connexe

En vedette

徹底解説 ネットショップの決済の全て
徹底解説 ネットショップの決済の全て徹底解説 ネットショップの決済の全て
徹底解説 ネットショップの決済の全てec-campus
 
(初学者向け)仮想化ツール紹介
(初学者向け)仮想化ツール紹介(初学者向け)仮想化ツール紹介
(初学者向け)仮想化ツール紹介祥平 近藤
 
Iccw2010 sdk4 air
Iccw2010 sdk4 airIccw2010 sdk4 air
Iccw2010 sdk4 airIsao Soma
 
1)デザインの機能複合体の6要素
1)デザインの機能複合体の6要素1)デザインの機能複合体の6要素
1)デザインの機能複合体の6要素Rikie Ishii
 
個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015
個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015
個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015OpenID Foundation Japan
 
Host Card Emulation
Host Card EmulationHost Card Emulation
Host Card EmulationNFC Forum
 
Wizpra技術説明
Wizpra技術説明Wizpra技術説明
Wizpra技術説明Yuji Mise
 
イーエックス・アルティザン・システムズ会社概要
イーエックス・アルティザン・システムズ会社概要イーエックス・アルティザン・システムズ会社概要
イーエックス・アルティザン・システムズ会社概要Yasuto Shimizu
 
141215 説明_よくわかるAdStir
141215 説明_よくわかるAdStir141215 説明_よくわかるAdStir
141215 説明_よくわかるAdStirAdStir
 

En vedette (16)

Firefox Mobile
Firefox MobileFirefox Mobile
Firefox Mobile
 
White paper querydata_goldenweek2015_20150414
White paper querydata_goldenweek2015_20150414White paper querydata_goldenweek2015_20150414
White paper querydata_goldenweek2015_20150414
 
Comunicar 3.0
Comunicar 3.0Comunicar 3.0
Comunicar 3.0
 
徹底解説 ネットショップの決済の全て
徹底解説 ネットショップの決済の全て徹底解説 ネットショップの決済の全て
徹底解説 ネットショップの決済の全て
 
(初学者向け)仮想化ツール紹介
(初学者向け)仮想化ツール紹介(初学者向け)仮想化ツール紹介
(初学者向け)仮想化ツール紹介
 
15 memory card
15 memory card15 memory card
15 memory card
 
Iccw2010 sdk4 air
Iccw2010 sdk4 airIccw2010 sdk4 air
Iccw2010 sdk4 air
 
2e64ed78b0951c70ef8bd10cc818dbc6[1]
2e64ed78b0951c70ef8bd10cc818dbc6[1]2e64ed78b0951c70ef8bd10cc818dbc6[1]
2e64ed78b0951c70ef8bd10cc818dbc6[1]
 
1)デザインの機能複合体の6要素
1)デザインの機能複合体の6要素1)デザインの機能複合体の6要素
1)デザインの機能複合体の6要素
 
個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015
個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015
個人番号カードと公的個人認証の民間利用について - OpenID Summit 2015
 
Host Card Emulation
Host Card EmulationHost Card Emulation
Host Card Emulation
 
Wizpra技術説明
Wizpra技術説明Wizpra技術説明
Wizpra技術説明
 
Virtual nodeについて
Virtual nodeについてVirtual nodeについて
Virtual nodeについて
 
K&G kng.vn kngt.jp ITO ODC cloud team 日本語 オフショア アウトソーシング アンドロイド モバイル アイフォン
K&G kng.vn kngt.jp ITO ODC cloud team 日本語 オフショア アウトソーシング アンドロイド モバイル アイフォンK&G kng.vn kngt.jp ITO ODC cloud team 日本語 オフショア アウトソーシング アンドロイド モバイル アイフォン
K&G kng.vn kngt.jp ITO ODC cloud team 日本語 オフショア アウトソーシング アンドロイド モバイル アイフォン
 
イーエックス・アルティザン・システムズ会社概要
イーエックス・アルティザン・システムズ会社概要イーエックス・アルティザン・システムズ会社概要
イーエックス・アルティザン・システムズ会社概要
 
141215 説明_よくわかるAdStir
141215 説明_よくわかるAdStir141215 説明_よくわかるAdStir
141215 説明_よくわかるAdStir
 

Similaire à Android Wear Design Guideline

Android wear ui guidelines ( and Circle Design UX )
Android wear ui guidelines ( and Circle Design UX )Android wear ui guidelines ( and Circle Design UX )
Android wear ui guidelines ( and Circle Design UX )Yukio Andoh
 
アンドロイド勉強会第二回 080525 3
アンドロイド勉強会第二回  080525 3アンドロイド勉強会第二回  080525 3
アンドロイド勉強会第二回 080525 3shimay
 
ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~Ken Azuma
 
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント 事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント Monaca
 
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LTAndroid好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LTKei Nakazawa
 
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピックcm_saito
 

Similaire à Android Wear Design Guideline (6)

Android wear ui guidelines ( and Circle Design UX )
Android wear ui guidelines ( and Circle Design UX )Android wear ui guidelines ( and Circle Design UX )
Android wear ui guidelines ( and Circle Design UX )
 
アンドロイド勉強会第二回 080525 3
アンドロイド勉強会第二回  080525 3アンドロイド勉強会第二回  080525 3
アンドロイド勉強会第二回 080525 3
 
ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~
 
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント 事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
 
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LTAndroid好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
 
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
 

Plus de Soyeon Lee

World IA Day 2019 Hong Kong Introduction
World IA Day 2019 Hong Kong IntroductionWorld IA Day 2019 Hong Kong Introduction
World IA Day 2019 Hong Kong IntroductionSoyeon Lee
 
UX Book Club - Project Management for Humans
UX Book Club - Project Management for HumansUX Book Club - Project Management for Humans
UX Book Club - Project Management for HumansSoyeon Lee
 
ざっくり振り返るUX Hong Kong 2018
ざっくり振り返るUX Hong Kong 2018ざっくり振り返るUX Hong Kong 2018
ざっくり振り返るUX Hong Kong 2018Soyeon Lee
 
UX book club 20170805 - blind spot
UX book club 20170805 - blind spotUX book club 20170805 - blind spot
UX book club 20170805 - blind spotSoyeon Lee
 
Report - Omni channel master class
Report - Omni channel master classReport - Omni channel master class
Report - Omni channel master classSoyeon Lee
 
RISE 2016 report
RISE 2016 reportRISE 2016 report
RISE 2016 reportSoyeon Lee
 
Hong Kong Design Book Club #6
Hong Kong Design Book Club #6Hong Kong Design Book Club #6
Hong Kong Design Book Club #6Soyeon Lee
 
人工知能のインタラクションデザイン
人工知能のインタラクションデザイン人工知能のインタラクションデザイン
人工知能のインタラクションデザインSoyeon Lee
 
ブランド勉強会プロセス編2
ブランド勉強会プロセス編2ブランド勉強会プロセス編2
ブランド勉強会プロセス編2Soyeon Lee
 
Designing Brand Identity - プロセス編1
Designing Brand Identity - プロセス編1Designing Brand Identity - プロセス編1
Designing Brand Identity - プロセス編1Soyeon Lee
 
UX Book Club - Measuring the User Experience
UX Book Club - Measuring the User ExperienceUX Book Club - Measuring the User Experience
UX Book Club - Measuring the User ExperienceSoyeon Lee
 
UX Book club - Observing the User Experience
UX Book club - Observing the User ExperienceUX Book club - Observing the User Experience
UX Book club - Observing the User ExperienceSoyeon Lee
 
UX Book club - Practical web analytics for user experience
UX Book club - Practical web analytics for user experienceUX Book club - Practical web analytics for user experience
UX Book club - Practical web analytics for user experienceSoyeon Lee
 
iOS LT - なにげにすごいAirPlay
iOS LT - なにげにすごいAirPlayiOS LT - なにげにすごいAirPlay
iOS LT - なにげにすごいAirPlaySoyeon Lee
 
UX Book club - It's our research
UX Book club - It's our researchUX Book club - It's our research
UX Book club - It's our researchSoyeon Lee
 

Plus de Soyeon Lee (17)

World IA Day 2019 Hong Kong Introduction
World IA Day 2019 Hong Kong IntroductionWorld IA Day 2019 Hong Kong Introduction
World IA Day 2019 Hong Kong Introduction
 
UX Book Club - Project Management for Humans
UX Book Club - Project Management for HumansUX Book Club - Project Management for Humans
UX Book Club - Project Management for Humans
 
ざっくり振り返るUX Hong Kong 2018
ざっくり振り返るUX Hong Kong 2018ざっくり振り返るUX Hong Kong 2018
ざっくり振り返るUX Hong Kong 2018
 
UXHK 2018
UXHK 2018UXHK 2018
UXHK 2018
 
UX book club 20170805 - blind spot
UX book club 20170805 - blind spotUX book club 20170805 - blind spot
UX book club 20170805 - blind spot
 
Report - Omni channel master class
Report - Omni channel master classReport - Omni channel master class
Report - Omni channel master class
 
RISE 2016 report
RISE 2016 reportRISE 2016 report
RISE 2016 report
 
Hong Kong Design Book Club #6
Hong Kong Design Book Club #6Hong Kong Design Book Club #6
Hong Kong Design Book Club #6
 
人工知能のインタラクションデザイン
人工知能のインタラクションデザイン人工知能のインタラクションデザイン
人工知能のインタラクションデザイン
 
ブランド勉強会プロセス編2
ブランド勉強会プロセス編2ブランド勉強会プロセス編2
ブランド勉強会プロセス編2
 
Designing Brand Identity - プロセス編1
Designing Brand Identity - プロセス編1Designing Brand Identity - プロセス編1
Designing Brand Identity - プロセス編1
 
UX Book Club - Measuring the User Experience
UX Book Club - Measuring the User ExperienceUX Book Club - Measuring the User Experience
UX Book Club - Measuring the User Experience
 
UX Book club - Observing the User Experience
UX Book club - Observing the User ExperienceUX Book club - Observing the User Experience
UX Book club - Observing the User Experience
 
UX Book club - Practical web analytics for user experience
UX Book club - Practical web analytics for user experienceUX Book club - Practical web analytics for user experience
UX Book club - Practical web analytics for user experience
 
OKR
OKROKR
OKR
 
iOS LT - なにげにすごいAirPlay
iOS LT - なにげにすごいAirPlayiOS LT - なにげにすごいAirPlay
iOS LT - なにげにすごいAirPlay
 
UX Book club - It's our research
UX Book club - It's our researchUX Book club - It's our research
UX Book club - It's our research
 

Android Wear Design Guideline