Временные Окна (Temporary Views)

Предупреждения

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

alert_2x

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

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

Предупреждение:

  • Отображает требуемый заголовок и дополнительное сообщение
  • Содержит одну кнопку или более

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

Избегайте создания ненужных предупреждений. Как правило, предупреждения являются ненужными в следующих ситуациях:

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

Так как вы читаете указания по проектированию текста предупреждений, полезно знать следующие определения:

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

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

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

alert_title_only_2x

Избегайте заголовков, состоящих из одного слова. Заголовки, состоящие из одного слова, такие как Ошибка или Предупреждение, редко предоставляют какую-либо полезную информацию.

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

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

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

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

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

Особенно:

Если заголовок предупреждения… Используйте…
Является фрагментом предложения или одним предложением, не являющимся вопросом Написание слов с заглавных букв и не используйте знака препинания в конце
Является одним вопросительным предложением Соответствующее предложению написание и вопросительный знак в конце
Состоит из двух или более предложений Соответствующее предложению написание и соответствующий знак на конце обоих предложений

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

alert_title_with_msg_2x

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

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

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

two_button_alert_2x

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

ПРИМЕЧАНИЕ

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

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

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

ПРИМЕЧАНИЕ

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

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

  • Так же как и со всеми заголовками кнопок, используйте написание с заглавных букв без использования знаков препинания.
  • По возможности используйте глаголы и глагольные словосочетания, которые прямо соответствуют тексту предупреждения. Например, “Отменить”, “Показать Все”, “Ответить” или “Игнорировать”.
  • Используйте “OK” для простой опции согласия, если нет лучшей альтернативы. Избегайте использования “Да” или “Нет”.
  • По возможности избегайте использования “вы”, “ваш”, “я” и “мой”. Заголовки кнопок, в которых используются эти слова, часто являются двусмысленными и могут показаться высокомерными.

Лист Действия (Action Sheet)

Лист действия отображает набор опций выбора, связанных с задачей, инициированной пользователем.

В горизонтальном компактном (compact) режиме лист действия всплывает снизу экрана

action_sheet_iphone_2x

В горизонтальном обычном (regular) режиме лист действия всегда отображается во вспомогательном окне

action_sheet_ipad_2x

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

Чтобы использовать лист действия в вашем коде, создайте UIAlertController и выберите UIAlertControllerStyleActionSheet.

Лист действия:

  • Появляется в результате действий пользователя
  • Отображает две кнопки или более

Используйте лист действия, чтобы:

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

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

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

Если задача инициирована… Отобразите лист действия… Отображать кнопку Отменить?
За пределами вспомогательного окна Без анимации, то есть, лист действия и вспомогательное окно возникают одновременно Нет, так как пользователи могут произвести нажатие за пределами вспомогательного окна, чтобы убрать лист действия
Внутри вспомогательного окна С анимацией, то есть, лист действия выдвигается поверх содержимого вспомогательного окна Да, так как пользователям нужно иметь возможность убрать лист действия без закрытия вспомогательного окна

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

action_sheet_red_button_2x

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

Модальное Окно (Modal View)

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

modal_view_mail_compose_2x

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

Чтобы использовать модальное окно в вашем коде, создайте UIPresentationController и выберите подходящий стиль (для просмотра полного списка стилей см. Modal Presentation Styles).

Модальное окно:

  • Может покрывать весь экран, всю область окна-источника (например, вспомогательного окна) или часть экрана
  • Содержит текст и элементы управления, необходимые для выполнения задачи
  • Всегда отображает кнопку, которая завершает задачу и убирает окно, а также кнопку Отменить, которая определяет отказ от задачи и убирает окно

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

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

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

(В горизонтальном компактном (compact) режиме этот стиль функционирует так же как и полноэкранный стиль.)

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

(В горизонтальном компактном (compact) режиме этот стиль функционирует так же как и полноэкранный стиль.)

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

 

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

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

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

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

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

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

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