SlideShare a Scribd company logo
スマホデザインパターン
                なう
                        なう




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

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

                • 実際アプリでどう活用されているのか
                 事例を見る




2012年4月18日水曜日
3
2012年4月18日水曜日
その前に注意




                  4
2012年4月18日水曜日
デザインパターンと
      デザインガイドラインは別もの



                5
2012年4月18日水曜日
ガイドラインのほう
http://developer.android.com/design/index.html
2012年4月18日水曜日
今回参考にしたパターン紹介サイト
http://www.androidpatterns.com/
2012年4月18日水曜日
Android、とは言うものの
       マルチプラットフォーム対応
      に耐えるパターンを選びました
                 ちなみにiOSネーティブアプリのガイドラインは
                マルチプラトフォームに応用しにくいという意味で
                     かなーりガラパゴスですよねー




                           8
2012年4月18日水曜日
では
                UIパターンをチェック



                     9
2012年4月18日水曜日
Drill down navigation




                左から右
                          10
2012年4月18日水曜日
特徴と用途
       • 用途
            階層型で整理した情報に導線を貼る。カテゴ
            リトップから詳細情報へ、といった感じ。

       • 特徴
            誰にでもわかりやすい

       • 注意点
            階層が深い設計だと画面遷移が多い

                    11
2012年4月18日水曜日
ShopSavvy Barcode Scanner
                       12
2012年4月18日水曜日
タブレット展開する場合




2012年4月18日水曜日
Dashboard




                    14
2012年4月18日水曜日
特徴と用途
         • 用途
                カテゴリーを一覧表示する

         • 特徴
                たくさん機能やコンテンツがある場合把握
                しやすくなる

         • 注意点
                アプリを使う前に1画面挟むのがユーザー
                にいやがられることも
                        15
2012年4月18日水曜日
EVERNOTE / Google+ / Picplz
2012年4月18日水曜日
みせかたがうまい例




Linked in              17
2012年4月18日水曜日
Action Bar




                     18
2012年4月18日水曜日
特徴と用途
                • 用途
                 重要な機能のためのナビゲーション

                • 特徴
                 いつも画面の上にあってみつけやすい

                • 注意点
                 小さいボタンだと触りにくい。横イチ
                 だと指が届かん

                          19
2012年4月18日水曜日
Google+ / Google map / Touchnote
                          20
2012年4月18日水曜日
Segmented Control




                        21
2012年4月18日水曜日
特徴と用途
         • 用途
                一連のデータを違う切り口で並べ替えたりする

         • 特徴
                検索結果のフィルタ、地図上に施設表示のオン
                オフ、など。

         • 注意点
                画面そのものを切り替えるタブと区別して使う
                必要がある

                          22
2012年4月18日水曜日
allrecipes / クックパッド   23
2012年4月18日水曜日
これはまつがい




picplz
2012年4月18日水曜日
Expandable List




                       25
2012年4月18日水曜日
特徴と用途
         • 用途
                階層化したリスト

         • 特徴
                どのリストがどのカテゴリに属しているのか
                見てわかる

         • 注意点
                内包リストが多いと結局画面が長くなってみ
                づらくなる
                           26
2012年4月18日水曜日
Camera360 / Jigg Browser   27
2012年4月18日水曜日
Tabs




                 28
2012年4月18日水曜日
特徴と用途
                • 用途
                 分野のちがう情報を切り替える

                • 特徴
                 よく使われていて慣れやすい

                • 注意点
                 ラベルが必要なので、選択肢を3つ程度
                 にしぼる必要がある

                          29
2012年4月18日水曜日
Amazon / skype   30
2012年4月18日水曜日
Carousel




                   31
2012年4月18日水曜日
特徴と用途
            • 用途
                限られたスペースに複数選択肢をおく

            • 特徴
                見栄えがいい

            • 注意点
                最初のアイテムと最後のアイテムの区別が
                すぐにつかないので、見たもの、まだ見
                ていないものを区別したい場合つらい
                         32
2012年4月18日水曜日
allrecipes / Amazon   33
2012年4月18日水曜日
Quick Actions




                     34
2012年4月18日水曜日
特徴と用途
          • 用途
                1つの対象に複数の操作をひもづける

          • 特徴
                画面遷移が減らせる

          • 注意点
                ユーザーがその機能の存在に気付かないことが
                あったりする


                            35
