Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
坂本貴史
HCD-Net Seminar - Service Design #6
2014.11.15
UI Patterns for Smartphone
by Eric E Castro
By placeit
必要十分な表現に留める
ちら見しやすいようにデザインする
階層を深くしない
自然な形で接点を見せる
途中で操作を止めても同じ事ができる
時間軸を使って情報を整理する
モバイルデザインのヒント
画面の小ささ 利用環境の違い
PCとは異なる、2つの前提
87.2%
4.0%
D2C, マルチデバイス利用動向調査, 2013/05
外出先や移動中での利用
Pocket Trend, 2011
iPhoneの利用時間帯
早朝 通勤
帰宅時 就寝
自宅
© UX INSPIRATION!
http://uxxinspiration.com/2014/02/ux-timeline/
モバイルにおけるデザインパターン
デバイスエコシステム IAパターン
デバイス単位(PCとタブレットと
モバイルなど)の組み合わせにより、
利用順序や使い方を定義します
コンテンツ単位(画面やファイル)
の組み合わせにより、画面フローや
コンテ...
一貫性の保持
状態の同期
画面共有
デバイス間の移動
相互補完
同時発生
デバイスエコシステム
1
2
3
4
5
6
一貫性の保持
どのデバイスでも同一の体験ができること
例)Evernote ではどのデバイスからでも一貫したデザインで利用体験が可能です。
状態の同期
どのデバイスでも同じ状態になるよう、コンテンツを同期すること
例)アマゾン Kindle ではどのデバイスからでも、続きのページから読書を再開することができます。
画面共有
複数のデバイスで同一のコンテンツを共有すること
例)複数のデバイスの画面をつなげてみることで、1つの画像や映像を見せることが可能。
デバイス間の移動
ある利用体験を、別のデバイスに移動すること
例)Google の Chromecast では iPhone の動画をテレビで利用が可能です。
相互補完
各デバイスが特定の役割を担い、それぞれの役割を補うこと
例)1つのタブレットでゲームボードを映し、プレイヤーは個別のスマホから操作をすることができます。
同時発生
デバイス別に同時発生する状況を、つながった体験にすること
例)スマホで試合結果を予想しながら、テレビでサッカーの試合中継を観ることができます。
First Time User Experiences
http://firsttimeux.tumblr.com/
ハブ&スポーク型
マトリョーシカ型
タブビュー型
弁当箱型・ダッシュボード型
フィルタビュー型
IAパターン
階層型・ピラミッド型1
2
3
4
5
6
階層型
Vimeo
階層型/ピラミッド型
インデックスページとサブページといった親子関係を持つ構造
ハブ&スポーク型
Vimeo
ハブ&スポーク型
中央があり、そこから離れタスクを実行し、また中央に戻る構造
マトリョーシカ型
Vimeo
マトリョーシカ型
直線的にタスクをリードする方法、入れ子関係の構造
タブビュー型
Vimeo
タブビュー型
同一レベルのコンテンツを並列に表示する方法
弁当箱
Vimeo
弁当箱型/ダッシュボード型
関連コンテンツを一目で表示する方法
フィルタビュー型
Vimeo
フィルタビュー型
同一データを多面的な検索結果で表示する方法
UX archive
http://uxarchive.com/
ナビゲーション
フォーム
テーブル・リスト
検索・ソート・フィルタ
ツール
グラフ
誘導
フィードバック・アフォーダンス
ヘルプ
アンチパターン
UIパターン
1
2
3
4
5
6
7
8
9
10
ナビゲーション
メイン画面やそのメニュー表示パターン
フォーム
サインインや登録、チェックアウトなどの表示パターン
テーブル・リスト
表やリスト、画像付きリストの表示パターン
検索・ソート・フィルタ
テキスト検索とその候補、並び替えや検索条件での絞り込み表示パターン
ツール
ツールバーやアクションボタンの表示パターン
グラフ
棒グラフや円グラフ、データをもとにしたグラフ表示パターン
誘導
モーダルウィンドウやバルーン、チップス表示パターン
フィードバック・アフォーダンス
レスポンスの表示でエラーや確認の表示パターン
ヘルプ
ガイドやコーチ、ツアーなどの表示パターン
アンチパターン
パターンに当てはまらない表示パターン
Pttrns - Mobile User Interface Patterns
http://www.pttrns.com/
導入画面
トップ画面
一覧画面
詳細画面
入力・操作画面
アプリの主要画面パターン
スプラッシュ/ウォークスルー/コーチマーク/エンプティステート
ポータル型/タイムライン型/ストア型
検索結果/ギャラリー/お知らせ
ビューア/記事/マップ/プ...
iOS Human Interface Guideline
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
Android Design
https://developer.android.com/design/
ユーザビリティテストで問題点を抽出し修正すること (治療)
に依存しすぎるのではなく、
設計/開発の段階でユーザビリティ上の問題を
あらかじめ潰しておくこと (予防) が大事
Usability testing myths
Rolf Molich
Thank you
Let's enjoy today
@bookslope
bookslope@gmail.com
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
Upcoming SlideShare
Loading in …5
×

"UI Patterns for Smartphone" HCD-Net SD #6 2014

1,485 views

Published on

HCD-Net 教育セミナー「サービスデザイン方法論」の第6回で講義「スマホのUIパターン」のスライドです。

HCD-Net | 2014年度 サービスデザイン方法論(全6回) 第5回開催 見学者枠満席
http://www.hcdnet.org/event/post_37.php

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

