Android UIデザインとタブレット向けUXデザイン

UIガイドラインは、Android UI Design Parrernsになる
 http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html

Nativeアプリについてのデザイン(Not Wen app)

iPhoneぽいnアプリを作って欲しいというのは、まったく違うよ
Android is not iOS
Androidはバックキーなどのハード特有がある

iPhoneユーザ→Androidになるのは少ない(逆は多い)

Android UI デザインバターン
 ダッシュボード(Dashboard):トップページにデザイン(Google+などのイメージ)
 アクションバー(Action Bar):上部メニューバー。アイコン形式
 サーチバー(Search Bar):URLを直接打つ感じ
 クイックアクション(Quick Action):長押しでメニューを開く(プルダウンメニューではなく、あくまでアクション)
 ウィジット(Compainon Widget):アプリケーションの機能の一部をウィジットとして設置する
iOSAndroidアプリでも、同じデザインパターンで統一すれば、ユーザに対しても使い勝手が良い

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インチ以上になると扱いづらくなる:親指や人差し指で操作できる範囲を超えてしまう
 (※写真 青:親指 赤:人差し指)
f:id:samril:20110717134054j:image:w360

アクションバーでの表示は、日本専用のアプリなら下部表示のほうがいよい
 アメリカでは、スマフォは両手で包み込むように操作するのが支流なので、上部表示が良いが、
 日本(ヨーロッパでは片手操作が支流なので、下部表示が使いやすい)


串かつ 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
 デ部メンバーが作成したアプリの紹介アプリ
 一覧機能表示~インストールまで


アプリ開発・端末毎の解像度の違いを吸収する方法
端末情報共有サービス
 端末機種名、OSバージョンなどのスペック情報を共有

Androidコーディングのおさらい
 Android Projectについて
 R.javaファイルについて
 UIの構成要素について
 UI定義をJavaから定義
 レイアウト用XMLJavaから読み込む(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サイト(iPhoneUIをもちいた最適化サイト)
 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アプリの開発は3通りある
 ネイティブアプリJavaを使ったアプリ
 HTML5+CSS+JavaScript
 Adobe AIR

知っておくべきポイント
 端末によっての解像度差
 指で押せる幅と高さ(40px)
 背景やボタンはrepeatか9patchを使う
 実際の端末で表示確認が必要
 端末によって色の見え方が違う

避けたいデザイン
 ランダム模様
 重なっているタブ
 9patchが使えない枠、ボタンなど
 画像使用のシークバー
 Abdoid標準ではないチェックボックスラジオボタン

メニューバーのデザインはアイコンだけ

9patch
 ファイル名をXXX.png⇒XXX.9.pngにする
 指定した1ドットがコピーされているので、画像が拡大しているようになる
 シミュレートはDraw 9patchで分かります。

Androidのデザインは9patchでつくったものをライブラリ
 http://d.hatena.ne.jp/tomorrowkey/20110501/1304245217

コメント