Jauh sebelum media sosial mengambil alih layar kita, obrolan internet adalah pembuang waktu online asli. Seseorang bisa menghabiskan waktu berjam-jam untuk IRC dan berbagai macam aplikasi perpesanan langsung lainnya. Bagi mereka yang mengambil bagian dalam obsesi, larut malam sering berubah menjadi pagi. Tidur hilang, pergelangan tangan pegal. Apa waktu untuk hidup!
Meskipun obrolan telah berubah sedikit sejak hari-hari awal itu, itu masih relevan. Hanya sekarang ini telah menjadi pokok layanan pelanggan dan saluran tim Slack.
Dan komunikasi telah lebih ditingkatkan dengan teknik CSS dan JavaScript terbaru. Mereka memungkinkan untuk membuat UI interaktif yang luar biasa, sambil menyediakan fungsionalitas yang lebih canggih juga.
Hari ini, kami akan menunjukkan delapan UI obrolan yang menarik dan unik. Mereka sangat hebat, Anda bahkan mungkin LOL.
UI Aplikasi Perpesanan dengan Mode Gelap oleh Aysenur Turk
Facebook Messenger sangat populer dan tidak heran para pengembang ingin menirunya. Tampilannya sederhana, efektif dan langsung dikenali. Berikut adalah remix yang menyertakan opsi mode gelap yang selalu trendi.
Lihat Pena UI Aplikasi Perpesanan dengan Mode Gelap oleh Aysenur Turk
UI Harian #013: Pesan Langsung oleh Fabio Ottaviani
Glassmorphism adalah tampilan yang populer akhir-akhir ini. Di sini, sentuhan gayanya digunakan untuk menghidupkan UI perpesanan pribadi ini. Untungnya, hasilnya jauh dari aplikasi obrolan teks biasa yang membosankan di masa lalu.
Lihat Pena UI Harian #013: Pesan Langsung oleh Fabio Ottaviani
Demo Visual MSN Messenger 7.5 dengan WebComponents (HTML+CSS+Javascript) oleh Manzo
Berbicara tentang masa lalu, cuplikan UI ini menciptakan kembali tampilan MSN Messenger. Ini cukup otentik, sampai ke ikon 3D yang tebal. Ini tidak hanya menunjukkan seberapa jauh kita telah melangkah, tetapi juga merupakan latihan yang bagus dalam menggunakan gaya modern untuk mengembalikan favorit lama.
Lihat Pena Demo Visual MSN Messenger 7.5 dengan WebComponents (HTML+CSS+Javascript) oleh Manzo
tombol obrolan situs web mengambang (terinspirasi interkom) oleh neil kalman
Inilah tren yang kita lihat di mana-mana. UI obrolan “mengambang” yang macet tidak nyaman di kanan bawah layar. Klik tombol dan mulai mengetik. Ini tentu berguna, terutama untuk tujuan penjualan dan dukungan. Berhati-hatilah: Anda mungkin berbicara dengan bot, bukan manusia sungguhan.
Lihat Pena tombol obrolan situs web mengambang (terinspirasi interkom) oleh neil kalman
Animasi Obrolan Palsu oleh Jacob Foster
Mungkin Anda berada di tahap awal proyek berbasis obrolan dan belum sepenuhnya memahami UI. Jangan khawatir, karena cuplikan animasi obrolan tiruan ini dapat berfungsi sebagai pengganti yang solid. Demonya bersih, penuh warna, dan menginspirasi. Itu membuatnya sempurna untuk wireframing.
Lihat Pena Animasi Obrolan Palsu oleh Jacob Foster
Desain jendela obrolan bergaya oleh Mamun Khandaker
Bagi mereka yang menggunakan obrolan untuk memberikan dukungan pelanggan, kemungkinan Anda berurusan dengan banyak percakapan. Cuplikan UI ini memberikan solusi berupa jendela yang tertata rapi. Masing-masing dapat diminimalkan dan dimactionmalkan. Perhatikan ikon indikator status di dalam judul – membuatnya lebih mudah untuk melihat apa yang terjadi.
Lihat Pena Desain jendela obrolan bergaya oleh Mamun Khandaker
Antarmuka Obrolan Sederhana oleh Sajad Hashemian
Seperti kebanyakan hal yang berhubungan dengan desain, sederhana seringkali lebih baik. UI obrolan dapat dipenuhi dengan efek konyol dan font yang tidak dapat dibaca. Tapi bukan disini. Sebaliknya, “Obrolan Sederhana” ini intuitif. Yang terbaik dari semuanya, Anda tidak perlu memperbesar untuk membacanya.
Lihat Pena Antarmuka Obrolan Sederhana oleh Sajad Hashemian
Baris Perintah Klub oleh Jon Kantner
Tidak ada aturan yang mengatakan bahwa obrolan harus berupa pengalaman teks saja. Contoh tertentu mungkin membutuhkan sesuatu yang sedikit lebih menyenangkan. Dan itulah yang dilakukan oleh UI obrolan seperti video game ini. Gunakan tombol panah Anda untuk menggerakkan karakter Anda dan mengobrol tentang badai. Jika Anda ingin melacak percakapan dengan lebih baik, tombol “Lihat Obrolan” akan menampilkan arsip teks.
Lihat Pena Baris Perintah Klub oleh Jon Kantner
BRB, Membangun UI Obrolan yang Lebih Baik
Dengan begitu banyak teknologi mutakhir yang tersedia, ada banyak kemungkinan untuk UI obrolan. Namun, tujuan keseluruhan harus sama. Tidak peduli lonceng dan peluit apa yang kami tambahkan ke dalam campuran, idenya adalah untuk menciptakan sesuatu yang mudah digunakan dan dipahami.
Pelajaran lain di sini adalah bahwa pilihan desain yang kita buat harus didasarkan pada kebutuhan. Misalnya, beberapa cuplikan di atas akan bagus untuk komunitas game online – tetapi tidak untuk saluran penjualan korporat. Antarmuka pengguna berfungsi paling baik ketika mencerminkan orang-orang yang akan dilayaninya.
Kami harap Anda menikmati penyelaman ini ke dunia obrolan dan perpesanan. Jika Anda ingin melihat lebih banyak contoh, kunjungi kami Koleksi CodePen.
.
