Cara Merangka UI Aplikasi Android yang Tidak Menghisap

. Tetapi mengapa pembangun tidak dapat melakukan perkara yang sama?



Kembali pada masa itu, ketika halaman pendaratan percikan animasi dan susun atur mewah adalah sesuatu, maka pasti, masuk akal untuk menyewa pereka profesional. Tetapi trend hari ini adalah yang minimum - atau sekurang-kurangnya dipermudahkan.

Izinkan saya memberi anda contoh anekdot - beberapa saat yang lalu, seseorang meminta saya membuat skrin percikan untuk perisian PC mereka. Oleh itu, saya keluar - mengeluarkannya pada kertas lakaran, mengimportnya ke PhotoShop, mencipta banyak garis dan kesan neon yang mewah. Ini mungkin kertas dinding desktop, bukan layar percikan. Intinya adalah saya membuat reka bentuk yang sangat mewah dan rumit untuk mereka.



Seperti yang mungkin anda sangka, mereka tidak menyukainya. Reka bentuk yang mereka jalani secara harfiah adalah logo kecil dari beberapa lingkaran berwarna yang bertindih, dan nama perisian di bawahnya. Seperti, 2 minit dalam pekerjaan PhotoShop. Dan anda tahu apa? Saya agak setuju bahawa itu lebih baik daripada milik saya.



Perkara yang saya buat adalah - saya rasa pengaturcara terjebak dalam kesalahan yang sama dengan yang saya lakukan. Kami cenderung memikirkan UI dan skrin percikan perlu menjadi perkara yang sangat menarik dan menarik yang menjadikan aplikasinya menonjol . Tetapi mereka tidak semestinya - jujur, mereka tidak seharusnya. Kita harus mengambil pengaturcara mindset dan menerapkannya pada reka bentuk estetik - ringkas, berfungsi, berfungsi.



Dalam artikel ini, kita akan melihat beberapa cara yang sangat mudah untuk membuat UI / UX APP Android yang elegan, walaupun anda hampir tidak mempunyai pengalaman merancang.

Kecuali Anda Benar-benar Mahukan Sesuatu Lain, Ikuti Reka Bentuk Bahan

Aplikasi anda tidak perlu ' unik ” dan ' menonjol dari yang lain ” untuk menjadi popular dan kelihatan baik. Itulah yang dimiliki Google Reka Bentuk Bahan berusaha untuk mencapai - standard untuk UI aplikasi di seluruh industri, dan mereka telah berjaya. Terdapat banyak aplikasi popular di luar sana yang berpegang pada Material Design - beberapa nama terbesar dalam aplikasi Android, seperti SwiftKey, Nova Launcher, Textra SMS, YouTube, untuk beberapa nama sahaja.

Fokus utama Material Design adalah pada susun atur berasaskan kad, dengan palet warna padat. Google bekerjasama dengan pereka industri terkemuka, menarik banyak elemen dari amalan reka bentuk minimalis, dan kemudian membebaskan semuanya secara percuma - itu adalah kesepakatan yang cukup baik, kerana kursus reka bentuk laman web dan aplikasi dapat menghasilkan ratusan dolar untuk e-buku, video, dan lain-lain.



Memulakan Reka Bentuk Bahan sangat mudah, dan terdapat sebilangan kecil alat yang menjadikannya lebih mudah, yang akan kami senaraikan di bawah:

  • Penyunting Tema Bahan (macOS + Lakaran)
  • Pemalam Palet Warna Reka Bentuk Bahan (PhotoShop / Ilustrator)
  • Reka Bentuk UI Kit JPA (Kedai Foto)
  • Kit UI Reka Bentuk Bahan Android ( Lakaran)
  • Penjana Tema Bahan UI

Dan jika anda memerlukan sedikit inspirasi untuk mencipta tema Reka Bentuk Bahan yang ringkas dan elegan, lihat blog senarai ini:

Kecerunan Warna Lebih Mudah Daripada Yang Anda Fikirkan

