Mobile UI Design | Tipe Dasar Antarmuka Tampilan Layar

Smartphone telah merambah setiap aktivitas kehidupan kita. Setiap Aplikasi membantu kita dan membuat hidup menjadi lebih mudah. Tugas seorang desainer adalah menciptakan user interface yang memenuhi kebutuhan pengguna dan membuat pengalaman menjadi menyenangkan dan memuaskan. Untuk membangun UI yang efektif, perancang perlu terjun terhadap karakteristik aplikasi mobile, mempelajari setiap komponen dan fungsionalitasnya. Saat ini sulit untuk membedakan set standar layar yang diperlukan untuk aplikasi apa pun karena industri mobile berkembang dengan cepat begitu juga dengan aplikasi. Pada artikel ini menyajikan jenis-jenis bagian antarmuka mobile yang paling umum dengan lampiran desain visual komponen yang dibutuhkan.

Layar Common

Splash screen

Kesan pertama adalah salah satu kunci yang mempengaruhi opini pengguna tentang aplikasi mobile. Bila sejak awal pengalaman pengguna dengan sebuah aplikasi itu menyenangkan, kemungkinan besar akan mudah populer di kalangan pengguna. Sebab splash screen menjadi fokus perhatian awal pada beberapa tampilan aplikasi mobile.

Layar Splash adalah penggunaan gambar awal pada saat peluncuran aplikasi mobile. Hal ini biasanya minimalis dan menyajikan nama, logo, atau slogan sebuah produk. Untuk memastikan splash screen akan terlihat bagus pada perangkat yang berbeda, desainer sering memfokuskan elemen di tengah layar. Layar splash disarankan untuk ditampilkan tidak lebih dari 4-8 detik. Selain itu, splash screen juga berperan dalam proses pemuatan layar utama dari aplikasi.

Jewellery E-Commerce App

Onboarding tutorial

Onboarding tutorial adalah serangkaian layar yang menampilkan sistem navigasi, fitur, dan manfaat aplikasi terhadap pengguna. Hal ini muncul saat pertama kalinya diluncurkan aplikasi. Dengan demikian dapat membantu mengorientasikan pada berbagai fitur dan kontrol yang tidak biasa serta memberikan pemahaman jika aplikasi tersebut bermanfaat bagi pengguna.

Underwater World Encyclopedia — bagian tutorial

Home dan menu

Layar utama adalah bagian penting dari aplikasi. Dalam konteksnya merupakan tempat dimana pengguna berinteraksi dengan sebagian besar pilihan. Layar home didesain tergantung dari jenis produk dan tujuannya. Pertama-tama, layar home biasanya menyertakan kolom pencarian atau tombol sehingga pengguna bisa dengan mudah mencari konten yang mereka butuhkan. Selain itu, karena layar home merupakan titik awal untuk perjalanan pengguna, seringkali terdapat elemen navigasi yang menyediakan akses ke berbagai bagian konten.

Homey App

Agar interaksi pengguna menjadi lebih mudah, aplikasi mobile menggunakan menu yang berisi daftar petunjuk yang mungkin pengguna dapat pindah ke dalam satu klik. Ada dua varian penyajian menu dalam aplikasi mobile: bisa jadi bagian dari home screen atau separate screen.

Slide Menu Concept

Log-in dan profil

Saat ini banyak aplikasi yang menawarkan pengguna untuk membuat akun pribadi mereka, sehingga setiap perancang perlu mengetahui cara bekerja dengan layar login dan profil. Layar login harus minimalis dan jelas sehingga pengguna bisa dengan mudah mengakses aplikasi. Biasanya ada dua bidang dimana pengguna bisa memasukkan nama dan password mereka beserta tombol konfirmasi. Bagi orang yang menggunakan aplikasi untuk pertama kalinya, selalu ada opsi pendaftaran.

