Sprawdzone metody projektowania aplikacji

Optymalizacja pod kątem układów pionowych

Uprość projekt aplikacji, używając układów pionowych, które umożliwiają użytkownikom przewijanie treści w jednym kierunku.

Zrób to

Celem tej aplikacji jest przeprowadzenie użytkownika z punktu A do punktu B.

Nie rób tego

Używaj przewijania w pionie i w poziomie, ponieważ może to utrudnić korzystanie z aplikacji.

Pokaż czas

Wyświetlaj czas (nakładkę) u góry, ponieważ jest to spójne miejsce, w którym użytkownik może sprawdzić godzinę.

Zrób to

Wyświetlaj czas u góry nakładki, ponieważ jest to spójne miejsce, w którym użytkownik może sprawdzić godzinę.

Nie rób tego

Wyświetlanie czasu w tymczasowym oknie dialogowym, potwierdzeniu nakładkowym lub selektorze, ponieważ użytkownik prawdopodobnie zobaczy ekran potwierdzenia tylko przez chwilę.

Dostępne punkty wejścia w linii tekstu

Upewnij się, że wszystkie działania są wyświetlane w ramach, z użyciem przejrzystej ikonografii i etykietek ułatwiających dostępność. Dotyczy to punktów wejścia do ustawień i preferencji.

Zrób to

W miarę możliwości używaj zarówno ikon, jak i etykiet.

Nie rób tego

Nie używaj tylko ikon, aby zachęcić użytkownika do podjęcia działania.

Używanie etykiet do wskazywania użytkownikom kierunku

W przypadku dłuższych dialogów ułatwij użytkownikowi nawigację za pomocą etykiet podczas przewijania treści.

Zrób to

Używaj podziałów sekcji, etykiet i innych wskazówek, aby uporządkować treści i ułatwić użytkownikom nawigację podczas przewijania dłuższych widoków z różnorodnymi treściami.

Nie rób tego

Dodaj etykietę dla dialogów zawierających jeden typ treści.

Podnoszenie działań podstawowych

Ułatw użytkownikom podejmowanie działań w aplikacji, przeciągając główne działania na górę nakładki.

Zrób to

Przesuń na wierzchołek listy jednoznaczne działania główne.

Nie rób tego

Umieszczaj główne działanie na bardzo długiej stronie u dołu.

Pokaż pasek przewijania na ekranach z przewijaniem

Aby uniknąć nieprawidłowego działania interakcji, używaj wskaźnika przewijania tylko na ekranach z przewijaniem. Podobnie pamiętaj, aby dodać wskaźnik przewijania na ekranach z przewijaniem, aby wskazać, na którym miejscu ekranu znajduje się użytkownik.

Zrób to

wyświetlać wskaźnik przewijania, jeśli przewijana jest cała strona.

Nie rób tego

Wyświetlaj wskaźnik przewijania w widokach bez przewijania lub nie wyświetlaj paska przewijania w widokach z przewijaniem.

Projektowanie stron z uwzględnieniem elastycznych układów na większe ekrany

Upewnij się, że używane komponenty wypełniają dostępną szerokość, i weź pod uwagę wysokość w przypadku układów bez przewijania.

Wszystkie komponenty Compose są tworzone w wersji elastycznej, ale zachęcamy do ich dostosowywania, aby wzbogacać projekt i dodawać wartość na większych ekranach.

Zrób to

Upewnij się, że zawartość wypełnia dostępną szerokość i wysokość, a elementy pełnego ekranu (wskaźniki postępu, tekst czasu itp.) dostosowują się do układów bez przewijania.

Nie rób tego

Używaj komponentów o stałyej szerokości, które nie wypełniają ekranu w sposób elastyczny, ani nie dostosowują zachowania treści do dostępnej przestrzeni.

Używanie elastycznych (procentowych) marginesów

Zalecamy używanie marginesu procentowego, aby rozmiar marginesów dostosowywał się do rosnącej krzywej wyświetlacza.

Zrób to

Użyj dodatkowych marginesów procentowych, aby upewnić się, że treści nie zostaną przycięte u góry i u dołu.

Nie rób tego

Elementy nie powinny po prostu wypełniać dostępnej przestrzeni bez dodatkowych marginesów.