android wear ui guidelines ( and circle design ux )

41
WearのUIガイドライン解説と 円型画面UXのポイント 安藤幸央 2014/3/27 @yukio_andoh

Upload: yukio-andoh

Post on 05-Dec-2014

6.818 views

Category:

Technology


0 download

DESCRIPTION

Android wear ui guidelines ( and Circle Design UX )

TRANSCRIPT

Page 1: Android wear ui guidelines ( and Circle Design UX )

WearのUIガイドライン解説と

円型画面UXのポイント

安藤幸央 2014/3/27 @yukio_andoh

Page 2: Android wear ui guidelines ( and Circle Design UX )

Android Watch

vs

Android Wear

CC by Swaminathan

Page 3: Android wear ui guidelines ( and Circle Design UX )

Design Principles of Android Wear

デザイン原則

http://developer.android.com/wear/design/index.html

Page 4: Android wear ui guidelines ( and Circle Design UX )

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 )

Google Now

Page 6: Android wear ui guidelines ( and Circle Design UX )

glancability

一目で容易に

理解できる

glance = チラ見

Page 7: Android wear ui guidelines ( and Circle Design UX )

●状況に応じて対応でき、洗練されていること

これらのデバイスは、コンピューティングに対

する新しい認識レベルをもたらします。ユー

ザーからの注目や入力を要求するのではなく、

Android Wear デバイスは彼等の状況と状態を

認識し、適切な時に適切な情報を役立つ方法で

表示してくれます。それらはタイムリーで、関

連性があり、限定的なものです。

Page 8: Android wear ui guidelines ( and Circle Design UX )

●一覧的であること

我々の視野に入らない時でさえ、ウェアラブルデ

バイスは一日を通してずっと使用されます。効果

的なアプリは、なるべく手間を省き、一日中、関

連する情報の小さな断片を提供するために、最適

化され、情報負荷を最小限にして提供してくれま

す。短く、機敏で、即時的なものです。

Page 9: Android wear ui guidelines ( and Circle Design UX )

●全く操作無し、または少ない操作ですむこと

小型の外見によりもたらされる強みに忠実であ

りながら、どうしてもユーザー入力が必要な場

合にのみ、Android Wear は簡単な操作で実現

します。ほとんどの入力は、タッチ、スワイプ

や音声に基づいているので、細かな入力操作を

必要とする入力が回避されます。身振りや、簡

単で、素早く操作できるものです。

Page 10: Android wear ui guidelines ( and Circle Design UX )

●有益であること

Android Wear は、優れた個人秘書のようなも

のです:あなたとあなたの好みを知っているの

で、どうしても必要な場合にのみ、あなたの操作

を中断させます。そして、予め準備された答えを

提供するために常に手元にあります。効率的で、

丁寧で、俊敏な反応をもったなものです。

Page 11: Android wear ui guidelines ( and Circle Design UX )

glancability

一目で容易に

理解できる

glance = チラ見

Page 12: Android wear ui guidelines ( and Circle Design UX )

大きさと色の濃さ、文字の少なさ

Page 13: Android wear ui guidelines ( and Circle Design UX )

不安定な状況の外で使う

via. Mobile Frontier

Page 14: Android wear ui guidelines ( and Circle Design UX )

誰に覗かれているかわからない

CC by Abby

Page 15: Android wear ui guidelines ( and Circle Design UX )

font > font

sound < sound

CC by Nina Matthews

Page 16: Android wear ui guidelines ( and Circle Design UX )

趣味趣向、嗜好品

via. pinterest

Page 17: Android wear ui guidelines ( and Circle Design UX )

一人が複数の腕時計を持つ

via. pinterest

Page 21: Android wear ui guidelines ( and Circle Design UX )

円形UX

CC by Kevin Dooley

Page 22: Android wear ui guidelines ( and Circle Design UX )

MOTO 360

Page 23: Android wear ui guidelines ( and Circle Design UX )

世の中には丸いものがいっぱい

Page 24: Android wear ui guidelines ( and Circle Design UX )

Cathryn Briggs

Page 25: Android wear ui guidelines ( and Circle Design UX )

実はアイコンで慣れているハズ

by buatoom

Page 26: Android wear ui guidelines ( and Circle Design UX )

意識が中心に集まるPhoto by Alex Miller

Page 27: Android wear ui guidelines ( and Circle Design UX )

角が無い

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 )

多角形と円形との関係性

Page 29: Android wear ui guidelines ( and Circle Design UX )

上下左右があいまい

Page 30: Android wear ui guidelines ( and Circle Design UX )

上下左右があいまい(横線)

Page 31: Android wear ui guidelines ( and Circle Design UX )

操作には両手を使う

CC by Victor Bezrukov

Page 32: Android wear ui guidelines ( and Circle Design UX )

操作には両手を使う/見るだけ

Page 33: Android wear ui guidelines ( and Circle Design UX )

画像の半分は隠れる前提

Page 34: Android wear ui guidelines ( and Circle Design UX )

黄金比

安定

躍動

奥行き

背景

重心

Page 35: Android wear ui guidelines ( and Circle Design UX )

正方形UX

CC by Vinoth Chandar

Page 36: Android wear ui guidelines ( and Circle Design UX )

領域

分割

動き

断絶

空間

奥行き

Page 37: Android wear ui guidelines ( and Circle Design UX )

音のデザイン

CC by mikael altemark

Page 38: Android wear ui guidelines ( and Circle Design UX )

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 )

Fleksy

Page 40: Android wear ui guidelines ( and Circle Design UX )

Spead Reading by Ryan Breault

Page 41: Android wear ui guidelines ( and Circle Design UX )

OK, Google.

おい、ぐぐる

Thank you.

@yukio_andoh