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