Submit Search
Upload
インタラクションデザインの考察
•
Download as PPTX, PDF
•
1 like
•
879 views
Hidetoshi Mori
Follow
about Interaction Design for iPhone
Read less
Read more
Education
Report
Share
Report
Share
1 of 16
Download now
Recommended
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Konomi Kawaharada
Share Flower
Share Flower
東証ソーシャルかぶコン
テックヒルズ
テックヒルズ
tomo tsubota
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Nobuya Sato
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
Recommended
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Konomi Kawaharada
Share Flower
Share Flower
東証ソーシャルかぶコン
テックヒルズ
テックヒルズ
tomo tsubota
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Nobuya Sato
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
Schoo講演資料130409
Schoo講演資料130409
Ryosuke Matsumoto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
17 D-2
17 D-2
Daizen Ikehara
NucliOS 概要
NucliOS 概要
インフラジスティックス・ジャパン株式会社
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
schoowebcampus
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
GoAzure
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
Takashi Sakamoto
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Masaru Kimura
geohexで作るロケーションヒートマップ
geohexで作るロケーションヒートマップ
Mitsukuni Sato
Go azure5 16 9_提出用
Go azure5 16 9_提出用
Mami Shiino
スマホ・タブレットのビジネス活用術6講座セミナー講演講師
スマホ・タブレットのビジネス活用術6講座セミナー講演講師
新潟コンサルタント横田秀珠
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
lychee .
【配布用】20120411スターター資料スマホアプリご導入までの流れ
【配布用】20120411スターター資料スマホアプリご導入までの流れ
DHRgroup
iPhone アプリ開発の実例
iPhone アプリ開発の実例
Tokyo City University, Ueno Lab.
モバイルビジネスの動向
モバイルビジネスの動向
Hidetoshi Mori
天王寺動物園×コミューン
天王寺動物園×コミューン
Junya Higashiyama
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
takuo yamada
Photo mosaic 検証
Photo mosaic 検証
Hidetoshi Mori
プロジェクト管理しないという提案
プロジェクト管理しないという提案
Hidetoshi Mori
More Related Content
Similar to インタラクションデザインの考察
Schoo講演資料130409
Schoo講演資料130409
Ryosuke Matsumoto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
17 D-2
17 D-2
Daizen Ikehara
NucliOS 概要
NucliOS 概要
インフラジスティックス・ジャパン株式会社
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
schoowebcampus
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
GoAzure
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
Takashi Sakamoto
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Masaru Kimura
geohexで作るロケーションヒートマップ
geohexで作るロケーションヒートマップ
Mitsukuni Sato
Go azure5 16 9_提出用
Go azure5 16 9_提出用
Mami Shiino
スマホ・タブレットのビジネス活用術6講座セミナー講演講師
スマホ・タブレットのビジネス活用術6講座セミナー講演講師
新潟コンサルタント横田秀珠
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
lychee .
【配布用】20120411スターター資料スマホアプリご導入までの流れ
【配布用】20120411スターター資料スマホアプリご導入までの流れ
DHRgroup
iPhone アプリ開発の実例
iPhone アプリ開発の実例
Tokyo City University, Ueno Lab.
モバイルビジネスの動向
モバイルビジネスの動向
Hidetoshi Mori
天王寺動物園×コミューン
天王寺動物園×コミューン
Junya Higashiyama
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
takuo yamada
Similar to インタラクションデザインの考察
(20)
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
17 D-2
17 D-2
NucliOS 概要
NucliOS 概要
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポート
geohexで作るロケーションヒートマップ
geohexで作るロケーションヒートマップ
Go azure5 16 9_提出用
Go azure5 16 9_提出用
スマホ・タブレットのビジネス活用術6講座セミナー講演講師
スマホ・タブレットのビジネス活用術6講座セミナー講演講師
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
【配布用】20120411スターター資料スマホアプリご導入までの流れ
【配布用】20120411スターター資料スマホアプリご導入までの流れ
iPhone アプリ開発の実例
iPhone アプリ開発の実例
モバイルビジネスの動向
モバイルビジネスの動向
天王寺動物園×コミューン
天王寺動物園×コミューン
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
More from Hidetoshi Mori
Photo mosaic 検証
Photo mosaic 検証
Hidetoshi Mori
プロジェクト管理しないという提案
プロジェクト管理しないという提案
Hidetoshi Mori
Git超入門
Git超入門
Hidetoshi Mori
20130515 diary euglena_en
20130515 diary euglena_en
Hidetoshi Mori
Evernote連携
Evernote連携
Hidetoshi Mori
Nodejsによるapiサーバ構築事例
Nodejsによるapiサーバ構築事例
Hidetoshi Mori
コンシューマアプリを作るということ
コンシューマアプリを作るということ
Hidetoshi Mori
mongodbの簡易ストレージ化
mongodbの簡易ストレージ化
Hidetoshi Mori
汎用apiサーバの構築
汎用apiサーバの構築
Hidetoshi Mori
20130216 小ネタ集
20130216 小ネタ集
Hidetoshi Mori
20130216 magical record
20130216 magical record
Hidetoshi Mori
UITableViewで無限CoverFlowを作る
UITableViewで無限CoverFlowを作る
Hidetoshi Mori
モバイルビジネスの動向
モバイルビジネスの動向
Hidetoshi Mori
Storyboard
Storyboard
Hidetoshi Mori
Blocksの活用法
Blocksの活用法
Hidetoshi Mori
インタラクションデザインの考察
インタラクションデザインの考察
Hidetoshi Mori
サービス開発における工程
サービス開発における工程
Hidetoshi Mori
ゲリラ的サービスの育て方
ゲリラ的サービスの育て方
Hidetoshi Mori
Presentation of TapkuLibrary
Presentation of TapkuLibrary
Hidetoshi Mori
Facebook api for iOS
Facebook api for iOS
Hidetoshi Mori
More from Hidetoshi Mori
(20)
Photo mosaic 検証
Photo mosaic 検証
プロジェクト管理しないという提案
プロジェクト管理しないという提案
Git超入門
Git超入門
20130515 diary euglena_en
20130515 diary euglena_en
Evernote連携
Evernote連携
Nodejsによるapiサーバ構築事例
Nodejsによるapiサーバ構築事例
コンシューマアプリを作るということ
コンシューマアプリを作るということ
mongodbの簡易ストレージ化
mongodbの簡易ストレージ化
汎用apiサーバの構築
汎用apiサーバの構築
20130216 小ネタ集
20130216 小ネタ集
20130216 magical record
20130216 magical record
UITableViewで無限CoverFlowを作る
UITableViewで無限CoverFlowを作る
モバイルビジネスの動向
モバイルビジネスの動向
Storyboard
Storyboard
Blocksの活用法
Blocksの活用法
インタラクションデザインの考察
インタラクションデザインの考察
サービス開発における工程
サービス開発における工程
ゲリラ的サービスの育て方
ゲリラ的サービスの育て方
Presentation of TapkuLibrary
Presentation of TapkuLibrary
Facebook api for iOS
Facebook api for iOS
Recently uploaded
UniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScript
yuitoakatsukijp
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ssusere0a682
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
YukiTerazawa
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ssusere0a682
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
Tokyo Institute of Technology
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
koheioishi1
Recently uploaded
(6)
UniProject Workshop Make a Discord Bot with JavaScript
UniProject Workshop Make a Discord Bot with JavaScript
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習105 -n人囚人のジレンマモデル- #ゲーム理論 #gametheory #数学
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
インタラクションデザインの考察
1.
インタラクションデザインの考察 (iPhone版)
Hidetoshi Mori
2.
自己紹介
名前 森 英寿 アカウント Twitter: @h_mori Facebook: hidetoshi.mori 職業 プログラマ 開発言語 Java / .net / Ruby / Objective-C アプリ開発実績 iPhone版SOICHA(TweetMe) ATND暦
3.
iPhoneの特徴 持ち運べセンサーなど多機能なデバイス 通信、GPS、カメラ、加速度センサー、地図 小さなスクリーンサイズ 480
x 320 px (retinaでは 960 x 480 px) すべての操作を画面上にて指で行う タップ、スクロール、ピンチ、ジェスチャ
4.
考慮すべきこと 電車に乗りながら、歩きながら、お風呂に入りなが ら触る 通信できないことを想定 キーボードが苦痛
起動・動作が遅いと待てない 画面が小さい 不要なデザイン要素はできるだけ排除する 指で押せる最小のボタンサイズは 44 px 縦を狭く取った場合は横を広くする ジェスチャを工夫する
5.
アプリケーションの種類 ネイティブアプリケーション Objective-Cで作る
(※変換しても可) 開発コストは大きい iPhone最適化Webアプリケーション iPhoneのSafariで見ることを想定してサーバーアプリケーショ ンを作る Java/Ruby/PHP/Python/Perl etc 開発コストは小さいがチープに見えるかも Webハイブリッドアプリケーション ネイティブコードのWebKitを利用して作る カメラ、マップなどはSDKを利用できる Htmlを直に組込みしてJavaScriptで作る方法も可能
6.
iOSのスペック・仕様 CPUが非力 メモリが尐ない (特にiPadは注意) 仮想メモリはディスクスワップ領域がない メモリ警告レベルによりKillされる (異常終了) バックグラウンドアプリはメモリ警告によりKillされる 起動が遅いとKillされる
(※約20秒)
7.
対策 GPUを活用する CoreGraphic、OpenGL ESを使用する ユーザーレスポンスを殺さない
非同期処理を積極的に使う (UIKitの操作はメインスレッドで行うことに注意) 画像、音声等のリソースを小さくする インスタンスのロード、クリーンアップのタイミングを検 討する Killされたときを考え、最終状態を随時保存する メモリリークをチェックする (※特に大きなインスタンスは要注 意)
8.
製品定義のポイント 想定ユーザーを考慮に入れた特徴にする 初心者 or
上級者 ? 男性 or 女性 ? タスク系 or エンターティンメント系 ? ユーザーシーンを想定する どこで、どのように使う ? 移動しながら or 家でじっくり ? アプリの外観・世界観と戦略を照らし合わせて考える AppStoreでのアプリランキングを考慮 奇抜なデザインだと目を引きやすいが長期で利用されづらい
9.
設計のポイント シンプルに分かりやすく 機能の整合性を保つ 標準コントローラを可能な限り使う
メッセージを減らし、視覚効果を活用する 専門用語を避ける キーボード入力を最低限にする ユーザーが解決出来ないエラーメッセージは表示しな い
10.
設計のポイント ジェスチャはUE向上に有効 標準的なジェスチャは再定義しない ジェスチャの定義は補助機能として捉える
(ジェスチャ機能を認識されない場合がある) ダブルタップより長押しが操作しやすい アクションに対して必ずレスポンスを返す 処理中マーク・プログレスバーの表示 ユーザーへの通知は音のみでは不十分 (ミュートされているかも) ボタンハイライトの利用 (アクション処理開始はTouch up insideが基本)
11.
設計のポイント iPhone画面の両サイド位置に主要なボタンを配置しな い ケースの種類によっては押しづらい
配置する場合、大きめのボタンにする等の工夫 UIAlertView、UIActionSheetの使い分け 通知系はAlert、ユーザ選択はActionSheet UIAlertViewは描画負荷が高いので多用しない アニメーションに一貫性をもたせる トランジション系アニメーションは種類と方向に概念 がある 不要なアニメーションは避ける
12.
ヒューマンインターフェースの原
則 ※ヒューマンインターフェースガイドラインより抜粋 メタファ 実世界のオブジェクト、アクションを実装する 何かに触っている感覚を実装する 標準コントローラに可能な限り準拠する Ex)スライド式スイッチ、ピッカー 見る・示す 可能な限りキーボードを操作させない リストの表示・ピッカー等を使用する 入力エラーチェックではなく入力させない工夫
13.
ヒューマンインターフェースの原
則 ※ヒューマンインターフェースガイドラインより抜粋 フィードバック・ダイレクトオペレーション ユーザーアクションには見える変化を与える ハイライト処理等 音によるフィードバックは避ける ユーザーはミュートにしている可能性がある 操作の結果を即時に応答させる 重い処理がある場合は非同期実装させる (UIViewの制御はメインスレッドで行う) 長い処理の場合は状況を通知させる インジケータ・プログレスバーを利用 アニメーションの利用
14.
ヒューマンインターフェースの原
則 ※ヒューマンインターフェースガイドラインより抜粋 ユーザーコントロール ユーザーからアクションを起こさせる キャンセルできる機会を与える プログレスバー・キャンセルボタン配置等 外観と整合性 アプリケーション外観は機能性に強い影響を持つ 美しくする基準ではなく機能との整合性をとる 主要機能以外の装飾は控えめにする 一貫した外観と機能性・アニメーションを設計す る 意味のないアニメーションは避ける
15.
私見 標準アプリケーションの動作は模倣すべき 文字より視覚性を重視する ボタンの配置には熟慮する ユーザーはダイアログメッセージを読まないこ とを強く意識する 初めて利用するユーザーに対しての操作を誘導 するナビゲートは非常に有効 始めからローカライズを意識した設計を心がけ る
16.
ご清聴ありがとうございま
した m(_ _)m
Download now