SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
スマートフォンにおける
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

Mais conteúdo relacionado

Mais procurados

ハマる!HoloLensアプリ開発
ハマる!HoloLensアプリ開発ハマる!HoloLensアプリ開発
ハマる!HoloLensアプリ開発Tatsuya Sakai
 
Tizen web app について調べたよ
Tizen web app について調べたよTizen web app について調べたよ
Tizen web app について調べたよNaruto TAKAHASHI
 
20200216 MacBook Proで姿勢検出
20200216 MacBook Proで姿勢検出20200216 MacBook Proで姿勢検出
20200216 MacBook Proで姿勢検出Kenichi Kinoshita
 
Html5 でアプリを作るということ
Html5 でアプリを作るということHtml5 でアプリを作るということ
Html5 でアプリを作るということNaruto TAKAHASHI
 
Prottで変える開発プロセス
Prottで変える開発プロセスProttで変える開発プロセス
Prottで変える開発プロセスTakumi Kai
 
20100930 DevLOVE Enagilized Work!
20100930 DevLOVE Enagilized Work!20100930 DevLOVE Enagilized Work!
20100930 DevLOVE Enagilized Work!一法 山崎
 
プログラマのためのPC自動化
プログラマのためのPC自動化プログラマのためのPC自動化
プログラマのためのPC自動化高見 知英
 

Mais procurados (11)

ハマる!HoloLensアプリ開発
ハマる!HoloLensアプリ開発ハマる!HoloLensアプリ開発
ハマる!HoloLensアプリ開発
 
Tizen web app について調べたよ
Tizen web app について調べたよTizen web app について調べたよ
Tizen web app について調べたよ
 
20200216 MacBook Proで姿勢検出
20200216 MacBook Proで姿勢検出20200216 MacBook Proで姿勢検出
20200216 MacBook Proで姿勢検出
 
Holo meetup3 lt_yamanaka
Holo meetup3 lt_yamanakaHolo meetup3 lt_yamanaka
Holo meetup3 lt_yamanaka
 
WebRTCとHoloLens
WebRTCとHoloLensWebRTCとHoloLens
WebRTCとHoloLens
 
Html5 でアプリを作るということ
Html5 でアプリを作るということHtml5 でアプリを作るということ
Html5 でアプリを作るということ
 
Gorilla.vim#6
Gorilla.vim#6Gorilla.vim#6
Gorilla.vim#6
 
Prottで変える開発プロセス
Prottで変える開発プロセスProttで変える開発プロセス
Prottで変える開発プロセス
 
20100930 DevLOVE Enagilized Work!
20100930 DevLOVE Enagilized Work!20100930 DevLOVE Enagilized Work!
20100930 DevLOVE Enagilized Work!
 
プログラマのためのPC自動化
プログラマのためのPC自動化プログラマのためのPC自動化
プログラマのためのPC自動化
 
Wcan12
Wcan12Wcan12
Wcan12
 

Semelhante a Creators'night#3今井

XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜Mitsuru Katoh
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介Mori Shingo
 
2016年第一回プレ卒研in山口研
2016年第一回プレ卒研in山口研2016年第一回プレ卒研in山口研
2016年第一回プレ卒研in山口研dmcc2015
 
Xcode bot
Xcode botXcode bot
Xcode bottoyship
 
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2Saya Katafuchi
 
Core Graphics on watchOS 2
Core Graphics on watchOS 2Core Graphics on watchOS 2
Core Graphics on watchOS 2Shuichi Tsutsumi
 
MobProgramming at ヴァル研究所 - 紹介
MobProgramming at ヴァル研究所 - 紹介MobProgramming at ヴァル研究所 - 紹介
MobProgramming at ヴァル研究所 - 紹介Toshiyuki Ando
 
GroovyなAndroidテスト #atest_hack
GroovyなAndroidテスト #atest_hackGroovyなAndroidテスト #atest_hack
GroovyなAndroidテスト #atest_hackTakahiro Yoshimura
 