Layar Profil membuat interaksi dalam aplikasi mobile lebih personal dan memungkinkan operasi dengan data secara efektif. Selain ini, akun pribadi adalah bagian penting dari aplikasi jejaring sosial mana pun yang melibatkan pengguna ke komunitas jaringan virtual dan memungkinkan untuk berbagi info pribadi dengan yang lain. Tugas utama desainer adalah memaksimalkan kenyamanan melalui smart UX. Menurut Interaction Design Foundation, poin pertama desainer harus mempertimbangkan bahwa halaman profil harus jelas bila digunakan. Jumlah informasi harus dibatasi. Jika tidak, layar profil mungkin akan terlihat terlalu rumit. Terlebih lagi, penting untuk memastikan sistem navigasinya intuitif. Dengan cara ini pengguna tidak perlu banyak usaha untuk memecahkan masalah aplikasi. Terakhir, desain layar profil harus berorientasi pada target pengguna aplikasi. Dengan melibatkan penelitian user adalah suatu keharusan jika ingin aplikasi Anda memenuhi kebutuhan pengguna.

Dating App

Layar Statistik

Berbagai aplikasi mengandung statistik aktivitas pengguna. Semakin banyak data yang diberikannya, semakin sulit untuk membuat desain mobile dari layar statistik. Desainer perlu memastikan bahwa semua informasi kunci masih dapat dilihat jelas dan bermanfaat. Lengkung grafik, timbangan dan ikon asli dapat membuat layar statistik terlihat mulus dan bersih pada aplikasi mobile. Selain itu, layar statistik memerlukan tipografi yang berbeda sehingga pengguna dapat dengan mudah membaca datanya.

NGIN App

Kalender

Aplikasi Event, aplikasi daftar agenda, dll memberikan pengguna berupa kalender pribadi. Bergantung pada jenis aplikasi, kalender membuat fungsi tertentu seperti mengingatkan atau menjadwalkan. Gaya visual harus sesuai dengan mood dan tujuan aplikasi.

Layar e-commerce

Katalog

Tujuan utama dari setiap proyek e-commerce adalah menjual produk. Presentasi visual memiliki dampak yang besar pada keputusan pengguna. Sebuah katalog adalah daftar barang yang ditawarkan perusahaan untuk dijual. Tugas perancang adalah membuat katalog yang akan menarik perhatian pengguna dan mendorong mereka untuk membeli produk. Daftar produk di aplikasi mobile bisa serupa dengan banyak situs web e-commerce dengan item yang ditempatkan dalam bentuk deretan dan dapat dilihat melalui gulir vertikal. Jumlah produk dalam satu baris diselesaikan sesuai dengan lebar layar.

Resto App

Pendekatan lain terhadap organisasi produk dalam katalog adalah baris dengan gulir horizontal. Untuk membuat navigasi intuitif item terakhir dalam baris horizontal harus ditunjukkan tidak dalam tampilan penuh agar pengguna melihat bahwa ini adalah arah bergulir. Selain itu, foto atau ilustrasi produk seharusnya dengan kualitas tinggi sehingga pengguna dapat dengan jelas melihat apa yang akan mereka beli. Layar katalog harus menyertakan tombol ajakan yang dapat digunakan pengguna untuk menambahkan item ke keranjang. Dengan cara ini pengguna akan bisa mengambil produk langsung dari layar katalog tanpa perlu masuk ke halaman tertentu.

Kartu Produk

Layar ini untuk orang yang suka mengetahui apa sebenarnya yang mereka beli. Kartu produk menunjukkan informasi penting tentang barang yang membantu pengguna memutuskan apakah mereka memerlukan produk tersebut atau tidak. Desainer harus fokus pada foto produk dengan meletakkannya di tengah layar. Data deskripsi biasanya ditempatkan di bawahnya. Desainer dapat membagi data ke dalam kelompok seperti ukuran, material atau lainnya sehingga pengguna dapat dengan mudah menemukan info yang mereka butuhkan.

Jewellery E-Commerce App

Layar Check out

