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

1. スマホデザインパターン
なう
なう
バイドゥ株式会社プロダクト事業部
矢野りん
1
2012年4月18日水曜日

2. このセッションは
• Android（多分HTML5関連でも通用す
る）のデザインパターンとして知られて
いる型を知る
• 実際アプリでどう活用されているのか
事例を見る
2012年4月18日水曜日

3. 3
2012年4月18日水曜日

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

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

6. ガイドラインのほう
http://developer.android.com/design/index.html
2012年4月18日水曜日

7. 今回参考にしたパターン紹介サイト
http://www.androidpatterns.com/
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日水曜日

13. タブレット展開する場合
2012年4月18日水曜日

14. Dashboard
14
2012年4月18日水曜日

15. 特徴と用途
• 用途
カテゴリーを一覧表示する
• 特徴
たくさん機能やコンテンツがある場合把握
しやすくなる
• 注意点
アプリを使う前に１画面挟むのがユーザー
にいやがられることも
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日水曜日

24. これはまつがい
picplz
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. 特徴と用途
• 用途
分野のちがう情報を切り替える
• 特徴
よく使われていて慣れやすい
• 注意点
ラベルが必要なので、選択肢を３つ程度
にしぼる必要がある
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. 特徴と用途
• 用途
１つの対象に複数の操作をひもづける
• 特徴
画面遷移が減らせる
• 注意点
ユーザーがその機能の存在に気付かないことが
あったりする
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日水曜日

40. モーダルなSimeji / モードレスなGoogle+
2012年4月18日水曜日

41. デザインのリソース
41
2012年4月18日水曜日

42. UIデザインリソース／ライブラリ関連１
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デザインリソース／ライブラリ関連２
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日水曜日