Produktu grafika 6 Metodes, kā padarīt attēlus informatīvākus

Tīmekļa dizaineri ir kļuvuši ļoti apdomīgi ar mārketinga paņēmieniem. Luring lapas saturu vienmēr ir labi, bet, kad runa ir satveršanas jūsu apmeklētājiem uzmanību attēlus ir populārākais veids medijiem. Tie neprasa skaņu, piemēram, demo video, un tie var ātri pārsūtīt svarīgu informāciju dažu sekunžu laikā. Tas var šķist viegli, bet ir dažas ievērojamas metodes, lai veidotu informatīvus attēlus tīmekļa vietnēs.

Tie ietver iezīmju uzlīmes, tuvplānus, cenu salīdzinājumus un citus minūti. Web dizaineri var izmantot informācijas grafiku, lai modelētu jaunas lietotnes, programmatūru, videospēles vai daudzus citus produktus! Lai gan visbiežāk šīs tehnoloģijas tiek izmantotas dažādās tehnoloģiju jomās.

Iepazīstieties ar zemāk redzamajām idejām, kur mēs piedāvājam ne tikai padomus, bet arī skaistu produktu grafikas piemērus, kas ir iesaldēti ar lielisku informāciju.

1. Paplašiniet savu saturu

Informatīvos attēlus nedrīkst izmantot labas tīmekļa lapas vietā. Tā vietā izmantojiet attēlus, lai paplašinātu galvenos punktus un skaidri ilustrēt apmeklētājiem. Viens no labākajiem veidiem, kā to izdarīt, ir nelielas demonstrācijas izveide, lai izceltu svarīgas jomas apmācība. Ar dažiem informatīviem grafikiem un ekrānšāviņiem tas ir daudz vienkāršāks, lai saglabātu jūsu lasītāja intereses, pārvietojoties pa katru soli.

Mēģinot demonstrēt programmatūras pamācību (piemēram, Photoshop apmācība), var būt grūti ziņu rakstiski. Apmeklētāji nokļūs uz jūsu raksta un nekavējoties sāks apzināti novērtēt materiālu sekundes laikā. Web Designer Wall ir fantastiska apmācība par CSS3 noapaļotu attēlu veidošanu, kam pievienots ērts grafiks. Tas ietver dažas etiķetes un tuvplāna efektu.

Sākotnējā raksta lapā šis attēls pievieno daudz skaidrāku attēlu jūsu galam, lai to, ko jūs radīsiet. Autors ir pievienojis nelielu demo saiti, bet kāpēc neietver arī demo attēlus? Jūs, visticamāk, pievērsiet uzmanību ar pienācīgi iezīmētu demonstrāciju.

Mēģināt izvairieties pievienot attēlus tikai plašsaziņas līdzekļu satura dēļ jūsu ziņojumā. Ja jūs varat izskaidrot savas metodes vai pamatojumu bez attēla, vispirms šeit. Tikai pēc tam atskatoties uz jūsu tīmekļa kopiju, ja jūs domājat par dažu punktu atkārtotu atkārtošanu detalizētā attēla grafikā. Konkrēti jūs varat atrast apmācība prasa vairāk vizuālu norādījumu, jo sarežģītība palielinās. Divi piemēri varētu būt tīmekļa vietnes datu bāzes vai tabulas datu kopas izveide.

2. Iezīmējiet ievērojamas funkcijas

Tā kā katram programmatūras / tehnoloģijas gabalam būs tik daudz iespēju, ir gandrīz neiespējami izskaidrot katru bitu. Ne tikai tas, bet ir ļoti maz ticams, ka jūsu apmeklētāji būs ieinteresēti lasīt 20 + uzlīmes uz jūsu informācijas grafika. Ievērojiet interesantākās iezīmes un izmantot etiķetes, lai izskaidrotu mazliet padziļinātu.

