Официальное руководство от Apple по разработке интерфейса для Apple Watch — теперь и на русском! Технические переводчики Alconost Translations потрудились на славу. Пользуйтесь на здоровье!
ВАЖНО!
Это предварительный документ с описанием API или технологии, находящихся в процессе разработки. Корпорация Apple предоставляет эту информацию, чтобы вы могли спланировать внедрение описанных здесь технологий и программных интерфейсов, предназначенных для продуктов Apple. Содержащаяся здесь информация может быть изменена, поэтому программное обеспечение, созданное с использованием данного документа, необходимо тестировать с помощью окончательных версий операционной системы и использовать для этого окончательные версии документации. Для будущих бета-версий API или технологии, возможно, будут созданы новые версии данного документа.
В устройстве Apple Watch воплощены указанные ниже концепции.
Персональность. Так как продукт Apple Watch предназначен для ношения, поэтому пользовательский интерфейс устройства подстраивается под действия пользователя. Например, если поднять запястье, то на экране устройства отобразятся время и новые уведомления. Благодаря системе Digital Touch (в частности, ее функциям Heartbeat и Sketch) можно использовать новые виды личного общения. С помощью акселерометра и датчика частоты сердцебиения можно получить информацию о ежедневной активности владельца устройства. Еще ни одно из устройств Apple не было так тесно связано со своим владельцем. При разработке приложений для Apple Watch необходимо помнить об этой связи.
Целостность. Устройство Apple Watch стирает границы между физическим объектом и программным обеспечением. Digital Crown — это тонко настроенный аппаратный элемент управления, позволяющий выполнять навигацию в приложении с учетом самых различных нюансов. Система Taptic Engine обеспечивает мягкий физический отклик при уведомлениях и взаимодействии с элементами интерфейса на экране. Force Touch — это аппаратная функция распознования и интерпретации физических жестов. Она открывает совершенно новые возможности контекстных программных элементов управления. Учтена даже физическая граница дисплея Retina, поэтому дизайн пользовательского интерфейса разработан таким образом, что эта граница становится незаметной. Следует продумывать дизайн приложения так, чтобы увеличить ощущение единства аппаратного и программного обеспечения.
Легкость. Приложения для Apple Watch разрабатываются с расчетом на быстрые и несложные взаимодействия, в ходе которых максимально эффективно используется дисплей часов, а также учитывается положение часов на запястье. Пользователь может быстро и легко получать доступ к информации или убирать ее с экрана. Благодаря этому обеспечивается конфиденциальность и удобство работы. Например, извещения Short-Look — это краткие оповещения. Они отображают дополнительную информацию только в том случае, если владелец часов заинтересуется ею. Элементы управления Glance отображают информацию, предоставляемую приложениями, в виде простого в использовании интерфейса, которым можно управлять движениями пальца. В процессе разработки приложений для Apple Watch необходимо учитывать то, что владелец устройства будет использовать их часто, на экране небольшого размера и уделять им непродолжительное время.
Приложения WatchKit дополняют основные приложения iOS, а не заменяют их. Если время взаимодействия с приложением для iOS измеряется минутами, то с приложением WatchKit пользователь, скорее всего, будет взаимодействовать считанные секунды. Поэтому необходимо, чтобы сеансы взаимодействия с приложениями были кратковременными, а интерфейсы — простыми.
Чтобы можно было запустить ваше приложение, устройство Apple Watch должно быть сопряжено со смартфоном iPhone.
В приложениях WatchKit поддерживаются два описанных ниже способа навигации.
Если необходимо организовать сложную систему взаимодействия пользователя с приложением, то обычно для этих целей лучше подходит иерархическая, а не простая страничная модель навигации.
На точечном индикаторе, расположенном в нижней части каждой страницы, отображается положение страницы в наборе. Чтобы упростить навигацию, необходимо использовать как можно меньшее количество страниц.
Невозможно сочетать иерархический и страничный стили интерфейса. На этапе проектирования необходимо выбрать стиль, лучше всего соответствующий содержимому вашего приложения, и его дизайн.
Приложения, использующие эти стили интерфейса, могут отображать содержимое модально. Модальные интерфейсы позволяют пользователю выполнить задачу или получить информацию, не отвлекаясь на взаимодействие с остальной частью приложения. См. раздел «Модальные окна».
В устройстве Apple Watch не поддерживаются жесты, выполняемые несколькими пальцами, например, жесты сжатия.
Превью — это сгруппированные по времени и контексту экраны с информацией из пользовательских приложений. Каждый экран содержит актуальные данные по своей программе. В нижней части превью оставлено место для индикатора прокрутки.
Превью бывают:
Формируйте превью на основе контекста пользователя. Ненужная информация снижает пользу превью. Используйте текущее время и местоположение, чтобы предлагать только полезные здесь и сейчас данные.
Используйте Handoff для связи с WatchKit app. Превью передают приложению информацию о действиях пользователя с превью при помощи Handoff. WatchKit использует эти сведения для подстройки интерфейса приложения под ситуацию.
Показывайте только полезную информацию. К примеру, не используйте превью в качестве ярлыка запуска основного приложения.
Система оповещений в Apple Watch облегчает работу с локальными и внешними уведомлениями. Взаимодействие с оповещениями происходит в два этапа, для чего существуют краткий и полноразмерный варианты интерфейса. Краткий вызывается при получении уведомления — в тот момент демонстрируется очень ограниченный набор информации. Если пользователь опускает запястье, превью пропадает. Полный интерфейс используется при активной работе с часами или вызывается нажатием по краткому варианту. В этом случае доступно больше информации и возможностей, а окно закрывается только по желанию пользователя.
Аккуратнее с частотой отправки оповещений. Пользователь может посчитать слишком частые уведомления вашей программы раздражающими и просто их отключит. Всегда следите за тем, чтобы оповещения отражали текущие потребности пользователя.
Сокращенные превью показываются недолго и для того, чтобы понять откуда пришло оповещение. Они опираются на шаблон и содержат имя приложения, его иконку и заголовок уведомления. Имя демонстрируется основным цветом программы.
Используйте лаконичные и информативные заголовки. Место для заголовка ограничено, поэтому он должен был кратким и уместным. Заголовки не передают детали, они лишь подсказывают.
Настраиваемые полноразмерные оповещения
Полноразмерные превью передают больше информации об уведомлении. В часах для них предусмотрен стандартный вид, но его можно изменить под свои нужды и добавить необходимую графику. Структура полного интерфейса идентична для всех приложений. Вверху превью системный заголовок с иконкой и именем программы, а внизу размещена кнопка Dismiss. Место между ними предназначено для информации и дополнительных кнопок ваших оповещений.
Создавайте статичные интерфейсы и, в дополнение к ним, динамичные. Динамичные превью гибче в настройке, но показывают ту же информацию в оповещениях. Статичные интерфейсы используются в случае, когда недоступны динамичные.
Добавляйте не более четырех дополнительных кнопок. Apple Watch показывает кнопки взаимодействия на основе интерактивных уведомления от iOS-приложений. Эти кнопки подставляются автоматически в соответствии с категорией уведомления, и дополняют системную кнопку Dismiss.
Сочетайте цвет заголовка с гаммой приложения. Цвет и прозрачность системного заголовка в модифицированном интерфейсе можно менять.
Подробная информация о статичных и динамичных интерфейсах, а также о настройке кнопок действия содержится в Apple Watch Programming Guide.
Модальные окна предназначены для выполнения пользователем определенной задачи, получения информации без “фонового шума”, или продолжения начатого в Menu control действия. Для этого модальные окна временно ограничивают взаимодействие пользователя с основным интерфейсом приложения.
Лучше всего минимизировать применение модальности в программе. Подобные интерфейсы обычно оправданы в следующих случаях:
Модальный интерфейс состоит из одного или нескольких экранов, которые организованы в пролистываемые страницы. Единственная разница здесь — это наличие или отсутствие внизу индикатора прокрутки. Верхний левый угол всегда содержит кнопку Close. При нажатии на нее (или при свайпе с левого края) система закрывает модальное окно без дальнейших действий.
Не добавляйте в окно отдельную кнопку закрытия. Системная Close обязательна, но вы всегда можете ее переименовать для лучшего соответствия контексту. Типичные варианты наименования — Close или Cancel, а цвет всегда белый.
Добавьте кнопку Accept для требующих согласия задач. Используйте стандартную кнопку для согласия — после ее нажатия выполняются необходимые действия с последующим закрытием модального окна.
Старайтесь сделать модальные задачи проще. Избегайте вызова дополнительных модальных окон из основного.
В приложениях отображается одинаковый интерфейс вне зависимости от размера Apple Watch. Относительное расположение позволяет элементам интерфейса корректно заполнять экран.
Ограничьте число близко расположенных управляющих элементов. Используйте иконки вместо подписей при размещении кнопок вплотную. Никогда не размещайте слишком близко более трех элементов — при большем количестве они становятся слишком мелкими для использования.
Полностью используйте всю ширину экрана. Так как рамка Apple Watch визуально отдаляет контент от краев, вам не нужно добавлять отдельные отступы (учтите, что такой рамки нет в iOS Simulator).
Используйте выравнивание по левому краю. Элементы интерфейса располагаются сверху вниз и слева направо. Выравнивание по левой границе оставляет больше места для расширения элементов и размещения контента.
Создавайте текстовые кнопки под всю ширину экрана. Кнопки с подписями лучше не ограничивать в ширине, что позволит уместить надпись полностью.
Пользуйтесь контекстным меню для второстепенных действий. Вместо размещения дополнительных кнопок используйте контекстное меню. В него можно спрятать опции, которые вызываются реже. См. Меню.
Контент должен быть идентичен для экранов разного размера. При размещении элементов пользуйтесь относительными габаритами и отступами. Это позволит интерфейсу меняться в зависимости от доступного экранного пространства.
По возможности пользуйтесь одним набором изображений для обоих дисплеев. Если одна и та же графика выглядит достаточно хорошо на дисплеях разного размера, то лучше так все и оставить. Иначе может потребоваться отдельный набор изображений для каждого дисплея.
3
Удобочитаемость — руководящий принцип использования цвета и типографики в приложении.
Цвет помогает достичь визуальной целостности и соответствия фирменному стилю приложения.
В качестве фона приложения используйте черный. Черный фон сливается с рамкой устройства, что создает иллюзию экрана без краев. Избегайте светлых фонов в интерфейсе.
Используйте основной цвет приложения, чтобы подчеркнуть фирменный стиль или отразить состояние приложения. Для каждого приложения существует основной цвет. Система использует его в верхнем левом углу для заголовка, в оповещениях для выделения имени программы и другой важной информации. Используйте такой цвет и чтобы подчеркнуть фирменный стиль приложения.
Для текста пользуйтесь контрастными цветами. С контрастными цветами текст легче читается.
Избегайте пользоваться цветом для подчеркивания интерактивности элемента. Используйте цвет для стилизации, но не пытайтесь таким образом отмечать интерактивность кнопок и других управляющих элементов. Помните о разном цветовосприятии. Большинство людей с ограниченным цветовосприятием с трудом отличают красный от зеленого. Тестируйте приложения, чтобы быть уверенными в отсутствии мест, где красный и зеленый используются для разграничения состояний программы (некоторые графические редакторы предлагают специальные инструменты для поиска проблемных сочетаний).
Изучайте восприятие цвета пользователями разных стран и культур. Каждый видит цвета по-своему, и многие культуры отличаются во взглядах на тот или иной цвет. По возможности проверьте, что выбранный цвет будет выражать именно то, что задумано.
Прежде всего, текст должен быть читабелен. Если пользователь не может прочесть написанное, то красота начертаний становится бессмысленной.
Системный шрифт создан и оптимизирован специально для Apple Watch. При большом размере шрифта буквы уплотняются, чтобы занимать меньше места в ширину. Но при уменьшении кегля они размещаются свободнее, и начертание символов оптимизируется для лучшей читаемости. Пунктуационные знаки пропорционально увеличиваются при уменьшении кегля. При изменении размера текста Apple Watch динамично перерисовывает шрифт для сохранения его четкости и читабельности.
Всегда пользуйтесь динамичными типами. Они дают приложению следующие возможности:
ВНИМАНИЕ
При использовании собственных шрифтов у вас все еще есть возможность менять их пропорции в соответствии с системными настройками. За правильную реакцию на пользовательские настройки отвечает ваше приложение.
При использовании встроенных стилей вы автоматически получаете динамическое масштабирование. Если же встроить сторонние шрифты, то необходимо будет дополнительно позаботиться о правильной работе этой функции. Для дополнительной информации об использовании текстовых стилей и корректной реакции приложения на системные настройки шрифта загляните в Text Styles.
По возможности пользуйтесь встроенными стилями. Предустановленные текстовые стили спроектированы специально для Apple Watch и автоматически поддерживают динамическое масштабирование.
Пользуйтесь одним шрифтом для вашего приложения. Применение множества стилей портит визуальное единство приложения и создает ощущение небрежности.
При выборе системного шрифта отталкивайтесь от рекомендуемых значений. Используйте San Francisco Text для надписей 19 размера и менее. Для текста больше 20 кегля лучше подойдет San Francisco Display.
Анимации
Основы разработки пользовательского интерфейса
Создание дизайна для Apple Watch
ВАЖНО!
Это предварительный документ с описанием API или технологии, находящихся в процессе разработки. Корпорация Apple предоставляет эту информацию, чтобы вы могли спланировать внедрение описанных здесь технологий и программных интерфейсов, предназначенных для продуктов Apple. Содержащаяся здесь информация может быть изменена, поэтому программное обеспечение, созданное с использованием данного документа, необходимо тестировать с помощью окончательных версий операционной системы и использовать для этого окончательные версии документации. Для будущих бета-версий API или технологии, возможно, будут созданы новые версии данного документа.
В устройстве Apple Watch воплощены указанные ниже концепции.
Персональность. Так как продукт Apple Watch предназначен для ношения, поэтому пользовательский интерфейс устройства подстраивается под действия пользователя. Например, если поднять запястье, то на экране устройства отобразятся время и новые уведомления. Благодаря системе Digital Touch (в частности, ее функциям Heartbeat и Sketch) можно использовать новые виды личного общения. С помощью акселерометра и датчика частоты сердцебиения можно получить информацию о ежедневной активности владельца устройства. Еще ни одно из устройств Apple не было так тесно связано со своим владельцем. При разработке приложений для Apple Watch необходимо помнить об этой связи.
Целостность. Устройство Apple Watch стирает границы между физическим объектом и программным обеспечением. Digital Crown — это тонко настроенный аппаратный элемент управления, позволяющий выполнять навигацию в приложении с учетом самых различных нюансов. Система Taptic Engine обеспечивает мягкий физический отклик при уведомлениях и взаимодействии с элементами интерфейса на экране. Force Touch — это аппаратная функция распознования и интерпретации физических жестов. Она открывает совершенно новые возможности контекстных программных элементов управления. Учтена даже физическая граница дисплея Retina, поэтому дизайн пользовательского интерфейса разработан таким образом, что эта граница становится незаметной. Следует продумывать дизайн приложения так, чтобы увеличить ощущение единства аппаратного и программного обеспечения.
Легкость. Приложения для Apple Watch разрабатываются с расчетом на быстрые и несложные взаимодействия, в ходе которых максимально эффективно используется дисплей часов, а также учитывается положение часов на запястье. Пользователь может быстро и легко получать доступ к информации или убирать ее с экрана. Благодаря этому обеспечивается конфиденциальность и удобство работы. Например, извещения Short-Look — это краткие оповещения. Они отображают дополнительную информацию только в том случае, если владелец часов заинтересуется ею. Элементы управления Glance отображают информацию, предоставляемую приложениями, в виде простого в использовании интерфейса, которым можно управлять движениями пальца. В процессе разработки приложений для Apple Watch необходимо учитывать то, что владелец устройства будет использовать их часто, на экране небольшого размера и уделять им непродолжительное время.
Приложения WatchKit дополняют основные приложения iOS, а не заменяют их. Если время взаимодействия с приложением для iOS измеряется минутами, то с приложением WatchKit пользователь, скорее всего, будет взаимодействовать считанные секунды. Поэтому необходимо, чтобы сеансы взаимодействия с приложениями были кратковременными, а интерфейсы — простыми.
Анатомия приложения
Чтобы можно было запустить ваше приложение, устройство Apple Watch должно быть сопряжено со смартфоном iPhone.
Способы навигации по интерфейсу
В приложениях WatchKit поддерживаются два описанных ниже способа навигации.
- Иерархический. Этот способ аналогичен способу навигации, используемому в iOS, и лучше всего подходит для приложений с иерархической организацией информации. В приложении с иерархической структурой пользователь последовательно выбирает по одному элементу на каждом экране, пока не будет достигнут необходимый результат. Чтобы выполнить другое действие, пользователю необходимо вернуться на несколько шагов назад или даже в самое начало и только затем выполнить переход по другой ветви иерархии.
Если необходимо организовать сложную систему взаимодействия пользователя с приложением, то обычно для этих целей лучше подходит иерархическая, а не простая страничная модель навигации.
- Страничный. Страничный интерфейс позволяет пользователю переходить со страницы на страницу, проводя пальцем по экрану в горизонтальном направлении. Такой интерфейс лучше всего подходит для приложений с простыми моделями данных, в которых данные на каждой странице не имеют непосредственной связи с данными на других страницах.
На точечном индикаторе, расположенном в нижней части каждой страницы, отображается положение страницы в наборе. Чтобы упростить навигацию, необходимо использовать как можно меньшее количество страниц.
Невозможно сочетать иерархический и страничный стили интерфейса. На этапе проектирования необходимо выбрать стиль, лучше всего соответствующий содержимому вашего приложения, и его дизайн.
Приложения, использующие эти стили интерфейса, могут отображать содержимое модально. Модальные интерфейсы позволяют пользователю выполнить задачу или получить информацию, не отвлекаясь на взаимодействие с остальной частью приложения. См. раздел «Модальные окна».
Виды взаимодействия с пользователем
- События на основе действий. Прикосновение к экрану означает выбор какого-либо элемента или взаимодействие с ним. Одиночное прикосновение — это основной способ, которым пользователь будет взаимодействовать с вашим приложением. Строки таблиц, кнопки, переключатели и другие элементы управляются прикосновениями. Сведения о них передаются в программный код вашего расширения WatchKit.
- Жесты. Система обрабатывает все жесты и использует их для выполнения указанных ниже стандартных действий.
- Если провести пальцем вертикально по дисплею, будет прокручено содержимое текущего экрана.
- Если провести пальцем горизонтально, отобразится предыдущая или следующая страница страничного интерфейса.
- Если вы проведете пальцем рядом с левой границей экрана, то попадете в родительский интерфейс.
В устройстве Apple Watch не поддерживаются жесты, выполняемые несколькими пальцами, например, жесты сжатия.
- Функция Force Touch. Дисплей Retina не только обнаруживает прикосновения, но и определяет силу, с которой палец пользователя давит на экран. При обнаружении сведений о прикосновении и его силе система отображает контекстное меню для текущего экрана (если оно предусмотрено). С помощью этого меню приложения могут отображать возможные действия для текущего содержимого. См. раздел «Меню».
- Элемент управления Digital Crown. Аппаратный элемент управления Digital Crown позволяет использовать адаптивно настроенную функцию ускоренного прокручивания, не загораживая при этом экран устройства Apple Watch. С его помощью пользователь может легко прокручивать длинные страницы. В сторонних приложениях элемент управления Digital Crown доступен только для прокручивания содержимого экрана.
Превью
Превью — это сгруппированные по времени и контексту экраны с информацией из пользовательских приложений. Каждый экран содержит актуальные данные по своей программе. В нижней части превью оставлено место для индикатора прокрутки.
Превью бывают:
- Шаблонные. Есть набор готовых шаблонов для верхней и нижней половины экрана. Выбрать из них подходящий можно с помощью Xcode.
- Не пролистываемые. Вся информация таких превью умещается на одном экране.
- Выполняющие только одно действие. Нажатие в любой части превью открывает определенный экран приложения.
- Опциональные. Не всем приложениям нужно постоянно что-то показывать, поэтому пользователь может скрывать и отображать превью.
Формируйте превью на основе контекста пользователя. Ненужная информация снижает пользу превью. Используйте текущее время и местоположение, чтобы предлагать только полезные здесь и сейчас данные.
Используйте Handoff для связи с WatchKit app. Превью передают приложению информацию о действиях пользователя с превью при помощи Handoff. WatchKit использует эти сведения для подстройки интерфейса приложения под ситуацию.
Показывайте только полезную информацию. К примеру, не используйте превью в качестве ярлыка запуска основного приложения.
Оповещения
Система оповещений в Apple Watch облегчает работу с локальными и внешними уведомлениями. Взаимодействие с оповещениями происходит в два этапа, для чего существуют краткий и полноразмерный варианты интерфейса. Краткий вызывается при получении уведомления — в тот момент демонстрируется очень ограниченный набор информации. Если пользователь опускает запястье, превью пропадает. Полный интерфейс используется при активной работе с часами или вызывается нажатием по краткому варианту. В этом случае доступно больше информации и возможностей, а окно закрывается только по желанию пользователя.
Аккуратнее с частотой отправки оповещений. Пользователь может посчитать слишком частые уведомления вашей программы раздражающими и просто их отключит. Всегда следите за тем, чтобы оповещения отражали текущие потребности пользователя.
Краткие оповещения
Сокращенные превью показываются недолго и для того, чтобы понять откуда пришло оповещение. Они опираются на шаблон и содержат имя приложения, его иконку и заголовок уведомления. Имя демонстрируется основным цветом программы.
Используйте лаконичные и информативные заголовки. Место для заголовка ограничено, поэтому он должен был кратким и уместным. Заголовки не передают детали, они лишь подсказывают.
Настраиваемые полноразмерные оповещения
Полноразмерные превью передают больше информации об уведомлении. В часах для них предусмотрен стандартный вид, но его можно изменить под свои нужды и добавить необходимую графику. Структура полного интерфейса идентична для всех приложений. Вверху превью системный заголовок с иконкой и именем программы, а внизу размещена кнопка Dismiss. Место между ними предназначено для информации и дополнительных кнопок ваших оповещений.
Создавайте статичные интерфейсы и, в дополнение к ним, динамичные. Динамичные превью гибче в настройке, но показывают ту же информацию в оповещениях. Статичные интерфейсы используются в случае, когда недоступны динамичные.
Добавляйте не более четырех дополнительных кнопок. Apple Watch показывает кнопки взаимодействия на основе интерактивных уведомления от iOS-приложений. Эти кнопки подставляются автоматически в соответствии с категорией уведомления, и дополняют системную кнопку Dismiss.
Сочетайте цвет заголовка с гаммой приложения. Цвет и прозрачность системного заголовка в модифицированном интерфейсе можно менять.
Подробная информация о статичных и динамичных интерфейсах, а также о настройке кнопок действия содержится в Apple Watch Programming Guide.
Модальные окна
Модальные окна предназначены для выполнения пользователем определенной задачи, получения информации без “фонового шума”, или продолжения начатого в Menu control действия. Для этого модальные окна временно ограничивают взаимодействие пользователя с основным интерфейсом приложения.
Лучше всего минимизировать применение модальности в программе. Подобные интерфейсы обычно оправданы в следующих случаях:
- Обязательно нужно привлечь внимание пользователя.
- Должна быть выполнена или явно отклонена самостоятельная задача, когда необходимо обеспечить целостность данных.
Модальный интерфейс состоит из одного или нескольких экранов, которые организованы в пролистываемые страницы. Единственная разница здесь — это наличие или отсутствие внизу индикатора прокрутки. Верхний левый угол всегда содержит кнопку Close. При нажатии на нее (или при свайпе с левого края) система закрывает модальное окно без дальнейших действий.
Не добавляйте в окно отдельную кнопку закрытия. Системная Close обязательна, но вы всегда можете ее переименовать для лучшего соответствия контексту. Типичные варианты наименования — Close или Cancel, а цвет всегда белый.
Добавьте кнопку Accept для требующих согласия задач. Используйте стандартную кнопку для согласия — после ее нажатия выполняются необходимые действия с последующим закрытием модального окна.
Старайтесь сделать модальные задачи проще. Избегайте вызова дополнительных модальных окон из основного.
>Макет
В приложениях отображается одинаковый интерфейс вне зависимости от размера Apple Watch. Относительное расположение позволяет элементам интерфейса корректно заполнять экран.
Базовые рекомендации
Ограничьте число близко расположенных управляющих элементов. Используйте иконки вместо подписей при размещении кнопок вплотную. Никогда не размещайте слишком близко более трех элементов — при большем количестве они становятся слишком мелкими для использования.
Полностью используйте всю ширину экрана. Так как рамка Apple Watch визуально отдаляет контент от краев, вам не нужно добавлять отдельные отступы (учтите, что такой рамки нет в iOS Simulator).
Используйте выравнивание по левому краю. Элементы интерфейса располагаются сверху вниз и слева направо. Выравнивание по левой границе оставляет больше места для расширения элементов и размещения контента.
Создавайте текстовые кнопки под всю ширину экрана. Кнопки с подписями лучше не ограничивать в ширине, что позволит уместить надпись полностью.
Пользуйтесь контекстным меню для второстепенных действий. Вместо размещения дополнительных кнопок используйте контекстное меню. В него можно спрятать опции, которые вызываются реже. См. Меню.
Размеры экрана
Контент должен быть идентичен для экранов разного размера. При размещении элементов пользуйтесь относительными габаритами и отступами. Это позволит интерфейсу меняться в зависимости от доступного экранного пространства.
По возможности пользуйтесь одним набором изображений для обоих дисплеев. Если одна и та же графика выглядит достаточно хорошо на дисплеях разного размера, то лучше так все и оставить. Иначе может потребоваться отдельный набор изображений для каждого дисплея.
3
Цвет и типографика
Удобочитаемость — руководящий принцип использования цвета и типографики в приложении.
Цвет
Цвет помогает достичь визуальной целостности и соответствия фирменному стилю приложения.
В качестве фона приложения используйте черный. Черный фон сливается с рамкой устройства, что создает иллюзию экрана без краев. Избегайте светлых фонов в интерфейсе.
Используйте основной цвет приложения, чтобы подчеркнуть фирменный стиль или отразить состояние приложения. Для каждого приложения существует основной цвет. Система использует его в верхнем левом углу для заголовка, в оповещениях для выделения имени программы и другой важной информации. Используйте такой цвет и чтобы подчеркнуть фирменный стиль приложения.
Для текста пользуйтесь контрастными цветами. С контрастными цветами текст легче читается.
Избегайте пользоваться цветом для подчеркивания интерактивности элемента. Используйте цвет для стилизации, но не пытайтесь таким образом отмечать интерактивность кнопок и других управляющих элементов. Помните о разном цветовосприятии. Большинство людей с ограниченным цветовосприятием с трудом отличают красный от зеленого. Тестируйте приложения, чтобы быть уверенными в отсутствии мест, где красный и зеленый используются для разграничения состояний программы (некоторые графические редакторы предлагают специальные инструменты для поиска проблемных сочетаний).
Изучайте восприятие цвета пользователями разных стран и культур. Каждый видит цвета по-своему, и многие культуры отличаются во взглядах на тот или иной цвет. По возможности проверьте, что выбранный цвет будет выражать именно то, что задумано.
Типографика
Прежде всего, текст должен быть читабелен. Если пользователь не может прочесть написанное, то красота начертаний становится бессмысленной.
Системный шрифт создан и оптимизирован специально для Apple Watch. При большом размере шрифта буквы уплотняются, чтобы занимать меньше места в ширину. Но при уменьшении кегля они размещаются свободнее, и начертание символов оптимизируется для лучшей читаемости. Пунктуационные знаки пропорционально увеличиваются при уменьшении кегля. При изменении размера текста Apple Watch динамично перерисовывает шрифт для сохранения его четкости и читабельности.
Всегда пользуйтесь динамичными типами. Они дают приложению следующие возможности:
- автоматическая подстройка межбуквенного интервала и высоты строки для любого кегля;
- возможность указать различные стили текста для семантически отличающихся блоков, вроде основного текста, сносок или заголовка;
- текст будет корректно меняться в соответствии с выбранными пользователем настройками (включая крупные и высококонтрастные варианты).
ВНИМАНИЕ
При использовании собственных шрифтов у вас все еще есть возможность менять их пропорции в соответствии с системными настройками. За правильную реакцию на пользовательские настройки отвечает ваше приложение.
При использовании встроенных стилей вы автоматически получаете динамическое масштабирование. Если же встроить сторонние шрифты, то необходимо будет дополнительно позаботиться о правильной работе этой функции. Для дополнительной информации об использовании текстовых стилей и корректной реакции приложения на системные настройки шрифта загляните в Text Styles.
По возможности пользуйтесь встроенными стилями. Предустановленные текстовые стили спроектированы специально для Apple Watch и автоматически поддерживают динамическое масштабирование.
Пользуйтесь одним шрифтом для вашего приложения. Применение множества стилей портит визуальное единство приложения и создает ощущение небрежности.
При выборе системного шрифта отталкивайтесь от рекомендуемых значений. Используйте San Francisco Text для надписей 19 размера и менее. Для текста больше 20 кегля лучше подойдет San Francisco Display.