インタラクションデザインの考察(iPhone版)            Hidetoshi Mori
自己紹介   名前森 英寿   アカウント      Twitter: @h_moriFacebook: hidetoshi.mori  職業プログラマ  開発言語    Java / .net / Ruby / Objective-C    ...
iPhoneの特徴持ち運べセンサーなど多機能なデバイス 通信、GPS、カメラ、加速度センサー、地図小さなスクリーンサイズ 480 x 320 px (retinaでは 960 x 480 px)すべての操作を画面上にて指で行う タップ、スクロー...
考慮すべきこと電車に乗りながら、歩きながら、お風呂に入りながら触る 通信できないことを想定 キーボードが苦痛 起動・動作が遅いと待てない画面が小さい 不要なデザイン要素はできるだけ排除する 指で押せる最小のボタンサイズは 44 px  縦を狭く...
アプリケーションの種類ネイティブアプリケーション  Objective-Cで作る (※変換しても可)  開発コストは大きいiPhone最適化Webアプリケーション  iPhoneのSafariで見ることを想定してサーバーアプリケーショ  ンを作...
iOSのスペック・仕様CPUが非力メモリが尐ない (特にiPadは注意)仮想メモリはディスクスワップ領域がないメモリ警告レベルによりKillされる (異常終了)バックグラウンドアプリはメモリ警告によりKillされる起動が遅いとKillされる (...
対策GPUを活用する CoreGraphic、OpenGL ESを使用するユーザーレスポンスを殺さない 非同期処理を積極的に使う (UIKitの操作はメインスレッドで行うことに注意)画像、音声等のリソースを小さくするインスタンスのロード、クリー...
製品定義のポイント想定ユーザーを考慮に入れた特徴にする 初心者 or 上級者 ? 男性 or 女性 ? タスク系 or エンターティンメント系 ?ユーザーシーンを想定する どこで、どのように使う ? 移動しながら or 家でじっくり ?アプリの...
設計のポイントシンプルに分かりやすく 機能の整合性を保つ 標準コントローラを可能な限り使う メッセージを減らし、視覚効果を活用する 専門用語を避ける キーボード入力を最低限にする ユーザーが解決出来ないエラーメッセージは表示しな い
設計のポイントジェスチャはUE向上に有効 標準的なジェスチャは再定義しない ジェスチャの定義は補助機能として捉える (ジェスチャ機能を認識されない場合がある) ダブルタップより長押しが操作しやすいアクションに対して必ずレスポンスを返す 処理中マ...
設計のポイントiPhone画面の両サイド位置に主要なボタンを配置しない  ケースの種類によっては押しづらい  配置する場合、大きめのボタンにする等の工夫UIAlertView、UIActionSheetの使い分け  通知系はAlert、ユーザ選...
ヒューマンインターフェースの原       則 ※ヒューマンインターフェースガイドラインより抜粋メタファ 実世界のオブジェクト、アクションを実装する 何かに触っている感覚を実装する 標準コントローラに可能な限り準拠する  Ex)スライド式スイッ...
ヒューマンインターフェースの原       則 ※ヒューマンインターフェースガイドラインより抜粋フィードバック・ダイレクトオペレーション ユーザーアクションには見える変化を与える   ハイライト処理等 音によるフィードバックは避ける   ユーザ...
ヒューマンインターフェースの原       則 ※ヒューマンインターフェースガイドラインより抜粋ユーザーコントロール ユーザーからアクションを起こさせる キャンセルできる機会を与える  プログレスバー・キャンセルボタン配置等外観と整合性 アプリ...
私見標準アプリケーションの動作は模倣すべき文字より視覚性を重視するボタンの配置には熟慮するユーザーはダイアログメッセージを読まないことを強く意識する初めて利用するユーザーに対しての操作を誘導するナビゲートは非常に有効始めからローカライズを意識し...
ご清聴ありがとうございま     した    m(_ _)m
Upcoming SlideShare
Loading in...5
×

インタラクションデザインの考察

1,522

Published on

about Interaction Design for iPhone

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,522
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

