Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fluid interfaces for Monaca
Search
Daisuke Kishino
December 13, 2018
Design
0
250
Fluid interfaces for Monaca
Daisuke Kishino
December 13, 2018
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
420
Monaca、WKWebViewに移行しようぜ!
kishino
0
910
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
890
Sign In with Appleを実装してみた
kishino
0
430
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
750
Other Decks in Design
See All in Design
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
370
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
720
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
7 Core Values of Round-L
wired888
0
1.7k
harutaka Vision Deck
zenkigenforrecruit
0
220
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
800
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
810
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Site-Speed That Sticks
csswizardry
10
810
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Writing Fast Ruby
sferik
628
62k
Designing for humans not robots
tammielis
253
25k
It's Worth the Effort
3n
187
28k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
Fluid interfaces for Monaca Monaca UG OKAYAMA#3 Daisuke Kishino
None
A tool that feels like an extension of your mind
思考の延長のように感じるツール (=体の一部のように感じるインターフェース)
•Redirectable •Seamless Motion •Monacaで実装
Redirectable
iPhone 8 iPhone X
考えてから動かす 考える 決定する 動かす 離す
考えながら動かす 考える 決定する 動かす 離す
Swipe Back
Modal (YouTube)
Seamless Motion
None
Spring Animation (ばね)
•減衰比(damping ratio) •周波数応答(frequency) http://dynamicsjs.com/
Apple Music
Monacaで実装
YouTubeライクなUI
減衰比100% 減衰比80%
タッチ開始時点の 座標 タッチ開始時点のモーダル 位置 スワイプ分モーダル 位置を変更 表示範囲内なら、実際に を更新 タッチ終了時に画面半分下ならモーダルを最小化する ‘
’ 減衰比80%でアニメーション実行 画面半分以上ならモーダルを最大化する ‘ ’ 減衰比100%でアニメーション実行
None
ハマった点
• スクロールとの兼ね合い • モーダルを閉じている間は、スクロールできないよう にする(Event.preventDefault) • タッチイベントは画像のみに設定する
https://github.com/kishino/fluid-interfaces-sample
まとめ
• Fluid interfacesはこれまでもあったし、これからより普及する • HTML/JS/CSSでも実現は可能(実装コストはかかる) • 少しずつでもMonacaアプリに実装していく!(ネイティブに負けないように)