http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html
Nativeアプリについてのデザイン（Not Wen app）
iPhoneぽいｎアプリを作って欲しいというのは、まったく違うよ
Android is not iOS
・Androidはバックキーなどのハード特有がある
iPhoneユーザ→Androidになるのは少ない（逆は多い）
Android UI デザインバターン
ダッシュボード（Dashboard）：トップページにデザイン（Google+などのイメージ）
アクションバー（Action Bar）：上部メニューバー。アイコン形式
サーチバー（Search Bar）：URLを直接打つ感じ
クイックアクション（Quick Action）：長押しでメニューを開く（プルダウンメニューではなく、あくまでアクション）
ウィジット（Compainon Widget）：アプリケーションの機能の一部をウィジットとして設置する
⇒iOSやAndroidアプリでも、同じデザインパターンで統一すれば、ユーザに対しても使い勝手が良い
Honeycomb UI Elements（通称：ハニカム）
すでのいくつかのデザインパターンが用意されている
Honeycomb UI pattern
Action Barはフレームワークでサポート
Muliti-pan Layouts（Stretch, Stack, Expand/collapse, Show/hide）
アプリケーションを切り分けて作ったほうが効率的
1.6、2,X、3.X（スマフォ、タブレット）
ハニカム以降のもの、ジンジャーブレッドで切り分けたほうがいいかも
HC タブレット
5~7インチのサイズ、10インチ以上になるとHCは入らない（無理やりなら入れられる）
10インチ以上になると扱いづらくなる：親指や人差し指で操作できる範囲を超えてしまう
（※写真 青：親指 赤：人差し指）
アクションバーでの表示は、日本専用のアプリなら下部表示のほうがいよい
アメリカでは、スマフォは両手で包み込むように操作するのが支流なので、上部表示が良いが、
日本（ヨーロッパでは片手操作が支流なので、下部表示が使いやすい）
Nativeアプリについてのデザイン（Not Wen app）
iPhoneぽいｎアプリを作って欲しいというのは、まったく違うよ
Android is not iOS
・Androidはバックキーなどのハード特有がある
iPhoneユーザ→Androidになるのは少ない（逆は多い）
Android UI デザインバターン
ダッシュボード（Dashboard）：トップページにデザイン（Google+などのイメージ）
アクションバー（Action Bar）：上部メニューバー。アイコン形式
サーチバー（Search Bar）：URLを直接打つ感じ
クイックアクション（Quick Action）：長押しでメニューを開く（プルダウンメニューではなく、あくまでアクション）
ウィジット（Compainon Widget）：アプリケーションの機能の一部をウィジットとして設置する
⇒iOSやAndroidアプリでも、同じデザインパターンで統一すれば、ユーザに対しても使い勝手が良い
Honeycomb UI Elements（通称：ハニカム）
すでのいくつかのデザインパターンが用意されている
Honeycomb UI pattern
Action Barはフレームワークでサポート
Muliti-pan Layouts（Stretch, Stack, Expand/collapse, Show/hide）
アプリケーションを切り分けて作ったほうが効率的
1.6、2,X、3.X（スマフォ、タブレット）
ハニカム以降のもの、ジンジャーブレッドで切り分けたほうがいいかも
HC タブレット
5~7インチのサイズ、10インチ以上になるとHCは入らない（無理やりなら入れられる）
10インチ以上になると扱いづらくなる：親指や人差し指で操作できる範囲を超えてしまう
（※写真 青：親指 赤：人差し指）
アクションバーでの表示は、日本専用のアプリなら下部表示のほうがいよい
アメリカでは、スマフォは両手で包み込むように操作するのが支流なので、上部表示が良いが、
日本（ヨーロッパでは片手操作が支流なので、下部表示が使いやすい）
串かつ http://sites.google.com/site/94katsu/spec
NFC-felicaを使った通信機能アプリ
PushMoNi
IMoNiというメールクライアントにPUSH配信機能の付加するプラグインアプリ
ShakeDroid
任意の画像の任の領域をゆらゆら揺らせるアプリ
JisuiDroid
コミックに最適化された「自炊」ビューアー（自炊：本のデジタル化）
Google Docsを本棚として利用
iTranslator for Android
59カ国語対応の翻訳アプリ
音声認識による翻訳機能
AndroidDeviceInfoShare
端末のスペックをみんなでシェアするアプリ
自分の端末のスペックをサーバにUPする
167種類の端末
ビルド情報、カメラのスペック、ディスプレイのスペック、環境変数など
Deb App index
デ部メンバーが作成したアプリの紹介アプリ
一覧機能表示～インストールまで
NFC-felicaを使った通信機能アプリ
PushMoNi
IMoNiというメールクライアントにPUSH配信機能の付加するプラグインアプリ
ShakeDroid
任意の画像の任の領域をゆらゆら揺らせるアプリ
JisuiDroid
コミックに最適化された「自炊」ビューアー（自炊：本のデジタル化）
Google Docsを本棚として利用
iTranslator for Android
59カ国語対応の翻訳アプリ
音声認識による翻訳機能
AndroidDeviceInfoShare
端末のスペックをみんなでシェアするアプリ
自分の端末のスペックをサーバにUPする
167種類の端末
ビルド情報、カメラのスペック、ディスプレイのスペック、環境変数など
Deb App index
デ部メンバーが作成したアプリの紹介アプリ
一覧機能表示～インストールまで
アプリ開発・端末毎の解像度の違いを吸収する方法
端末情報共有サービス
端末機種名、OSバージョンなどのスペック情報を共有
Androidコーディングのおさらい
Android Projectについて
R.javaファイルについて
UIの構成要素について
UI定義をJavaから定義
レイアウト用XMLをJavaから読み込む（LayoutInflater）
画面サイズの分類
small ～3.7インチ
nomal ～3.X~4.Xインチ
large
xlarge
画面密度
ldpi：低密度 システム上では120dpi
mdpi：中密度 システム上では160dpi
hdpi：高密度 システム上では240dpi 現在販売されている端末はこれが多い
xhdpi：システム上では320dpi
アスペクト比 4:3~16:9で収まっているかどうか
not-long：収まっている
long：収まっていない
オリエンテーション
Androidにおける長さの単位
px ピクセル
dpもしくはdip（密度非依存ピクセル ※dpiではなくdip）
spもしくはsip（倍率非依存ピクセル）
pt 1/72インチ
in インチ
mm ミリメートル
キャリアや端末によってレイアウトを変更できる
MMC,MNC Docomo,SoftBank,au
アスペクト比やナイトモードなど･･･
レイアウトごとのプロジェクトでの指定が可能
layout{-(option)}でレイアウト指定
画像
大きいサイズの画像を基本とする：縮小のほうがごまかしがきくから
Nine Patch画像形式で対応する
グラデーション
ベクター形式画像リソース
AndroidManifest.xmlによる解像度指定
AVDでの画面テストについて
画面サイズの指定＞画面密度の指定（abstracted LCD...）＞OSver
ハードウェア特性の追加
OpenWnnについて
開発秘話
端末機種名、OSバージョンなどのスペック情報を共有
Androidコーディングのおさらい
Android Projectについて
R.javaファイルについて
UIの構成要素について
UI定義をJavaから定義
レイアウト用XMLをJavaから読み込む（LayoutInflater）
画面サイズの分類
small ～3.7インチ
nomal ～3.X~4.Xインチ
large
xlarge
画面密度
ldpi：低密度 システム上では120dpi
mdpi：中密度 システム上では160dpi
hdpi：高密度 システム上では240dpi 現在販売されている端末はこれが多い
xhdpi：システム上では320dpi
アスペクト比 4:3~16:9で収まっているかどうか
not-long：収まっている
long：収まっていない
オリエンテーション
Androidにおける長さの単位
px ピクセル
dpもしくはdip（密度非依存ピクセル ※dpiではなくdip）
spもしくはsip（倍率非依存ピクセル）
pt 1/72インチ
in インチ
mm ミリメートル
キャリアや端末によってレイアウトを変更できる
MMC,MNC Docomo,SoftBank,au
アスペクト比やナイトモードなど･･･
レイアウトごとのプロジェクトでの指定が可能
layout{-(option)}でレイアウト指定
画像
大きいサイズの画像を基本とする：縮小のほうがごまかしがきくから
Nine Patch画像形式で対応する
グラデーション
ベクター形式画像リソース
AndroidManifest.xmlによる解像度指定
AVDでの画面テストについて
画面サイズの指定＞画面密度の指定（abstracted LCD...）＞OSver
ハードウェア特性の追加
OpenWnnについて
開発秘話
押さえておきたいスマホデザイントレンド
スマホサイトのトレンド
iPhoneサイト（iPhoneのUIをもちいた最適化サイト）
yahooサイト
スマホサイトの特徴
横スクロールしない
横幅にフィットさせる
縦画面と横画面の違いについて
デザイナーは、横幅の画像を作って、縦幅に応用させる方法が支流になってくる
フィットの方法
比率で対応させる
縦横でレイアウトを変える（2ソース管理）
viewport
パーツについて
指で操作するので、大き目のパーツで作成する
画像は極力使わない
角丸、グラデーション、複数背景、シャドウは、HTML5+CSS3で実装
HTML5で最適化サイトをつくる
非対応端末（iOS3.x）は、JavaScriptで対応する
動きのデザイン
スライド
タブ
カーセル
続きを読む
バルーン
JavaScriptで実装する
しかし、端末のスペックによって表示速度が依存するため、JSは極力動作が軽くなるように設計する
今後のデザイントレンド
レスポンシブWEBデザイン：画面の解像度によって表示内容を変えること
「未来館のひと」http://blog.miraikan.jst.go.jp/
※CSS確認できます
何故かXperia neoではCSS3が使えない
今後、スマホサイトがなくなるかもしれない
why ＝ PCサイトの情報は最適化サイトではない場合が多いので
PCのサイト自体をスマトサイトで見ても何も違和感がないように作成する必要がある
※appleのサイト：PCサイトのままで、少しだけスマホサイトでも見やすいようにしている
最適化サイトをつくるにあたって
HTML5+CSS3は今後の必須要素
スマートフォンの特性を考慮したデザイン
スマホサイトの必要性と、PCサイトとのバランス
iPhoneサイト（iPhoneのUIをもちいた最適化サイト）
yahooサイト
スマホサイトの特徴
横スクロールしない
横幅にフィットさせる
縦画面と横画面の違いについて
デザイナーは、横幅の画像を作って、縦幅に応用させる方法が支流になってくる
フィットの方法
比率で対応させる
縦横でレイアウトを変える（2ソース管理）
viewport
パーツについて
指で操作するので、大き目のパーツで作成する
画像は極力使わない
角丸、グラデーション、複数背景、シャドウは、HTML5+CSS3で実装
HTML5で最適化サイトをつくる
非対応端末（iOS3.x）は、JavaScriptで対応する
動きのデザイン
スライド
タブ
カーセル
続きを読む
バルーン
JavaScriptで実装する
しかし、端末のスペックによって表示速度が依存するため、JSは極力動作が軽くなるように設計する
今後のデザイントレンド
レスポンシブWEBデザイン：画面の解像度によって表示内容を変えること
「未来館のひと」http://blog.miraikan.jst.go.jp/
※CSS確認できます
何故かXperia neoではCSS3が使えない
今後、スマホサイトがなくなるかもしれない
why ＝ PCサイトの情報は最適化サイトではない場合が多いので
PCのサイト自体をスマトサイトで見ても何も違和感がないように作成する必要がある
※appleのサイト：PCサイトのままで、少しだけスマホサイトでも見やすいようにしている
最適化サイトをつくるにあたって
HTML5+CSS3は今後の必須要素
スマートフォンの特性を考慮したデザイン
スマホサイトの必要性と、PCサイトとのバランス
Androidアプリデザイン入門編
Androidアプリの開発は３通りある
ネイティブアプリ（Javaを使ったアプリ）
HTML5+CSS+JavaScript
Adobe AIR
知っておくべきポイント
端末によっての解像度差
指で押せる幅と高さ（40px）
背景やボタンはrepeatか9patchを使う
実際の端末で表示確認が必要
端末によって色の見え方が違う
避けたいデザイン
ランダム模様
重なっているタブ
9patchが使えない枠、ボタンなど
画像使用のシークバー
Abdoid標準ではないチェックボックスやラジオボタン
メニューバーのデザインはアイコンだけ
9patch
ファイル名をXXX.png⇒XXX.9.pngにする
指定した１ドットがコピーされているので、画像が拡大しているようになる
シミュレートはDraw 9patchで分かります。
Androidのデザインは9patchでつくったものをライブラリ化
http://d.hatena.ne.jp/tomorrowkey/20110501/1304245217
ネイティブアプリ（Javaを使ったアプリ）
HTML5+CSS+JavaScript
Adobe AIR
知っておくべきポイント
端末によっての解像度差
指で押せる幅と高さ（40px）
背景やボタンはrepeatか9patchを使う
実際の端末で表示確認が必要
端末によって色の見え方が違う
避けたいデザイン
ランダム模様
重なっているタブ
9patchが使えない枠、ボタンなど
画像使用のシークバー
Abdoid標準ではないチェックボックスやラジオボタン
メニューバーのデザインはアイコンだけ
9patch
ファイル名をXXX.png⇒XXX.9.pngにする
指定した１ドットがコピーされているので、画像が拡大しているようになる
シミュレートはDraw 9patchで分かります。
Androidのデザインは9patchでつくったものをライブラリ化
http://d.hatena.ne.jp/tomorrowkey/20110501/1304245217
コメント