Nieprzewijane układy aplikacji

Widoki bez przewijania skupiają się na informacjach, które można szybko sprawdzić, i oferują użytkownikom wartość przy niewielkiej lub zerowej interakcji. Dlatego trudno jest w tych układach wdrożyć zachowania dostosowujące się do rozmiaru ekranu.

Wstępnie ustawione komponenty układu bez przewijania

Dialog

Okno to tymczasowa nakładka zajmująca cały ekran. Umożliwia użytkownikom wykonanie pojedynczej czynności.

Weź pod uwagę te informacje:

  • Okna dialogowe pomagają skupić uwagę na tym, czy ich zawartość jest odpowiednia.
  • Okna dialogowe powinny bezpośrednio przekazywać informacje i być przeznaczone do wykonywania zadań.
  • Okna dialogowe powinny pojawiać się w odpowiedzi na zadanie lub działanie użytkownika i zawierać odpowiednie lub kontekstowe informacje.

Nakładka potwierdzenia

Nakładka potwierdzenia wyświetla użytkownikowi komunikat z potwierdzeniem przez krótki czas. Użyj tego komponentu, aby przyciągnąć uwagę użytkownika po wykonaniu działania.

Otwórz na telefonie

Nakładka „Otwórz na telefonie” pojawia się, gdy użytkownik zdecyduje się kontynuować swoją ścieżkę na telefonie. Nakładka zawiera wskaźnik postępu i informuje użytkownika, kiedy ma sprawdzić telefon.

Steper

Elementy sterujące krokowe zapewniają pełnoekranowe sterowanie, które umożliwia użytkownikom wybór z zakresu wartości. Mogą sterować interakcją za pomocą przycisków lub pokrętła, a konkretny poziom jest wyświetlany za pomocą zakrzywionego wskaźnika poziomu.

Wybór godziny

Selektory umożliwiają użytkownikom wybór spośród ograniczonej liczby elementów w sekcjach z możliwością przewijania. Selektor czasu ma maksymalnie 3 kolumny, w zależności od tego, czy dostępne są sekundy oraz czy zegar jest 12- czy 24-godzinny. Użytkownicy wchodzą w interakcję z każdą kolumną po kolei, dokonując wyboru przez pozostawienie liczby w fokusie przed kontynuowaniem.

Selektor daty

Selektory umożliwiają użytkownikom wybór spośród ograniczonej liczby elementów w sekcjach z możliwością przewijania. Selektor dat ma maksymalnie 3 kolumny, których kolejność (data, godzina i rok) może się zmieniać w zależności od przypadku użycia. Selektory daty wymagają dłuższych ciągów treści, więc jednocześnie widoczna jest tylko jedna kolumna, co daje wskazówkę, co znajduje się po lewej lub prawej stronie. Użytkownicy wchodzą w interakcję z każdą kolumną po kolei, dokonując wyboru przez pozostawienie numeru w fokusie przed kontynuowaniem.

Przykłady niestandardowych układów bez przewijania

Ekrany aplikacji bez możliwości przewijania nie są ograniczone do określonych komponentów. Możesz łączyć ze sobą różne elementy, aby utworzyć odpowiedni układ.

Pamiętaj o ograniczonej przestrzeni na ekranie bez możliwości przewijania i używaj elastycznych (procentowych) marginesów i wypełnień, aby wykorzystać dostępną przestrzeń ekranu. Możesz też rozważyć zastosowanie punktu przerwania przy 225 dp, aby wprowadzić dodatkowe treści lub sprawić, że istniejące treści będą bardziej czytelne na większych ekranach.

Mapy

Nakładka alarmowa

Alert o zagrożeniu

Elastyczne i adaptacyjne działanie

Wszystkie komponenty w bibliotece Compose automatycznie dostosowują się do większego rozmiaru ekranu, zwiększając szerokość i wysokość. W przypadku tych widoków korzystanie z punktów przerwania może zapewnić wszystkim użytkownikom szczególnie bogate i wartościowe wrażenia.

W przypadku wielu przycisków, kart i marginesów interfejsu rozciągaj i wypełniaj przestrzeń na różnych ekranach, aby wykorzystać dostępne miejsce w interfejsie i zapewnić dobrze wyważony układ.

Skorzystaj z tej listy kontrolnej, aby sprawdzić, czy parametry elastyczne są prawidłowo zdefiniowane:

  • Twórz elastyczne układy, które będą dobrze wyglądać na ekranach o różnych rozmiarach.
  • Zastosuj zalecane marginesy u góry, u dołu i po bokach.
  • Określ marginesy w procentach w miejscach, w których treść może zostać przycięta.
  • Korzystaj z ograniczeń układu, aby elementy jak najlepiej wykorzystywały przestrzeń na ekranie i zachowywały równowagę na urządzeniach o różnych rozmiarach.
  • Dostosuj się do tekstu czasu, jeśli jest używany, ale nie zasłaniaj górnej sekcji strony.
  • Aby wykorzystać więcej ograniczonej przestrzeni, możesz użyć przycisków przylegających do krawędzi.
  • Rozważ zastosowanie punktu przerwania przy 225 dp, aby wprowadzić dodatkowe treści lub sprawić, że istniejące treści będą bardziej czytelne na większych ekranach.

Wiele ścieżek na stronach bez przewijania z użyciem podziału na strony

Jeśli aplikacja wymaga więcej treści, ale ma zachować układ bez przewijania, rozważ układ wielostronicowy z paginacją pionową lub poziomą.