Панели

Статус-панель отображает важную информацию об устройстве и текущей окружающей обстановке (ниже показана на iPhone).

Содержимое по умолчанию (тёмное)

status_bar_default_2x

Светлое содержимое

status_bar_light_2x

 

Статус-панель:

  • Прозрачная
  • Если присутствует, то всегда располагается у верхней границы экрана

ПРИМЕЧАНИЕ К ПРОГРАММНОМУ ИНТЕРФЕЙСУ ПРИЛОЖЕНИЯ (API)

Вы можете установить один стиль статус-панели для всего приложения, а можете позволить элементам управления индивидуальных окон установить соответствующий стиль. Чтобы узнать больше, прочтите UIApplication Class Reference для получения информации о постоянной UIStatusBarStyle и UIViewController Class Reference, чтобы получить информацию о свойстве preferredStatusBarStyle.

Не создавайте индивидуализированную статус-панель. Пользователи зависят от логичности системной статус-панели. Хотя вы можете скрыть статус-панель в приложении, не рекомендуется создавать индивидуализированный пользовательский интерфейс, который займёт её место.

Не допустите отображение прокручивающегося содержимого через статус-панель. Так как пользователи прокручивают содержимое, вам не нужно, чтобы они видели путаницу из содержимого приложения и элементов статус-панели в области её расположения. Чтобы создать у пользователей впечатление вместительности одновременно с осуществлением максимальной читабельности, удостоверьтесь, что статус-панель имеет фон, который скрывает содержимое за ней. Далее приведено несколько способов, позволяющих не допустить отображение прокручиваемого содержимого через статус-панель:

  • Для отображения содержимого используйте контроллер навигации. Контроллер навигации автоматически отображает фон статус-панели и гарантирует, что содержимое окна не будет видно за статус-панелью. (Чтобы узнать больше о контроллерах навигации, см. Navigation Controllers.)
  • Создайте не отвлекающее индивидуализированное изображение, такое как градиент, и отобразите его за статус-панелью. Для гарантии, что изображение остаётся за статус-панелью, вы можете использовать контроллер видов, чтобы сохранить изображение над прокручивающимся окном, или вы можете использовать прокручивающееся окно, чтобы оно оставалось неотрывным от верхней части.
  • Расположите содержимое избегая области статус-панели (области, определённой свойством приложения statusBarFrame). Если вы сделаете это, вы должны использовать фоновый цвет окна, чтобы отобразить сплошной фон за статус-панелью.

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

Подумайте дважды, прежде чем совсем скроете статус-панель. Так как статус-панель прозрачна, обычно нет необходимости скрывать её. Абсолютное скрытие статус-панели означает, что пользователи должны выйти из вашего приложения, чтобы посмотреть время или узнать, подключены ли они к Wi-Fi.

Рассмотрите необходимость скрытия статус-панели и другого пользовательского интерфейса приложения, когда люди просматривают медиафайлы в полноэкранном режиме. Если вы скроете статус-панель, удостоверьтесь, что люди могут вернуть её (и соответствующий пользовательский интерфейс приложения) одним касанием. До тех пор, пока у вас не появится уважительной причины это сделать, избегайте создания индивидуализированного жеста для возобновления отображения статус-панели, потому что пользователи вряд-ли будут искать этот жест или запоминать его.

Выберите цвет содержимого статус-панели, который соответствует вашему приложению. Внешний вид по умолчанию отображает тёмное содержимое, которое хорошо смотрится поверх содержимого приложения светлого цвета. Содержимое статус-панели светлого цвета хорошо смотрится поверх тёмного содержимого приложения.

По мере уместности отображайте индикатор активности сети. Индикатор активности сети может отображаться в статус-панели для демонстрации пользователям осуществления продолжительного доступа к сети. Чтобы узнать, как встроить этот индикатор в вашем коде, см. Индикатор Активности Сети.

Панель Навигации

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

nav_bar_iphone_2x

nav_bar_ipad_7_2x

Панель навигации:

  • Полупрозрачная
  • Обычно расположена наверху экрана приложения, сразу под статус-панелью

В горизонтальном обычном (regular) режиме навигационная панель также может отображаться внутри окна, которое не разворачивается за пределы экрана, как одна панель контроллера разделённого окна.

  • Может исчезать, когда появляется клавиатура, пользователь делает жест или когда контроллер содержимого окна переходит в вертикальный компактный (compact) режим.
  • Может быть окрашена. (Используйте tintColor, чтобы окрасить кнопки панели. Используйте barTintColor, чтобы окрасить фон панели.)

ПРИМЕЧАНИЕ К ПРОГРАММНОМУ ИНТЕРФЕЙСУ ПРИЛОЖЕНИЯ (API)

