Inspirasi Button Dengan pop-up
Hari ini kita ingin berbagi sedikit inspirasi untuk konsep tombol morphing. Anda pasti sudah menemukan konsep ini: idenya adalah menggunakan elemen tindakan, seperti sebuah tombol, dan mengubahnya menjadi sesuatu yang lain saat diklik. Pada dasarnya, elemen tindakan sedang "digunakan kembali" secara visual untuk mengungkapkan beberapa konten lainnya. Ini bisa berupa overlay fullscreen, jendela modal, tombol share yang meluas, dan sebagainya.
Cara kita mengubah satu tombol menjadi, misalnya, hamparan layar penuh adalah sebagai berikut: Kami memiliki pembungkus tombol utama yang berisi elemen tombol dan pembagian untuk konten yang diperluas. Sementara elemen pembungkus dan tombol awalnya terlihat, pembagian untuk konten yang diperluas hanya akan muncul begitu kita mengklik tombolnya. Divisi itu memiliki posisi tetap, memungkinkan kita melepaskannya dari arus. Kami memposisikannya di atas tombol sebenarnya dan memudar, sehingga terlihat seolah-olah tombol itu sendiri bergerak menjauh dari konteksnya dan terbang keluar. Dengan beberapa transisi dan penundaan transisi yang disesuaikan, kita memudar dalam kandungan batin begitu kita telah memperluas elemen morphing.
Dalam contoh lain, kita melakukan beberapa hal lain pada konten dalam, seperti menskalakannya atau menggesernya - ada banyak kemungkinan di sini. Hal lain yang menarik adalah dengan memindahkan elemen dari tombol dengan divisi yang meluas, dan menggunakannya kembali sebagai judul, atau, seperti yang ditunjukkan pada contoh pemutar video, sebagai elemen kontrol. Untuk beberapa kasus mungkin tidak diperlukan untuk menutup elemen yang telah berubah sebelumnya, seperti misalnya tombol berbagi (sekali skrip berbagi sosial dimuat, misalnya).
Pada contoh terakhir, kami memiliki sedikit masalah dengan FF: transisi untuk konten tampaknya rusak karena beberapa alasan ...
Morphing elemen tindakan ke dalam komponen aktual yang memungkinkan dilakukannya tindakan, merupakan konsep yang menarik dan tentunya memungkinkan banyak kasus penggunaan yang beragam. Ada sesuatu yang menarik untuk itu tapi perhatikan bahwa elemen tindakan "lenyap" dari arus. Saat bekerja dengan hamparan, ini mungkin bukan masalah besar, namun mungkin ada kasus yang mendapat manfaat dari elemen tindakan hadir di UI. Apa pendapat anda tentang ini? Menurut Anda apakah ini interaksi yang menarik?
Password: www.duniadesain.net
Source: Tympanus
Harap dicatat bahwa ini hanya untuk tujuan inspirasi saja! Sebagian besar konten dan fungsionalitas terdiri dari dummies dan kami hanya mendukung peramban modern.
Cara kita mengubah satu tombol menjadi, misalnya, hamparan layar penuh adalah sebagai berikut: Kami memiliki pembungkus tombol utama yang berisi elemen tombol dan pembagian untuk konten yang diperluas. Sementara elemen pembungkus dan tombol awalnya terlihat, pembagian untuk konten yang diperluas hanya akan muncul begitu kita mengklik tombolnya. Divisi itu memiliki posisi tetap, memungkinkan kita melepaskannya dari arus. Kami memposisikannya di atas tombol sebenarnya dan memudar, sehingga terlihat seolah-olah tombol itu sendiri bergerak menjauh dari konteksnya dan terbang keluar. Dengan beberapa transisi dan penundaan transisi yang disesuaikan, kita memudar dalam kandungan batin begitu kita telah memperluas elemen morphing.
Dalam contoh lain, kita melakukan beberapa hal lain pada konten dalam, seperti menskalakannya atau menggesernya - ada banyak kemungkinan di sini. Hal lain yang menarik adalah dengan memindahkan elemen dari tombol dengan divisi yang meluas, dan menggunakannya kembali sebagai judul, atau, seperti yang ditunjukkan pada contoh pemutar video, sebagai elemen kontrol. Untuk beberapa kasus mungkin tidak diperlukan untuk menutup elemen yang telah berubah sebelumnya, seperti misalnya tombol berbagi (sekali skrip berbagi sosial dimuat, misalnya).
Pada contoh terakhir, kami memiliki sedikit masalah dengan FF: transisi untuk konten tampaknya rusak karena beberapa alasan ...
Morphing elemen tindakan ke dalam komponen aktual yang memungkinkan dilakukannya tindakan, merupakan konsep yang menarik dan tentunya memungkinkan banyak kasus penggunaan yang beragam. Ada sesuatu yang menarik untuk itu tapi perhatikan bahwa elemen tindakan "lenyap" dari arus. Saat bekerja dengan hamparan, ini mungkin bukan masalah besar, namun mungkin ada kasus yang mendapat manfaat dari elemen tindakan hadir di UI. Apa pendapat anda tentang ini? Menurut Anda apakah ini interaksi yang menarik?
Password: www.duniadesain.net
Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)Kami harap Anda menikmati konsep kecil ini dan mendapatkan inspirasi!
Source: Tympanus
Comments
Post a Comment