7 wskazówek, jak lepiej reagować na galerie zdjęć
Wszyscy wiemy i rozumiemy znaczenie projektowania stron internetowych na elastycznej platformie, prawda? Dotyczy to również zdjęć i galerii zdjęć.
Nie ma nic gorszego niż przejście do pięknej strony internetowej i zobaczenie obrazów, które po prostu nie „blokują się” w odpowiednim miejscu lub rozmiarze. To prawie sprawia, że myślisz, że projektant coś zapomniał lub przegapił krok.
Dzisiaj przyjrzymy się siedmiu rzeczom, które możesz zrobić w procesie projektowania, aby stworzyć lepiej reagujące galerie zdjęć. (Nie mówimy tutaj o kodzie; są to procesy projektowania, które mogą pomóc tobie i deweloperowi, niezależnie od tego, czy są jednym i tym samym).
Poznaj elementy Envato
1. Rozważ proporcje obrazu
Wygląd pulpitu może być zupełnie inny niż na urządzeniu mobilnym. Ale w przypadku większości witryn miejsca docelowe obrazów są takie same. Twoim zadaniem jest upewnienie się, że ten sam komunikat jest przesyłany w obu środowiskach i że obraz nie ginie na różnych rozmiarach ekranu.
Właśnie tutaj pojawia się myślenie o proporcjach - relacjach między poziomą a pionową płaszczyzną obrazu.
Po powrocie do tej strony na pulpicie fajne super cienkie poziome zdjęcie może wyglądać niesamowicie u góry projektu witryny. Ale co dzieje się z tym obrazem na mniejszym ekranie w bardziej kwadratowym otoczeniu? Czy zdjęcie zmniejsza się do rozmiaru, który jest trudny do zobaczenia? A może połowa zdjęcia znika?
Właśnie tam pojawia się współczynnik kształtu. Wybierając relację poziomo-pionową dla podobnych rozmiarów zdjęć, mniejsza ilość obrazu zostanie utracona przy zmianie urządzeń. Ułatwi to także pracę z miejscami docelowymi obrazów i nie będziesz musiał martwić się tak bardzo o przesyłanie wielu rozmiarów dla różnych punktów przerwania.
2. Rozmiar i skala konsekwentnie
Ostrożność, jaką przykładasz do kadrowania, zmiany rozmiaru i przesyłania zdjęć, może znacząco wpłynąć na przebieg pracy.
Ilu z was po prostu przesyła zdjęcia do CMS i ma nadzieję na najlepsze? Tak, to zła odpowiedź.
Każde zdjęcie powinno zostać przycięte i dopasowane do umieszczenia w projekcie witryny. Gwarantuje to, że zdjęcia będą wyglądały tak, jak powinny, i nie zabraknie głów na szczycie zdjęć lub elementów pozostających po jednej (lub obu) stronach.
Zajmuje to nieco więcej czasu na zapleczu projektu, ale jest warte wysiłku. (Szczególnie jeśli pracujesz z suwakami lub galeriami).
3. Użyj suwaka lub galerii
Używanie kontenera na obrazy, takie jak suwak lub galeria, może pomóc w lepszym zarządzaniu responsywnymi obrazami w projekcie witryny. W szczególności, jeśli używasz znanego i uznanego narzędzia innej firmy, większość ciężkiego podnoszenia jest wykonywana dla Ciebie, aby zapewnić, że te elementy będą działać zgodnie z przeznaczeniem.
Dwie poprzednie wskazówki pozostają niezwykle ważne, nawet przy użyciu elementów suwaka lub galerii; nadal mają zastosowanie współczynniki kształtu oraz pojęcia dotyczące rozmiarów i skalowania.
Nie wiesz, której opcji użyć? Wybierz suwak, gdy masz garść świetnych zdjęć, które będą działać w większych rozmiarach. Jest to popularna opcja w górnej lub „heroicznej” części strony. Wybierz galerię, gdy masz dużo obrazów, które mogą być renderowane jako małe bez problemów z czytelnością. Działa to dobrze w przypadku portfolio lub stron internetowych z dużą ilością zdjęć do zaprezentowania.
4. Unikaj podpisów, gdy jest to możliwe
Napisy mogą być doskonałym narzędziem do dodawania wartości do informacji na obrazie, ale mogą naprawdę przeszkadzać w działaniu strony. Unikaj ich, jeśli możesz lub wymyślić alternatywne rozwiązanie, które nie jest w formie tradycyjnego podpisu.
Duże bloki tekstowe, takie jak podpisy, mogą pięknie renderować na dużych ekranach, ale stanowią poważne problemy w mniejszych środowiskach. Wynikowy efekt może być wstrząsający i potencjalnie powodować opuszczanie witryny przez użytkowników. (A przy tak dużym ruchu pochodzącym z urządzeń mobilnych w większości witryn może to być katastrofalne).
5. Zachowaj ostrożność podczas miksowania wideo i obrazów
Wyjaśnijmy: absolutnie dopuszczalne jest umieszczanie na swojej stronie elementów wideo i obrazów. To prawdopodobnie coś, co powinieneś zrobić.
Ale nie mieszaj wideo i obrazów w tych samych elementach projektu, takich jak umieszczanie elementów wideo i obrazów w tym samym suwaku. Czasami masz szczęście i zadziała to jak urok. Innym razem pozostaną puste pola na niektórych urządzeniach, które wyglądają dziwnie.
Najlepszą opcją jest nadanie każdemu innemu typowi elementu własnej przestrzeni w projekcie. Dotyczy to praktycznie każdego elementu projektu, a zwłaszcza obrazów i wideo.
6. Wytnij niepotrzebne elementy
Jednym z największych problemów z suwakami i galeriami jest to, że zbyt często projektant wkłada do pojemnika zbyt dużo śmieci. Są strzałki nawigacyjne, przyciski nawigacyjne, tekst, wezwania do działania, a lista jest długa.
Zasadniczo użytkownicy rozumieją, jak korzystać z suwaka. Jeśli nie robisz czegoś całkowicie poza ścianą, nie potrzebujesz dwóch warstw nawigacji, które pokazują użytkownikom, co robić. Pojedynczy rząd przycisków lub strzał to dużo (jeśli w ogóle ich potrzebujesz).
Uwzględnij tylko elementy, z którymi użytkownicy będą musieli wchodzić w interakcje. Jeśli celem galerii zdjęć lub suwaka jest nakłonienie użytkownika do kliknięcia / stuknięcia wezwania do działania, powinna to być jedyna opcja na zdjęciu. Nie komplikuj. Nie podawaj zbyt wielu opcji. To może faktycznie pomóc w przeliczeniu.
7. Używaj tylko obrazów wysokiej jakości
To prawie oczywiste, ale wciąż zdarza się zbyt często. Jeśli nie masz gwiezdnego obrazu, nie używaj go wcale. Obrazy o wysokiej jakości i wysokiej rozdzielczości są ważniejsze niż kiedykolwiek. Użytkownicy nie będą tracić czasu na przeglądanie witryny z pikselowymi lub słabymi obrazami (i prawdopodobnie nie będą ci ufać, jeśli jakość będzie niższa).
Duża liczba użytkowników patrzy na projekt witryny za pomocą urządzeń z ekranami o wysokiej rozdzielczości; oczekują najwyższej jakości efektów wizualnych. Musisz dostarczyć.
Niektóre formaty obrazu zmieniają się, aby zaspokoić te potrzeby wysokiej rozdzielczości, jednocześnie zapewniając bardziej skompresowane obrazy. Zwróć uwagę na formaty - Google Developers to świetne miejsce na rozpoczęcie - dowiedz się, jakie rozdzielczości ekranu są najczęściej używane i nabądź zwyczaju zapisywania plików w sposób, który najlepiej dostarczyć użytkownikom.
Wniosek
Wszyscy chcemy tworzyć strony internetowe, z którymi użytkownicy czują potrzebę interakcji. Mocne obrazy są kluczową częścią tego równania. Równie ważne jest, aby renderowały się dobrze niezależnie od urządzenia.
Zaplanuj miejsca na obrazy, które będą działać na różnych rozmiarach urządzeń, gdy będziesz na etapie projektowania szkieletowego projektu witryny internetowej. Może się zdarzyć, że jest trochę dawania i przyjmowania, szczególnie jeśli chodzi o kształt obrazu, ale na dłuższą metę podejmowanie tych decyzji na wczesnym etapie i tworzenie takiej spójności przyniesie korzyści projektowi witryny na dłuższą metę.