Панель навигации содержится в контроллере навигации, который является программным объектом, управляющим отображением иерархии индивидуализированных окон. Чтобы узнать больше о создании навигационной панели в вашем коде, см. Navigation Controllers, UINavigationController Class Reference и UINavigationBar Class Reference.

Используйте панель навигации, чтобы осуществить навигацию среди различных окон и, при необходимости, чтобы обеспечить элемент управления, контролирующий элементы в окне. Если вам нужно предоставить более широкий набор элементов управления, вам не обязательно осуществлять навигацию. Вместо этого рассмотрите использование панели инструментов (чтобы узнать больше, см. Панель Инструментов).

Когда пользователь выходит на новый уровень иерархии в навигации, должно произойти две вещи:

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

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

nav_bar_title_not_required_2x

Обдумайте расположение сегментированного элемента управления в панели навигации на самом верхнем уровне приложения. Это особенно удобно, так как помогает сгладить вашу информационную иерархию и делает поиск более простым для пользователя. Если вы используете сегментированный элемент управления в панели навигации, удостоверьтесь, что выбрали правильные заголовки кнопки “Назад”. (Для использования руководства см. Сегментированные Элементы Управления.)

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

prompt_stocks_2x

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

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

Удостоверьтесь, что между кнопками, имеющими заголовки, достаточно места. Если между несколькими элементами панели слева или справа недостаточно места в панели навигации, может оказаться, что заголовки сольются и пользователям будет сложно их различать. Если заголовки кнопок панели навигации расположены слишком близко друг к другу, используйте UIBarButtonSystemItemFixedSpace, чтобы добавить достаточно расстояния между ними. (Чтобы узнать больше об этой постоянной, см UIBarButtonItem Class Reference.)

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

Убедитесь, что индивидуализированная кнопка Назад по-прежнему выглядит и работает как кнопка Назад. Пользователи знают, что стандартная кнопка Назад позволяет им восстановить свои шаги по информационной иерархии. Если вы решили заменить системный шеврон индивидуализированным изображением, также удостоверьтесь, что предоставили индивидуализированный рисунок шаблона. iOS использует шаблон, чтобы заголовок кнопки появлялся из (или исчезал в) шеврона во время переходов.

ВАЖНО

Не создавайте мультисегментную кнопку “Назад”. Кнопка “назад” всегда ведёт пользователя к источнику текущей страницы. Если вы полагаете, что пользователи могут потеряться без мультисегментного элемента контроля, который отображает “путь из хлебных крошек”, это может значить, что вы должны сгладить информационную иерархию.

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

Карты с видимой панелью навигации (и панелью инструментов)

nav_bar_visible_2x

Карты со скрытой панелью навигации (и панелью инструментов)

nav_bar_hidden_2x

Панель Инструментов

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

mail_toolbar_iphone_2x

mail_toolbar_ipad_2x

Панель инструментов:

  • Полупрозрачная
  • Всегда отображается у нижней границы экрана или окна на iPhone

Также может отображаться у верхней границы экрана или окна на iPad.

  • Может исчезать, когда появляется клавиатура, пользователь делает жест или когда контроллер содержимого окна переходит в вертикальный компактный (compact) режим.

ПРИМЕЧАНИЕ К ПРОГРАММНОМУ ИНТЕРФЕЙСУ ПРИЛОЖЕНИЯ (API)

Панель инструментов содержится в контроллере навигации, который является объектом, управляющим отображением иерархии индивидуализированных окон. Чтобы узнать больше о встраивании панели инструментов в вашем коде, см. Displaying a Navigation Toolbar и UIToolbar Class Reference.

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

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

Рассмотрите использование сегментированного элемента управления для предоставления доступа к различным перспективам или режимам в текущем контексте. Использование сегментированного элемента управления в панели инструментов для демонстрации задач или режимов разных уровней приложения не является хорошей идеей, потому что панель инструментов характерна для текущего экрана или окна. Если вам нужно предоставить людям доступ к основным задачам, окнам или режимам в приложении, используйте вместо этого панель вкладок. Чтобы узнать больше о сегментированных элементах управления, см. Сегментированный Элемент Управления. Чтобы узнать больше о панелях вкладок, см. Панель Вкладок.

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

Удостоверьтесь, что между кнопками, имеющими заголовки, достаточно места. Если между двумя или более кнопками панели инструментов недостаточно места, может оказаться, что заголовки будут сливаться друг с другом и пользователям будет сложно их различать. Если заголовки кнопок расположены слишком близко друг к другу, используйте UIBarButtonSystemItemFixedSpace чтобы добавить нужное расстояние между ними. (Чтобы узнать больше об этой постоянной, см. UIBarButtonItem Class Reference.)

Кнопки Панели Инструментов и Панели Навигации