"UI Patterns for Smartphone" HCD-Net SD #6 2014

  1. 1. 坂本貴史 HCD-Net Seminar - Service Design #6 2014.11.15 UI Patterns for Smartphone by Eric E Castro
  2. 2. By placeit
  3. 3. 必要十分な表現に留める ちら見しやすいようにデザインする 階層を深くしない 自然な形で接点を見せる 途中で操作を止めても同じ事ができる 時間軸を使って情報を整理する モバイルデザインのヒント
  4. 4. 画面の小ささ 利用環境の違い PCとは異なる、2つの前提
  5. 5. 87.2% 4.0% D2C, マルチデバイス利用動向調査, 2013/05 外出先や移動中での利用
  6. 6. Pocket Trend, 2011 iPhoneの利用時間帯 早朝 通勤 帰宅時 就寝 自宅
  7. 7. © UX INSPIRATION! http://uxxinspiration.com/2014/02/ux-timeline/
  8. 8. モバイルにおけるデザインパターン デバイスエコシステム IAパターン デバイス単位(PCとタブレットと モバイルなど)の組み合わせにより、 利用順序や使い方を定義します コンテンツ単位(画面やファイル) の組み合わせにより、画面フローや コンテンツの表示順序を定義します コンポーネント単位の組み合わせ により、表示スタイルや表示方法(振 る舞い)などを定義します UIパターン
  9. 9. 一貫性の保持 状態の同期 画面共有 デバイス間の移動 相互補完 同時発生 デバイスエコシステム 1 2 3 4 5 6
  10. 10. 一貫性の保持 どのデバイスでも同一の体験ができること 例)Evernote ではどのデバイスからでも一貫したデザインで利用体験が可能です。
  11. 11. 状態の同期 どのデバイスでも同じ状態になるよう、コンテンツを同期すること 例)アマゾン Kindle ではどのデバイスからでも、続きのページから読書を再開することができます。
  12. 12. 画面共有 複数のデバイスで同一のコンテンツを共有すること 例)複数のデバイスの画面をつなげてみることで、1つの画像や映像を見せることが可能。
  13. 13. デバイス間の移動 ある利用体験を、別のデバイスに移動すること 例)Google の Chromecast では iPhone の動画をテレビで利用が可能です。
  14. 14. 相互補完 各デバイスが特定の役割を担い、それぞれの役割を補うこと 例)1つのタブレットでゲームボードを映し、プレイヤーは個別のスマホから操作をすることができます。
  15. 15. 同時発生 デバイス別に同時発生する状況を、つながった体験にすること 例)スマホで試合結果を予想しながら、テレビでサッカーの試合中継を観ることができます。
  16. 16. First Time User Experiences http://firsttimeux.tumblr.com/
  17. 17. ハブ&スポーク型 マトリョーシカ型 タブビュー型 弁当箱型・ダッシュボード型 フィルタビュー型 IAパターン 階層型・ピラミッド型1 2 3 4 5 6
  18. 18. 階層型 Vimeo
  19. 19. 階層型/ピラミッド型 インデックスページとサブページといった親子関係を持つ構造
  20. 20. ハブ&スポーク型 Vimeo
  21. 21. ハブ&スポーク型 中央があり、そこから離れタスクを実行し、また中央に戻る構造
  22. 22. マトリョーシカ型 Vimeo
  23. 23. マトリョーシカ型 直線的にタスクをリードする方法、入れ子関係の構造
  24. 24. タブビュー型 Vimeo
  25. 25. タブビュー型 同一レベルのコンテンツを並列に表示する方法
  26. 26. 弁当箱 Vimeo
  27. 27. 弁当箱型/ダッシュボード型 関連コンテンツを一目で表示する方法
  28. 28. フィルタビュー型 Vimeo
  29. 29. フィルタビュー型 同一データを多面的な検索結果で表示する方法
  30. 30. UX archive http://uxarchive.com/
  31. 31. ナビゲーション フォーム テーブル・リスト 検索・ソート・フィルタ ツール グラフ 誘導 フィードバック・アフォーダンス ヘルプ アンチパターン UIパターン 1 2 3 4 5 6 7 8 9 10
  32. 32. ナビゲーション メイン画面やそのメニュー表示パターン
  33. 33. フォーム サインインや登録、チェックアウトなどの表示パターン
  34. 34. テーブル・リスト 表やリスト、画像付きリストの表示パターン
  35. 35. 検索・ソート・フィルタ テキスト検索とその候補、並び替えや検索条件での絞り込み表示パターン
  36. 36. ツール ツールバーやアクションボタンの表示パターン
  37. 37. グラフ 棒グラフや円グラフ、データをもとにしたグラフ表示パターン
  38. 38. 誘導 モーダルウィンドウやバルーン、チップス表示パターン
  39. 39. フィードバック・アフォーダンス レスポンスの表示でエラーや確認の表示パターン
  40. 40. ヘルプ ガイドやコーチ、ツアーなどの表示パターン
  41. 41. アンチパターン パターンに当てはまらない表示パターン
  42. 42. Pttrns - Mobile User Interface Patterns http://www.pttrns.com/
  43. 43. 導入画面 トップ画面 一覧画面 詳細画面 入力・操作画面 アプリの主要画面パターン スプラッシュ/ウォークスルー/コーチマーク/エンプティステート ポータル型/タイムライン型/ストア型 検索結果/ギャラリー/お知らせ ビューア/記事/マップ/プロダクト サインアップ/投稿/カメラ撮影/設定 これらの組み合わせから画面フローを導き出すことができる
  44. 44. iOS Human Interface Guideline https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
  45. 45. Android Design https://developer.android.com/design/
  46. 46. ユーザビリティテストで問題点を抽出し修正すること (治療) に依存しすぎるのではなく、 設計/開発の段階でユーザビリティ上の問題を あらかじめ潰しておくこと (予防) が大事 Usability testing myths Rolf Molich
  47. 47. Thank you Let's enjoy today @bookslope bookslope@gmail.com

×