Mais conteúdo relacionado
Semelhante a UX on HTML5 x Touch UI (20)
Mais de dsuke Takaoka (20)
UX on HTML5 x Touch UI
- 1. UX
on
HTML5 × Touch UI
TAKAOKA Daisuke (@dsuket)
2012/07/27 ありえるえりあミニ勉強会#3 ∼Sencha Touch
1
- 2. About me
高岡大介: TAKAOKA Daisuke
@dsuket
dsuket
お仕事
‣ Free agent engineer
Inkpod Web
‣ カラビナシステムズ http://inkpodweb.com
2
- 4. Touch UI の特徴
Feature
✤ Touch Finger
✤ Multi-touch
✤ Gesture
✤ Virtual keyboard
最重要ポイント
Many touch devices
4
- 5. Touch UI の特徴
Feature
✤ Touch Finger
✤ Multi-touch
✤ Gesture
✤ Virtual keyboard
最重要ポイント
指の精度は高くない!
Many touch devices
4
- 6. Touch Position
タッチ位置はズレる!
1. 静電容量方式の制限
✤ ある程度のエリアが必要
2. 指の感覚によるもの
✤ 斜めにタッチ
iOSでは補正されている
✤ 上方向へ
✤ キーボード予測 http://www.nikkeibp.co.jp/article/column/20120420/306320/
5
- 7. Touch Feedback
★ 押せる場所を分かりやすく OK
✤ 視覚的フィードバック
✤ hoverは使えない
(Xperia Sola の floating touch technologyという例外も)
★ 指はじっとしていない
✤ マウスより段違いにブレる
✤ 不安定な場所での利用が多い
6
- 10. Touch Events Specification
✤ W3Cで標準化が進められている(実はHTML5ではない)
✤ W3C Candidate Recommendation (勧告候補)
✤ 現在活動停止中・・・
✤ Touch Events PAG (Patent Advisory Group) の報告待ち
✤ Appleの特許公開をうけて影響を検討中
8
- 11. Touch Events Specification
✤ W3Cで標準化が進められている(実はHTML5ではない)
✤ W3C Candidate Recommendation (勧告候補)
✤ 現在活動停止中・・・
✤ Touch Events PAG (Patent Advisory Group) の報告待ち
✤ Appleの特許公開をうけて影響を検討中
Event 標準 対応状況
Apple Touch Event W3Cのベース iOSで採用
Google Touch Event ほぼW3C準拠 3.0からマルチタッチに対応
Microsoft Pointer Event 旧Mozillaベース IE10,Windows 8でサポート
8
- 12. Touch Event Types
Event Type dispatch timing
touchstart タッチ開始時に発生
touchend タッチ終了時に発生
touchmove タッチ移動時に発生
touchcancel システムによる割り込み(着信、アラーム等)で発生
✤ DOM要素にリスナーを登録
dom.addEventListener(‘touchstart’, function(event) {
// do something.
}, false);
✤ 基本はマウスイベントと同じ
9
- 13. Touch Event Interface
TouchEvent Touch
changedTouches: TouchList identifier: long
targetTouches: TouchList clientX/clientY: long
touches: TouchList pageX/pageY: long
rotation(*1): float screenX/screenY: long
scale(*1): float target: EventTarget
preventDefault()
stopPropagation()
*1: iOS独自仕様
10
- 14. GestureEvent (iOS only)
ピンチや回転のジェスチャーイベント
iOS 独自機能
Event Type dispatch timing GestureEvent
gesturestart ジェスチャー開始時 rotation: float
gesturechange ジェスチャー変更時 scale: float
gestureend ジェスチャー終了時
発生タイミングと、touchesが無いことに注意
11
- 15. UX
on
HTML5 Touch
HTML5でTouchのUXを実現
12
- 17. 1.ボタンは大きく
推奨サイズ
✤ 44pt (iOS), 48dp (Android) 以上
✤ 参考:
✤ iOS human interface Guidelines
✤ Android Design
13
- 18. 1.ボタンは大きく
推奨サイズ
✤ 44pt (iOS), 48dp (Android) 以上
✤ 参考:
✤ iOS human interface Guidelines
✤ Android Design
13
- 19. 1.ボタンは大きく
推奨サイズ
✤ 44pt (iOS), 48dp (Android) 以上
✤ 参考:
✤ iOS human interface Guidelines
✤ Android Design
Sencha Touch の場合
✤ ボタンのデフォルトは 39px (iOS)
✤ 独立したボタンの場合はもう少し大きくてよいかも
13
- 23. 2.当たり判定を調整
✤ アイコンが小さい場合
✤ 透明なDIVなどを置いて当たり判定を広げる
✤ タッチポイントの補正
✤ 画面上方に補正(Androidの場合)
15
- 24. 2.当たり判定を調整
✤ アイコンが小さい場合
✤ 透明なDIVなどを置いて当たり判定を広げる
✤ タッチポイントの補正
✤ 画面上方に補正(Androidの場合)
✤ 動作予測
✤ 次の動きを予測して当たり判定を変える
15
- 27. Inkpod Webの例(当たり判定)
詳細ボタン オブジェクトハンドル
当たり判定エリア
透明な要素を重ね、見えている デフォルトから広げることが多
範囲よりも当たり判定を広く いため、外側に当たり判定を多
取っている。 く取っている。
16
- 32. 3.Click Eventを使わない
1. touchstart で視覚的フィードバックを与える
✤ フォーカスリング、凹みなど
✤ デフォルトのタップハイライトは無効に
-webkit-tap-highlight-color: rgba(0,0,0,0)
2. レスポンスが遅い (click delay問題)
✤ 0.5sほど遅れる
17
- 33. 3.Click Eventを使わない
1. touchstart で視覚的フィードバックを与える
✤ フォーカスリング、凹みなど
✤ デフォルトのタップハイライトは無効に
-webkit-tap-highlight-color: rgba(0,0,0,0)
2. レスポンスが遅い (click delay問題)
✤ 0.5sほど遅れる
Sencha Touch なら
✤ touchstart時に自動でハイライト
✤ clickイベントを高速にエミュレート 17
- 39. 4.Dragging / Double Tap
✦ ドラッグ開始までの閾値を入れる
✤ タップとドラッグの切り分け
✤ 6pxくらい?(経験則)
✦ ダブルタップ
✤ ダブルタップ判定エリアは広く取る
19
- 40. 4.Dragging / Double Tap
✦ ドラッグ開始までの閾値を入れる
✤ タップとドラッグの切り分け
✤ 6pxくらい?(経験則)
✦ ダブルタップ
✤ ダブルタップ判定エリアは広く取る
Sencha Touch なら
✤ drag, doubletap など便利なイベントが沢山!
(場合により問題有り)
19
- 43. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生
21
- 44. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
21
- 45. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
✦ タイマーやDOMイベント、CSSイベント
21
- 46. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
✦ タイマーやDOMイベント、CSSイベント
21
- 47. User action event restrictions
✦ ユーザアクションのイベントスコープ内でだけ動く制限がある(iOS)
✤ キーボードの表示 (focus)
✤ VIDEOタグの動画の再生 text field Edit
✦ タイマーやDOMイベント、CSSイベント
✦ Sencha Touch のイベントでこれらは制御できない! (* ver: 1.1)
➡ タイマーやカスタムイベントを多用
➡ 自前でがんばる!
21
- 48. Scroller
✤ 縦/横 スクロールの排他制御
✤ Mobile Safari で実装 (Android Browser は無し)
✤ Sencha の Scroller は未サポート
✤ directionLock は入れ子対策用
✤ iScroll 4 が使える
22
- 49. Scroller
✤ 縦/横 スクロールの排他制御
✤ Mobile Safari で実装 (Android Browser は無し)
✤ Sencha の Scroller は未サポート
✤ directionLock は入れ子対策用
✤ iScroll 4 が使える
✤ ピンチ/2本指スクロール の排他制御
✤ 拡大縮小とスクロールの判断(Drawツール)
✤ 2つのタッチのベクトルを見て判断
22
- 50. Scroller
✤ 縦/横 スクロールの排他制御
✤ Mobile Safari で実装 (Android Browser は無し)
✤ Sencha の Scroller は未サポート
✤ directionLock は入れ子対策用
✤ iScroll 4 が使える
✤ ピンチ/2本指スクロール の排他制御
✤ 拡大縮小とスクロールの判断(Drawツール)
✤ 2つのタッチのベクトルを見て判断
22
- 54. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整
3. Click Event は使わない
4. Dragging / Double Tap
23
- 55. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整
3. Click Event は使わない
4. Dragging / Double Tap
✤ 落とし穴
23
- 56. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整 HTML5技術コンサルやってます!
3. Click Event は使わない
4. Dragging / Double Tap
✤ 落とし穴
23
- 57. Conclusion
✤ Touch UI の特徴
✤ HTML5 × Touch
✤ HTML5 × Touch の UX
1. ボタンは大きく
2. 当たり判定を調整 HTML5技術コンサルやってます!
3. Click Event は使わない
4. Dragging / Double Tap
✤ 落とし穴 End 23
Notas do Editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- jQuery Blogの話\n
- jQuery Blogの話\n
- jQuery Blogの話\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Tips?\n
- Tips?\n
- Tips?\n
- \n
- \n
- \n
- \n
- \n
- \n