Rakstot etiķetes satura tīmekļa kopiju izvairīties no blāvas valodas kad vien iespējams. Ja apmeklētāji skatās uz jūsu pieteikuma jaunāko versiju, viņi var nerunāt par krāsu shēmas izmaiņām. Kā tas ietekmēs viņu ikdienas darbplūsmu? Tā vietā varbūt uzsvērt to, kas viņiem ir izdevīgi, kā jauns interfeisa panelis vai vairāku lietotāju savienojums. Parasti tiem jābūt abstraktas iezīmes ko jūs nevarat redzēt tieši “meklē” pie produkta.

Šādas iezīmes, lai izskaidrotu šīs funkcijas, sniegs vislielāko atbildi. Apmeklētāji jutīs, ka viņi tiek uzskatīti par inteliģentiem, nobriedušiem pircējiem, kuri spēj pieņemt savus lēmumus. Ja viņi patiešām patīk jūsu funkcijas, tas dod lielāku virzību programmatūras vai produkta iegādei.

Zemāk ir piemērs no Mozilla Firefox atjaunināšanas lapas.

Jūs varat redzēt, ka dizaineri ir izmantojuši punktētas izliektas līnijas, lai norādītu uzlīmes un jaunas funkcijas. Tie ir faktiski fona attēli, kas novietoti absolūti konteinera iekšpusē div. Pārsteidzoši viss marķējuma teksts ir rakstīts arī HTML tagos (ne tikai viens liels attēls).

Es uzskatu, ka šī metode ir ne tikai ērta Google robotu botiem, bet arī mobilajiem lietotājiem, kuri parasti nevarēja piedzīvot pilnu tīmekļa lapu.

Ņemiet vērā arī to, kā Panorama funkcija pāriet pa kreisi piedāvā nelielu “Uzzināt vairāk” saite. Iespējams, ka tā ir labākā prakse, ko varat iegūt, veidojot informācijas grafiku! Ja vienā lapā ir alternatīvas lapas vai enkuri, apmeklētāji var noklikšķināt uz šīm saitēm, lai uzzinātu vairāk par sarežģītām funkcijām.

Atcerieties, ka informatīvā grafika tiek izmantota, lai apmeklētājiem viegli parādītu teasers un produkta funkcijas. Tātad, lai gan jums ir ierobežota telpa ap grafiku, ko varat vienmēr piedāvājam iespēju uzzināt vairāk par ārējo lapu.

3. Vienkāršas, neuzbāzīgas uzlīmes

Etiķetes ir patiešām vissvarīgākais aspekts, veidojot informatīvo produktu grafiku. Apmeklētājiem, iespējams, būs jāsaprot dažādas jūsu produkta, programmatūras, tīmekļa vietņu, mobilās lietotnes utt. Jomas. Diemžēl tabulu un aizzīmju saraksta izmantošana var notikt tikai tik tālu. Kad jums patiešām ir nepieciešams izskaidrot produkta īpašības, ir svarīgi izvēlēties karstie punkti marķēšanai.

Apple datori, iespējams, ir labākais vienkāršotas etiķetes detaļu piemērs. Jūs varat pamanīt šīs precīzās metodes savā grafikā, skatoties uz planšetdatoriem, klēpjdatoriem vai draņķīgu iPhone. To īpašības un tehniskās specifikācijas parasti ir tādas pašas kā citu lielo zīmolu datoru ražotāji. Tomēr to grafiskie modeļi ir tik nedroši, ka produkti praktiski pārdod sevi.

Ievērojiet, ka, sadalot procesu, tas ir daudz vienkāršāks, nekā jūs domājat! Produktu grafika ir tikai standarta mājas lapas dizaina daļa. Pat ja jūs pārdodat mēslojumu vai palagi vai tirdzniecības kartes, jūs, iespējams, šos marķēšanas paņēmienus varēsiet izmantot pareizi. Un, lai gan Apple ir dažas vienkāršotas informatīvās grafikas, tās nav vienīgais uzņēmums, kas to dara. Mēģiniet Googling apkārt uzņēmumiem jūsu niša lai noskaidrotu, vai viņi savā mājaslapā sportē jebkādas iedomātas informācijas uzlīmes vai teaser ekrānus.

