Графика производа 6 Технике за прављење слика више информација

Веб дизајнери су постали веома лукави са маркетиншким техникама. Луринг паге цонтент је увијек добар, али када је ријеч о хватању пажње посјетитеља, слике су најпопуларнији облик медија. Не захтевају звук попут демо видео снимака и могу брзо пренети важне информације у року од неколико секунди. Може се чинити лаким, али постоје неке значајне технике за изградњу информативних слика на веб страницама.

То укључује ознаке карактеристика, снимке из близине, успоредбе цијена и остале детаље. Веб дизајнери могу користити информационе графике за моделирање нових апликација, софтвера, видео игара или многих других производа! Иако се најчешће виде ове технике које се користе у различитим областима технологије.

Погледајте идеје испод где нудимо не само савете, већ и примере из стварног живота прелепе графике производа са одличним информацијама.

1. Проширите садржај

Информативне слике не би требало да се користе уместо доброг садржаја веб странице. Уместо тога користите слике да бисте проширили кључне тачке и јасно их илуструјте за ваше посетиоце. Један од најбољих начина за то је изградњу малог демо-а да би се истакла важна подручја туториала. Са неколико информативних графика и снимака екрана, много је једноставније задржати интерес читалаца да се креће кроз сваки корак.

Када покушате да прикажете софтверски водич (као што је Пхотосхоп туториал), то може бити тешко пренети поруку у писани текст. Посетиоци ће слетети на ваш чланак и одмах почети суб-свјесно просудити материјал у дјелићу секунде. Веб Десигнер Валл има фантастичан водич о изградњи заокружених слика ЦСС3 праћених згодном графиком. Ово укључује неке ознаке и снимак ефекта изблиза.

На страници оригиналног чланка ова слика додаје много јаснију слику у вашу главу према ономе што ћете стварати. Аутор је додао малу демо везу, али зашто не укључује и неке демо слике? Вероватније је да ћете привући пажњу са правилно означеним демо снимком.

Покушати да избегавајте додавање слика само ради медијског садржаја у вашем посту. Ако можете да објасните своје методе или резоновање без слике, почните овде прво. Тек након што погледате своју копију на вебу, размислите о поновном понављању неких тачака у детаљном графичком приказу. Конкретно, можете пронаћи а Туториал захтева више визуелних знакова док се комплексност повећава. Два примјера могу укључивати изградњу базе података веб страница или скупа таблица.

2. Означите Значајке

Пошто ће сваки комад софтвера / технологије имати толико много могућности, готово је немогуће објаснити сваки бит. Не само то, већ је мало вероватно да ће ваши посетиоци бити заинтересовани за читање 20+ етикета на вашој информативној графици. Држите се најзанимљивијих особина и употребите ознаке да бисте објаснили нешто дубље.

Када пишете веб копију за садржај етикете избегавајте досадан језик кад год је могуће. Ако посетиоци гледају најновију верзију ваше апликације, можда им није стало до промена у шеми боја. Како ће то утицати на њихов свакодневни радни ток? Уместо тога нагласите шта је за њих корисно, као нови панел интерфејса или повезивање са више корисника. То би генерално требало да буде абстрацт феатурес које ви не можете да видите “гледа” на производу.

Имати такву ознаку да би објаснили ове карактеристике ће пружити најобимнији одговор. Посетиоци ће се осећати као да су третирани као интелигентни, зрели купци способни да доносе своје одлуке. Ако вам се заиста свиђају ваше карактеристике, то даје већи притисак на куповину вашег софтвера или производа.

Испод је пример са странице за ажурирање Мозилла Фирефок.

Можете видети да су дизајнери користили испрекидане линије како би истакли налепнице и нове функције. То су заправо позадинске слике постављене апсолутно унутар контејнера див. Изненађујуће је да је сав текст наљепнице писан унутар ХТМЛ ознака (не само једна велика слика).

