projekt rozdzielczości wyświetlacza Retina: porady i wskazówki dla projektantów interfejsu użytkownika

projekt Vandelay może otrzymać rekompensatę od firm, produktów i usług objętych naszą witryną. Aby uzyskać więcej informacji, zapoznaj się z naszą stroną ujawniania informacji.

wraz z pojawieniem się smartfonów hi-res i retina iMac staje się oczywiste, że projektanci mobilni web & muszą wziąć pod uwagę wyświetlacze retina w procesie projektowania. Więcej urządzeń wychodzi z półki z rozdzielczością ekranu retina, która grupuje wiele pikseli w tę samą fizyczną przestrzeń ekranu.

oznacza to, że zawartość będzie wyglądać ostrzej, jeśli zostanie odpowiednio zaprojektowana. W jaki sposób projektant interfejsu użytkownika powinien pracować nad obsługą ekranów siatkówki? Jaka obecna technologia jest dostępna i jaki jest najlepszy sposób na obsługę największej bazy użytkowników?

chciałbym omówić najbardziej niezawodne metody obsługi ekranów retina/hi-dpi i tworzenia interfejsów, które po prostu działają. Jeśli zastosujesz się do tego przewodnika, na pewno odejdziesz z odpowiednimi wskazówkami i praktycznymi rozwiązaniami dotyczącymi problemu wyświetlacza retina.

13" i rozdzielczości MacBooka 15"

Obsługa urządzeń Retina

pierwszym krokiem jest sprawdzenie wyświetlania ekranu w oparciu o rozdzielczość hi-DPI. Teraz, gdy niektóre urządzenia mają rozmiary @3x, przed wyświetlaniem obrazów należy sprawdzić kilka rozdzielczości ekranu. Zawsze możesz być bezpieczny z obrazami @3x, ale są one również znacznie większe i wymagają większej przepustowości do pobrania.

to sprawdzenie można wykonać za pomocą srcset, ale istnieje wiele różnych metod wykorzystujących również JavaScript. Sprawdź ten samouczek, aby uzyskać więcej informacji.

jedną z fajnych sztuczek dla ikon gotowych do siatkówki jest użycie darmowego ikonofonu zamiast obrazów bitmapowych. Font Awesome jest bardzo popularnym wyborem, który jest całkowicie darmowy, open source i zapewnia bibliotekę ikon do wyboru.

font awesome icons Strona główna

innym rozwiązaniem jest użycie obrazów SVG zamiast bitmap. Te pliki SVG są w pełni skalowalnymi wektorami, które powoli zyskują pełną obsługę przeglądarki.

caniuse svg check

jedyną trudnością jest zaprojektowanie SVG od podstaw i nauczenie się ich prawidłowego eksportowania, co może być bardziej skomplikowane niż tylko używanie plików PNG lub JPEG. Plus SVG nie jest przydatny do szczegółowych obrazów, takich jak fotografie, ponieważ jest to tak naprawdę Typ pliku wektorowego.

ale pliki SVG mają więcej miejsca na niestandardową animację, która wyświetla ostre obrazy we wszystkich rozdzielczościach.

celem jest decydowanie o typach plików i sprawdzanie przeglądarek indywidualnie dla każdego przypadku. Niektóre obrazy są lepsze jako pliki JPG, a niektóre strony internetowe są lepsze z testami CSS vs js retina. Osobiście wolę CSS, ale polecam spróbować obu, aby zobaczyć, co wolisz.

CSS Background Images

najprostszym sposobem obsługi niestandardowych tła jest użycie obrazów tła retina przy użyciu właściwości background size.

jest to często najszybszy sposób na sprawdzenie obrazów siatkówki, ponieważ mogą one działać na wszystkich urządzeniach, nawet na urządzeniach innych niż siatkówka. Nie zaszkodzi mieć zbyt zoptymalizowany obraz w CSS, jeśli nie masz nic przeciwko wydłużonym czasom ładowania.

alternatywną metodą byłoby Ładowanie różnych plików CSS na podstawie sprawdzeń JavaScript lub sprawdzeń serwera zaplecza.

ale chyba najlepszym sposobem na obsługę CSS jest zapytanie CSS retina media. Te zapytania sprawdzają gęstość pikseli i ładują różne obrazy tła dla tych urządzeń (również dostosowując rozmiar tła).

CSS jest na ogół najprostszym sposobem obsługi obrazów, ale nie może być używany do obrazów w postach. Są one znacznie trudniejsze i powinny być przesłane w najwyższej możliwej rozdzielczości lub zaktualizowane za pomocą JavaScript.

jeśli nie interesują Cię czasy ładowania, po prostu wybierz największą rozdzielczość dla wszystkich obrazów. Jeśli nie, będziesz chciał ręcznie przesłać obrazy @2x i @ 3x za pomocą darmowej biblioteki JavaScript, takiej jak Retina.js.

JavaScript sprawdza

jeśli chcesz mieć największą kontrolę nad treścią rozdzielczości siatkówki, musisz użyć JavaScript. Większość odwiedzających uruchamia kod JS i jest to najprostszy sposób na wykrycie rozdzielczości za pomocą wbudowanych metod JavaScript.

