Ui-Suunnittelu
Kuinka muuttaa tylsät kuvakkeet nopeasti alkuperäisiksi mestariteoksiksi
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.
Googlen materiaalisuunnittelun periaatteet
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.
1. Käytä yksinkertaisia geometrisia muotoja ja lihavoituja värejä
Litteän muotoilun suuntaus inspiroi materiaalisuunnittelua, joka perustuu myös perusmuotoihin. Valitse huolellisesti, mikä muoto edustaa parhaiten elementtiä, jota kuvake kuvaa.
2. Lisää syvyys hienovaraisella varjostuksella
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.
3. Korvaa Drop Shadows värisävyillä
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ä.
Kuinka voit tehdä sen liian: Vaiheittaiset esittelyt
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.
Resurssit
- Tarkista Googlen ilmainen ilmainen kuvakokoelma tässä .
Aloitetaan.
1. Pulttikuvake
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.
2. Chat-kuvake
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.
3. Valitse Mark-kuvake
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.
4. Lippukuvake
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.
5. Sydämen kuvake
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ä.
6. Vuoret-kuvake
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ä.
7. Ihmiset-kuvake
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.
8. Kelluva neliön kuvake
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.
9. Kirjainkuvake
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ä.
10. Kakku-kuvake
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.
Paranna kuvakesarjan ulkoasua ja tunnetta
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.
• • •
