Mobile Typography: 8 Langkah Menuju UI yang Kuat.

Desain ponsel sangat bergantung pada setiap detail yang dikandungnya. Layar cukup kecil sehingga perancang harus memilih elemen yang dengan serius berusaha untuk tidak membebani antarmuka pengguna. Keunikan seperti itu membuat penciptaan tipografi untuk tugas yang agak sulit. Tipografi seluler membutuhkan perhatian mendalam terhadap detail dari jenis font yang sesuai hingga pelacakan dan penyelarasan yang menarik.

Tidak peduli seberapa menantang kedengarannya, para desainer berusaha untuk membangun desain ponsel yang efektif karena smartphone adalah bagian besar dari kehidupan kita. Artikel ini menjelaskan prinsip-prinsip penting untuk tipografi seluler yang menarik.

Tingkat keterbacaan tinggi

Keterbacaan disebut tingkat bagaimana dibedakan dan dikenali kata-kata dan karakter dalam teks. Tujuan utama dari tipografi yang kuat adalah teks yang jelas yang dipahami pengguna tanpa upaya. Layar kecil dan cahaya ambient perangkat mobile dapat menjadi masalah dalam perjalanan untuk menciptakan tipografi yang dapat dibaca. Untuk menghindari masalah dengan keterbacaan, desainer perlu mempertimbangkan semua faktor yang mempengaruhi kejelasan teks.

Ukuran huruf

Dalam hal tipografi seluler, ukurannya sangat penting. Beberapa orang mungkin berpikir bahwa pada layar kecil, font kecil akan bekerja paling baik. Itu sebuah ketidakpercayaan. Font kecil pada layar ponsel yang terang dapat membuat mata pengguna sakit karena ketegangan dan membuat sakit kepala. Tentu saja, perangkat modern memungkinkan pembesaran layar tetap tidak selalu mudah bagi pengguna untuk menghemat upaya yang tidak perlu. Font di UI seluler harus cukup besar agar pengguna dapat membaca dengan mudah tetapi tidak terlalu besar untuk menyimpan hierarki tipografi. Ukuran font yang sesuai adalah kunci untuk menyenangkan UX.

Terkemuka

Seperti yang telah kami sebutkan di artikel sebelumnya, memimpin adalah jarak antara baseline salinan. Dalam antarmuka seluler, memimpin biasanya lebih kecil dibandingkan dengan versi desktop. Terkemuka lebar dapat merusak kesatuan teks visual sementara ruang terlalu pendek membuatnya sulit dibaca. Jika memimpin dilakukan dengan benar, pembaca bergerak cepat dari satu baris teks ke teks lain dan potongan-potongan besar menjadi terbaca.

To-Do List App

Panjang garis

Untuk membuat salinan tubuh nyaman untuk membaca di antarmuka seluler, perancang mempertimbangkan semua parameter termasuk panjang garis teks. Panjang baris optimal untuk layar desktop tidak akan berfungsi sama untuk seluler. Garis terlalu panjang akan melampaui batas layar, itulah sebabnya desainer disarankan untuk menjaga jumlah karakter per baris dalam 30-40.

Ruang putih

Ketika elemen desain dikumpulkan secara ketat, antarmuka pengguna terlihat berantakan dan navigasi agak sulit. Desainer perlu memberi elemen ruang untuk bernafas sehingga melegakan mata dan pikiran pengguna. Ukuran layar seluler tidak memungkinkan penggunaan banyak ruang putih sehingga keseimbangan di antara elemen harus ditemukan.

Tahun Anggur App

Lebih sedikit tingkat hierarki

Hirarki visual diterapkan untuk mengatur konten dalam antarmuka dengan jelas sehingga pengguna dapat membedakan objek tata letak berdasarkan perbedaan fisik mereka, seperti ukuran, warna, kontras, penyelarasan, dll. Hirarki membagi konten ke tingkat yang membantu pengguna untuk mempelajari konten salinan secara bertahap langkah demi langkah melangkah tanpa usaha dan berorientasi pada produk digital.

Desain web biasanya berisi tiga level konten salin yang mencakup elemen seperti judul, sub-judul, body copy, tombol CTA, dan caption. Namun, layar ponsel kecil tidak menyediakan ruang yang cukup untuk tiga level, jadi desainer hanya menerapkan dua. Elemen level sekunder seperti subheaders menyingkir untuk membuat UI terlihat bersih.

Aplikasi Berbasis-Uang

Kesederhanaan font

Fitur utama dari UI seluler yang efektif adalah kesederhanaan. Desain harus jelas dan navigasi mudah digunakan, sehingga pilihan font harus didasarkan pada persyaratan. Pertama-tama, disarankan untuk menyimpan sejumlah font dalam dua atau tiga untuk membuat teks terlihat solid. Desainer sering menghentikan pilihan mereka pada dua jenis font untuk antarmuka seluler karena memerlukan tingkat hierarki yang lebih sedikit daripada desain web.

Selain itu, jenis font juga harus sesuai dengan gaya yang sederhana dan bersih. Font baru dan dekoratif mungkin terlihat tidak terbaca di layar kecil. Desainer secara teratur menggabungkan serif dan font sans-serif untuk menciptakan kontras yang cukup dari elemen salin dalam tata letak. Selain itu, ada baiknya mengurangi efek seperti bayangan untuk font seluler. Pada layar desktop, mereka dapat bekerja dengan baik tetapi akan membuat layar ponsel kecil terlihat kelebihan beban.