iOS предоставляет множество кнопок панели инструментов и панели навигации, которые используются во встроенных приложениях. Чтобы узнать, как спроектировать индивидуализированные иконки панели, см. Иконки для Использования в Панелях. Элементы в панелях инструментов и навигации можно окрасить используя свойство tintColor.

Чтобы определить, какие названия символов использовать для определения кнопок, описанных в Таблице 41-1, см. документацию для UIBarButtonSystemItem в UIBarButtonItem Class Reference.

ВАЖНО

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

Таблица 41-1 Стандартные кнопки, доступные для использования в панелях инструментов или навигации

Кнопка Название Значение
UIBarButtonAction_2x Действие Открывает модальное окно, в котором отображается список предоставленных системой и приложением действий, работающих с текущим контекстом.
UIBarButtonCamera_2x Камера Открывает лист действий, который отображает выбор фотографий в режиме камеры.
UIBarButtonCompose_2x Создать Открывает новое окно сообщения в режиме редактирования.
UIBarButtonBookmarks_2x Закладки Показывает закладки, свойственные приложению.
UIBarButtonSearch_2x Поиск Отображает поле поиска.
UIBarButtonAdd_2x Добавить Создаёт новый элемент.
UIBarButtonTrash_2x Корзина Удаляет текущий элемент.
UIBarButtonOrganize_2x Организовать Передвигает или направляет элемент к месту назначения внутри приложения, например, в папку.
UIBarButtonReply_2x Ответить Посылает или направляет элемент в другое место.
UIBarButtonRefresh_2x Обновить Обновляет содержимое (используется только при необходимости, или же обновляется автоматически).
UIBarButtonPlay_2x Воспроизвести Начинает воспроизведение медиафайлов или слайдов.
UIBarButtonFastForward_2x Ускоренная Перемотка Перематывает воспроизведение медиафайла или слайдов.
UIBarButtonPause_2x Пауза Приостанавливает воспроизведение медиафайла или слайдов (имейте ввиду: заключает в себе сохранение контекста).
UIBarButtonRewind_2x Перемотка Перематывает воспроизведение медиафайла или слайдов назад.

В дополнение к кнопкам, показанным в Таблице 41-1, вы также можете использовать системные кнопки Редактировать, Отменить, Сохранить, Готово, Повторить и Отменить, чтобы предоставить редактирование или другого рода воздействие на содержимое в вашем приложении. Внешний вид каждой из этих кнопок предоставлен её заголовком. Чтобы определить, какие названия символов использовать для определения кнопок, см. документацию для UIBarButtonSystemItem в UIBarButtonItem Class Reference.

В конце-концов, вы также можете использовать в панели инструментов предоставленную системой кнопку “Информация”:

info_button_2x

Панель Вкладок

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

music_tab_bar_iphone_2x

music_tab_bar_ipad_2x

ПРИМЕЧАНИЕ К ПРОГРАММНОМУ ИНТЕРФЕЙСУ ПРИЛОЖЕНИЯ (API)

Панель вкладок содержится в контроллере панели вкладок, который является объектом, управляющим отображением набора индивидуализированных окон. Чтобы узнать больше о проектировании панели вкладок в вашем коде, см. Tab Bar Controllers и UITabBar.

Панель вкладок:

  • Полупрозрачная
  • Всегда отображается у нижней границы экрана
  • В горизонтальном компактном (compact) режиме отображает не более пяти вкладок одновременно (если количество вкладок больше, панель вкладок отображает четыре вкладки и добавляет вкладку “Больше”, которая открывает дополнительные вкладки в списке)
  • Сохраняет одинаковую высоту во всех ориентациях
  • Может отображать на панели наклейку для сообщения соответствующей приложению информации (наклейка представляет собой красный овал с содержимым в виде белого текста и также числом или восклицательным знаком)

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

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

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

Не удаляйте вкладку, когда её функция доступна. Если вы в некоторых случаях удаляете вкладку, а в некоторых нет, вы делаете пользовательский интерфейс вашего приложения нестабильным и непредсказуемым. Лучшим решением является гарантия того, что все вкладки работают, но предоставить при этом объяснение, почему содержимое вкладки недоступно. Например, если у пользователя нет никаких песен на устройстве iOS, вкладка Песни в приложении Музыка отображает экран, который объясняет, как загрузить песни.

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

В горизонтальном обычном (regular) режиме мы можете использовать панель вкладок во вспомогательном окне или дополнительной области контроллера разделённого окна. Поступайте таким образом для переключения между вкладками или фильтрации содержимого внутри этого окна. Однако всегда лучше использовать сегментированный элемент управления у нижней границы вспомогательного окна или области контроллера окна, так как внешний вид сегментированного элемента управления лучше сочетается с внешним видом этих элементов пользовательского интерфейса. (Для получения большей информации об использовании сегментированного элемента управления, см. Сегментированный Элемент Управления.)

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

