マルチスクリーン対応と最近のアプリの傾向

20,782 views
20,586 views

Published on

ABC 2013 Spring の講演のスライドです。

1 Comment
123 Likes
Statistics
Notes
No Downloads
Views
Total views
20,782
On SlideShare
0
From Embeds
0
Number of Embeds
3,139
Actions
Shares
0
Downloads
161
Comments
1
Likes
123
Embeds 0
No embeds

No notes for slide

マルチスクリーン対応と最近のアプリの傾向

  1. 1. マルチスクリーン対応 最近のアプリの傾向
  2. 2. あんざいゆき• blog : Y.A.M の雑記帳 • y-anz-m.blogspot.com• twitter : @yanzm (やんざむ)• Android女子部副部長• uPhyca Inc. (株式会社ウフィカ)
  3. 3. 最近のアプリの傾向
  4. 4. Drawer UINavigation として利用
  5. 5. Drawer UIまだまだあるよ Navigation として利用
  6. 6. Drawer UINavigation 以外としても
  7. 7. Drawer UINavigation → 左側で ー が3つのアイコンNavigation 以外 → 右側で個別のアイコンNavigation の場合グレーの背景が多いSNS など、機能や画面数が多いアプリに適している
  8. 8. Drawer UINavigation が上にでるパターン ← Google Current メインの Navigation は下か らでるDrawer 記事の Navigation は上にでる Drawer
  9. 9. ActionBar2.x でも ActionBar を表示するアプリがほとんど→ ActionBarSherlock 使おう →ActionBarSherlock を使ってなさそうなのもある
  10. 10. ActionBar の UPみんなやってます。面倒くさがらずやりましょう
  11. 11. 白背景黒背景 → クールだけど難しい、アプリのテーマカラーをあまり活かせない白背景 → 割と簡単にスタイリッシュにできる、色をのせやすい
  12. 12. 白背景ただの白じゃない
  13. 13. 白背景ただの白じゃない
  14. 14. 白背景ただの白
  15. 15. ヘルプポップアップ初回にオーバーレイで使い方を表示する ← 2年前くらい から流行ってた パターン
  16. 16. ヘルプポップアップパーツの上に丸を出すのが最近のはやり
  17. 17. チュートリアルスワイプ切り替えが多い
  18. 18. オリジナル Progress昔から 4sq は凝ってたよね
  19. 19. ショーケースWeb ではすでにおなじみ写真(だけ)をスワイプして切り替える ← Indicator ほしい
  20. 20. ログインフォームを上に寄せるキーボードがでても隠れないようになっている
  21. 21. マルチスクリーン対応マルチスクリーン対応
  22. 22. ANDROID はデバイスの画面サイズがたくさんあって大変?
  23. 23. ANDROID はデバイスの画面サイズがたくさんあって大変  Android の流儀を無視してると
  24. 24. px
  25. 25. px
  26. 26. DIP, DP について“ちゃんと”理解する
  27. 27. DIP, DP で考える• dip, dp : Density-independent Pixels• 画面のピクセル密度に基づいて抽象的な単位• 画面設計する場合は pixel ではなく dip, dp で行 うこと!
  28. 28. 1DIPって何PXなの?• デバイスの dpi 解像度(ピクセル密度)によって異なる• デバイスの dpi が5種類(ldpi, mdpi, hdpi, xhdpi,xxhdpi)のどれに当てはまるかによる
  29. 29. LDPI, MDPI, HDPI, XHDPI,XXHDPI ldpi 約120dpi 1 dip = 0.75 px mdpi 約160dpi 1 dip = 1 px hdpi 約240dpi 1 dip = 1.5 px xhdpi 約320dpi 1 dip = 2 px xxhdpi 約480dpi 1 dip = 3 px• ldpi : mdpi : hdpi : xhdpi : xxhdpi = 3 : 4 : 6 : 8 : 12
  30. 30. DP 単位の画面サイズを求める• 4.0 inch で WVGA (800 x 480)• sqrt(800^2 + 480^2) / 4 = 2.33dpi → hdpi• hdpi : 1dip = 1.5 px• 800 px = 533 dip, 480 px = 320dip いろんなデバイス → http://bit.ly/Rl4XAh について調べた
  31. 31. 抑えておくべき画面サイズ (ハンドセット)• 320 dp x 480 dp 320 dp x 480 dp に収まるようにする ただし、最近は 320 dp x 533dp 以上• 320 dp x 533 dp のデバイスしか出ていない• 320 dp x 569 dp これ以外のサイズはマイノリティな• 360 ので、保証対象から外す方が安全 dp x 640 dp
  32. 32. • 320dp x 427dp• 320 dp x 480 dp• 320 dp x 533 dp• 320 dp x 569 dp• 360 dp x 640 dp
  33. 33. 拡縮領域を意識する
  34. 34. 設計時のポイント• 小さい画面サイズに合わせてつくる • 特に横幅は必ず > 320dip• 縦、横、それぞれどこを拡大・縮小させるか決める (拡縮できる部分は必ず設ける!)• よくある困った例:画面ぴったりに設計したら小さ い画面で切れる、大きい画面で左上によってしまう
  35. 35. 拡縮レイアウト• 余白分配 • LinearLayout で layout_weight を活用• 相対配置 • RelativeLayout で toRightOf, toLeftOf, align... を活用• スクロールさせる • ListView, GridView, ScrollView...• TextView で折り返し
  36. 36. 横方向の拡大縮小
  37. 37. LINEARLAYOUT• パーツを縦または横に並べる• android:layout_weight で余白を分配できる• 拡縮してもパーツの大きさの比率が一定
  38. 38. それぞれに 保存に layout_weight = “1”layout-weight = “1” チェックインに layout_weight = “2”
  39. 39. RELATIVELAYOUT• パーツを相対位置で並べる• オーバーレイ以外でも有用• 拡縮する部分が1カ所の場合に使える• ListView の1行のレイアウトに最適
  40. 40. • アイコンの大きさは固定• ボタンは最小さいず• 残りをタイトルと詳細に• 詳細は TextView は折り返し
  41. 41. <RelativeLayout> <ImageView android:layout_alignParentLeft=”true” android:id=”@+id/left_icon /> <ImageView android:layout_alignParentRight=”true” android:id=”@+id/button” /> <TextView android:toRightOf=”@+id/left_icon” android:toLeftOf=”@+id/button” /></RelativeLayout>
  42. 42. 縦方向の拡大縮小
  43. 43. 縦方向の拡縮• ListView や GridView, ScrollView などを活用• オリジナルのダイアログは注意が必要 • 高さが固定のダイアログ • 縦の短いデバイスでも大丈夫? • 480dip でも収まるようにする
  44. 44. 全体スクロール VS 一部スクロールスクロールさせる? 一部スクロール
  45. 45. RELATIVELAYOUT で縦拡縮• 親の GroupView に対する相対位置で指定• 残りの部分が拡縮される• スクロールがない画面で有用
  46. 46. centerInParent centerInParent で中心に配置 ↓ 周りの余白が拡大縮小alignParentBottom alignParentBottom で下部に配置
  47. 47. alignParentTop alignParentBottomalignParentBottom
  48. 48. 画面の周囲に接するサイズ固定の View から考える <RelativeLayout> <ImageView android:id=”@+id/thumb android:layout_alignParentLeft=”true” /> <ImageView android:id=”@+id/horizontal android:align_above=”@+id/thumb” /> <TextView android:id=”@+id/sub_title android:align_above=”@+id/horizontal” /> <ImageView android:id=”@+id/star android:align_above=”@+id/sub_title” android:layout_alignParentRight=”true” /> <TextView android:id=”@+id/title android:align_above=”@+id/sub_title” android:toLeftOf=”@+id/star” /> </RelativeLayout>
  49. 49. パーツの大きさ
  50. 50. タップするパーツの大きさ• タップできる領域は 7mm ∼ 9mm 必要• Android のデザインガイドラインでは 48dip 以上が推 奨• 48 dip が何mmになるかはデバイスによって異なる• INFOBAR C01 (3.2in FWVGA hdpi) : 6mm• Nexus One (3.7in WVGA hdpi) : 7mm https://docs.google.com/spreadsheet/pub? key=0At9tkpQpgWT2dGxTdlVhMXBiNWFmVG5NazZUd GNtOWc&output=html
  51. 51. 48DIP単位の設計• Navigation bar の高さ : 48dip• デフォルトの ActionBar の高さ : 48dip• デフォルトのタブの高さ : 48dip• 48dip を単位として配置• 余白は4の倍数にする 4, 8, 16... dip
  52. 52. 48dip
  53. 53. PADDING を活用する • 余白を入れたいが、その部分も タッチ領域にしたい • 青 : padding の場合のタッチ領域 • 赤 : margin の場合のタッチ領域
  54. 54. TOUCHDELEGATE を活用する • デザイン上 48dip の領域を確保で きない(したくない)が、タッチ 領域は 48dip ほしい • 仮想的なタッチ領域を作成 • 赤 : View の大きさ • 青 : タッチで反応する領域
  55. 55. 画面サイズとリソース
  56. 56. 画面サイズに応じてレイアウトを変える• dimen を使ってサイズを変える オススメ • values-large, values-sw360dp, ... オススメ• style を使って配置方法を変える • values-large, values-sw360dp, ...• レイアウトファイルを変える http://developer.android.com/guide/practices/ • layout-large, layout-sw360dp, ... screens_support.html#range むやみにレイアウトファイルを分割するのはダメ!
  57. 57. レイアウトファイル分割の弊害• 修正箇所が多くなる • パーツの配置位置が変わったら? • パーツの id が変わったら?• テスト漏れを起こしやすいどうしてレイアウトをサイズごとに変えたいのかを理解する
  58. 58. • 縦が小さい画面だとパーツが収まらない • → dimen と small や notlong を使ってパーツの大きさや余白 を画面サイズに応じて変える • 320dp x 427dp (small) や 320dp x 480dp 対応でよくある• 横幅に対する文字サイズの大きさを同じにしたい • → dimen と values-sw360dp を使って文字サイズを変える • 横幅が 320dp と 360dp のハンドセット対応でよくある sw**dp は Android 3.2 (API Level 13) からだが、 横幅が 360dp のハンドセットはほぼ 4.0 以降のデバイス
  59. 59. • Phone では画面サイズに合わせて、Tablet ではサイズ固定 • → style で layout-weight や layout-width, layout-height を画面サイ ズに応じて変える • タブレット対応でよくある• タブレットでは 2 ペインにしたい • レイアウトファイルを分割するしかないが... • include を使って、分割部分は最小限に抑える! • Fragment を使って、パーツ部分のレイアウトは共通化する
  60. 60. DIMEN を活用する• リソースでサイズを指定できる• values/dimens.xml• values-small, values-sw360dp など画面サイズに応じて変えられる• @dimen/hoge で指定<?xml version="1.0" encoding="utf-8"?><resources> <dimen name="text_padding">8dip</dimen> <dimen name="title_text_size">24dip</dimen></resources>http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
  61. 61. STYLE を活用する• リソースで配置方法を指定できる• values/styles.xml• values-small, values-sw360dp など画面サイズに応じて変えられる• @style/hoge で指定 <style name="ImageStyle"> <item name="android:layout_width">0dip</item> <item name="android:layout_weight">1</item> Phone </style> <style name="ImageStyle"> <item name="android:layout_width">400dip</item> </style> Tablet
  62. 62. ありがとうございました。

×