スマホデザインパターン なう

30,333 views

Published on

「Android UI勉強会」の矢野さんのスライドです。動画はこちら。
http://www.youtube.com/watch?v=2rVn3PWg7h4

0 Comments
106 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
30,333
On SlideShare
0
From Embeds
0
Number of Embeds
11,095
Actions
Shares
0
Downloads
261
Comments
0
Likes
106
Embeds 0
No embeds

No notes for slide

スマホデザインパターン なう

  1. 1. スマホデザインパターン なう なう バイドゥ株式会社プロダクト事業部 矢野りん 12012年4月18日水曜日
  2. 2. このセッションは • Android(多分HTML5関連でも通用す る)のデザインパターンとして知られて いる型を知る • 実際アプリでどう活用されているのか 事例を見る2012年4月18日水曜日
  3. 3. 32012年4月18日水曜日
  4. 4. その前に注意 42012年4月18日水曜日
  5. 5. デザインパターンと デザインガイドラインは別もの 52012年4月18日水曜日
  6. 6. ガイドラインのほうhttp://developer.android.com/design/index.html2012年4月18日水曜日
  7. 7. 今回参考にしたパターン紹介サイトhttp://www.androidpatterns.com/2012年4月18日水曜日
  8. 8. Android、とは言うものの マルチプラットフォーム対応 に耐えるパターンを選びました ちなみにiOSネーティブアプリのガイドラインは マルチプラトフォームに応用しにくいという意味で かなーりガラパゴスですよねー 82012年4月18日水曜日
  9. 9. では UIパターンをチェック 92012年4月18日水曜日
  10. 10. Drill down navigation 左から右 102012年4月18日水曜日
  11. 11. 特徴と用途 • 用途 階層型で整理した情報に導線を貼る。カテゴ リトップから詳細情報へ、といった感じ。 • 特徴 誰にでもわかりやすい • 注意点 階層が深い設計だと画面遷移が多い 112012年4月18日水曜日
  12. 12. ShopSavvy Barcode Scanner 122012年4月18日水曜日
  13. 13. タブレット展開する場合2012年4月18日水曜日
  14. 14. Dashboard 142012年4月18日水曜日
  15. 15. 特徴と用途 • 用途 カテゴリーを一覧表示する • 特徴 たくさん機能やコンテンツがある場合把握 しやすくなる • 注意点 アプリを使う前に1画面挟むのがユーザー にいやがられることも 152012年4月18日水曜日
  16. 16. EVERNOTE / Google+ / Picplz2012年4月18日水曜日
  17. 17. みせかたがうまい例Linked in 172012年4月18日水曜日
  18. 18. Action Bar 182012年4月18日水曜日
  19. 19. 特徴と用途 • 用途 重要な機能のためのナビゲーション • 特徴 いつも画面の上にあってみつけやすい • 注意点 小さいボタンだと触りにくい。横イチ だと指が届かん 192012年4月18日水曜日
  20. 20. Google+ / Google map / Touchnote 202012年4月18日水曜日
  21. 21. Segmented Control 212012年4月18日水曜日
  22. 22. 特徴と用途 • 用途 一連のデータを違う切り口で並べ替えたりする • 特徴 検索結果のフィルタ、地図上に施設表示のオン オフ、など。 • 注意点 画面そのものを切り替えるタブと区別して使う 必要がある 222012年4月18日水曜日
  23. 23. allrecipes / クックパッド 232012年4月18日水曜日
  24. 24. これはまつがいpicplz2012年4月18日水曜日
  25. 25. Expandable List 252012年4月18日水曜日
  26. 26. 特徴と用途 • 用途 階層化したリスト • 特徴 どのリストがどのカテゴリに属しているのか 見てわかる • 注意点 内包リストが多いと結局画面が長くなってみ づらくなる 262012年4月18日水曜日
  27. 27. Camera360 / Jigg Browser 272012年4月18日水曜日
  28. 28. Tabs 282012年4月18日水曜日
  29. 29. 特徴と用途 • 用途 分野のちがう情報を切り替える • 特徴 よく使われていて慣れやすい • 注意点 ラベルが必要なので、選択肢を3つ程度 にしぼる必要がある 292012年4月18日水曜日
  30. 30. Amazon / skype 302012年4月18日水曜日
  31. 31. Carousel 312012年4月18日水曜日
  32. 32. 特徴と用途 • 用途 限られたスペースに複数選択肢をおく • 特徴 見栄えがいい • 注意点 最初のアイテムと最後のアイテムの区別が すぐにつかないので、見たもの、まだ見 ていないものを区別したい場合つらい 322012年4月18日水曜日
  33. 33. allrecipes / Amazon 332012年4月18日水曜日
  34. 34. Quick Actions 342012年4月18日水曜日
  35. 35. 特徴と用途 • 用途 1つの対象に複数の操作をひもづける • 特徴 画面遷移が減らせる • 注意点 ユーザーがその機能の存在に気付かないことが あったりする 352012年4月18日水曜日
  36. 36. ドキュメント / skype 362012年4月18日水曜日
  37. 37. Modal Dialoge Header List Item List Item Alert Mesage List Item Description text. Lorem ipsum dolor List Item sit amet, consectetur adipiscing elit. Integer viverra, justo eu consequat aliquet, lorem quam List Item OK Cancel Agree Disagree 372012年4月18日水曜日
  38. 38. ダイアログ類 382012年4月18日水曜日
  39. 39. 特徴と用途 • 用途 状況を伝える • 特徴 モーダル/削除確認、同意など確実な意思決定に モードレス/送信しました などメッセージに • 注意点 モーダルは選択しないと先に進めない。手を止めさ せる。手続き上重要な選択のみに使う。モードレス は時限的なので、よそ見してて見逃したでは済まな いメッセージには使わない 392012年4月18日水曜日
  40. 40. モーダルなSimeji / モードレスなGoogle+2012年4月18日水曜日
  41. 41. デザインのリソース 412012年4月18日水曜日
  42. 42. UIデザインリソース/ライブラリ関連1 jQuery mobile http://jquerymobile.com/ Yahoo! Design Stencil Kit http://developer.yahoo.com/ypatterns/about/stencils/ glyphish http://glyphish.com/ Android design units http://code.google.com/p/android-ui-utils/ 422012年4月18日水曜日
  43. 43. UIデザインリソース/ライブラリ関連2 Android Icon Templates Pack http://developer.android.com/shareables/icon_templates- v4.0.zip Launcher Icons http://developer.android.com/guide/practices/ ui_guidelines/icon_design.html 432012年4月18日水曜日
  44. 44. UIデザインリソース/ガイドライン Apple Human Interface Gudeline https://developer.apple.com/jp/devcenter/ios/library/ documentation/MobileHIG.pdf Windows PhoneのUXデザインガイド http://msdn.microsoft.com/ja-jp/library/hh202915(v=vs. 92).aspx Android Design Guidelines http://developer.android.com/guide/practices/ ui_guidelines/icon_design.html Android Design http://developer.android.com/design/index.html2012年4月18日水曜日
  45. 45. UIデザインリソース/デザインパターン http://mobiledesignpatterngallery.com/ http://mobile-patterns.com/ http://pttrns.com/ http://www.patternsofdesign.co.uk/2012年4月18日水曜日

×