"Material Design" specifikacija iš "Google" iš pradžių buvo skirta "Android" platformai, nes tai leidžia pasiūlyti platformos dizaino nuoseklumą.
01 iš 06
Kaip sukurti "Material Design Card" "Adobe Experience Design CC"
Kūrę dizaineriai pradėjo spragtelėti ir suvokti, kodėl jis yra, "Material Design" tyliai tapo viena iš įtakingiausių žiniatinklio ir mobiliojo dizaino vizualinių filosofijų. Viskas, ką jums reikia padaryti, norėdami sužinoti, ką mes esame, yra atlikti "Material Design" paiešką Pinterest, ir pamatysite šimtus pavyzdžių ir bandymų įrenginiuose, planšetiniuose kompiuteriuose ir netgi tinklalapiuose.
Įspūdingas "Material Design" aspektas yra "Google" mąstymas apie tai, kaip programos turi būti rodomos ir dirbamos mobiliuosiuose įrenginiuose, tačiau šios sąvokos taikomos bet kokiam bet kokio dydžio ekranui bet kurioje platformoje. Kaip nurodyta "Google" specifikacijos pradžios dalyje, "mes patys siekėme kurti vartotojams vizualią kalbą, kurioje būtų sintezuojami klasikiniai gero dizaino principai ir naujovės bei technologijų ir mokslo galimybės. Tai yra materialus dizainas. Ši specifikacija yra gyvas dokumentas, kuris bus atnaujintas, nes mes toliau plėtoti medžiagos principus ir specifiką. "
Medžiaga, apie kurią kalbama labai bendrais bruožais, yra popierius ir "Material Design" ženklas yra kortelė. Pagalvokite apie rodyklės kortelę ant paviršiaus ir esate teisingame kelyje. Kortelė yra elementas, kuriame yra nuotraukos, vaizdo įrašai, tekstinių nuorodų ir pan., Bet kur jie skiriasi nuo daugelio interaktyvių dizainų, jie skirti sutelkti dėmesį į vieną temą. Kortelės turi suapvalintus kampus, juose yra silpnų šešėlių, rodančių, kad jie yra virš paviršiaus, ir jei jie visi yra toje pačioje plokštumoje, jie vadinami "kolekcija".
Šioje "Kaip" mes ketiname kurti kortelę, pagrįstą specifikacija. Užuot kurdami kortelę su įvairaus vaizdo ir piešimo įrankiais, mes ketiname atvykti iš kitos krypties. Mes ketiname naudoti "Adobe Experience Design" įrankius, kurie šiuo metu yra tik "Macintosh" visuomenei peržiūrimi ir yra nemokami. Galite jį atsisiųsti čia.
Pradėkime.
02 iš 06
Prototipų meno kūrimas "Adobe Experience Design CC" kūrimas
Nėra aišku, kaip sukurti "Android" ekraną iš "Start" ekrano "Experience Design CC" (XD). Ką mes darome, kai mes atidarome XD, yra pasirinkti "iPhone 6" parinktį, o kai atidaroma sąsaja, įrankių juostos apačioje mes pasirenkame " Artboard" įrankį ir "Android Mobile " pasirinkite "Properties" skydelyje dešinėje esančias parinktis. Tada mes pereiname į pasirinkimo įrankį, vieną kartą spustelėkite "iPhone" meniu skydelio pavadinimą ir ištrinkite meniu langą. Ne daugiau.
Pagal dabartinę XD versiją, šalia "iPhone 6" yra maža rodyklė, kuri spustelėjus atidaro išskleidžiamąjį meniu. Iš ten pasirenkate "Android Mobile" versiją, o sąsajoje atidaroma pasirinkta " Android Mobile" meniu.
Kad užtikrintume, kad kortelė yra tinkama ekrano vieta, mes dažniausiai einame per 3 eskizą ir kopijuojame ir įklijuokite būsenos juostą, juostos juostą ir programų juostą iš medžiagų dizaino šablono į pagrindinę plokštę. Sketch 3.2 yra "Material Design" šablonas ( Failas> Naujas iš šablono> Material Design ), o kitas tikrai geras nemokamas iš Kyle Ledbetter, kurį galite gauti čia. Jei neturite Sketch, galite nukopijuoti ir įklijuoti juos iš "XD" lipdukų, esančių " Failas"> "Atidaryti vartotojo sąsajos rinkinys"> "Google Material" . Taip pat galite juos atsisiųsti iš "Google", kad galėtumėte juos naudoti "Photoshop", "Illustrator", "After Effects" ir "Sketch".
03 iš 06
"Material Design Card" pridėjimas į "Adobe XD" CC Artboard
Viena iš naudingiausių "XD" funkcijų - "Apple iOS", "Google" medžiagos ir "Microsoft Windows" sąsajos rinkinių įtraukimas. Daugeliu atžvilgių žodis "Rapid" pridedamas prie termino "Rapid Prototyping". Be to, jie palengvina dizainerio darbą, kadangi bendri vartotojo elementai neturi būti nuolat atnaujinami dizaino programoje, pvz., Photoshop, Illustrator ar Eskizas.
Vartotojo sąsajos elementas buvo kortelė. Norėdami tai pasiekti, pasirinkome File> Open UI Kit> Google Material, o rinkinys atidarytas kaip naujas dokumentas. Elementas, kurio mums reikia, buvo nustatytas kategorijoje "Kortelės".
Ką mes mėgstame apie tai, jie laikosi "Material Design" specifikacijos, išdėstytos "Content Block" specifikacijose, taip pat teksto formatavimo ir tarpų specifikacijose, išdėstytose Typography spec.
Karto stilius, kurį norėjome, buvo kairysis apačioje esantis. Mes tiesiog pritvirtiname jį pele ir nukopijuojame jį į mainų sritį. Deja, XD nėra atidarytų dokumentų skirtukų sąsaja. Ką mes darome, norime šiek tiek pakelti atvirą dokumentų langą, kad atskleistų tą, su kuo mes dirbame, jį pasirinkę ir įklijuoti. Kitas būdas greitai perjungti atvirus XD dokumentus yra paspausti komandą- ' .
04 iš 06
Kaip redaguoti medžiagos dizaino elementą "Adobe Experience Design CC"
Kai XD kortelė atkelia iš iškarpinės, nedvejodami pradėkite dirbti su ja. Pirmas dalykas, kurį jums reikia padaryti, yra atskleisti kortelę, nes jums reikia prisijungti prie kortelės sudedamųjų dalių. Norėdami tai padaryti, pasirinkite kortelę ir pasirinkite Object> Ungroup arba paspauskite Shift-Command-G.
Dabar jūsų kortelė susideda iš trijų dalių:
- Šviesiai pilkas langas vaizdui.
- Teksto vidutinis pilkas langelis
- Užpakalinis dėžutė naudojama kaip fonas.
Pirmasis žingsnis - ištrinti šviesiai pilką laukelį. Jo vienintelis tikslas yra veikti kaip paveikslėlio rezervuaras, kuris, jei pasirinksite, bus neprivalomas.
Dėžutė su tekstu iš tikrųjų yra tamsiai pilka su 50% neskaidrumu. Šis laukelis gali būti naudojamas kaip teksto fonas, o jūs galite pakeisti spalvą ir dėžutės opacity.
Nors tai nėra akivaizdu iš karto, šviesiai pilka juosta atitinka Material Design specifikaciją, nes jos viršutiniai kampai apvalinami 2 pikseliais. Atminkite tai, jei pridedate vaizdą. Taip pat reikės suapvalintų kampų, kuriuos galima pridėti prie vaizdo apdorojimo programos arba XD.
Matydamas, kaip tai yra kortelės poilsio būsena, taip pat reikia šešėlio. Specifikacija aiškiai parodo, kad 2 pikselių atminties atstumas pakyla. Norėdami tai pridėti, pasirinkite juodo fono formą ir savybių skydelyje nustatykite Y ir B (Blur) reikšmes iki 2.
05 iš 06
Kaip pridėti vaizdą prie medžiagos dizaino kortelės "Adobe XD CC"
Žinant, kad kortelė yra 344 pikselių pločio ir vaizdo plotas yra 150 pikselių aukščio ( pusė šviesiai pilko langelio aukščio ), mes atidarėme vaizdą "Photoshop", apkarpėme jį iki dydžio ir išsaugojome jį naudodamiesi parinktimi "@ 2x", pateiktoje "Photoshop" dialoge " Eksportuoti kaip" dėžė. Vaizdas buvo importuotas į "Adobe XD".
Tada mes pastumėme šviesiai pilkos spalvos dėžutę virš kartono paveikslėlio ir pasirinkome Objektas> Kaukė su formatu. Rezultatas buvo vaizdas, surinkęs suapvalintus formos kampelius. Tada perkelkime vaizdą į galutinę poziciją.
Kai vaizdas buvo vietoje, tada mes pakeitėme vidutinio pilkojo langelio fono spalvą, pakeitė teksto nuorodą ir spalvą.
06 iš 06
"Adobe XD CC tinklelio" funkcijos naudojimas
Dabar, kai kortelė užpildyta, ji turi būti tinkamai įrengta pagal "Material Design" specifikaciją. Tai reiškia, kad abiejose kortelės pusėse yra 8 pikseliai, o kortelė turi būti 8 pikseliai žemiau programos juostos. Norėdami tai padaryti, spustelėkite vieną kartą ant masto plokštės pavadinimo, o savybių skydelyje pasirinkite Tinklelis. Tinklelis pasirodo virš masto plokštės.
Numatytasis tinklelio dydis yra 8 pikseliai, kurie yra tokio pat dydžio kaip Material Design. Jei reikia kitokio dydžio, pakeiskite vertę Tinklelio srityje. Jei norite pakeisti tinklelio spalvą, spustelėkite spalvotą lustą ir pasirinkite spalvą iš gaunamo spalvų pasirinkimo.
Kai matysite tinklelį, spustelėkite kortelę ir perkelkite ją į galutinę padėtį.
Norėdami užbaigti, pasirinkome kortelę, spustelėjome mygtuką "Pakartoti tinklelį" ir pakeitėme tarpą tarp kortelių iki 8 taškų.