Интерфейс адаптируется к нестандартным разрешением ios
Как iOS приложения адаптируются к разным размерам экрана iPhone 12
За последние несколько лет я написал несколько статей, показывающих, как приложения iOS, созданные с использованием разных версий Xcode, будут отображаться при запуске на устройствах с iOS, которые еще не существовали на момент создания приложений. Как правило, приложения следует создавать, используя последнюю версию Xcode, чтобы была возможность использовать предпросмотр для разрешений экрана всех устройств, включая самые новые. Старые приложения запускаются на новых устройствах, но выглядят ужасно. Иногда некоторые элементы приложения выходят за пределы экрана, или приложения выглядят как вытянутые в столбик и/или масштабированные версии этих же приложений для более старых устройств. Опыт, описанный в тех статьях, доказывает, что старые приложения никогда корректно не запускаются с теми разрешениями экрана, которых не существовало при их создании.
На WWDC 2019: 224 Modernizing Your UI for iOS 13 спикер, рассказывая о новых особенностях совместимости приложений, заявил:
“Раньше, если мы создавали новые устройства с новыми разрешениями экрана, ваши приложения отображались некорректно. Что ж, мы изменили это. Таким образом, если ваше приложение создано с использованием iOS 13 SDK, оно всегда будет отображаться с правильным полным разрешением экрана.”
В тот момент я думал, это означает, что мне никогда больше не придется писать статьи по этой теме. Новые iPhone 12 отображают приложения с разным разрешением в зависимости от того, с какой версией Xcode они были созданы. Отменила ли Apple это решение или это относится только к новым разрешениям iPad?
На мероприятии в октябре 2020 года Apple анонсировала четыре новые модели iPhone 12: iPhone 12 mini, iPhone 12, iPhone 12 Pro и iPhone 12 Pro Max. iPhone 12 и 12 Pro имеют одинаковое разрешение экрана и ведут себя идентично. Получается, что при разработке приложений нужно учитывать только три разрешения экрана.
iPhone 12 mini 5.4" with 1080×2340 pixels
iPhone 12 / 12 Pro 6.1" with 1170×2532 pixels
iPhone 12 Pro Max 6.7" with 1284×2778 pixels
Ни одно из этих разрешений не соответствует существующим разрешениям устройств.
У iPhone 12 mini есть еще один сюрприз. Как и в случае с iPhone 6+, 6S +, 7+ и 8+, приложение, работающее на iPhone 12 mini, выполняет рендеринг с разрешением, отличным от того, что на самом деле будет отображается на экране.
Прежде чем изучать особенности новых устройств, стоит еще раз взглянуть на поведение некоторых из существующих. Я думаю, что iPhone SE второго поколения, 11 Pro и 11 Pro Max являются наиболее подходящими моделями для сравнения с новыми моделями. В отличие от предыдущих статей этой серии, я также рассматриваю Display Zoom (для усложнения своей задачи и увеличения времени на создание всех этих снимков экрана!)
iPhone SE второго поколения
IPhone SE второго поколения имеет такие же размеры как iPhone 6, 6s, 7 and 8. Следовательно, и ведет он себя точно так же.
Стандартное разрешение
iPhone SE второго поколения имеет разрешение 375 × 667 поинтов.
Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in portrait
Xcode 12.
1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in landscape
Display Zoom
При включенном Display Zoom, iPhone SE второго поколения показывает увеличенное разрешение iPhone SE первого поколения - 320 × 568 поинтов. Такое же разрешение, как у iPhone 5 и 5S. Однако обратите внимание, что высота панели навигации составляет 112 поинтов, что на 1 поинт больше, чем у реального iPhone SE.
Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in portrait with Display Zoom
Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in landscape with Display Zoom
iPhone 11 Pro
iPhone 11 Pro имеет такие же размеры и ведет себя так же, как iPhone X и XS.
Стандартное разрешение
iPhone 11 Pro имеет исходное разрешение 375 × 812 поинтов.
Xcode 12.1 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait
Xcode 12.1 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape
Display Zoom
При включенном Display Zoom, iPhone 11 Pro показывает увеличенное разрешение 320 × 693 поинта, если приложение создано с помощью Xcode 12.
0 или новее. Это не соответствует ни одному предыдущему устройству. Обратите внимание, что верхняя и нижняя панели немного меньше в поинтах, чем при стандартном масштабировании.
Xcode 12.0 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait with Display Zoom
Xcode 12.0 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape with Display Zoom
iPhone 11 Pro не поддерживает Display Zoom на iOS 13. При сборке с Xcode 11 (т. е. связанным с iOS 13) iPhone 11 Pro с использованием Display Zoom показывает увеличенное, некорректное изображение с разрешением iPhone SE первого поколения (320 × 568 поинтов). Это доказывает, что приложение не видит разрешение экрана, несуществующее в iOS 13. Приложение считает, что статус бар имеет высоту 20 поинтов (как на реальном iPhone SE первого поколения), но iOS продолжает выводить время и другие параметры на самый верх экрана.
Xcode 11.7 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait with Display Zoom
Xcode 11.
7 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape with Display Zoom
iPhone 11 Pro Max
iPhone 11 Pro Max имеет тот же размер и поведение, как и iPhone XS Max. IPhone 11 и XR имеют немного другой физический размер и плотность пикселей 2x вместо 3x, но имеют такое же разрешение в поинтах и могут считаться функционально эквивалентными iPhone 11 Pro Max.
Стандартное разрешение
iPhone 11 Pro Max имеет исходное разрешение 414 × 896 поинтов. Высота “моноброви” такая же, как на iPhone 11 Pro.
Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in portrait
Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in landscape
Display Zoom
При включенном Display Zoom, iPhone 11 Pro Max показывает увеличенное разрешение iPhone 11 Pro, равное 375 × 812 поинтам. В отличие от iPhone 11 Pro, iPhone 11 Pro Max действительно поддерживает Display Zoom в iOS 13. Приложения, созданные в Xcode 11, будут иметь такое же разрешение на iPhone 11 Pro, что и приложения, созданные в Xcode 12.
Опять же, верхняя и нижняя панели немного отличаются по размеру от реального iPhone 11 Pro. Статус бар на 4 поинта короче, а нижняя панель на 3 поинта короче, что дает на 7 поинтов больше вертикальной области для содержимого, чем на iPhone 11 Pro.
Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in portrait with Display Zoom
Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in landscape with Display Zoom
iPhone 12 mini
Стандартное разрешение
Экран 1080 × 2340 пикселей предполагает новое разрешение 360 × 780 поинтов, но iPhone 12 mini фактически выдает уменьшенное разрешение iPhone 11 Pro, равное 375 × 812 поинтам. Это означает, что iPhone 12 mini не вводит в разработку приложений новое разрешение. Однако, поскольку реальное физическое количество пикселей не кратно разрешению в поинтах, не получится избежать некоторых артефактов масштабирования. Надеюсь, с 3x экраном они будут незаметны. Статус бар на 6 поинтов выше, чем у iPhone 11 Pro.
Нижняя строка имеет такую же высоту.
Xcode 12.1 build of Adaptivity on iPhone 12 mini running iOS 14.1 in portrait
Xcode 12.1 build of Adaptivity on iPhone 12 mini running iOS 14.1 in landscape
Display Zoom
Поскольку iPhone 12 mini ведет себя так же, как и iPhone 11 Pro, то при включенном Display Zoom iPhone 12 mini показывает увеличенное разрешение 320 × 693 поинтов, если приложение создано с использованием Xcode 12.0 и новее. Статус бар на 5 поинтов выше, чем у iPhone 11 Pro с включенным Display Zoom. Нижняя панель имеет такую же высоту.
Xcode 12.0 build of Adaptivity on iPhone 12 mini running iOS 14.1 in portrait with Display Zoom
Xcode 12.0 build of Adaptivity on iPhone 12 mini running iOS 14.1 in landscape with Display Zoom
При сборке с использованием Xcode 11 iPhone 12 mini с включенным Display Zoom выдает увеличенное изображение, такое же, как на iPhone SE первого поколения с разрешением 320 × 568 поинта. iPhone 11 Pro с включенным Display Zoom выдает такое же разрешение.
Xcode 11.7 build of Adaptivity on iPhone 12 mini running iOS 14.1 in portrait with Display Zoom
Xcode 11.7 build of Adaptivity on iPhone 12 mini running iOS 14.1 in landscape with Display Zoom
iPhone 12 / 12 Pro
Стандартное разрешение
В отличие от iPhone 12 mini, iPhone 12 и 12 Pro имеют совершенно новое исходное разрешение - 390 × 844 поинта. Поскольку данное разрешение не встречалось ранее на других устройствах, для возможности использовать предпросмотр в этом разрешении, приложения следует создавать с использованием Xcode 12.1 или новее. Обратите внимание, что в альбомной ориентации горизонтальные размеры меньше (так же, как у iPhone 11 Pro и устройств меньшего размера). Статус бар больше на 3 поинта в сравнении с iPhone 11 Pro. Нижняя панель не изменилась.
Xcode 12.1 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait
Xcode 12.1 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape
Приложения, созданные в Xcode 12.
0 и новее, при запуске предпросмотра iPhone 12 или 12 Pro с исходным разрешением, будут использовать увеличенное до 375 × 812 поинтов разрешение iPhone 11 Pro. На этот раз верхняя и нижняя панель такой же высоты, как на настоящем iPhone 11 Pro!
Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait
Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape
Display Zoom
При включенном Display Zoom, iPhone 12 и 12 Pro выдают увеличенное разрешение 320 × 693 поинта, если приложение создано в Xcode 12.0 или новее. Это то же разрешение, что и у iPhone 11 Pro и iPhone 12 mini с включенным Display Zoom. Верхняя панель на 1 поинт выше, чем у эквивалентного iPhone 11 Pro с включенным Display Zoom, а нижняя панель на 1 поинт ниже.
Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait with Display Zooom
Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape with Display Zooom
При создании приложения в Xcode 11 iPhone 12 и 12 Pro с включенным Display Zoom выдают такое же увеличенное изображение, что и iPhone SE первого поколения с разрешением 320 × 568 поинта.
Такое же разрешение выдают iPhone 11 Pro и iPhone 12 mini при включенном Display Zoom.
Xcode 11.7 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait with Display Zoom
Xcode 11.7 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape with Display Zooom
iPhone 12 Pro Max
Стандартное разрешение
Как и iPhone 12 и 12 Pro, iPhone 12 Pro Max вводит совершенно новое разрешение 428 × 926 поинта. Поскольку это разрешение ранее не встречалось, для использования предпросмотров с этим разрешением, приложения следует создавать в Xcode 12.1 или новее. Верхняя панель на 3 поинта выше, чем у iPhone 11 Pro Max. Нижняя панель не изменилась.
Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in portrait
Обратите внимание, что в альбомной ориентации размеры по горизонтали стандартные (такие же, как и у меньшего iPhone 11 Pro Max).
Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in landscape
Приложения, созданные в Xcode 12.
0 или в более ранней версии, будут выдавать увеличенное до 414 × 896 поинтов стандартное разрешение iPhone 11 Pro Max. Панели такой же высоты, как и на iPhone 11 Pro Max.
Xcode 12.0 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in portrait
Xcode 12.0 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in landscape
Display Zoom
При включенном Display Zoom iPhone 12 Pro Max выдает увеличенное разрешение iPhone 11 Pro, равное 375 × 812 поинтам. Статус бар на 3 поинта короче, а нижняя панель на 4 поинта короче, что дает на 7 поинтов больше вертикальной области для содержимого, чем на iPhone 11 Pro.
Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in portrait with Display Zoom
Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in landscape with Display Zoom
Вывод
У Apple много опыта в обеспечении обратной совместимости с существующими приложениями при выпуске новых устройств или версий iOS.
Линейка iPhone 12 не является исключением (кроме iPhone 12 mini, который всегда имеет разрешение iPhone 11 Pro, масштабируемое по размеру экрана). Высота панелей при масштабировании не всегда соответствует реальному физическому устройству, поэтому обратная совместимость срабатывает не на все 100%. Чтобы иметь возможность использовать новые разрешения iPhone 12/12 Pro и 12 Pro Max в предпросмотре, приложения должны быть созданы с использованием Xcode 12.1.
Display Zoom обычно выдает увеличенную версию меньшего разрешения существующего устройства. Исключениями являются iPhone X, XS и 11 Pro, которые не поддерживали масштабирование дисплея до iOS 14. Они выдают новое разрешение 320 × 693 поинта при использовании Xcode 12 (т.е. по сравнению с iOS 14) и разрешение 320 × 568 поинта при использовании Xcode 11.
Как я запускал приложения Xcode 11 / iOS 13 на симуляторах iOS 14.1?
Вам может быть интересно, как мне удалось сделать снимки экрана с симуляторов Xcode 12.1 / iOS 14.
1 с приложениями, созданными с помощью Xcode 11. В моей предыдущей статье iPad Navigation Bar and Toolbar Height Changes в iOS 12 этот процесс объясняется в разделе «Подождите, что вы сказали?».
Adaptivity
Скриншоты в этой статье были взяты из приложения Adaptivity. Adaptivity - это инструмент для разработчиков и дизайнеров, позволяющий визуализировать различные размеры экрана, поля макета, высоту полей и размеры динамического типа, которые современное адаптивное приложение iOS использует при работе на разных устройствах и в многозадачных размерах iPad. Есть также инструменты для просмотра системных цветов, системных изображений и системных материалов, а также инструменты для изучения взаимодействий Pointer Interactions iPadOS 13.4.
Это универсальное приложение является хорошей покупкой и включает в себя версию Mac Catalyst.
Оригинал статьи
Как адаптировать интерфейс приложения под разные платформы — Офтоп на vc.ru
В войне между iOS и Android нет победителя — это всем известно.
Если продукт успешен на одной платформе, то он, без всякого сомнения, будет перенесен на другую. Иногда разработчики приложений даже не выдерживают паузы, и релизы происходят одновременно на обеих платформах. Для дизайнеров это значит только одно: им придется адаптировать UI и UX приложения для другой платформы, сохранив при этом целостность дизайна продукта.
Есть три способа мультиплатформенной адаптации пользовательского интерфейса:
- сохранение целостности бренда на всех платформах;
- соответствие нормам, принятым для конкретной платформы;
- поиск баланса между вышеперечисленными способами.
Мы решили проанализировать эти три подхода на примерах популярных приложений, чтобы вы могли выбрать, какой метод подходит именно вам.
Подход 1: Ориентация на целостность бренда
Сохранение унифицированного дизайна для всех платформ, игнорируя «родительские указания», — наиболее простой, быстрый и экономный подход, если дело касается дизайна пользовательского интерфейса.
Но с программной частью это не сработает: нестандартный UI сложнее в реализации, и его разработка обойдется дороже, чем использование стандартных компонентов.
Как бы то ни было, унификация дизайна — опасный подход. Мы называем такие приложения тинейджерами: они не следуют правилам и порой очень раздражают. Они считают себя особенными, но на самом деле ничем не отличаются от своих ровесников. Хотя бывают исключения.
VSCO Cam
Первая версия приложения VSCO Cam от компании Visual Supply вышла для iOS в 2012 году. Год спустя ставший популярным фоторедактор перенесли на Android. Версия для Android повторяла интерфейс iOS-версии практически полностью. Но интересно тут вот что: ни одна из версий не соответствовала установленным для своей платформы стандартам визуального дизайна.
Игнорирование гайдлайнов в этом случае совершенно оправдано. Создатели VSCO Cam
считают творчество одной из наивысших ценностей, и это видно по подходу к созданию продукта: они сделали приложение частью бренда, который, в свою очередь, стал частью творческого сообщества.
Именно поэтому художественное единство настолько важно для VSCO Cam.
Как и VSCO Cam, Instagram был выпущен в App Store намного раньше, чем появилась его версия для Android. Дизайн для iPhone строго соответствовал гайдлайнам платформы, а само приложение имело огромный успех. Типично «эппловский» дизайн стал одной из ключевых особенностей Instagram, и разработчики не стали его кардинально менять при переносе продукта на Android. Даже несмотря на то, что общая эстетика приложения отличалась от того, что привыкли видеть пользователи Android, загрузки Instagram в Google Play превысили 1 миллион уже в день релиза.
Instagram для iOS (слева) и Android
Текущие версии Instagram для iOS и Android действительно выглядят как близнецы, хотя некоторые различия между ними все же есть. Например, search bar выглядят более стандартно для каждой из платформ. Интерфейс камеры в последней версии для Android также стал немного отличаться от iOS-версии.
Кроме того, в приложении для iOS логотип Instagram расположен в центре navigation bar, в то время как в Android-версии — слева от toolbar.
Реализация поиска в Instagram на iOS (слева) и Android
Хотя Instagram для Android не соответствует стандартам платформы, приложение все равно очень комфортно для пользователей.
Wire
Wire — мессенджер, основанный и профинансированный создателями Skype. Он не слишком отличается от других приложений подобного типа, за исключением одного — у Wire поразительно красивый интерфейс, который никого не оставляет равнодушным (в особенности хипстеров). Дизайнеры приложения применили нестандартное управление, основанное на жестах, главная цель которого — убрать как можно больше элементов с глаз пользователей.
Мы создаем изящный и функциональный инструмент, позволяющий общаться любым способом: с помощью текста, голоса, видео и другого контента.
Прииду Зилмер, ведущий дизайнер WireКонтент — это ключевая особенность Wire, поэтому мы приняли решение убрать весь лоск и визуальный мусор, чтобы сделать акцент на контенте. Также мы вложили много усилий в типографику и читабельность текстов.
При первом знакомстве с Wire пользователям приходится руководствоваться методом тыка. С другой стороны, приложение использует множество микровзаимодействий, которые дарят очень необычный и захватывающий user experience. Упрощенный поиск контактов, приятная цветовая палитра, возможность выбирать фоновое изображение и цветовую схему — все это делает Wire уникальным решением на фоне Telegram, WhatsApp, Viber и других похожих друг на друга мессенджеров.
Мы вложили много сил в дизайн и не могли переделывать его для каждой отдельной платформы (Android, iOS, компьютер, веб), особенно учитывая, что нормы в дизайне постоянно меняются и за ними трудно угнаться: всегда есть риск, что приложение внезапно перестанет выглядеть актуальным, как это случилось со многими продуктами, когда вышли iOS 7 и Android L.
В то же время мы понимаем риски, связанные с игнорированием стандартов платформы, поэтому постоянно работаем над поиском правильного баланса, продумывая и настраивая наш дизайн так, чтобы он выглядел уместно на всех платформах.
Прииду Зилмер, ведущий дизайнер Wire
Интерфейсы Wire на iOS и Android абсолютно идентичны, включая UX и иконки. Единственное, что есть в приложении от гайдлайнов, — это размер кликабельных элементов. Wire — еще один пример того, что дизайн интерфейса может быть более важен, чем соответствие требованиям платформы.
По словам Зилмера, команда Wire считает, что общение между людьми не должно быть ограничено какими-либо рамками и условностями.
VSCO Cam, Instagram и Wire сфокусировались на целостности бренда, достигнутой через унификацию интерфейса на всех платформах. Но значит ли это, что менее масштабный мобильный стартап, последовав их примеру, достигнет такого же успеха? Вот несколько случаев, когда ориентация на целостность бренда, на наш взгляд, будет выигрышным решением.
Когда следует ориентироваться на целостность бренда
1. Одни и те же пользователи используют разные каналы (компьютер, iPad, iPhone, Android) для доступа к вашим продуктам.
Довольно часто компании, которые используют несколько каналов взаимодействия с клиентами, ориентируются на целостность бренда. Однако в этом есть смысл лишь в том случае, если одни и те же пользователи имеют доступ к продукту на разных платформах и типах устройств (iPad, Android, веб). Например, пользователь iBroadcast одновременно имеет доступ к музыкальному сервису через iOS- и Android-устройства, а также через компьютер. Версии приложения для каждой платформы выглядят одинаково, потому что для iBroadcast важно обеспечить пользователю плавный незаметный переход с одной платформы на другую.
Пользователи нашего сервиса постоянно мигрируют между сайтом и приложениями для iOS и Android, и мы стремимся сделать эти переходы как можно более незаметными.
Род Коллен, сооснователь iBroadcast
Даже если ваше мультиплатформенное приложение подходит под это описание, все равно стоит хорошо подумать, прежде чем использовать полную ориентацию на бренд в вашем подходе к дизайну. Например, Facebook (его мы рассмотрим ниже) следует смешанному подходу к адаптации UI для нескольких платформ, потому что пользователи обычно используют эту социальную сеть только на одной из мобильных операционных систем.
2. Кастомные компоненты UI обеспечивают интуитивное управление приложением, а иногда еще и выглядят привлекательно.
Авторы одного
исследования выделяют четыре компонента интуитивного управления: внутреннее чувство, возможность вербализации, простота и «магический опыт». Объединение этих компонентов позволяет дизайнерам создавать целостный UX вне зависимости от того, следуют они гайдлайнам или нет. В конце концов, кастомные компоненты позволяют достигнуть лучшей визуализации и интерактивности, чем предполагают стандарты.
Также следует заметить, что различия между платформами могут быть причиной того, что приложение может быть удобным в использовании на одной платформе и неудобным на другой.
Создатели дейтингового приложения HowAboutWe настаивают, что единственный способ обеспечить единство в дизайне приложения вне зависимости от разных версий Android OS, типа и производительности девайса, размера экрана, плотности изображения, — это использовать кастомные UI-решения. Нативные компоненты имеют определенные ограничения, но вы всегда можете экспериментировать, чтобы улучшить пользовательское взаимодействие с вашим продуктом.
В качестве примера возьмем Receipt, приложение для управления бюджетом для Android с очень необычными dropdown-анимациями, которые противоречат гайдлайнам, но привлекают пользователей.
Мне не нравилось, как в гайдлайнах предлагалось реализовать некоторые функции, и я решил, что стоит придумать решение получше.
По сути, я просто игнорировал гайдлайны в тех случаях, когда было четко видно, что мои собственные решения сулили больше преимуществ. Среди них — лучший отклик на действия пользователя, избавление от ненужных элементов и предотвращение помех в использовании приложения. Отказ от различных всплывающих элементов и необязательных экранов играет здесь важную роль.
Богдан Михайчик, основатель Receipt
Если уникальные и красивые UI-решения не усложняют взаимодействие пользователя с приложением, они помогают создать положительное первое впечатление и привлечь внимание к продукту. Одна из причин, почему наше приложение My Day привлекает пользователей, — это нестандартный интерфейс, идентичный на обеих платформах.
Превосходный UI-дизайн Citymapper также выделяет приложение на всех трех платформах, включая веб.
Для нас главным всегда был баланс.
Вести себя привычно для пользователей, но в то же время заявлять о себе как об уникальном бренде.
Я думаю, что важность уникальности языка дизайна очень часто недооценивают... «Citymapper, говорите?» «Да, тот, зеленый». Это само по себе дорогого стоит.
Иногда дизайнеры слишком пекутся о совершенстве пикселей и «правильности» их дизайна. Жизнь хаотична, разработка продукта — тоже. Так зачем же скрывать это? Мы все в одной лодке: те, кто создает проект, и те, кто его использует.
Гилберт Уидэм, ведущий дизайнер Citymapper
Адаптируя свой интерфейс для другой платформы, вам следует поставить себя на место пользователя — неважно, какой подход вы выбрали. Способность создавать интуитивный UX, сохраняя целостность бренда, — качество, присущее только лучшим дизайнерам.
Подход 2: Ориентация на платформу
В отличие от ориентации на целостность бренда, ориентация на платформу требует значительно больших затрат времени и денег (если говорить исключительно о дизайне интерфейса).
При переносе дизайна многие UI- и UX-элементы должны быть созданы с нуля, чтобы соответствовать нормам целевой платформы.
В таком случае фокус смещается с целостности бренда на привычный UX, так как пользователи имеют свойство «привыкать» к платформе. В таком случае интуитивное восприятие приложения через знакомый дизайн может дать ряд преимуществ. Давайте посмотрим, как этим воспользовались Telegram и WhatsApp.
Telegram
Telegram — это популярный мессенджер, сооснователем которого выступил Павел Дуров, человек, создавший крупнейшую русскоязычную социальную сеть «ВКонтакте». Telegram разработан в стиле минимализма и поддерживает безопасный протокол шифрования для личных сообщений, что обеспечивает приложению огромное преимущество перед конкурентами.
Telegram был запущен одновременно для iOS и Android, причем на обеих платформах упор был сделан на функциональность, а не на внешний вид. Поэтому дизайнеры решили ориентироваться на принятые нормы платформ.
Версии Telegram для iOS и Android различаются настолько, насколько могут различаться типичные приложения для этих платформ. Версия для iOS полностью следует гайдлайнам Apple и выглядит абсолютно как приложение, разработанное для iOS 7 или 8: справа от navigation bar — кнопка, отвечающая за написание нового сообщения, слева — кнопка для редактирования, внизу экрана — tap bar с разделами, а вверху можно найти название текущего раздела.
Android-версия приложения следует гайдлайнам Google Material Design. Там есть гамбургер-меню для навигации по разделам, простая кнопка поиска в верхнем правом углу, и, конечно, плавающая кнопка — сердце и душа Material Design.
Оба приложения используют стандартные для своих платформ контроллы и элементы UX-взаимодействия. Несомненно, работая над приложением, дизайнеры Telegram руководствовались основными принципами юзабилити.
Экран настроек Telegram для iOS (слева) и Android
Пока не будем оставлять тему мессенджеров и устремим наши взоры на так называемого пророка приложений для обмена сообщениями — WhatsApp, который ныне принадлежит Facebook.
Приложение для iOS вышло в 2009 году, вскоре после версий для BlackBerry и Symbian. WhatsApp для Android появился на рынке только в 2012 году и выглядел именно так, как должен был выглядеть, чтобы его приняли и полюбили пользователи этой системы.
Так как WhatsApp доступен на любой платформе, естественно, что его создатели при разработке дизайна приложения выбрали ориентацию на платформу. Версии для iOS и Android выглядят совершенно по-разному. Дизайнеры отлично провели мультиплатформенную адаптацию, поменяв все — от дизайна UX и вида сообщений до иконок и расположения элементов управления.
Текущая версия приложения для iOS соответствует стандартам iOS 9. Версия для Android оперативно получила обновление до соответствия стандартам Material Design и продолжает им следовать.
Komoot
Komoot — это приложение для путешественников и велосипедистов, которое принадлежит немецкому стартапу. Первая версия приложения вышла на iOS в 2010 году, а год спустя за ней последовала версия для Android.
Старые версии Komoot не имеют ничего общего с нынешними продуктами стартапа.
Дизайн приложения для iOS и Android построен на основе соответствия гайдлайнам и лучшим практикам дизайна для каждой из платформ. Контент Komoot включает топографические карты, поочередную навигацию, рекомендации по интересным местам и многое другое. Все эти функции должны быть в быстром доступе.
Мы решили придерживаться правил, принятых для платформ, потому что нативный UI более предсказуем, а значит, более доступен для пользователя. Кроме того, Apple и Google отдают предпочтение приложениям, которые следуют их требованиям относительно дизайна UI, что действительно важно для продвижения приложения в App Store и Google Play.
Дмитрий Прудников, UI- и UX-дизайнер Komoot
Komoot неоднократно попадал в топ в App Store и был назван одним из лучших приложений на Google Play в 2014 году.
Сейчас Komoot — топовое приложение на обеих платформах.
Теперь, когда мы рассмотрели успешные примеры, давайте решим, в каких же случаях разумнее всего играть по правилам.
Когда следует ориентироваться на стандарты платформы
1. Высокая конкуренция на рынке побуждает предпринимателей быстро запустить приложение и собрать базу пользователей в краткие сроки.
Даже несмотря на необходимость создавать отдельные концепты дизайна для каждой из платформ, ориентация на платформу в дизайне позволяет разработчикам программного обеспечения реализовать вашу идею намного быстрее. Как только приложение появится на рынке, скачавшие его пользователи сразу разберутся со знакомыми элементами интерфейса. Дизайнерам, в свою очередь, не придется терпеть творческие муки, придумывая что-то необычное — достаточно следовать гайдлайнам.
2. Тренды в дизайне, введенные Apple и Google, были очень хорошо восприняты пользователями.
Сверхразумное брендинговое решение Google не оставляет нам иного выбора: если переносить приложение с iOS на Android, то переосмысление его под стандарты Material Design — уже необходимость.
Причем этот тренд привлек внимание владельцев iPhone, так что теперь некоторые iOS-приложения используют Material Design в своих интерфейсах. Мы упоминаем Material Design только для того, чтобы подчеркнуть: следовать общим тенденциям очень важно, даже если эти тенденции противоречат нормам отдельно взятой платформы. К слову, вот отличный материал от InVision о том, как использовать Material Design и при этом не выглядеть, как Google.
3. У вашего приложения сложная функциональность и интерфейс.
Любое мобильное приложение должно быть максимально простым в использовании, даже если у него тонна функций. Если у приложения богатая функциональность и много контента, то следует ориентироваться на платформу.
Рассмотрим в качестве примера Accent Kit — приложение, которое мы разработали для ведущих британских тренеров по акцентам и диалекту для актеров. Accent Kit содержит множество функций (воспроизведение и запись аудио, просмотр текстов, изображений и так далее), которые призваны помочь актерам освоить акцент. Когда перед Yalantis была поставлена задача перенести приложение на Android, мы не рассматривали иных вариантов, кроме как следование стандартам платформы. В противном случае пользователи испытывали бы неудобства, пытаясь разобраться в функциональности приложения.
Следование установленным нормам платформы и предоставление пользователям того опыта, к которому они привыкли, позволяет нам оправдать их ожидания.
Но где одни приложения имеют успех, других может ожидать провал. Ориентация на платформу — не лучшее решение для компании, которая стремится поддерживать уникальность собственного бренда. В конце концов, бренд — это лицо, которое помогает приносить деньги, поэтому не стоит превращать свое приложение в «примерного ученика», который во всем следует правилам, но при этом не слишком популярен среди одноклассников.
Подход 3: Смешанный
Проявив некоторую находчивость, можно остаться верным стандартам платформы, сохраняя собственное лицо. Подобный смешанный подход к мультиплатформенной адаптации дизайна — это сбалансированный синтез двух вышеописанных подходов. И такой подход самый сложный.
Следуя смешанному подходу, необходимо учитывать два типа пользователей: те, кто знаком с вашим продуктом, и те, кто никогда им не пользовался. Первые верны бренду — вторые привыкли к особенностям платформы. Дизайнеры, выбирающие этот подход, в некотором смысле дипломаты, которые представляют интересы бренда и в то же время налаживают дружеские отношения с пользователями. Они должны определить, какие элементы интерфейса выделяют продукт среди других, и найти специфические для конкретной платформы решения, которые не повредят бренду.
Давайте посмотрим, как с этим справились SoundCloud, Facebook, Airbnb и Viber.
SoundCloud
Популярное приложение для распространения музыки SoundCloud появилось на обоих рынках одновременно.
Несмотря на то, что дизайнеры адаптировали дизайн для каждой платформы отдельно, они вложили немалые усилия в сохранение целостности бренда.
На мобильных платформах мы стремимся найти баланс между привычнымиспользованием приложений на родных iOS или Android и особенностями, которые характерны для нашего продукта и отражают наш бренд. Например,перемотка трека, которую мы называем скраббинг, на нашей диаграмме воспроизведения работает совершенно иначе, чем в любом другом подобном сервисе.
Сильвиан Гранде, вице-президент SoundCloud по направлениям «продукт», «создатели» и «монетизация»
Среди характерных для платформы решений здесь — стандартный для iOS tap bar внизу экрана (с парой дизайнерских изменений) и search bar вверху. В Android-версии — типичный tool bar вверху экрана, гамбургер-меню слева и иконка поиска, раскрывающая search bar. Обе версии приложения используют стандартное для платформ управление.
Первая мобильная инкарнация Facebook полагалась на HTML5, что, как позже признал Марк Цукерберг, было большой ошибкой. В итоге Facebook взяла курс на улучшение нативного UX на iOS, Android и других платформах.
С одной стороны, бренд Facebook имеет высокую узнаваемость, с другой — это мультиплатформенная сеть с огромным количеством пользователей. Поэтому смешанный подход был здесь уместнее всего.
Версии Facebook для iOS и Android похожи друг на друга, но при этом каждая ощущается нативно на своей платформе. В следовании гайдлайнам создатели Facebook руководствовались интересами пользователей: они избрали минималистичный стиль дизайна, оставив, таким образом, больше пространства для контента, который является ключевой особенностью приложения.
Версия для iOS использует стандартные для этой ОС navigation bar внизу экрана и search bar. В версии для Android переключение между разделами происходит с помощью tap bar, который, как в большинстве Android-приложений, расположен вверху экрана.
Airbnb
Airbnb — один из наиболее активно развивающихся стартапов.Он завоевал свою позицию на рынке во многом благодаря своей простоте и фантастическому взаимодействию с пользователями.
Дизайнеры Airbnb избрали смешанный подход при переносе сервиса на мобильные платформы. Бренд Airbnb уникален сам по себе и привлекает внимание людей по всему миру. Однако именно контент заставляет приложение работать. Поэтому создатели Airbnb сделали приложение удобным для пользователей обеих платформ.
Мы хотели, чтобы приложение выглядело знакомо для всех пользователей, поэтому мы должны были следовать нормам, к которым они привыкли. Но в то же время мы хотели, чтобы это был именно Airbnb.
Связь между платформами (мобильные, веб, email, и так далее) очень важна для доверительных отношений, которые мы строим с пользователями, поэтому дизайнерские решения не могут быть определены исключительно нормами различных платформ.
Кэти Дилл, ведущий UX-дизайнер AirbnbСвязующим звеном здесь выступает бренд.
На первый взгляд, главное различие между версиями Airbnb для iOS и Android — это расположение navigation bar: внизу на iOS и вверху на Android.
Если бы не эта маленькая, но очень важная особенность, мы бы отнесли Airbnb к приложениям, которые следуют подходу ориентации на целостность бренда. Но если присмотреться, то разница между версиями все-таки есть.
Экран поиска Airbnb на iOS (слева) и Android
Учитывая простую функциональность Airbnb, более глубокое соответствие особенностям платформ усложнило бы приложение.
Навигация Airbnb на iOS (слева) и Android
Viber
И еще один невероятно популярный мессенджер. Мы считаем Viber наиболее ярко выраженным представителем смешанного подхода к дизайну приложений.
В отличие от дизайнеров WhatsApp и Telegram, дизайнерам Viber удалось сохранить идентичность бренда и при этом соответствовать требованиям, установленным для платформ.
Смешанный подход позволил им добиться того, что приложение одновременно узнаваемо на всех платформах, а также удобно для любого пользователя.
Соответствие особенностям бренда здесь достигнуто нестандартными цветами и иконками, которые идентичны на обеих платформах. Для простоты навигация между экранами специфична для каждой платформы.
Список контактов Viber на iOS (слева) и Android
Несмотря на строгую направленность на бренд, Viber полностью оправдывает ожидания пользователей относительно интерфейса и взаимодействия с ним и уделяет большое внимания функциональности.
Когда стоит следовать смешанному подходу
1. Когда вы итеративно разрабатываете приложение и совершенствуете дизайн, отталкиваясь от отзывов и оценок пользователей.
Смешанный подход подразумевает постоянную работу над UX, что является одной из основ методологии итеративного дизайна. Это значит, что вам следует анализировать метрики, чтобы понимать, как пользователь взаимодействует с продуктом, регулярно выпускать обновления и улучшения, снова анализировать метрики и поддерживать рост всех показателей.
Итеративный дизайн представляет собой исследование, которое проводится в рамках цикличного процесса прототипирования, тестирования, анализа и улучшения каждой последующей версии продукта.
Смешанный подход — это тот особый случай, когда вы даете пользовательскому опыту говорить за бренд. Мы уверены, что это лучший путь для идеальной мультиплатформенной адаптации. Он дает вам возможность оставаться верными платформе, бренду и пользователю. Кроме того, этот подход позволяет дизайнеру при необходимости смещать баланс как в пользу идентичности бренда, так и в пользу гайдлайнов платформы, представляя на выходе великолепный продукт.
Единственный недостаток смешанного подхода — то, что он практически невозможен для маленького стартапа, который не может себе позволить вкладывать слишком много времени и денег в постоянное улучшение дизайна приложения. Более того, умудриться не промахнуться с дизайном уже в первой версии приложения, без какого-либо тестирования на пользователях — редкая удача.
Какой подход побеждает
Даже несмотря на то, что смешанный метод кажется лучшим, мы настаиваем, что ни один из подходов, описанных в этой статье, не является идеальным.
Выбор идентичности бренда в качестве приоритета может повлечь за собой ряд проблем с UX, даже если приложение будет классно выглядеть. Ведь на самом деле это пользователи должны решать, как должно выезжать меню, где совершить свайп, чтобы получить доступ к определенной функции, и как вернуться на страницу профиля.
Приложения, которые в первую очередь ориентируются на платформу, рискуют выглядеть слишком стандартно, что плохо влияет на бренд. С другой стороны, такие приложения все равно могут иметь успех у широкой аудитории, особенно если в них широкая функциональность.
Приложения, которые мы рассмотрели в качестве примеров смешанного подхода, — достаточно редкие случаи действительно успешной мультиплатформенной адаптации. Но почему бы не попробовать достичь таких же результатов?
Создавая дизайн приложений, мы должны помнить, что делаем это для реальных людей, которые будут использовать эти приложения на реальных устройствах в реальном мире.
На самом деле, важен не бренд, не платформа, и даже не ваша креативность.
Единственное, что имеет значение, — это пользователи.
А пользователям неинтересно, какой подход к мультиплатформенной адаптации интерфейса вы использовали. Нравится нам это или нет, но пользователей интересует лишь опыт, который им предоставляет ваша компания. И если опыт положительный, то компания имеет успех.
Мы хотели бы услышать ваши мнения относительно адаптации пользовательских интерфейсов для нескольких платформ и подходов, которые вы считаете лучшими. Если вы знаете еще приложения, которые могут послужить иллюстрацией к описанным в статье способам, — пожалуйста, делитесь ими в комментариях.
Макет — Основы — Руководство по пользовательскому интерфейсу — Дизайн
Использование согласованного макета, который адаптируется к различным контекстам, делает ваш опыт более доступным и помогает людям наслаждаться любимыми приложениями и играми на всех своих устройствах.
Направляющие и безопасные области
Направляющая макета определяет прямоугольную область, которая помогает размещать, выравнивать и размещать контент на экране. Система включает предопределенные направляющие макета, которые упрощают применение стандартных полей вокруг контента и ограничивают ширину текста для оптимальной читабельности. Вы также можете определить пользовательские направляющие макета.
Безопасная область определяет область в представлении, которая не закрыта панелью навигации, панелью вкладок, панелью инструментов или другими представлениями, которые может предоставить окно или сцена. Безопасные зоны необходимы для того, чтобы избежать интерактивных функций и функций дисплея устройства, таких как Dynamic Island на iPhone или корпус камеры на некоторых моделях Mac.
В iOS, iPadOS и tvOS система определяет набор из признаков , которые характеризуют изменения в среде устройства, которые могут повлиять на то, как ваше приложение отображается на экране.
Используя SwiftUI или Auto Layout, вы можете гарантировать, что ваш интерфейс динамически адаптируется к широкому спектру характеристик и контекстов, включая:
- Различные размеры экрана устройства, разрешения и цветовые пространства
- Различные ориентации устройства (книжная/альбомная)
- Разделенный вид
- Поддержка внешнего дисплея, масштабирование дисплея и режимы многозадачности на iPad
- Изменение размера текста Dynamic Type
- Функции интернационализации, которые система может включить в зависимости от локали (направление макета слева направо/справа налево, форматирование даты/времени/числа, вариант шрифта, длина текста)
- Доступность системных функций
Передовой опыт
Разработайте согласованный макет, который изящно адаптируется к изменениям контекста, при этом максимально отображая одно и то же содержимое. Люди ожидают, что ваш интерфейс будет хорошо работать и оставаться знакомым, когда они поворачивают свое устройство, изменяют размер окна, добавляют другой дисплей или переключаются на другое устройство.
Обеспечьте адаптируемый интерфейс, соблюдая определенные системой безопасные области, поля и направляющие, а также указывая модификаторы макета для точной настройки размещения представлений в вашей иерархии.
Уважайте основные функции отображения и системы на каждой платформе. Безопасные области помогают использовать такие функции, как угловой радиус и корпуса датчиков на различных устройствах, и не мешать интерактивным системным элементам, таким как Dynamic Island на iPhone, а также индикатору «Домой» и переключателю приложений на iPhone и iPad. Безопасные области также помогают учитывать интерактивные компоненты, такие как полосы, которые динамически перемещают содержимое при изменении размеров.
Используйте размещение, чтобы передать относительную важность. Как правило, размещайте основные элементы в верхней половине экрана или окна, ближе к ведущей стороне. Люди обычно начинают с этой области, смотрят ли они на экран или используют программу чтения с экрана, например VoiceOver.
Поднимите важную информацию, предоставив ей достаточно места. Люди хотят видеть самую важную информацию мгновенно, поэтому вы не хотите загромождать экран или окно несущественными деталями. Люди могут легко получить доступ к вторичной информации с помощью прокрутки.
Создавайте визуальные группы, чтобы помочь людям найти нужную им информацию. Например, вы можете использовать пустое пространство, формы фона, цвета и материалы или линии-разделители для отображения связанных элементов и информации в отдельных областях.
Используйте выравнивание для облегчения визуального сканирования и передачи информации об организации и иерархии. Выравнивание делает приложение аккуратным и упорядоченным, помогает людям сосредоточиться при прокрутке и упрощает поиск информации. Отступы и выравнивание также могут помочь людям визуализировать информационную иерархию.
Помните о соотношении сторон. Экраны разных размеров могут иметь разное соотношение сторон, в результате чего обложка будет выглядеть обрезанной, в виде почтового ящика или столбчатого ящика.
В этом случае не меняйте соотношение сторон изображения; вместо этого масштабируйте его, чтобы заполнить экран, чтобы важный визуальный контент оставался в поле зрения на всех размерах дисплея.
Будьте готовы к изменению размера текста. Люди ожидают, что большинство приложений будут реагировать, если они выберут другой размер текста. Чтобы приспособиться к изменениям размера текста, вам может потребоваться настроить макет. Руководство по отображению текста в приложении см. в разделе Типографика.
Когда это возможно, рассмотрите возможность намека на скрытый контент, частично отображая закадровые элементы. В больших коллекциях, содержимое которых не помещается на одном экране, вы можете намекнуть на дополнительное содержимое, показывая части элементов за пределами экрана.
На сенсорных экранах предусмотрите достаточное количество сенсорных элементов для интерактивных компонентов. Сохраняйте минимальную область касания размером 44x44 точки для всех элементов управления.
Предварительный просмотр приложения на нескольких устройствах с использованием различных ориентаций, локализаций и размеров текста. Хотя, как правило, лучше предварительно просматривать такие функции, как широкий цвет, на реальных устройствах, вы можете использовать Xcode Simulator для проверки обрезки и других проблем с макетом. Например, если ваше приложение для iOS поддерживает ландшафтный режим, вы можете использовать Simulator, чтобы ваши макеты выглядели великолепно независимо от того, поворачивается ли устройство влево или вправо.
Особенности платформы
iOS, iPadOS
Стремитесь поддерживать как книжную, так и альбомную ориентацию. Люди выбирают разные ориентации по разным причинам и обычно ожидают, что приложения будут хорошо работать в любом контексте. Если важно, чтобы ваше приложение работало в одной ориентации, не говорите людям поворачивать свои устройства, чтобы они совпадали; если ваше приложение не поворачивается автоматически, когда кто-то держит устройство в неподдерживаемой ориентации, они инстинктивно поймут, что нужно его повернуть.
Если ваше приложение предназначено только для альбомной ориентации, убедитесь, что оно одинаково хорошо работает независимо от того, поворачивают ли пользователи свое устройство влево или вправо.
Если ваше приложение работает на определенном устройстве, убедитесь, что оно работает на всех размерах экрана для этого устройства. Другими словами, приложение только для iPhone должно работать на любом размере экрана iPhone, а приложение только для iPad должно работать на любом размере экрана iPad. Инструкции см. в разделе Размеры и ориентация экрана устройства.
Вставные полноразмерные кнопки. Соблюдайте стандартные системные поля по бокам полноразмерных кнопок. Полноразмерная кнопка в нижней части экрана обычно выглядит лучше, когда у нее закругленные углы и она выровнена по нижней части безопасной области, что также гарантирует, что она не конфликтует с индикатором «Домой».
Расширение визуального содержимого на весь экран.
Убедитесь, что фон простирается до краев экрана, а макеты с вертикальной прокруткой, такие как таблицы и коллекции, продолжаются до самого низа.
На iPad рассмотрите возможность размещения элементов управления по бокам экрана в альбомной ориентации. Когда элементы управления находятся в левой и правой частях экрана, люди могут легко дотянуться до них обеими руками, держа устройство.
По возможности избегайте размещения интерактивных элементов управления в нижней части экрана. Независимо от ориентации люди используют системные жесты в нижней части экрана для доступа к таким функциям, как главный экран и переключатель приложений, и эти жесты могут отменять пользовательские жесты, которые вы реализуете в этой области. Также избегайте размещения элементов управления в дальних углах экрана, потому что людям может быть трудно до них дотянуться. Если в вашей игре необходимо разместить элементы управления в нижней части экрана — под безопасной зоной — используйте соответствующие вставки при размещении их вверху и внизу экрана и оставьте достаточно места вокруг индикатора «Домой», чтобы люди случайно не нацелились на него.
это при попытке взаимодействия с элементом управления.
Будьте готовы к разной высоте строки состояния. Если содержимое отображается под строкой состояния, можно использовать безопасную область для динамического изменения положения содержимого по мере необходимости.
Скрывайте строку состояния только в том случае, если это повышает ценность или расширяет ваши возможности. В строке состояния отображается информация, которую люди считают полезной, и она занимает область экрана, которую большинство приложений не используют в полной мере, поэтому рекомендуется держать ее видимой.
Безопасные зоны iOS, iPadOS
Безопасная область определяет область в представлении, которая не покрыта панелью навигации, панелью вкладок, панелью инструментов или другими представлениями, которые может предоставить контроллер представления.
Руководство по раскладке клавиатуры iOS
iOS 15 и более поздних версий содержит руководство по раскладке клавиатуры, которое представляет пространство, занимаемое клавиатурой в данный момент, и учитывает вставки безопасной области.
Использование этого руководства может помочь вам сделать клавиатуру неотъемлемой частью вашего приложения, независимо от типа клавиатуры, которую используют люди, или от того, где они ее размещают. Руководство для разработчиков см. в UIKeyboardLayoutGuide.
macOS
Не размещайте элементы управления или важную информацию внизу окна. Люди часто перемещают окна так, что их нижний край оказывается ниже нижнего края экрана.
tvOS
Размеры телевизоров сильно различаются. На Apple TV макеты приложений не адаптируются автоматически к размеру экрана, как на iPhone или iPad. Вместо этого приложения отображают один и тот же интерфейс на каждом дисплее. Будьте особенно внимательны при разработке макета, чтобы он отлично смотрелся на экранах разных размеров.
Придерживайтесь безопасной зоны экрана. Вставка основного содержимого на 60 пикселей сверху и снизу экрана и на 80 пикселей по бокам. Людям может быть трудно увидеть контент, который находится близко к краям, и может произойти непреднамеренное кадрирование из-за чрезмерного сканирования на старых телевизорах.
Разрешить только частично отображаемый закадровый контент и элементы, которые преднамеренно вытекают за пределы экрана, за пределами этой зоны.
Включите соответствующие отступы между фокусируемыми элементами. Когда вы используете UIKit и API фокуса, элемент становится больше, когда он попадает в фокус. Подумайте, как выглядят элементы, когда они сфокусированы, и убедитесь, что они ненамеренно не перекрывают важную информацию.
Используйте шаблоны макетов для создания мультимедийных приложений и используйте сетки для создания коллекций контента. Если в макете вашего мультимедийного приложения просто необходимо красиво представить содержимое с минимальной настройкой макета, используйте готовый шаблон макета. Если вашему приложению необходимо продемонстрировать коллекцию контента, используйте сетку, чтобы упростить просмотр контента на расстоянии и быструю навигацию с помощью пульта дистанционного управления.
Шаблоны макетов
Шаблоны Apple TV обеспечивают четкие, согласованные макеты, которые делают содержимое центром внимания.
Эти шаблоны, основанные на JavaScript и языке разметки Apple TV (TVML), динамически загружаются и заполняются контентом, когда люди открывают ваше приложение. Шаблоны обеспечивают гибкость при создании приложений с богатым содержимым с предопределенными макетами, которые хорошо смотрятся на экране телевизора и идеально подходят для потоковой передачи мультимедиа.
Выберите шаблон в зависимости от его назначения. Вы можете настроить фон, цвет, размер, макет и другие параметры шаблона, но если ваши настройки делают шаблон неприятным или неузнаваемым, рассмотрите возможность использования другого шаблона или разработки пользовательского интерфейса.
Изменяйте шаблоны со вкусом. Шаблоны макетов обладают широкими возможностями настройки; вы можете контролировать фон, оттенок, размер, расположение и многое другое. При разработке приложения по возможности полагайтесь на контент, избегая настроек, которые кажутся отвлекающими, раздражающими или навязчивыми.
Поймите назначение шаблона перед его использованием. Если ваши настройки делают базовый шаблон неузнаваемым, рассмотрите возможность использования другого шаблона или создания пользовательского интерфейса.
Для получения подробной информации об интеграции шаблонов в ваше приложение см. TVML.
Сетки
Следующие макеты сетки обеспечивают оптимальное качество просмотра. Обязательно используйте соответствующий интервал между несфокусированными строками и столбцами, чтобы предотвратить перекрытие, когда элемент находится в фокусе.
Если вы используете элемент потока представления коллекции UIKit, количество столбцов в сетке определяется автоматически на основе ширины и интервала вашего контента. Руководство для разработчиков см. в разделе UICollectionViewFlowLayout.
Включить дополнительный интервал по вертикали для озаглавленных строк. Если у строки есть заголовок, обеспечьте достаточное расстояние между нижней частью предыдущей несфокусированной строки и центром заголовка, чтобы избежать скученности.
Также обеспечьте интервал между нижней частью заголовка и верхней частью несфокусированных элементов в строке.
Используйте постоянный интервал. Когда контент расположен неравномерно, он больше не выглядит как сетка, и людям труднее его просматривать.
Сделать частично скрытое содержимое симметричным. Чтобы привлечь внимание к полностью видимому содержимому, сохраняйте частично скрытый закадровый контент одинаковой ширины с каждой стороны экрана.
watchOS
Создавайте контент так, чтобы он простирался от одного края экрана до другого. Рамка Apple Watch создает естественное визуальное дополнение содержимого. Чтобы не тратить драгоценное пространство, подумайте о том, чтобы свести к минимуму отступы между элементами.
Не размещайте в интерфейсе более двух или трех элементов управления рядом друг с другом. Как правило, отображать не более трех кнопок, содержащих глифы, или двух кнопок, содержащих текст, подряд.
Хотя обычно лучше, чтобы текстовые кнопки занимали всю ширину экрана, две расположенные рядом кнопки с короткими текстовыми метками также могут работать хорошо, если экран не прокручивается.
Поддержка авторотации в представлениях, которые люди могут захотеть показать другим. Когда люди отводят запястье в сторону, приложения обычно реагируют на движение, переводя дисплей в спящий режим, но в некоторых случаях имеет смысл автоматически поворачивать содержимое. Например, владелец может захотеть показать изображение другу или отобразить QR-код читателю. Руководство для разработчиков см. в разделе isAutorotating.
Технические характеристики
iOS, iPadOS
Размеры и ориентация экрана устройства
| Устройство | Размеры (портрет) |
|---|---|
| 12,9-дюймовый iPad Pro | 1024x1366 точек (2048x2732 пикселей при 2x) |
| 11-дюймовый iPad Pro | 834x1194 точек (1668x2388 пикселей при 2x) |
| 10,5-дюймовый iPad Pro | 834x1194 точек (1668x2388 пикселей при 2x) |
| 9,7-дюймовый iPad Pro 902:30 | 768x1024 точек (1536x2048 пикселей при 2x) |
| iPad mini 7,9 дюйма | 768x1024 точек (1536x2048 пикселей при 2x) |
| 10,5-дюймовый iPad Air | 834x1112 точек (1668x2224 пикселей при 2x) |
| iPad Air 9,7 дюйма | 768x1024 точек (1536x2048 пикселей при 2x) |
| iPad 10,2 дюйма | 810x1080 точек (1620x2160 пикселей при 2x) |
| iPad 9,7 дюйма | 768x1024 точек (1536x2048 пикселей при 2x) |
| iPhone 14 Pro Max | 430x932 точек (1290x2796 пикселей при 3x) |
| iPhone 14 Pro | 393x852 точек (1179x2556 пикселей при 3x) |
| iPhone 14 Plus | 428x926 точек (1284x2778 пикселей при 3x) |
| iPhone 14 | 390x844 точек (1170x2532 пикселей при 3x) |
| iPhone 13 Pro Max | 428x926 точек (1284x2778 пикселей при 3x) |
| iPhone 13 Pro | 390x844 точек (1170x2532 пикселей при 3x) 902:30 |
| iPhone 13 | 390x844 точек (1170x2532 пикселей при 3x) |
| iPhone 13 мини | 375x812 точек (1125x2436 пикселей при 3x) |
| iPhone 12 Pro Max | 428x926 точек (1284x2778 пикселей при 3x) |
| iPhone 12 Pro | 390x844 точек (1170x2532 пикселей при 3x) |
| iPhone 12 | 390x844 точек (1170x2532 пикселей при 3x) |
| iPhone 12 мини | 375x812 точек (1125x2436 пикселей при 3x) 902:30 |
| iPhone 11 Pro Max | 414x896 точек (1242x2688 пикселей при 3x) |
| iPhone 11 Pro | 375x812 точек (1125x2436 пикселей при 3x) |
| iPhone 11 | 414x896 точек (828x1792 пикселей при 2x) |
| iPhone XS Max | 414x896 точек (1242x2688 пикселей при 3x) |
| iPhone XS | 375x812 точек (1125x2436 пикселей при 3x) |
| iPhone XR | 414x896 пт (828x1792 пикселя @2x) |
| iPhone Х | 375x812 точек (1125x2436 пикселей при 3x) |
| iPhone 8 Plus | 414x736 точек (1080x1920 пикселей при 3x) |
| iPhone 8 | 375x667 точек (750x1334 пикселей при 2x) |
| iPhone 7 Plus | 414x736 точек (1080x1920 пикселей при 3x) |
| iPhone 7 | 375x667 точек (750x1334 пикселей при 2x) |
| iPhone 6s Plus | 414x736 пт (1080x1920 пикселей @3x) |
| iPhone 6s | 375x667 точек (750x1334 пикселей при 2x) |
| iPhone 6 Plus | 414x736 точек (1080x1920 пикселей при 3x) |
| iPhone 6 | 375x667 точек (750x1334 пикселей при 2x) |
| 4,7-дюймовый iPhone SE | 375x667 точек (750x1334 пикселей при 2x) |
| 4-дюймовый iPhone SE | 320x568 точек (640x1136 пикселей при 2x) |
| iPod touch 5-го поколения и новее 902:30 | 320x568 точек (640x1136 пикселей при 2x) |
ПРИМЕЧАНИЕ Все коэффициенты масштабирования в приведенной выше таблице являются коэффициентами масштабирования UIKit, которые могут отличаться от исходных коэффициентов масштабирования.
Руководство для разработчиков см. в разделе Scale и nativeScale.
Классы размеров устройств
Различные комбинации классов размеров применяются к полноэкранному режиму на разных устройствах в зависимости от размера экрана.
| Устройство | Книжная ориентация | Альбомная ориентация |
|---|---|---|
| 12,9-дюймовый iPad Pro | Стандартная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| 11-дюймовый iPad Pro | Стандартная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| 10,5-дюймовый iPad Pro | Стандартная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| iPad 9,7 дюйма | Стандартная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| iPad mini 7,9 дюйма | Стандартная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| iPhone 14 Pro Max | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone 14 Pro | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 14 Plus | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone 14 | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 13 Pro Max | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone 13 Pro | Компактная ширина, стандартная высота | Компактная ширина, компактная высота 902:30 |
| iPhone 13 | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 13 мини | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 12 Pro Max | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone 12 Pro | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 12 | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 12 мини | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 11 Pro Max | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone 11 Pro | Компактная ширина, стандартная высота 902:30 | Компактная ширина, компактная высота |
| iPhone 11 | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone XS Max | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone XS | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone XR | Компактная ширина, стандартная высота 902:30 | Стандартная ширина, компактная высота |
| iPhone Х | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 8 Plus | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone 8 | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 7 Plus | Компактная ширина, стандартная высота 902:30 | Стандартная ширина, компактная высота |
| iPhone 7 | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone 6s Plus | Компактная ширина, стандартная высота | Стандартная ширина, компактная высота |
| iPhone 6s | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
| iPhone SE | Компактная ширина, стандартная высота 902:30 | Компактная ширина, компактная высота |
| iPod touch 5-го поколения и новее | Компактная ширина, стандартная высота | Компактная ширина, компактная высота |
На iPad классы размера также применяются, когда ваше приложение или игра работает в многозадачной конфигурации.
| Устройство | Режим | Книжная ориентация | Альбомная ориентация |
|---|---|---|---|
| 12,9-дюймовый iPad Pro | Разделенный вид 2/3 | Компактная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| Разделенный вид 1/2 | Н/Д | Стандартная ширина, стандартная высота | |
| Разделенный вид на 1/3 | Компактная ширина, стандартная высота | Компактная ширина, стандартная высота | |
| 11-дюймовый iPad Pro | Разделенный вид 2/3 | Компактная ширина, стандартная высота 902:30 | Стандартная ширина, стандартная высота |
| Разделенный вид 1/2 | Н/Д | Компактная ширина, стандартная высота | |
| Разделенный вид на 1/3 | Компактная ширина, стандартная высота | Компактная ширина, стандартная высота | |
| 10,5-дюймовый iPad Pro | Разделенный вид 2/3 | Компактная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| Разделенный вид 1/2 | Н/Д | Компактная ширина, стандартная высота | |
| Разделенный вид на 1/3 | Компактная ширина, стандартная высота | Компактная ширина, стандартная высота | |
| iPad 9,7 дюйма | Разделенный вид 2/3 | Компактная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| Разделенный вид 1/2 | Н/Д | Компактная ширина, стандартная высота 902:30 | |
| Разделенный вид на 1/3 | Компактная ширина, стандартная высота | Компактная ширина, стандартная высота | |
| 7,9-дюймовый iPad mini 4 | Разделенный вид 2/3 | Компактная ширина, стандартная высота | Стандартная ширина, стандартная высота |
| Разделенный вид 1/2 | Н/Д | Компактная ширина, стандартная высота | |
| Разделенный вид на 1/3 | Компактная ширина, стандартная высота 902:30 | Компактная ширина, стандартная высота |
watchOS
| Серия | Размер экрана | Ширина (пиксели) | Высота (в пикселях) |
|---|---|---|---|
| Apple Watch Ultra | 49мм | 410 | 502 |
| 7 и выше | 41 мм | 352 | 430 |
| 7 и выше | 45 мм 902:30 | 396 | 484 |
| 4, 5 и 6 | 40 мм | 324 | 394 |
| 4, 5 и 6 | 44 мм | 368 | 448 |
| 1, 2 и 3 | 38 мм | 272 | 340 |
| 1, 2 и 3 | 42 мм | 312 | 390 |
Список изменений
14 сентября 2022 г. | Добавлены спецификации для iPhone 14 Pro Max, iPhone 14 Pro, iPhone 14 Plus, iPhone 14 и Apple Watch Ultra. |
Специальные возможности — Основы — Руководство по пользовательскому интерфейсу — Дизайн
Люди используют специальные возможности Apple, чтобы персонализировать взаимодействие со своими устройствами удобным для них способом.
Приложение или игра со специальными возможностями поддерживает персонализацию специальных возможностей по дизайну и предоставляет всем пользователям отличный пользовательский опыт, независимо от их возможностей или того, как они используют свои устройства.
Примерно каждый седьмой человек имеет инвалидность, которая влияет на то, как он взаимодействует с миром и своими устройствами. Люди могут страдать инвалидностью в любом возрасте, на любой срок и с разной степенью тяжести. Например, ситуационная инвалидность — например, травма запястья в результате падения или потеря голоса в результате чрезмерного использования — может повлиять на то, как почти все люди взаимодействуют со своими устройствами в разное время.
Передовой опыт
Дизайн с учетом доступности. Доступность — это не просто предоставление информации людям с ограниченными возможностями, это доступность информации для всех, независимо от их возможностей или положения. Проектирование вашего приложения с учетом доступности означает расстановку приоритетов простоты и восприятия и изучения каждого дизайнерского решения, чтобы убедиться, что оно не исключает людей, которые имеют разные способности или взаимодействуют со своими устройствами по-разному.
Простота — Включение знакомых, последовательных взаимодействий, которые делают сложные задачи простыми и понятными для выполнения.
Восприимчивость — Убедиться, что весь контент может быть воспринят независимо от того, используют ли люди зрение, слух или осязание.
Поддержка персонализации. Вы уже проектируете свой опыт таким образом, чтобы он адаптировался к изменениям окружающей среды, таким как ориентация устройства, размер экрана, разрешение, цветовая гамма и разделенный вид, потому что вы хотите, чтобы люди наслаждались им в любом контексте и на всех поддерживаемых устройствах.
С минимальными дополнительными усилиями вы можете спроектировать свое приложение так, чтобы оно поддерживало специальные возможности, которые люди используют для персонализации способов взаимодействия со своими устройствами.
При использовании стандартных компонентов для реализации интерфейса текст и элементы управления автоматически адаптируются к нескольким параметрам специальных возможностей, таким как «Жирный текст», «Увеличенный текст», «Инверсия цветов» и «Увеличение контрастности».
Аудит и тестирование вашего приложения или игры на доступность. В ходе аудита проверяется каждый элемент вашего опыта и выдается полный список проблем, которые необходимо исправить. Тестирование помогает вам убедиться, что все могут выполнять самые важные задачи в вашем приложении, независимо от того, как они взаимодействуют со своими устройствами.
Когда вы тестируете важные пользовательские потоки с включенными функциями специальных возможностей, вы получаете представление о проблемах взаимодействия с устройством различными способами.
Вы также обнаружите места, в которых ваше приложение может не обеспечить комфортного взаимодействия с пользователем.
Например, обычным потоком пользователей в приложении для социальных сетей может быть «отправить ответ на комментарий». Задачи, составляющие этот поток, могут включать:
- Читать опубликованные комментарии
- Выберите комментарий к ответу
- Открыть представление ответа
- Изменить ответ
- Опубликовать ответ
Для каждого критического пользовательского потока в вашем приложении или игре включите специальные возможности, такие как VoiceOver, Уменьшение движения или Большой размер текста, и убедитесь, что вы можете без труда выполнять все задачи в потоке. После того, как вы устраните обнаруженные проблемы, включите другую функцию специальных возможностей и снова запустите поток пользователей. Чтобы помочь вам проверить, протестировать и исправить ваше приложение или игру, рассмотрите возможность использования инспектора специальных возможностей Xcode.
Взаимодействия
Вспомогательные технологии, такие как VoiceOver, и специальные возможности, такие как приспособление для отображения, расширяют возможности взаимодействия людей со своими устройствами. Поскольку эти технологии и функции интегрируются с системными взаимодействиями, важно, чтобы вы правильно поддерживали системные взаимодействия в своем приложении.
Жесты
Не переопределять жесты платформы. Люди ожидают, что системные жесты, такие как смахивание вниз, чтобы открыть Центр уведомлений, или жесты трекпада macOS, доступные в настройках системы, будут работать независимо от того, какое приложение они используют.
Предпочтите упрощенные жесты для обычных взаимодействий. Сложные жесты, такие как жесты несколькими пальцами, длительные нажатия или повторные нажатия кнопок, могут быть сложными для многих людей. Использование простейших возможных жестов улучшает опыт для всех, кто взаимодействует с вашим приложением.
Предоставьте альтернативные способы выполнения действий на основе жестов. Включите параметр для людей, которые не могут выполнить определенный жест. Например, если смахивание удаляет строку в таблице, вы также можете предоставить альтернативный способ удаления элементов в режиме редактирования или с помощью кнопки «Удалить» в представлении сведений об элементе.
По возможности делайте основные функции вашего приложения доступными посредством более чем одного типа физического взаимодействия. Например, приложение «Камера» на iPhone и iPad позволяет делать снимки, нажимая экранную кнопку или кнопку уменьшения громкости устройства. Помимо того, что сделать фотосъемку более удобной для всех, эти альтернативные взаимодействия предоставляют варианты для людей с ограниченной силой хвата или ловкостью.
Сделайте перетаскивание доступным в приложении для iOS или iPadOS. Когда вы используете API специальных возможностей для определения источников перетаскивания и целей перетаскивания в своем приложении, вспомогательные технологии могут помочь людям перетаскивать элементы на экране.
Руководство для разработчиков см. в разделах accessibilityDragSourceDescriptors и accessibilityDropPointDescriptors.
Кнопки и элементы управления
Придайте всем сенсорным элементам управления и интерактивным элементам целевой размер не менее 44x44 pt. Людям с ограниченной подвижностью нужны более крупные цели, чтобы они могли взаимодействовать с вашим приложением. Взаимодействовать со слишком маленькими элементами управления на любой платформе может быть неприятно, даже когда люди используют указатель.
Характеристика доступности пользовательских элементов. Вы можете использовать системные API, чтобы сообщить вспомогательным технологиям, как ведет себя компонент. Например, использование кнопки или NSAccessibilityButton для характеристики представления как кнопки означает, что VoiceOver произносит описание представления, за которым следует слово кнопка , которое сообщает людям, что представление ведет себя как кнопка.
Используйте единую иерархию стилей, чтобы сообщить об относительной важности кнопок. Когда вы используете последовательную иерархию стилей кнопок, люди могут понять важность кнопок на основе их внешнего вида. В iOS, iPadOS и tvOS, например, вы можете использовать визуально заметный стиль заливки для кнопки, которая выполняет наиболее вероятное действие в представлении, используя менее заметные стили — например, серый или простой — для кнопок, которые позволяют выполнять менее важные действия. . (Руководство для разработчиков см. в разделе UIButton.Configuration.) Люди также могут включить формы кнопок, чтобы было проще отличать активные кнопки от окружающего содержимого.
Предпочтение отдается системному переключателю. SwiftUI предоставляет переключатель, который указывает свое состояние по положению ручки и цвету заливки. Однако для некоторых людей добавление меток облегчает понимание того, включен переключатель или выключен. Когда вы используете переключатели, предоставленные системой, iOS, iPadOS, tvOS и watchOS автоматически отображают в них глифы включения/выключения, когда люди включают метки включения/выключения.
Рассмотрите возможность добавления к ссылкам визуального индикатора в дополнение к цвету, например подчеркивания. Можно использовать цвет для идентификации связи, но если вы используете его в качестве единственного индикатора, люди — например, люди с дальтонизмом или когнитивными или ситуационными нарушениями внимания — могут не заметить различия.
Пользовательский ввод
Позвольте людям вводить информацию, говоря вместо того, чтобы печатать. Добавление кнопки диктовки в поле ввода текста позволяет людям выбирать речь в качестве предпочтительного метода ввода. Если вы создаете собственную клавиатуру, не забудьте включить клавишу микрофона для диктовки.
Поддержка Siri или ярлыков для выполнения важных задач только голосом. Чтобы узнать больше о включении взаимодействия Siri в вашем приложении, см. Siri.
По возможности не запрещайте людям выбирать обычный текст. Многие люди используют выделенный текст в качестве исходных данных для переводов и определений.
Тактильные ощущения
Поддержка определяемых системой тактильных ощущений. Многие люди полагаются на тактильные ощущения, чтобы взаимодействовать с приложениями, когда они не видят экран. Например, системные приложения воспроизводят тактильные сигналы, чтобы уведомлять людей об успешном или неудачном выполнении задачи или о предстоящем событии. Убедитесь, что система тактильных ощущений постоянно используется в вашем приложении, чтобы не путать людей. Руководство см. в разделе Воспроизведение тактильных ощущений.
VoiceOver
VoiceOver дает звуковые описания содержимого на экране, помогая людям получать информацию и ориентироваться, когда они не видят экран.
Описания содержимого
Предоставьте альтернативные описания для всех изображений, которые передают смысл. Если вы не описываете значимые изображения в своем контенте, вы не позволяете пользователям VoiceOver в полной мере использовать ваше приложение.
Чтобы создать полезное описание, начните с сообщения того, что будет понятно тому, кто может видеть изображение. Поскольку VoiceOver считывает текст вокруг изображения и любые подписи, сосредоточьте свое описание на информации, которая передается самим изображением.
Альтернативное описание этого изображения: «Мужчина и женщина разговаривают по FaceTime».
Сделайте инфографику полностью доступной. Предоставьте краткое описание инфографики, объясняющее, что она передает. Если люди могут взаимодействовать с инфографикой, чтобы получить больше или другую информацию, вам необходимо сделать эти взаимодействия доступными и для пользователей VoiceOver. API специальных возможностей предоставляют способы представления настраиваемых интерактивных элементов, чтобы вспомогательные технологии могли помочь людям их использовать.
Если изображение носит исключительно декоративный характер и не предназначено для передачи информации, скройте его от вспомогательных технологий.
Превращение VoiceOver в описание чисто декоративного изображения может привести к пустой трате времени людей и увеличить их когнитивную нагрузку, не принеся никакой пользы.
Дайте каждому экрану уникальный заголовок и дайте заголовки, которые идентифицируют разделы в вашей информационной иерархии. Когда люди появляются на экране, заголовок — это первая часть информации, которую они получают от вспомогательных технологий. Чтобы помочь людям понять структуру вашего приложения, создайте уникальный заголовок для каждого экрана, который кратко описывает его содержание или назначение. Точно так же людям нужны точные заголовки разделов, чтобы помочь им построить ментальную карту информационной иерархии каждого экрана.
Помогите всем насладиться вашим видео- и аудиоконтентом. Когда вы предоставляете скрытые титры, аудиоописания и стенограммы, вы можете помочь людям извлечь выгоду из аудио- и видеоконтента удобным для них способом.
Скрытые титры дают людям текстовый эквивалент звуковой информации в видео. Вы также можете использовать скрытые титры для предоставления нескольких переводов одного и того же контента, позволяя системе выбрать версию, соответствующую текущим настройкам устройства. Поскольку скрытые субтитры не всегда доступны, важно также предоставить субтитры.
Аудиоописания обеспечивают устное изложение важной информации, представленной только визуально.
Стенограмма содержит полное текстовое описание видео, охватывающее как звуковую, так и визуальную информацию, чтобы люди могли наслаждаться видео по-разному.
Инструкции для разработчиков см. в разделе Выбор субтитров и альтернативных звуковых дорожек.
Навигация
Убедитесь, что пользователи VoiceOver могут переходить к каждому элементу. VoiceOver использует информацию о специальных возможностях из экранных элементов, чтобы помочь людям понять расположение каждого элемента и его возможности.
Компоненты пользовательского интерфейса, предоставляемые системой, включают эту информацию о специальных возможностях по умолчанию, но VoiceOver не может помочь людям находить и использовать пользовательские элементы, если вы не предоставите эту информацию. Руководство для разработчиков см. в разделе Модификаторы специальных возможностей.
Улучшите работу VoiceOver, указав, как элементы должны быть сгруппированы, упорядочены или связаны. Близость, выравнивание и другие контекстные подсказки могут помочь зрячим людям понять взаимосвязь между элементами на экране, но эти подсказки плохо работают для пользователей VoiceOver. Проверьте свое приложение на наличие мест, где отношения между элементами являются только визуальными, и опишите эти отношения для VoiceOver.
Например, макет ниже основан на близости и центрировании, подразумевая, что каждая фраза является заголовком для изображения над ней. Однако, если вы не укажете VoiceOver, что каждое изображение должно быть сгруппировано по его фразе, VoiceOver прочитает: «Большой контейнер с различными манго.
Большой контейнер с большим количеством зеленых артишоков. Манго происходят из деревьев, принадлежащих к роду Mangifera. Артишоки получают из различных видов чертополоха». Это происходит потому, что VoiceOver по умолчанию считывает элементы сверху вниз. Руководство для разработчиков см. в статьях shouldGroupAccessibilityChildren и accessibilityTitleUIElement.
Сообщать VoiceOver об изменении содержимого или макета на экране. Неожиданное изменение содержимого или макета может сбить с толку пользователей VoiceOver, поскольку это означает, что их ментальная карта экрана больше не является точной. Крайне важно сообщать об изменениях на экране, чтобы VoiceOver и другие вспомогательные технологии могли помочь людям лучше понять экран. Руководство для разработчиков см. в разделе UIAccessibility.Notification (UIKit) или NSAccessibility.Notification (AppKit).
Помогите людям предсказать, когда элемент управления откроет другую веб-страницу или приложение.
Неожиданное изменение контекста может вызвать путаницу и потребовать от людей внезапно перестроить свою ментальную модель экранной среды. Один из способов привлечь внимание к потенциальному изменению контекста — добавить многоточие к названию кнопки. Во всей системе многоточие после заголовка является стандартным способом для кнопки сообщить, что она открывает другое окно или представление, в котором люди могут выполнить действие. Например, в программе «Почта» в iOS и iPadOS к кнопке «Переместить сообщение» добавляется многоточие, сигнализирующее об открытии отдельного представления со списком пунктов назначения, которые могут выбрать люди.
Обеспечить альтернативные текстовые метки для всех важных элементов интерфейса. Альтернативные текстовые метки не видны на экране, но они позволяют VoiceOver озвучивать элементы на экране, упрощая навигацию для людей с нарушениями зрения. Предоставленные системой элементы управления по умолчанию имеют полезные метки, но вам необходимо создать метки для пользовательских элементов.
Например, если вы создаете элемент специальных возможностей, представляющий настраиваемую кнопку оценки, вы можете указать метку «Оценка».
При необходимости поддерживайте ротор VoiceOver. Пользователи VoiceOver могут использовать экранный элемент управления, называемый ротором , для навигации по документу или веб-странице по заголовкам, ссылкам или другим типам разделов. Ротор также может вызывать брайлевскую клавиатуру. Вы можете помочь пользователям VoiceOver перемещаться между связанными элементами в вашем приложении, идентифицируя эти элементы в роторе. Руководство для разработчиков см. в разделах UIAccessibilityCustomRotor и NSAccessibilityCustomRotor.
В iPadOS и macOS убедитесь, что люди могут использовать клавиатуру для навигации и взаимодействия со всеми экранными компонентами в вашем приложении. В идеале, люди могут включить полный доступ с клавиатуры и выполнять все задачи, которые вам нужны, используя только клавиатуру.
В дополнение к сочетаниям клавиш специальных возможностей система определяет большое количество других сочетаний клавиш, которые многие люди используют постоянно. Для поддержки всех пользователей важно избегать переопределения каких-либо системных сочетаний клавиш в вашем приложении. Руководство см. в разделе Клавиатуры.
Отображение текста
В iOS, iPadOS, tvOS и watchOS используйте Dynamic Type и проверьте, адаптируется ли макет вашего приложения ко всем размерам шрифта. Dynamic Type позволяет людям выбирать размер шрифта, который им подходит. Убедитесь, что ваш дизайн можно масштабировать, а текст и глифы разборчивы при всех размерах шрифта. Например, на iPhone или iPad включите «Большие размеры текста специальных возможностей» в «Настройки» > «Универсальный доступ» > «Дисплей и размер текста» > «Увеличенный текст» и убедитесь, что ваше приложение остается удобным для чтения. Вы можете загрузить таблицы размеров Dynamic Type в Sketch, Photoshop и Adobe XD Apple Design Resources для каждой платформы.
По мере увеличения размера шрифта усечение текста должно быть минимальным. В общем, стремитесь отображать как можно больше полезного текста с помощью самого большого размера шрифта специальных возможностей, а также с самым большим стандартным размером шрифта. Избегайте усечения текста в прокручиваемых областях, если люди не могут открыть отдельное представление, чтобы прочитать остальную часть содержимого. Вы можете предотвратить усечение текста в этикетке, настроив ее на использование столько строк, сколько необходимо для отображения полезного объема текста; руководство для разработчиков см. в разделе numberOfLines.
Рассмотрите возможность настройки макета при больших размерах шрифта. При увеличении размера шрифта встроенные элементы и границы контейнеров могут загромождать текст, делая его менее читаемым. Например, если вы отображаете текст вместе со второстепенными элементами, такими как глифы или временные метки, текст занимает меньше места по горизонтали.
При больших размерах шрифта встроенный макет может привести к усечению текста или перекрытию текста и второстепенных элементов. В этом случае рассмотрите возможность использования макета с накоплением, когда текст отображается над второстепенными элементами. Точно так же несколько столбцов текста могут стать менее читаемыми при больших размерах шрифта, поскольку каждый столбец ограничивает пространство по горизонтали. В этом случае рассмотрите возможность уменьшения количества столбцов при увеличении размера шрифта, чтобы избежать усечения текста и улучшить общую читаемость. Руководство для разработчиков см. в разделе isAccessibilityCategory.
Увеличение размера значимых значков интерфейса по мере увеличения размера шрифта. Если вы используете значки интерфейса для передачи важной информации, убедитесь, что их также легко просматривать при более крупном размере шрифта. Когда вы используете символы SF, вы получаете значки, которые автоматически масштабируются при изменении размера динамического типа.
Поддерживайте единую информационную иерархию независимо от текущего размера шрифта. Например, размещайте основные элементы вверху экрана, даже если размер шрифта очень большой, чтобы люди не теряли их из виду.
Отдайте предпочтение обычному или крупному шрифту в вашем приложении. Рассмотрите возможность использования шрифта Regular, Medium, Semibold или Bold, так как их легче увидеть. Избегайте сверхлегких, тонких и легких шрифтов, которые могут быть труднее увидеть.
Убедитесь, что ваше приложение правильно реагирует и хорошо выглядит, когда люди включают жирный шрифт. В iOS, iPadOS, tvOS и watchOS люди включают настройку доступности полужирного текста, чтобы текст и символы было легче увидеть. В ответ ваше приложение должно сделать весь текст более жирным и придать всем глифам увеличенный вес обводки. Системные шрифты и символы SF автоматически настраиваются на доступность полужирного текста.
Убедитесь, что пользовательские шрифты разборчивы.
Пользовательские шрифты иногда трудно читать. Если ваше приложение не нуждается в особом шрифте, например, в целях брендинга или для создания захватывающего игрового процесса, обычно лучше использовать системные шрифты. Если вы используете собственный шрифт, убедитесь, что он легко читается даже при небольшом размере.
Избегайте полного выравнивания текста. Пробелы, создаваемые полностью выровненным по ширине текстом, могут создавать шаблоны, которые мешают многим людям читать и фокусироваться на тексте. Выравнивание по левому краю — или выравнивание по правому краю в языках с письмом справа налево — служит ориентиром для людей с проблемами обучения и грамотности, такими как дислексия.
Избегайте использования курсива или всех заглавных букв для длинных фрагментов текста. Курсив и заглавные буквы отлично подходят для случайного выделения, но чрезмерное использование этих стилей затрудняет чтение текста.
Цвет и эффекты
Не полагайтесь исключительно на цвет, чтобы различать объекты или передавать важную информацию.
Если вы используете цвет для передачи информации, не забудьте предоставить текстовые метки или глифы, чтобы все могли их воспринимать.
Использовать для текста системные цвета. Когда вы используете системные цвета в тексте, он правильно реагирует на настройки специальных возможностей, такие как Инверсия цветов и Увеличение контрастности.
Избегайте использования цветовых комбинаций как единственного способа различить два состояния или значения. Многим дальтоникам трудно отличить синий от оранжевого; другие проблемные комбинации — красный и зеленый, красный и черный, а также красный или зеленый в сочетании с серым. Когда имеет смысл использовать комбинацию цветов для передачи состояний или значений, включите дополнительные визуальные индикаторы, чтобы каждый мог воспринимать информацию. Например, вместо красных и зеленых кружков для обозначения офлайн и онлайн можно использовать красный квадрат и зеленый кружок. Некоторое программное обеспечение для редактирования изображений включает в себя инструменты, которые могут помочь вам доказать наличие дальтонизма.
Убедитесь, что ваши представления правильно реагируют на инвертирование цветов. Пользователи могут включить инвертирование цветов, если они предпочитают просматривать элементы на темном фоне. В режиме Smart Invert для инвертирования цветов изображения, видео и полноцветные значки (например, значки приложений и изображения, не являющиеся шаблонами) не инвертируются, а темный пользовательский интерфейс остается темным. Протестируйте свое приложение или игру, чтобы найти места, где вам может понадобиться предотвратить инвертирование изображения, например фотографии в пользовательском представлении.
Используйте сильно контрастные цвета для улучшения читаемости. Многие факторы влияют на восприятие цвета, включая размер и вес шрифта, яркость цвета, разрешение экрана и условия освещения. Когда вы увеличиваете цветовой контраст визуальных элементов, таких как текст, глифы и элементы управления, вы можете помочь большему количеству людей использовать ваше приложение в большем количестве ситуаций.
Чтобы узнать, соответствует ли контраст соседних цветов в вашем пользовательском интерфейсе минимально допустимым уровням, вы можете использовать Инспектор доступности Xcode или онлайн-калькулятор цвета на основе формулы цветового контраста Руководства по доступности веб-контента (WCAG). Как правило, меньший или более легкий текст должен иметь больший контраст, чтобы его можно было прочитать. Используйте следующие значения для руководства.
| Размер текста | Вес текста | Минимальный коэффициент контрастности |
|---|---|---|
| До 17 точек | Все | 4,5:1 |
| 18 точек и больше | Все | 3:1 |
| Все | Жирный | 3:1 |
Не требуйте анимации, если только она не необходима для вашего опыта. В общем, позвольте людям использовать ваше приложение, не полагаясь на анимацию.
Воспроизведение сжатых анимаций при включенной функции «Уменьшение движения».
Люди могут включить Уменьшение движения, если они склонны отвлекаться или испытывать головокружение или тошноту при просмотре анимации, включающей такие эффекты, как масштабирование, масштабирование, вращение или периферийное движение. В ответ на этот параметр вам необходимо отключить или уменьшить анимацию, которая, как известно, вызывает проблемы (дополнительные сведения см. в разделе Адаптивный дизайн для движения). Если вы используете проблемную анимацию для передачи важной информации, рассмотрите возможность создания неанимационной альтернативы или ужесточения физики анимации, чтобы уменьшить ее движение. Например:
- Затяните пружины, чтобы уменьшить эффект отскока или отслеживайте 1:1 пальцем пользователя
- Избегайте анимации изменения глубины в слоях по оси Z
- Избегайте анимации размытия или выхода из него
- Заменить слайд исчезающим изображением, чтобы избежать движения
Позвольте людям управлять видео и другими эффектами движения.
Видео-курс
