Kuvakkeet ovat olennainen osa malleja. Ne ovat visuaalisia vihjeitä, jotka osoittavat erilaisia toimintoja, ja ne voivat antaa tuotteelle ainutlaatuisen identiteetin. Mutta aivan liian usein päätämme juhlia niiden merkitystä lataamalla samat kuvakesarjat ja saamalla jokaisen verkkosivuston jokaisen kuvakkeen näyttämään suunnilleen samalta. Mikä tapa käsitellä jotain niin tärkeää.
Tämän ongelman ratkaisemiseksi olen luonut oppaan, jonka avulla suunnittelijat voivat lisätä kuvakkeisiinsa visuaalista syvyyttä ja tehdä niistä yksilöllisiä edustamalleen tuotteelle. Tämä opetusohjelma on pitkälti vaikuttanut vaikuttavaan Google-materiaalisuunnitteluun.
Kuten Google 'materiaali on metafora'. Se lainaa visuaalisia vihjeitä fyysisestä maailmasta ja luo uuden visuaalisen kielen kaikkien niiden rajapintojen standardoimiseksi. Materiaalisuunnittelun periaatteet ovat saatavilla ja sitä voidaan käyttää nopeasti käyttöliittymien houkuttelevuuden ja käyttökokemuksen parantamiseksi.
Litteän muotoilun suuntaus inspiroi materiaalisuunnittelua, joka perustuu myös perusmuotoihin. Valitse huolellisesti, mikä muoto edustaa parhaiten elementtiä, jota kuvake kuvaa.
Varjo on hyvä tapa huijata silmiä ja antaa syvyyden tunne suunnittelulle, koska se stimuloi valon vaikutusta esineeseen.
Huomaa, että luonnonvaloa simuloidaan usein tulevan ylhäältä vasemmasta kulmasta.
Kutakin väriä käytetään useissa sävyissä visuaalisen syvyyden simuloimiseksi. Esimerkiksi Gmail-kuvakkeesta näet, että M: n muotoon käytetään erilaisia punaisia sävyjä ja kirjekuoren kannen alla käytetään tummempaa harmaata sävyä.
Käytämme yksinkertaistettua versiota materiaalisuunnittelutyylistä, ja jokaiselle kuvakkeelle käytämme vain kolmea samanväristä sävyä ja pidämme varjot tasaisina ja lyhyinä yleisen 'pitkä varjo' -efektin sijaan.
Riko alkuperäinen kuvake kahtia ja saa yläosan näyttämään nostetulta. Voit saavuttaa tämän luomalla varjoefektin näiden kahden muodon leikkauspisteeseen. Käytä kolmea keltaista sävyä - vaaleampi päällä, tummempi alaosassa ja pidä tumminta sävyä varjossa.
Alkuperäisessä kuvakkeessa meillä on vihje varjoefektistä kahden kuplan välissä, josta luodaan varjo.
Valitse alemmassa muodossa kohta, joka muodostaa oikean kulman aukosta, ja siirrä sitä ylöspäin vasemmalle, kunnes muodostat suoran kulman vasempaan yläkulmaan.
Kopioi ylin kupla ja siirrä kopiota alas ja oikealle. Valitse kopio ja alempi kuplan muoto, luo jako 'Pathfinder' -toiminnon avulla ja säilytä vain leikkauspiste edellisen kopion kanssa.
Nyt voit levittää kolme sinistä sävyä ja antaa kirkkaimman päälle, tummimman keskelle ja toisen tummimman pohjaan.
Luomme taitetun paperitehosteen.
Kopioi kuvake ja poista kaksi ylimääräistä pistettä oikeassa yläkulmassa ja sitten vasemmassa reunassa saadaksesi kaksi kappaletta.
Kopioi vasen taitto ja siirrä sitä oikean päälle.
Luo varjoefekti leikkaamalla nämä kaksi muotoa. Levitä sitten kolme värisävyä pitäen varjo tummimpana, pitkän kappaleen toiseksi tummana ja yläosan vaaleammana.
Aloita pyöristämällä reunat ja pura sitten lipun pohja.
Luo taittovaikutus seuraamalla kahta viistoa, jotka leikkaavat vinosti. Jaa ”Pathfinder” -toiminnolla lipun muoto viivoilla ja levitä lippuun kolme vihreää sävyä pitäen pohja harmaana.
Kopioi sydämen kuvake.
Eristä muodon vasen puolisko.
Seuraa diagonaalista viivaa alaspäin oikeasta yläkulmasta.
Päällekkäin saatu muoto sydämen kanssa ja siirrä sitä sitten oikealle vähennäksesi varjon muoto. Levitä kolme vaaleanpunaisen sävyä.
Alkuperäisen kuvakkeen sisällä oleva tyhjä aukko osoittaa, mihin voimme sijoittaa varjon.
Luo kaksi kolmion muotoa jokaisesta valinnasta.
Siirrä pienemmän kopio oikealle ja pura tuloksena oleva leikkauspiste varjomuodoksi.
Levitä kolme ruskeaa sävyä pitämällä vaalein vasemmalla, toinen vaaleampi suurella kolmiolla ja tummin varjon keskellä. Pienennä tulosta lisäämällä kulmasädettä.
Valitse ja kopioi henkilön alaosa vasemmalle. Kohdista kopio oikealla olevan henkilön kanssa. Valitse nyt kolme päällekkäistä muotoa ja käytä 'Jaa' -työkalua 'Pathfinder' -paneelista. Ota nyt käyttöön värit.
Valitse alempi muoto ja siirrä sen keskimmäistä yläosaa ylöspäin, kunnes se näyttää timantilta.
Kopioi ylempi timantin muoto ja siirrä kopiota 10 tai 20 kuvapistettä alaspäin.
Valitse kaksi alempaa muotoa ja käytä ”Jaa” -työkalua ”Pathfinder” -paneelista.
Pidä tuloksena olevista leikattuista muodoista vain kaksi alempaa kappaletta ja poista mahdolliset lisäpisteet.
Kääri se levittämällä kolme punaista sävyä asettamalla keskelle tummimmat.
Valitse 'Suora valintatyökalu (A)' kirjekuoren muodon toinen ylempi piste.
Lisää piste segmenttiin oikealle 'Kynätyökalulla'.
Nyt kun sinulla on ylimääräinen piste, voit muotoilla kyseisen negatiivisen tilan näyttämään paperilta nostamalla kahta ylempää kohtaa ja siirtämällä niitä oikealle ja vasemmalle kuten kuvassa.
Valitse kaikki ja käytä jakoa 'Pathfinder' -paneelista. Erota paperin ylempi muoto kirjekuoresta ja kopioi sitten kirjekuori paperin päälle leikkaaksesi varjon muoto ennen kolmen sinisen sävyn levittämistä.
Eristä kakun alaosan kaksoiskappale.
Pienennä sen leveyttä siirtämällä vasenta ja oikeaa reunaa sisäänpäin.
Siirrä tuloksena oleva muoto alkuperäisen kuvakkeen päälle ja pidennä ylemmät pisteet päällekkäin jään muodon kanssa.
Luo jako kaikista päällekkäisistä muodoista 'Pathfinder' -sovelluksella ja poista ylimääräiset pisteet aiemmin luomasi kapean kakkupohjan vierestä.
Viimeistele kakku levittämällä vaalean oranssia kuorrutukseen ja kynttilään, tummempi sävy pohjaan ja vielä tummempi oranssi liekin muotoon ja varjoreunaan.
Kuvakkeiden luominen Materialin tyylillä voidaan saavuttaa yksinkertaisuudella. Tarvitset vain hyvän yhdistelmän harkittuja geometrisia muotoja, rohkeita värisävyjä ja varjoefektin.
Hyvä uutinen on, että sinun ei tarvitse edes luoda kaikkia kuvakkeita tyhjästä, kuten teimme tässä opetusohjelmassa. Voit aloittaa olemassa olevista ilmaisista, tasaisista kuvakkeista ja soveltaa yksinkertaisia oppimiasi tekniikoita.
Kerro meille mitä mieltä olet! Jätä ajatuksesi, kommenttisi ja palautteesi alla.
• • •