Мислим да овај метод није погодан само за Гоогле роботе за индексирање, већ и за мобилне кориснике који обично не могу да доживе потпуну веб-страницу.

Такође обратите пажњу на то како се функција Панорама налази лево нуди мали “Сазнајте више” линк. Ово је можда најбоља пракса у коју се можете упознати приликом изградње графике информација! Ако имате алтернативне странице или сидра унутар исте странице, ваши посјетитељи могу кликнути на те везе како би разумјели више о комплицираним значајкама.

Запамтите да се информативне графике користе за лако приказивање задатака и карактеристика производа вашим посетиоцима. Дакле, иако сте ограничени у простору око графике можете увек нудите прилику да сазнате више на спољној страници.

3. Једноставне, ненаметљиве етикете

Лабелс су заиста најважнији аспект у креирању информативне графике производа. Посетиоци ће вероватно морати да разумеју различите области у вашем производу, софтверу, веб сајтовима, мобилној апликацији итд. Нажалост, коришћење табела и листа са графичким ознакама може ићи само тако далеко. Када заиста требате објаснити карактеристике производа, важно је да их одаберете хотспотс за означавање.

Аппле Цомпутерс је можда најбољи пример поједностављених детаља етикете. Можда ћете приметити ове тачне технике на њиховој графици када гледате преко таблета, лаптопова или злогласног иПхоне-а. Њихове карактеристике и техничке спецификације су углавном исте као и други произвођачи рачунара великих брендова. Ипак, њихови графички модели су толико нетакнути да се производи практично продају.

Обратите пажњу да када прекинете процес, то је много једноставније него што мислите! Графика производа је само стандардни део целокупног дизајна сајта. Чак и ако продајете ђубриво или постељину или картице за трговање, вероватно ћете ове технике етикетирања добро искористити. Иако Аппле има неке заиста једноставне информативне графике, оне нису једина компанија која то чини. Покушати Гооглинг около за бизнис у вашој ниши да виде да ли на својим веб страницама играју било какве занимљиве инфо наљепнице или задатке.

4. Слике са динамичким садржајем

За неке веб програмере можда неће бити довољно да једноставно креирате обележену графику вашег софтвера. Можда постоји много јединствених карактеристика које желите да пређете, али садрже мали део ваше веб странице. Могуће је направите низ уводних корака водећи вас посетиоцима кроз мали демо производ.

Невсберри елегантно илуструје пример овога. На почетној страници ћете приметити блокну површину са малом мини навигацијом испод. Они укључују 5 корака у процесу са различитим снимцима екрана и попратним описним текстом. Чак и ако немате појма за шта се користи Невсберри, њихова уводни садржај врло јасно објашњава ствари. Чак вам се нуди неколико демо линкова кроз серију слајдова.

Док се крећете кроз њихов садржај, требало би да приметите да многи слајдови садрже снимке екрана унутар малог прозора претраживача. Овај ефекат је заправо врло једноставан за опонашање! Само треба пронађите слику коју ћете користити као позадинске слике и поново подесите снимке екрана да би се уклопили. Овакав ефекат неће функционисати за сваки производ, али је леп начин да се скенирају екрани из веб апликације.

5. Обришите снимке екрана и фотографије производа

Могуће је укључити све најбоље ознаке и могућности за ваше производе, али и даље недостају продаја. Тхе сцреенсхотови и фотографије које одаберете за вашу графику су на крају једнако важни као и сви финији детаљи. На Виндовс и Мац ОС Кс постоје начини снимања екрана цијелог вашег десктопа помоћу пречица на тастатури. Користећи овај метод у комбинацији са неким временом у Пхотосхопу можете акумулирати веома занимљиве демо функције.

Ако је ваш производ веома замршен, покушајте саставили неколико различитих слика. Горњи пример са Твеетбот-овог веб-сајта користи плаве кругове да означи акцију додиривања апликације. Уместо једног екрана са много етикета, размислите о коришћењу мале јКуери галерије слика да комбинујете 3-5 различитих графика. Ово вам даје више могућности фокусирати се на различите перспективе производа док се посетиоцима нуди много богатије искуство.

