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
430
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
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
510
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
The Spectacular Lies of Maps
axbom
PRO
1
310
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
510
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
110
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.3k
Embracing the Ebb and Flow
colly
88
4.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Gamification - CAS2011
davidbonilla
81
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Making Projects Easy
brettharned
120
6.4k
Code Review Best Practice
trishagee
72
19k
The Invisible Side of Design
smashingmag
302
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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アプリに実装していく!(ネイティブに負けないように)