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

おすすめ参考サイト

http://pttrns.com/

おすすめ参考サイト

http://mobile-patterns.com