Google is committed to advancing racial equity for Black communities. See how.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

Рекомендации по созданию настроек Android

В этом документе изложены принципы и рекомендации для всех, кто разрабатывает настройки платформы Android, основные настройки GMS (настройки Google) или любых разработчиков, разрабатывающих настройки для своего приложения Android.

Принципы дизайна

Обеспечьте хороший обзор

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

Рисунок 1. Настройки и их текущие значения представлены на экране верхнего уровня.

Организуйте предметы интуитивно

Поместите часто используемые настройки вверху экрана. Ограничьте количество настроек на одном экране. Отображение более 10-15 элементов может быть ошеломляющим. Создавайте интуитивно понятные меню, переместив некоторые настройки на отдельный экран.

Рисунок 2. Общие настройки находятся в верхней части экрана.

Упростите поиск настроек

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

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

Рис. 3 и 4. «Звук уведомления по умолчанию» отображается как на экране «Уведомление», так и на экране «Звук».

Используйте четкое название и статус

Сделайте названия ваших настроек краткими и содержательными. Избегайте использования расплывчатых названий, таких как «Общие настройки». Под заголовком отобразите состояние, чтобы выделить значение параметра. Покажите конкретные детали вместо того, чтобы просто описывать заголовок.

Заголовки должны:

  • Поместите самый важный текст вашего ярлыка первым.
  • Перефразируйте отрицательные слова, такие как «не делайте» или «никогда», на нейтральные термины, например «блокировать».
  • Используйте обезличенные ярлыки, такие как «Уведомления» вместо «Уведомить меня». Исключение: если обращение к пользователю необходимо для понимания настройки, используйте второе лицо («вы»), а не первое лицо («я»).

В заголовках следует избегать:

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

Типы страниц

Список настроек

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

Если в одной категории много настроек, их можно сгруппировать. Подробнее см. Группировка и разделители .

Рисунок 5. Пример списка настроек

Посмотреть список

Представление списка используется для отображения списка таких элементов, как приложения, учетные записи, устройства и т. Д. На экран можно добавить элементы управления для фильтрации или сортировки.

Рисунок 6. Пример представления списка

Экран сущности

Экран объекта используется для представления настроек отдельного элемента, такого как приложение, учетная запись, устройство, сеть Wi-Fi и т. Д.

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

Рисунок 7. Пример экрана объекта, используемого в информации о приложении

Рисунок 8. Пример экрана объекта, используемого в хранилище.

Мастер настройки

Основной параметр лучше всего использовать, когда можно включить или выключить целую функцию, например Wi-Fi или Bluetooth. Используя переключатель в верхней части экрана, пользователь может легко управлять этой функцией. Использование основной настройки для отключения функции отключает все другие связанные настройки.

Если для функции требуется более длинное текстовое описание, можно использовать основные настройки, поскольку этот тип экрана позволяет использовать более длинный текст нижнего колонтитула.

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

Рисунок 9. Пример основных настроек, используемых на экране уведомлений приложения; отключение главного переключателя приведет к отключению всей функции этого приложения

Рисунок 10. Пример основной настройки, используемой на экране уведомлений приложения с выключенным основным переключателем.

Экран выбора радиокнопки

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

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

Рисунок 11. Радиокнопки нельзя использовать в списке настроек.

Рисунок 12. Вот как правильно использовать переключатели в настройках

Составные части

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

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

Рисунок 13. Панель инструментов с действиями поиска и справки.

Для панелей инструментов с одним действием : показать действие перед поиском.

Рисунок 14. Панель инструментов с одним действием перед поиском и действиями справки

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

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

Рисунок 15. Панель инструментов с дополнительным меню для действий

Заголовок объекта

Заголовок объекта может отображать только заголовок или заголовок с подтекстом (для подтекста допускается несколько строк). Действие ниже не является обязательным. У вас может быть максимум два действия.

Рисунок 16. Заголовок объекта

