Japanese 字幕

← 07-20 Responsive Design

埋め込みコードを取得する
10言語

Showing Revision 2 created 04/26/2015 by Udacity.

  1. MainActivityとDetailActivityの
    ワイヤーフレームができました
  2. ではタブレット上ではどう見えるでしょう
  3. スマートフォン用のUIをタブレットで開くと
  4. 空白のスペースが増えてしまいます
  5. 役立つ情報を見やすく表示して
    タブレットの大きい画面を有効に使いましょう
  6. 例えば詳しい情報をタップせずに
    同じ画面上で見られるようにできないでしょうか
  7. また1週間分の予報リストを見る時も
  8. 視線を横方向に大きく動かすのは大変です
  9. 複数のコンテンツを読む場合は
  10. 表示の幅が狭いほうが素早く目を通せます
  11. このような考え方は
    レスポンシブデザインの一部です
  12. レスポンシブデザインとは
    様々な画面サイズを考慮してデザインすることです
  13. しかしタブレットのような大きい画面に
    対応するには どうすればいいのでしょうか
  14. マルチペインレイアウトを
    うまく活用した例をお見せしましょう
  15. Androidデザインガイドに
    マルチペインレイアウトが紹介されています
  16. 例えば複数のビューを1つに結合する方法を使い
  17. 電話帳アプリの連絡先リストと個人の詳細ページを
  18. タブレットでは横に並べています
  19. これはマスター/ディテールフローと呼ばれ
  20. 左がマスター列で右が詳細ペインとなります
  21. 設定アプリでは列幅が画面の幅に合わせて変化し
  22. カレンダーアプリではパネルの配置が
  23. 縦置きなら縦に 横向きなら横に並びます
  24. 他にもいくつか例が載っていますので
  25. タブレット用のデザインや
    レスポンシブデザインの概要について
  26. 興味があれば下のリンクを確認してください
  27. このコースでは
    まずスマートフォン用のUIを学び
  28. 次にタブレットについて学びますが
  29. 実際には最初から両方を考慮します
  30. アプリを構築する際は
    スマートフォン用アプリを完成させてから
  31. タブレット用のUIを考えても
    あまりうまくはいきません
  32. タブレット用のUIがスマートフォン用の
    デザインに影響を与えるからです