Produkto grafika 6 Vaizdai tampa informatyvesni
Interneto dizaineriai tapo labai gudri su rinkodaros metodais. Linginio puslapio turinys visada yra geras, bet kai kalbama apie lankytojų įsisavinimą, dėmesio atvaizdai yra populiariausia žiniasklaidos forma. Jie nereikalauja skamba kaip demonstraciniai vaizdo įrašai ir jie gali greitai perduoti svarbią informaciją per kelias sekundes. Tai gali atrodyti paprasta, tačiau yra keletas pastebimų būdų kurti informacinius vaizdus tinklalapiuose.
Tai apima funkcijų etiketes, arti ekrano vaizdus, kainų palyginimus ir kitas minutės detales. Interneto dizaineriai gali naudoti informacijos grafiką, kad galėtų modeliuoti naujas programas, programinę įrangą, vaizdo žaidimus ar daugelį kitų produktų! Nors dažniausiai matote šiuos metodus, naudojamus įvairiose technologijų srityse.
Apsilankykite toliau pateikiamose idėjose, kur siūlome ne tik patarimus, bet ir realius gyvenimo pavyzdžius, iliustruotus gražia gaminio grafika.
1. Išplėskite savo turinį
Informaciniai vaizdai neturėtų būti naudojami vietoj gero tinklalapio turinio. Vietoj to naudokite vaizdus, kad išplėstumėte pagrindinius taškus ir juos aiškiai parodyti lankytojams. Vienas iš geriausių būdų tai padaryti nedidelės demonstracijos kūrimas, siekiant pabrėžti svarbias sritis pamoka. Su keliomis informacinėmis grafikomis ir ekrano nuotraukomis daug lengviau laikyti skaitytojo interesus per kiekvieną žingsnį.
Bandydami parodyti programinę įrangą (pvz., „Photoshop“ pamoka), gali būti sunku perduoti pranešimą raštu. Lankytojai nusileis ant jūsų straipsnio ir nedelsdami pradės sąmoningai vertinti medžiagą per sekundę. „Web Designer Wall“ turi fantastišką pamoką apie CSS3 suapvalintų vaizdų kūrimą kartu su patogiu grafiku. Tai apima kai kurias etiketes ir glaudų efektą.
Originaliame straipsnio puslapyje šis vaizdas į jūsų galvą prideda daug aiškesnį vaizdą, ką jūs sukuriate. Autorius pridėjo nedidelę demonstracinę nuorodą, bet kodėl taip pat neįtraukti demo vaizdai? Labai tikėtina, kad atkreipsite dėmesį į tinkamai pažymėtą demonstraciją.
Pabandyk venkite pridėti vaizdų tik žiniasklaidos turinio labui jūsų įraše. Jei galite paaiškinti savo metodus ar argumentus be nuotraukos, pirmiausia čia. Tik po to, kai peržiūrėsite savo žiniatinklio kopiją, turėtumėte apsvarstyti kai kurių punktų pakartotinį išvaizdą išsamiame vaizdo grafike. Konkrečiai jūs galite rasti pamoka reikalauja daugiau vizualinių užuominų, nes sudėtingumas didėja. Du pavyzdžiai galėtų būti svetainės duomenų bazės arba lentelės duomenų rinkinio kūrimas.
2. Pažymėkite žymias funkcijas
Kadangi kiekvienas programinės įrangos / technologijos gabalas turi tiek daug funkcijų, beveik neįmanoma paaiškinti kaskart. Ne tik tai, bet labai mažai tikėtina, kad lankytojai bus suinteresuoti skaityti 20 + etikečių jūsų informaciniame grafike. Laikykitės įdomiausių savybių ir naudokite etiketes, kad paaiškintumėte šiek tiek daugiau.
Rašydami etiketės turinio žiniatinklio kopiją išvengti nuobodu kalbos kai įmanoma. Jei lankytojai žiūri į naujausią jūsų paraiškos versiją, jie gali nesirūpinti spalvų schemos pakeitimais. Kaip tai paveiks jų kasdienę darbo eigą? Vietoj to galbūt pabrėžti, kas jiems naudinga, kaip naujas sąsajos skydas arba daugiafunkcinis ryšys. Tai paprastai turėtų būti abstrakčios funkcijos kurį jūs negalite matyti tik “ieško” prie produkto.
Tokios etiketės išaiškinimas, kad paaiškintumėte šias savybes, suteiks daugiausiai atsakymų. Lankytojai pajus, kad jie yra traktuojami kaip protingi, brandūs pirkėjai, galintys priimti savo sprendimus. Jei jie tikrai mėgsta jūsų funkcijas, tai suteikia didesnį spaudimą įsigyti programinę įrangą ar produktą.
Žemiau pateikiamas „Mozilla Firefox“ naujinimo puslapio pavyzdys.
Jūs galite pamatyti, kad dizaineriai naudojo punktyrines kreivas linijas, kad pažymėtų etiketes ir naujas funkcijas. Tai iš tikrųjų yra fono vaizdai, išdėstyti absoliučiai konteinerio viduje div. Keista, kad visas etiketės tekstas taip pat yra parašytas HTML žymose (ne tik vienas didelis vaizdas).
Manau, kad šis metodas yra ne tik patogus „Google“ robotų robotams, bet ir mobiliesiems naudotojams, kurie paprastai negali patirti viso tinklalapio.
Taip pat atkreipkite dėmesį, kaip „Panorama“ funkcija yra į kairę siūlo mažą “Sužinokite daugiau” nuorodą. Tai galbūt geriausia praktika, kurią galite įgyti kuriant informacinę grafiką! Jei tame pačiame puslapyje turite pakaitinių puslapių ar inkarų, lankytojai galėtų spustelėti šias nuorodas, kad sužinotų daugiau apie sudėtingas funkcijas.
Nepamirškite, kad informatyvi grafika naudojama lankytojams lengvai rodant pėdsakus ir produkto savybes. Taigi, nors esate ribotas erdvėje aplink grafiką, kurį galite visada siūlome galimybę sužinoti daugiau apie išorinį puslapį.
3. Paprasta, nepastebima etiketė
Etiketės iš tiesų yra svarbiausias aspektas kuriant informacinę produkto grafiką. Lankytojai greičiausiai turės suprasti įvairias jūsų produkto, programinės įrangos, svetainių, mobiliųjų programų ir kt. Sritis. Deja, lentelės ir užrašai gali būti naudojami tik iki šiol. Kai tikrai reikia paaiškinti produkto savybes, svarbu pasirinkti Karštos vietos ženklinimui.
Apple kompiuteriai galbūt yra geriausias paprastų etikečių detalių pavyzdys. Jūs galite pastebėti šiuos tikslius metodus savo grafikoje, kai žiūrite per planšetinius kompiuterius, nešiojamus kompiuterius ar liūdnas „iPhone“. Jų funkcijos ir techniniai duomenys paprastai yra tokie patys kaip ir kitų didelių prekių ženklų kompiuterių gamintojai. Tačiau jų grafiniai modeliai yra tokie nesugadinti, kad produktai praktiškai parduodami.
Atkreipkite dėmesį, kad suskaidydami procesą tai yra daug paprasčiau, nei manote! Produkto grafika yra tik standartinė viso svetainės dizaino dalis. Net jei parduodate trąšų ar lovų lapus ar prekybos korteles, galite tikėtis, kad šie ženklinimo būdai bus tinkamai naudojami. Ir nors „Apple“ turi labai paprastą informacinę grafiką, jie nėra vienintelė kompanija. Bandyti „Googling“ apie savo nišą turinčias įmones pamatyti, ar jie sportuoja bet kokį išgalvotas informacijos etiketes ar „teaser“ ekranus savo svetainėje.
4. Vaizdai su dinaminiu turiniu
Kai kuriems žiniatinklio kūrėjams gali būti nepakankamai, kad tiesiog sukurtumėte žymėtą programinės įrangos grafiką. Gali būti daug unikalių funkcijų, kurias norite perkelti, tačiau jose yra maža dalis jūsų svetainės. Tai įmanoma sukurti keletą įvadinių žingsnių veda jus lankytojus per mažą produkto demonstraciją.
„Newsberry“ elegantiškai iliustruoja jo pavyzdį. Savo pagrindiniame puslapyje pastebėsite bloką su maža mini navigacija. Jie apima 5 žingsnius palei procesą su skirtingais ekranais ir kai kuriais papildomais aprašomaisiais tekstais. Net jei jūs neturite idėjos, ką naudoja „Newsberry“, jų įvadinis turinys labai aiškiai paaiškina. Jūs netgi siūlote kelias demo nuorodas visuose skaidres.
Perėję per savo turinį, turėtumėte pastebėti, kad daugelyje skaidrių yra mažų naršyklės langų vaizdų. Šis efektas iš tikrųjų yra labai paprastas imituoti! Jums tereikia suraskite vaizdą, kurį naudosite kaip fono paveikslėlius, ir iš naujo keiskite ekrano kopijas, kad tilptų į vidų. Šis efektas suteikiamas ne kiekvienam produktui, tačiau tai yra puikus būdas ekranus atvaizduoti iš žiniatinklio programos.
5. Išvalykite Screenshots ir Product Photos
Galima įtraukti visus geriausius jūsų produktų etiketes ir savybes, tačiau vis dar trūksta pardavimo. The Paveikslėliai ir nuotraukos, kurias pasirinkote savo grafikai, yra tokie pat svarbūs, kaip ir visos smulkesnės detalės. „Windows“ ir „Mac OS X“ yra būdų, kaip užfiksuoti viso darbalaukio ekrano kopijas su sparčiaisiais klavišais. Naudojant šį metodą kartu su tam tikru „Photoshop“ laikotarpiu, galite sukaupti labai įdomių demonstracijų.
Jei jūsų produktas yra labai susuktas, turėtumėte pabandyti sujungti keletą skirtingų vaizdų. Anksčiau pateiktame pavyzdyje iš „Tweetbot“ svetainės naudojamas mėlynas ratas, nurodantis, kad programa veikia palietus. Vietoj vieno ekrano su daugeliu etikečių naudokite mažą jQuery vaizdo galeriją, kad galėtumėte sujungti 3-5 skirtingas grafikas. Tai suteikia jums daugiau galimybių sutelkti dėmesį į skirtingas produkto perspektyvas lankytojams siūloma daug turtingesnė patirtis.
Kai nufotografuojate iš kompiuterio ar išmaniojo telefono, vaizdas visada išsaugomas 100% priartinimu. Vaizdų redaktoriai, pavyzdžiui, „Photoshop“, turi galimybę iš naujo nustatyti jų dydį, tačiau jie dažnai praranda informaciją. Taigi, kaip jūs galite pritaikyti tokį vaizdą į savo mažą svetainę? Vienas iš geriausių būdų yra padidinimas kurioje jūs taikote taikymą žemyn ir sukuriate padidintus svarbiausių dalių gabalus. Ši technika dažniau matoma programinėje įrangoje nei fiziniai produktai.
6. „Zoom Lens“ efekto kūrimas
„Adobe Photoshop“ pastatysiu didinamojo stiklo efektą. Jei naudojate kitą grafikos redaktorių, greičiausiai galėsite atlikti tas pačias užduotis, tačiau meniu ir komandos skirsis.
Vienas iš geriausių šio metodo pavyzdžių yra „Macintosh“ programos „Pagrindinis puslapis“. Grafikoje programa sumažinta maža, todėl ji puikiai dera prie puslapio, kartu su nedideliu šešėliniu šešėliu. Tačiau per kai kurias svarbias sritis pastebėsite apskritimą, kurio vidinis turinys yra daug didesnis. Jie netgi pridėjo baltą vidinį švytėjimą, kuris pasirodo kaip lūžio šviesa, spindinčia per objektyvą!
Premija: „Zoom Lens“ efektas Photoshop Tutorial
Norėdami pradėti patraukti ekraną, kurį norite naudoti savo grafikai. Aš greitai nufotografavau Honkiato pagrindinį puslapį. Aš ketinu apkarpyti tik naršyklės langą ir pakeisti dydį iki maždaug 700 pikselių. Turėtumėte pakeisti dydį, kad tilptų į savo svetainės turinio sritį. Dabar padarykite naują sluoksnį ant šio fono ir padarykite aplinkraštį, laikydami pamainą, kad išlaikytumėte proporcingą. Užpildykite bet kokią norimą spalvą.
1 žingsnis
Laikydami pasirinktą ratą, pakeiskite užpildo% sluoksnių skydelyje iki 0%. Po sluoksniu FX pridėti 1px-2px juodą insulto ir baltą vidinį švytėjimą. Jūs galite sumažinti mažiau balto apšvietimo neskaidrumą.
2 žingsnis
Vis dar laikydami pasirinktą ratą, pereikite prie fono sluoksnio ir paspauskite klavišą ctrl („Mac“ naudotojui - tai komanda arba „cmd“ raktas.) + c kopijuoti. Tada padarykite naują sluoksnį virš fono, bet žemiau didinamojo rato ir įklijuokite. Arba galite tiesiog paspausti ctrl + j, kad pasikartotumėte naują sluoksnį tik pasirinkus pasirinkimą.
Paspauskite ctrl + t, kad atidarytumėte transformavimo įrankį. Dabar, laikydami, išskleiskite naują dublikato sluoksnį pamainą išlaikyti viską proporcingai ir alt išlaikyti centrą stacionariai.
3 žingsnis
Paspauskite ctrl ir spustelėkite didinamojo stiklo sluoksnio piktogramą, kad dar kartą pasirinktumėte. Atkreipkite dėmesį, kad sluoksnių skydelyje (kuris yra tiesiogiai po didinamuoju stiklu), turėtumėte pažymėti dublikuotą foną..
Paspauskite Ctrl + Shift + i, jei norite pakeisti dabartinę pasirinktį. Dabar paspauskite „Delete“, kad pašalintumėte papildomus šiukšles iš pakartotinio ekrano. Norėdami šiek tiek papildomo efekto, pakelkite sluoksnio FX meniu, kad pridėtumėte nedidelį šešėlį. Taip pat galite piešti ploną 1px vertikalią liniją ir naudoti „Liquify“ filtrą (Filtras> Liquify) sukurti nedidelę rankenėlę!
Išvada
Norint sukurti fantastišką produkto grafiką, turite prisiminti pagrindinius dalykus. Lankytojai tiesiog nori suprasti, ką bandote juos parduoti! Paprasčiausias būdas gauti šią informaciją yra per ekrano kopijas arba vieną detalių grafiką. Etiketės yra tik antroji šio galvosūkio dalis, kurioje galite apibūdinti svarbiausius bruožus.
Kai visi šie metodai kartu, jūs tikriausiai pradėsite pastebėti didesnį vaizdą. Atsisiuntimai ir pirkimai išnyks - ypač jei įdėsite savo grafikos priekinį ir centrinį puslapį į savo pagrindinį puslapį. Šie metodai puikiai tinka grafiniams ir interneto dizaineriams, kad jie galėtų pradėti gaminių dizaino srityje. Mes turime išsamias keletą abstrakčių idėjų, bet norėtume išgirsti jūsų mintis toliau pateikiamoje diskusijų srityje!
