Advertisement
  1. Web Design
  2. Material Design
Webdesign

Merancang Aplikasi Menggunakan Sticker Desain Material

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Final product image
What You'll Be Creating

Berkat desain bahan, bahasa visual yang dikembangkan oleh Google, merancang antarmuka pengguna untuk Android platform lebih mudah dari sebelumnya. Setelah Anda luangkan beberapa menit untuk membaca sekilas melalui dengan spec, yang diperbarui setiap sekarang dan kemudian, Anda dapat mulai merancang aplikasi Android yang sesuai dengan tampilan dan nuansa asli rilis Android terbaru, termasuk Marshmallow dan Nougat. Terlebih lagi, untuk membantu Anda menghemat waktu dan tenaga, Google telah menerbitkan sticker sheet untuk Desain Material.

Sticker sheet

Dalam tutorial ini, saya akan menunjukkan cara menggunakan lembar stiker untuk Adobe Photoshop untuk merancang antarmuka pengguna aplikasi Android dengan cepat.

Mengapa menggunakan Sticker Sheet?

User Interface yang sesuai dengan spesifikasi bahan desain adalah, untuk sebagian besar, terdiri dari bentuk sederhana, warna solid dan beberapa bayangan. Akibatnya, tidak seperti antarmuka pengguna skeuomorphic, mereka tidak banyak berbeda. Bahkan, kecuali warna, ukuran, dan ketinggiannya, widget UI terlihat sama di hampir semua aplikasi Desain Material. Desain bahan stiker lembar berisi gambar widget tersebut dan, dengan itu, Anda dapat secara efektif mengikuti pendekatan drag-and-drop untuk desain antarmuka pengguna.

Drag and drop sticker sheet
Drag-and-drop UI Desain

Meskipun kita akan menggunakan Adobe Photoshop dalam tutorial ini, it's worth dicatat bahwa lembar stiker juga tersedia untuk sketsa, Adobe Illustrator, dan After Effects.

Prasyarat

Untuk dapat mengikutinya, Anda akan memerlukan:

  • Adobe Photoshop CC
  • Lembar stiker bahan desain terbaru untuk Adobe Photoshop

1. pembukaan lembar stiker

Jalankan Adobe Photoshop dan pergi ke File > Open... Buka lembar stiker yang Anda download. Kecuali Anda memiliki Roboto font yang terinstall pada komputer Anda sudah, Anda akan melihat sebuah dialog yang meminta Anda untuk sync dari Adobe Typekit, atau download dari sumber lain (seperti Google font).

Jika Anda menggunakan Typekit, tekan tombol Resolve font untuk melanjutkan. Tentu saja, Anda harus masuk ke akun Creative Cloud sync untuk menyelesaikan.

Setelah membuka lembar stiker, Anda akan melihat bahwa itu adalah sebuah dokumen yang sangat besar-dimensi yang 5688 × 6790 px — dengan beberapa lapisan dan lapisan kelompok. Saya sarankan Anda luangkan beberapa menit untuk melihat segala sesuatu yang ditawarkan.

Contents of the Sticker sheet

2. membuat elemen Global

Status bar, bar navigasi dan app bar bersama-sama sering disebut sebagai "unsur-unsur global" App. Dengan membuat mereka pertama, kita mendefinisikan daerah dalam yang sisa UI widget akan ditempatkan.

Dalam lembar stiker, Semua elemen global hadir di dalam kelompok lapisan yang disebut Global elemen. Ini berisi unsur-unsur global untuk mobile, tablet dan antarmuka pengguna desktop juga. Untuk sekarang, bagaimanapun, mari kita fokus hanya pada kelompok lapisan seluler dengan memilih dan mengklik Alt ikon mata.

Contents of the MOBILE layer group

Seperti yang Anda lihat, lapisan kelompok berisi unsur-unsur yang kita butuhkan, bersama dengan beberapa panduan yang akan membantu kita justru posisi lain UI widget. Pergi ke Layer > Duplicate Group... untuk membuat salinan dokumen baru yang disebut MyMaterialApp.

Duplicate Group dialog for the MOBILE layer group

Dalam tutorial ini, kami menciptakan antarmuka pengguna aplikasi Android yang akan berfungsi sebagai penghitung kalori. Oleh karena itu, dalam dokumen yang baru dibuat, memperluas kelompok lapisan App bar dan menggunakan Horizontal Type Tool (T) untuk mengubah judul app untuk "Calories".

App title changed to Calories

Selain itu, desain kami akan memiliki grafik di wilayah bar app. Untuk membuat ruang untuk itu, pilih key shadow dan ambient shadow lapisan, tekan Ctrl + T, dan membuat mereka berdua 250px tinggi. Jangan lupa untuk melakukan transformasi dengan menekan Enter.

Height of the app bar changed to 250px

3. menambahkan daftar

Beralih kembali ke tab lembar stiker dan mencari LISTS lapisan kelompok. Ada delapan tipe yang berbeda dari daftar yang tersedia di dalamnya. Kami, namun, akan menggunakan jenis ketujuh hanya. Oleh karena itu, pilih grup lapisan yang disebut List7 dan pergi ke Layer > Duplicate Group... untuk membuat duplikat yang dalam dokumen MyMaterialApp.