2012年4月18日水曜日
ドキュメント / skype   36
2012年4月18日水曜日
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
2012年4月18日水曜日
特徴と用途
           •    用途
                状況を伝える

           •    特徴
                モーダル/削除確認、同意など確実な意思決定に
                モードレス/送信しました などメッセージに

           •    注意点
                モーダルは選択しないと先に進めない。手を止めさ
                せる。手続き上重要な選択のみに使う。モードレス
                は時限的なので、よそ見してて見逃したでは済まな
                いメッセージには使わない


                           39
2012年4月18日水曜日
モーダルなSimeji / モードレスなGoogle+
2012年4月18日水曜日
デザインのリソース




                    41
2012年4月18日水曜日
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日水曜日
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日水曜日
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日水曜日
UIデザインリソース/デザインパターン




      http://mobiledesignpatterngallery.com/

      http://mobile-patterns.com/

      http://pttrns.com/

      http://www.patternsofdesign.co.uk/




2012年4月18日水曜日

More Related Content

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

プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
Hiroki Toyokawa
 
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
 
4 18 googlefacebook
4 18 googlefacebook4 18 googlefacebook
4 18 googlefacebook
Yuki Fujino Oita Univ.
 
ふつうのプログラマの自分戦略
ふつうのプログラマの自分戦略ふつうのプログラマの自分戦略
ふつうのプログラマの自分戦略
irof N
 
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏Developers Summit
 
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
YUKI YAMAGUCHI
 
Glide活用イメージ紹介20220421
Glide活用イメージ紹介20220421Glide活用イメージ紹介20220421
Glide活用イメージ紹介20220421
kazu_1803
 
Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Takuya Fujimura
 
20120630 android ics in Yokohama
20120630 android ics in Yokohama20120630 android ics in Yokohama
20120630 android ics in Yokohama
Kenichi Ohwada
 
グリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべてグリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべて
Koichiro Ohba
 
つ部 Android 勉強会 2013年4月 発表資料
つ部 Android 勉強会 2013年4月 発表資料つ部 Android 勉強会 2013年4月 発表資料
つ部 Android 勉強会 2013年4月 発表資料Kenji Nagase
 
ABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for DummiesABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for Dummies
Nobuya Sato
 
第一回Android training4desinger
第一回Android training4desinger第一回Android training4desinger
第一回Android training4desinger
Kengo Suzuki
 
[Io2012]android41+開発ツール紹介
[Io2012]android41+開発ツール紹介[Io2012]android41+開発ツール紹介
[Io2012]android41+開発ツール紹介
Kenichi Kambara
 

Similar to スマホデザインパターン なう (15)

プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
 
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
 
4 18 googlefacebook
4 18 googlefacebook4 18 googlefacebook
4 18 googlefacebook
 
ふつうのプログラマの自分戦略
ふつうのプログラマの自分戦略ふつうのプログラマの自分戦略
ふつうのプログラマの自分戦略
 
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏
【B-3】 社内ソーシャルメディア開発トライ&エラー ~おれたちの4tate~ 原島法子氏/岩永義弘氏
 
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
 
Glide活用イメージ紹介20220421
Glide活用イメージ紹介20220421Glide活用イメージ紹介20220421
Glide活用イメージ紹介20220421
 
Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能
 
20120630 android ics in Yokohama
20120630 android ics in Yokohama20120630 android ics in Yokohama
20120630 android ics in Yokohama
 
グリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべてグリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべて
 
つ部 Android 勉強会 2013年4月 発表資料
つ部 Android 勉強会 2013年4月 発表資料つ部 Android 勉強会 2013年4月 発表資料
つ部 Android 勉強会 2013年4月 発表資料
 
ABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for DummiesABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for Dummies
 
Osc2012tokyo timing
Osc2012tokyo timingOsc2012tokyo timing
Osc2012tokyo timing
 
第一回Android training4desinger
第一回Android training4desinger第一回Android training4desinger
第一回Android training4desinger
 
[Io2012]android41+開発ツール紹介
[Io2012]android41+開発ツール紹介[Io2012]android41+開発ツール紹介
[Io2012]android41+開発ツール紹介
 

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

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