Human Interface Guidelines (стр. 5 )

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

Стиль	Применение
Headline	Используйте для заголовков и важной информации, на которую нужно обратить внимание пользователя.
Subhead	Используйте для заголовков и текста, которые должны выделяться среди остального содержимого.
Body	Используйте для длинных фрагментов текста. Используйте этот стиль для основной массы содержимого.
Caption 1	Используйте для короткого текста, который не занимает несколько строк.
Caption 2	Используйте для короткого текста, который является второстепенным для текста Caption 1.
Footnote	Используйте для второстепенного содержимого, которым вы не хотите отвлекать от основного содержимого.

Используйте встроенные стили текста, насколько возможно. Встроенные стили осуществляют поддержку Dynamic Type, который автоматически настраивает междустрочный интервал и расстояние между знаками для шрифта в любом размере. Эти стили основаны на системном шрифте и используют преимущества остальных компонентов шрифтового оформления в нужное время. Для подробной информации о регулировании расстояния между знаками см. Расстояние Между Знаками.

Dynamic Type

Оба варианта начертания SF Compact были спроектированы для высокой читабельности даже в очень маленьком размере. Dynamic Type предоставляет дополнительную свободу посредством того, что читатели могут выбрать предпочитаемый размер текста.

xSmall Small(Default 38 MM) Large(Default 42 MM) xLarge xxLarge xxxLarge

Расстояние Между Знаками

Для размеров меньше 20 пунктов (@2x / 144 ppi) используйте SF Compact Text. Для размеров 20 пунктов или больше используйте SF Compact Display. Для размеров шрифта вводите значения расстояния между знаками из тех, что указанны в списке

SF Compact Text

Размер в пунктах @2x(144 ppi)	Размер в пунктах (72 ppi)	Расстояние между знаками
5.5 pt	11 pt	110
6 pt	12 pt	50
7 pt	14 pt	30
10 pt	20 pt	30
11 pt	22 pt	24
12 pt	24 pt	20
13 pt	26 pt	17
14 pt	28 pt	14
15 pt	30 pt	4
16 pt	32 pt	0
17 pt	34 pt	-4
18 pt	36 pt	-8

SF Compact Display

Размер в пунктах @2x(144 ppi)	Размер в пунктах (72 ppi)	Расстояние между знаками
20.0 pt	40 pt	0
25 pt	50 pt	-10
44 pt	88 pt	-20
77 pt и выше	154 pt и выше	-25

Анимация

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

Анимация

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

Сохраняйте анимации короткими. Короткая анимация передает необходимую информацию и не заставляет пользователя ждать. Более короткая анимация также легче воспринимается и является менее навязчивой.

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

Не используйте анимацию расположения в параметрах glances или уведомлений. Добавляйте анимацию в расположение и внешний вид элементов интерфейса только в приложении Watch. Вы можете использовать анимированную последовательность изображений в интерфейсе glance или уведомления.

Сведите к минимуму число одновременной анимации. Одновременная работа нескольких элементов анимации повлияет на их плавность и на время реагирования вашего приложения.

Анимированная Последовательность Изображений

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

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

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

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

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

PlayReplay

Анимация Расположения и Внешнего Вида

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

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

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

Размытость Высота Ширина Групповые Вкладки Выравнивание Цвет Фона Оттенок Цвета

Иконки и Изображения

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

Иконки Начального Экрана

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

Prev Next

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

Сохраните некоторое сходство между иконками приложений для Apple Watch и iOS. Использование похожего оформления и цветовой палитры создаст связь между двумя иконками. Две иконки не обязательно должны быть полностью одинаковыми, но вместе они должны быть узнаваемы.