4. Attēli ar dinamisku saturu

Dažiem tīmekļa izstrādātājiem tas var nebūt pietiekami, lai vienkārši izveidotu jūsu programmatūras iezīmēto grafiku. Iespējams, ir daudz unikālas iezīmes, kuras vēlaties pārsniegt, bet tajā ir neliela daļa no jūsu tīmekļa lapas. Tas ir iespējams izveidot virkni ievada soļu vadot jūs apmeklētājus visā nelielā produkta demonstrācijā.

Newsberry eleganti ilustrē tā piemēru. Viņu mājas lapā jūs redzēsiet bloka zonu ar nelielu mini navigāciju. Tie ietver 5 soļus pa procesu ar dažādiem ekrānšāviņiem un dažiem pievienotajiem aprakstošajiem tekstiem. Pat ja jums nav ne jausmas, ko lieto Newsberry, to ievads saturs skaidri izskaidro lietas. Jūs pat piedāvājat dažas demo saites visā slaidu sērijā.

Kad jūs pārvietojieties pa to saturu, jums vajadzētu pamanīt daudzus slaidus, kuros ir ekrānšāviņi neliela pārlūka logā. Šis efekts ir ļoti vienkārši, lai imitētu! Jums tikai vajag atrast attēlu, ko izmantot kā fona attēlus, un atkārtoti izmērīt ekrānšāviņus, lai tie ietilptu iekšpusē. Piešķirot šo efektu, katrs produkts nedarbosies, bet tas ir jauks veids, kā veidot ekrānus no tīmekļa lietojumprogrammas.

5. Notīrīt Screenshots un Product Photos

Ir iespējams iekļaut visus jūsu produktu labākās etiķetes un iezīmes, bet joprojām trūkst pārdošanas. The ekrānuzņēmumi un fotoattēli, kurus izvēlaties grafikai, ir tikpat svarīgi kā visas sīkākas detaļas. Operētājsistēmā Windows un Mac OS X ir veidi, kā veikt visu darbvirsmas ekrānuzņēmumus, izmantojot īsinājumtaustiņus. Izmantojot šo metodi apvienojumā ar kādu laiku Photoshop, varat uzkrāt ļoti interesantas iezīmes.

Ja jūsu produkts ir ļoti saliekts, jums vajadzētu mēģināt apkopojiet dažus atšķirīgus attēlus. Iepriekš redzamais piemērs no Tweetbot tīmekļa vietnes izmanto zilus lokus, lai norādītu uz lietojumprogrammas pieskārienu. Tā vietā, lai viens ekrānuzņēmums ar daudzām uzlīmēm, izmantojiet nelielu jQuery attēlu galeriju, lai apvienotu 3-5 dažādas grafikas. Tas dod jums vairāk iespēju koncentrēties uz dažādām produkta perspektīvām kamēr apmeklētājiem tiek piedāvāta daudz bagātāka pieredze.

Kad jūs noņemat no datora vai viedtālruņa, attēlu vienmēr saglabā 100% tālummaiņā. Attēlu redaktoriem, piemēram, Photoshop, ir iespēja tos mainīt, taču tie bieži zaudē informāciju. Tātad, kā jūs varat ievietot šādu grafiku savā mazajā tīmekļa vietnē? Viena no labākajām metodēm ir palielinājums kurā jūs mērogojat lietojumprogrammu un izveidojat svarīgāko gabalu palielinātas daļas. Šī metode ir biežāk redzama programmatūrā nekā fiziskie produkti.

6. "Tālummaiņas objektīva" efekta veidošana

Es būšu veicis pasākumus, lai Adobe Photoshop izveidotu palielināmā stikla efektu. Ja izmantojat citu grafikas redaktoru, jūs, visticamāk, veicat tādus pašus uzdevumus, bet izvēlnes un komandas atšķirsies.

