Графика на продукта 6 Техники за правене на снимки по-информативни

Уеб дизайнерите са станали много хитри с маркетингови техники. Привличането на съдържанието на страницата винаги е добро, но когато става дума за привличане на посетителите, изображенията са най-популярната форма на медиите. Те не изискват звук като демо видео и бързо могат да предават важна информация в рамките на няколко секунди. Може да изглежда лесно, но има известни техники за изграждане на информационни изображения на уебсайтовете.

Те включват етикети на функции, снимки в близък план, сравнения на цените и други подробности. Уеб дизайнерите могат да използват информационни графики за моделиране на нови приложения, софтуер, видео игри или много други продукти! Въпреки че най-често виждате тези техники, използвани в различни области на технологията.

Разгледайте идеите по-долу, където предлагаме не само съвети, но и реални примери за красива продуктова графика, пълна с много информация.

1. Разширете съдържанието си

Информационните изображения не трябва да се използват вместо добро съдържание на уеб страници. Вместо използвайте изображения, за да разширите ключовите си точки и ги илюстрирайте ясно за вашите посетители. Един от най-добрите начини за това е изграждане на малка демонстрация, за да се подчертаят важни области на урок. С няколко информативни графики и снимки на екрани е много по-лесно да запазите интереса на читателя си през всяка стъпка.

Когато се опитате да демонстрирате софтуерен наръчник (като например наръчник за Photoshop), може да е трудно за него предаване на съобщението в писмен текст. Посетителите ще кацнат на вашата статия и незабавно ще започнат съзнателно да преценяват материала в рамките на част от секундата. Web Designer Wall има фантастичен урок за изграждане на CSS3 закръглени изображения, придружени от удобна графика. Това включва някои етикети и близка снимка на ефекта.

На страницата с оригиналната статия това изображение добавя много по-ясна картина в главата ви към това, което ще създавате. Авторът е добавил малка демо връзка, но защо не включва и някои демо снимки? Много по-вероятно е да привлечете вниманието с правилно обозначен демо-изстрел.

Опитвам се да избягвайте добавянето на изображения само за медийно съдържание в публикацията си. Ако можете да обясните методите или разсъжденията си без изображение, започнете от тук. Само след това трябва да обмислите отново вашето уеб копие, ако помислите да повторите някои точки в подробна графична графика. По-конкретно можете да намерите a Урокът изисква повече визуални подсказки, тъй като сложността се увеличава. Два примера могат да включват изграждане на база данни на уебсайт или набор от данни за таблици.

2. Маркирайте важните функции

Защото всяка част от софтуера / технологията ще има толкова много функции, че е почти невъзможно да се обясни всеки един бит. Не само това, но е много малко вероятно вашите посетители да се интересуват да четат над 20 етикета на вашата информационна графика. Придържайте се към най-интересните функции и използвайте етикети, за да обясните малко по-задълбочено.

Когато пишете уеб копието за съдържанието на вашия етикет избягвайте скучния език когато е възможно. Ако посетителите търсят най-новата версия на приложението, може да не им пука много за промените в цветовата схема. Как това ще се отрази на ежедневния им работен процес? Вместо това може би подчертайте какво е полезно за тях, като нов интерфейсен панел или многопотребителска свързаност. Обикновено това трябва да бъде абстрактни функции които не можете да видите само от “търси” в продукта.

Наличието на такъв етикет, за да се обяснят тези характеристики, ще даде най-голям отговор. Посетителите ще почувстват, че се третират като интелигентни, зрели купувачи, способни да вземат свои собствени решения. Ако те наистина харесват вашите функции, това дава по-голям тласък към закупуването на вашия софтуер или продукт.

По-долу е даден пример от страницата за актуализация на Mozilla Firefox.

Можете да видите, че дизайнерите са използвали пунктирани линии, за да посочат етикети и нови функции. Това всъщност са фонови изображения, поставени абсолютно вътре в контейнера Разделение. Изненадващо, целият текст на етикета също е написан в HTML тагове (не само едно голямо изображение).

