Human Interface Guidelines (стр. 6 )

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

Для всех изображений и иконок используйте формат PNG. Удостоверьтесь, что к изображениям и иконками применен деинтерлейс (расперемежение). Стандартная битовая глубина для изображения — 24 бита. В иконках начального экрана не должно быть прозрачности. Создавайте все иконки в разрешении 2x.

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

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

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

Свойства Иконки	38mm	42mm
Иконка Центра Уведомлений	48px	55px
Иконка уведомления Long-Look	80px	88px
Иконка Начального Экрана	80px	80px
Иконка Short-Look	172px	196px

Здесь указаны размеры иконок для приложения, когда его отображает Apple Watch на iPhone

Свойства Иконки	2x	3x
Иконка приложения	58px	87px

Шаблоны для создания иконок доступны на странице Ресурсы.

Иконки Меню

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

38 MM

42 MM

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

Используйте формат PNG. Избегайте использования чередующихся PNG.

Указания для иконок меню доступны на странице Ресурсы. Чтобы узнать больше о меню, см. Меню.

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

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

Группа	Шаблон	38mm	42mm
Circular small	Ring	40px	44px
Simple	32px	36px
Stack	32px (max) by 14px	34px (max) by 16px
Modular small	Columns	22-64px by 22px	24-74px by 24px
Standard body	22-64px by 22px	24-74px by 24px
Table	22-64px by 22px	24-74px by 24px
Modular large	Ring	36px	38px
Stack	52px (max) by 28px	58px (max) by 30px
Utility large	Flat	18-42px by 18px	20-44px by 20px
Utility small	Flat	18-42px by 18px	20-44px by 20px
Ring	28px	28px
Square	40px	44px

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

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

Группа	38mm	42mm
Circular	32px	36px
Modular	52px	58px
Utility	40px	44px

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

Используйте формат PNG. Избегайте использования чередующихся PNG.

Оптимизация Изображений

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

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

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

Оптимизируйте файлы JPEG, чтобы сбалансировать размер и качество. Большинство файлов JPEG можно сжимать без заметного снижения характеристик полученного изображения. Даже небольшое сжатие может сэкономить значительное количество места на диске. Экспериментируйте с настройками сжатия каждого изображения, чтобы найти оптимальное значение, которое приведет к нужным результатам.

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

Элементы Интерфейса

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

Названия

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

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

Чтобы получить больше информации об использовании текста в приложении Watch, см. Текстовое Оформление.

Изображения

Элемент изображения отображает одно изображение или анимированную последовательность изображений. Изображения могут быть любого формата, который поддерживает iOS, но предпочтительным форматом является PNG. Анимированная последовательность может запускаться и останавливаться программно.

Устанавливайте размер изображений для дисплеев 38мм и 42 мм. Вы можете использовать один ресурс изображений для дисплеев обоих размеров до тех пор, пока сохраняется четкость.

Создавайте изображения в разрешении  2x. У Apple Watch дисплей Retina, так что нет необходимости создавать изображения в стандартном разрешении. Включите в имена изображений @2x.

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

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

Группы

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

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