Advertisement
当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン
Report
Konomi KawaharadaFollow
川原田このみデザイン事務所May. 1, 2012•0 likes•90,698 views
87 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン
May. 1, 2012•0 likes•90,698 views
87 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
スマフォアプリ・サイトを制作する際に、 当たり前を当たり前だと思ってはいけない UIの基礎をスライドにしました。
Konomi KawaharadaFollow
川原田このみデザイン事務所Advertisement
当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン
- 自己紹介 Twitter : cotora_design グラフィックデザイナー 主にiPhoneAppのUIやIFデザイン Webデザインを制作しています
- UIとは ユーザーインターフェースの略
- UIとは ユーザーインターフェースの略
- UIとは インターフェイスの グラフィックデザインのこと
- UIとは インターフェイスの グラフィックデザインのこと
- UIとは グラフィックはもちろん アクション、画面遷移なども ふまえた設計のこと
- ユーザーを想像してみよう • いつ（When） • どこで（Where） • 誰が（Who） • 何を（What） • なぜ（Why） • どうやって（How）
- いつ？ 運転中 就寝前 仕事中 暇なとき 移動中
- パッと見て いつ？ わかりやすいもの 目が覚めない 優しい色使い 運転中 就寝前 仕事中 暇なとき 移動中 片手
- どこで？ 車の中で 会社で カフェで 電車の中で いい雰囲気の BARで
- シンプルな 画面遷移 どこで？ 目につかない ビジネスの雰囲気 車の中で 会社で カフェで 電車の中で いい雰囲気の BARで シックな色調
- だれが？ 文字を読めない オシャレな こどもが 女性が おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが
- ピクトグラムで だれが？ 文字のないデザイン 文字を読めない オシャレな こどもが 女性が 指太い？ おかあさんと たくましい こどもが 目の悪い 男性が おばあちゃんが 文字を 読みやすく
- なにを？ アプリを （ゲーム・動画・SNS） スマートフォンサイトを （ショッピング・アニメ） 家電・占いなど）
- なにを？ 画面は傾けると縦と横 どちらにも対応 アプリを （ゲーム・動画・SNS） スマートフォンサイトを （ショッピング・アニメ） 家電・占いなど） 画面を固定できる
- なぜ？ 生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため
- 寒色のほうが なぜ？ 覚えがいい？ 生活のため 勉強するため コミュニケー ションのため 暇つぶしの こどもを ため あやすため ターゲットは 広いかもしれない
- どうやって？ 仕事を 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら
- どうやって？ ユーザーは こだわりが 仕事を ありそう 走りながら しながら 寝ている 寝転がり 最中に 運転する ながら かたわら 大きく はっきりと 視認性が重要？
- これらをふまえると… どんなUIであるべきか わかってくる
- ボタンについて
- ボタンについて 最低サイズは 88px （3Gの場合は44px）
- ボタンについて 片手？両手？どう持つのか？ 押し間違えのない配置 送信 削 除
- ボタンについて 片手？両手？どう持つのか？ 押し間違えのない配置 送信 削 除
- ボタンについて ・隣のボタンとの間隔に注意 ・片手でも押しやすい配置 ・押し間違いを避けたいボタンは 遠くへ配置する など
- ボタンについて 例:おしゃれな女性がターゲット ↓
- ボタンについて 例:おしゃれな女性がターゲット ↓ 縦の幅を持たせる （ネイルをしているかもしれない）
- ボタンについて ゲームや読み物の時は注意 思っているよりも 手や指で隠れる範囲は大きい
- ボタンについて
- ボタンについて 2009年にFirefoxが ブラウザをDLするボタンで どの色が一番押されるかテスト
- ボタンについて
- ボタンについて 緑 (930,752)DL 青 (256,344)DL 紫 (255,894)DL 橙 (255,811)DL
- ボタンについて 現在でも緑が使われている。 ボタンひとつにしてもとても重要
- 画面について
- 画面について ヘルプがなくても 使い方がわかる設計
- 画面について ・文字をやめてピクトグラムを使用 （↑ こども、各国のローカライズにも◎）
- 画面について ・文字をやめてピクトグラムを使用 （↑ こども、各国のローカライズにも◎） ・リンクは青で表示する(※サイト)
- 画面について ・文字をやめてピクトグラムを使用 （↑ こども、各国のローカライズにも◎） ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る
- 画面について ・文字をやめてピクトグラムを使用 （↑ こども、各国のローカライズにも◎） ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る ・次の動作を予測させるデザイン
- 画面について ・文字をやめてピクトグラムを使用 （↑ こども、各国のローカライズにも◎） ・リンクは青で表示する(※サイト) ・ヘッダーのlogoをタップ→Homeに戻る ・次の動作を予測させるデザイン
- ローカライズ（おまけ）
- ローカライズ（おまけ） ・ローカライズとは 言語だけの対応ではなく、 メニュー表示や その言語特有の処理を 追加すること
- 英語版App
- 日本語版App
- 外国と日本での違い
- 外国と日本での違い
- まとめ
- まとめ 感覚の構造に 素直に合わせて設計する
- まとめ 日々使っているけど 当たり前だと 思ってはいけない
- まとめ 必要な要素を 「目的」に合わせて 最良な方法で配置、 装飾すること
- ありがとうございました 【参考サイト】 ■WEBCRE8.jp http://webcre8.jp/think/meaning-all- design.html ■I‘m just another scarecrow. http://yohei.posterous.com/92159990
Advertisement