Poziom 2: responsywne i zoptymalizowane
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Aplikacje, które wykorzystują elastyczne układy i automatycznie dostosowują się do różnych rozmiarów ekranu, oferują użytkownikom dodatkową wartość i zapewniają bardziej produktywne i angażujące wrażenia.
Układy elastyczne dynamicznie formatują i pozycjonują elementy takie jak przyciski, pola tekstowe i okna, aby zapewnić optymalne wrażenia użytkownika. Automatycznie oferuj użytkownikom aplikacji dodatkową wartość na większych ekranach, korzystając z elastycznego projektu. Dzięki elastycznemu projektowaniu użytkownicy większych ekranów mogą zobaczyć więcej tekstu, wykonać więcej działań na ekranie lub korzystać z większych, bardziej dostępnych elementów, w które można kliknąć.
Wartość dodana dzięki projektowi elastycznemu
check_circle
Tak
- Używaj biblioteki komponentów M3 Compose, która ma wbudowane funkcje reagowania i dostosowywania się.
- Korzystaj z układów elastycznych, które automatycznie i płynnie dostosowują się do dostępnego miejsca na ekranach o różnych rozmiarach.
cancel
Nie
- rozciągać elementy interfejsu, w tym pola tekstowe, przyciski i okna, aby wypełnić dodatkowe miejsce;
- Zwiększ rozmiar czcionek, chyba że służą one głównie do celów graficznych.
Przykłady
Poniższe obrazy przedstawiają przykłady aplikacji, które są elastyczne i zoptymalizowane.
Kafelek z kartami z obrazami
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