Sebagai alternatif untuk Reka Bentuk Bahan, kecerunan warna adalah sederhana, bergaya, dan menarik. Dan anda mungkin berfikir bahawa pereka menghabiskan banyak masa untuk melukis dalam semua warna, atau merancang kecerunan yang paling hebat. Anda salah - ini dapat dilakukan dalam 10 saat di PhotoShop.

10 saat di UI kecerunan PhotoShop.

Saya akan memandu anda melalui ini, untuk menunjukkan betapa mudahnya.

Buat projek PS baru untuk Mudah Alih ( 1080 x 1920 px @ 72 ppi berfungsi dengan baik)

UIGradients.com - Koleksi kecerunan pra-dibuat yang besar.

Pergi ke UIGradients.com dan cari sesuatu yang anda suka.

Salin nilai hex warna dari UIGradients

Salin warna kecerunan dari atas pratonton.

Pemilih kecerunan PhotoShop.

Klik kanan pada lapisan kosong di PS, dan pergi ke Blending Options> Gradient Overlay.

Klik terus pada pratonton corak kecerunan di menu lungsur - jangan klik pada butang lungsur. Mengklik terus pada kecerunan akan membuka penyunting warna.

Masukkan nilai hex dari UIGradient ke alat kecerunan PS.

Sekarang hanya tampal nilai nilai hex warna dari UIGradient ke penyunting gradien PS.

Laraskan mengikut keperluan. Anda kini mempunyai latar belakang kecerunan profesional untuk aplikasi Android anda.

Alat kecerunan lain yang patut diperiksa:

  • WebGradients.com
  • Penjana Bentuk Android ( untuk menghasilkan bentuk melalui XML, dengan pilihan untuk kecerunan)

Gunakan SVG Bukan JPG / PNG

Daripada menggunakan PNG atau JPG untuk elemen grafik anda (butang, logo, dll.) Anda semestinya menggunakan SVG ( Grafik Vektor Berskala) sebaliknya. Ini kerana SVG dapat diubah ukurannya tanpa kehilangan kualiti - misalnya, jika anda menaikkan JPG ke nilai yang lebih besar, ia akan kehilangan kualiti dan menjadi kabur / piksel. SVG tidak. Orang cuba menggunakan fail PNG yang besar diturunkan agar sesuai dengan skrin Android - sebaliknya, anda boleh menggunakan SVG yang lebih kecil ditingkatkan tanpa kehilangan kualiti.

Selanjutnya, SVG boleh mencapai Ukuran fail 60% hingga 80% lebih kecil daripada PNG . Ini bermaksud aplikasi atau laman web mudah alih anda akan dimuat lebih cepat untuk pengguna, dan akan kelihatan baik tidak kira resolusi layar.

Sertakan Mod Gelap Menggunakan Tema.AppCompat.DayNight

Anda tidak perlu merancang dua tema berasingan untuk memasukkan tema mod gelap / malam dalam aplikasi anda. Ini cukup banyak dibina di perpustakaan AppCompat, anda hanya perlu mengaktifkannya dan mengedit nilainya.

Lihat panduan Appual “ Cara Melaksanakan Mode Gelap di Aplikasi Android anda ”.

Gunakan Templat atau Kit UI Mudah Alih

Sekiranya aplikasi anda tidak memerlukan GUI yang disesuaikan dan menarik, tidak ada salahnya menggunakan templat atau kit. Templat dan kit dapat digunakan sebagai garis panduan inspirasi, atau Anda benar-benar dapat menggunakan templat / kit seperti adanya, menambahkan butang dan barang anda sendiri.

Beberapa sumber hebat untuk templat dan kit Android UI:

  • SpeckyBoy - 50 Kit UI Mudah Alih Percuma untuk iOS & Android
  • Sumber SketchApp - Sumber Aplikasi Android UI ( Lakaran)
  • Freebiesbug - Kit UI JPA ( Kedai Foto)
Teg android Pembangunan 4 minit membaca