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
900
Sign In with Appleを実装してみた
kishino
0
430
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
750
Other Decks in Design
See All in Design
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
120
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
480
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
1.2k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Fireside Chat
paigeccino
39
3.6k
The Cult of Friendly URLs
andyhume
79
6.6k
It's Worth the Effort
3n
187
28k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Designing for humans not robots
tammielis
253
25k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Optimising Largest Contentful Paint
csswizardry
37
3.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アプリに実装していく!(ネイティブに負けないように)