Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

ガイドラインからみたアプリUI〜iPhone用とAndroid用〜

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 103 Anzeige

ガイドラインからみたアプリUI〜iPhone用とAndroid用〜

Herunterladen, um offline zu lesen

京都まゆまろ杯 第1回スマホアプリコンテスト連動イベントでの発表資料
アプリのガイドラインを抜粋し、それぞれのアプリでどう展開するかのベーシックな知識を説明

京都まゆまろ杯 第1回スマホアプリコンテスト連動イベントでの発表資料
アプリのガイドラインを抜粋し、それぞれのアプリでどう展開するかのベーシックな知識を説明

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie ガイドラインからみたアプリUI〜iPhone用とAndroid用〜 (20)

Aktuellste (20)

Anzeige

ガイドラインからみたアプリUI〜iPhone用とAndroid用〜

  1. 1. ガイドラインからみたアプリUI ∼iPhone用とAndroid用∼ 秋葉ちひろ(@tommmmy) 2013.2.27 京都まゆまろ杯 第1回スマホアプリコンテスト
  2. 2. 秋葉ちひろ(@tommmmy) Baidu Japan Inc デザイナー / アートディレクター • Web制作関連 • Androidアプリ制作関連 • インターフェイス設計
  3. 3. 日本語入力キーボード Simeji Japanese Input Method Editor Simeji Simeji
  4. 4. Android App Designs 勉強会 デザイナーがコードから読み解く、Android アプリのデザインの幅を広げるコツとTips Design XML Android App Designsについて ¦ Android App Designs
  5. 5. 約 65 名 約 80 名 約 60 名 約 90 名
  6. 6. デザイナーズハック 「技術にしばられないでデザインを 考えていく」コミュニティ 【身の回りのデザインを観察・分析して発表しようの会】 絶賛募集中 デザイナーズハック
  7. 7. ガイドラインからみたアプリUI ∼iPhone用とAndroid用∼
  8. 8. iOSヒューマンインターフェイス ガイドライン 日本語ドキュメント - Apple Developer
  9. 9. Android Design Design ¦ Android Developers
  10. 10. グラフィックのちがい
  11. 11. • 美しいグラフィック • 魅力的なグラフィック • リアルな○○
  12. 12. • Provide sensible, beautiful defaults, but also consider fun Design Principles ¦ Android Developers
  13. 13. 基本となる知識 ∼各種パーツ∼
  14. 14. Status bar Navigation bar Page title Tab bar
  15. 15. Status bar Navigation bar …階層の移動 Page title Tab bar …異なるサブタスク間、  ビュー間、またはノード間  を切り替える機能
  16. 16. レシピ検索No.1/料理レシ ピ載せるなら クックパッド
  17. 17. ミイル(miil) Petap / ペタップ
  18. 18. Tool bar
  19. 19. Tool bar 画面やビューのオブジェクトに関連した アクションを実行するコントロール
  20. 20. フラグを立てる 削除 アーカイブ 返信 新規作成
  21. 21. Segmented control
  22. 22. Segmented control 密接に関連しているが、相互に排他 的な選択肢を提供するために使用
  23. 23. foursquare Twitter
  24. 24. Holo Light Holo Dark Holo Light with dark action bars Themes ¦ Android Developer
  25. 25. Color ¦ Android Developers
  26. 26. Action bar
  27. 27. Action buttons App icon View control Action overflow (only in softkey device) view-switching - drop-down - tab control - non-interactive contents Action Bar ¦ Android Developers
  28. 28. Action bar
  29. 29. Action bar 新規作成 フォルダに入れる タグをつける Top bar 添付 削除
  30. 30. Action bar Top bar Bottom bar (Split action bar)
  31. 31. App Name [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds 更新 [title] mail title - adfgg gfh s 開封済みにする fdgs lkgafjdgkdo ofgd kfds お気に入り [title] mail title - adfgg gfh s 重要マークを外す fdgs lkgafjdgkdo ofgd kfds ミュート [title] mail 迷惑メールを報告s title - adfgg gfh fdgs lkgafjdgkdo ofgd kfds フィッシングを報告
  32. 32. App Name [title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds teh 開封済みにする adfgadf lgfhk lkghs fd fdgajk og a kjsfglk j ka lgjad kjdgf oweo お気に入り 重要マークを外す [title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds teh adfgadf lgfhk lkghs fd fdgajk og a kjsfglk j ミュートkjdgf oweo ka lgjad 迷惑メールを報告 [title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds teh adfgadf lgfhk lkghs fd fdgajk og a kjsfglk j フィッシングを報告 ka lgjad kjdgf oweo [title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds teh adfgadf lgfhk lkghs fd fdgajk og a kjsfglk j ka lgjad kjdgf oweo
  33. 33. App Name [title] mail title - adfgg gfh s 重要マークを外す fdgs lkgafjdgkdo ofgd kfds ミュート [title] mail title - adfgg gfh s 迷惑メールを報告 fdgs lkgafjdgkdo ofgd kfds フィッシングを報告 [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds [title] mail title - adfgg gfh s fdgs lkgafjdgkdo ofgd kfds
  34. 34. アクションボタンは、マルチデバイス 対応のために、ものすごく考えられた 結果のもの でもあまり 使われていない…
  35. 35. Galaxy Nexus Xperia Z Galaxy S III Galaxy S II ハードキー INFOBAR A02 ソフトキー
  36. 36. Action bar Top bar Bottom bar (Split action bar)
  37. 37. Top bar
  38. 38. Top bar Tab bar
  39. 39. Drawer • 画面全体が横方向(主に右)にずれ、左から メニューが出てくるパターン • Facebookに代表される
  40. 40. App Name Home tommmmy あーたのしかっ たー。 Profile tommmmy あーたのしかっ Favorite たー。 Message tommmmy あーたのしかっ たー。 Event tommmmy あーたのしかっ Friends たー。 tommmmy あーたのしかっ たー。 tommmmy あーたのしかっ たー。 tommmmy あーたのしかっ たー。
  41. 41. App Name Home tommmmy あーたのしかっ たー。 Profile tommmmy あーたのしかっ Favorite たー。 Message tommmmy あーたのしかっ たー。 Event tommmmy あーたのしかっ Friends たー。 tommmmy あーたのしかっ たー。 tommmmy あーたのしかっ たー。 tommmmy あーたのしかっ たー。
  42. 42. Ice B r e a k ∼プラットフォームの特徴∼
  43. 43. Ice B r e a k デバイスの向きを変えられる • iPhoneおよびiPod touchでは、ホーム(Home)画 面は常に縦長の表示であり、ホーム(Home)ボタン は画面の一番下に表示されます。このため、ユーザ はiPhoneアプリケーションが、デフォルトではこ の向きで起動することを期待します。 • iPadでは、ホーム(Home)画面はすべての向きで表 示されます。そのため、ユーザはデバイスを現在使 用している向きでiPadアプリケーションが起動す ることを期待する傾向があります。 p.12
  44. 44. Ice B r e a k デバイスの向きを変えられる 京都まゆまろ杯 第1回 京都まゆまろ杯 第1回 スマホアプリコンテスト スマホアプリコンテスト 京都まゆまろ杯 第1回 スマホアプリコンテスト p.74
  45. 45. Ice B r e a k 画面上のヘルプは最小限 • iOSデバイスと標準で組み込まれているアプリケー ションは直感的で使いやすいため、画面上でヘルプ を開いて使いかたを読む必要がありません。 p.15
  46. 46. タップエリアの大きさ
  47. 47. タップエリアの大きさ 44point 48dp 7mm
  48. 48. タップエリアの大きさ
  49. 49. タッチ操作の設計 (Windows ストア アプリ) (Windows)
  50. 50. タッチ操作の設計 (Windows ストア アプリ) (Windows)
  51. 51. Galaxy Note Nexus 7 Galaxy Tab 10.1 800x1280 800x1280 800x1280 xhdpi hdpi mdpi XWGA XWGA XWGA 400dp 533dp 800dp 棚  田中  田奈  たな  七夕  タナ 田中さん  棚板  田辺  掌  田中れいな あ か さ 棚  田中  田奈  たな  七夕  タナ  田中さん た な は 棚板  田辺  掌  田中れいな  たなか  棚田  棚卸 ま や ら あ か さ 小 わ ?! た な は ま や ら 小 わ ?! 棚  田中  田奈  たな  七夕  タナ  田中さん  棚板  田辺  掌 田中れいな  たなか  棚田  棚卸  棚橋  田無  棚卸し  タナカ  たなご あ か さ た な は ま や ら 小 わ ?! 48dpの大きさ
  52. 52. 48dp Rhythm recommended target sizes (7-10 mm) Metrics and Grids ¦ Android Developers
  53. 53. タップするボタンの大きさは、 実装後に定規で測ろう 端末で確認するの がいちばん!
  54. 54. タップするボタンの大きさは、 実装後に定規で測ろう 端末で確認するの がいちばん!
  55. 55. アニメーションの意味 ● ユーザにフィードバックを与える ● リアルさを高める
  56. 56. ユーザにフィードバックを与える アニメーションは、ユーザのタスクの 妨げになったり、作業を遅らせたりし ない限り、効果的にやり取りするため の良い方法です。 p.74
  57. 57. ユーザにフィードバックを与える ● ステータスの伝達 ● 有用なフィードバックの提供 ● 直接操作の感覚を高める ● ユーザのアクションの結果を視覚化する   支援 p.74
  58. 58. リアルさを高める 分かりやすいアニメーションは、アプリ ケーションに具体的で物理的なリアルさ を与え、それに時間を費やしたいという ユーザの印象を強めます。 p.69
  59. 59. • iOSは今までもこれからも • Androidはこれからが勝負(4.0以降)
  60. 60. Name name 10hours public It’s so fun to study design. What do you think it complecated? Name name 10hours public It’s so fun to study design. What do you think it complecated?
  61. 61. Name name 10hours public It’s so fun to study design. What do you think it complecated?
  62. 62. Name name 10hours public It’s so fun to study design. What do you think it complecated?
  63. 63. Name name 10hours public It’s so fun to study design. What do you think it complecated? Name name 10hours public It’s so fun to study design. What do you think it complecated?
  64. 64. Name name 10hours public It’s so fun to study design. What do you think it complecated?
  65. 65. Name name 10hours public It’s so fun to study design. What do you think it complecated?
  66. 66. Name name 10hours public It’s so fun to study design. What do you think it complecated?
  67. 67. アニメーションの意味 ● ユーザにフィードバックを与える ● リアルさを高める 気持ちよさを追求
  68. 68. アニメーションを工夫しよう • 過度にやりすぎない • まったくないのも仏頂面 気持ちいいのは どこだろう?
  69. 69. Pure Android ● 他のプラットフォームのUIを持ち込んでは   いけない Pure Android ¦ Android Developers
  70. 70. Don't mimic UI elements from other platforms 他のOSのUI要素をまねしてはいけない
  71. 71. Don't carry over platform-specific icons 他のOSのアイコンをもちこんではいけない
  72. 72. Don't use bottom tab bars タブを下に配置してはいけない
  73. 73. Don't use labeled back buttons on action bars ラベルのついたボタンを使ってはいけない
  74. 74. Don't use right-pointing carets on line items 右矢印のアイコンを使ってはいけない
  75. 75. iPhoneをマネしないでよぅ。。
  76. 76. iPhoneアプリのような Androidアプリ Androidアプリなのに、iPhoneのUIそのまま! (それってどうなの…?)
  77. 77. ガイドラインに絶対に 従わないといけないわけ ではないが、 本当に知ってるの?
  78. 78. 知らずに適当に作る 知っててやぶる
  79. 79. やぶる理由 • お客さんに言われたから… • 納期がタイトだから • 予算がないから
  80. 80. まずは標準の形で考える • その結果、必要であればカスタ マイズする タスクの促進 ユーザ体験の強化
  81. 81. タスクの促進 ユーザ体験の強化
  82. 82. タスクの促進 ユーザ体験の強化
  83. 83. アプリの種類ごとのカスタマイズ 生産的タスク ゲーム・没入型ストーリー • 標準で控えめ • 豊かで美しいグラフィック • 簡素化された • 革新的なインタラクティブ操作 ナビゲーション • 独特な世界 コンテンツ閲覧 • コンテンツと競合しないUI p.30
  84. 84. クリエイティブに考える ゲームなどの没入型アプリケーション の場合は、完全にカスタムのコント ロールを作成することが望ましい。 p.66
  85. 85. Flipboard
  86. 86. Pulse
  87. 87. • ガイドラインは必ず熟読しよう • 必ず守る必要はなくて、知識として蓄 えよう • 今後のWebアプリ、その他インター フェイスに必ず生かせるはず
  88. 88. ありがとうございました。 Have a nice apps! 秋葉ちひろ(@tommmmy)

×