Android wear ui guidelines ( and Circle Design UX )
-
Upload
yukio-andoh -
Category
Technology
-
view
6.819 -
download
0
description
Transcript of Android wear ui guidelines ( and Circle Design UX )
![Page 1: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/1.jpg)
WearのUIガイドライン解説と
円型画面UXのポイント
安藤幸央 2014/3/27 @yukio_andoh
![Page 2: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/2.jpg)
Android Watch
vs
Android Wear
CC by Swaminathan
![Page 3: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/3.jpg)
Design Principles of Android Wear
デザイン原則
http://developer.android.com/wear/design/index.html
![Page 4: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/4.jpg)
Wearのデザイン原則(安藤日記)
http://www.andoh.org/2014/03/design-principles-of-android-wear.html
Creative Commons
![Page 5: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/5.jpg)
Google Now
![Page 6: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/6.jpg)
glancability
一目で容易に
理解できる
glance = チラ見
![Page 7: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/7.jpg)
●状況に応じて対応でき、洗練されていること
これらのデバイスは、コンピューティングに対
する新しい認識レベルをもたらします。ユー
ザーからの注目や入力を要求するのではなく、
Android Wear デバイスは彼等の状況と状態を
認識し、適切な時に適切な情報を役立つ方法で
表示してくれます。それらはタイムリーで、関
連性があり、限定的なものです。
![Page 8: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/8.jpg)
●一覧的であること
我々の視野に入らない時でさえ、ウェアラブルデ
バイスは一日を通してずっと使用されます。効果
的なアプリは、なるべく手間を省き、一日中、関
連する情報の小さな断片を提供するために、最適
化され、情報負荷を最小限にして提供してくれま
す。短く、機敏で、即時的なものです。
![Page 9: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/9.jpg)
●全く操作無し、または少ない操作ですむこと
小型の外見によりもたらされる強みに忠実であ
りながら、どうしてもユーザー入力が必要な場
合にのみ、Android Wear は簡単な操作で実現
します。ほとんどの入力は、タッチ、スワイプ
や音声に基づいているので、細かな入力操作を
必要とする入力が回避されます。身振りや、簡
単で、素早く操作できるものです。
![Page 10: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/10.jpg)
●有益であること
Android Wear は、優れた個人秘書のようなも
のです:あなたとあなたの好みを知っているの
で、どうしても必要な場合にのみ、あなたの操作
を中断させます。そして、予め準備された答えを
提供するために常に手元にあります。効率的で、
丁寧で、俊敏な反応をもったなものです。
![Page 11: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/11.jpg)
glancability
一目で容易に
理解できる
glance = チラ見
![Page 12: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/12.jpg)
大きさと色の濃さ、文字の少なさ
![Page 13: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/13.jpg)
不安定な状況の外で使う
via. Mobile Frontier
![Page 14: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/14.jpg)
誰に覗かれているかわからない
CC by Abby
![Page 15: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/15.jpg)
font > font
sound < sound
CC by Nina Matthews
![Page 16: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/16.jpg)
趣味趣向、嗜好品
via. pinterest
![Page 17: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/17.jpg)
一人が複数の腕時計を持つ
via. pinterest
![Page 18: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/18.jpg)
ファッションアイテム
via. Kahuna Ladies Leather
![Page 19: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/19.jpg)
スタイルとシチュエーション
via. TAG Heuer
![Page 20: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/20.jpg)
「便利」だけでなく「好み」も
via. TAG Heuer
![Page 21: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/21.jpg)
円形UX
CC by Kevin Dooley
![Page 22: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/22.jpg)
MOTO 360
![Page 23: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/23.jpg)
世の中には丸いものがいっぱい
![Page 24: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/24.jpg)
Cathryn Briggs
![Page 27: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/27.jpg)
角が無い
via. pinterest「Android Wear Round (320 x 320: hdpi)」か「Android Wear Square (280 x 280: hdpi)」
![Page 28: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/28.jpg)
多角形と円形との関係性
![Page 29: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/29.jpg)
上下左右があいまい
![Page 30: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/30.jpg)
上下左右があいまい(横線)
![Page 31: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/31.jpg)
操作には両手を使う
CC by Victor Bezrukov
![Page 32: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/32.jpg)
操作には両手を使う/見るだけ
![Page 33: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/33.jpg)
画像の半分は隠れる前提
![Page 34: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/34.jpg)
黄金比
安定
躍動
奥行き
背景
重心
![Page 35: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/35.jpg)
正方形UX
CC by Vinoth Chandar
![Page 36: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/36.jpg)
領域
分割
縁
動き
断絶
空間
奥行き
![Page 37: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/37.jpg)
音のデザイン
CC by mikael altemark
![Page 38: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/38.jpg)
JIS S0013 報知音騒音下である場合●基本周波数が 2.5Khz を越えないことが望ましい
実機のスピーカーで試す。高音、低音が弱い、周波数特性がフラットではない。共振する場合がある。適切な音圧で ブーミーにならないように。0.2秒くらい。●音種別の構造化、音のIA も必要
●複合音(二つ以上の周波数成分を主とする音)耳の不自由な人も聞き取りやすい音を止める手段を。音以外の情報を付加していなくても聞き分けられる(&音だけで示さない)音や音色よりも、鳴っている時間的な違い地震警告音(一度も聞いた事が無い人でも、何か危険なことが起きていると印象づける)
音は響くものなので、必ず実際の状態に近い状態で。
ゲームのサウンドデザインに学ぶ。専門のサウンドデザイナーにお願いする。音の著作権を尊重する(用途が限定される。使い回せない、勝手に再録できない)
●音は画像のように一覧できないので、ジャッジしにくいたくさん聞いていると、どれが良いのかわからなくなる二つを聞きくらべる。基準の音より良いか悪いかで判断する。視覚と聴覚と組み合わせて評価する。アニメーションの動きにあっているか?タイミングがずれているだけで良い音もあること。
素材は 44.1kHz/16bit または 48kHz/16bitデータ変換したら、スタジオ機器と実機で、必ず聞いて確認すること。必ずステレオとも限らないし、音像が片寄ってしまう場合もある。
いい音は高い。ぴったり合う素材も揃っていない。サウンドアイデンティ専門の企業がある。何回も聴く音、飽きる音がある。目立つ音なだけではダメ。
音の影響力はとても強い。視覚を半分、半分以上補足する。企業のイメージ。 BMW の CM の最後に鳴る音とか。●Audiobrain in NYhttp://www.audiobrain.com/
![Page 39: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/39.jpg)
Fleksy
![Page 40: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/40.jpg)
Spead Reading by Ryan Breault
![Page 41: Android wear ui guidelines ( and Circle Design UX )](https://reader033.fdocuments.net/reader033/viewer/2022052522/5482373ab47959f10c8b4746/html5/thumbnails/41.jpg)
OK, Google.
おい、ぐぐる
Thank you.
@yukio_andoh