Di tahun ini apple membuat gebrakan dengan liquid UI padahal dulu windows sudah pernah membuatnya lalu Kenapa Apple Bisa Dibilang Salah Satu Pionirnya Liquid UI
Halo teman,
Di ryanpratama.com, saya sering bahas evolusi desain dari tahun ke tahun. Kali ini saya mau ngobrol soal satu tren yang makin kelihatan di mobile apps dan sistem operasi modern:
Liquid UI — antarmuka yang terasa mengalir, hidup, dan responsif seperti cairan.
Bukan cuma sekadar smooth animation, tapi experience yang benar-benar terasa:
- Fleksibel
- Adaptif
- Dan nyatu sama gesture user
Dan ya, kalau kita mundur sedikit, Apple bisa dibilang salah satu perusahaan pionir yang nge-push tren ini, terutama di level mass-market.
https://www.apple.com/newsroom/images/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/article/Apple-WWDC25-Liquid-Glass-hero-250609_big.jpg.large.jpg
Daftar isi
Apa Itu Liquid UI?
Secara sederhana, saya menyebut Liquid UI sebagai:
UI yang terasa “mengalir seperi air” mengikuti interaksi user — bukan sekadar pindah state secara kaku dan patah-patah.
Ciri-cirinya:
- Transisi antarscreen nggak putus atau patah-patah, tapi berasa satu alur
- Elemen UI tidak cuma bergerak transisi tapi bisa:
- melebar
- mengecil
- melebur
- transform dari satu fungsi ke fungsi lain
- Gesture user (swipe, drag, tap, hold) dapet feedback yang organik, bukan cuma on/off
Buat teman yang sudah lama menjadi desain:
- Ini kayak gabungan antara motion design, micro-interaction, dan spatial UI yang dibikin super halus gerakannya .
Apple dan DNA “Fluid” di Desainnya
Kalau kita lihat jauh ke belakang, Apple memang sudah lama main di konsep UI yang fluid:
- Cover Flow di era iPod / awal iPhone → gesture dan visual terasa menyatu
- Springboard & bounce effect di iOS awal → scroll nggak pernah serasa kaku
- Physics-based animation → movement selalu punya rasa berat, momentum, dan elastisitas
Belakangan, konsep “liquid” ini makin kelihatan di:
- iOS 26 yang transisinya makin halus dan kontekstual
- Dynamic Island di iPhone terbaru yang bentuknya bisa:
- gede
- kecil
- memanjang
- split
- dan berubah fungsi tanpa terasa “lompat screen”
Benda kecil di atas layar ini sebenarnya contoh Liquid UI yang sangat jelas:
Satu elemen UI yang bisa berubah shape, fungsi, dan informasi secara fluid, tergantung konteks dan interaksi user.
Elemen-Elemen yang Bikin UI Terasa “Cair”
Kalau dipecah ke level desain, Liquid UI biasanya main di beberapa aspek:
Continuity (Keterhubungan Antar State)
User nggak pernah merasa lupa:
“Tadi gue di mana, kok tiba-tiba pindah ke sini?”
Karena:
- Elemen yang diklik bertransformasi ke halaman berikutnya
- Card bisa “melebar” jadi detail page
- Thumbnail bisa “membesar” jadi full view
Jadi, transisi bukan cuma efek, tapi penjelasan visual:
“oh, yang tadi gue tap itu sekarang jadi ini.”
Physics & Timing
Liquid UI selalu melakukan transisi:
- Easing yang halus banget
- Respond yang punya “rasa berat”
- Sedikit delay mikro yang bikin movement terasa natural (lemot yang di perhitungkan)
Ini yang bikin enak dilihat:
- Geser pelan → UI respons pelan
- Geser cepat → UI ikut “lari”
Bukan cuma linear → tapi beneran kayak ada fisika di baliknya.
Morphing & Resizing yang Organik
Alih-alih:
- Klik → hilang → muncul layar baru
Liquid UI lebih ke:
- Klik → elemen berubah bentuk → konten baru muncul dari perubahan itu
Contoh pattern-nya:
- Floating button → berubah jadi bottom sheet
- Search bar → melebar jadi full search view
- Mini player → grow jadi full player
https://www.apple.com/newsroom/images/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/article/Apple-WWDC25-Liquid-Glass-Home-Screen-clear-look-250609_big.jpg.large.jpg
Kenapa Tren Glass Ini Muncul Lagi Sekarang?
Beberapa faktor:
- Hardware Mobile Sudah Kuat & Cepat
- Prosesor makin kencang
- Refresh rate tinggi (90Hz–120Hz)
- Animation yang dulu dianggap berat pun sekranag terasa smooth
- Behavior User Makin Gesture-First
- Orang sudah terbiasa swipe, pinch, drag
- UX lama yang cuma “tap → cut → ganti screen” mulai terasa jadul
- OS Mulai Pikirin Spatial & Contextual UI
- Bukan sekadar page-to-page, tapi context-to-context
- Apple, Google, dan kawan-kawan lagi main di level: “Gimana bikin transisi UI yang nggak putus, tapi tetap jelas.”
Liquid UI di App Modern: Bukan Sekadar Gaya Baru, Tapi Experience Nyata
Banyak app sekarang mulai adopsi konsep ini, terutama:
- App finance / banking modern
- App creative tools
- App media / streaming
Mereka pakai Liquid UI untuk:
- Menjelaskan perpindahan state
- Ngurangin kognitif load
- Bikin user ngerasa “nggak tersesat” saat navigasi
Buat teman yang desain app:
- UI cair yang well-executed bisa bikin:
- produk kerasa premium
- interaksi terasa menyenangkan
- waktu pakai app terasa lebih pendek (padahal sama)
Tantangan: Liquidity vs Kejelasan
Tapi, seperti tren desain lainnya, Liquid UI juga punya jebakan:
- Terlalu banyak animasi → user capek
- Terlalu smooth → terasa lambat bahkan lemot
- Terlalu playful → mengganggu fungsi
Jadi menurut saya, prinsipnya:
Fluid, tapi tetap jelas. Cantik tampilannya, tapi tetap cepat.
Desainer perlu mikir:
- Mana transisi yang benar-benar perlu
- Mana interaksi yang harus instan tanpa drama animasi
- Mana momen yang boleh dikasih “rasa” ekstra lewat animasi
Apa yang Bisa Dipelajari Desainer dari Liquid UI?
Beberapa hal yang bisa teman ambil:
- Mulai mikir UI sebagai “perjalanan”, bukan kumpulan screen yang di tata
- Latih sense timing & easing untuk gerasa lebih halus
- Belajar basic motion & physics di UI tools / prototyping
- Jangan cuma copy efek, tapi pikirkan narasi visual di baliknya
Penutup: Apple Pionir, Tapi Bukan Satu-Satunya
Kalau ngomong pionir di Liquid UI mass-market:
- Apple jelas punya kontribusi besar:
- dari era iOS awal
- sampai Dynamic Island dan fluid interface lain
Tapi ke depan, menurut saya rasanys:
Liquid UI bakal jadi baseline expectation di banyak produk digital — bukan cuma di ekosistem Apple.
Sumber:
Gambar Utama: https://www.apple.com/newsroom/images/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/article/Apple-WWDC25-Liquid-Glass-Icon-Composer-250609_big.jpg.large.jpg
