Grafika produktu 6 Techniky na zvýšenie informovanosti obrázkov

Web dizajnéri sa stali veľmi chúlostivými marketingovými technikami. Lákajúci obsah stránky je vždy dobrý, ale pokiaľ ide o chytenie návštevníkov, pozornosť je najobľúbenejšou formou médií. Nevyžadujú zvuk ako demo videá a môžu rýchlo odovzdať dôležité informácie v priebehu niekoľkých sekúnd. Môže sa to zdať jednoduché, ale existujú niektoré pozoruhodné techniky na budovanie informatívnych obrázkov na webových stránkach.

Patria medzi ne štítky funkcií, zábery obrazovky, porovnanie cien a ďalšie detaily. Web dizajnéri môžu používať informačnú grafiku na modelovanie nových aplikácií, softvéru, videohier alebo mnohých ďalších produktov! Hoci najčastejšie vidíte tieto techniky využívané v rôznych oblastiach technológie.

Pozrite sa na nižšie uvedené nápady, kde ponúkame nielen tipy, ale aj skutočné príklady nádhernej grafiky produktu, ktorá je plná veľkých informácií.

1. Rozbaľte svoj obsah

Informatívne obrázky by sa nemali používať namiesto dobrého obsahu webových stránok. namiesto použite snímky na rozšírenie kľúčových bodov a jasne ich vysvetliť pre svojich návštevníkov. Jedným z najlepších spôsobov, ako to urobiť, je vybudovať malé demo, ktoré zvýrazní dôležité oblasti výučby. S niekoľkými informatívnymi grafikami a snímkami obrazovky je oveľa jednoduchšie udržiavať záujem čitateľa v každom kroku.

Keď sa pokúsite preukázať softvérovú výučbu (napríklad tutoriál programu Photoshop), môže to byť ťažké odoslať správu do písaného textu. Návštevníci pristane na váš článok a okamžite začnú podvážne posudzovať materiál za zlomok sekundy. Web Designer Wall má fantastický návod na vytváranie zaoblených obrázkov CSS3 sprevádzaných praktickou grafikou. Patria sem niektoré štítky a záber zblízka.

Na pôvodnej stránke článku tento obrázok pridá do vašej hlavy oveľa jasnejší obraz, čo vytvoríte. Autor pridal malý demo link, ale prečo nie zahŕňa aj niektoré demo obrázky? Máte oveľa väčšiu pravdepodobnosť, že upozorníte na správne označené demo.

Skúsiť vyhnite sa pridávaniu obrázkov iba kvôli mediálnemu obsahu vo svojom príspevku. Ak môžete vysvetliť svoje metódy alebo argumentáciu bez obrázka, začnite tu najprv. Až potom, keď sa pozriete späť na vašu webovú kópiu, mali by ste zvážiť opätovné premiestnenie niektorých bodov v detailnej grafike obrázkov. Konkrétne môžete nájsť a tutoriál vyžaduje viac vizuálnych podnetov ako zvyšuje zložitosť. Dva príklady môžu zahŕňať vytvorenie databázy webových stránok alebo súboru údajov tabuľky.

2. Zvýraznite pozoruhodné funkcie

Pretože každý softvér / technológia bude mať toľko funkcií, je takmer nemožné vysvetliť každý jednotlivý bit. Nielen to, ale je veľmi nepravdepodobné, že vaši návštevníci budú mať záujem čítať 20 alebo viac etikiet na informačnej grafike. Dodržujte najzaujímavejšie funkcie a použite štítky na vysvetlenie trochu podrobnejšie.

Pri písaní webovej kópie pre obsah štítku vyhnite sa tupému jazyku kedykoľvek je to možné. Ak sa návštevníci pozerajú na najnovšiu verziu vašej aplikácie, nemusia veľa o zmeny v farebnej schéme. Ako to ovplyvní ich každodenný pracovný postup? Namiesto toho možno zdôraznite, čo je pre nich výhodné, ako je nový panel rozhrania alebo pripojenie pre viacerých používateľov. Tie by mali byť vo všeobecnosti abstraktné prvky ktoré nemôžete vidieť iba “hľadá” na výrobku.

Označenie takýchto prvkov bezprostredne poskytne najvyššiu odpoveď. Návštevníci budú mať pocit, že sa s nimi zaobchádza ako s inteligentnými, zrelými zákazníkmi, ktorí dokážu rozhodovať sám. Ak sa naozaj páčia vaše funkcie, toto spôsobuje väčší tlak na nákup vášho softvéru alebo produktu.

Nižšie je uvedený príklad z aktualizačnej stránky programu Mozilla Firefox.

Môžete vidieť, že dizajnéri používajú bodkované zakrivené čiary na označenie štítkov a nových funkcií. Ide v skutočnosti o obrázky na pozadí umiestnené úplne vnútri kontajnera div. Prekvapivo sa celý text štítku zapisuje aj do HTML tagov (nie len jeden veľký obrázok).

