Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Макет определяет визуальную структуру взаимодействия пользователя с вашим приложением, например, в виде активности. Android предоставляет ряд библиотек, канонических отправных точек и методов для отображения и позиционирования контента.
Учитывайте безопасные зоны устройства, включая такие элементы пользовательского интерфейса, как вырезы на экране, вставки от края до края, боковые дисплеи, программные клавиатуры и системные панели. Обеспечьте гибкую раскладку для взаимодействия пользователей с клавиатурой. Внимание: будьте осторожны, закрывая контент клавиатурой.
Эргономика взаимодействия
Разместите важные элементы взаимодействия, такие как основная навигация, в доступной области экрана. Плавающие кнопки действий (FAB) обеспечивают заметную и легкодоступную точку взаимодействия.
Группы сдерживания
Используйте ограничения для группировки связанного контента, чтобы направлять пользователя по контенту и действиям. Карточки, использующие явное ограничение, группируют контент по связанным действиям.
Выравнивание
Обеспечьте единообразное выравнивание между схожим контентом и элементами пользовательского интерфейса.
check_circle
Делать
Установите одинаковые расстояния между одинаковыми элементами.
cancel
Не
Нарушайте читаемость из-за неравномерного расположения одинаковых элементов, из-за чего дизайн может выглядеть беспорядочным.
Ориентация макета
Не придерживайтесь портретной ориентации или идеализированного макета: рассмотрите различные соотношения сторон, классы размеров и разрешения, с которыми могут столкнуться пользователи.
Основные взаимодействия
Не перегружайте пользователя слишком большим количеством действий за один просмотр.
Характеристики макета нот
При создании собственных макетов укажите, как контент должен располагаться в макете, используя выравнивание, ограничения и гравитацию. Укажите, как изображения должны реагировать на свой контейнер для корректного отображения.
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-08-28 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-08-28 UTC."],[],[],null,["A layout defines the visual structure for a user to interface with your app,\nsuch as in an activity. Android provides a range of libraries, canonical\nstarting points, and techniques to display and position content.\n\nGet Started\n\nStart designing Android layouts by learning [app anatomy](/develop/ui/compose/layouts/adaptive/app-anatomy) then how to\n[structure your app's content](/develop/ui/compose/layouts/adaptive/content-structure).\n\nTakeaways \n**Device safe areas**\n\n\nHonor device safe areas, which includes parts of the UI such as display\ncutouts, edge-to-edge insets, edge displays, software keyboards, and system\nbars. Provide a flexible layout for users to\ninteract with the keyboard.\nWarning: Be careful when covering content with the keyboard.\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/images/design/ui/mobile/layout-basics-video-1.mp4) and watch it with a video player. \n**Interaction ergonomics**\n\n\nKeep essential interactions, like primary navigation, in a reachable screen\narea. Floating action buttons (FABs) provide a\nprominent and reachable interaction point \n**Containment groups**\n\n\nUse containment to group related content to guide the user through content and\nactions. Cards using explicit containment to group content with related actions.\n\n**Alignment**\n\nProvide consistent alignment between similar content and UI elements.\n\n\u003cbr /\u003e\n\ncheck_circle\n\nDo \nEstablish consistent spacing between like elements. \ncancel\n\nDon't \nDisrupt readability by inconsistently spacing like elements, which can make designs appear haphazard. \n**Layout orientation**\n\n\nDon't stick to portrait or an idealized layout: Consider different aspect\nratios, size classes, and resolutions that users may encounter.\n\n\n**Essential interactions**\n\n\nDon't overwhelm your user with too many actions per view. \n**Notate layout specs**\n\n\nWhen building custom layouts, notate how content should sit within the layout\nusing alignment, constraints, or gravity terms. Include how images should\nrespond to their container to display properly.\n\n\u003cbr /\u003e"]]