Viens no labākajiem šīs tehnikas piemēriem ir lieta lietojumprogrammai Mac lietojumprogrammu. Grafiskajai lietojumprogrammai ir samazināta neliela izmēra lietojumprogramma, tāpēc tas būs perfekti piemērots lapai, kā arī neliela ēnu. Tomēr pār dažām svarīgām jomām jūs pamanīsiet apli, kura iekšējais saturs ir daudz lielāks. Viņi pat ir pievienojuši baltu iekšējo spīdumu, kas parādās kā lūzums, kas spīd caur lēcu!

Bonuss: "Tālummaiņas objektīva" efekts Photoshop Tutorial

Lai sāktu greifers ekrānuzņēmumu, kuru vēlaties izmantot jūsu grafikā. Esmu veicis ātru Hongkiat mājas lapas ekrānu. Es gatavojos apgriezt tikai pārlūkprogrammas logu un mainīt izmērus līdz aptuveni 700px. Jums vajadzētu mainīt platumu, lai tas atbilstu jūsu vietnes satura apgabalam. Tagad izveidojiet jaunu slāni virs šī fona un veiciet apļveida izvēli, turot maiņu, lai saglabātu to proporcionālu. Aizpildiet jebkuru krāsu, kuru vēlaties.

1. solis

Saglabājot izvēlēto apli, mainiet slāņu paneļa aizpildījuma% vērtību līdz 0%. Zem slāņa FX pievienojiet 1px-2px melno insultu un baltu iekšējo spīdumu. Jūs varat samazināt mazāk balta apgaismojuma necaurredzamību.

2. solis

Joprojām saglabājot izvēlēto loku, pārvietojieties uz fona slāni un nospiediet ctrl (Mac lietotājam tas ir komandu vai cmd taustiņu.) + c kopēt. Tad izveidojiet jaunu slāni virs fona, bet zem palielinājuma apļa un ielīmējiet. Varat arī vienkārši noklikšķināt uz ctrl + j, lai dublētu jaunu slāni ar tikai atlasītu atlasi.

Lai atvērtu pārveidošanas rīku, nospiediet taustiņu ctrl + t. Tagad mērogojiet jauno dublikātu slāni, turot to maiņa saglabāt visu samērīgu un alt turēt centru stacionārā.

3. solis

Nospiediet taustiņu ctrl un noklikšķiniet uz palielināmā stikla slāņa ikonas, lai vēlreiz veiktu izvēli. Ņemiet vērā, ka slāņu panelī joprojām ir jānorāda dublētais fona slānis (viens tieši zem mūsu palielināmā stikla), kas nozīmē, ka tas būs gaiši zils fons.

Lai apgrieztu pašreizējo izvēli, nospiediet taustiņu kombināciju Ctrl + Shift + i. Tagad hit izdzēst, lai iztīrītu papildu atkritumus no mūsu atkārtoti pielāgotā ekrāna. Lai mazliet pievienotu efektu, izvelciet slāņa FX izvēlni, lai pievienotu nelielu ēnu. Varat arī uzzīmēt plānu 1px vertikālo līniju un izmantot šķidruma filtru (Filtrs> Liquify) izveidojiet nelielu rokturi!

Secinājums

Lai izstrādātu fantastisku produktu grafiku, jums jāatceras pamati. Apmeklētāji vienkārši vēlas saprast, ko jūs mēģināt tos pārdot! Vienkāršākais veids, kā iegūt šo informāciju, ir virkne ekrānuzņēmumu vai viena detalizēta grafika. Etiķetes ir tikai otrais šī puzzle gabals, kurā var iezīmēt svarīgākās iezīmju kopas.

Kad jūs visus šos paņēmienus apvienojat, jūs, iespējams, sākat pamanīt lielāku attēlu. Lejupielādes un pirkumi strauji pieaugs - īpaši, ja jūsu grafikas priekšpusi un centru novietosit savā mājas lapā. Šīs metodes ir ideāli piemērotas grafiskiem un web dizaineriem, lai sāktu darbu dizaina jomā. Mums ir sīki izstrādātas dažas abstraktas idejas, bet mēs vēlētos dzirdēt jūsu domas tālāk minētajā diskusiju jomā!