9 Niezbędnych zasad dla elastycznych galerii obrazów
Responsywny design jest niezbędną i niezbędną częścią tworzenia stron internetowych. Jednym z największych problemów z responsywnym projektowaniem stron internetowych były obrazy. Wielu debatuje o najlepszym sposobie wyświetlania obrazów w responsywnej witrynie. A co z galeriami zdjęć?
Galerie zdjęć cechują się znacznie większą złożonością niż pojedyncze obrazy; jest jeszcze więcej zmiennych i rzeczy do przemyślenia podczas wdrażania całych responsywnych galerii zdjęć w twojej witrynie. Przyjrzyjmy się przydatnym wskazówkom dotyczącym wdrażania responsywnych galerii zdjęć we właściwy sposób.
1) Pokazy slajdów: ukryj nawigację, gdy tylko jest to możliwe
Możesz nie mieć elementów nawigacyjnych na tablecie lub urządzeniu mobilnym, ale na komputerze dobrze jest ukryć te elementy, dopóki nie będą potrzebne. Przedmioty takie jak strzałki do przodu i do tyłu oraz kropki nawigacyjne powinny być ustawione tak, aby wyświetlały się tylko wtedy, gdy ktoś przesunie się po przesuwanej galerii obrazów. Zapobiega to rozpraszaniu i pozwala uniknąć konfliktów między treścią a elementami nawigacji. Całe doświadczenie wydaje się mniej pogmatwane.
2) Unikaj zbyt wielu portretów
Jeśli wdrażasz galerię będącą siatką obrazów, wybierz zdjęcia o orientacji poziomej lub kwadratowe, jeśli to możliwe. Ułatwia to przeglądanie ich na małym ekranie. Obrazy portretowe byłyby w porządku na smartfonie w trybie portretowym, ale szeroki obszar widzenia telefonu zorientowanego poziomo utrudnia oglądanie zdjęć portretowych. Krajobraz jest najlepszy, ale można zadowalać się kwadratem, jeśli krajobraz nie jest opcją. Wszystkie obrazy można ustawić tak, aby pasowały do obszaru wyświetlania, ale zdjęcia portretowe na ekranie krajobrazowym będą wyświetlane bardzo małe. Twoje obrazy nie będą wyświetlane tak uważnie, jak obrazy kwadratowe lub krajobrazowe, które wypełnią większą część ekranu i będą wyglądać na większe. Wybierając zdjęcia, pamiętaj, aby pamiętać o nich osobę, która je ogląda.
3) Używaj gestów na tabletach i komórkach
Ludzie lubią używać gestów na ekranach dotykowych. Czują się bardziej wzmocnieni, gdy wydaje się, że przesuwają obraz, ponieważ doświadczenie jest bardziej wciągające. Próba dotknięcia maleńkich strzałek lub kropek nawigacyjnych na urządzeniu mobilnym jest zbyt uciążliwa. O wiele bardziej naturalne jest to, że możesz wziąć palec i przesunąć obraz w górę, w dół, w lewo lub w prawo.
4) Unikaj lightboxów: wyłącz je na urządzeniach mobilnych
Jeśli masz obrazy produktów, takie jak maszyny lub przedmioty, które powinny być oglądane bardziej szczegółowo (tkaniny, biżuteria, itp.), To lightbox z większymi obrazami ma sens. Nawet wtedy powinny być używane tylko na pulpicie. Po rozbiciu na rozmiary tabletów i telefonów komórkowych lightbox należy wyłączyć. Mogą powodować wiele problemów z doświadczeniem użytkownika. Jeśli coś się stanie, a lightbox nie będzie prawidłowo dopasowany, mogą nie mieć dostępu do przycisku wyjścia lub obrazy mogą być wyświetlane niepoprawnie.
5) Podczas korzystania z elementów nav, spraw, aby były dyskretne
Jeśli masz ruchomą galerię obrazów ze znaczną liczbą slajdów, nawigacja ma sens. Nie chcesz, aby użytkownicy czekali na cykliczne przeglądanie wszystkiego. Mogą z łatwością klikać na własnej prędkości, dostać się, dostać to, czego potrzebują i wyjść. Korzystając z tych elementów, upewnij się, że włożyłeś je w miejsca, które są na uboczu. Nie umieszczaj kropek nawigacyjnych nad tekstem lub innymi linkami. Unikaj też zbyt skomplikowanych kontroli. Zajmują one dużo miejsca, odwracają uwagę użytkowników od treści i tworzą zagracony wygląd. Mając kropki, które użytkownicy mogą kliknąć, aby przeglądać lub przeskakiwać do niektórych obrazów, oraz mieć strzałki do przodu i do tyłu, jest mnóstwo. Nie przesadzaj!
6) Nie łącz obrazów i filmów
Mieszanie różnych mediów jest zwykle w porządku, ale miksowanie filmów tam, gdzie nie są oczekiwane, może powodować problemy. Nie chcesz, aby użytkownik przypadkowo zainicjował wideo, które odtwarza dźwięk dla wszystkich. Oddziel filmy i obrazy, aby wiedzieli, czego się spodziewać. Nikt nie lubi tego typu niespodzianek.
7) Upewnij się, że obrazy nie przekraczają maksymalnej szerokości
Jest to ważne, ponieważ można uniknąć skalowania pikselowego obrazów, które są zbyt małe dla spacji. Obrazy powinny być wystarczająco duże, aby wypełnić 100% urządzenia mobilnego (w większości przypadków), ale witryny o rozmiarach pulpitu powinny ustawiać tylko maksymalną szerokość na 100%. Widziałem kilka przypadków, w których ktoś ma jeden z tych dużych 27-calowych wyświetlaczy, a kiedy przeciągają szerokość przeglądarki, obraz przeskakuje wraz z nią, mijając jej zamierzony rozmiar.
8) Skalowanie obrazu
Jeśli masz skalę obrazów, upewnij się, że skalują się, a nie w górę. Najlepiej ustawić dokładne wymiary dla swoich obrazów. Wiele razy, procent jest używany dla jednego wymiaru, podczas gdy drugi wymiar jest ustawiony na auto. Na przykład, jeśli chcesz, aby obraz obejmował 50% szerokości przeglądarki, możesz ustawić szerokość obrazu na 50%, a wysokość na auto .
9) Unikaj używania podpisów do zdjęć
Podpisy pod zdjęciem lub jakikolwiek inny tekst towarzyszący może powodować różnego rodzaju problemy dla Ciebie i Twoich użytkowników. Pierwszy problem polega na tym, że trudno jest dopasować tekst do urządzenia mobilnego. W przypadku smartfonów masz ograniczoną przestrzeń, ale próba dodania tekstu może sprawić, że całe doświadczenie stanie się zagracone i zapchane razem. Kolejną kwestią jest ograniczenie ilości tekstu, który można wykorzystać. Dodanie napisu lub dodatkowego tekstu dodaje zmienną reagującego tekstu do miksu. Musisz zastanowić się nad podziałami słów i tym, jak wiele linii tekstu będzie wyglądać razem z twoim obrazem. Jeśli tekst jest wykorzystywany jako nakładka, musisz również zwrócić uwagę na to, gdzie znajduje się na obrazie. Jasny tekst nad jasnym obszarem obrazu spowoduje, że tekst będzie nieczytelny. Kontrast jest kluczowy, a każdy obraz jest inny.
Wniosek
Najważniejsze, jeśli chodzi o aspekt projektowania stron internetowych, jest to, że musi działać dobrze i mieć na uwadze użytkownika. Jeśli nikt nie może korzystać z Twojej strony internetowej, nie wróci. Przestrzeganie tych prostych zaleceń dotyczących reaktywnych galerii obrazów sprawi, że użytkownicy nie będą mieli wspólnych problemów podczas przeglądania zdjęć.