Уровень 2: Адаптивный и оптимизированный
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Приложения, использующие адаптивные макеты и автоматически адаптирующиеся к разным размерам экрана, предлагают пользователям дополнительную ценность и обеспечивают более продуктивный и увлекательный пользовательский опыт.
Адаптивные макеты динамически форматируют и позиционируют элементы, такие как кнопки, текстовые поля и диалоговые окна, для оптимального пользовательского опыта. Автоматически предлагайте пользователям вашего приложения дополнительные преимущества на больших экранах, используя методы адаптивного дизайна. Будь то больше текста, видимого с первого взгляда, больше действий на экране или более крупные и доступные области нажатия, адаптивные методы обеспечивают улучшенный опыт для пользователей больших экранов.
Добавьте ценность за счет адаптивного дизайна
check_circle
Делать
- Используйте библиотеку компонентов M3 Compose, которая имеет встроенное адаптивное поведение.
- Используйте адаптивные макеты, которые автоматически и плавно подстраиваются под все доступное пространство на экранах разных размеров.
cancel
Не
- Растягивайте элементы пользовательского интерфейса, включая текстовые поля, кнопки, диалоговые окна, чтобы заполнить дополнительное пространство.
- Увеличьте размеры шрифтов, если только они не предназначены в первую очередь для графических целей.
Примеры
На следующих изображениях показаны примеры адаптивных и оптимизированных приложений.
Плитка с изображениями карточек
Список карточек с изображениями
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-07-29 UTC.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2025-07-29 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"]]
