Лучшие практики проектирования приложений

Оптимизация для вертикальной компоновки

Упростите дизайн своего приложения, используя вертикальные макеты, которые позволяют пользователям прокручивать страницу в одном направлении для перемещения по контенту.

Сделай это

Цель этого приложения — доставить пользователя из пункта А в пункт Б.

Не делай этого.

Используйте как вертикальную, так и горизонтальную прокрутку, так как это может запутать пользователя в приложении.

Показывать время

Отображайте время (наложение) вверху, поскольку это обеспечивает пользователю единообразное место для просмотра времени.

Сделай это

Отображайте время в верхней части наложения, поскольку это обеспечивает пользователю единообразное место для просмотра времени.

Не делай этого.

Например, если отображать время во временном диалоговом окне, накладке подтверждения или в окне выбора, пользователь, скорее всего, увидит экран подтверждения лишь на очень короткое время.

Доступные встроенные точки входа

Убедитесь, что все действия отображаются в строке, используя понятные иконки и метки для доступности. Это включает в себя точки входа в настройки и предпочтения.

Сделай это

По возможности используйте как значки, так и метки.

Не делай этого.

Полагайтесь исключительно на значки, чтобы побудить пользователя к действию.

Используйте метки для ориентации пользователей

В длинных диалоговых окнах помогите пользователю сориентироваться с помощью меток при прокрутке содержимого.

Сделай это

Используйте разрывы разделов, метки и другие подсказки для организации контента и помощи пользователям в ориентации при прокрутке длинных страниц со смешанным контентом.

Не делай этого.

Добавьте метку для диалогов, содержащих один тип контента.

Повысить уровень основных действий

Упростите пользователям выполнение действий в вашем приложении, переместив основные действия в верхнюю часть оверлея.

Сделай это

Поднимите недвусмысленные основные действия наверх.

Не делай этого.

Поместите основное действие на очень длинной странице в самом низу.

Показывать полосу прокрутки на прокручиваемых экранах

Используйте индикатор прокрутки только на прокручиваемых экранах, чтобы избежать неправильного ожидания взаимодействия. Аналогично, не забудьте добавить индикатор прокрутки на прокручиваемые экраны, чтобы указать, в какой точке экрана вы просматриваете.

Сделай это

Показывать индикатор прокрутки, если прокручивается все представление.

Не делай этого.

Показывать индикатор прокрутки в представлениях без прокрутки или не показывать полосу прокрутки в представлениях с прокруткой.

Адаптивный дизайн для больших размеров экрана

Убедитесь, что используемые вами компоненты заполняют доступную ширину и учитывают высоту в макетах без прокрутки.

Все компоненты Compose созданы адаптивными, но приветствуются любые настройки, позволяющие улучшить дизайн и добавить дополнительную ценность на больших дисплеях.

Сделай это

Убедитесь, что контент заполняет доступную ширину и высоту, а полноэкранные элементы (ProgressIndicators, TimeText и т. д.) адаптивно адаптируются к макетам без прокрутки.

Не делай этого.

Используйте компоненты с фиксированной шириной, которые не заполняют экран адаптивно или не подстраивают поведение контента под заполнение доступного пространства.

Используйте адаптивные (процентные) поля

Мы рекомендуем использовать процентные поля, чтобы размер полей адаптировался к растущей кривизне дисплея.

Сделай это

Используйте дополнительные процентные поля, чтобы гарантировать, что контент не будет обрезан сверху и снизу.

Не делай этого.

Компоненты не должны просто масштабироваться, чтобы заполнить доступное пространство без дополнительных отступов.