Grafika produktu 6 Techniki, aby obrazy bardziej informowały
Projektanci stron internetowych stali się bardzo sprytni w stosowaniu technik marketingowych. Wabienie zawartości strony jest zawsze dobre, ale jeśli chodzi o chwytanie użytkowników, obrazy uwagi są najpopularniejszą formą mediów. Nie wymagają dźwięku podobnego do wideo demonstracyjnego i mogą szybko przekazać ważne informacje w ciągu kilku sekund. Może się to wydawać łatwe, ale istnieją pewne godne uwagi techniki tworzenia informacji informacyjnych na stronach internetowych.
Należą do nich etykiety funkcji, zrzuty ekranu z bliska, porównania cen i inne drobne szczegóły. Projektanci stron internetowych mogą używać grafiki informacyjnej do modelowania nowych aplikacji, oprogramowania, gier wideo lub wielu innych produktów! Chociaż najczęściej widzisz te techniki wykorzystywane w różnych dziedzinach technologii.
Zapoznaj się z poniższymi pomysłami, w których oferujemy nie tylko wskazówki, ale także przykłady pięknych grafik z produktami, które są przepełnione wspaniałymi informacjami.
1. Rozwiń swoją zawartość
Obrazów informacyjnych nie należy używać zamiast dobrej zawartości strony internetowej. Zamiast wykorzystaj zdjęcia do rozwinięcia kluczowych punktów i zilustrować je wyraźnie dla odwiedzających. Jednym z najlepszych sposobów na to jest budowanie małej demonstracji, aby podkreślić ważne obszary samouczka. Dzięki kilku informacyjnym grafikom i zrzutom ekranu łatwiej jest utrzymać zainteresowanie czytelnika w każdym kroku.
Podczas próby zademonstrowania samouczka oprogramowania (takiego jak samouczek programu Photoshop) może to być trudne przekazać wiadomość do tekstu pisanego. Odwiedzający wylądują na twoim artykule i natychmiast zaczną podświadomie oceniać materiał w ułamku sekundy. Web Designer Wall ma fantastyczny samouczek na temat tworzenia zaokrąglonych obrazów CSS3 wraz z poręczną grafiką. Obejmuje to niektóre etykiety i zbliżenia efektu.
Na oryginalnej stronie artykułu obraz ten dodaje do twojej głowy znacznie wyraźniejszy obraz w kierunku tego, co będziesz tworzyć. Autor dodał mały link demo, ale dlaczego nie zawiera także niektórych obrazów demonstracyjnych? Bardziej prawdopodobne jest, że zwrócisz uwagę na odpowiednio oznakowane ujęcie demo.
Spróbuj unikaj dodawania obrazów tylko ze względu na zawartość multimedialną w twoim poście. Jeśli możesz wyjaśnić swoje metody lub rozumowanie bez obrazu, zacznij tutaj najpierw. Dopiero potem, patrząc wstecz na twoją kopię internetową, powinieneś rozważyć powtórzenie niektórych punktów w szczegółowej grafice obrazu. W szczególności możesz znaleźć samouczek wymaga więcej wizualnych wskazówek w miarę wzrostu złożoności. Dwa przykłady mogą obejmować budowę bazy danych witryny lub zestawu danych tabeli.
2. Zaznacz Najważniejsze funkcje
Ponieważ każdy element oprogramowania / technologii będzie miał tak wiele funkcji, prawie niemożliwe jest wyjaśnienie każdego bitu. Nie tylko to, ale jest bardzo mało prawdopodobne, że użytkownicy będą zainteresowani odczytaniem ponad 20 etykiet na grafice informacyjnej. Trzymaj się najciekawszych funkcji i użyj etykiet, aby wyjaśnić nieco głębiej.
Podczas pisania kopii internetowej dla zawartości etykiety unikać nudnego języka kiedykolwiek możliwe. Jeśli odwiedzający przeglądają najnowszą wersję aplikacji, mogą nie przejmować się zmianami w kolorystyce. Jak wpłynie to na ich codzienny przepływ pracy? Zamiast tego może podkreśl to, co jest dla nich korzystne, jak nowy panel interfejsu lub łączność wielu użytkowników. Zasadniczo powinny to być abstrakcyjne funkcje których nie możesz zobaczyć “patrząc” na produkt.
Posiadanie takiej etykiety, aby wyjaśnić te cechy, zapewni najbardziej obfite odpowiedzi. Odwiedzający poczują, że są traktowani jak inteligentni, dojrzali klienci, zdolni do podejmowania własnych decyzji. Jeśli naprawdę lubią twoje funkcje, oznacza to większy nacisk na zakup oprogramowania lub produktu.
Poniżej znajduje się przykład ze strony aktualizacji Mozilla Firefox.
Widać, że projektanci użyli kropkowanych linii krzywych, aby wskazać etykiety i nowe funkcje. Są to w rzeczywistości obrazy tła umieszczone absolutnie wewnątrz kontenera div. Zaskakująco cały tekst etykiety jest również zapisywany w tagach HTML (nie tylko jeden duży obraz).
Uważam, że ta metoda jest nie tylko przydatna dla robotów indeksujących Google, ale także dla użytkowników mobilnych, którzy normalnie nie mogą korzystać z pełnej strony internetowej.
Zauważ także, jak funkcja Panorama znajduje się po lewej stronie oferuje małą “Ucz się więcej” połączyć. Jest to prawdopodobnie najlepsza praktyka, którą możesz zdobyć podczas tworzenia grafiki informacyjnej! Jeśli masz inne strony lub kotwice na tej samej stronie, użytkownicy mogą kliknąć te linki, aby dowiedzieć się więcej o skomplikowanych funkcjach.
Pamiętaj, że grafika informacyjna jest używana do łatwego wyświetlania zwiastunów i funkcji produktu dla odwiedzających. Tak więc, mimo że masz ograniczoną przestrzeń wokół grafiki, możesz zawsze oferuj szansę dowiedzenia się więcej na zewnętrznej stronie.
3. Proste, dyskretne etykiety
Etykiety są naprawdę najważniejszym aspektem tworzenia grafik informacyjnych. Odwiedzający będą prawdopodobnie musieli rozumieć różne obszary w swoim produkcie, oprogramowaniu, stronach internetowych, aplikacji mobilnej itp. Niestety, użycie tabel i list punktowanych może się odbyć tylko do tej pory. Kiedy naprawdę potrzebujesz wyjaśnić funkcje produktu, ważne jest, aby je wybrać hotspoty do etykietowania.
Apple Computers jest prawdopodobnie najlepszym przykładem prostego opisu etykiety. Te dokładne techniki można zauważyć na grafice podczas przeglądania tabletów, laptopów lub niesławnego iPhone'a. Ich cechy i specyfikacje techniczne są na ogół takie same jak innych producentów komputerów dużych marek. Jednak ich modele graficzne są tak nieskazitelne, że produkty praktycznie się sprzedają.
Zauważ, że kiedy załamiesz proces, jest to znacznie prostsze niż myślisz! Grafika produktu jest tylko standardową częścią ogólnego projektu strony. Nawet jeśli sprzedajesz nawozy lub prześcieradła lub karty handlowe, możesz z powodzeniem wykorzystać te techniki etykietowania. I choć Apple ma naprawdę prostą grafikę informacyjną, nie jest to jedyna firma, która to robi. Próbować Googlujemy dla firm w swojej niszy aby sprawdzić, czy na ich stronie internetowej są jakieś wymyślne etykiety informacyjne lub ekrany teasera.
4. Zdjęcia z zawartością dynamiczną
Dla niektórych twórców stron internetowych nie wystarczy po prostu stworzyć etykietę graficzną oprogramowania. Może istnieć wiele unikalnych funkcji, które chcesz przejść, ale zawierają one niewielką część strony internetowej. Jest możliwe skonstruuj serię wstępnych kroków prowadzi Cię przez całą prezentację małego produktu.
Newsberry elegancko ilustruje ten przykład. Na ich stronie głównej zobaczysz obszar bloku z małą mini-nawigacją pod spodem. Obejmują one 5 kroków wzdłuż procesu z różnymi zrzutami ekranu i towarzyszącym im tekstem opisowym. Nawet jeśli nie masz pojęcia, do czego służy Newsberry, ich treść wprowadzająca wyjaśnia rzeczy bardzo wyraźnie. W serii slajdów można nawet znaleźć kilka linków demo.
Podczas przechodzenia przez ich zawartość powinieneś zauważyć wiele slajdów zawierających zrzuty ekranu w małym oknie przeglądarki. Ten efekt jest bardzo prosty do naśladowania! Po prostu musisz znajdź obraz, który będzie używany jako tło i zmień rozmiar zrzutów ekranu, aby zmieścił się w środku. Przyznany efekt nie będzie działać dla każdego produktu, ale jest to miły sposób na kadrowanie ekranów z aplikacji internetowej.
5. Wyczyść zrzuty ekranu i zdjęcia produktów
Możliwe jest uwzględnienie wszystkich najlepszych etykiet i funkcji dla swoich produktów, ale nadal brakuje sprzedaży. The Zrzuty ekranu i zdjęcia, które wybierzesz dla swojej grafiki, są ostatecznie tak samo ważne, jak wszystkie inne szczegóły. W systemach Windows i Mac OS X istnieją sposoby wykonywania zrzutów ekranu całego pulpitu za pomocą skrótów klawiaturowych. Korzystając z tej metody w połączeniu z pewnym czasem w Photoshopie, możesz gromadzić bardzo ciekawe dema funkcji.
Jeśli twój produkt jest bardzo skomplikowany, powinieneś spróbować złożyć kilka różnych obrazów. Powyższy przykład ze strony Tweetbot używa niebieskich kółek do wskazania akcji stukania w aplikacji. Zamiast pojedynczego zrzutu ekranu z wieloma etykietami rozważ użycie małej galerii obrazów jQuery do połączenia 3-5 różnych grafik. Daje to więcej możliwości skup się na różnych perspektywach produktu podczas gdy odwiedzającym oferowane jest znacznie bogatsze doświadczenie.
Po zrobieniu zdjęcia z komputera lub smartfona obraz jest zawsze zapisywany z powiększeniem 100%. Edytory obrazów, takie jak Photoshop, mają możliwość zmiany rozmiaru, ale często tracą szczegóły. Jak więc dopasować taką grafikę do swojej małej witryny? Jedną z najlepszych technik jest powiększenie w którym skalujesz aplikację i tworzysz powiększone fragmenty najważniejszych elementów. Ta technika jest częściej spotykana w oprogramowaniu niż w produktach fizycznych - szczegółowo opisałem proces projektowania poniżej.
6. Budowanie efektu „Zoom Lens”
Będę budować kroki do budowania efektu szkła powiększającego w Adobe Photoshop. Jeśli używasz innego edytora graficznego, możesz najprawdopodobniej wykonywać te same zadania, ale menu i polecenia będą się różnić.
Jednym z najlepszych przykładów tej techniki jest strona główna Rzeczy dla komputerów Mac. Grafika ma małą skalę aplikacji, dzięki czemu idealnie pasuje do strony wraz z małym cieniem. Jednak w niektórych ważnych obszarach zauważysz okrąg z wewnętrzną zawartością znacznie większą. Dodali nawet biały wewnętrzny blask, który wygląda jak załamane światło wpadające przez soczewkę!
Bonus: Efekt „Zoom Lens” Samouczek Photoshopa
Aby rozpocząć, zrób zrzut ekranu, którego chcesz użyć dla swojej grafiki. Zrobiłem szybki ekran strony głównej Hongkiat. Mam zamiar przyciąć okno przeglądarki i zmienić rozmiar na około 700px. Należy zmienić szerokość, aby zmieściła się w obszarze zawartości własnej witryny. Teraz utwórz nową warstwę na wierzchu tego tła i dokonaj zaznaczenia kołowego, przytrzymując przesunięcie, aby zachować proporcjonalność. Wypełnij dowolnym kolorem.
Krok 1
Utrzymując wybrany krąg, zmień% wypełnienia w panelu warstw na 0%. Pod warstwą FX dodaj czarny obrys 1px-2px i biały wewnętrzny blask. Możesz zmniejszyć krycie dla mniej białego światła.
Krok 2
Nadal zachowując zaznaczony krąg, przejdź na warstwę tła i naciśnij ctrl (Dla użytkowników komputerów Mac jest to polecenie lub klawisz cmd.) + c, aby skopiować. Następnie utwórz nową warstwę nad tłem, ale poniżej okręgu powiększającego i wklej. Możesz też po prostu nacisnąć ctrl + j, aby powielić nową warstwę z tylko taktem wyboru.
Naciśnij ctrl + t, aby otworzyć narzędzie transformacji. Teraz skaluj nową zduplikowaną warstwę podczas trzymania przesunięcie zachować wszystko proporcjonalne i alt aby utrzymać centrum w bezruchu.
Krok 3
Naciśnij ctrl i kliknij ikonę warstwy szkła powiększającego, aby ponownie dokonać wyboru. Pamiętaj, że powinieneś nadal podświetlać powieloną warstwę tła w panelu warstw (tym bezpośrednio pod naszą lupą), co oznacza, że będzie miał jasnoniebieskie tło.
Naciśnij Ctrl + Shift + i, aby odwrócić bieżący wybór. Teraz naciśnij Delete, aby usunąć dodatkowe śmieci z naszego przeskalowanego ekranu. Aby dodać trochę efektu, rozwiń menu efektów warstwy, aby dodać mały cień. Możesz także narysować cienką pionową linię 1px i użyć filtru Liquify (Filtr> Skraplanie) stwórz mały uchwyt!
Wniosek
Aby zaprojektować fantastyczną grafikę produktu, musisz pamiętać o podstawach. Odwiedzający chcą po prostu zrozumieć, co próbujesz sprzedać! Najprostszym sposobem uzyskania tych informacji jest seria zrzutów ekranu lub pojedyncza grafika szczegółowa. Etykiety to tylko drugi element tej układanki, w którym można zarysować najważniejsze zestawy funkcji.
Kiedy połączysz wszystkie te techniki, prawdopodobnie zaczniesz zauważać większy obraz. Pobieranie i zakupy będą gwałtownie rosnąć - zwłaszcza, jeśli umieścisz grafikę na pierwszej stronie głównej. Techniki te są idealne dla grafików i projektantów stron internetowych, aby rozpocząć w dziedzinie projektowania produktów. Wyszczególniliśmy kilka abstrakcyjnych pomysłów, ale chcielibyśmy usłyszeć twoje myśli w obszarze dyskusji poniżej!