インタラクションデザインの考察

  1. 1. インタラクションデザインの考察(iPhone版) Hidetoshi Mori
  2. 2. 自己紹介 名前森 英寿 アカウント Twitter: @h_moriFacebook: hidetoshi.mori 職業プログラマ 開発言語 Java / .net / Ruby / Objective-C アプリ開発実績iPhone版SOICHA(TweetMe)ATND暦
  3. 3. iPhoneの特徴持ち運べセンサーなど多機能なデバイス 通信、GPS、カメラ、加速度センサー、地図小さなスクリーンサイズ 480 x 320 px (retinaでは 960 x 480 px)すべての操作を画面上にて指で行う タップ、スクロール、ピンチ、ジェスチャ
  4. 4. 考慮すべきこと電車に乗りながら、歩きながら、お風呂に入りながら触る 通信できないことを想定 キーボードが苦痛 起動・動作が遅いと待てない画面が小さい 不要なデザイン要素はできるだけ排除する 指で押せる最小のボタンサイズは 44 px 縦を狭く取った場合は横を広くする ジェスチャを工夫する
  5. 5. アプリケーションの種類ネイティブアプリケーション Objective-Cで作る (※変換しても可) 開発コストは大きいiPhone最適化Webアプリケーション iPhoneのSafariで見ることを想定してサーバーアプリケーショ ンを作る Java/Ruby/PHP/Python/Perl etc 開発コストは小さいがチープに見えるかもWebハイブリッドアプリケーション ネイティブコードのWebKitを利用して作る カメラ、マップなどはSDKを利用できる Htmlを直に組込みしてJavaScriptで作る方法も可能
  6. 6. iOSのスペック・仕様CPUが非力メモリが尐ない (特にiPadは注意)仮想メモリはディスクスワップ領域がないメモリ警告レベルによりKillされる (異常終了)バックグラウンドアプリはメモリ警告によりKillされる起動が遅いとKillされる (※約20秒)
  7. 7. 対策GPUを活用する CoreGraphic、OpenGL ESを使用するユーザーレスポンスを殺さない 非同期処理を積極的に使う (UIKitの操作はメインスレッドで行うことに注意)画像、音声等のリソースを小さくするインスタンスのロード、クリーンアップのタイミングを検討するKillされたときを考え、最終状態を随時保存するメモリリークをチェックする (※特に大きなインスタンスは要注意)
  8. 8. 製品定義のポイント想定ユーザーを考慮に入れた特徴にする 初心者 or 上級者 ? 男性 or 女性 ? タスク系 or エンターティンメント系 ?ユーザーシーンを想定する どこで、どのように使う ? 移動しながら or 家でじっくり ?アプリの外観・世界観と戦略を照らし合わせて考える AppStoreでのアプリランキングを考慮 奇抜なデザインだと目を引きやすいが長期で利用されづらい
  9. 9. 設計のポイントシンプルに分かりやすく 機能の整合性を保つ 標準コントローラを可能な限り使う メッセージを減らし、視覚効果を活用する 専門用語を避ける キーボード入力を最低限にする ユーザーが解決出来ないエラーメッセージは表示しな い
  10. 10. 設計のポイントジェスチャはUE向上に有効 標準的なジェスチャは再定義しない ジェスチャの定義は補助機能として捉える (ジェスチャ機能を認識されない場合がある) ダブルタップより長押しが操作しやすいアクションに対して必ずレスポンスを返す 処理中マーク・プログレスバーの表示 ユーザーへの通知は音のみでは不十分 (ミュートされているかも) ボタンハイライトの利用 (アクション処理開始はTouch up insideが基本)
  11. 11. 設計のポイントiPhone画面の両サイド位置に主要なボタンを配置しない ケースの種類によっては押しづらい 配置する場合、大きめのボタンにする等の工夫UIAlertView、UIActionSheetの使い分け 通知系はAlert、ユーザ選択はActionSheet UIAlertViewは描画負荷が高いので多用しないアニメーションに一貫性をもたせる トランジション系アニメーションは種類と方向に概念 がある 不要なアニメーションは避ける
  12. 12. ヒューマンインターフェースの原 則 ※ヒューマンインターフェースガイドラインより抜粋メタファ 実世界のオブジェクト、アクションを実装する 何かに触っている感覚を実装する 標準コントローラに可能な限り準拠する Ex)スライド式スイッチ、ピッカー見る・示す 可能な限りキーボードを操作させない リストの表示・ピッカー等を使用する 入力エラーチェックではなく入力させない工夫
  13. 13. ヒューマンインターフェースの原 則 ※ヒューマンインターフェースガイドラインより抜粋フィードバック・ダイレクトオペレーション ユーザーアクションには見える変化を与える ハイライト処理等 音によるフィードバックは避ける ユーザーはミュートにしている可能性がある 操作の結果を即時に応答させる 重い処理がある場合は非同期実装させる(UIViewの制御はメインスレッドで行う) 長い処理の場合は状況を通知させる インジケータ・プログレスバーを利用 アニメーションの利用
  14. 14. ヒューマンインターフェースの原 則 ※ヒューマンインターフェースガイドラインより抜粋ユーザーコントロール ユーザーからアクションを起こさせる キャンセルできる機会を与える プログレスバー・キャンセルボタン配置等外観と整合性 アプリケーション外観は機能性に強い影響を持つ 美しくする基準ではなく機能との整合性をとる 主要機能以外の装飾は控えめにする 一貫した外観と機能性・アニメーションを設計す る 意味のないアニメーションは避ける
  15. 15. 私見標準アプリケーションの動作は模倣すべき文字より視覚性を重視するボタンの配置には熟慮するユーザーはダイアログメッセージを読まないことを強く意識する初めて利用するユーザーに対しての操作を誘導するナビゲートは非常に有効始めからローカライズを意識した設計を心がける
  16. 16. ご清聴ありがとうございま した m(_ _)m
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×