Contenu connexe Similaire à AndroidのUI設計で押さえておきたいポイント Similaire à AndroidのUI設計で押さえておきたいポイント (20) 4. 機能セット
何ができるか
• アプリ連携（インテント）
• 電話帳データ
• 通知トレイ
• マルチタスク
など…
6. レイアウトXML
HTMLライクなタグのコンテナ構造
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000" >
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#999999" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="android layout" />
</LinearLayout>
</LinearLayout>
7. px dp
解像度の違いを吸収する単位
a
a
8. dp
density independent pixel
dpi density 100dp
160dpi 1.0 100px
240dpi 1.5 150px
320dpi 2.0 200px
density = ディスプレイの細かさ：160dpiが標準
dp = pixel / density
9. dp
density independent pixel
dpi density 100dp
160dpi 1.0 100px
240dpi 1.5 150px
320dpi 2.0 200px
density = ディスプレイの細かさ：160dpiが標準
dp = pixel / density
10. dp
dpによるオートスケーリング
Multiple screen sizes Autoscaling
3.7 Inches 3.2 Inches
480 x 800 320 x 480
252DPI 180DPI
HDPI MDPI
28
HDPI MDPI 29
http://www.google.com/intl/ja/events/io/2010/sessions/android-ui-design-patterns.html
11. dp
プレスケーリング
• ４レベルの解像度別素材
•ldpi/mdpi/hdpi/xhdpi
•各1.5倍が目安
13. UIセット
• フラット&ソリッド Ungroup to resize Ungroup to resize
Enchant Delight
• iOSとの違い
Ungroup to resize Ungroup to resize
Complexity Redundancy
Ungroup to resize
Ungroup to resize
http://developer.android.com/intl/ja/design/
14. UIセット
• UIカタログ
• テーマ
• メトリクス
• デザインパターン
http://developer.android.com/intl/ja/design/
15. トレンド
アプリデザインの変化
最近では…
• ハードウェアメニュー
ボタンが廃止へ
• アクションバーの強化
http://android-developers.blogspot.jp
17. 2度の大きい変化
• 1期 模索期
• 2期 ダッシュボード期
• 3期 アクションバー期
http://www.google.com/intl/ja/events/io/2010/sessions/android-ui-design-patterns.html
18. アクションバー
2010年5月
Action Bar
Examples
MSN
19%
Google
48%
Yahoo
33%
13
http://www.google.com/intl/ja/events/io/2010/sessions/android-ui-design-patterns.html
19. アクションバー
2012年1月
http://developer.android.com/intl/ja/design/