Duplicate Group dialog for List7

Kembali di tab MyMaterialApp, pastikan Anda menempatkan layer List7 tepat di bawah lapisan App bar. Setelah Anda melakukannya, Anda akan melihat bahwa panduan dan konten daftar selaras dengan sempurna.

List7 layer group positioned below the app bar

Itu selalu ide yang baik untuk memberikan nama-nama bermakna kepada kelompok lapisan Anda. Oleh karena itu, mengubah nama grup lapisan dalam daftar "Makanan daftar".

4. mengubah daftar

Mari kita sekarang mengubah daftar seperti yang menampilkan makanan bersama dengan ukuran porsi mereka. Melakukan hal itu sangat mudah. Pilih jenis lapisan yang sesuai dan gunakan Horizontal Type Tool (T) untuk mengubah isinya. Saya sarankan Anda juga mengubah berat font dari item makanan menjadi "Bold".

List items displaying foods and portion sizes

Kalori counter app tidak akan sangat berguna jika tidak menampilkan kalori. Daftar kami, namun, saat ini memiliki ada ruang untuk lebih teks. Oleh karena itu, menghapus lapisan yang disebut "square" dari kelompok-kelompok lapisan yang bernama list_01, list_02, dan list_03.

List items with the squares removed

Anda sekarang dapat menggunakan Horizontal Type Tool (T) untuk menambahkan lapisan-lapisan tipe baru yang menampilkan kalori. Mengubah ukuran font dari lapisan 24px, nama font untuk Roboto reguler dan warna mereka untuk #333333.

Calories added to each list item

5. Menambahkan Ikon Desain Material

Kita dapat membuat antarmuka pengguna kami jauh lebih menarik dengan menambahkan ikon desain bahan. Untuk sekarang, mari kita men-download tiga ikon yang berbeda untuk tiga daftar item antarmuka kita.

Pergi ke halaman Material Icons dan pertama memilih ikon bernama local pizza. Dalam lembar bawah yang muncul, mengubah ukurannya ke 36dp dan klik pada tombol PNGS untuk men-download file ZIP yang berisi ikon.

Material Icons page

Ekstrak ZIP file dan pergi ke folder android/drawable-mdpi untuk menemukan file gambar yang sebenarnya. Drag dan drop di dalam tab MyMaterialApp jendela Adobe Photoshop.

Ulangi langkah yang sama untuk ikon berlabel local cafe dan local dining.

Kita sekarang dapat menggantikan lingkaran tersebut di daftar item dengan ikon. Mari kita mulai dengan ikon local pizza. Pilih dengan lapisan dan lapisan yang disebut circle, salah satu yang ada di dalam kelompok lapisan list_01. Pergi ke Layer > Align > Vertical Centers untuk menyelaraskan pusat mereka secara vertikal. Demikian pula, pergi ke Layer > Align > Horizontal Centers untuk menyelaraskan pusat mereka secara horizontal.

Aligning the icons with the circles

Pada titik ini, Anda dapat menghapus lapisan "circle" di list_01.

Ulangi langkah yang sama untuk dua ikon lainnya.

All icons in their final positions

6. menambahkan warna

Mari kita menambahkan beberapa warna sekarang, karena bahan desain antarmuka pengguna cenderung cerah dan berwarna-warni.

Pilih layer bernama "ic_local_pizza_black_36dp", klik kanan dan pilih Blending Options... Pada dialog yang muncul, buka bagian Color Overlay dan memilih warna #ffc107, yang disebut sebagai Amber 500 dalam color palette Material desain.

Color overlay for the pizza icon

Ulangi langkah yang sama untuk lapisan yang bernama "ic_local_cafe_black_36dp" dan "ic_local_dining_black_36dp". Pastikan bahwa Anda memilih warna yang berbeda setiap kali.

All icons colored

Mari kita warna elemen global sekarang. Untuk mengubah warna latar belakang, pilih lapisan bernama "Latar belakang", tekan A untuk memilih persegi di dalamnya, dan mengubah mengisi warna putih.

The Fill field set to white

Untuk mengubah warna dari status bar, buka grup lapisan "Status bar", pilih lapisan bernama "bar", tekan A, dan mengubah Fill warna merah 900, yang nilainya hex adalah #b71c1c.

Demikian pula, untuk mengubah warna app bar, buka grup lapisan "App bar", pilih layer bernama "kunci bayangan", tekan A dan mengatur Fill warna merah 500, atau #f44336.

The colored global elements

7. menambahkan tombol tindakan Floating

Tombol tindakan floating adalah salah satu paling menonjol widget dalam antarmuka pengguna bahan desain. Anda bisa mendapatkannya dengan menduplikasi lapisan "Floating action button" sekelompok lembar stiker. Jika Anda memiliki kesulitan menemukan itu, Cari di dalam kelompok lapisan "METRIK dan KEYLINES".

