Termékgrafika 6 A képek informatívabbá tételének technikái
A webes tervezők a marketing technikákkal nagyon ügyesek lettek. Az oldal tartalma mindig jó, de amikor a látogatók megragadják a látogatókat, a figyelemfelkeltő képek a média legnépszerűbb formája. Nem igényelnek olyan hangokat, mint a demo videók, és gyorsan továbbíthatják a fontos információkat néhány másodpercen belül. Könnyűnek tűnhet, de van néhány figyelemre méltó technika az informatív képek weboldalakon történő létrehozására.
Ezek közé tartoznak a jellemző címkék, a közeli képernyőképek, az ár-összehasonlítások és egyéb percadatok. A webes tervezők az információs grafikát használhatják az új alkalmazások, szoftverek, videojátékok vagy sok más termék modellezéséhez! Bár leggyakrabban ezeket a technikákat különböző technológiai területeken használják fel.
Nézze meg az alábbi ötleteket, ahol nemcsak tippeket, hanem szép termékgrafikákat kínálunk, amelyek nagyszerű információval vannak ellátva.
1. Bontsa ki a tartalmát
Az információs képeket nem szabad a jó weboldal tartalmának helyett használni. Helyette használja a képeket, hogy bővítse a kulcspontjait és illusztrálja őket a látogatók számára. Az egyik legjobb módja ennek kis demó kiépítése a fontos területek kiemelésére egy bemutató. Néhány informatív grafikával és képernyőképpel sokkal egyszerűbb az olvasó érdeklődésének megtartása az egyes lépéseken keresztül.
Amikor egy szoftver bemutatót próbál bemutatni (például a Photoshop bemutatóját), nehéz lehet az üzenetet írott szövegbe továbbítja. A látogatók a cikkedre fognak landolni, és azonnal elkezdenek tudatosan elítélni az anyagot egy másodpercen belül. A Web Designer falának fantasztikus bemutatója van a CSS3 lekerekített képek építéséről, melyet egy praktikus grafika kísér. Ez tartalmaz néhány címkét és egy közeli felvételt a hatásról.
Az eredeti cikkoldalon ez a kép sokkal tisztább képet ad a fejed felé, amit létrehozni fog. A szerző hozzáadott egy kis demo linket, de miért nem tartalmaz néhány demo képet is? Sokkal nagyobb valószínűséggel felhívja a figyelmet egy megfelelően megjelölt demó felvételen.
Megpróbálni ne adjunk hozzá képeket csak a médiatartalom érdekében a bejegyzésben. Ha elképzelheti a módszereit vagy az érvelést kép nélkül, kezdje el először. Csak azt követően nézzük vissza a webes másolatot, ha bizonyos pontokat részletes képi grafikában újra elterjeszt. Konkrétan megtalálhatja a A bemutató több vizuális jelzést igényel, mivel az összetettség növekszik. Két példa lehet egy webhely-adatbázis vagy táblázatadatbázis építése.
2. Jelölje ki a figyelemre méltó funkciókat
Mivel minden egyes szoftver / technológia olyan sok funkcióval rendelkezik, szinte lehetetlen megmagyarázni minden egyes bitet. Nem csak ez, hanem nagyon valószínűtlen, hogy a látogatók érdeklődni fognak az információs grafikájú 20 + címkék olvasásával. Tartsa be a legérdekesebb tulajdonságokat és használjon címkéket, hogy magyarázzon egy kicsit mélyebbre.
A webes másolat írása a címke tartalmához elkerülje a tompa nyelvet amikor csak lehetséges. Ha a látogatók az alkalmazás legújabb verzióját tekintik, akkor nem érdekelnek a színséma változásai. Hogyan fogja befolyásolni a napi munkafolyamatot? Ehelyett talán rávilágítson arra, ami számukra előnyös, mint egy új kezelőfelület vagy több felhasználó csatlakozás. Általában ezeknek kell lenniük absztrakt funkciók amit csak nem láthat “keres” a terméken.
Egy ilyen címke megvilágítása ezeknek a funkcióknak a magyarázata a leggyakoribb válasz. A látogatók úgy fogják érezni, hogy intelligens, érett vásárlókként kezelik, akik képesek saját döntéseik meghozatalára. Ha tényleg szeretik a funkciókat, ez nagyobb lendületet ad a szoftver vagy termék megvásárlásához.
Az alábbiakban egy példa a Mozilla Firefox frissítési oldalon.
Láthatjuk, hogy a tervezők a pontozott görbe vonalakkal jelezték a címkéket és az új funkciókat. Ezek valójában háttérképek, amelyek teljesen a tartály belsejében vannak elhelyezve div. Meglepő módon a címke szövege a HTML címkékben is szerepel (nem csak egy nagy kép).
Úgy érzem, ez a módszer nemcsak praktikus a Google bejáró robotjainak, hanem olyan mobil felhasználóknak is, akik általában nem tudják megtapasztalni a teljes weboldalt.
Figyelje meg azt is, hogy a Panoráma funkció balra van kicsi “Tudj meg többet” link. Ez talán a legjobb gyakorlat, amellyel információs grafikákat építhetsz! Ha ugyanazon az oldalon van alternatív oldala vagy horgonya, a látogatók ezekre a linkekre kattintva megismerhetik a bonyolult funkciókat.
Ne feledje, hogy az informatív grafikákat arra használják, hogy a látogatók könnyedén megjeleníthessék a teasers és a termék jellemzőit. Szóval, bár korlátozott a tér körül a grafika lehet mindig adjon lehetőséget arra, hogy többet megtudjon egy külső oldalon.
3. Egyszerű, zavaró címkék
Címkék valóban a legfontosabb szempont az informatív termékgrafika létrehozásában. A látogatóknak valószínűleg meg kell értenie a termék, a szoftver, a weboldalak, a mobilalkalmazás stb. Különböző területeit. Sajnos a táblázatok és a felsorolt listák használata csak annyira lehetséges. Amikor tényleg meg kell magyaráznia a termék jellemzőit, fontos, hogy kiválasszon hotspotok címkézésre.
Az Apple Computers talán a legjobb példája az egyszerűsített címke részleteinek. A tabletták, laptopok vagy a hírhedt iPhone megjelenítésekor észreveheti ezeket a pontos technikákat. Jellemzőik és műszaki jellemzőik általában megegyeznek a többi nagy márkájú számítógépgyártóval. A grafikus modellek azonban annyira érintetlenek, hogy a termékek gyakorlatilag eladják magukat.
Figyeljük meg, hogy amikor lebontják a folyamatot, sokkal egyszerűbb, mint gondolnád! A termékgrafika csak egy általános részét képezi a teljes weblaptervezésnek. Még akkor is, ha műtrágya vagy ágynemű vagy kereskedelmi kártyát értékesít, ezeket a címkézési technikákat valószínűleg jó hasznára teszi. És bár az Apple-nek van néhány igazán egyszerűsítő informatikai grafikája, nem az egyetlen cég, amely ezt teszi. Próbáld ki Googling körül a vállalkozások a niche hogy lássák, hogy sportolnak-e bármilyen fantasztikus információs címkét vagy teaser képernyőt a weboldalukon.
4. Dinamikus tartalmú képek
Egyes webes fejlesztők számára előfordulhat, hogy nem elég ahhoz, hogy egyszerűen hozzon létre egy címkézett grafikát a szoftveréről. Lehet, hogy rengeteg egyedülálló tulajdonságot szeretne áthaladni, de a weblap egy kis részén belül van. Lehetséges építsünk be egy sor bevezető lépést vezet egy látogatót egy kis termék bemutatón.
A Newsberry elegánsan illusztrálja ennek egy példáját. A kezdőlapon egy blokkterületet láthat, amelyen egy kis mini-navigáció található. Ezek 5 lépésből állnak a folyamat során különböző képernyőképekkel és néhány mellékelt leíró szöveggel. Még ha fogalmad sincs arról, hogy miért használják a Newsberry-t a bevezető tartalom nagyon jól magyarázza a dolgokat. Néhány demo linket is kínálnak a diavetítések sorozatában.
Ahogy a tartalmukon áthalad, sok diát tartalmazhat egy kis böngészőablakon belüli képernyőképeket. Ez a hatás valójában nagyon egyszerű utánozni! Csak kell találjon egy képet, amelyet háttérképként használhat, és a képeket újra méretezheti, hogy beleférjen. Ez a hatás nem minden termék esetében működik, de ez egy szép módja a képernyők webes alkalmazásból történő keretezésének.
5. Tiszta képernyők és termékfotók
Lehetőség van a termékek legjobb címkéinek és jellemzőinek beillesztésére, de még mindig hiányzik az értékesítés során. A A grafikához kiválasztott képernyőképek és fényképek végső soron ugyanolyan fontosak, mint az összes finomabb részlet. A Windows és a Mac OS X rendszeren lehetőség van a teljes asztali képernyőről a billentyűparancsok használatával. Ezzel a módszerrel kombinálva néhány időt a Photoshop-ban, nagyon érdekes funkciók bemutatására képes.
Ha a termék nagyon meggyengült, meg kell próbálnia össze néhány különböző képet. A Tweetbot weboldalának fenti példája a kék köröket használja, hogy jelezze az alkalmazás megérintését. A sok címkével ellátott egyetlen screenshot helyett egy kis jQuery képgaléria használatával ötvözheti a 3-5 különböző grafikát. Ez több lehetőséget kínál Önnek összpontosítani a termék különböző perspektíváira míg a látogatóknak sokkal gazdagabb élményt kínálnak.
Ha lövést készít a PC-ről vagy okostelefonról, a kép 100% -os nagyítással kerül mentésre. Az olyan képszerkesztők, mint a Photoshop, képesek újra méretezni őket, de gyakran elveszítik a részleteket. Szóval hogyan illeszthet egy ilyen grafikát a kis webhelyére? Az egyik legjobb technika nagyobbítás amelyben az alkalmazást skálázzuk és nagyított részeket hozunk létre a legfontosabb darabokból. Ezt a technikát gyakrabban látják a szoftverekben, mint a fizikai termékek - részletesen ismertettem az alábbi tervezési folyamatot.
6. "Zoom objektív" hatás létrehozása
Megépítem a lépéseket a nagyító hatásának az Adobe Photoshop alkalmazásban való megépítéséhez. Ha másik grafikus szerkesztőt használ, akkor valószínűleg ugyanazokat a feladatokat hajtja végre, de a menük és a parancsok eltérőek lesznek.
Ennek a technikának az egyik legjobb példája a dolgok a Mac alkalmazáshoz honlapon. A grafikának az alkalmazás kicsi lesz, így tökéletesen illeszkedik az oldalra, valamint egy kis árnyék. Néhány fontos területen azonban egy kört észlelünk, amelynek belső tartalma sokkal nagyobb. Még egy fehér belső ragyogást is adtak, hogy látszólag visszaverődő fénysé váljanak!
Bónusz: "Zoom lencse" A Photoshop bemutatójának hatása
Ahhoz, hogy elkezdje megragadni a grafikához használni kívánt képernyőképet. Gyors képernyőt vettem a Hongkiat kezdőlapjára. Csak a böngészőablakot fogom vágni, és átméretezni fogok körülbelül 700x-ra. Át kell méreteznie a szélességet, hogy illeszkedjen a saját webhelyének tartalmi területéhez. Most készítsen egy új réteget a háttér tetejére, és körkörös választást készítsen, miközben az eltolást tartsa arányosnak. Töltse ki a kívánt színt.
1. lépés
A kijelölt kör megtartása esetén a rétegek panelen töltse ki a kitöltési% -ot 0% -ra. A réteg alatt az FX 1px-2px fekete körvonalat és egy fehér belső fényt ad. A kevésbé fehér világításhoz csökkentheti az átlátszatlanságot.
2. lépés
A kör kiválasztása továbbra is a háttérrétegre mozgatható, és a ctrl (Mac-felhasználó esetén ez a parancs vagy a cmd kulcs.) + c másoláshoz. Ezután készítsen egy új réteget a háttér felett, de a nagyító kör alatt, és illessze be. Alternatívaként csak a ctrl + j billentyűkombinációt érheti el, hogy egy új réteget másoljon, csak a kijelöléssel.
A ctrl + t megnyomásával nyissa meg az átalakító eszközt. Most lépjen ki az új párhuzamos rétegből, miközben tartja váltás mindent arányosnak tartani alt tartsa a központot helyben.
3. lépés
Nyomja meg a ctrl billentyűt, és kattintson a nagyító üveg ikonjára a kiválasztás ismétléséhez. Ne feledje, hogy a rétegek panelen (a nagyítónk alatt közvetlenül) meg kell emelni a duplikált háttérréteget, ami azt jelenti, hogy világos kék háttér lesz.
Nyomja meg a Ctrl + Shift + i gombot az aktuális kijelölés megfordításához. Most nyomja meg a törlést, hogy kitörölje az extra szemetet az átméretezett képernyőn. Egy kis hozzáadott hatáshoz húzza fel a FX-menüt, hogy hozzáadjon egy kis csepp árnyékot. Egy vékony 1px függőleges vonalat is rajzolhat és a Liquify Filter-t használhatja (Szűrő> Liquify) hozzon létre egy kis fogantyút!
Következtetés
A fantasztikus termékgrafika megtervezéséhez emlékeznie kell az alapokra. A látogatók egyszerűen meg akarják érteni, mit akarsz eladni! A legegyszerűbb módja annak, hogy ezt az információt az egész képernyőn vagy egy részletgrafikonon keresztül érheti el. A címkék csupán a második darabja ennek a puzzle-nak, ahol felvázolhatja a legfontosabb funkciókészleteket.
Amikor mindezeket a technikákat együttesen teszed, akkor valószínűleg a nagyobb képet észleled. A letöltések és a vásárlások rohamosan emelkednek - különösen, ha a grafikus elülső és középpontját a kezdőlapra helyezi. Ezek a technikák tökéletesek a grafikai és webes tervezők számára a terméktervezés területén. Néhány absztrakt ötletünk van, de szeretnénk hallani a gondolatait az alábbi vitaterületen!
