デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」

690 views
681 views

Published on

Designing Interface (2e) Study Group http://www.facebook.com/groups/di2e.study/

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
690
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

デザイニング・インターフェイス勉強会 第10章「モバイルへの対応」

  1. 1. 下北沢オープンソース Cafeデザイニング・インターフェース勉強会 第10章 - モバイルへの対応 安川 要平 / @yasulab https://www.facebook.com/groups/di2e.study/
  2. 2. デザイニング・インターフェース 第2版 パターンによる実践的インタラクションデザイン http://amzn.to/LfZuHZ
  3. 3. 今日の発表について @yasulabUIデザインを勉強したいエンジニア勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
  4. 4. 第10章で学ぶことモバイル用サイト制作に関する環境的な課題およびアプローチについて理解する.また,その具体的なデザインパターンについて学ぶ.
  5. 5. モバイルサイト制作に関する課題・アプローチ ついて学ぶ.モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
  6. 6. モバイルサイト制作に関する課題・アプローチ ついて学ぶ.モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
  7. 7. モバイル向けデザインの6つの課題1. ちっぽけな画面サイズ 4. テキスト入力の難しさ2. さまざまな画面サイズ 5. 物理的な厳しい環境3. タッチスクリーン 6. ソーシャルな影響と 限られた注意力
  8. 8. 1. ちっぽけな画面サイズ贅沢品を並べる余裕はない。本質に関わらない部分はきっぱり捨てるか、サイトの奥にしまっておこう。
  9. 9. 2. さまざまな画面の幅ページをスクロールしながら見るのは面倒ではないが,平均的な画面の横幅については十分に考える必要がある. cf. Effective Design Multiple Screen Size http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  10. 10. 3. タッチスクリーン“小さなターゲットに指で正確に触れるのは大変だ.リンクやボタンは楽にタッチできるくらい大きくしよう.”
  11. 11. 4. テキスト入力の難しさ ≧タッチスクリーンのキーボード入力を好むユーザは少ない (*).積極的に Auto Completion や Good Defaults を採用しよう. * 日本では、逆にモバイル端末のキーボード入力を好むユーザの方が多いかもしれない。
  12. 12. 5. 物理的に厳しい環境モバイルデバイスはあらゆる場所で使われている.光量や周囲の騒音の違い, 振動の影響について考えよう. 大事なことは、ミスを許容して、ミスを簡単に直せるようにデザインすること.
  13. 13. 6. ソーシャルな影響と限られた注意力モバイルユーザは,大抵, 他のことをしながらサイトを見る.簡単に素早く, 中断/再開が出来て, 一目で分かるようにする.
  14. 14. モバイル向けデザインの6つの課題1. ちっぽけな画面サイズ 4. テキスト入力の難しさ2. さまざまな画面サイズ 5. 物理的な厳しい環境3. タッチスクリーン 6. ソーシャルな影響と 限られた注意力
  15. 15. モバイル向けデザインへの5つのアプローチ1. モバイルユーザには、実際のところ何が必要なのか?2. 無駄を減らしてサイトやアプリの本質を示す.
  16. 16. モバイル向けデザインへの5つのアプローチ1. モバイルユーザには、実際のところ何が必要なのか?2. 無駄を減らしてサイトやアプリの本質を示す.3. 可能ならば、デバイスのハードウェアを利用する.4. コンテンツをリニアライズする.5. よく実行される一連のインタラクションを最適化する.
  17. 17. 参考にすべき事例JetBlue RuthsChris Boston Fidelity
  18. 18. モバイルサイト制作に関する課題・アプローチ ついて学ぶ.モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
  19. 19. モバイルサイト制作に関する課題・アプローチ ついて学ぶ.モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
  20. 20. モバイルサイト/アプリのデザインパターン1. Vertical Stack 7. Generous Borders2. Filmstrip 8. Text Clear Button3. Touch Tools 9. Loading Indicators4. Bottom Navigation 10.Richly Connected Apps5. Thumbnail-and-Text List 11.Streamlined Branding6. Infinite List
  21. 21. モバイルサイト/アプリのデザインパターン1. Vertical Stack 7. Generous Borders2. Filmstrip 8. Text Clear Button3. Touch Tools 9. Loading Indicators4. Bottom Navigation 10.Richly Connected Apps5. Thumbnail-and-Text List 11.Streamlined Branding6. Infinite List
  22. 22. 1. Vertical Stack / 縦方向のスタック ESPN / Google News / REI コンテンツを縦1カラムで構成する. 横並びの要素を極力使用しない.
  23. 23. モバイルサイト/アプリのデザインパターン1. Vertical Stack 7. Generous Borders2. Filmstrip 8. Text Clear Button3. Touch Tools 9. Loading Indicators4. Bottom Navigation 10.Richly Connected Apps5. Thumbnail-and-Text List 11.Streamlined Branding6. Infinite List
  24. 24. 2. Filmstrip / 映写スライド iPhone の天気アプリ トップレベルの複数のページを横並びにして,左右のスワイプ操作で1度に1ページずつ見せるワザ
  25. 25. 3. Touch Tools / タッチ表示ツール iPhone Image Viewer 画面タッチやキーを押す操作に応じて, ツールをオーバーレイで表示するワザ
  26. 26. モバイルサイト/アプリのデザインパターン1. Vertical Stack 7. Generous Borders2. Filmstrip 8. Text Clear Button3. Touch Tools 9. Loading Indicators4. Bottom Navigation 10.Richly Connected Apps5. Thumbnail-and-Text List 11.Streamlined Branding6. Infinite List
  27. 27. 4. Bottom Navigation / 下部ナビゲーション At the bottom of Amazon.com Google Image Search グローバルナビゲーションを, ページの一番下(スクロールしないと見えない)に配置するワザ
  28. 28. モバイルサイト/アプリのデザインパターン1. Vertical Stack 7. Generous Borders2. Filmstrip 8. Text Clear Button3. Touch Tools 9. Loading Indicators4. Bottom Navigation 10.Richly Connected Apps5. Thumbnail-and-Text List 11.Streamlined Branding6. Infinite List
  29. 29. 5. Thumbnail-and-Text List / サムネイルとテキストのリスト Yahoo! News Boston.com Mashable 選択可能な項目のリストを, 項目ごとに サムネイル画像+テキストで表示するワザ
  30. 30. 5. Thumbnail-and-Text List / サムネイルとテキストのリスト iPhone App Store 選択可能な項目のリストを, 項目ごとに サムネイル画像+テキストで表示するワザ
  31. 31. 6. Infinite List / 無限リスト Facebook iTunes長いリストの一番下に,さらに多くの項目を読み込んで リストに追加するためのボタンを配置するワザ
  32. 32. モバイルサイト/アプリのデザインパターン1. Vertical Stack 7. Generous Borders2. Filmstrip 8. Text Clear Button3. Touch Tools 9. Loading Indicators4. Bottom Navigation 10.Richly Connected Apps5. Thumbnail-and-Text List 11.Streamlined Branding6. Infinite List
  33. 33. 7. Generous Borders / ゆとりのあるボーダー Best Westernタッチスクリーン搭載デバイスで、ボタンやリンク、その他のタップ可能な コントロールの周囲の感覚や余白を広く持たせるワザ
  34. 34. 8. Text Clear Button / テキスト消去ボタン Safari URI Input ボタンを1回タップする操作によって, テキストフィールドの内容を消去するワザ
  35. 35. 9. Loading Indicators / 読み込み中のインジケーター iPhone の株価アプリ ページまたはページ内の要素を読み込むときに, それが表示される場所でプログレス表示を行うワザ
  36. 36. 10. Richly Connected Apps / 豊富なアプリ連携 Freedom Trail 電話機能や地図,ブラウザといった他のアプリを直接呼び出すリンクを 配置して,ユーザの現在の状況に見合ったデータを予備入力するワザ
  37. 37. 11. Streamlined Branding / スリム化したブランディング Mobile vs. Website of JetBlue 組織のロゴや色,その他のブランディング要素を, 素早く読み込める状態にして再利用するワザ
  38. 38. モバイルサイト/アプリのデザインパターン1. Vertical Stack 7. Generous Borders2. Filmstrip 8. Text Clear Button3. Touch Tools 9. Loading Indicators4. Bottom Navigation 10.Richly Connected Apps5. Thumbnail-and-Text List 11.Streamlined Branding6. Infinite List
  39. 39. モバイルサイト制作に関する課題・アプローチ ついて学ぶ.モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.
  40. 40. 第10章で学ぶことモバイル用サイト制作に関する環境的な課題およびアプローチについて理解する.また,その具体的なデザインパターンについて学ぶ.
  41. 41. 今日の発表について @yasulabUIデザインを勉強したいエンジニア勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
  42. 42. 下北沢オープンソース Cafeデザイニング・インターフェース勉強会 第10章 - モバイルへの対応 安川 要平 / @yasulab https://www.facebook.com/groups/di2e.study/

×