Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AndroidのUI設計で押さえておきたいポイント2012年4月26日NHN Japan株式会社 井上隆行
紹介NHN Japan株式会社(旧livedoor)開発部BLOGOS(iOS)、痛いニュース(iOS)ロケタッチ(Android/iOS)などのアプリを担当      @inonb
アプローチサービスをどうAndroidプラットフォームに落とし込むか• 機能セット• UIセット• トレンド
機能セット何ができるか         • アプリ連携(インテント)         • 電話帳データ         • 通知トレイ         • マルチタスク          など…
機能セットデザインフレームワーク• レイアウトXML• px に替わる単位 dp• 画像のポジショニング
レイアウトXMLHTMLライクなタグのコンテナ構造       <LinearLayout          android:layout_width="fill_parent"          android:layout_height="...
px   dp    解像度の違いを吸収する単位             aa
dp        density independent pixel  dpi            density            100dp 160dpi            1.0              100px 240d...
dp        density independent pixel  dpi            density            100dp 160dpi            1.0              100px 240d...
dp                                      dpによるオートスケーリングMultiple screen sizes                                               ...
dpプレスケーリング       • 4レベルの解像度別素材       •ldpi/mdpi/hdpi/xhdpi       •各1.5倍が目安
画像のポジショニング ImageView.scaleType
UIセット• フラット&ソリッド   Ungroup to resize                            Ungroup to resize                           Enchant       ...
UIセット                                    • UIカタログ                                    • テーマ                                ...
トレンドアプリデザインの変化                                            最近では…                                            • ハードウェアメニュー   ...
ロケタッチアプリの変化  v.1           v.2        v.32010年12月      2011年6月    2012年2月
2度の大きい変化                                                                                        • 1期 模索期                  ...
アクションバー                                     2010年5月Action BarExamples                                     MSN             ...
アクションバー            2012年1月http://developer.android.com/intl/ja/design/
ユニデザインfacebookの iOS / Android アプリ
参考Android Designhttp://developer.android.com/intl/ja/design/patterns/actionbar.htmlGoogle IO 2010 - Android UI design patt...
Upcoming SlideShare
Loading in …5
×

AndroidのUI設計で押さえておきたいポイント

6,160 views

Published on

Published in: Technology
  • Be the first to comment

AndroidのUI設計で押さえておきたいポイント

  1. 1. AndroidのUI設計で押さえておきたいポイント2012年4月26日NHN Japan株式会社 井上隆行
  2. 2. 紹介NHN Japan株式会社(旧livedoor)開発部BLOGOS(iOS)、痛いニュース(iOS)ロケタッチ(Android/iOS)などのアプリを担当 @inonb
  3. 3. アプローチサービスをどうAndroidプラットフォームに落とし込むか• 機能セット• UIセット• トレンド
  4. 4. 機能セット何ができるか • アプリ連携(インテント) • 電話帳データ • 通知トレイ • マルチタスク など…
  5. 5. 機能セットデザインフレームワーク• レイアウトXML• px に替わる単位 dp• 画像のポジショニング
  6. 6. レイアウトXMLHTMLライクなタグのコンテナ構造 <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. 7. px dp 解像度の違いを吸収する単位 aa
  8. 8. dp density independent pixel dpi density 100dp 160dpi 1.0 100px 240dpi 1.5 150px 320dpi 2.0 200pxdensity = ディスプレイの細かさ:160dpiが標準 dp = pixel / density
  9. 9. dp density independent pixel dpi density 100dp 160dpi 1.0 100px 240dpi 1.5 150px 320dpi 2.0 200pxdensity = ディスプレイの細かさ:160dpiが標準 dp = pixel / density
  10. 10. dp dpによるオートスケーリングMultiple screen sizes Autoscaling 3.7 Inches 3.2 Inches 480 x 800 320 x 480 252DPI 180DPI HDPI MDPI28 HDPI MDPI 29 http://www.google.com/intl/ja/events/io/2010/sessions/android-ui-design-patterns.html
  11. 11. dpプレスケーリング • 4レベルの解像度別素材 •ldpi/mdpi/hdpi/xhdpi •各1.5倍が目安
  12. 12. 画像のポジショニング ImageView.scaleType
  13. 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. 14. UIセット • UIカタログ • テーマ • メトリクス • デザインパターン http://developer.android.com/intl/ja/design/
  15. 15. トレンドアプリデザインの変化 最近では… • ハードウェアメニュー ボタンが廃止へ • アクションバーの強化 http://android-developers.blogspot.jp
  16. 16. ロケタッチアプリの変化 v.1 v.2 v.32010年12月 2011年6月 2012年2月
  17. 17. 2度の大きい変化 • 1期 模索期 • 2期 ダッシュボード期 • 3期 アクションバー期http://www.google.com/intl/ja/events/io/2010/sessions/android-ui-design-patterns.html
  18. 18. アクションバー 2010年5月Action BarExamples MSN 19% Google 48% Yahoo 33%13 http://www.google.com/intl/ja/events/io/2010/sessions/android-ui-design-patterns.html
  19. 19. アクションバー 2012年1月http://developer.android.com/intl/ja/design/
  20. 20. ユニデザインfacebookの iOS / Android アプリ
  21. 21. 参考Android Designhttp://developer.android.com/intl/ja/design/patterns/actionbar.htmlGoogle IO 2010 - Android UI design patternshttp://www.google.com/intl/ja/events/io/2010/sessions/android-ui-design-patterns.htmllivedoor Tech Blog - デザイナーに聞かれがちなAndroid UIの仕様http://blog.livedoor.jp/techblog/archives/65434354.html

×