Google'dan Materiallar dizaynining spetsifikatsiyasi aslida Android platformasiga platformadagi dizaynning mustahkamligini taklif qilish uchun mo'ljallangan edi.
01dan 06gacha
Adobe Designer Design CCda moddiy dizayn kartasini yaratish
Dizaynerlar uning orqasidan quvib, ortidagi fikrlarni tushunishga kirishganidan so'ng, Material Design jimgina veb-va mobil dizayndagi eng samarali ingl. Falsafalardan biriga aylandi. Nima qilishimiz kerakligini bilish uchun nima qilish kerakligini Pinterestda moddiy dizayn bo'yicha qidirishni amalga oshirish va siz qurilmalarda, planshetlarda va hatto veb-saytlarda yuzlab misollar va tajribalarni ko'rasiz.
Materiallar Dizaynining qiziqarli tomoni - bu ilovalarning mobil qurilmalarda ko'rinishi va ishlashi haqida Googlening fikrlashidir, lekin tushunchalar har qanday platformadagi har qanday ekranga qo'llaniladi. Google, spetsifikatsiyani ochish paragrafida ta'kidlaganidek, "Biz o'zimizni innovatsion va texnologiya va ilm-fan imkoniyatlari bilan yaxshi dizayni klassik printsiplarini sintezlaydigan foydalanuvchilarimiz uchun ingliz tilini yaratishga chaqirdik. Bu moddiy dizayndir. Ushbu spektakl moddiy dizaynning asoslari va xususiyatlarini rivojlantirishda davom etayotganimiz uchun yangilanadigan hayotiy hujjatdir. "
Umuman aytganda, materiallar qog'oz va materiallar dizaynining o'ziga xos belgisidir. Indeks kartasini sirt ustida o'ylab ko'ring va siz to'g'ri yo'lda turibsiz. Karta - fotosuratlar, videolar, matnli havolalar va boshqalarni o'z ichiga oladigan element, ammo ular eng ko'p interaktiv dizaynlardan farq qiladigan narsadir, ular bitta mavzuga qaratilgan bo'lishi kerak. Kartochkalar yumaloq burchakli bo'lib, ular sirtdan yuqorida ko'rsatilgan nostral soyalarni o'z ichiga oladi va agar ular bir xil tekislikda bo'lsa, ular "to'plam" deb nomlanadi.
Ushbu "Qanday qilib" biz spec asosida kartochkani yaratmoqchimiz. Kartani turli xil ko'rish va chizilgan vositalar bilan yaratmasdan, biz uni boshqa yo'nalishdan bilib olamiz. Biz Adobe ning tajriba dizayni vositalaridan foydalanishni rejalashtirmoqdamiz, u hozirda faqatgina Macintosh-da bo'lib o'tadi va bepul. Uni bu yerdan yuklab olishingiz mumkin.
Qani boshladik.
02 of 06
Adobe Tecrübeyle Ustasi CC'deki Prototip Ustunini yaratish
Tajriba Ustasi JK (XD) da Start Screen dan Android ekranini yaratishning aniq usuli yo'q. Biz XDni ochganda nima qilsak, iPhone 6 opsiyasini tanlaymiz va interfeys ochilganda biz Avtomobil panelining pastki qismidagi Artboard vositasini tanlaymiz va Properties panelidagi o'ngdan tanlovlardan Android Mobile- ni tanlang . So'ngra biz tanlov vositasiga o'tamiz, iPhone-ning shtatidagi ismiga bir marta bosamiz va ishchi panelni o'chirib tashlaymiz. Boshqa emas; boshqa ... bo'lmaydi; Endi yo'q.
XD ning joriy versiyasida, iPhone 6-ning yonidagi kichik bir o'q bor, u tugmani bosilganda ochiladigan menyuni ochadi. U yerdan siz Android Mobile versiyasini tanlaysiz va tanlangan Android Mobile xaritasi interfeysda ochiladi.
Biz kartani to'g'ri ekran maydoniga ega bo'lishimiz uchun, odatda Sketch 3 ga o'tib, Materiallar Ustasi shablonidan Ishtirok Panasiga nusxa ko'chirish, joylashtirish va joylashtirishni amalga oshiramiz. Sketch 3.2 tarkibida Material Design shabloni ( File> New From Template ( Material Template ) materiale Design ) va yana bir bepul bepul, bu erda qo'lga kiritilgan Kyle Ledbetter. Sketchingiz yo'q bo'lsa, ularni File> UI UI Kiti> Google Materialida joylashgan XD stikerlaridan nusxa ko'chirishingiz yoki yapıştırabilirsiniz. Photoshop, Illustrator, After Effects va Sketch-dan foydalanish uchun ularni Google'dan yuklab olishingiz mumkin.
03 ning 06
Adobe XD CC kartotekasiga moddiy dizayn kartasini qo'shish
XD ning eng foydali xususiyatlaridan biri UI to'plamlarini Apple iOS, Google Material va Microsoft Windows uchun qo'shilishi hisoblanadi. Ko'p jihatdan, ular "Tez prototip" atamasiga "Tez" so'zini qo'shib qo'yishadi, shuningdek ular oddiy UI elementlarida Dizaynerning ishini osonlashtiradilar, masalan, Photoshop, Illustrator yoki Sketch.
Biz kerakli UI elementi kart edi. Bunga erishish uchun biz File> Open UI Kit> Google Material ni tanladik va kit yangi hujjat sifatida ochildi. Biz kerakli element Kartalar kategoriyasida topilgan.
Biz bu narsalarni yaxshi ko'raman, ular Materiallar tarkibining xususiyatlarini, shuningdek, Tarkib bloklari xususiyatlari bilan bir qatorda, Tipografi spektrlarida joylashtirilgan matnni formatlash va masofani aniqlash xususiyatlariga ham rioya qilishadi.
Biz xohlagan karta stili pastki chapda edi. Biz uni sichqoncha bilan joylashtirib, uni buferga ko'chiramiz. Afsuski, XD ochiq hujjatlar uchun sekmeli interfeysni o'z ichiga olmaydi. Biz nima qilmoqdamiz, biz ochiq hujjat oynasini bir oz pastga tushiramiz, ishlayotganimizni ko'rsatishimiz, uni tanlash va joylashtirish. XD hujjatlarini ochiq almashtirishning yana bir yo'li - Buyruq- ni bosing .
04 of 06
Adobe Designer Design CCda Materiallar Ustasi Elementini Qanday Tartibga solish
XD-dagi karta bufetchadan kelganida, u bilan ishlashni boshlamang. Sizga kerak bo'lgan birinchi narsa - bu kartani tuzish, kartani tashkil etuvchi bit va qismlarga kirishingiz kerak. Buning uchun kartani tanlang va Ob'ektni> Guruhni guruhlash-ni tanlang yoki Shift-Buyruq-G-ni bosing.
Sizning kartangiz hozir uchta qismdan iborat:
- Rasm uchun ochiq kulrang quti.
- Matn uchun o'rtacha kulrang quti
- Orqa fonda fon sifatida ishlatiladi.
Birinchi qadam - ochiq kulrang qutini o'chirish. Uning yagona maqsadi, siz tanlagan taqdirda, ixtiyoriy bo'lgan imidj uchun joy egallashdir.
Matn qutisi, aslida, 50% opacity bilan quyuq kulrang. Ushbu quti matni fon sifatida ishlatilishi mumkin va siz rangni va qutining opacityligini o'zgartirishingiz mumkin.
Bu darhol aniq bo'lmasa-da, ochiq-oydin rangli quti Materiallar Dizayniga mos keladi, chunki uning yuqori burchaklaridagi 2 ta piksel yumaladi. Agar rasm qo'shsangiz, buni yodingizda tuting. Bundan tashqari, tomosha qilish dasturiga yoki XD ga qo'shilishi mumkin bo'lgan yumaloq burchaklar kerak bo'ladi.
Bu kartaning dam olish holati qanday ekanini ko'rib, u ham soyaga muhtoj. Masalan, 2 dyuymli kartani xotirjamlik balandligi aniqlangan. Buni kiritish uchun qora fon shakli tanlang va Y va B (Blur) qiymatlarini xususiyatlar panelidagi 2-ga sozlang.
05 of 06
Adobe XD CC-da moddiy dizayn kartasiga rasmni qanday qo'shish mumkin
Kartani bilish 344 piksel kengligida va tasvir maydoni 150 piksel balandlikda ( ochiq kulrang qutining yarmi balandligi ) Photoshopda tasvirni ochib, o'lchamga chiqarib tashladik va Photoshop'ning Export As dialogidagi @ 2x opsiyasi yordamida saqladik. quti. Rasm Adobe XD-ga kiritildi.
Keyinchalik ochiq kulrang qutini kartondagi tasvir ustida sudrab chiqdik va tanlangan Ob'ektni> Murakkab bilan murakkab . Natijada shaklning yumaloq burchaklaridan olingan rasm tasvirlangan. Keyinchalik tasvirni yakuniy holatiga o'tkazdik.
Rasmdagi joy bilan biz o'rta kulrang qutining fon rangini o'zgartirdik, matn matni va matnning rangini o'zgartirdik.
06 of 06
Adobe XD CC Grid xususiyatidan foydalanish
Kartani to'liq to'ldirib, endi Material Design spec ga asosan to'g'ri joylashtirilishi kerak. Buning ma'nosi kartaning har ikki tomonida 8 piksel bo'lishi va kartaning app baraning ostidagi 8 piksel bo'lishi kerak. Buni amalga oshirish uchun, unda bir marta bosing va unda Xususiyatlar panelida Grid-ni tanlang. Tarmoq ish stoli ustida paydo bo'ladi.
Standart panjit o'lchami Material Design uchun bir xil grid kattaligiga ega bo'lgan 8 pikseldir. Agar siz boshqa o'lchamga muhtoj bo'lsangiz, Grid maydonidagi qiymati o'zgartiring. Agar panjara rangini o'zgartirmoqchi bo'lsangiz, rang chizig'ini bosing va natijada olingan ranglarni tanlashingiz mumkin.
Izgarasi ko'rinadigan bo'lsa, kartani bosing va uni oxirgi joyiga o'tkazing.
Bajarilishi uchun biz kartani tanladik, Takrorlash uchun qo'llanma tugmasini bosdik va kartalar orasidagi intervalni 8 pikselga o'zgartirdik.