znajdziesz wiele darmowych samouczków do wykrywania wyświetlaczy retina JavaScript, ale to tylko połowa sukcesu. Po zapoznaniu się z rozdzielczością ekranu będziesz musiał odpowiednio zaktualizować obrazy.

polecam użycie gotowego rozwiązania, aby zaoszczędzić czas i bóle głowy podczas procesu.

deweloperzy nigdy nie chcą odkrywać koła na nowo. Więc jeśli ktoś już rozwiązał ten problem, dlaczego warto zaczynać od zera?

jedynym powodem, aby wdrożyć własne rozwiązanie, jest potrzeba niestandardowej funkcjonalności. W takim przypadku sprawdź poniższe linki, aby zobaczyć, jak możesz zaimplementować niestandardowe sprawdzenie js retina.

w przeciwnym razie przewijaj i pobierz jedną z darmowych bibliotek JS, które wymieniłem w następnej sekcji.

  • 5 sposoby obsługi wyświetlaczy Retina o wysokiej gęstości
  • łatwe obrazy 2x retina z jQuery
  • serwuj grafikę Retina na swojej stronie internetowej

narzędzia open Source Retina

istnieje wiele niestandardowych narzędzi retina do wykrywania i zarządzania obrazami siatkówki. Nie zawsze są one najłatwiejsze do wdrożenia, ale mogą sprawić, że publiczność będzie o wiele szczęśliwsza w dłuższej perspektywie.

więc co wybrać, aby zacząć? Naprawdę nie ma złej odpowiedzi.

chciałbym dostarczyć niektóre z najpopularniejszych narzędzi i dać ci szansę na wybranie tego, co działa najlepiej dla Twojej witryny.

Siatkówka.js

retinajs open source javascript

Siatkówka.biblioteka js to darmowa baza kodu JavaScript o otwartym kodzie źródłowym, która automatycznie wykrywa rozdzielczości siatkówki i rozmiary ekranu. Skrypt sprawdza również, czy istnieje obraz o wysokiej rozdzielczości zgodny z wytycznymi projektowymi apple, a jeśli tak, przełączy się na wyświetlanie wersji hi-res.

konwencje nazewnictwa następują po przyrostku @2x przed typem pliku. Więc jeśli masz mój obrazek.jpg będziesz też chciał mieć [email protected] w tym samym folderze.

jest to jeden z najprostszych skryptów, ponieważ tak naprawdę jest to po prostu plug and play. Ale wymaga to również pewnej wiedzy na temat treści siatkówki, aby działała idealnie. Jeśli dopiero zaczynasz, jest to naprawdę świetny skrypt i nie możesz pomylić się z domyślną funkcjonalnością.

jQuery Retina

wtyczka jQuery JS retina

inną opcją jest jQuery Retina zasilany przez Bibliotekę jQuery. Działa to nieco inaczej, ponieważ działa na atrybutach danych HTML5.

po prostu przekazujesz wartość adresu URL obrazu do atrybutu Data-retina w każdym znaczniku obrazu, który wymaga alternatywnego obrazu retina. Wymaga to bardziej twardego kodowania, ale jest to również najłatwiejsze do przewinięcia za pomocą niestandardowych opcji. Strona GitHub zawiera więcej informacji z podstawowymi krokami instalacji.

WP Retina 2x

wp WordPress retina @ 2x plugin

jeśli jesteś użytkownikiem WordPress, WP Retina 2x może być świetną alternatywą dla dodania wtyczki JS z GitHub. Wtyczka WP Retina działa bezpośrednio z WordPress, aby sprawdzić obrazy o rozmiarze siatkówki i zastępuje je automatycznie.

to kolejne rozwiązanie typu plug-and-play, w którym po prostu aktywujesz wtyczkę i pozwalasz jej działać. Super łatwy w użyciu i zdecydowanie czyste rozwiązanie dla nietechnicznych użytkowników WP.

js

densejs plugin jquery

to, co najbardziej lubię w gęstych.biblioteka js obsługuje różne współczynniki urządzeń. Nie wszystkie wyświetlacze retina są po prostu 2x większe. Inne proporcje mogą obejmować 1,5 x lub 3x.

ta wtyczka automatycznie wykrywa, która gęstość ekranu jest używana i odpowiednio dostosowuje obrazy. Istnieje wiele opcji, więc dostosowanie nie stanowi problemu. Sprawdź GitHub, aby rozpocząć i dokumenty online, aby uzyskać więcej informacji.

Jeśli szukasz więcej zasobów wyświetlacza retina, polecam również te wtyczki.

  • CSS Media Queries for iPads & iPhone
  • Adaptive Images in HTML
  • Swipebox jQuery Lightbox
  • Grails Retina Images Plugin
  • Choosing a Responsive Image Solution

materiał oferuje więcej niż wystarczająco, aby pomóc w obsłudze obrazów i multimediów na wyświetlaczach Retina. Ponieważ CSS będzie automatycznie skalować dla wszystkich rozdzielczości, naprawdę nie musisz się martwić o takie rzeczy jak marginesy lub szerokości strony.

ale media na stronie, takie jak ikony i zdjęcia, muszą być specjalnie zaprojektowane dla urządzeń retina.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.