Projekt wyświetlany na małym ekranie nie powinien wyglądać jak pomniejszona wersja układu dużego ekranu. Podobnie projekt wyświetlany na dużym ekranie nie powinien wyglądać jak powiększona wersja układu małego ekranu. Zamiast tego projekt musi być wystarczająco elastyczny, aby dopasowywał się do każdego rozmiaru ekranu. Udane projektowanie responsywne pozwala w pełni wykorzystać wszystkie formaty.
Oznacza to, że niektóre elementy interfejsu mogą wyglądać bardzo różnie w zależności od kontekstu. Różne rozmiary ekranów w przypadku różnych rozmiarów ekranu wymagają zastosowania zupełnie różnych stylów CSS w tej samej bazie kodu HTML. Może to być spore wyzwanie projektowe!
Oto kilka typowych problemów, z którymi możesz się spotkać.
Nawigacja
Wyświetlanie listy linków nawigacyjnych jest całkiem proste na dużym ekranie. Jest wystarczająco dużo miejsca na te linki.
Na małym ekranie ilość miejsca jest na wagę złota. Podczas projektowania aplikacji łatwo ukryć nawigację za pomocą przycisku. Problem z tym rozwiązaniem polega na tym, że użytkownik musi wykonać 2 czynności, aby dotrzeć do dowolnego miejsca: otworzyć menu, a potem wybrać odpowiednią opcję. Dopóki menu nie zostanie otwarte, użytkownik zastanawia się, „Gdzie mogę iść?”
Spróbuj znaleźć strategię, która pozwoli uniknąć ukrycia nawigacji. Jeśli masz stosunkowo małą liczbę elementów, możesz tak dostosować nawigację, aby wyglądała dobrze na małych ekranach.
Jeśli nawigacja zawiera dużo linków, wzór nie będzie skalowany. Jeśli linki nakładają się na 2 lub 3 wiersze na małym ekranie, elementy nawigacyjne będą przepełnione.
Jednym z możliwych rozwiązań jest pozostawienie linków w jednym wierszu i obcięcie listy wzdłuż krawędzi ekranu. Użytkownicy mogą przesuwać palcem poziomo, aby odkrywać linki, które nie są od razu widoczne. To jest wzorzec przepełnienia.
Zaletą tej metody jest to, że można ją dopasować do dowolnej szerokości urządzenia i dowolnej liczby linków. Wadą jest jednak to, że użytkownicy mogą przegapić linki, które nie są początkowo widoczne. Jeśli stosujesz tę metodę do głównej nawigacji, upewnij się, że kilka pierwszych linków jest najważniejszych i widać, że na liście znajduje się więcej pozycji. W poprzednim przykładzie dla tego wskaźnika użyto gradientu.
W ostateczności możesz ustawić widok nawigacji jako domyślny ukrycie i udostępnić użytkownikom mechanizm przełączania treści. Jest to tzw. stopniowe ujawnianie informacji.
Przycisk włączający wyświetlanie elementów nawigacyjnych musi być oznaczony etykietą. Nie traktuj ikony tak, aby była zrozumiała.
Ikona bez etykiety kojarzy się z tajemniczym mięsem – użytkownicy nie wiedzą, co jest w środku, dopóki go nie klikną. Podaj etykietę tekstową, aby użytkownicy wiedzieli, co będzie zawierać przycisk.
Karuzele
Zasady dotyczące nawigacji dotyczą również innych treści – staraj się niczego nie ukrywać. Karuzela to typowa metoda ukrywania treści. Może i wygląda to dobrze, ale istnieje duża szansa, że użytkownicy nigdy nie odkryją ukrytej treści. Karuzele lepiej radzą sobie z problemami organizacyjnymi związanymi z wyświetlaniem treści na stronie głównej niż z wyświetlaniem treści użytkownikom.
Jednak gdy ilość miejsca jest na wagę złota, karuzele mogą zapobiegać zbyt długiemu i zaśmiecaniu się strony. Możesz zastosować podejście hybrydowe: wyświetlać treści w karuzeli na małych ekranach, a na większych ekranach wyświetlać te same treści w siatce.
W przypadku wąskich ekranów elementy w rzędzie należy wyświetlać za pomocą Flexbox. Wiersz z elementami będzie się wykraczał poza krawędź ekranu. Aby umożliwić przesuwanie w poziomie, użyj elementu overflow-x: auto.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Właściwości scroll-snap umożliwiają przesuwanie elementów w wygodny sposób. Dzięki scroll-snap-type: inline mandatory elementy wskakują na swoje miejsce.
Gdy ekran jest dostatecznie duży – w tym przypadku szerszy niż 50em – przełącz się na siatkę i wyświetl elementy w wierszach oraz kolumnach, bez ich ukrywania.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Element w widoku karuzeli nie zajmuje pełnej szerokości. Gdyby tak się stało, nie byłoby widać, że poza krawędziami widocznego obszaru jest dostępnych więcej treści.
Karuzele stanowią kolejny przykład stosowanego w praktyce wzorca przepełnienia. Jeśli masz wiele elementów, które użytkownicy mogą przeglądać, możesz korzystać z funkcji nadmiarowości nawet na dużych ekranach, w tym na telewizorach. Funkcja przewijania multimediów korzysta z kilku karuzel, które służą do zarządzania znaczną liczbą opcji.
Właściwości scroll-snap gwarantują, że interakcja będzie przebiegać bezproblemowo. Zwróć też uwagę, że do obrazów w karuzeli zastosowano element loading="lazy". W tym przypadku obrazy nie znajdują się w części strony widocznej po przewinięciu, ale wykraczają poza krawędź, ale obowiązuje ta sama zasada: jeśli użytkownik nigdy nie przesunie palcem od tego elementu, obraz nie zostanie pobrany, co zmniejszy wykorzystanie przepustowości.
Dzięki dodaniu JavaScriptu możesz dodać do karuzeli interaktywne elementy sterujące. Możesz nawet ustawić automatyczne przełączanie się między elementami. Zastanów się jednak dobrze, zanim to zrobisz. Autoodtwarzanie może się sprawdzić, jeśli karuzela będzie jedyną zawartością strony, ale karuzela, która tego właśnie odtwarza, jest niezwykle irytująca, gdy ktoś próbuje wejść w interakcję z innymi treściami (np. czytając tekst). Dowiedz się więcej o sprawdzonych metodach dotyczących karuzeli.
Tabele danych
Element table doskonale nadaje się do tworzenia struktury danych w tabeli. wiersze i kolumny z powiązanymi informacjami. Jednak zbyt duża tabela może zepsuć układ małego ekranu.
Do tabel możesz zastosować wzorzec przepełnienia. W tym przykładzie tabela jest umieszczona w elemencie div z klasą table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Wytyczne
Wzorzec przepełnienia to dobry kompromis w przypadku małych ekranów, ale upewnij się, że wyraźnie widać, że treści, które pojawiają się poza ekranem, są osiągalne. Rozważ umieszczenie cienia lub gradientu na krawędzi w miejscu, w którym treść jest przycięta.
Stopniowe ujawnianie informacji to przydatny sposób na oszczędzanie miejsca, ale zachowaj ostrożność, gdy używasz go w przypadku bardzo ważnych treści. Ta opcja lepiej sprawdza się w przypadku działań dodatkowych. Upewnij się, że element interfejsu, który powoduje wyświetlenie komunikatu, jest wyraźnie oznaczony. Nie polegaj wyłącznie na ikonie.
Zaprojektuj najpierw na mniejsze ekrany. Dostosowanie projektów mniejszych ekranów do większych ekranów jest łatwiejsze niż na odwrót. Jeśli projektujesz najpierw pod kątem dużego ekranu, istnieje ryzyko, że projekt na małym ekranie nie będzie już gotowy.
Więcej wzorców układów i elementów interfejsu znajdziesz w sekcji Wzorce web.dev.
Gdy dostosowujesz elementy interfejsu do różnych rozmiarów ekranu, zapytania o media są bardzo przydatne do ustalania wymiarów urządzenia. Funkcje multimedialne, takie jak min-width i min-height, to jednak dopiero początek. Następnie odkryjesz wiele innych funkcji multimedialnych.