Графіка продукту 6 Методи, щоб зробити зображення більш інформативними
Веб-дизайнери стали дуже хитрими з маркетинговими методами. Заманюючий вміст сторінки завжди хороший, але коли справа доходить до захоплення уваги відвідувачів, зображення є найпопулярнішою формою медіа. Вони не вимагають звуку, як демо-відео, і вони можуть швидко передати важливу інформацію за лічені секунди. Це може здатися легким, але є деякі помітні методи побудови інформаційних зображень на веб-сайтах.
До них відносяться мітки функцій, знімки екрана з великим планом, порівняння цін та інші докладні деталі. Веб-дизайнери можуть використовувати інформаційну графіку для моделювання нових програм, програмного забезпечення, відеоігор або багатьох інших продуктів! Хоча найчастіше ви бачите ці методи, які використовуються в різних областях техніки.
Ознайомтеся з наведеними нижче ідеями, де ми пропонуємо не лише поради, але й реальні приклади красивої графічної продукції, що нагромаджено великою інформацією.
1. Розгорніть вміст
Інформаційні зображення не повинні використовуватися замість хорошого вмісту веб-сторінки. Замість цього використовуйте зображення, щоб розширити ключові моменти і ілюструйте їх чітко для ваших відвідувачів. Один з найкращих способів зробити це створення невеликого демо, щоб виділити важливі області підручника. За допомогою декількох інформативних графічних зображень та скріншотів набагато простіше зберегти інтерес читача через кожен крок.
Коли ви намагаєтеся продемонструвати програмний посібник (наприклад, підручник з Photoshop), це може бути важко передати повідомлення в письмовий текст. Відвідувачі потраплятимуть на вашу статтю і відразу ж починають субсознательно судити про матеріал протягом частки секунди. Web Designer Wall має фантастичний посібник з побудови округлих зображень CSS3, що супроводжується зручною графікою. Це включає в себе деякі ярлики та крупний план ефекту.
На оригінальній сторінці статті це зображення додає більш чітку картину в голову до того, що ви будете створювати. Автор додав невелику демонстраційну посилання, але чому б не включати і деякі демо-зображення? Набагато більше шансів привернути увагу правильно позначеним демо-пострілом.
Спробувати уникайте додавання зображень лише для медійного вмісту у вашій публікації. Якщо ви можете пояснити ваші методи або міркування без зображення, почніть тут спочатку. Тільки після того, як ви подивитеся на свою веб-копію, ви маєте на увазі повторне повторення деяких точок у детальному графічному зображенні. Зокрема, ви можете знайти Підручник вимагає більше візуальних сигналів, оскільки складність збільшується. Два приклади можуть включати створення бази даних веб-сайтів або набору даних таблиці.
2. Виділіть важливі функції
Тому що кожна частина програмного забезпечення / технології матиме так багато функцій, що майже неможливо пояснити кожен біт. Не тільки це, але це дуже малоймовірно, що ваші відвідувачі будуть зацікавлені читати 20 + етикетки на вашому інформаційному графіку. Дотримуйтеся найбільш цікавих особливостей і використовуйте етикетки, щоб пояснити їх дещо глибше.
Під час написання веб-копії вмісту мітки уникнути нудної мови коли можливо. Якщо відвідувачі переглядають останню версію вашої програми, вони можуть не піклуватися про зміни в колірній гамі. Як це вплине на їх щоденний робочий процес? Замість цього можливо виділіть, що для них корисно, як нова інтерфейсна панель або багатокористувацька зв'язок. Як правило, це має бути абстрактні особливості які ви не можете побачити “дивлячись” на виробі.
Наявність такої мітки, щоб пояснити ці особливості, дасть найпоширеніший відповідь. Відвідувачі відчуватимуть, що їх розглядають як розумних, зрілих покупців, здатних приймати власні рішення. Якщо вони дійсно подобаються ваші функції, це дає більший поштовх до купівлі вашого програмного забезпечення або продукту.
Нижче наведено приклад із сторінки оновлення Mozilla Firefox.
Ви можете бачити, що дизайнери використовували пунктирні пивні лінії для позначення міток і нових функцій. Це фактично фонові зображення, розташовані абсолютно всередині контейнера div. Дивно, що весь текст мітки також записаний у тегах HTML (ні тільки одне велике зображення).
Я вважаю, що цей метод не просто корисний для роботів-сканерів Google, а й для користувачів мобільних пристроїв, які зазвичай не мають повної веб-сторінки.
Також зверніть увагу, як функція "Панорама" повернута ліворуч пропонує невеликий “Вчи більше” посилання. Це, мабуть, найкраща практика, в яку можна потрапити при побудові інформаційної графіки! Якщо на одній сторінці є альтернативні сторінки або якорі, ваші відвідувачі можуть натискати ці посилання, щоб дізнатися більше про складні функції.
Пам'ятайте, що інформативна графіка використовується для легкого відображення тизерів і функцій продукту для ваших відвідувачів. Таким чином, хоча ви обмежені в просторі навколо графіки ви можете завжди пропонуйте можливість дізнатися більше на зовнішній сторінці.
3. Прості, ненав'язливі етикетки
Мітки є справді найважливішим аспектом у створенні інформативної графічної продукції. Відвідувачам, ймовірно, потрібно буде зрозуміти різні області вашого продукту, програмного забезпечення, веб-сайтів, мобільних додатків тощо. На жаль, використання таблиць і маркірованих списків може йти тільки до цих пір. Коли вам дійсно потрібно пояснити особливості продукту, важливо вибирати їх гарячих точок для маркування.
Apple Computers є, мабуть, найкращим прикладом спрощених деталей етикетки. Ви можете помітити ці точні методи на їхній графіці при перегляді планшетів, ноутбуків або сумнозвісного iPhone. Їх функції та технічні характеристики, як правило, такі ж, як і інші виробники комп'ютерів великої марки. Проте їхні графічні моделі настільки недоторкані, що продукти практично продаються.
Зверніть увагу, що, коли ви руйнуєте процес, це набагато простіше, ніж ви думаєте! Графіка продукту є лише стандартною частиною загального дизайну веб-сайту. Навіть якщо ви продаєте добрива або постільна білизна або торгові картки, ви, швидше за все, можете використовувати ці методи маркування. І хоча Apple має деякі дійсно спрощені інформативні графіки, вони не єдина компанія, що робить це. Спробуйте Гуляючи навколо для бізнесу у вашій ніші щоб побачити, чи вони спортують будь-які хитромудрі інформаційні ярлики або тізери на своєму веб-сайті.
4. Зображення з динамічним вмістом
Для деяких веб-розробників може виявитися недостатньо просто створити графічне зображення вашого програмного забезпечення. Можливо, існує багато унікальних функцій, які потрібно переглядати, але містять невелику частину веб-сторінки. Можна побудувати ряд вступних кроків веде вас відвідувачам через невелику демонстраційну версію продукту.
Newsberry елегантно ілюструє приклад цього. На їхній домашній сторінці ви побачите блок з невеликою міні-навігацією під ним. Вони включають 5 кроків у процесі з різними скріншотами і деякими супровідними описовими текстами. Навіть якщо ви не знаєте, для чого використовується Newsberry, їх Вступний зміст пояснює речі дуже чітко. Вам навіть запропонують кілька демонстраційних посилань по всій серії слайдів.
Під час переміщення їх вмісту ви повинні помітити, що багато слайдів містять скріншоти в невеликому вікні браузера. Цей ефект насправді дуже просто імітувати! Вам просто потрібно знайдіть зображення, яке використовуватиметься як фонове зображення, і повторно розмістіть скріншоти, щоб він містився всередині. Цей ефект не буде працювати для кожного продукту, але це гарний спосіб фреймувати екрани з веб-програми.
5. Очистіть скріншоти та фотографії продуктів
Можна включити всі найкращі етикетки та функції для ваших продуктів, але все одно пропускати продажі. The скріншоти та фотографії, які ви обираєте для вашого графічного зображення, настільки ж важливі, як і всі деталі. У Windows та Mac OS X є способи зробити скріншоти всього вашого робочого столу за допомогою комбінацій клавіш. Використовуючи цей метод в поєднанні з деяким часом у Photoshop, можна накопичувати дуже цікаві демо-версії.
Якщо ваш продукт дуже заплутаний, ви повинні спробувати скласти кілька різних зображень. Наведений вище приклад з веб-сайту Tweetbot використовує сині кола, щоб вказати дію на додаток. Замість одного знімка з багатьма мітками розглянемо використання невеликої галереї зображень jQuery для об'єднання 3-5 різних графічних зображень. Це дає вам більше можливостей зосередитися на різних перспективах продукту у той час як відвідувачам пропонується набагато багатіший досвід.
Коли ви знімаєте знімок з комп'ютера або смартфона, зображення завжди зберігається зі 100-відсотковим збільшенням. Редактори зображень, такі як Photoshop, мають можливість повторно розмістити їх, але вони часто втрачають деталі. Отже, як ви можете помістити таку графіку у ваш невеликий веб-сайт? Однією з кращих методів є збільшення в якому ви масштабуєте програму вниз і створюєте збільшені розділи найбільш важливих частин. Ця методика зустрічається частіше в програмному забезпеченні, ніж фізичні продукти.
6. Створення ефекту "Zoom Lens"
Я буду будувати кроки для створення ефекту збільшувального скла в Adobe Photoshop. Якщо ви використовуєте інший графічний редактор, ви, швидше за все, виконуватимете ті ж самі завдання, але меню та команди будуть відрізнятися.
Одним з кращих прикладів цієї методики є Домашня сторінка програми «Для програми Mac». Графічне зображення має невелике зменшення, так що вона ідеально впишеться на сторінку, а також невелика тінь. Проте над деякими важливими областями ви побачите коло з вмістом всередині, набагато більшим. Вони навіть додали біле внутрішнє світіння, яке з'явилося як переломлене світло, що просвічує через лінзу!
Бонус: "Zoom Lens" Ефект Photoshop Підручник
Щоб розпочати захоплення знімка екрана, який ви хочете використовувати для графіки. Я зробив швидкий екран домашньої сторінки Hongkiat. Я збираюся обрізати лише вікно браузера і змінити його розмір приблизно на 700px. Слід змінювати розмір ширини, щоб він містився в області вмісту вашого власного веб-сайту. Тепер зробіть новий шар над цим фоном і зробіть круговий вибір, утримуючи зрушення, щоб зберегти його пропорційно. Заповніть будь-який колір.
Крок 1
Зберігаючи коло обрано, змініть заливку% на панелі шарів на 0%. Під шаром FX додати 1px-2px чорний обведення і білий внутрішній світіння. Можна зменшити непрозорість для менш білого освітлення.
Крок 2
Як і раніше, вибране коло буде переміщено на ваш фоновий шар і натиснути ctrl (Для користувачів Mac це команда або ключ cmd.) + c для копіювання. Потім зробіть новий шар над фоном, але під збільшувальним колом і вставте. В якості альтернативи можна просто натиснути клавішу ctrl + j, щоб дублювати новий шар з виключною вибіркою.
Натисніть ctrl + t, щоб відкрити інструмент перетворення. Тепер масштабуйте новий дублюючий шар під час утримання зміщення тримати все пропорційно і alt тримати центр нерухомим.
Крок 3
Натисніть комбінацію клавіш Ctrl і натисніть на піктограму збільшувального скла, щоб знову зробити вибір. Зауважте, що на панелі шарів (безпосередньо під нашим збільшувальним склом) слід підсвічувати дубльований фоновий шар, тобто мати світло-блакитний фон.
Натисніть Ctrl + Shift + i, щоб інвертувати поточний вибір. Тепер натисніть видалити, щоб очистити додатковий сміття з нашого повторного масштабу скріншоту. Для додаткового ефекту підтягніть меню FX, щоб додати невелику тінь. Ви також можете намалювати тонку вертикальну лінію на 1px і використовувати фільтр Liquify (Фільтр> Збільшити) створити невелику ручку!
Висновок
Для того, щоб створити фантастичну графічну продукцію, ви повинні пам'ятати основи. Відвідувачі просто хочуть зрозуміти, що ви намагаєтеся їх продати! Найпростіший спосіб отримати цю інформацію через серію скріншотів або одну графіку деталей. Ярлики - це лише друга частина цієї головоломки, де ви можете виділити найважливіші набори функцій.
Коли ви покладете всі ці методи разом, ви, мабуть, почнете помічати більшу картину. Завантаження та покупки зростатимуть надзвичайно сильно - особливо, якщо ви розміщуєте графічний центр на вашій домашній сторінці. Ці методи ідеально підходять для графічних і веб-дизайнерів, щоб розпочати роботу в області дизайну продукції. Ми деталізували кілька абстрактних ідей, але ми хотіли б почути ваші думки в дискусійній області нижче!
