Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意

2,909 views

Published on

デブサミ2014(Developers Summit 2014)Story! 初日のデザインセッション「Smashing Android UI, Androidデザインの極意」の発表資料(2014年2月13日)

Published in: Design

Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意

  1. 1. Smashing Android UI Androidデザインの極意 Session:【13-C-3】 Nobuya Sato Experience Designer February 13th., 2014 Twitter: #devsumiC
  2. 2. 自己紹介 •  佐藤 伸哉 (@nobsato) •  UXデザイン、デザイン戦略、情報設計 –  神戸芸術工科大学でプロダクトデザインを専攻、 その後、1994からCD-ROMやゲーム、Webデザイン –  主に大規模な企業サイトの情報設計や企業のグロ ーバル戦略を実行 –  Sonyでニューモバイル戦略やグループ横断のプラ ットフォーム戦略、タブレット戦略を担当 –  UXとデザイン戦略の会社、Secret Lab, Inc.を設立 –  現在、欧米大手クリエイティブエージェンシー AKQAの東京オフィスの立ち上げに参画 Copyright © 2014 Secret Lab, Inc. All rights reserved. 2
  3. 3. 3
  4. 4. Nike+ Training Club 4
  5. 5. WWF Together 5
  6. 6. Nike+ Kinect Training 6
  7. 7. Future Lions 7
  8. 8. Future Lions 2013 “DESTINY AWAITS AKQAによる全世界の学生 を対象にしたコンペ。 2005年以来「5年前では 実現できなかったアイディ アの考案」というテーマで 開催。 5つの優秀作品がカンヌ国 際クリエイティビティ際で 発表され、カンヌへの登録 チケットが授与される。 8
  9. 9. 本日のテーマ Androidデザインの極意 Copyright © 2014 Secret Lab, Inc. All rights reserved. 9
  10. 10. はじめに STORY!からACTION!へ Copyright © 2014 Secret Lab, Inc. All rights reserved. 10
  11. 11. Various form factor of Android, in 2010 Gadgets... Copyright © 2014 Secret Lab, Inc. All rights reserved. 11
  12. 12. Gadgets… Copyright © 2014 Secret Lab, Inc. All rights reserved. 12
  13. 13. Gadgets… Copyright © 2014 Secret Lab, Inc. All rights reserved. 13
  14. 14. Gadgets… Inside of HTC EVO 4G Copyright © 2014 Secret Lab, Inc. All rights reserved. 14
  15. 15. When travel around the world… Copyright © 2014 Secret Lab, Inc. All rights reserved. From Left to Right: 15 Samsung Instinct, HTC G1, NTT DoCoMo So9051, Palm Pre
  16. 16. 2008年10月22日、米国でG1が発売! Copyright © 2014 Secret Lab, Inc. All rights reserved. 16
  17. 17. 2008年10月22日、米国でG1が発売! Copyright © 2014 Secret Lab, Inc. All rights reserved. 17
  18. 18. なんとか11月に入手、無事に深夜にUnlock !! Copyright © 2014 Secret Lab, Inc. All rights reserved. 18
  19. 19. Android Framework Copyright © 2014 Secret Lab, Inc. All rights reserved. 19
  20. 20. Android 関係の様々な書籍… Copyright © 2014 Secret Lab, Inc. All rights reserved. 20
  21. 21. Android デザイン関係の書籍… Copyright © 2014 Secret Lab, Inc. All rights reserved. 21
  22. 22. Android デザイン関係の書籍… Copyright © 2014 Secret Lab, Inc. All rights reserved. 22
  23. 23. Android デザイン関係の書籍… Copyright © 2014 Secret Lab, Inc. All rights reserved. 23
  24. 24. ANDROID // UI PATTERNS Copyright © 2014 Secret Lab, Inc. All rights reserved. 24
  25. 25. 2012年末「SMASHING Android UI」が発売 Copyright © 2014 Secret Lab, Inc. All rights reserved. 25
  26. 26. 良質な書籍が無いなら自分で出せばいい… Copyright © 2014 Secret Lab, Inc. All rights reserved. 26
  27. 27. 本日のセッション内容 Androidデザインの極意… 1.  スケーラブルなレイアウト レスポンシブUI 2.  繰り返し使えるルールを使う デザインパターン Copyright © 2014 Secret Lab, Inc. All rights reserved. 27
  28. 28. スケーラブルなレイアウト レスポンシブUI Copyright © 2014 Secret Lab, Inc. All rights reserved. 28
  29. 29. なぜレスポンシブUIなのか? Copyright © 2014 Secret Lab, Inc. All rights reserved. 29
  30. 30. なぜレスポンシブなのか? 大きな画面でアプリを表示すると… Copyright © 2014 Secret Lab, Inc. All rights reserved. 30
  31. 31. なぜレスポンシブなのか? Copyright © 2014 Secret Lab, Inc. All rights reserved. 31
  32. 32. なぜレスポンシブなのか? Copyright © 2014 Secret Lab, Inc. All rights reserved. 32
  33. 33. 画面を有効に使う コンテンツの統合 Fragment Copyright © 2014 Secret Lab, Inc. All rights reserved. 33
  34. 34. 画面を有効に使う コンテンツの統合 Fragmentで複数の画面を表示 Copyright © 2014 Secret Lab, Inc. All rights reserved. 34
  35. 35. 画面を有効に使う コンテンツの統合 CompoundVeiwで表示内容を変更 Copyright © 2014 Secret Lab, Inc. All rights reserved. 35
  36. 36. レスポンシブデザインを理解する レスポンシブデザインの考え方 例:Webサイト 可変領域 可変領域 Copyright © 2014 Secret Lab, Inc. All rights reserved. 可変領域 36
  37. 37. レスポンシブデザインを理解する タブレットでの表示例 可変領域 スマホでの表示例 可変領域 Copyright © 2014 Secret Lab, Inc. All rights reserved. 可変領域 37
  38. 38. Androidでのレスポンシブ 一般的なアプリ構造 詳細表示 新規作成 ランディングページ (リストビュー) 新規作成ページ 新規作成 詳細ページ Copyright © 2014 Secret Lab, Inc. All rights reserved. 38
  39. 39. Androidでのレスポンシブ ランディングページ (リストビュー) 詳細ページ Copyright © 2014 Secret Lab, Inc. All rights reserved. 39
  40. 40. Androidでのレスポンシブ ランディングページ (リストビュー) 詳細ページ Copyright © 2014 Secret Lab, Inc. All rights reserved. 40
  41. 41. Androidでのレスポンシブ 新規作成ページ? ランディングページ (リストビュー) 詳細ページ Copyright © 2014 Secret Lab, Inc. All rights reserved. 41
  42. 42. Androidでのレスポンシブ ランディングページ 詳細ページ 新規作成オーバーレイ (リストビュー) Copyright © 2014 Secret Lab, Inc. All rights reserved. 42
  43. 43. Androidでのレスポンシブ、シンプルな構成 Copyright © 2014 Secret Lab, Inc. All rights reserved. 43
  44. 44. アプリの構造はシンプルに Gmail カレンダー Copyright © 2014 Secret Lab, Inc. All rights reserved. 44
  45. 45. アプリの構造はシンプルに ActionBar (ナビゲーション) トップページ (トップレベル) ランディングページ (リストビュー) 詳細ページ Copyright © 2013 Secret Lab, Inc. All rights reserved. 45
  46. 46. 繰り返し使えるルール デザインパターン Copyright © 2013 Secret Lab, Inc. All rights reserved. 46
  47. 47. DESIGN PATTERNS Copyright © 2013 Secret Lab, Inc. All rights reserved. 47
  48. 48. ソフトウェアデザインのデザインパターン •  一般的な問題に対する考えぬかれた解決策の集合知。 •  デザイン上の課題を克服する助けになるよう、同じア プローチを形式化するメカニズム 『Design Patterns 』by Gang of Four  邦題『オブジェクト指向における再利用のためのデザインパターン』  (ソフトバンクパブリッシング、1995 年) Copyright © 2014 Secret Lab, Inc. All rights reserved. 48
  49. 49. パターン・ランゲージ ポストボタン建築家のクリストファー・アレクサンダーが提唱した記 憶記述の方法。建築や街の形態の中に繰り返し現れる法則性を「パ ターン」と予備、それを「ランゲージ(言語)」として記述して共有 する方法 パタン・ランゲージ―環境設計の手引 by Christopher Alexander Copyright © 2014 Secret Lab, Inc. All rights reserved. 49
  50. 50. UIデザインのデザインパターン •  デザインの構成要素を整理する必要がある場合に使う。 •  ユーザーのニーズに基づいて具体的なデザインを組み 立てるのに役立つ「ツール」 •  デザインしているUIのニーズに合わせて調整が必要。 •  利用すべき状況と利用すべきでない状況がある。 Copyright © 2014 Secret Lab, Inc. All rights reserved. 50
  51. 51. UIデザインのパターン ユーザーアクションのパターン ナビゲーションとレイアウトのパターン 1.  Action Bar 6.  Stacked Galleries 2.  Quick Actions 7.  Dashboard 3.  Action Drawer 8.  Workspace 4.  Pull-to-Refresh 9.  Split View 5.  Swipe-to-Dismiss 10. Expand-in-Context 11. Side Navigation データのデザインパターン 12. Dynamic List 14. Non-Forced Login 13. Image Placeholder 15. Drag-to-Reorder Handle Copyright © 2014 Secret Lab, Inc. All rights reserved. 51
  52. 52. ※書籍での流れ •  デザインパターンが解決する問題 ↓ •  解決策 ↓ •  結果 ↓ •  大きな画面への適応 ↓ •  注意点 ↓ •  実装技術 Copyright © 2014 Secret Lab, Inc. All rights reserved. 52
  53. 53. 1. Action Bar – Action Barの使用 1.  Androidのデザイン言語の 特徴的なパターン 2.  UIの最上部に配置 3.  アプリアイコンとコンテ キスト対応のアクション ボタンで構成 4.  必要に応じてオーバーフ ローメニューや他のオプ ションを追加 Copyright © 2014 Secret Lab, Inc. All rights reserved. 53
  54. 54. 1. Action Bar – このパターンが解決する問題 1.  コンテキスト対応の重要なア クションの提供 2.  企業のロゴの表示 3.  アプリ内での位置感覚 Copyright © 2014 Secret Lab, Inc. All rights reserved. 54
  55. 55. 1. Action Bar – 解決策 1.  コンテキスト対応の重要なアクションの提供 → アクションアイテム、アクションオーバーフロ 2.  企業のロゴ  → 企業・アプリごとのブランディング 3.  アプリ内での位置感覚 → Home/Upボタン(Upアフォーダンス) アプリアイコン 画面タイトルまたは オプションメニュー アクションアイテム アクション オーバーフロー メニュー Upインジケーター またはDrawerインジケーター Copyright © 2014 Secret Lab, Inc. All rights reserved. 55
  56. 56. 1. Action Bar – 結果 •  •  •  •  常にもっとも重要なアクションが表示される 複数のアプリで共通のコンポーネントを提供するこ とで、ユーザーがその機能を期待し、使いやすいと 感じるようになる 他のアプリからの学習効果 アプリのメイン機能を使いやすいと感じ、全体のU Xが向上 Copyright © 2014 Secret Lab, Inc. All rights reserved. 56
  57. 57. 1. Action Bar – 追加の機能 •  Up/Homeボタン •  ドロップダウンスピナーやタブ などのナビゲーションコントロ ールのコンテナ Copyright © 2014 Secret Lab, Inc. All rights reserved. 57
  58. 58. 1. Action Bar – 大きな画面への適応 •  •  •  簡単に適応 スペースを活かしてタブナビゲーションを追加し たり、ラベル面積を広げる、アクションオーバーフ ローメニューの一部をメニューバーに移動するなど Action BarライブラリやAndroid SDKにより提供され ている Copyright © 2014 Secret Lab, Inc. All rights reserved. 58
  59. 59. 1. Action Bar – 注意点 •  指が届く範囲、片手での操作難 •  画面領域の無駄と非表示 •  アイコンに基づくアクション Copyright © 2014 Secret Lab, Inc. All rights reserved. 59
  60. 60. UIデザインのデザインパターン ユーザーアクションのパターン ナビゲーションとレイアウトのパターン 1.  Action Bar 6.  Stacked Galleries 2.  Quick Actions 7.  Dashboard 3.  Action Drawer 8.  Workspace 4.  Pull-to-Refresh 9.  Split View 5.  Swipe-to-Dismiss 10. Expand-in-Context 11. Side Navigation データのデザインパターン 12. Dynamic List 14. Non-Forced Login 13. Image Placeholder 15. Drag-to-Reorder Handle Copyright © 2014 Secret Lab, Inc. All rights reserved. 60
  61. 61. 2. Quick Actions Copyright © 2014 Secret Lab, Inc. All rights reserved. 61
  62. 62. 3. Action Drawer Copyright © 2014 Secret Lab, Inc. All rights reserved. 62
  63. 63. 4. Pull-to-Refresh Copyright © 2014 Secret Lab, Inc. All rights reserved. 63
  64. 64. 5. Swipe to Dismiss Copyright © 2014 Secret Lab, Inc. All rights reserved. 64
  65. 65. 6. Stacked Galleries Copyright © 2014 Secret Lab, Inc. All rights reserved. 65
  66. 66. 7. Dashboard Copyright © 2014 Secret Lab, Inc. All rights reserved. 66
  67. 67. 8. Workplace Copyright © 2014 Secret Lab, Inc. All rights reserved. 67
  68. 68. 9. Split View Copyright © 2014 Secret Lab, Inc. All rights reserved. 68
  69. 69. 10. Expand-in-Context Copyright © 2014 Secret Lab, Inc. All rights reserved. 69
  70. 70. 11. Side Navigation Copyright © 2014 Secret Lab, Inc. All rights reserved. 70
  71. 71. 12. Dynamic List Copyright © 2014 Secret Lab, Inc. All rights reserved. 71
  72. 72. 14. Image Placeholder Copyright © 2014 Secret Lab, Inc. All rights reserved. 72
  73. 73. 14. Non-forced Login Copyright © 2014 Secret Lab, Inc. All rights reserved. 73
  74. 74. 15 Drag-to-reorder Handler Copyright © 2014 Secret Lab, Inc. All rights reserved. 74
  75. 75. 使ってはいけないデザインパターン アンチ・デザインパターン Copyright © 2014 Secret Lab, Inc. All rights reserved. 75
  76. 76. ANTI-DESIGN PATTERNS Copyright © 2014 Secret Lab, Inc. All rights reserved. 76
  77. 77. UIデザインのアンチパターン •  よく発生する問題に対して、間違っているにもかかわ らず、よく使われてしまっている解決策。 •  …とはいえ、特定の例外や制約があって、結局はその アンチパターンが有効な解決策の場合もある。 Copyright © 2014 Secret Lab, Inc. All rights reserved. 77
  78. 78. UIデザインのアンチパターン 1.  スプラッシュ画面 2.  チュートリアル画面 3.  確認用ウィンドウ 4.  オンスクリーンのBackボタン 5.  メニューボタン 6.  メニューバーの非表示 7.  スワイプオーバーレイQuickアクション 8.  Android以外のデザインの適用 Copyright © 2014 Secret Lab, Inc. All rights reserved. 78
  79. 79. 純粋なANDROID体験 ピュア・アンドロイド Copyright © 2014 Secret Lab, Inc. All rights reserved. 79
  80. 80. 純粋なAndroid体験 Pure Android 1.  他のプラットフォームの UI 要素を模倣しない 2.  プラットフォームに依存の特定のアイコンを流用しない 3.  画面切り替えのナビゲーションを画面下部に置かない 4.  他のアプリへのリンクを直接ハードコードしない 5.  アクションバーに戻り先名称を付けたバックボタン を置かない 6.  リストアイテムに右向きの “>”(大なり記号)を付けない Copyright © 2014 Secret Lab, Inc. All rights reserved. 80
  81. 81. まとめ 最後に Copyright © 2014 Secret Lab, Inc. All rights reserved. 81
  82. 82. まとめ •  既存のデザインパターンを利用して効率よく、ユーザ ーが使いやすいと感じるアプリを作ろう。 •  迷う前にデザインパターンで実装してみる。ほとんど の機能は既存のデザインパターンで解決できる(はず) •  例外は必ず存在する。それでもアンチパターンを使う ことは極力避ける努力をする。 Copyright © 2014 Secret Lab, Inc. All rights reserved. 82
  83. 83. Thank You Nobuya Sato Experience Designer nobsato@secret-lab.jp http://twitter.com/nobsato http://about.me/nobsato http://slideshare.com/nobsato Copyright © 2014 Secret Lab, Inc. All rights reserved. 83

×