iPhone UI勉強会資料
-
Upload
mari-takahashi -
Category
Technology
-
view
4.644 -
download
0
description
Transcript of iPhone UI勉強会資料
iPhone UI勉強会2012/4/27
ConnectStar 高橋真理
勉強会の内容
1. iPhoneのパーツでよく使うものの説明
2.その他気を使うところ
3.モックアップ作成ツール・UIの参考サイトの紹介
ポイント
• iPhoneのパーツを知って、使いこなす→慣習に沿うのはUX的によい
→エンジニアもコードを書きやすい
•モバイル特有の環境を考慮する
必読!!
モバイル特有の環境
• 画面が小さい•屋外•動く、揺れる•他のことをしながら、片手間で見る
×
• 小さい文字•小さいボタン•彩度の低い色の組み合わせ
○
• 早く目的を達成させる•大きい文字、大きいボタン•要素の重要度別の色や文字のメリハリ•無駄な表示要素、遷移をなくす•テキスト入力を少なく
ファーストビューの話• iPhoneは480px• ファーストビューに詰め込んで見づらくなるくらいなら縦に長い方がよい
•ただ、縦スクロールの操作がそこまで苦じゃないとはいえ、ファーストビューもやはり意識はしておきたい
全然ちがう!
↑もし、ここで切れてたらこの先に何があるか伝わらない。
↑ポイント2、ポイント3があることも伝わる。
縦長・ドリルダウンが基本タイトル
概要
概要
概要
写真
内容
拡大写真
ナビゲーションバー
• 現在のビューのタイトルを使用する• コントロールを追加しすぎない(戻る+右側に一個が吉)
• サイズ、色、背景画像、透明度のコントロールが可
カスタムナビゲーション
• Facebook風のが流行中• タブバーのスペースを節約できる• Facebookコネクトのアプリだと、ユーザがFacebookのUIになれてる。
下のバーが2種類。タブバーとコントロールバー
• 現在のコンテキストにおいてユーザがとり得るアクションのセットを提供
• システムで用意されている項目を使用
• 異なるサブタスク間、ビュー間、またはノード間を切り替える
一番押してほしいタブを強調するのがおしゃれ
テーブルビュー角丸パターン平たいパターン
テーブルビュー
• ユーザが選択できるオプションのリスト• 階層構造の情報を表示• 概念的にグループ化された情報を示す(スクロールしてった時にぱっと見でわかる)
• 1ページの中で要素が複数グループ出てくる場合は角丸パターンが使われるよう。
矢印紛らわしい階層的に下の情報を表示
該当項目の詳細を表示
いろんなテーブル
セグメンテッドコントロール
• 異なるビューを表示するボタン•密接に関連しているが、相互に排他的な選択肢を提供する
プルダウン• ラベルの一覧性が損なわれる•なんとなくの目的で見ているユーザを誘導するのには向かない
•押さないと気づかないのはださい•明確な目的が想定できる項目にはOK• 報告、ブロック、設定変更など
アイコン
• 操作や情報そのものの内容を絵で表現したマーク
•共通概念に沿った形をもつことが必要。一般的な意味を踏襲すること。
ラベリング
• 抽象的で主観的な表現をなるべく避ける•短い言葉で、具体性を
ラベリング悪い例 改善の余地 代替案 改善ポイント
フォーム
「フォーム」が何かわからない人には全く伝わらない
お問い合わせ 目的で書く
その他自分にとって有益な選択肢かわからない
もっと見る 探究心がわく
モックアップについて
• アジャイル開発では「ペーパープロトタイピング」が重要らしい
•コードを書かなくて済む部分は、書かない方が良い
モックアップ作成手法
1.紙+ペンの手書き
2.モックアップ作成ツール
3.デザインラフ
※個人的には1→3の順番で作業するのが効率がいいと感じています
モックアップ作成ツール
• Balsamiq• Interface HD• Keynote• Xcode???
NAVERにまとめたのでそちらを参照くださいhttp://matome.naver.jp/odai/2133675152451622601