Cítim, že táto metóda nie je vhodná iba pre robotov Google pre robotov, ale aj pre mobilných používateľov, ktorí nemôžu normálne zažiť celú webovú stránku.

Tiež si všimnete, ako má funkcia Panoráma vľavo ponúka malý “Uč sa viac” odkaz. To je pravdepodobne najlepšia prax, s ktorou sa môžete dostať pri vytváraní informačnej grafiky! Ak máte na tej istej stránke alternatívne stránky alebo kotvy, návštevníci mohli kliknúť na tieto odkazy a zoznámiť sa s komplikovanými funkciami.

Nezabudnite, že informatívna grafika sa používa na ľahké zobrazovanie reklamných prvkov a funkcií produktu vašim návštevníkom. Takže aj keď ste obmedzený vo vesmíre okolo grafiky môžete vždy ponúknuť možnosť dozvedieť sa viac na externej stránke.

3. Jednoduché, nenápadné štítky

etikety sú naozaj najdôležitejším aspektom pri tvorbe informatívnej grafiky produktov. Návštevníci pravdepodobne potrebujú pochopiť rôzne oblasti vo vašom produkte, softvéri, webových stránkach, mobilnej aplikácii atď. Bohužiaľ používanie tabuliek a zoznamov s odrážkami môže ísť až doteraz. Keď skutočne potrebujete vysvetliť vlastnosti produktu, je dôležité vyzdvihnúť hotspotov pre označovanie.

Apple Computers je možno najlepším príkladom zjednodušujúcich podrobností o štítkoch. Môžete si všimnúť tieto presné techniky na ich grafiku pri pohľade na tablety, notebooky, alebo neslávny iPhone. Ich vlastnosti a technické špecifikácie sú vo všeobecnosti rovnaké ako ostatné výrobcovia počítačových značiek. Ich grafické modely sú tak nedotknuté, že produkty sa prakticky predávajú sami.

Všimnite si, že keď rozložíte proces, je to oveľa jednoduchšie, ako si myslíte! Grafika produktov je len štandardnou súčasťou celkového dizajnu webových stránok. Dokonca aj keď predávate hnojivo, posteľnú bielizeň alebo obchodnú kartu, môžete pravdepodobne dať tieto techniky označovania na dobré využitie. A hoci Apple má naozaj zjednodušujúcu informatívnu grafiku, nie je to jediná spoločnosť, ktorá tak urobí. vyskúšať Googling okolo pre podniky vo vašom výklenku aby zistili, či športujú na svojich webových stránkach nejaké fiktívne info štítky alebo ukážky.

4. Obrázky s dynamickým obsahom

Niektorí vývojári webu nemusia stačiť jednoducho vytvoriť označenú grafiku vášho softvéru. Môže existovať veľa jedinečných funkcií, ktoré chcete prejsť, ale obsahovať v malej časti vašej webovej stránky. Je to možné vytvoriť sériu úvodných krokov vedie vás návštevníkov v celej demo malých produktov.

Spoločnosť Newsberry elegantne ilustruje príklad toho. Na ich domovskej stránke si všimnete blokovú oblasť s malou miniatúrnou navigáciou. Obsahujú 5 krokov pozdĺž procesu s rôznymi snímkami obrazovky a niektorými sprievodnými popisnými textami. Dokonca aj keď nemáte žiadnu predstavu o tom, na čo sa používa úvodný obsah vysvetľuje veci veľmi jasne. Dokonca vám ponúkame niekoľko demo liniek v celej sérii snímok.

Keď prechádzate ich obsahom, mali by ste si všimnúť, že veľa snímok obsahuje snímky obrazovky vo vnútri malého okna prehliadača. Tento efekt je v skutočnosti veľmi jednoduchý na napodobnenie! Potrebujete len to nájsť obrázok, ktorý chcete použiť ako snímky pozadia a prenastaviť snímky obrazovky tak, aby sa zmestili dovnútra. Uvedený efekt nebude fungovať pre každý produkt, ale je to pekný spôsob, ako rámovať obrazovky z webovej aplikácie.

5. Vymazanie obrazoviek a produktov produktov

Je možné zahrnúť všetky tie najlepšie štítky a funkcie pre vaše produkty, ale napriek tomu vám chýba predaj. screenshoty a fotky, ktoré si vyberiete pre svoju grafiku, sú v konečnom dôsledku rovnako dôležité ako všetky jemnejšie detaily. V systéme Windows a Mac OS X existujú spôsoby, ako môžete pomocou klávesových skratiek nasnímať obrazovky celej pracovnej plochy. Pomocou tejto metódy v kombinácii s časom vo Photoshope môžete nahromadiť veľmi zaujímavé demo funkcie.

Ak je váš produkt veľmi zmätený, mali by ste sa pokúsiť vytvoriť niekoľko rôznych obrázkov. Príklad uvedený vyššie na webových stránkach spoločnosti Tweetbot používa modré kruhy, ktoré označujú akciu v aplikácii. Namiesto jedinej snímky obrazovky s mnohými štítkami zvážte použitie malej galérie obrázkov jQuery, aby ste skombinovali 3-5 rôznych obrázkov. To vám dáva viac príležitostí zamerať sa na rôzne perspektívy produktu zatiaľ čo návštevníkom ponúkame oveľa bohatší zážitok.