その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・KLab Inc. / Tech
 
Swiftビギナーズ倶楽部 vol.2
Swiftビギナーズ倶楽部 vol.2Swiftビギナーズ倶楽部 vol.2
Swiftビギナーズ倶楽部 vol.2Kanako Kobayashi
 
Unityの夕べ in Fukuoka
Unityの夕べ in FukuokaUnityの夕べ in Fukuoka
Unityの夕べ in FukuokaShinobu Izumi
 
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Atsushi Harada
 
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくまMetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくまc-mitsuba
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)Yoshiki Ushida
 
Androidで使えるモックフレームワーク
Androidで使えるモックフレームワークAndroidで使えるモックフレームワーク
Androidで使えるモックフレームワークKoji Hasegawa
 
機械学習でテスト実行を効率化するLaunchable.pdf
機械学習でテスト実行を効率化するLaunchable.pdf機械学習でテスト実行を効率化するLaunchable.pdf
機械学習でテスト実行を効率化するLaunchable.pdfyusuke shibui
 

Semelhante a Creators'night#3今井 (20)

XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
XPagesDay 2014【B 1】最新のモバイル ui を瞬時に作成 〜x controlsのご紹介〜
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
 
2016年第一回プレ卒研in山口研
2016年第一回プレ卒研in山口研2016年第一回プレ卒研in山口研
2016年第一回プレ卒研in山口研
 
Xcode bot
Xcode botXcode bot
Xcode bot
 
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
 
Core Graphics on watchOS 2
Core Graphics on watchOS 2Core Graphics on watchOS 2
Core Graphics on watchOS 2
 
MobProgramming at ヴァル研究所 - 紹介
MobProgramming at ヴァル研究所 - 紹介MobProgramming at ヴァル研究所 - 紹介
MobProgramming at ヴァル研究所 - 紹介
 
GroovyなAndroidテスト #atest_hack
GroovyなAndroidテスト #atest_hackGroovyなAndroidテスト #atest_hack
GroovyなAndroidテスト #atest_hack
 
その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・その素敵なUI基盤を目指して・・・
その素敵なUI基盤を目指して・・・
 
Swiftビギナーズ倶楽部 vol.2
Swiftビギナーズ倶楽部 vol.2Swiftビギナーズ倶楽部 vol.2
Swiftビギナーズ倶楽部 vol.2
 
jOOQの紹介
jOOQの紹介jOOQの紹介
jOOQの紹介
 
Unityの夕べ in Fukuoka
Unityの夕べ in FukuokaUnityの夕べ in Fukuoka
Unityの夕べ in Fukuoka
 
Debug Hacks - 第4回つくらぐ勉強会
Debug Hacks - 第4回つくらぐ勉強会Debug Hacks - 第4回つくらぐ勉強会
Debug Hacks - 第4回つくらぐ勉強会
 
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
 
MetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくまMetroStyleAppsさわってみた わんくま
MetroStyleAppsさわってみた わんくま
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 
Androidで使えるモックフレームワーク
Androidで使えるモックフレームワークAndroidで使えるモックフレームワーク
Androidで使えるモックフレームワーク
 
java-ja TDD 2nd
java-ja TDD 2ndjava-ja TDD 2nd
java-ja TDD 2nd
 
Gws in fukuoka
Gws in fukuokaGws in fukuoka
Gws in fukuoka
 
機械学習でテスト実行を効率化するLaunchable.pdf
機械学習でテスト実行を効率化するLaunchable.pdf機械学習でテスト実行を効率化するLaunchable.pdf
機械学習でテスト実行を効率化するLaunchable.pdf
 

Mais de Daisuke Imai

PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~Daisuke Imai
 
デブコミュ#20150312
デブコミュ#20150312デブコミュ#20150312
デブコミュ#20150312Daisuke Imai
 
Creators'night#15今井
Creators'night#15今井Creators'night#15今井
Creators'night#15今井Daisuke Imai
 
