Cara Mendesain UI Aplikasi Android yang Tidak Mengisap
Programmer dan pengembang umumnya bukan desainer - ini diterima secara luas sebagai benar. Pengembang cenderung fokus membuat aplikasi bekerja - desainer fokus membuat aplikasi secara estetika menarik . Tetapi mengapa pengembang tidak dapat melakukan hal yang sama?
Kembali pada hari itu, ketika halaman arahan splash animasi dan tata letak yang mewah adalah sesuatu, maka tentu saja, masuk akal untuk menyewa seorang desainer profesional. Tetapi tren saat ini minimal - atau setidaknya sangat disederhanakan.
Biarkan saya memberi Anda contoh anekdotal - beberapa waktu lalu, seseorang meminta saya untuk membuat splash screen untuk perangkat lunak PC mereka. Jadi saya melakukan semuanya - menggambarnya di kertas sketsa, mengimpornya ke PhotoShop, membuat banyak garis dan efek neon mewah. Itu bisa saja wallpaper desktop, bukan layar splash. Intinya adalah saya menciptakan desain yang sangat mewah dan rumit untuk mereka.
Karena Anda mungkin bisa menebak, mereka tidak menyukainya. Desain yang mereka gunakan adalah logo kecil dari beberapa lingkaran berwarna yang tumpang tindih, dan nama perangkat lunak di bawahnya. Seperti, 2 menit dalam pekerjaan PhotoShop. Dan tahukah Anda? Saya agak harus setuju bahwa itu lebih baik daripada milik saya.
Maksud saya membuat demikian - saya pikir programmer jatuh ke dalam perangkap membuat kesalahan yang sama saya lakukan. Kita cenderung memikirkan UI dan splash screen yang harus benar-benar mewah, hal-hal menarik yang membuat aplikasi ini menonjol . Tetapi mereka tidak harus - jujur, mereka seharusnya tidak. Kita harus mengambil pola pikir programmer dan menerapkannya pada desain estetika - sederhana, fungsional, bekerja.
Pada artikel ini, kita akan melihat beberapa cara yang sangat sederhana untuk membuat Android APP UI / UX yang elegan, bahkan jika Anda hampir tidak memiliki pengalaman mendesain.
Kecuali Anda Benar-Benar Menginginkan Sesuatu yang Lain, Tetaplah Memakai Desain Material
Aplikasi Anda tidak harus “ unik” dan “ menonjol dari yang lain” untuk menjadi populer dan terlihat bagus. Itulah yang ingin dicapai oleh Desain Bahan Google - standar untuk UI aplikasi di seluruh industri, dan mereka telah melakukan pekerjaan dengan baik. Ada banyak aplikasi populer di luar sana yang melekat pada Desain Bahan - beberapa nama terbesar di aplikasi Android, seperti SwiftKey, Nova Launcher, SMS Textra, YouTube, hanya untuk beberapa nama.
Fokus inti Material Design adalah tata letak berbasis kartu, dengan palet warna solid. Google bekerja dengan desainer industri terkemuka, menggambar banyak elemen dari praktik desain minimalis, dan kemudian merilis semuanya secara gratis - itu adalah kesepakatan yang cukup bagus, karena kursus desain situs web dan aplikasi dapat menghasilkan ratusan dolar untuk e-book, video, dll.
Memulai dengan Desain Bahan sangat mudah, dan ada beberapa alat yang membuatnya lebih sederhana, yang akan kami sebutkan di bawah ini:
- Editor Tema Material (macOS + Sketsa)
- Plug-in Palet Warna Desain Bahan (PhotoShop / Illustrator)
- Desain Material UI Kit PSD (PhotoShop)
- Kit UI Desain Bahan Android ( Sketsa)
- Generator Tema Bahan UI
Dan jika Anda membutuhkan inspirasi untuk membuat tema Desain Bahan yang sederhana dan elegan, lihat daftar blog ini:
- MaterialDesignBlog - 15 contoh mengagumkan Desain Material dilakukan dengan benar
- MockPlus - 12 Contoh Situs Web Desain Bahan Terbaik untuk Menggambar Inspirasi
- AndroidAuthority - 10 aplikasi Material Design terbaik untuk Android
Gradien Warna Lebih Mudah Daripada Yang Anda Pikirkan
Untuk alternatif Desain Bahan, gradien dolor sederhana, trendi, dan menarik. Dan Anda mungkin berpikir bahwa desainer menghabiskan banyak waktu melukis di semua warna, atau merancang gradien tertinggi. Anda salah - itu bisa dilakukan dalam 10 detik di PhotoShop.
Saya bahkan akan memandu Anda melalui ini, untuk menunjukkan betapa mudahnya itu.
Buat proyek PS baru untuk Seluler ( 1080 x 1920 px @ 72 ppi berfungsi dengan baik)
Buka UIGradients.com dan temukan sesuatu yang Anda sukai.
Salin warna gradien dari atas pratinjau.
Klik kanan pada lapisan kosong di PS, dan pergi ke Blending Options> Gradient Overlay.
Klik langsung pada pratinjau pola gradien di menu drop-down - jangan klik tombol dropdown. Mengklik langsung pada gradien membuka editor warna.
Sekarang cukup tempel tempel nilai hex warna dari UIGradient ke editor gradien PS.
Sesuaikan seperlunya. Anda sekarang memiliki latar belakang gradien profesional untuk aplikasi Android Anda.
Alat gradien lain yang patut dicoba:
- WebGradients.com
- Android Shapes Generator ( untuk menghasilkan bentuk melalui XML, dengan opsi untuk gradien)
Gunakan SVG Daripada JPG / PNG
Alih-alih menggunakan PNG atau JPG untuk elemen grafis Anda (tombol, logo, dll.) Anda harus benar-benar menggunakan SVG ( Scalable Vector Graphics) sebagai gantinya. Ini karena SVG dapat diubah ukurannya tanpa kehilangan kualitas - misalnya, jika Anda meningkatkan JPG ke nilai yang lebih besar, itu kehilangan kualitas dan menjadi buram / pixelated. SVG tidak. Orang-orang mencoba menggunakan file PNG besar yang akan di- downscal agar sesuai dengan layar Android - ketika sebaliknya, Anda dapat menggunakan SVG yang lebih kecil yang di-upcaled tanpa kehilangan kualitas.
Lebih lanjut, SVG bisa mencapai 60% hingga 80% lebih kecil dalam ukuran file dari PNG . Ini berarti aplikasi atau situs web seluler Anda akan memuat lebih cepat bagi pengguna, dan akan terlihat bagus terlepas dari resolusi layarnya.
Termasuk Mode Gelap Menggunakan Theme.AppCompat.DayNight
Anda tidak perlu mendesain dua tema terpisah untuk memasukkan tema mode gelap / malam di aplikasi Anda. Cukup banyak dibangun ke dalam pustaka AppCompat, Anda hanya perlu mengaktifkannya dan mengedit nilai-nilai.
Lihat panduan Appual “Cara Menerapkan Mode Gelap di Aplikasi Android Anda”.
Gunakan Template atau Kit UI Seluler
Jika aplikasi Anda tidak meminta GUI mewah dan khusus, sama sekali tidak ada salahnya menggunakan templat atau kit. Template dan kit dapat digunakan sebagai pedoman inspirasional, atau Anda dapat benar-benar hanya menggunakan template / kit apa adanya, menambahkan tombol dan barang-barang Anda sendiri.
Beberapa sumber yang bagus untuk template dan kit Android UI:
- SpeckyBoy - 50 Kit UI Seluler Gratis untuk iOS & Android
- SketchAppSources - Sumber Daya Aplikasi Android UI ( Sketch)
- Freebiesbug - Kit UI PSD ( PhotoShop)