Saat ini banyak pembelian dilakukan melalui smartphone sehingga perusahaan mencoba membuat proses mobile shopping seaman mungkin yang belum pernah ada sebelumnya. Proses checkout adalah langkah terakhir yang dilakukan pengguna sebelum mereka membeli produk. Tugas perancang adalah membuat orang nyaman saat mengambil langkah ini. Salah satu bagian penting dari layar ini adalah formulir dimana pembeli mengisi data pribadi tertentu seperti nama dan nomor kartu kredit. Jenis informasi yang dibutuhkan bergantung pada sumber daya tempat pengguna melakukan pembelian. Selain itu, penting bagi orang untuk mengetahui data pribadi mereka secara aman, sehingga perancang harus meyakinkan pengguna melalui elemen visual agar informasinya benar-benar aman. Hal ini bisa berupa info dalam salinan dan beberapa ikon merek terkenal yang memberi persetujuan atau bahkan beberapa tanda sertifikat jika ada.

Cinema App

Layar sosial

Feed / Umpan

Banyak orang sering menggunakan berbagai aplikasi jejaring sosial untuk berkomunikasi dan mengikuti berita atau update kondisi di sekitar mereka. Feed adalah daftar berita dan data terkini yang terus berubah yang pengguna pilih untuk diikuti. Dalam kasusnya menunjukkan bahwa pengguna ponsel lebih memilih pemindaian dengan cepat melalui umpan, sehingga mengapa mereka memerlukan desain yang jelas sederhana dan tidak terlalu banyak memuat detail visual. Berita bisa dipresentasikan satu per satu via gulir. Untuk membuat navigasi lebih intuitif, berita berikutnya harus ditunjukkan sebagian.

Timeline App

Kontak

Daftar kontak cukup berkembang dalam waktu yang lama. Dari catatan kertas ke varian digital yang berbeda, perubahannya hanya secara visual namun tetap memberikan satu tujuan yaitu: menyimpan data kontak tentang teman dan orang dekat lainnya. Layar kontak menyajikan daftar kontak data pengguna yang diurutkan menurut nama sesuai urutan abjad. Setiap kontak harus dapat diklik dan menghasilkan data rinci yang mencakup nomor telepon, email, dan terkadang kontak di Skype, Messenger, dll. Namun terkadang juga, info kontak diberikan dengan foto kecil yang memudahkan proses pencarian.

Konsep daftar kontak

Layar musik

Playlist / Daftar Putar

Pecinta musik seperti membuat playlist mereka sendiri untuk setiap kesempatan. Jelas, setiap aplikasi musik diwajibkan menyediakan fitur khas mereka kepada penggunanya. Layar daftar putar terlihat serupa di berbagai aplikasi. Setiap daftar lagu yang akan menunjukkan nama lagu, penyanyi atau band, dan durasi soundtrack. Selain itu, desainer bisa menambahkan gambar kecil dari album yang menjadi track lagu ini. Jika lagu tidak memiliki gambar, tetap ada ikon, misalnya dengan catatan musik.

Music App

Player

Orang bisa mengontrol apa yang mereka dengarkan dan bagaimana mereka mendengarkannya melalui player. Fitur ini memungkinkan perpindahan, penghentian dan memulai trek dengan tombol standar yang mudah dikenali. Set ini biasanya diletakkan terpusat di bagian bawah layar. Bagian utama layar biasanya berupa lampiran gambar album. Selain itu, terkadang bukan sebuah gambar, banyak desainer menerapkan penglihatan musik sebagai bagian tengah layar. Visualizer adalah salah satu komponen yang baik untuk mengungkap imajinasi dan kreativitas yang selalu menginspirasi para desainer.

Saat ini, banyak aplikasi mobile bertebaran, dengan menghadirkan tipe antarmuka layar yang lebih baru dan segar untuk memberikan nuansa khas bagi pengguna. So, desainer harus siap menghadapi tantangan ini dan selalu mengikuti inovasi. Terinspirasi!

Share this article to

Leave a Reply

Your email address will not be published. Required fields are marked *