Downloaded 28 times
スマートフォンUIデザイン
- 2. 自己紹介 Twitter :cotora_design グラフィックデザイナー 主にiPhoneAppのUIやIFデザイン Webデザインを制作しています
- 3.
- 4.
- 5. UIとは インターフェイスの グラフィックデザインのこと
- 6. UIとは インターフェイスの グラフィックデザインのこと
- 7. UIとは グラフィックはもちろん アクション、画面遷移なども ふまえた設計のこと
- 8. ユーザーを想像してみよう • いつ（When） •どこで（Where） • 誰が（Who） • 何を（What） • なぜ（Why） • どうやって（How）
- 9. いつ？ 運転中 就寝前 仕事中 暇なとき 移動中
- 10. パッと見て いつ？ わかりやすいもの 目が覚めない 優しい色使い 運転中 就寝前 仕事中 暇なとき 移動中 片手
- 11. どこで？ 車の中で 会社で カフェで 電車の中で いい雰囲気の BARで
- 12. シンプルな 画面遷移 どこで？ 目につかない ビジネスの雰囲気 車の中で 会社で カフェで 電車の中で いい雰囲気の BARで シックな色調
- 13. だれが？ 文字を読めない オシャレな こどもが 女性が おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが
- 14. ピクトグラムで だれが？ 文字のないデザイン 文字を読めない オシャレな こどもが 女性が 指太い？ おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが 文字を 読みやすく
- 15. なにを？ アプリを （ゲーム・動画・SNS） スマートフォンサイトを （ショッピング・アニメ） 家電・占いなど）
- 16. なにを？ 画面は傾けると縦と横 どちらにも対応 アプリを （ゲーム・動画・SNS） スマートフォンサイトを （ショッピング・アニメ） 家電・占いなど） 画面を固定できる
- 17. なぜ？ 生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため
- 18. 寒色のほうが なぜ？ 覚えがいい？ 生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため ターゲットは 広いかもしれない
- 19. どうやって？ 仕事を 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら
- 20. どうやって？ ユーザーは こだわりが 仕事を ありそう 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら 大きく はっきりと 視認性が重要？
- 21. これらをふまえると… どんなUIであるべきか わかってくる
- 22.
- 23. ボタンについて 最低サイズは 88px （3Gの場合は44px）
- 24.
- 25.
- 26.
- 27.
- 28. ボタンについて 例:おしゃれな女性がターゲット ↓ 縦の幅を持たせる （ネイルをしているかもしれない）
- 29. ボタンについて ゲームや読み物の時は注意 思っているよりも 手や指で隠れる範囲は大きい
- 30.
- 31. ボタンについて 【2009年 Firefox】 ブラウザをDLするボタンは 何色が一番押されるか？ テストを実施
- 32.
- 33. ボタンについて 緑 (930,752)DL 青 (256,344)DL 紫 (255,894)DL 橙 (255,811)DL
- 34. ボタンについて 現在でも緑が使われている。 ボタンひとつにしてもとても重要
- 35.
- 36. 画面について ヘルプがなくても 使い方がわかる設計
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. ローカライズ（おまけ） ・ローカライズとは 言語だけの対応ではなく、 メニュー表示や その言語特有の処理を 追加すること
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. まとめ 感覚の構造に 素直に合わせて設計する
- 50. まとめ 日々使っているけど 当たり前だと 思ってはいけない
- 51. まとめ 必要な要素を 「目的」に合わせて 最良な方法で配置、 装飾すること
- 52. ありがとうございました 【参考サイト】 ■WEBCRE8.jp http://webcre8.jp/think/meaning-all- design.html ■I‘m just anotherscarecrow. http://yohei.posterous.com/92159990