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

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

1

なう

2012年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

左から右10

2012年4月18日水曜日

特徴と用途•用途階層型で整理した情報に導線を貼る。カテゴリトップから詳細情報へ、といった感じ。

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

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

112012年4月18日水曜日

12ShopSavvy Barcode Scanner2012年4月18日水曜日

タブレット展開する場合

2012年4月18日水曜日

Dashboard

142012年4月18日水曜日

特徴と用途•用途カテゴリーを一覧表示する

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

•注意点アプリを使う前に１画面挟むのがユーザーにいやがられることも

152012年4月18日水曜日

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

みせかたがうまい例

17Linked in2012年4月18日水曜日

Action Bar

182012年4月18日水曜日

特徴と用途•用途重要な機能のためのナビゲーション

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

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

192012年4月18日水曜日

20Google+ / Google map / Touchnote2012年4月18日水曜日

Segmented Control

212012年4月18日水曜日

特徴と用途• 用途一連のデータを違う切り口で並べ替えたりする

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

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

222012年4月18日水曜日

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

これはまつがい

picplz2012年4月18日水曜日

Expandable List

252012年4月18日水曜日

特徴と用途•用途階層化したリスト

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

•注意点内包リストが多いと結局画面が長くなってみづらくなる

262012年4月18日水曜日

27Camera360 / Jigg Browser2012年4月18日水曜日

Tabs

282012年4月18日水曜日

特徴と用途•用途分野のちがう情報を切り替える

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

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

292012年4月18日水曜日

30Amazon / skype2012年4月18日水曜日

Carousel

312012年4月18日水曜日

特徴と用途•用途限られたスペースに複数選択肢をおく

•特徴見栄えがいい

•注意点最初のアイテムと最後のアイテムの区別がすぐにつかないので、見たもの、まだ見ていないものを区別したい場合つらい

322012年4月18日水曜日

33allrecipes / Amazon2012年4月18日水曜日

Quick Actions

342012年4月18日水曜日

特徴と用途• 用途１つの対象に複数の操作をひもづける

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

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

352012年4月18日水曜日

36ドキュメント / skype2012年4月18日水曜日

Header

List Item

List Item

List Item

List Item

List Item

OK Cancel DisagreeAgree

Alert Mesage

Description text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, justo eu consequat aliquet, lorem quam

Modal Dialoge

372012年4月18日水曜日

ダイアログ類

382012年4月18日水曜日

特徴と用途• 用途状況を伝える

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

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

392012年4月18日水曜日

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

デザインのリソース

412012年4月18日水曜日

jQuery mobilehttp://jquerymobile.com/

Yahoo! Design Stencil Kithttp://developer.yahoo.com/ypatterns/about/stencils/

glyphishhttp://glyphish.com/

Android design unitshttp://code.google.com/p/android-ui-utils/

42

UIデザインリソース／ライブラリ関連１

2012年4月18日水曜日

Android Icon Templates Packhttp://developer.android.com/shareables/icon_templates-v4.0.zip

Launcher Iconshttp://developer.android.com/guide/practices/ui_guidelines/icon_design.html

43

UIデザインリソース／ライブラリ関連２

2012年4月18日水曜日

Apple Human Interface Gudelinehttps://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 Guidelineshttp://developer.android.com/guide/practices/ui_guidelines/icon_design.html

Android Designhttp://developer.android.com/design/index.html

UIデザインリソース／ガイドライン

2012年4月18日水曜日

http://mobiledesignpatterngallery.com/

http://mobile-patterns.com/

http://pttrns.com/

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

UIデザインリソース／デザインパターン

2012年4月18日水曜日