O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

7.448 visualizações

Publicada em

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

Publicada em: Design
  • Seja o primeiro a comentar

ガイドラインからみたアプリ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 barNavigation barPage titleTab bar
  15. 15. Status barNavigation bar …階層の移動Page titleTab bar …異なるサブタスク間、  ビュー間、またはノード間  を切り替える機能
  16. 16. レシピ検索No.1/料理レシピ載せるなら クックパッド
  17. 17. ミイル(miil) Petap / ペタップ
  18. 18. Tool bar
  19. 19. Tool bar画面やビューのオブジェクトに関連したアクションを実行するコントロール
  20. 20. フラグを立てる 削除 アーカイブ 返信 新規作成
  21. 21. Segmentedcontrol
  22. 22. Segmentedcontrol密接に関連しているが、相互に排他的な選択肢を提供するために使用
  23. 23. foursquare Twitter
  24. 24. Holo Light Holo Dark Holo Light with dark action barsThemes ¦ 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 contentsAction Bar ¦ Android Developers
  28. 28. Action bar
  29. 29. Action bar新規作成フォルダに入れるタグをつける Top bar添付削除
  30. 30. Action barTop bar Bottom bar(Split action bar)
  31. 31. App Name[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds[title] mail title - adfgg gfh sfdgs 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 gfhfdgs 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 tehadfgadf lgfhk lkghs fd fdgajk og a kjsfglk j ミュートkjdgf oweo ka lgjad 迷惑メールを報告[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds tehadfgadf lgfhk lkghs fd fdgajk og a kjsfglk j フィッシングを報告 ka lgjad kjdgf oweo[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds tehadfgadf 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 sfdgs lkgafjdgkdo ofgd kfds[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds[title] mail title - adfgg gfh sfdgs lkgafjdgkdo ofgd kfds
  34. 34. アクションボタンは、マルチデバイス対応のために、ものすごく考えられた結果のもの でもあまり 使われていない…
  35. 35. Galaxy Nexus Xperia Z Galaxy S III Galaxy S II ハードキー INFOBAR A02 ソフトキー
  36. 36. Action barTop bar Bottom bar(Split action bar)
  37. 37. Top bar
  38. 38. Top barTab bar
  39. 39. Drawer• 画面全体が横方向(主に右)にずれ、左から メニューが出てくるパターン• Facebookに代表される
  40. 40. App NameHome tommmmy あーたのしかっ たー。Profile tommmmy あーたのしかっFavorite たー。Message tommmmy あーたのしかっ たー。Event tommmmy あーたのしかっFriends たー。 tommmmy あーたのしかっ たー。 tommmmy あーたのしかっ たー。 tommmmy あーたのしかっ たー。
  41. 41. App NameHome 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.1800x1280 800x1280 800x1280xhdpi hdpi mdpiXWGA XWGA XWGA 400dp 533dp 800dp 棚  田中  田奈  たな  七夕  タナ 田中さん  棚板  田辺  掌  田中れいな あ か さ 棚  田中  田奈  たな  七夕  タナ  田中さん た な は 棚板  田辺  掌  田中れいな  たなか  棚田  棚卸 ま や ら あ か さ 小 わ ?! た な は ま や ら 小 わ ?! 棚  田中  田奈  たな  七夕  タナ  田中さん  棚板  田辺  掌 田中れいな  たなか  棚田  棚卸  棚橋  田無  棚卸し  タナカ  たなご あ か さ た な は ま や ら 小 わ ?! 48dpの大きさ
  52. 52. 48dp Rhythmrecommended 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 publicIt’s so fun to study design. What doyou think it complecated? Name name 10hours publicIt’s so fun to study design. What doyou think it complecated?
  61. 61. Name name 10hours publicIt’s so fun to study design. What doyou think it complecated?
  62. 62. Name name 10hours publicIt’s so fun to study design. What doyou think it complecated?
  63. 63. Name name 10hours publicIt’s so fun to study design. What doyou think it complecated? Name name 10hours publicIt’s so fun to study design. What doyou think it complecated?
  64. 64. Name name 10hours publicIt’s so fun to study design. What doyou think it complecated?
  65. 65. Name name 10hours publicIt’s so fun to study design. What doyou think it complecated?
  66. 66. Name name 10hours publicIt’s so fun to study design. What doyou think it complecated?
  67. 67. アニメーションの意味● ユーザにフィードバックを与える● リアルさを高める 気持ちよさを追求
  68. 68. アニメーションを工夫しよう• 過度にやりすぎない• まったくないのも仏頂面 気持ちいいのは どこだろう?
  69. 69. Pure Android● 他のプラットフォームのUIを持ち込んでは  いけない Pure Android ¦ Android Developers
  70. 70. Dont mimic UI elements from other platforms 他のOSのUI要素をまねしてはいけない
  71. 71. Dont carry over platform-specific icons 他のOSのアイコンをもちこんではいけない
  72. 72. Dont use bottom tab bars タブを下に配置してはいけない
  73. 73. Dont use labeled back buttons on action bars ラベルのついたボタンを使ってはいけない
  74. 74. Dont 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)

×