Product Graphics 6 Tehnike za izdelavo slik bolj informativne narave
Spletni oblikovalci so postali zelo spretni s tehnikami trženja. Vabljiva vsebina strani je vedno dobra, toda ko gre za oprijemanje obiskovalcev, so slike najbolj priljubljena oblika medijev. Ne potrebujejo zvoka, kot so demo posnetki, in lahko v nekaj sekundah hitro prenesejo pomembne informacije. Morda se zdi enostavno, vendar obstajajo nekatere pomembne tehnike za gradnjo informativnih slik na spletnih straneh.
Te vključujejo oznake funkcij, posnetke iz bližnjih posnetkov, primerjave cen in druge podrobnosti. Spletni oblikovalci lahko uporabijo informacijsko grafiko za modeliranje novih aplikacij, programske opreme, video iger ali mnogih drugih izdelkov! Čeprav se te tehnike najpogosteje uporabljajo na različnih področjih tehnologije.
Oglejte si spodnje ideje, kjer vam ne ponujamo samo nasvetov, temveč tudi primere resničnih lepih grafičnih izdelkov, ki so bili napolnjeni z veliko informacijami.
1. Razširite vsebino
Informativne slike se ne smejo uporabljati namesto dobre vsebine spletne strani. Namesto tega uporabite posnetke za razširitev ključnih točk in jasno jih prikažete za vaše obiskovalce. Eden najboljših načinov za to je gradnjo majhne predstavitve, ki bo poudarila pomembna področja vadnice. Z nekaj informativnimi grafikami in posnetki zaslona je veliko lažje ohraniti interes bralcev, ki se premika skozi vsak korak.
Ko poskusite prikazati programsko vadnico (kot je na primer vadbo Photoshop), je to težko posredovati sporočilo v pisno besedilo. Obiskovalci bodo pristali na vaš članek in takoj začeli podzavestno oceniti gradivo v delčku sekunde. Web Designer Wall ima fantastično vadnico o izgradnji zaokroženih slik CSS3, ki jih spremlja priročna grafika. To vključuje nekatere oznake in posnetek učinka iz bližnjega posnetka.
Na prvotni strani članka ta podoba v vašo glavo doda veliko jasnejšo sliko k temu, kar boste ustvarjali. Avtor je dodal majhno predstavitveno povezavo, zakaj ne vključuje tudi nekaterih demo slik? Veliko bolj boste pritegnili pozornost z ustrezno označenim demo posnetkom.
Poskusi izogibajte se dodajanju slik samo zaradi medijske vsebine v vaši objavi. Če lahko razložite svoje metode ali razmišljanje brez slike, začnite tukaj najprej. Šele potem, ko pogledate nazaj na svojo spletno kopijo, razmislite o ponovnem ponavljanju nekaterih točk v podrobni slikovni sliki. Morda boste našli a Vadnica zahteva več vizualnih pokazateljev, saj se kompleksnost povečuje. Dva primera lahko zajemata izdelavo zbirke podatkov spletnega mesta ali nabora podatkov tabel.
2. Označite Pomembne funkcije
Ker bo vsak kos programske opreme / tehnologije imel toliko funkcij, je skoraj nemogoče razložiti vsak bit. Ne samo to, vendar je zelo malo verjetno, da bodo vaši obiskovalci zainteresirani za branje več kot 20 nalepk na grafiki z informacijami. Držite se najbolj zanimivih funkcij in z oznakami pojasnite malo bolj poglobljeno.
Ko pišete spletno kopijo za vsebino nalepke izogniti se dolgemu jeziku ko bo mogoče. Če obiskovalci iščejo najnovejšo različico vaše aplikacije, morda ne zanima veliko sprememb v barvni shemi. Kako bo to vplivalo na njihov dnevni potek dela? Namesto tega morda poudarite, kaj je zanje koristno, kot nova vmesniška plošča ali večuporabniška povezljivost. Na splošno bi morale biti abstraktne funkcije ki jih ne morete videti samo “gledam” na izdelku.
Takšna oznaka za popolno pojasnitev teh funkcij bo zagotovila najobsežnejši odziv. Obiskovalci bodo čutili, da jih obravnavajo kot inteligentne, zrele kupce, ki so sposobni sprejeti svoje odločitve. Če vam resnično všeč vaše funkcije, to daje večji pritisk k nakupu vaše programske opreme ali izdelka.
Spodaj je primer s strani z posodobitvami Mozilla Firefox.
Vidite lahko, da so oblikovalci uporabljali pikčaste krivulje, da poudarijo oznake in nove funkcije. To so dejansko slike ozadja, ki so postavljene povsem znotraj vsebnika div. Presenetljivo je, da je vse besedilo etikete zapisano tudi znotraj HTML oznak (ne samo ena velika slika).
Menim, da ta metoda ni samo priročna za robote Google pajka, ampak tudi za mobilne uporabnike, ki običajno ne morejo doživeti celotne spletne strani.
Opazujte tudi, kako je funkcija Panorama na levi ponuja majhno “Nauči se več” povezavo. To je morda najboljša praksa, ki jo lahko dobite pri gradnji informacijske grafike! Če imate na isti strani nadomestne strani ali sidra, lahko obiskovalci kliknejo te povezave, da bi razumeli več o zapletenih funkcijah.
Ne pozabite, da se informativne grafike uporabljajo za preprosto prikazovanje ugank in funkcij izdelkov vašim obiskovalcem. Torej, čeprav ste omejeni v prostoru okoli grafike, ki jo lahko vedno nudite možnost, da izveste več na zunanji strani.
3. Enostavne, nevsiljive oznake
Nalepke so resnično najpomembnejši vidik pri ustvarjanju informativne produktne grafike. Obiskovalci bodo verjetno morali razumeti različna področja v vašem izdelku, programski opremi, spletnih mestih, mobilnih aplikacijah itd. Na žalost lahko uporaba tabel in seznamov z oznakami poteka tako daleč. Ko res potrebujete, da pojasnite funkcije izdelka, je pomembno, da jih izberete vroče točke za označevanje.
Apple Computers je morda najboljši primer poenostavljenih podrobnosti etiket. Morda boste opazili te natančne tehnike na svojih grafikah, ko iščete tablične računalnike, prenosne računalnike ali zloglasni iPhone. Njihove značilnosti in tehnične specifikacije so na splošno enake kot drugi veliki proizvajalci računalnikov. Vendar so njihovi grafični modeli tako nedotaknjeni, da se izdelki dejansko prodajajo sami.
Opazite, da ko boste prekinili postopek, je to veliko preprostejše kot si mislite! Grafika izdelka je samo standardni del celotne spletne strani. Tudi če prodajate gnojila ali posteljnino ali kartice za trgovanje, lahko te tehnike označevanja dobro uporabite. In čeprav ima Apple nekaj zelo preproste informativne grafike, niso edino podjetje, ki to počne. Poskusite Googlanje za podjetja v vaši niši da vidijo, ali na svoji spletni strani prikazujejo kakršnekoli modele informacijskih nalepk ali teaserjev.
4. Slike z dinamično vsebino
Nekaterim spletnim razvijalcem morda ne bo dovolj, da preprosto ustvarite označeno grafiko svoje programske opreme. Morda obstaja veliko edinstvenih funkcij, ki jih želite prebrskati, a vsebovati v majhnem delu vaše spletne strani. Možno je sestavite niz uvodnih korakov vodil vas obiskovalce skozi majhno predstavitev izdelka.
Newsberry elegantno ponazarja primer tega. Na svoji domači strani boste opazili blok z majhno mini navigacijo pod njim. Vključujejo 5 korakov vzdolž procesa z različnimi posnetki zaslona in nekaj spremljajočega opisnega besedila. Tudi če ne veste, za kaj se uporablja Newsberry, njihove uvodna vsebina zelo jasno razloži stvari. Ponujajo vam celo nekaj demo povezav v celotnem nizu diapozitivov.
Ko se premikate po njihovi vsebini, morate opaziti veliko diapozitivov, ki vsebujejo posnetke zaslona v majhnem oknu brskalnika. Ta učinek je dejansko zelo preprost za posnemanje! Samo moraš poiščite sliko, ki jo želite uporabiti kot sliko v ozadju, in ponovno nastavite velikost posnetkov, da se prilegajo notranjosti. Odobren ta učinek ne bo deloval za vsak izdelek, vendar je to lep način za uokvirjanje zaslonov iz spletne aplikacije.
5. Počistite posnetke zaslona in fotografije izdelkov
Možno je vključiti vse najboljše oznake in funkcije za vaše izdelke, vendar še vedno manjkajo prodaje. The posnetki zaslona in fotografije, ki jih izberete za grafiko, so prav tako pomembni kot vse podrobnosti. V operacijskem sistemu Windows in Mac OS X lahko posnamete posnetke celotnega namizja z bližnjicami na tipkovnici. Z uporabo te metode v kombinaciji z nekaj časa v Photoshopu lahko zberete zelo zanimive demo posnetke.
Če je vaš izdelek zelo zapleten, poskusite sestaviti nekaj različnih slik. Zgornji primer s spletnega mesta Tweetbot uporablja modre kroge, ki označujejo prisluškovanje v aplikaciji. Namesto enega samega posnetka zaslona z mnogimi oznakami razmislite o uporabi majhne galerije slik jQuery, da združite 3-5 različnih slik. To vam daje več priložnosti osredotočiti se na različne vidike izdelka obiskovalcem pa ponuja veliko bogatejšo izkušnjo.
Ko posnamete posnetek iz računalnika ali pametnega telefona, se slika vedno shrani s 100-odstotno povečavo. Slikovni urejevalniki, kot je Photoshop, imajo možnost, da jih spremenijo, vendar pogosto izgubijo podrobnosti. Torej, kako lahko prilagodite tako grafiko v vašo majhno spletno stran? Ena najboljših tehnik je povečavo v katerem boste zmanjšali aplikacijo navzdol in ustvarili povečane dele najpomembnejših delov. Ta tehnika se pogosteje pojavlja v programski opremi in ne v fizičnih izdelkih.
6. Izdelava efekta "Zoom Lens"
V koraku z izdelavo povečevalnega stekla v Adobe Photoshopu bom sestavil korake. Če uporabljate drug grafični urejevalnik, boste najverjetneje izvedli enake naloge, meniji in ukazi pa se bodo razlikovali.
Eden najboljših primerov te tehnike je domača stran aplikacije Stvari za Mac. Grafika ima manjšo aplikacijo, tako da se bo popolnoma prilegala strani, skupaj z majhno senco. Vendar pa boste na nekaterih pomembnih področjih opazili krog z veliko večjo vsebnostjo. Dodali so tudi bel notranji sijaj, ki se zdi kot lomljena svetloba, ki sije skozi objektiv!
Bonus: "Zoom objektiv" učinek Photoshop Tutorial
Če želite začeti, naredite posnetek zaslona, ki ga želite uporabiti za grafiko. Vzel sem hiter zaslon domače strani Hongkiata. Jaz bom obrezal samo okno brskalnika in spremenil velikost na približno 700px. Če želite prilagoditi območje vsebine na svojem spletnem mestu, spremenite velikost. Sedaj naredite novo plast na vrhu tega ozadja in naredite krožno izbiro, medtem ko držite premik, da bo proporcionalna. Izpolnite želeno barvo.
Korak 1
Če je krog izbran, spremenite polnilo% na plošči plasti na 0%. Pod plastjo FX dodajte črno kap 1px-2px in bel notranji sijaj. Lahko zmanjšate motnost za manj belo osvetlitev.
2. korak
Izbrani krog se še vedno premakne na vašo ozadje in pritisnete tipko CTRL (Za uporabnika Mac, to je ukaz ali cmd ključ.) + c za kopiranje. Nato naredite nov sloj nad ozadjem, vendar pod povečevalnim krogom in prilepite. Druga možnost je, da preprosto pritisnete tipko ctrl + j, da podvojite novo plast, pri čemer je samo izbira takta.
Pritisnite ctrl + t, da odprete orodje za preoblikovanje. Zdaj zmanjšajte novo dvojno plast med držanjem premik da je vse sorazmerno in. \ t alt središče miruje.
3. korak
Pritisnite tipko ctrl in kliknite ikono plasti povečevalnega stekla, da ponovno izberete. Upoštevajte, da morate še vedno poudariti podvojeno plastjo ozadja v plošči plasti (tisti, ki je neposredno pod našim povečevalnim steklom), kar pomeni, da bo imela svetlo modro ozadje.
Pritisnite Ctrl + Shift + i, da obrnete trenutni izbor. Zdaj pritisnite brisanje, da izločite dodatno smeti iz našega ponovljenega posnetka zaslona. Za dodaten učinek povlecite meni FX, da dodate majhno senco. Prav tako lahko narišete tanko navpično črto 1px in uporabite Liquify filter (Filter> Liquify) ustvarite majhen ročaj!
Zaključek
Za oblikovanje fantastične produktne grafike se morate spomniti osnov. Obiskovalci preprosto želijo razumeti, kaj poskušate prodati! Najlažji način, da te informacije dobite, je skozi vrsto posnetkov zaslona ali posamezne grafike podrobnosti. Nalepke so le drugi del te uganke, kjer lahko opišete najpomembnejše komplete funkcij.
Ko boste vse te tehnike postavili skupaj, boste verjetno začeli opazovati širšo sliko. Prenosi in nakupi bodo poleteli navzgor - še posebej, če boste svojo grafiko postavili na začetno stran. Te tehnike so kot nalašč za grafične in spletne oblikovalce, da se začnejo na področju oblikovanja izdelkov. Podrobno smo predstavili nekaj abstraktnih zamisli, vendar bi radi slišali vaše misli v spodnjem razpravnem prostoru!
