スマートフォンにおける
UI/UX考
ネットプライスドットコム
NPLab. いまい大すけ
「Clear」ってTodoアプリ
Clear
UIがとっても良い
アプリなんだって。
(機能的にはあんまり…)
模倣ライブラリ早速出た
• Re:Clear
• ネイティブ(UIScrollViewベース)
• ライブラリをGumroadで実験販売$5
• http://jacminik.wordpress.com/2012/02/21/reclear_1/
• JTGestureBasedTableViewDemo
• ネイティブ(UITableViewベース)
• ライブラリをGithubで公開
• https://github.com/mystcolor/
JTGestureBasedTableViewDemo
さっそくbuild
結構シンプルだなー
(゚∀゚)!
jQueryで実装できんじゃね?
まて、やってる奴いるかも…
google先生!
案の定いたよ…orz
JavaScript実装
•Youyuxi
• ブラウザベース(iOSのみ)
• jQueryではなく、zepto.jsで実装
• http://clear.youyuxi.com/
•これがまた、よくできてる。
どのくらい良くできてるか
Re:Clear JTGestureBasedTableV
iewDemo
youyuxi
ネイティブ ネイティブ ウェブ
3つのレイヤー △(2つ) ×(アイテムのみ) △(2つ)
リスト/アイテムの内包数表示 ○(表示やや違う) - ○
文字部分タップでリスト/アイテムのテキスト変更 ○ × ○
タップで選択、下層レイヤーに遷移 ○ - ○
ピンチインで上位レイヤーへ遷移 ○ - ○
大きくプルダウンで上位レイヤーへ遷移 × - ×
プルダウンでリスト/アイテム追加 ○ ○(出方が違う) ○
空白タップでリスト/アイテム追加 ○ × ○
ピンチアウトでその場所にリスト/アイテム追加 ○ ○ ×
右にスワイプでアイテム完了 × △(移動なし) ○
左にスワイプでリスト/アイテム削除 ○ ○ ○
完了済みアイテムを右スワイプで未完了に戻す - × ○
完了済みアイテムを左スワイプで削除 - ○ ○
ロングタップで並び替え × × ○
大きくプルアップで完了項目の全削除 × × ×
自動カラーリング △(少しおかしい) ○ ○
色の変更(theme) × × ×
サウンドレスポンス × × ×
バイブレーションレスポンス(完了時) × × ×
評価得点 9 5.5 13.5
実装の比較してみた
13.5!
圧倒的だってばよ!
でもできてないとこあるし、
forkしちまうぜ!
(リスペクト)
とりあえず、ソース読むか
…ま、そうだよね。
はい、
http://jsbeautifier.org/
よしゃんぐ!
さ、コードリーディング…
※しばらく、かわいい動物の寝顔をお楽しみください。
※しばらく、かわいい動物の寝顔をお楽しみください。
※しばらく、かわいい動物の寝顔をお楽しみください。
※しばらく、かわいい動物の寝顔をお楽しみください。
( ゚д゚)ハッ!
- AM6:00 -
寝落ちしてた…
\(^o^)/オワタ
すまん、
次までに実装してくるから。
でも、それだけではなんなので
ClearのUIの思想
• ボタンメタファの排除
• これまでのボタンのメタファーは、マウスの「クリック」という
動作との親和性の高さから主流だった。
• マウスをクリックして得られる身体フィードバックがボタンを押
す行為のフィードバックと重なる
• タッチインターフェイスでの「タップ」では、ボタンを押したと
いうフィードバックを得にくい。
• グラフィカルなフィードバックはアリだが、指が邪魔する。
• 「ポチッ」という音でフィードバックするのは可能
• バイブレーションでのフィードバックも可
• ボタンメタファを使わないとどういったUIになるのか、を実装し
ていったら、こういう形になった、という一つの形。
これからのUI/UX
• 身体感覚を活かす
• スマートデバイスでは、もしかしたらタップよりもスワイプなど
の方が身体的な「気持ちよさ」が上かもしれない。
• 画面遷移、機能切り替えなど、タップよりもスワイプ重視の設
計で考えてみる。
• 五感に訴える(脳への刷り込み)
• 画面を隠して作業することの多いスマートデバイスでは、行動
に音や振動の小さなフィードバックをつける。
• 「タスクの完了」に、音やバイブレーションを使った強いフィー
ドバックを与える。
• サーバー側+クライアント側の総合的なレスポンス設計をする。
お詫びにもう一つおまけを。
今月の加藤さん
無限なめこ
http://s6.ql.bz/ iqp/nameko/
nameko.html
無限なめかと
http://ow.ly/9g94y
DEMO
ご清聴
ありがとうございました。
無限なめかと
http://ow.ly/9g94y

Creators'night#3今井