Creators'night#14今井
Creators'night#14今井Creators'night#14今井
Creators'night#14今井Daisuke Imai
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Daisuke Imai
 
Creators'night#12今井
Creators'night#12今井Creators'night#12今井
Creators'night#12今井Daisuke Imai
 
Creators'night#10今井
Creators'night#10今井Creators'night#10今井
Creators'night#10今井Daisuke Imai
 
Creators'night#8今井
Creators'night#8今井Creators'night#8今井
Creators'night#8今井Daisuke Imai
 
Creators'night#7今井
Creators'night#7今井Creators'night#7今井
Creators'night#7今井Daisuke Imai
 
Creators'night#6今井
Creators'night#6今井Creators'night#6今井
Creators'night#6今井Daisuke Imai
 
Creators'night#5今井
Creators'night#5今井Creators'night#5今井
Creators'night#5今井Daisuke Imai
 
Creators'night#4今井
Creators'night#4今井Creators'night#4今井
Creators'night#4今井Daisuke Imai
 
Creators'night#1今井
Creators'night#1今井Creators'night#1今井
Creators'night#1今井Daisuke Imai
 
Beenos creators'night#201308今井
Beenos creators'night#201308今井Beenos creators'night#201308今井
Beenos creators'night#201308今井Daisuke Imai
 
Beenos creators'night#201307今井
Beenos creators'night#201307今井Beenos creators'night#201307今井
Beenos creators'night#201307今井Daisuke Imai
 
Beenos creators' night#201305今井
Beenos creators' night#201305今井Beenos creators' night#201305今井
Beenos creators' night#201305今井Daisuke Imai
 
Beenos creators' night#201306今井
Beenos creators' night#201306今井Beenos creators' night#201306今井
Beenos creators' night#201306今井Daisuke Imai
 

Mais de Daisuke Imai (20)

PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
PythonからV-Sido CONNECTで ロボットを操る ~ ハードウェアの絡んだ仕組みの制御を考える ~
 
デブコミュ#20150312
デブコミュ#20150312デブコミュ#20150312
デブコミュ#20150312
 
Creators'night#15今井
Creators'night#15今井Creators'night#15今井
Creators'night#15今井
 
Creators'night#14今井
Creators'night#14今井Creators'night#14今井
Creators'night#14今井
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
 
Creators'night#12今井
Creators'night#12今井Creators'night#12今井
Creators'night#12今井
 
Creators'night#10今井
Creators'night#10今井Creators'night#10今井
Creators'night#10今井
 
Creators'night#8今井
Creators'night#8今井Creators'night#8今井
Creators'night#8今井
 
Creators'night#7今井
Creators'night#7今井Creators'night#7今井
Creators'night#7今井
 
Creators'night#6今井
Creators'night#6今井Creators'night#6今井
Creators'night#6今井
 
Creators'night#5今井
Creators'night#5今井Creators'night#5今井
Creators'night#5今井
 
Creators'night#4今井
Creators'night#4今井Creators'night#4今井
Creators'night#4今井
 
Creators'night#1今井
Creators'night#1今井Creators'night#1今井
Creators'night#1今井
 
UI研究会#2
UI研究会#2UI研究会#2
UI研究会#2
 
UI研究会#3
UI研究会#3UI研究会#3
UI研究会#3
 
Beenos creators'night#201308今井
Beenos creators'night#201308今井Beenos creators'night#201308今井
Beenos creators'night#201308今井
 
Beenos creators'night#201307今井
Beenos creators'night#201307今井Beenos creators'night#201307今井
Beenos creators'night#201307今井
 
Ui研究会#1
Ui研究会#1Ui研究会#1
Ui研究会#1
 
Beenos creators' night#201305今井
Beenos creators' night#201305今井Beenos creators' night#201305今井
Beenos creators' night#201305今井
 
Beenos creators' night#201306今井
Beenos creators' night#201306今井Beenos creators' night#201306今井
Beenos creators' night#201306今井
 

Creators'night#3今井