В этом документе описаны принципы и рекомендации для тех, кто разрабатывает настройки платформы 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. Синяя кнопка "Включить сейчас"
Постепенное раскрытие информации (расширенные настройки)
Настройки, которые используются редко, должны быть скрыты. Используйте вариант "Расширенные", только если нужно скрыть не менее трех элементов.
В этом случае в подзаголовке будут указаны названия скрытых настроек. Подпись должна быть в одну строку. Дополнительный текст обрезается и заменяется многоточием.
Рисунок 31. Расширенные настройки на экране "Дисплей"
Раскрывающееся меню
Раскрывающиеся меню доступны, но лучше использовать диалоговое окно или экран выбора с переключателями. Это рекомендуется для упрощения настроек, так как существует три разных шаблона для одиночного выбора.
Если для параметра предусмотрены простые варианты, можно использовать раскрывающиеся меню.
Рисунок 32. Раскрывающееся меню
Флажок
По возможности используйте переключатели вместо флажков.
Флажки можно использовать:
- Для отрицательных действий, например ограничения доступа к приложениям или блокировки сервиса.
- Чтобы на экране не было слишком много переключателей.
Рисунок 33. Флажки используются для уменьшения количества переключателей на этом экране.
Ссылки
Не рекомендуется использовать ссылки в настройках. Используйте ссылки только в случае крайней необходимости. Ссылки должны использовать цвет акцента без подчеркивания.
Рисунок 34. Ссылка, используемая в настройках
Нижний колонтитул
В нижний колонтитул можно добавить пояснения. В верхней части нижнего колонтитула всегда должен быть разделитель. Нижний колонтитул показывается внизу экрана. При необходимости в нижние колонтитулы можно добавить ссылки.
Рисунок 35. Текст нижнего колонтитула
Узоры
Данные
Важные данные можно представить в виде графика, например линейчатой или круговой диаграммы. Эти данные могут быть показаны в заголовке объекта. например мобильный интернет и хранилище.
Другие, менее важные данные можно представить в виде обычного списка.
Рисунок 36. Пример с хранилищем
Рисунок 37. Пример с сетью
Обучение пользователей
Некоторые функции могут требовать объяснений или обучения пользователей. Вы можете использовать анимацию или изображение вместе с текстом. Анимация или изображение должны показываться в верхней части экрана, а текст в нижнем колонтитуле можно использовать для пояснений.
Рисунок 38. Настройка с помощью анимации и текста в нижнем колонтитуле
Формы
Если в форме одно поле ввода, используйте обычное диалоговое окно. Это позволяет пользователям легко вводить данные.
Однако если в форме несколько полей, лучше использовать полноэкранное диалоговое окно. Это позволяет разместить поля на экране более упорядоченно.
Рисунок 39. Форма с обычным диалоговым окном
Результаты поиска
В результатах поиска будут показаны название, дополнительный текст (если есть) и строка навигации с местоположением настройки.
Рисунок 40. Результат поиска