В горизонтальном обычном (regular) режиме избегайте создания вкладки “Больше”. В приложении, которое работает в горизонтальном обычном (regular) режиме, экран, предназначенный только для списка дополнительных вкладок — это простая трата пространства.

Насколько возможно, отображайте одинаковые вкладки в каждой ориентации. Хорошо, если вы можете дать пользователям ощущение визуальной стабильности посредством отображения одинаковых вкладок в каждой ориентации. В горизонтальном обычном (regular) режиме вам, возможно, понадобится поместить в центр те же вкладки, которые заполняют пространство в горизонтальном компактном (compact) режиме.

Иконки Панели Вкладок

iOS предоставляет для использования в панелях вкладок стандартные иконки, показанные в Таблице 41-2. Чтобы узнать, как создавать индивидуализированные иконки для панели вкладок, см. Иконки для Использования в Панелях. Иконки панели вкладок можно окрасить используя свойство tintColor.

Чтобы определить, какие названия символов использовать для определения этих иконок, см. документацию для UITabBarSystemItem в UITabBarItem Class Reference.

ВАЖНО

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

Таблица 41-2 Стандартные иконки для использования во вкладках панели вкладок

Иконка Название Значение
UITabBarBookmarks_2x Закладки Показывает закладки, свойственные приложению.
UITabBarContacts_2x Контакты Показывает контакты.
UITabBarDownloads_2x Загрузки Показывает загрузки.
UITabBarFeatured_2x Избранное Показывает определённое пользователем избранное.
UITabBarFeatured_2x Популярное Показывает содержимое, популярное в приложении.
UITabBarHistory_2x История Показывает историю действий пользователя.
UITabBarMore_2x Больше Показывает дополнительные элементы панели вкладок.
UITabBarHistory_2x Новейшее Показывает самый новый элемент.
UITabBarMostViewed_2x Самое просматриваемое Показывает наиболее часто просматриваемые пользователями элементы.
UITabBarHistory_2x Недавнее Показывает элементы, к которым пользователь осуществлял доступ за весь период использования приложения.
UITabBarSearch_2x Поиск Вводит режим поиска.
UITabBarTopRated_2x Высокий рейтинг Показывает элементы с самым высоким рейтингом по мнению пользователя.

Панель Поиска

Панель поиска принимает текст от пользователей, который может быть использован как ввод для поиска (здесь показана с замещающим текстом).

search_bar_2x

ПРИМЕЧАНИЕ К ПРОГРАММНОМУ ИНТЕРФЕЙСУ ПРИЛОЖЕНИЯ (API)

Чтобы узнать, как установить панель поиска в вашем коде, см. UISearchBar. Чтобы узнать больше об отображении панели поиска, см. UISearchDisplayController.

Панель поиска может отображать необязательные элементы, например:

  • Замещающий текст. Такой текст может обозначать функцию элемента управления (например, “Поиск” как показано выше) или напоминать пользователям, в каком контексте они выполняют поиск (например, “Google”).
  • Кнопка Закладок. Эта кнопка обеспечивает короткий путь к информации, которую пользователи хотят с лёгкостью найти снова. Например, кнопка Закладки в поисковом режиме приложения Карты предоставляет доступ к месту, отмеченному закладкой, недавним поискам и контактам.

search_bar_bookmarks_2x

Кнопка Закладки видна, только когда в панели поиска нет введённого пользователем или незамещающего текста. Когда в панели поиска присутствует такой текст, появляется кнопка Очистить, чтобы пользователи могли его убрать.

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

search_bar_clear_2x

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

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

search_bar_results_2x

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

search_bar_prompt_2x

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

В iOS 8 и позднее использование UISearchController упрощает размещение панели поиска в навигационной панели. Имейте ввиду, что когда контроллер окна поискового контроллера содержится в контроллере навигации, как в случае с Почтой, если пользователи выполняют поиск, панель поиска автоматически переходит в панель навигации.

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

Выдающийся стиль панели поиска (показан в приложении Почта)

search_bar_prominent_2x

Незначительный стиль панели поиска (показан в приложении Музыка)

search_bar_minimal_2x

Панель Объёма и Содержания

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

scope_bar_2x

ПРИМЕЧАНИЕ К ПРОГРАММНОМУ ИНТЕРФЕЙСУ ПРИЛОЖЕНИЯ (API)

Чтобы узнать больше о том, как установить панель поиска и панель объёма и содержания в вашем коде, см. UISearchBar.

Когда присутствует панель поиска, панель объёма и содержания может появиться рядом с ней. Панель объёма и содержания имеет такой же внешний вид, как и тот, который вы определяете для панели поиска.

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

Copyright © 2016. iOSManual Все авторские права защищены