Interaksi Tukar Pesan

Kontras halus

Kontras adalah alat yang efisien untuk para desainer. Ini membantu menyoroti elemen UI penting serta berkontribusi tingkat keterbacaan teks yang diinginkan. Namun, berbicara tentang antarmuka seluler, kontras mungkin memainkan lelucon yang buruk. Layar kecil, cahaya ambient, dan font pendek membuat gambar kontras tampak tidak menyenangkan bagi mata pengguna. Mengurangi kontras antara elemen latar belakang dan salin, desainer membantu pengguna merasa nyaman saat membaca teks di layar ponsel.

Kontras dapat dibuat tidak hanya melalui warna tetapi dengan ukuran font untuk mengatur hirarki visual. Namun demikian, antarmuka seluler adalah ruang yang sempit untuk judul raksasa, itu sebabnya kontras ukuran juga harus dikurangi.

Aplikasi E-Commerce Perhiasan

Tipografi yang responsif

Orang-orang menjelajah Internet melalui semua perangkat yang tersedia saat ini. Itulah mengapa desain responsif adalah syarat utama untuk produk digital yang sukses. Tipografi merupakan bagian penting dari respon desain. Ukuran salah, lebar, dan penempatan font memiliki dampak besar pada keseluruhan komposisi. Bahkan perubahan yang paling tidak signifikan dapat merusak keseimbangan antara semua elemen desain.

Membuat tipografi untuk produk digital, desainer perlu mempertimbangkan bagaimana tampilannya pada perangkat yang berbeda. Merencanakan dahi seperti itu membantu untuk menghindari masalah yang tidak perlu di masa depan.

Aplikasi Cinema

Konten yang diprioritaskan

Untuk membuat antarmuka seluler sederhana dan berguna, desainer harus mengurus organisasi konten yang bijaksana. Pengguna ingin memiliki akses cepat ke informasi yang mereka cari dan layar ponsel dapat membuat proses menjadi rumit.

UI Seluler tidak memiliki ruang untuk elemen salin yang tidak perlu. Seharusnya hanya ada konten penting yang diprioritaskan. Berdasarkan kebutuhan dan preferensi pengguna, desainer menetapkan struktur yang membantu orang untuk bernavigasi di dalam produk dan menemukan apa yang mereka cari. Elemen teks diprioritaskan oleh perubahan ukuran serta lebar atau jenis font yang berbeda.

Aplikasi Buku

Bersihkan rags teks

Tergantung pada jenis produk, desainer menerapkan penyelarasan yang sesuai untuk blok teks. Ini dapat ditempatkan di sebelah kiri, di kanan, secara terpusat atau dapat dibenarkan. Namun, berbicara tentang desain ponsel banyak ahli sering menghentikan pilihan mereka pada penyejajaran sisi kiri. Jenis ini membentuk teks di mana awal setiap baris ditempatkan sama dan kain terlihat mirip dengan tangga. Struktur seperti itu membantu pengguna dengan mudah berpindah dari satu baris teks ke yang lain dan memindai teks dengan cepat dan mudah. Jika body copy alignment dibenarkan (garis teks ditempatkan sama), tidak ada rags di kedua sisi. Teks dengan struktur seperti itu sulit untuk dipindai di layar ponsel.

Aplikasi Makanan Sehat

Tipografi fungsional

Sementara pengguna komputer melakukan klik dan menggulir untuk berinteraksi dengan produk, layar ponsel harus menyediakan lebih banyak fungsi. Ada banyak elemen teks di antarmuka seluler yang memungkinkan pengguna menyelesaikan tindakan tertentu seperti membeli produk, membuat panggilan, membuka situs web, dan lainnya.

Desainer perlu memastikan pengguna memahami bagaimana elemen teks bekerja dan memungkinkan mereka menyelesaikan tindakan. Tipografi fungsional harus disorot di antara elemen lain dan yang dapat diklik harus cukup besar untuk mengetuknya.

Interaksi Menu

Hal-hal untuk dicatat

Minimalis. Layar ponsel kekurangan ruang, jadi cobalah untuk tidak membebani. Font sederhana, gaya bersih, dan elemen minimum akan melakukan tugasnya.

Uji yang terkecil dulu. Perangkat seluler memiliki berbagai ukuran tetapi masalah terbesar adalah yang terkecil. Buat desain Anda berdasarkan bagaimana tampilannya di layar kecil terlebih dahulu. Jika sudah siap, Anda dapat dengan mudah menyesuaikannya untuk ukuran yang lebih besar.

Hindari font dekoratif dan kursif. Mereka tidak tampil dengan benar di layar kecil. Selain itu, font dekoratif membebani antarmuka dengan detail yang tidak perlu.

Keterbacaan pertama. Tentu saja, itu bagus untuk membuat UI yang menarik tetapi terkadang semua warna, kontras, font asli dapat merusak keterbacaan konten salin. Teks yang tampak bagus tidak cukup. Pastikan itu dapat terbaca jika pengguna tidak dapat membaca informasi dan menggunakan produk Anda dengan benar.

Bagikan Artikel ini