Када снимите фотографију са рачунара или паметног телефона, слика се увек чува са 100% зумом. Уредници слика као што је Пхотосхоп имају могућност да их ре-сизе, али они често губе детаље. Како онда можете прилагодити такву графику на ваш мали веб сајт? Једна од најбољих техника је увећање у којој скалирате апликацију и креирате увећане дијелове најважнијих дијелова. Ова техника се чешће види у софтверу него у физичким производима - детаљно сам описао процес дизајна у наставку.

6. Изградња ефекта "зум објектива"

Направићу кораке за стварање ефекта повећала у Адобе Пхотосхопу. Ако користите други графички уредник, највјероватније ћете обављати исте задатке, али ће се изборници и наредбе разликовати.

Један од најбољих примјера ове технике је на почетној страници апликације Ствари за Мац. Графика има мању апликацију тако да се савршено уклапа на страницу, заједно са малом сенком. Међутим, у неким важним областима приметићете да је круг са унутрашњим садржајем много већи. Они су чак додали бели унутрашњи сјај који се појављује као преламана светлост која сија кроз сочиво!

Бонус: "Зоом Ленс" Ефект Пхотосхоп Туториал

Да бисте покренули снимак екрана који желите да користите за своју графику. Направио сам брзи екран Хонгкиат почетне странице. Ја ћу исећи само прозор прегледача и променити величину на око 700пк. Промените величину ширине да бисте се уклопили у област садржаја на вашој веб локацији. Сада направите нови слој на врху ове позадине и направите кружну селекцију док држите схифт да бисте је одржали пропорционалном. Попуните сваку боју коју желите.

Корак 1

Ако је круг изабран, промените попуњеност% у панелу слојева на 0%. Под слојем ФКС додајте црни цртеж од 1пк-2пк и бели унутрашњи сјај. Можете смањити непрозирност за мање бело осветљење.

Корак 2

Још увек држите изабрани круг на вашем позадинском слоју и притисните цтрл (За Мац корисника, то је команда или цмд кључ.) + ц за копирање. Затим направите нови слој изнад позадине, али испод повећала и залијепите. Алтернативно можете само да притиснете цтрл + ј да дуплирате нови слој са само селекцијом у такт.

Притисните цтрл + т да бисте отворили алат за трансформацију. Сада извуците нови дупли слој док држите смена да све буде пропорционално и алт да би центар био непокретан.

Корак 3

Притисните цтрл и кликните на икону слоја повећала да бисте поново одабрали. Обратите пажњу да још увек треба да означавате дуплирани слој позадине у панелу слојева (онај који се налази испод нашег повећала), што значи да ће имати светло плаву позадину.

Притисните Цтрл + Схифт + и да бисте окренули тренутну селекцију. Сада избришите да бисте очистили додатни отпад из нашег скенираног снимка. За мало додатног ефекта повуците ФКС мени слоја да бисте додали малу сенку. Такође можете нацртати танку вертикалну линију од 1пк и користити Ликуифи филтер (Филтер> Ликуифи) направите малу ручку!

Закључак

Да бисте дизајнирали фантастичне производне графике, морате запамтити основе. Посетиоци једноставно желе да разумеју шта покушавате да их продате! Најједноставнији начин да се ове информације пренесу је низ снимака екрана или графика појединачних детаља. Налепнице су само други комад ове загонетке, у којем можете скицирати најважније скупове особина.

Када све ове технике ставите заједно, вероватно ћете почети да примећујете већу слику. Преузимања и куповине ће скочити - поготово ако поставите графичку слику на почетну страницу. Ове технике су савршене за графичке и веб дизајнере да би започели у области дизајна производа. Ми смо детаљно описали неколико апстрактних идеја, али волели бисмо да чујемо ваше мисли у наставку дискусије!