Grafika proizvoda 6 Tehnike izrade slika koje su informativnije
Web dizajneri su postali vrlo lukavi s marketinškim tehnikama. Luring sadržaj stranice je uvijek dobro, ali kada je u pitanju grabbing posjetitelja pozornost slike su najpopularniji oblik medija. Oni ne zahtijevaju zvuk poput demo videa i mogu brzo prenijeti važne informacije u roku od nekoliko sekundi. Može se činiti jednostavnim, ali postoje neke značajne tehnike za izgradnju informativnih slika na web stranicama.
To uključuje oznake značajki, snimke iz blizine, usporedbe cijena i ostale detalje. Web dizajneri mogu koristiti grafičku građu za modeliranje novih aplikacija, softvera, video igara ili mnogih drugih proizvoda! Iako se ove tehnike najčešće koriste u različitim područjima tehnologije.
Pogledajte ideje u nastavku gdje vam nudimo ne samo savjete, nego i primjere iz stvarnog života lijepe grafike proizvoda s mnoštvom informacija.
1. Proširite svoj sadržaj
Informativne slike ne bi se trebale koristiti umjesto dobrog sadržaja web-stranice. umjesto upotrijebite slike da biste proširili ključne točke i jasno ih ilustrirajte za svoje posjetitelje. Jedan od najboljih načina za to je izgraditi mali demo da bi se istaknula važna područja tutoriala. Uz nekoliko informativnih grafika i snimki zaslona, mnogo je jednostavnije zadržati interes čitatelja da se kreće kroz svaki korak.
Kada pokušate pokazati softverski vodič (kao što je Photoshop tutorial), to može biti teško prenijeti poruku u pisani tekst. Posjetitelji će sletjeti na vaš članak i odmah početi sub-svjesno prosuditi materijal u djeliću sekunde. Web Designer Wall ima fantastičan vodič o izgradnji CSS3 zaobljenih slika popraćenih zgodnom grafikom. To uključuje neke naljepnice i fotografiju izbliza.
Na početnoj stranici članka ova slika dodaje mnogo jasniju sliku u vašu glavu prema onome što ćete stvarati. Autor je dodao malu demo vezu, ali zašto ne uključuje i neke demo slike? Mnogo je vjerojatnije da ćete privući pažnju s pravilno označenim demo snimkom.
Pokušati izbjegavajte dodavanje slika samo radi medijskog sadržaja u postu. Ako možete objasniti svoje metode ili rasuđivanje bez slike, počnite ovdje najprije. Tek nakon što pogledate svoju web-kopiju, razmislite o ponovnom ponavljanju pojedinih točaka u detaljnom grafičkom prikazu. Konkretno, možete pronaći a udžbenik zahtijeva više vizualnih znakova kako se povećava složenost. Dva primjera mogu uključivati izgradnju baze podataka web-mjesta ili skupa tablica.
2. Označite Značajne značajke
Budući da će svaki komad softvera / tehnologije imati toliko mnogo značajki, gotovo je nemoguće objasniti svaki pojedini bit. Ne samo to, ali je vrlo malo vjerojatno da će vaši posjetitelji biti zainteresirani za čitanje 20 + oznaka na grafičkom prikazu informacija. Držite se najzanimljivijih značajki i koristite naljepnice da biste objasnili nešto dublje.
Prilikom pisanja web-kopije za sadržaj naljepnice izbjegavajte dosadan jezik kad god je moguće. Ako posjetitelji gledaju najnoviju verziju aplikacije, možda im nije stalo do promjena u shemi boja. Kako će to utjecati na njihov svakodnevni tijek rada? Umjesto toga možda istaknite što je za njih korisno, kao nova ploča sučelja ili povezivanje s više korisnika. To bi općenito trebalo biti apstraktne značajke koje ne možete vidjeti samo “u potrazi” na proizvodu.
Imati takvu oznaku da bi objasnili te značajke izravno će pružiti najobilniji odgovor. Posjetitelji će osjetiti da ih se tretira kao inteligentne, zrele kupce sposobne za donošenje vlastitih odluka. Ako vam se stvarno sviđa vaše značajke to daje veći poticaj prema kupnji softvera ili proizvoda.
U nastavku je primjer sa stranice s ažuriranjima za Mozilla Firefox.
Možete vidjeti da su dizajneri koristili točkaste krivudave linije kako bi istaknuli naljepnice i nove značajke. To su zapravo pozadinske slike postavljene apsolutno unutar spremnika div. Iznenađujuće je da se sav tekst naljepnice također piše unutar HTML oznaka (ne samo jedna velika slika).
Mislim da ova metoda nije korisna samo za Google robote za indeksiranje, nego i za mobilne korisnike koji obično ne mogu doživjeti cijelu web-stranicu.
Također primijetite kako je značajka Panorama lijevo nudi malu “Saznajte više” veza. To je možda najbolja praksa u koju možete ući u izgradnju informacijske grafike! Ako imate druge stranice ili sidra unutar iste stranice, vaši posjetitelji mogu kliknuti na te veze kako bi razumjeli više o kompliciranim značajkama.
Zapamtite da se informativne grafike koriste za jednostavno prikazivanje zadataka i značajki proizvoda posjetiteljima. Dakle, iako ste ograničeni u prostoru oko grafike možete uvijek nudite priliku da saznate više na vanjskoj stranici.
3. Jednostavne nenametljive naljepnice
oznake doista najvažniji aspekt u stvaranju informativne grafike proizvoda. Posjetitelji će vjerojatno morati razumjeti različita područja vašeg proizvoda, softvera, web-lokacija, mobilne aplikacije itd. Nažalost, korištenje tablica i popisa s grafičkim oznakama može ići samo tako daleko. Kada zaista trebate objasniti značajke proizvoda, važno je izabrati vrućih za označavanje.
Apple Computers je vjerojatno najbolji primjer pojednostavljenih detalja o oznakama. Možda ćete primijetiti točne tehnike na njihovoj grafici kada gledate preko tableta, prijenosnih računala ili zloglasnog iPhonea. Njihove značajke i tehničke specifikacije su općenito iste kao i drugi proizvođači računala velikih robnih marki. Ipak, njihovi grafički modeli su toliko netaknuti da se proizvodi praktički prodaju.
Primijetite da kada prekinete proces to je mnogo jednostavnije nego što mislite! Grafika proizvoda samo je standardni dio cjelokupnog dizajna web-mjesta. Čak i ako prodajete gnojivo ili posteljinu ili kartice za trgovanje, vjerojatno ćete te tehnike označavanja dobro staviti na svoje mjesto. Iako Apple ima neke doista pojednostavljene informativne grafike, one nisu jedine tvrtke koje to čine. Probati Googling oko za tvrtke u vašem niša da vide jesu li na svojim web-lokacijama sportske informacije ili natpise za prikazivanje.
4. Slike s dinamičkim sadržajem
Za neke web-programere možda neće biti dovoljno jednostavno stvoriti označenu grafiku vašeg softvera. Možda postoji mnogo jedinstvenih značajki koje želite prenijeti, ali sadrže u malom dijelu vaše web-stranice. Moguće je konstruirati niz uvodnih koraka vodeći vas posjetiteljima kroz mali demo proizvod.
Newsberry elegantno ilustrira primjer toga. Na svojoj početnoj stranici primijetit ćete blok s malom mini navigacijom ispod. Uključuju 5 koraka u procesu s različitim snimkama zaslona i popratnim opisnim tekstom. Čak i ako nemate pojma za što se koristi Newsberry, njihova uvodni sadržaj vrlo jasno objašnjava stvari. Čak vam se nude i nekoliko demo veza kroz niz slajdova.
Dok se krećete kroz njihov sadržaj, trebate primijetiti da brojni slajdovi sadrže snimke zaslona unutar malog prozora preglednika. Ovaj efekt je zapravo vrlo jednostavan za oponašanje! Samo trebaš pronađite sliku koju ćete koristiti kao pozadinsku sliku i ponovno podesite snimke zaslona kako bi se uklopili. Odobren ovaj efekt neće raditi za svaki proizvod, ali to je lijep način da se okvir zaslona iz web aplikacije.
5. Izbrišite snimke zaslona i fotografije proizvoda
Moguće je uključiti sve najbolje naljepnice i značajke za vaše proizvode, ali još uvijek nedostaje prodaja. Snimke zaslona i fotografije koje odaberete za vašu grafiku u konačnici su jednako važni kao i svi finiji detalji. U sustavu Windows i Mac OS X postoje načini snimanja zaslona cijele radne površine pomoću tipkovničkih prečaca. Koristeći ovu metodu u kombinaciji s neko vrijeme u Photoshopu možete akumulirati vrlo zanimljive demo značajke.
Ako je vaš proizvod vrlo zamršen, trebali biste pokušati sastaviti nekoliko različitih slika. Primjer iznad s Tweetbotove web-lokacije koristi plave krugove kako bi ukazao na djelovanje aplikacije. Umjesto jednog zaslona s mnogim oznakama, razmislite o korištenju male jQuery galerije slika za kombiniranje 3-5 različitih grafika. To vam daje više mogućnosti usredotočiti se na različite perspektive proizvoda posjetiteljima se nudi mnogo bogatije iskustvo.
Kada snimite fotografiju s računala ili pametnog telefona, slika se uvijek sprema uz 100% zumiranje. Urednici slika kao što je Photoshop imaju mogućnost da ih re-size, ali oni često gube detalje. Pa kako možete podesiti takvu grafiku na vašu malu web-lokaciju? Jedna od najboljih tehnika je povećanje u kojem skalirate aplikaciju i stvarate uvećane dijelove najvažnijih dijelova. Ova se tehnika češće vidi u softveru nego u fizičkim proizvodima.
6. Izgradnja efekta "zum objektiva"
Konstruirat ću korake za izgradnju povećala u Adobe Photoshopu. Ako koristite drugi grafički urednik, najvjerojatnije ćete obavljati iste zadatke, ali izbornici i naredbe će se razlikovati.
Jedan od najboljih primjera ove tehnike je na početnoj stranici aplikacije Stvari za Mac. Grafika ima manju aplikaciju tako da se savršeno uklapa na stranicu, zajedno s malom sjenom. Međutim, nad nekim od važnih područja primijetit ćete krug s unutarnjim sadržajem mnogo većim. Oni su čak dodali bijeli unutarnji sjaj koji se pojavljuje kao lomljena svjetlost koja sjaji kroz objektiv!
Bonus: "Zoom objektiv" Učinak Photoshop Tutorial
Da biste počeli snimati snimku zaslona koju želite koristiti za svoju grafiku. Brzo sam otvorio početnu stranicu tvrtke Hongkiat. Idem obrezati samo prozor preglednika i promijeniti veličinu na oko 700px. Promijenite veličinu širine kako bi odgovarala području sadržaja na svojoj web-lokaciji. Sada napravite novi sloj na vrhu ove pozadine i napravite kružnu selekciju dok držite shift kako biste je održali proporcionalnom. Ispunite željenu boju.
Korak 1
Držeći krug odabran, promijenite% popunjenosti na ploči slojeva na 0%. Pod slojem FX dodajte crni crtež od 1px-2px i bijeli unutarnji sjaj. Možete smanjiti neprozirnost za manje bijele rasvjete.
Korak 2
Još uvijek zadržani krug odabranog premjestite se na sloj pozadine i pritisnite ctrl (Za Mac korisnika, to je naredba ili cmd ključ.) + c za kopiranje. Zatim napravite novi sloj iznad pozadine, ali ispod povećala i zalijepite. Alternativno možete jednostavno pritisnuti ctrl + j da biste duplicirali novi sloj samo s odabirom u taktu.
Pritisnite ctrl + t da biste otvorili alat za transformaciju. Sada smanjite novi sloj duplikata dok držite smjena da sve bude proporcionalno i alt da bi centar bio nepomičan.
Korak 3
Pritisnite ctrl i kliknite na ikonu sloja povećala kako biste ponovno odabrali. Imajte na umu da i dalje trebate istaknuti dvostruki sloj pozadine u ploči slojeva (onoj izravno pod našim povećalom), što znači da će imati svijetloplavu pozadinu.
Pritisnite Ctrl + Shift + i da biste invertirali trenutni odabir. Sada izbrišite kako biste očistili dodatni otpad iz našeg skeniranog zaslona. Za malo dodatnog efekta povucite FX izbornik sloja kako biste dodali malu sjenu. Također možete nacrtati tanku vertikalnu liniju od 1px i koristiti filtar za likvidaciju (Filter> Liquify) stvorite malu ručku!
Zaključak
Kako biste dizajnirali fantastičnu proizvodnu grafiku, morate zapamtiti osnove. Posjetitelji jednostavno žele razumjeti što ih pokušavate prodati! Najjednostavniji način da dobijete ove informacije jest niz snimki zaslona ili grafika pojedinih detalja. Oznake su samo drugi dio ove zagonetke, gdje možete opisati najvažnije skupove značajki.
Kada stavite sve ove tehnike zajedno, vjerojatno ćete primijetiti veću sliku. Preuzimanja i kupnje će poletjeti uvis - pogotovo ako postavite grafičku stranicu na sredinu. Ove tehnike su savršene za grafičke i web dizajnere kako bi započeli u području dizajna proizvoda. Detaljno smo opisali nekoliko apstraktnih ideja, ali voljeli bismo čuti vaše misli u nastavku rasprave!
