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
200
Fluid interfaces for Monaca
Daisuke Kishino
December 13, 2018
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
340
Monaca、WKWebViewに移行しようぜ!
kishino
0
750
Ionicあらまし@okayama-js
kishino
0
870
MonacaアプリをネイティブのUXに近づけるために
kishino
0
670
Sign In with Appleを実装してみた
kishino
0
320
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
580
Other Decks in Design
See All in Design
Design Leadership in Challenging Times
morganepeng
3
300
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
260
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
MiKS inc. Company PR en_202404
zakkerooni
0
110
プロダクトデザインは子育て/Product design is parenting
medley
0
280
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
360
Designing UIs without a UI designer
strongeron
0
110
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.8k
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
180
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
320
Featured
See All Featured
Building Adaptive Systems
keathley
30
1.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Being A Developer After 40
akosma
56
580k
Visualization
eitanlees
135
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
How to name files
jennybc
64
92k
Six Lessons from altMBA
skipperchong
20
3k
Happy Clients
brianwarren
91
6.4k
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アプリに実装していく!(ネイティブに負けないように)