Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

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




                バイドゥ株式会社プロダクト事業部
                      矢野りん
...

Ad

このセッションは
                • Android(多分HTML5関連でも通用す
                 る)のデザインパターンとして知られて
                 いる型を知る

           ...

Ad

3
2012年4月18日水曜日

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 45 Ad
1 of 45 Ad

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

  1. 1. スマホデザインパターン なう なう バイドゥ株式会社プロダクト事業部 矢野りん 1 2012年4月18日水曜日
  2. 2. このセッションは • Android(多分HTML5関連でも通用す る)のデザインパターンとして知られて いる型を知る • 実際アプリでどう活用されているのか 事例を見る 2012年4月18日水曜日
  3. 3. 3 2012年4月18日水曜日
  4. 4. その前に注意 4 2012年4月18日水曜日
  5. 5. デザインパターンと デザインガイドラインは別もの 5 2012年4月18日水曜日
  6. 6. ガイドラインのほう http://developer.android.com/design/index.html 2012年4月18日水曜日
  7. 7. 今回参考にしたパターン紹介サイト http://www.androidpatterns.com/ 2012年4月18日水曜日
  8. 8. Android、とは言うものの マルチプラットフォーム対応 に耐えるパターンを選びました ちなみにiOSネーティブアプリのガイドラインは マルチプラトフォームに応用しにくいという意味で かなーりガラパゴスですよねー 8 2012年4月18日水曜日
  9. 9. では UIパターンをチェック 9 2012年4月18日水曜日
  10. 10. Drill down navigation 左から右 10 2012年4月18日水曜日
  11. 11. 特徴と用途 • 用途 階層型で整理した情報に導線を貼る。カテゴ リトップから詳細情報へ、といった感じ。 • 特徴 誰にでもわかりやすい • 注意点 階層が深い設計だと画面遷移が多い 11 2012年4月18日水曜日
  12. 12. ShopSavvy Barcode Scanner 12 2012年4月18日水曜日
  13. 13. タブレット展開する場合 2012年4月18日水曜日
  14. 14. Dashboard 14 2012年4月18日水曜日
  15. 15. 特徴と用途 • 用途 カテゴリーを一覧表示する • 特徴 たくさん機能やコンテンツがある場合把握 しやすくなる • 注意点 アプリを使う前に1画面挟むのがユーザー にいやがられることも 15 2012年4月18日水曜日
  16. 16. EVERNOTE / Google+ / Picplz 2012年4月18日水曜日
  17. 17. みせかたがうまい例 Linked in 17 2012年4月18日水曜日
  18. 18. Action Bar 18 2012年4月18日水曜日
  19. 19. 特徴と用途 • 用途 重要な機能のためのナビゲーション • 特徴 いつも画面の上にあってみつけやすい • 注意点 小さいボタンだと触りにくい。横イチ だと指が届かん 19 2012年4月18日水曜日
  20. 20. Google+ / Google map / Touchnote 20 2012年4月18日水曜日
  21. 21. Segmented Control 21 2012年4月18日水曜日
  22. 22. 特徴と用途 • 用途 一連のデータを違う切り口で並べ替えたりする • 特徴 検索結果のフィルタ、地図上に施設表示のオン オフ、など。 • 注意点 画面そのものを切り替えるタブと区別して使う 必要がある 22 2012年4月18日水曜日
  23. 23. allrecipes / クックパッド 23 2012年4月18日水曜日
  24. 24. これはまつがい picplz 2012年4月18日水曜日
  25. 25. Expandable List 25 2012年4月18日水曜日
  26. 26. 特徴と用途 • 用途 階層化したリスト • 特徴 どのリストがどのカテゴリに属しているのか 見てわかる • 注意点 内包リストが多いと結局画面が長くなってみ づらくなる 26 2012年4月18日水曜日
  27. 27. Camera360 / Jigg Browser 27 2012年4月18日水曜日
  28. 28. Tabs 28 2012年4月18日水曜日
  29. 29. 特徴と用途 • 用途 分野のちがう情報を切り替える • 特徴 よく使われていて慣れやすい • 注意点 ラベルが必要なので、選択肢を3つ程度 にしぼる必要がある 29 2012年4月18日水曜日
  30. 30. Amazon / skype 30 2012年4月18日水曜日
  31. 31. Carousel 31 2012年4月18日水曜日
  32. 32. 特徴と用途 • 用途 限られたスペースに複数選択肢をおく • 特徴 見栄えがいい • 注意点 最初のアイテムと最後のアイテムの区別が すぐにつかないので、見たもの、まだ見 ていないものを区別したい場合つらい 32 2012年4月18日水曜日
  33. 33. allrecipes / Amazon 33 2012年4月18日水曜日
  34. 34. Quick Actions 34 2012年4月18日水曜日
  35. 35. 特徴と用途 • 用途 1つの対象に複数の操作をひもづける • 特徴 画面遷移が減らせる • 注意点 ユーザーがその機能の存在に気付かないことが あったりする 35 2012年4月18日水曜日
  36. 36. ドキュメント / skype 36 2012年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 37 2012年4月18日水曜日
  38. 38. ダイアログ類 38 2012年4月18日水曜日
  39. 39. 特徴と用途 • 用途 状況を伝える • 特徴 モーダル/削除確認、同意など確実な意思決定に モードレス/送信しました などメッセージに • 注意点 モーダルは選択しないと先に進めない。手を止めさ せる。手続き上重要な選択のみに使う。モードレス は時限的なので、よそ見してて見逃したでは済まな いメッセージには使わない 39 2012年4月18日水曜日
  40. 40. モーダルなSimeji / モードレスなGoogle+ 2012年4月18日水曜日
  41. 41. デザインのリソース 41 2012年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/ 42 2012年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 43 2012年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.html 2012年4月18日水曜日
  45. 45. UIデザインリソース/デザインパターン http://mobiledesignpatterngallery.com/ http://mobile-patterns.com/ http://pttrns.com/ http://www.patternsofdesign.co.uk/ 2012年4月18日水曜日

×