Po zachytení snímky z počítača alebo smartfónu sa obraz vždy ukladá pri 100% priblížení. Editor obrázkov, ako je Photoshop, má možnosť zmeniť ich veľkosť, ale často strácajú detaily. Takže ako môžete umiestniť takúto grafiku na vaše malé webové stránky? Jednou z najlepších techník je zväčšenie v ktorom aplikáciu zmenšíte a vytvoríte zväčšené úseky najdôležitejších častí. Táto technika je viditeľnejšia v softvéroch ako fyzických produktoch - podrobne som opísal proces návrhu nižšie.

6. Vytvorenie efektu "Zoom Lens"

Budem vytvárať kroky na vytvorenie efektu zväčšovacieho efektu v programe Adobe Photoshop. Ak používate iný grafický editor, s najväčšou pravdepodobnosťou budete môcť vykonávať rovnaké úlohy, ale ponuky a príkazy sa budú líšiť.

Jedným z najlepších príkladov tejto techniky je domovská stránka aplikácie Things for Mac. Grafika má malú veľkosť aplikácie, takže sa perfektne hodí na stránku spolu s malým tieňom. Avšak v niektorých dôležitých oblastiach si všimnete kruh s vnútorným obsahom omnoho väčším. Dokonca priblížili biele vnútorné svetlo, ktoré sa objavilo ako lúč svetla, ktoré žiarilo cez šošovku!

Bonus: Funkcia "Zoom Lens" Effect Photoshop Tutorial

Ak chcete spustiť grafiku, ktorú chcete použiť pre svoju grafiku. Zobral som rýchlu obrazovku domovskej stránky Hongkiat. Chystám orezanie okna okna prehliadača a veľkosť približne 700 pixelov. Mali by ste zmeniť veľkosť šírky tak, aby sa zmestili do oblasti obsahu vašej vlastnej webovej stránky. Teraz vytvorte novú vrstvu nad týmto pozadím a urobte okrúhly výber a súčasne držte posun, aby bol proporcionálny. Vyplňte farbu, ktorú by ste chceli.

Krok 1

Ak zadáte vybraný kruh, zmeňte% výplne v paneli vrstiev na 0%. Pod vrstvou FX pridajte 1px-2px čiernu mŕtvicu a bielu vnútornú žiaru. Môžete znížiť nepriehľadnosť pre menej biele osvetlenie.

Krok 2

Stále udržiava vybraný kruh na vašej vrstve pozadia a stlačte ctrl (Pre používateľa Mac je to príkazový alebo cmd kľúč.) + c na kopírovanie. Potom vytvorte novú vrstvu nad pozadím, ale pod zväčšujúcim sa kruhom a vložte ju. Môžete alternatívne jednoducho stlačiť klávesovú skratku ctrl + j, aby ste duplikovali novú vrstvu iba s výberom in-tact.

Stlačte ctrl + t na otvorenie transformačného nástroja. Teraz roztiahnite novú duplicitnú vrstvu pri jej držaní smena aby všetko proporcionálne a alt aby centrum zostalo nehybné.

Krok 3

Stlačte klávesovú skratku a kliknite na ikonu vrstvy lupy, aby ste znova vybrali. Všimnite si, že by ste mali ešte zdôrazňovať duplikovanú vrstvu pozadia v paneli vrstiev (ten priamo pod lupou), čo znamená, že bude mať svetlo modré pozadie.

Stlačením klávesov Ctrl + Shift + i invertujte aktuálny výber. Teraz stlačte tlačidlo vymazať, aby ste vyčistili extra odpad z našej re-zmenšený screenshot. Pre trochu pridaného efektu vytiahnite menu vrstvy FX a pridajte malý tieň. Môžete tiež nakresliť tenkú vertikálnu línku 1px a pomocou filtra typu Liquify (Filter> Liquify) vytvoriť malú rukoväť!

záver

Aby ste mohli navrhnúť fantastickú produktovú grafiku, musíte si pamätať základy. Návštevníci jednoducho chcú pochopiť, čo sa ich snažíte predať! Najjednoduchší spôsob, ako získať túto informáciu, je cez sériu snímok obrazovky alebo jednu detailnú grafiku. Štítky sú len druhým dielom tohto puzzle, kde môžete načrtnúť najdôležitejšie súbory funkcií.

Keď dáte všetky tieto techniky dohromady, pravdepodobne začnete si všimnúť väčší obrázok. Súbory na prevzatie a nákupy rýchlo rastú - najmä ak umiestnite svoje grafické rozhranie na svoju domovskú stránku. Tieto techniky sú ideálne pre grafických a web dizajnérov, aby ste začali pracovať v oblasti dizajnu produktov. Podrobne sme uviedli niekoľko abstraktných myšlienok, ale radi by sme radi počuli svoje myšlienky v diskusnej oblasti nižšie!