socialgekon.com
  • Tärkein
  • Suunnitteluprosessi
  • Muokkaus
  • Prosessi Ja Työkalut
  • Sijoittajat Ja Rahoitus
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.

kuva



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ä

kuva

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

kuva

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ä

kuva

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

kuva

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

kuva

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

kuva

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

kuva

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

kuva

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

kuva

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

kuva

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

kuva

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

kuva

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

kuva

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.

• • •

Lue lisää ApeeScape Design Blogista:

  • Suunnittelun periaatteet ja niiden merkitys
  • Parhaat UX-suunnittelijoiden salkut - inspiroivia tapaustutkimuksia ja esimerkkejä
  • Gestaltin suunnitteluperiaatteiden tutkiminen
  • Adobe XD vs. Sketch - mikä UX-työkalu sopii sinulle?
  • 10 UX-toimitettavaa huippusuunnittelijaa käyttää

Estetiikka ja havainnointi - Kuinka lähestyä käyttökokemuksia

Ux-Suunnittelu

Estetiikka ja havainnointi - Kuinka lähestyä käyttökokemuksia
Tietorakenteen periaatteet mobiililaitteille (infografiikan kanssa)

Tietorakenteen periaatteet mobiililaitteille (infografiikan kanssa)

Ux-Suunnittelu

Suosittu Viestiä
Init.js: Opas Full-Stack-JavaScriptin miksi ja miten
Init.js: Opas Full-Stack-JavaScriptin miksi ja miten
Taso ylöspäin - opas pelin käyttöliittymään (infografiikan kanssa)
Taso ylöspäin - opas pelin käyttöliittymään (infografiikan kanssa)
Tarvitset sankarin: projektipäällikkö
Tarvitset sankarin: projektipäällikkö
Viimeinen opas päivämäärän ja ajan manipulointiin
Viimeinen opas päivämäärän ja ajan manipulointiin
Kuinka poseeraa kuvissa, jotta ne näyttävät rennolta ja luonnolliselta
Kuinka poseeraa kuvissa, jotta ne näyttävät rennolta ja luonnolliselta
 
Käytännöllinen lähestymistapa pelisuunnitteluun
Käytännöllinen lähestymistapa pelisuunnitteluun
Kuinka rakentaa vahva etätyökulttuuri: Haastattelu Christy Schumannin kanssa
Kuinka rakentaa vahva etätyökulttuuri: Haastattelu Christy Schumannin kanssa
Kannustaminen toimintaan ja oikea-aikaisuuteen etätyössä
Kannustaminen toimintaan ja oikea-aikaisuuteen etätyössä
Kuinka rekrytoida UX-tutkimuksen osallistujia
Kuinka rekrytoida UX-tutkimuksen osallistujia
Monimutkainen mutta kiinteä: Katsaus kiinteistöjen vesiputouksiin
Monimutkainen mutta kiinteä: Katsaus kiinteistöjen vesiputouksiin
Luokat
Tuotteen ElinkaariTeknologiaUi-SuunnitteluProsessi Ja TyökalutKaukosäätimen NousuiOS-vinkkejäSuunnitteluKetterä KykyOngelmien karttoittaminenSuunnittelu Ja Ennustaminen

© 2023 | Kaikki Oikeudet Pidätetään

socialgekon.com