スマホデザインパターン なう
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 16,191 views

「Android UI勉強会」の矢野さんのスライドです。動画はこちら。

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

Statistics

Views

Total Views
16,191
Views on SlideShare
15,031
Embed Views
1,160

Actions

Likes
95
Downloads
236
Comments
0

15 Embeds 1,160

http://w3q.jp 632
http://designgineer.wordpress.com 166
http://memonob.tumblr.com 165
https://cybozulive.com 119
http://storify.com 19
https://twitter.com 17
http://s.deeeki.com 14
http://sc.dotbranch.com 7
http://ss.dotbranch.com 5
http://static.ak.facebook.com 5
https://si0.twimg.com 5
http://twitter.com 2
https://www.chatwork.com 2
https://twimg0-a.akamaihd.net 1
http://mym.corp.yahoo.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • スマホデザインパターン なう なう バイドゥ株式会社プロダクト事業部 矢野りん 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日水曜日
  • 特徴と用途 • 用途 カテゴリーを一覧表示する • 特徴 たくさん機能やコンテンツがある場合把握 しやすくなる • 注意点 アプリを使う前に1画面挟むのがユーザー にいやがられることも 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日水曜日
  • 特徴と用途 • 用途 分野のちがう情報を切り替える • 特徴 よく使われていて慣れやすい • 注意点 ラベルが必要なので、選択肢を3つ程度 にしぼる必要がある 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日水曜日
  • 特徴と用途 • 用途 1つの対象に複数の操作をひもづける • 特徴 画面遷移が減らせる • 注意点 ユーザーがその機能の存在に気付かないことが あったりする 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デザインリソース/ライブラリ関連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/ 422012年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 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日水曜日