Dalam dokumen Anda, tempat kelompok lapisan "Floating action button" di atas "Foods list" lapisan kelompok.

Selanjutnya, menggunakan Move Tool (V) dan posisi tombol tindakan yang mengambang di sudut kanan bawah dari antarmuka pengguna.

The floating action button placed at the bottom right corner

Tombol tindakan mengambang harus memiliki warna aksen. Oleh karena itu, pilih layer "kunci bayangan" di dalam nya lapisan grup grup, tekan A untuk memilih lingkaran di dalamnya, dan mengubah warna Fill 700 aksen merah, atau #d50000.

Demikian pula, mengubah warna lapisan "ic_add", yang berisi tanda tambah, putih. Selanjutnya, buka yang Blending Option... dan mengubah nilai Opacity yang 100%.

The colored floating action button

8. pemangkasan dokumen

Anda mungkin telah memperhatikan bahwa dokumen kami sangat besar, dan desain menempati hanya wilayah kecil di dalamnya. Untuk mengubah ukuran dokumen sedemikian rupa sehingga cocok ukuran Desain, pergi ke Image > Trim. Pada dialog yang muncul, pergi ke depan dengan nilai-nilai default dan tekan OK.

The Trim dialog

9. menambahkan Chart

Seperti yang saya sebutkan sebelumnya, region bar app di antarmuka pengguna kami akan memiliki grafik. Karena lembar stiker tidak memiliki apapun stiker untuk grafik, kita harus membuatnya secara manual.

Mulai dengan menyalakan grid. Untuk melakukannya, klik View > Show > Grid.

Tekan Shift+Ctrl+N untuk membuat layer baru di dalam kelompok lapisan App bar, dan menggunakan Pencil Tool (B) untuk menarik garis horizontal empat, yang putih dan 1 px tebal, di bawah judul app.

The four lines drawn using the Pencil tool

Gunakan alat tipe horisontal (T) untuk menambahkan tiga tanggal di bawah garis horizontal yang terakhir. Ukuran font tanggal dapat 13px.

3 dates added below the last line

Anda dapat sekarang menonaktifkan grid dengan pergi ke View > Show > Grid lagi.

Pilih semua lapisan yang Anda buat di langkah ini dan tekan Ctrl+G untuk membuat grup lapisan baru bagi mereka. Nama kelompok lapisan "Chart".

Selanjutnya, dalam kelompok lapisan "Chart", buat layer baru dan menyebutnya "Data". Di dalam lapisan, menggambar jalan tertutup menggunakan Pen Tool (P). Bentuk dari path tidak sangat penting, sehingga selama sepertinya kurva halus.

The path drawn using the Pen tool

Untuk mengisi jalan dengan warna latar depan, pergi ke Paths panel, klik kanan pada Work Path dan memilih Fill Path... Pada dialog yang muncul, pilih default dan tekan OK.

The Fill Path dialog

Untuk membuat bagan terlihat kurang sombong, mengurangi Opacity dari kelompok lapisan "Chart" hingga 75%.

Terakhir, menggunakan Horizontal Type Tool (T) untuk menampilkan jumlah total kalori yang dikonsumsi di bawah grafik. Biarkan ukuran font nomor 24px, dan bahwa label 14px.

Desain kami sekarang lengkap. Lanjutkan dan sembunyikan kelompok lapisan "Panduan" karena kami tidak akan membutuhkannya lagi.

The completed design

10. menghasilkan perangkat seni

Membungkus desain Anda dalam bingkai perangkat yang nyata dan menambahkan silau layar untuk membuatnya terlihat lebih halus dan realistis. Meskipun Anda dapat menggunakan Adobe Photoshop untuk melakukannya, itu jauh lebih mudah untuk menggunakan Google Device Art Generator sebagai gantinya.

Pertama, ekspor desain Anda sebagai PNG file dengan pergi ke File > Save As...

Anda kini dapat menyeret PNG file ke salah satu perangkat yang Anda lihat dalam perangkat seni generator. Perhatikan bahwa Anda akan memiliki untuk skala gambar Anda sampai setidaknya 1080 × 1920px menggunakan frame dari terbaru perangkat.

Setelah perangkat seni telah dihasilkan, Anda dapat drag ke folder apapun pada komputer Anda untuk menyelamatkannya.

Kesimpulan

Dalam tutorial ini, Anda belajar bagaimana menggunakan desain bahan stiker lembar dan Adobe Photoshop untuk desain antarmuka pengguna aplikasi Android. Merasa bebas untuk menambahkan widget lain ke itu, mengubah warna dan bereksperimen dengan tata letak.

Saya juga ingin mengingatkan Anda bahwa spesifikasi bahan desain adalah hanya sebuah kumpulan dari pedoman dianjurkan. Anda tidak memiliki mematuhi itu sepanjang waktu, selama Anda memastikan bahwa hasil akhir konsisten dan intuitif.

Untuk mempelajari lebih lanjut tentang merancang aplikasi untuk Android, dan mencari sumber-sumber Desain, Anda dapat mengunjungi Google desain.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.