Ieskatieties Google materiālajā dizainā

• 2019

Pēdējā 2014. gada I / O pasākumā Google atnāca ar saviem jaunajiem pārsteigumiem. Bez tam oficiāli izlaida jauno Android atjauninājumu ar koda nosaukumu Lollipop, Google arī ieviesa savu jauno jauno dizaina valodu, Materiālu dizainu . Tā ir dizaina sistēma, kas nav paredzēta tikai jaunajiem Lollipop lietotāja interfeisa uzlabojumiem, bet arī visām ierīcēm un vidēm.

Materiālu dizainam ir dažas galvenās iezīmes, kas to atšķir no citām dizaina tendencēm ar saviem unikāliem veidiem. Tāpat kā tās nosaukums, to iedvesmoja reāli materiāli un tos apvienoja vienā dizaina sistēmā, lai radītu gludu, intuitīvu, skaistu un interaktīvu lietotāju pieredzi. Šajā ziņojumā mēs aplūkosim materiāla dizaina iekšpusi un sniegsim jums ātru rokasgrāmatu par to, kā to īstenot. Citējot Google emuāru, es teikšu: „Tas ir materiāls dizains”.

Ievads

Materiālu dizains ir vienota dizaina sistēma, kas nozīmē, ka tā tika izstrādāta, lai strādātu ar visām mūsdienu ierīcēm un platformām. No planšetdatora, viedtālruņa uz darbvirsmu un no Android, iO, Windows uz Web platformām. Visiem dizaina veidiem ir jābūt vienādiem jebkurā vietā.

Galvenie principi

Ir trīs galvenie principi, kas izstrādā materiālu dizainu. Tie ir vissvarīgākā daļa no materiāliem, ko piedāvā materiāli.

• Materiāls ir metafora . Materiālu izstrādi iedvesmoja ikdienā izmantoto taustes elementu izpēte, papīrs un tinte . Tas padara objekta gaismu, virsmu un kustības labāk, mijiedarbojoties vienam ar otru.

• Treknrakstā, grafiskā un apzināta . Tipogrāfija, režģi, telpa, mērogs, krāsa un attēlu izmantošana, kas izmantoti drukātā dizaina pamatojumā, padara materiāla saturu labāku.

• Motion nodrošina nozīmi . Šī ir viena no visvairāk atzīmētajām lietām. Materiālā jums vajadzētu būt jēgpilnu un atbilstošu kustību, izsmalcinātu un skaidru atgriezenisko saiti un efektīvu un saskaņotu pāreju.

Komponenti

Materiāla dizains pievērš uzmanību katrai detaļas detaļai, lai tos varētu izmantot vispārēji. Šīs sastāvdaļas palīdzēs jums veidot apbrīnojamu lietotni un vietni. Ir tik daudz sastāvdaļu, ko nodrošina materiāli, piemēram, pogas, slēdzis, karte, teksta ievade, fab (peldošas darbības poga), dialogs, grauzdiņš, apakšizvēlne, cilne un vairāk. Katram no viņiem ir savs noteikums un ceļvedis, kā tos veidot, lai jums nebūtu nekādu būtisku elementu.

Raksti lieta

Papildus komponentiem Materiāls nodrošina arī dažus papildu UI modeļus. Šie modeļi uzlabos lietotāja interfeisu, ko izveidojāt ar Materiāla komponentiem. Modeļi, ieskaitot datu formātu, navigācijas atvilktni, kļūdas, žestus, ritināšanas tehniku, meklēšanu, iestatījumus, attēlu ielādēšanu, velciet, lai atsvaidzinātu un vairāk.

Materiālu dizaina krāsas

Materiāla krāsas bija veidotas tā, lai nebūtu jūtaties neērti, dīvaini un plakani. Materiālu dizains, pateicoties iedvesmojumam no ikdienas vides, piemēram, ceļa zīmēm, mūsdienu arhitektūras, seguma marķēšanas lentes un sporta laukumiem, sniedz jums negaidītas un augstvērtīgas krāsas. Ir tik daudz krāsu paletes, lai izvēlētos, ka, veidojot lietojumprogrammas vai vietnes, jums ir vairāk ērtības. Varat arī lejupielādēt krāsu vietnes lietošanai paredzētos krāsu paraugus, piemēram, Photoshop kolekcijai.

Materiāla ikona