Смятам, че този метод не е удобен само за роботите на Google, но и за мобилните потребители, които обикновено не могат да изпитат пълната уеб страница.

Също така обърнете внимание как функцията „Панорама“ е вляво предлага малък “Научете повече” връзка. Това е може би най-добрата практика, с която можете да се сдобиете при изграждането на информационни графики! Ако имате алтернативни страници или котви в рамките на една и съща страница, посетителите могат да кликнат върху тези връзки, за да разберат повече за сложните функции.

Не забравяйте, че информативните графики се използват за лесно показване на тийзърите и функциите на продукта за посетителите ви. Така че, въпреки че сте ограничени в пространството около графиката, можете винаги предлагайте възможност да научите повече на външна страница.

3. Обикновени, ненатрапчиви етикети

Етикети са наистина най-важният аспект при създаването на информативни продуктови графики. Посетителите вероятно ще трябва да разберат различни области във вашия продукт, софтуер, уебсайтове, мобилно приложение и т.н. За съжаление използването на таблици и списъци с маркирани знаци може да стигне само досега. Когато наистина трябва да обясните характеристиките на продукта, е важно да го изберете горещи точки за етикетиране.

Apple Computers е може би най-добрият пример за опростени детайли на етикета. Може да забележите тези точни техники върху техните графики, когато разглеждате таблети, лаптопи или скандалния iPhone. Техните характеристики и технически характеристики са като цяло други производители на големи компютърни марки. Но техните графични модели са толкова девствени, че продуктите се продават на практика.

Забележете, че когато прекъснете процеса, това е много по-просто, отколкото може да си помислите! Графиката на продуктите е само стандартна част от цялостния дизайн на уебсайта. Дори ако продавате торове или чаршафи или карти за търговия, вероятно ще можете да използвате тези техники за етикетиране. И въпреки че Apple има някои наистина опростени информативни графики, те не са единствената компания, която го прави. Опитвам Googling около за бизнеса във вашата ниша за да видим дали те спортират някакви изискани информационни етикети или закачки на уебсайта си.

4. Изображения с динамично съдържание

За някои уеб разработчици може да не е достатъчно просто да създадете етикетирана графика на вашия софтуер. Може да има много уникални функции, които искате да преодолеете, но съдържат в една малка част от уеб страницата си. Възможно е изгради серия от въвеждащи стъпки водещи ви посетители през малка демо продукт.

Нюсбъри елегантно илюстрира пример за това. На тяхната начална страница ще забележите блокова зона с малка мини-навигация отдолу. Те включват 5 стъпки по протежение на процеса с различни скрийншотове и някои съпътстващи описателни текстове. Дори ако нямате представа за какво се използва Newsberry, техните въвеждащото съдържание обяснява нещата много ясно. Дори се предлагат няколко демо връзки през цялата серия от слайдове.

Докато се придвижвате през тяхното съдържание, трябва да забележите, че много слайдове съдържат екранни снимки в малък прозорец на браузъра. Този ефект всъщност е много лесен за имитиране! Просто трябва намерете изображение, което да използвате като фоново изображение, и преразгледайте снимките на екрана, за да се побере вътре. Този ефект няма да работи за всеки продукт, но това е добър начин да се направят екрани от уеб приложение.

5. Изчистете Скрийншоти и Снимки на продукта

Възможно е да се включат всички най-добри етикети и функции за вашите продукти, но все още да липсват продажбите. Най- снимки на екрани и снимки, които избирате за вашата графика, са в крайна сметка също толкова важни, колкото и всички по-фини детайли. В Windows и Mac OS X има начини да правите снимки на екрана на целия си работен плот с клавишни комбинации. Използвайки този метод, комбиниран с известно време в Photoshop, можете да натрупате много интересни демонстрации на функции.

Ако вашият продукт е много сложен, трябва да се опитате да го направите събрали няколко различни изображения. Примерът по-горе от уебсайта на Tweetbot използва сини кръгове, за да укаже действие на приложението. Вместо един скрийншот с много етикети, обмислете използването на малка галерия с изображения на jQuery, за да комбинирате 3-5 различни графики. Това ви дава повече възможности фокусиране върху различни перспективи на продукта докато на посетителите се предлага много по-богат опит.

