Japanese feliratok

← 05-15 Nick Butcher on Small Screens

05-15 Nick Butcher on Small Screens

Beágyazókód kérése
5 Languages

Showing Revision 2 created 12/20/2014 by Udacity.

  1. 最後の制約は画面が小さいことです
  2. 当たり前だと思われるかもしれませんが
  3. 小さな画面に合わせられないのです
  4. しかし2つの手法を使えば
  5. 小さなUIに最適化できるようになります
  6. コンビネーションとリフローという手法です
  7. Androidの開発者ニック・ブッチャーに
  8. コンビネーションとリフローの方法について
    聞きました
  9. AndroidはフリーサイズのOSではありません
  10. スマートフォン、タブレット、テレビに合わせて
    様々な大きさや形になります
  11. Androidはその多様性を受け入れ
    処理するツールを提供するように
  12. 最初から作られています
  13. そもそも最初から異なるデバイスに対応して
  14. UIを拡大縮小できるようになっています
  15. しかしこの方法には限界があります
  16. この方法に依存することで
    陥りやすい落とし穴について説明し
  17. 別の対処法をいくつかご紹介します
  18. 私たちがよく目にする最初の問題は
  19. 1行の長さが長すぎてしまうことです
  20. このアプリではテキストと画像は
    デバイスの画面の幅になっています
  21. 小さいサイズのデバイスでは
    これで問題ないでしょう
  22. しかしあるサイズ以上になると見にくくなります
  23. 特に1行の文字数は快適に読み続けられるように
  24. 45~75文字にしなければなりません
  25. そうすればユーザは簡単に目を通すことができます
  26. このアプリでは明らかに1行が長すぎます
  27. 次によく目にする問題は
    バランスの悪いコンテンツです
  28. この例では多くのコンテンツが
    画面の左上に集まっています
  29. そして画面の右側には大きな空白が広がっています
  30. これはとてもバランスが悪く
  31. アプリが最適化されていない印象を与えます
  32. よく見かける最後の問題は
  33. 機会をほとんど逃してしまうことで
  34. スペースが最大限活用されていないことです
  35. この例は写真をたくさん表示するアプリですが
  36. 小さなサムネイルが片側にかたまっています
  37. きれいで大きな画面が活用されていないのは
    非常に残念なことです
  38. 利用できるスペースが余っています
  39. これは避けなければなりません
  40. これらの問題はスケーリングに依存すると
    陥りやすい落とし穴です
  41. これらの問題に対処するためには
  42. レスポンシブモバイルデザインを採用し
    デバイスの特性に対応します
  43. そのための手法が3つあります
  44. 1つ目は単純にコンビネーションの手法です
  45. もし余分なスペースがある場合
  46. 別々の画面にあるものを1つの画面にまとめ
    スペースを埋めます
  47. この例は典型的なマスタ/詳細ビューで
  48. スマートフォンの画面が2つに分かれています
  49. リストの項目をクリックすると詳細が表示されます
  50. 十分な幅を持った大きなデバイスなら
  51. 両方を1画面に表示できるでしょう
  52. これで1行が長すぎる問題を回避して
  53. 画面スペースをより有効に活用できます
  54. 2つ目はマクロリフローと呼ばれる手法です
  55. アプリの主要な構成要素を画面上で
  56. リフローしたり再配置したりして
    スペースをより有効に活用します
  57. この例では単純に
    大きなヘッダ画像や本文を動かして
  58. 垂直に並べる代わりに
  59. 水平に並べ替えています
  60. また大画面では画像のサイズを大きくして
  61. 画像が引き立つようにします
  62. 同時に横画面表示の場合に
  63. 1行が長くなりすぎるのを回避できます
  64. 異なるサイズのデバイスだけでなく
  65. 同じデバイスで画面の向きを変更する時にも
    役に立つ手法です
  66. 最後にご紹介するのは
  67. マイクロリフローと呼ばれる手法です
  68. デザイン内の個々の構成要素に焦点を当て
  69. それぞれの要素が自分で
    与えられたスペースに最適化するようにします
  70. その例をいくつかご紹介します
  71. 左のリストビューのアプリでは
  72. 十分なスペースが与えられると
  73. 1行が長すぎたり
    バランスの悪い画面になったりします
  74. そこでそうならないように個々のリスト項目に
  75. スペースの量と表示方法を設定しておきます
  76. 特定のサイズつまり
    そのデバイスで有効な幅を超えると
  77. 表示の仕方が変わります
  78. リストビューからグリッドビューに変わり
  79. 画面のスペースが埋まります
  80. 2つ目の例はコンテンツを増やせない場合に
  81. マージンポイントを挿入することができます
  82. 右の例のフォーム型アプリでは
  83. スマートフォンより大きく
    特定のサイズを超えていて
  84. コンテンツをこれ以上表示できない場合
  85. マージンポイントが挿入されるので
  86. 1行が長すぎたりバランスが悪くなったりしません
  87. ニックが小さな画面向けのUI手法を
    紹介してくれましたが
  88. 小さな画面はUI以外にも影響します
  89. 実際アプリのUXにも非常に影響を及ぼします
  90. 単にWebやデスクトップのアプリを画面に合わせ
    小さくするわけではありません
  91. フローをスマートフォンに
    最適化する必要があります
  92. その方法は?
  93. ワイヤーフレームです