Ja esat Android izstrādātājs, tad jums ir jāzina daži bezmaksas ikonas, ko nodrošina Google. Tos parasti izmanto tikai galvenajam elementam un darbības joslai. Lai gan par citiem resursiem, mums ir jāmeklē citas ikonas, piemēram, mapei, failam, kopēšanai un ielīmēšanai utt. Manuāli. Materiālu projektēšanā Google ir noteikusi problēmu ar tonnas ikonas iepakojumu, ko varat izmantot.

Katra no ikonām ir izstrādājusi kādu dizaina pieeju, kas izmanto arī taustes materiālu izpēti. Viņi arī uztur materiālo principu, kas ir konsekvents. Jūs varat lejupielādēt šīs ikonas uz GitHub, tās ir aprīkotas ar dažādām iespējām, piemēram, iO, tīmeklī, Android vai svg. Ja vēlaties plašāku iespēju pielāgošanu, jūs, iespējams, vēlaties redzēt materiālu dizaina ikonas iepakojumos uz FlatIcon. Iepakojuma iekšpusē jūs saņemsiet ikonu vektoru (SVG un EPS), PSD un PNG versiju.

Materiāla animācija

Šī ir materiāla iezīmes, kas man visvairāk patīk. Materiāla animācijas ir tik reālas un intuitīvas. Katrai animācijai ir nozīmīgas, konsekventas un pareizas laika pārejas. Zemāk redzamais gif demo ir tikai viens no skaistajiem materiāliem. Lai nodrošinātu interesantu un atsaucīgu mijiedarbību, Google komanda izveido arī ūdens rippa veida animāciju lietotāja ievades efektam. To galvenokārt izmanto pogām un kartēm.

Šīs iezīmes, ko es izskaidroju, ir tikai neliela daļa no materiāla dizaina piedāvājuma. Lai uzzinātu vairāk par materiālo pasauli, vienkārši dodieties uz dokumentācijas lapu.

Īstenošana

Pēc noklusējuma materiāla dizains ir jaunais UI atjauninājums Android Lollipop. Visas vadlīnijas, ko Materiāls ir pielietojis tajā. Tā kā Materiāls ir paredzēts visu veidu videi, tā ieviešana citā sistēmā nebūs grūti. Un, pateicoties kopienām, tas ir vēl daudz vieglāk, izmantojot dažus rīkus, ko tie radīja.

Tie ir vairāki veidi, kā jūs varat sasniegt materiālu dizainu ārpus Android, piemēram, tīmekli.

Izmantojot CSS ietvarstruktūras

Tas ir vienkāršākais veids, ja vēlaties ieviest materiāla dizainu tīmekļa platformā. Ar ietvariem viss, kas jums jādara, ir inicializēt, pēc tam uzrakstīt nepieciešamos elementus. Ir daudzi ietvari, kurus var izmantot, piemēram, Materializēt, Materiālu UI vai Polimērs, lai nosauktu tikai dažus. Mana personīgā izvēle ietilpst Materializē. Tas ir vieglāk lietojams un saprotams, un tam ir lieliska dokumentācija ar jauku demo.

Seko vadlīnijām

Ja vēlaties īstenot Materiālu bez ietvaru palīdzības un vēlaties visvairāk sajaukt ar kodiem, tad jums ir jāievēro Materiālu vadlīnijas. Tur jūs atradīsiet visu to, kas jums jādara, un to, kas jums jāievēro, lai sasniegtu materiālos principus. Jūs redzēsiet visu pamata rokasgrāmatu, lai izveidotu komponentus, izkārtojumu, animāciju, krāsu, modeļus un vairāk. Jūs varētu vēlēties redzēt kādu materiālu kontrolsarakstu, lai atvieglotu attīstību.

Secinājums

Materiālu dizains ir lieliska dizaina sistēma, un tā ir kļuvusi par vienu no sagaidāmajām gada tendencēm. Nākamajos pāris mēnešos mēs to varam redzēt visur. Ar šo jauno Google dizaina atjauninājumu tiks pulētas vairākas lietotnes un vietne.

Un ar materiālu dizainu Google ir pierādījusi savu pārākumu kā vienu no lielākajiem tehnoloģiju uzņēmumiem. Tas padara Google ne tikai vadošo lomu meklētājprogrammu un mobilo operētājsistēmu jomā, bet arī dizaina jomā. Līdz šim nav citu uzņēmumu, kas izstrādā šo lielo lietu, piemēram, Google. Bet pieredze saka, ka tā ilgs. Tikai gaidīsim citu uzņēmumu atbildes uz Google materiālo dizainu.