Creators'night#3今井
- 3. Clear
- 5. 模倣ライブラリ早速出た • Re:Clear • ネイティブ（UIScrollViewベース） • ライブラリをGumroadで実験販売$5 • http://jacminik.wordpress.com/2012/02/21/reclear_1/ • JTGestureBasedTableViewDemo • ネイティブ（UITableViewベース） • ライブラリをGithubで公開 • https://github.com/mystcolor/ JTGestureBasedTableViewDemo
- 6. さっそくbuild
- 7. 結構シンプルだなー
- 10. 案の定いたよ…orz
- 11. JavaScript実装 •Youyuxi • ブラウザベース（iOSのみ） • jQueryではなく、zepto.jsで実装 • http://clear.youyuxi.com/ •これがまた、よくできてる。
- 12. どのくらい良くできてるか
- 13. Re:Clear JTGestureBasedTableV iewDemo youyuxi ネイティブ ネイティブ ウェブ 3つのレイヤー △（2つ） ×（アイテムのみ） △（2つ） リスト/アイテムの内包数表示 ○（表示やや違う） - ○ 文字部分タップでリスト/アイテムのテキスト変更 ○ × ○ タップで選択、下層レイヤーに遷移 ○ - ○ ピンチインで上位レイヤーへ遷移 ○ - ○ 大きくプルダウンで上位レイヤーへ遷移 × - × プルダウンでリスト/アイテム追加 ○ ○（出方が違う） ○ 空白タップでリスト/アイテム追加 ○ × ○ ピンチアウトでその場所にリスト/アイテム追加 ○ ○ × 右にスワイプでアイテム完了 × △（移動なし） ○ 左にスワイプでリスト/アイテム削除 ○ ○ ○ 完了済みアイテムを右スワイプで未完了に戻す - × ○ 完了済みアイテムを左スワイプで削除 - ○ ○ ロングタップで並び替え × × ○ 大きくプルアップで完了項目の全削除 × × × 自動カラーリング △（少しおかしい） ○ ○ 色の変更（theme） × × × サウンドレスポンス × × × バイブレーションレスポンス（完了時） × × × 評価得点 9 5.5 13.5 実装の比較してみた 13.5！ 圧倒的だってばよ！
- 15. とりあえず、ソース読むか
- 17. …ま、そうだよね。
- 21. よしゃんぐ！
- 22. さ、コードリーディング…
- 28. ( ﾟдﾟ)ﾊｯ! - AM6:00 -
- 29. 寝落ちしてた…
- 30. ＼(^o^)／ｵﾜﾀ
- 32. でも、それだけではなんなので
- 33. ClearのUIの思想 • ボタンメタファの排除 • これまでのボタンのメタファーは、マウスの「クリック」という 動作との親和性の高さから主流だった。 • マウスをクリックして得られる身体フィードバックがボタンを押 す行為のフィードバックと重なる • タッチインターフェイスでの「タップ」では、ボタンを押したと いうフィードバックを得にくい。 • グラフィカルなフィードバックはアリだが、指が邪魔する。 • 「ポチッ」という音でフィードバックするのは可能 • バイブレーションでのフィードバックも可 • ボタンメタファを使わないとどういったUIになるのか、を実装し ていったら、こういう形になった、という一つの形。
- 34. これからのUI/UX • 身体感覚を活かす • スマートデバイスでは、もしかしたらタップよりもスワイプなど の方が身体的な「気持ちよさ」が上かもしれない。 • 画面遷移、機能切り替えなど、タップよりもスワイプ重視の設 計で考えてみる。 • 五感に訴える（脳への刷り込み） • 画面を隠して作業することの多いスマートデバイスでは、行動 に音や振動の小さなフィードバックをつける。 • 「タスクの完了」に、音やバイブレーションを使った強いフィー ドバックを与える。 • サーバー側＋クライアント側の総合的なレスポンス設計をする。
- 35. お詫びにもう一つおまけを。
- 37. DEMO