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

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

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

32012年4月18日水曜日

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

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

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

今回参考にしたパターン紹介サイトhttp://www.androidpatterns.com/2012年4月18日水曜日

Android、とは言うもののマルチプラットフォーム対応に耐えるパターンを選びましたちなみにiOSネーティブアプリのガイドラインはマルチプラトフォームに応用しにくいという意味でかなーりガラパゴスですよねー 82012年4月18日水曜日

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

Drill down navigation 左から右 102012年4月18日水曜日

特徴と用途 • 用途階層型で整理した情報に導線を貼る。カテゴリトップから詳細情報へ、といった感じ。 • 特徴誰にでもわかりやすい • 注意点階層が深い設計だと画面遷移が多い 112012年4月18日水曜日

ShopSavvy Barcode Scanner 122012年4月18日水曜日

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

Dashboard 142012年4月18日水曜日

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

EVERNOTE / Google+ / Picplz2012年4月18日水曜日

みせかたがうまい例Linked in 172012年4月18日水曜日

Action Bar 182012年4月18日水曜日

特徴と用途 • 用途重要な機能のためのナビゲーション • 特徴いつも画面の上にあってみつけやすい • 注意点小さいボタンだと触りにくい。横イチだと指が届かん 192012年4月18日水曜日

Google+ / Google map / Touchnote 202012年4月18日水曜日

Segmented Control 212012年4月18日水曜日

特徴と用途 • 用途一連のデータを違う切り口で並べ替えたりする • 特徴検索結果のフィルタ、地図上に施設表示のオンオフ、など。 • 注意点画面そのものを切り替えるタブと区別して使う必要がある 222012年4月18日水曜日

allrecipes / クックパッド 232012年4月18日水曜日

これはまつがいpicplz2012年4月18日水曜日

Expandable List 252012年4月18日水曜日

特徴と用途 • 用途階層化したリスト • 特徴どのリストがどのカテゴリに属しているのか見てわかる • 注意点内包リストが多いと結局画面が長くなってみづらくなる 262012年4月18日水曜日

Camera360 / Jigg Browser 272012年4月18日水曜日

Tabs 282012年4月18日水曜日

特徴と用途 • 用途分野のちがう情報を切り替える • 特徴よく使われていて慣れやすい • 注意点ラベルが必要なので、選択肢を３つ程度にしぼる必要がある 292012年4月18日水曜日

Amazon / skype 302012年4月18日水曜日

Carousel 312012年4月18日水曜日

特徴と用途 • 用途限られたスペースに複数選択肢をおく • 特徴見栄えがいい • 注意点最初のアイテムと最後のアイテムの区別がすぐにつかないので、見たもの、まだ見ていないものを区別したい場合つらい 322012年4月18日水曜日

allrecipes / Amazon 332012年4月18日水曜日

Quick Actions 342012年4月18日水曜日

特徴と用途 • 用途１つの対象に複数の操作をひもづける • 特徴画面遷移が減らせる • 注意点ユーザーがその機能の存在に気付かないことがあったりする 352012年4月18日水曜日

ドキュメント / skype 362012年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 372012年4月18日水曜日

ダイアログ類 382012年4月18日水曜日

特徴と用途 • 用途状況を伝える • 特徴モーダル／削除確認、同意など確実な意思決定にモードレス／送信しましたなどメッセージに • 注意点モーダルは選択しないと先に進めない。手を止めさせる。手続き上重要な選択のみに使う。モードレスは時限的なので、よそ見してて見逃したでは済まないメッセージには使わない 392012年4月18日水曜日

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

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

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/ 422012年4月18日水曜日

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 432012年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.html2012年4月18日水曜日

UIデザインリソース／デザインパターン http://mobiledesignpatterngallery.com/ http://mobile-patterns.com/ http://pttrns.com/ http://www.patternsofdesign.co.uk/2012年4月18日水曜日

http://w3q.jp	632
http://designgineer.wordpress.com	148
http://storify.com	19
https://twitter.com	15
http://sc.dotbranch.com	7
http://ss.dotbranch.com	5
https://si0.twimg.com	5
http://static.ak.facebook.com	5
http://s.deeeki.com	5
http://twitter.com	2
https://twimg0-a.akamaihd.net	1

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

by Noriyuki Suzuki

Accessibility

Upload Details

Usage Rights

11 Embeds 844

Statistics