Spesifikasi Desain Material saka Google asline ditujukan ing platform Android minangka sarana konsistensi desain ing platform.
01 saka 06
Cara Nggawe Kartu Desain Material ing Adobe Experience Design CC
Sawise perancang miwiti nggawe lan ngerteni pemikirane, Design Material wis tenang dadi salah sawijining filsafat visual sing paling berpengaruh ing desain web lan mobile . Kabeh sing perlu dilakoni kanggo ndeleng apa sing ditindakake ing nggawe panemuan Material Design ing Pinterest lan sampeyan bakal weruh atusan conto lan eksperimen ing piranti, tablet, lan malah situs web.
Aspek Desain Material Material sing nggumunake yaiku pemikiran Google babagan carane aplikasi kudu katon lan bisa digunakake ing piranti seluler nanging konsep kasebut diterapake ing sembarang ukuran layar apa wae ing platform apa wae. Minangka Google nyatakake ing paragraf pambuka spekulasi, "Kita nyatakake dhéwé kanggo nggawe basa visual kanggo pangguna kita sing nyintesis prinsip klasik desain apik karo inovasi lan kamungkinan teknologi lan sains. Iki desain material. Spek iki minangka dokumen sing bakal dianyari nalika kita terus berkembang tenanan lan spesifik desain material. "
Materi sing dirembug, ing istilah sing umum, yaiku kertas lan ciri khas Material Design yaiku kertu. Coba kertu indeks ing permukaan lan sampeyan ana ing trek sing bener. Kertu iku sawijining unsur sing ngemot foto, video, pranala teks, lan liya-liyane nanging sing beda-beda saka desain sing paling interaktif yaiku supaya fokus ing subyek tunggal. Kartu duwe sudhut bunder, ngandhut bayang-bayang sing rada nudhuh sing nuduhake ing ndhuwur permukaan lan yen kabeh kasebut ing pesawat sing padha disebut "koleksi".
Ing "Cara", kita bakal nggawe kertu miturut spek. Tinimbang nggawe kertu kanthi macem-macem imaging lan alat gambar, kita bakal teka saka arah sing beda. Kita bakal nggunakake piranti kasebut ing Adobe Experience Design sing saiki ana ing pratinjau publik mung Macintosh lan gratis. Sampeyan bisa ngundhuh ing kene.
Ayo diwiwiti.
02 saka 06
Nggawe Prototipe Artboard ing Adobe Experience Design CC
Ora ana cara sing jelas kanggo nggawé layar Android saka Layar Awal ing Pengalaman Desain CC (XD). Apa sing dipigunakaké nalika mbukak XD, yaiku milih pilihan iPhone 6 lan, nalika antarmuka mbukak, kita milih alat Artboard ing ngisor Toolbar lan pilih Android Mobile saka pilihan ing panel Properties ing sisih tengen. Banjur kita ngalih menyang alat pilihan, klik sapisan ing jeneng artboard iPhone lan mbusak artboard. Ora ana maneh.
Ing versi XD saiki, ana panah cilik ing jejere iPhone 6 sing, nalika diklik, mbukak menu gulung mudhun. Saka ing kono sampeyan milih versi Android Mobile lan Android Mobile artboard sing dipilih mbukak ing antarmuka.
Kanggo mesthekake yen kothak layar mbukak kanggo kertu, biasane nerusake menyang Sketch 3 lan nyalin lan nempel Bar Status, Bar Nav, lan Bar App saka Template Material Design menyang papan arti. Gambar 3.2 ngemot template Materi Desain ( Gambar> Anyar Saka Templat> Desain Material ) lan siji liyane sing apik banget yaiku saka Kyle Ledbetter sing bisa didol ing kene. Yen sampeyan ora duwe Sketsa, sampeyan bisa nyalin lan nempel saka stiker XD sing ditemokake ing File> Open UI Kit> Google Material . Sampeyan uga bisa ngundhuh saka Google kanggo digunakake ing Photoshop, Illustrator, After Effects and Sketch.
03 saka 06
Nambahake Kartu Desain Material menyang Adobe XD CC Artboard
Salah siji fitur sing paling migunani saka XD yaiku masukan UI UI kanggo Apple iOS, Google Material, lan Microsoft Windows. Ing salebeting maneka warna, tembung-tembung kasebut nambah tembung "Rapid" kanthi istilah "Rapid Prototyping", lan uga nggawe karya desainer luwih gampang ing unsur UI sing umum ora kudu digawé ulang ing Aplikasi Desain kayata Photoshop, Illustrator utawa Gambar.
Unsur UI sing dibutuhake yaiku kertu. Kanggo nyedhiyakake, kita milih Gambar> Bukak Kit UI> Google Material lan kit dibuka minangka dokumen anyar. Unsur sing dibutuhake ditemokake ing kategori Kartu.
Apa sing kita tresna babagan iki yaiku adhedhasar spesifikasi Material Design sing disedhiyakake ing spek Konten Konten uga pemformatan teks lan spek spasi sing dilebokake ing spek Typography.
Gaya kertu sing kita kepengin yaiku ing sisih kiwa ngisor. Kita mung tampil karo mouse kita lan disalin menyang clipboard. Sayange, XD ora ngemot antarmuka tab kanggo dokumen mbukak. Apa sing ditindakake bakal mindhah jendhela document sing mbukak mudhun kanggo ngetokne apa sing kita gunakake, pilih lan paste. Cara liyane sing cepet ganti antarane dokumen XD mbukak yaiku kanggo mencet Command- ' .
04 saka 06
Cara Ngedit Unsur Desain Material ing Adobe Experience Design CC
Nalika kertu ing XD teka saka clipboard ora keri miwiti nggarap. Bab pisanan sing kudu sampeyan gunakake kanggo Ungroup kertu amarga sampeyan butuh akses menyang bit lan potongan nulis kertu. Kanggo nindakake iki, pilih kertu banjur pilih Objek> Ungroup utawa pencet Shift-Command-G.
Kertu panjenengan saiki dadi telung bagean:
- Kothak abu-abu cahya kanggo gambar.
- Kothak abu-abu medium kanggo teks
- Kotak bali digunakake minangka latar mburi.
Langkah pisanan yaiku mbusak kothak abu-abu cahya. Tujuane mung kanggo tumindak minangka placeholder kanggo gambar sing ndadekake, yen sampeyan milih, opsional.
Kotak kanthi teks kasebut bener werna abu-abu peteng karo opacity 50%. Kothak iki bisa digunakake minangka latar mburi teks lan sampeyan bisa ngganti warna lan opacity kothak.
Sanajan ora langsung katon, kothak werna abu-abu nuli ngirangi rancangan Desain Material sajrone sudut ndhuwur sing dibunderake kanthi 2 piksel. Tetep ana ing atine yen sampeyan nambah gambar. Sampeyan uga kudu sudhut bunder sing bisa ditambahake menyang aplikasi imaging utawa ing XD.
Ngerteni carane iki minangka negara bagéan saka kertu kasebut uga butuh bayangan. Spesifikasi ndadekake ana elevasi kertu saka 2 piksel. Kanggo nambah iki, pilih wangun latar ireng lan aturake nilai Y lan B (Blur) nganti 2 ing panel property.
05 saka 06
Cara Tambah Gambar menyang Kartu Desain Material ing Adobe XD CC
Ngerti kertu punika 344 piksel lan area gambar 150 piksel ( setengah ing dhuwur kothak abu-abu cahya ) Kita mbukak gambar ing Photoshop, dipotong dadi ukuran lan disimpen nganggo pilihan @ 2x ing dialog Export As kothak. Gambar kasebut diimpor menyang Adobe XD.
Kita banjur nyeret kothak abu-abu cahya liwat gambar ing pasteboard lan dipilih Object> Mask With Shape . Asilé yaiku gambar sing njupuk sudhut bulok sing bentuké. Kita banjur pindhah gambar menyang posisi pungkasan.
Kanthi gambar ing panggonan, kita banjur ngganti werna latar mburi kothak abu-abu Sedheng, ganti teks lan werna teks link.
06 saka 06
Nggunakake fitur Adobe XD CC Grid
Kanthi kertu rampung, saiki perlu disetel kanthi bener miturut spec Desain Material. Iki tegese ana 8 piksel ing salah siji sisi kertu lan kertu kudu 8 piksel ing sangisore bar aplikasi. Kanggo nindakake iki, klik sapisan ing jeneng artboard lan, ing Properties Panel, pilih Grid. Kothak katon liwat artboard.
Ukuran grid standar 8 piksel sing dadi ukuran kothak padha kanggo Material Design.If sampeyan butuh ukuran sing beda, ganti nilai ing area Grid. Yen sampeyan pengin ngganti warna kothak, klik chip warna lan pilih werna saka Pick Color sing kasil.
Kanthi kothak katon, klik ing kertu lan pindhah menyang posisi pungkasan.
Kanggo rampung, milih kertu, klik tombol Ulangi Grid lan ganti jarak antarane kartu nganti 8 piksel.