Значок и заголовок (Приложение1) будут прокручиваться под заголовком (Информация о приложении).

Рисунок 17. Заголовок информации о приложении здесь является частью панели инструментов, а остальная часть экрана прокручивается под ним.

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

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

Примеры:

Рисунок 18. Ссылка в меню со значком, заголовком и подтекстом

Рисунок 19. Ссылка в меню с заголовком и подтекстом

Рисунок 20. Ссылка в меню только с заголовком

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

Другие цели касания должны использовать цвет темы.

Рисунок 21. Пример целевого меню в два касания.

Ссылка в меню со значком, заголовком, подтекстом и значком статистики / номера / предупреждения

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

Обычно числовые значения представлены справа, чтобы пользователи могли легко их просмотреть и сравнить.

Рисунок 22. Пример меню со значком, заголовком, статистикой и графиком

Группировка и разделители

Если на экране много настроек, их можно сгруппировать и разделить разделителем. В отличие от старых версий Android, разделители теперь используются для кластеризации настроек в группе, а не для разделения отдельных настроек.

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

Рисунок 23. Настройки сгруппированы с разделителями

Переключатель

Переключение с помощью значка, заголовка и подтекста

Рисунок 24. Переключатель со значком, заголовком и подтекстом

Переключиться с заголовком и подтекстом

Рисунок 25. Переключение с заголовком и подтекстом

Переключиться только с заголовком

Заголовки могут сопровождаться значком слева.

Рисунок 26. Переключатель только с заголовком

Элемент списка + переключатель

Вы можете комбинировать элемент списка с переключателем. Нажатие на левую сторону вертикальной линии действует как ссылка и переводит пользователя на следующий экран. Правая сторона ведет себя как стандартный переключатель.

Для элемента списка с левой стороны заголовок является обязательным. Значок и подтекст указывать необязательно.

Рисунок 27. Элемент списка и переключатель

Слайдер

Значок в ползунке не является обязательным.

Рисунок 28. Ползунок

Экранные кнопки

Для положительных действий используется цвет темы, для отрицательных - серый. Положительные действия могут включать открытие приложения, установку приложения, добавление нового элемента и т. Д. К отрицательным действиям относятся очистка данных, удаление приложения, удаление элементов и т. Д.

Рисунок 29. Серые кнопки для «Удалить» и «Принудительно остановить»

Рисунок 30. Синяя кнопка для «Включить сейчас»

Прогрессивное раскрытие информации (Advanced)

Настройки, которые не используются часто, следует скрыть. Используйте «Advanced» только тогда, когда нужно скрыть не менее 3 элементов.

Здесь в подтексте показаны названия скрытых настроек. Подтекст должен состоять из одной строки. Дополнительный текст обрезается многоточием.

Рисунок 31. Расширенные настройки, используемые на экране «Дисплей».

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

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

Рисунок 32. Раскрывающееся меню.

Флажок

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

Флажки можно использовать:

  • За негативные действия, такие как ограничение приложений или блокировка службы.
  • Чтобы не было слишком много переключателей на экране.

Рисунок 33. Флажки используются для уменьшения количества переключателей на этом экране.

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

Рисунок 34. Ссылка, используемая в настройках

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

Рисунок 35. Текст нижнего колонтитула

Узоры

Данные

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

Другие менее важные данные могут быть представлены с помощью обычного списка.

Рисунок 36. Пример, показывающий хранилище.

Рисунок 37. Пример, показывающий сеть

Обучение пользователей

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

Рисунок 38. Настройка с использованием анимации и текста нижнего колонтитула

Формы

Если форма имеет одно поле ввода, используйте обычный диалог. Это дает пользователям простой способ ввести один ввод.

Однако, если в форме есть несколько полей, рассмотрите возможность использования полноэкранного диалога . Это дает больше места на экране для четкого расположения полей.

Рисунок 39. Форма с обычным диалогом

Результаты поиска

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

Рисунок 40. Результат поиска