Spesifikasi Reka bentuk Bahan dari Google pada awalnya bertujuan untuk platform Android sebagai cara untuk menyarankan konsistensi desain di platform.
01 dari 06
Cara Mencipta Kad Reka Bentuk Bahan dalam Adobe Experience Design CC
Sekali pereka mula mencubanya dan memahami pemikiran di sebalik itu, Reka Bentuk Bahan secara diam-diam menjadi salah satu falsafah visual yang paling berpengaruh dalam reka bentuk web dan mudah alih . Apa yang anda perlu lakukan untuk melihat apa yang kami dapat lakukan ialah melakukan carian Bahan Reka bentuk di Pinterest dan anda akan melihat beratus-ratus contoh dan eksperimen pada peranti, tablet, dan juga laman web.
Aspek yang menarik dari Reka Bentuk Bahan adalah pemikiran Google tentang bagaimana aplikasinya harus muncul dan berfungsi pada peranti mudah alih tetapi konsep tersebut diterapkan pada mana-mana skrin apa-apa saiz pada platform apa pun. Seperti yang dinyatakan oleh Google dalam perenggan pembukaan spesifikasi, "Kami mencabar diri kami untuk mencipta bahasa visual untuk pengguna kami yang mensintesiskan prinsip klasik reka bentuk yang baik dengan inovasi dan kemungkinan teknologi dan sains. Ini adalah reka bentuk material. Spesifikasi ini adalah dokumen hidup yang akan dikemas kini kerana kami terus membangunkan prinsip dan spesifik reka bentuk bahan. "
Bahan yang dibincangkan, dalam istilah yang sangat umum, adalah kertas dan ciri penting Bahan adalah kad. Fikirkan kad indeks di permukaan dan anda berada di landasan yang betul. Kad adalah elemen yang mengandungi foto, video, pautan teks dan sebagainya tetapi di mana mereka berbeza daripada reka bentuk yang paling interaktif adalah mereka bertujuan untuk memberi tumpuan kepada subjek tunggal. Kad mempunyai sudut bulat, mengandungi bayang-bayang pengsan yang menunjukkan mereka berada di atas permukaan dan jika mereka semua berada di satah yang sama, mereka dirujuk sebagai "koleksi".
Dalam "Cara" ini kita akan membuat kad berdasarkan spesifikasi. Daripada membuat kad dengan pelbagai pencitraan dan alat lukisan, kita akan datang dari arah yang berbeza. Kami akan menggunakan alat dalam Rekabentuk Pengalaman Adobe yang kini berada dalam pratonton awam sahaja Macintosh dan percuma. Anda boleh muat turun di sini.
Mari kita mulakan.
02 dari 06
Mewujudkan Prototaip Artboard dalam Adobe Experience Design CC
Tidak ada cara yang jelas untuk membuat skrin Android dari Skrin Mula dalam Reka Bentuk Pengalaman CC (XD). Apa yang biasa kita lakukan apabila kita membuka XD, adalah untuk memilih pilihan iPhone 6 dan, apabila antara muka dibuka, kita pilih alat Artboard di bahagian bawah Toolbar dan pilih Android Mobile dari pilihan pada panel Properties ke kanan. Kemudian kita beralih ke alat pemilihan, klik sekali pada nama artboard iPhone dan padamkan papan iklan. Tidak ada lagi.
Dalam versi XD semasa, terdapat anak panah kecil di sebelah iPhone 6 yang, apabila diklik, membuka menu lungsur. Dari sana anda memilih versi Android Mobile dan papan iklan Android Bergerak yang dipilih dibuka dalam antara muka.
Untuk memastikan kami mempunyai ruang skrin yang betul terbuka untuk kad, kami biasanya menuju ke Lakaran 3 dan salin dan tampal Status Bar, Nav Bar, dan bar App dari Template Bahan Reka Bentuk ke dalam artboard. Lakaran 3.2 mengandungi templat Reka Bentuk Bahan ( File> Baru Dari Templat> Reka Bentuk Bahan ) dan satu lagi percuma yang baik adalah dari Kyle Ledbetter yang anda boleh dapatkan di sini. Sekiranya anda tidak mempunyai Lakaran, anda boleh menyalin dan menyisipkannya dari pelekat XD yang terdapat dalam Fail> Buka Kit UI> Bahan Google . Anda juga boleh memuat turunnya dari Google untuk digunakan dalam Photoshop, Illustrator, After Effects dan Sketch.
03 dari 06
Menambah Kad Reka Bentuk Bahan ke Artboard Adobe XD CC
Salah satu ciri yang paling berguna dalam XD adalah kemasukan Kit UI untuk Apple iOS, Google Material, dan Microsoft Windows. Dalam banyak aspek, mereka menambah perkataan "Rapid" kepada istilah "Rapid Prototyping". Selain itu, mereka membuat kerja pereka lebih mudah dalam elemen UI yang sama tidak perlu sentiasa dicipta semula dalam Aplikasi Reka bentuk seperti Photoshop, Illustrator atau Lakaran.
Unsur UI yang kami perlukan adalah kad. Untuk mencapainya, kami memilih Fail> Buka Kit UI> Bahan Google dan kit dibuka sebagai dokumen baru. Unsur yang kami perlukan dijumpai dalam kategori Kad.
Apa yang kita sukai tentang ini adalah mereka mematuhi spesifikasi Reka Bentuk Bahan seperti yang dinyatakan dalam spesifikasi Blok Kandungan serta pemformatan teks dan spesifikasi jarak yang ditetapkan dalam spec Typography.
Gaya kad yang kami mahukan adalah satu di bahagian bawah kiri. Kami hanya tenggelam dengan tetikus kami dan menyalinnya ke papan klip. Malangnya, XD tidak mengandungi antara muka tab untuk dokumen terbuka. Apa yang kita lakukan adalah memindahkan tetingkap dokumen terbuka ke bawah untuk mendedahkan yang kita sedang kerjakan, pilih dan tampal. Satu lagi cara untuk bertukar cepat antara dokumen XD terbuka adalah dengan menekan Command- ' .
04 dari 06
Bagaimana Mengedit Unsur Reka Bentuk Bahan dalam Rekaan Adobe Pengalaman CC
Apabila kad di XD tiba dari papan klip, jangan dengan senangnya mula bekerja dengannya. Perkara pertama yang perlu anda lakukan adalah untuk Ungroup kad kerana anda memerlukan akses kepada bit dan kepingan yang menyusun kad. Untuk melakukan ini, pilih kad dan pilih Objek> Ungroup atau tekan Shift-Command-G.
Kad anda sekarang terdiri daripada tiga keping:
- Kotak kelabu cahaya untuk imej.
- Kotak kelabu sederhana untuk teks
- Kotak belakang digunakan sebagai latar belakang.
Langkah pertama adalah memadam kotak kelabu cahaya. Tujuannya hanya untuk bertindak sebagai pemegang tempat untuk imej yang menjadikannya, jika anda memilih, pilihan.
Kotak dengan teks sebenarnya kelabu gelap dengan kelegapan 50%. Kotak ini boleh digunakan sebagai latar belakang teks dan anda boleh menukar warna dan kelegapan kotak.
Walaupun ia tidak dapat dilihat dengan jelas, kotak abu-abu cahaya mengikuti spesimen Reka Bentuk Material di mana sudut atasnya dibulatkan dengan 2 piksel. Pastikan ini jika anda menambah imej. Ia juga memerlukan sudut bulat yang boleh ditambah kepada aplikasi pengimejan atau dalam XD.
Melihat bagaimana ini adalah keadaan rehat kad itu juga memerlukan bayang-bayang. Spesifikasi itu jelaskan terdapat ketinggian kad 2 pixel. Untuk menambah ini, pilih bentuk latar belakang hitam dan tetapkan nilai Y dan B (Blur) kepada 2 dalam panel sifat.
05 dari 06
Cara Tambah Imej ke Kad Reka Bentuk Bahan di Adobe XD CC
Mengetahui kad adalah 344 piksel dan kawasan imej adalah 150 piksel tinggi ( separuh ketinggian kotak kelabu cahaya ) Kami membuka imej di Photoshop, memotongnya ke saiz dan menyimpannya menggunakan pilihan @ 2x dalam dialog Export As As kotak. Imej itu diimport ke Adobe XD.
Kami kemudian menyeret kotak kelabu cahaya ke atas imej pada papan pemadam dan Objek> Topeng Dengan Bentuk yang dipilih . Hasilnya adalah imej yang mengambil sudut-sudut bulat bentuknya. Kami kemudian memindahkan imej ke kedudukan terakhirnya.
Dengan imej di tempat, kami kemudian menukar warna latar belakang kotak kelabu Medium, mengubah teks dan warna teks pautan.
06 dari 06
Menggunakan Ciri Grid Adobe XD CC
Dengan kad lengkap, kini perlu ditempatkan dengan betul mengikut spec Design Material. Ini bermakna terdapat 8 piksel di kedua-dua belah kad dan kad perlu 8 piksel di bawah bar aplikasi. Untuk melakukan ini, klik sekali pada nama artboard dan, dalam Panel Properties, pilih Grid. Grid itu muncul di atas papan artisan.
Saiz grid lalai adalah 8 piksel yang menjadi saiz grid yang sama untuk Bahan Design.Jika anda memerlukan saiz yang berbeza, tukar nilai di kawasan Grid. Jika anda ingin menukar warna grid, klik cip warna dan pilih warna dari Pemilih Warna yang dihasilkan.
Dengan grid yang kelihatan, klik pada kad dan pindahkannya ke kedudukan terakhirnya.
Untuk menyelesaikan, kami memilih kad tersebut, mengklik butang Ulang Grid dan menukar jarak antara kad hingga 8 piksel.