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
240
Fluid interfaces for Monaca
Daisuke Kishino
December 13, 2018
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
410
Monaca、WKWebViewに移行しようぜ!
kishino
0
900
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
880
Sign In with Appleを実装してみた
kishino
0
430
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
730
Other Decks in Design
See All in Design
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
510
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
130
線で考える画面構成
natsuume
1
880
Storyboard Honey
rocioparronrubio
0
270
Cards | Storyboards
giofortuna_story
0
280
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
400
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
100
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
430
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.9k
harutaka Vision Deck
zenkigenforrecruit
0
130
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
160
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Invisible Side of Design
smashingmag
299
51k
Raft: Consensus for Rubyists
vanstee
140
7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
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アプリに実装していく!(ネイティブに負けないように)