Когато заснемате снимка от вашия компютър или смартфон, картината винаги се запазва със 100% увеличение. Редакторите на изображения като Photoshop имат възможността да ги преразпределят, но често губят подробности. И така, как можете да поставите такава графика в малкия си уебсайт? Една от най-добрите техники е увеличение в който мащабирате приложението и създавате увеличени раздели на най-важните части. Тази техника се наблюдава по-често в софтуера, отколкото физическите продукти.

6. Изграждане на ефект "Zoom Lens"

Ще направя стъпките за създаване на ефект на лупа в Adobe Photoshop. Ако използвате друг графичен редактор, най-вероятно ще изпълните същите задачи, но менютата и командите ще се различават.

Един от най-добрите примери за тази техника е на страница „Неща за Mac“. Графиката има малък размер на приложението, така че ще се впише идеално в страницата, заедно с малка сянка. Въпреки това върху някои от важните области ще забележите, че кръгът с вътрешното съдържание е много по-голям. Дори са добавили бял вътрешен блясък, който се появява като пречупена светлина, която свети през обектива!

Бонус: "Увеличи обектива"

За да започнете, вземете екранна снимка, която искате да използвате за графиката си. Направих бърз екран на началната страница на Hongkiat. Ще изрежа само прозореца на браузъра и ще преоразмеря до 700px. Трябва да преоразмерите ширината, за да се побере в областта на съдържанието на собствения ви уебсайт. Сега направете нов слой върху този фон и направете кръгова селекция, докато държите shift, за да я запазите пропорционален. Попълнете с желания от вас цвят.

Етап 1

Поддържайки избрания кръг, променете% запълване в панела за слоеве до 0%. Под слоя FX добавете черен инсулт от 1px-2px и бяло вътрешно сияние. Можете да намалите непрозрачността за по-малко бяло осветление.

Стъпка 2

Все още запазвате избрания кръг да се придвижва към слоя ви във фона и да натискате ctrl (За потребител на Mac, това е команден или cmd ключ.) + c за копиране. След това направете нов слой над фона, но под лупа и поставете. Алтернативно можете просто да натиснете ctrl + j, за да дублирате нов слой само с подбора на такт.

Натиснете ctrl + t, за да отворите инструмента за преобразуване. Сега намалете новия дублиращ се слой, докато държите изместване да запази всичко пропорционално и н за да остане центърът неподвижен.

Стъпка 3

Натиснете ctrl и кликнете върху иконата на лупа, за да направите своя избор отново. Забележете, че все още трябва да подчертавате дублирания слой на фона в панела за слоеве (този, който се намира под лупата), което означава, че ще има светъл син фон.

Натиснете Ctrl + Shift + i, за да обърнете текущата селекция. Сега натиснете "изтрий", за да изчистите допълнителния боклук от нашия скрийншот. За малко добавен ефект издърпайте менюто FX, за да добавите малка сянка. Можете също така да начертаете тънка вертикална линия от 1px и да използвате филтъра Liquify (Филтриране> Ликвидиране) създайте малка дръжка!

заключение

За да проектирате фантастични продуктови графики, трябва да запомните основите. Посетителите просто искат да разберат какво се опитвате да ги продадете! Най-лесният начин да получите тази информация е чрез поредица от снимки на екрани или графики с един детайл. Етикетите са само второто парче от този пъзел, където можете да очертаете най-важните набори от функции.

Когато сложите всички тези техники заедно, най-вероятно ще забележите по-голямата картина. Изтеглянията и покупките ще нарастват рязко - особено ако поставите графиката си в началото и в средата на началната си страница. Тези техники са идеални за графични и уеб дизайнери, за да започнат работа в областта на продуктовия дизайн. Имаме подробни няколко абстрактни идеи, но бихме искали да чуем вашите мисли в дискусионната област по-долу!