Apple Watch это умные часы от Apple. В данной статье разобраны основные принципы дизайна для Apple watch (Apple watch design guide).

Хотите стать дизайнером? Следите за моими заметками! Помимо этого справочника по дизайну для Apple Watch, у меня на сайте доступен справочник iOS дизайна (на русском). Сейчас я пишу обучающие статьи для начинающих дизайнеров. Чтобы всегда первым получать информацию о новых статьях, подписывайтесь на меня в twitter и facebook.

Вступление

Apple Watch были представлены в сентябре 2014 года вместе с iPhone 6 и iPhone 6 Plus. Умные часы являются новой линейкой продукции для Apple, поэтому было очень интересно узнать что же они приготовили для потребителя. К сожалению, Apple поскупилась на информацию во время их презентации и показала лишь их внешний вид и ключевые особенности.

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

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

Во вторник, 20 ноября 2014 года, в открытом доступе оказался инструментарий для разработчиков WatchKit и рекомендации по созданию интерфейсов Apple Watch HIG.

Документ получился лаконичный и достаточно требовательный по содержанию. Основное требование которое стоит выделить – наличие iPhone у пользователя. Часы от Apple не будут работать без связки с iPhone.

О справочнике

Этот справочник являет собой русскую версию Apple Watch HIG с дополнениями и комментариями. Здесь вы найдете основные рекомендации по созданию интерфейсов для Apple Watch. В первую очередь данный справочник будет полезен дизайнерам и проектировщикам интерфейсов, а также разработчикам приложений.

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

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

Дизайн для Apple Watch

Создатели отмечают что часы Apple воплощают следующие принципы:

Персонализированость. Часы Apple созданы для того чтобы их носили. Интерфейс часов был создан с учетом их постоянного присутствия в жизни владельца. Поднятие запястья с часами вверх (как вы делаете чтобы посмотреть время на обычных часах), покажет время и новые уведомления. Возможность отправить свой пульс или рисунок открывает совершенно новые, невероятно персонализированные пути коммуникации с вашими друзьями. Акселерометр и пульсомер предоставят вам полные отчеты о вашей активности в течении дня. Ни одно из предыдущих устройств Apple не было так связано с пользователем как часы Apple. Важно помнить о такой глубокой связи с пользователем когда вы создаете дизайн для этого устройства.
Целостность. Часы Apple размывают границы между физическим обьектом и программной составляющей. Цифровая корона (Digital Cron – механическое вращающееся колесико управления на правом торце часов) открывает новые возможности навигации. Система Taptic, с помощью физического воздействия, уведомляет пользователей о новых уведомлениях и действиях при использовании часов. Force Touch позволяет определять силу нажатия на экран и открывает новые горизонты для контекстных меню. Даже физическая граница Retina экрана была пересмотрена. В результате интерфейс вписывается в экран таким образом, что рамки вокруг экрана совершенно не видны и создается впечатление что интерфейс занимает весь экран. Дизайн вашего приложения должен продолжать это чувство целостности между программной и аппаратной частью часов, а также пользователем.
Легкость. Приложения на Apple часах созданы для быстрого и легкого взаимодействия. Информация легко доступна и легко управляема. Уведомления Short Look созданы чтобы минимально отвлекать пользователя, показывая больше информации лишь после того как пользователь решит его посмотреть. Glances (новый тип отображения краткой информации из различных приложений) позволяют быстро просматривать важную информацию из приложений при помощи свайпов. Приложения созданные для часов Apple должны уважать условия в которых ими пользуются: быстро, часто и на маленьком дисплее.

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

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

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

Например, вы хотите посмотреть счет пропущенного вчера футбольного матча в приложении результатов спортивных событий. После запуска приложения вы видите список различных видов спорта: Баскетбол, теннис, футбол и т.д. Соответственно, вы выбираете футбол (делаете выбор, переходите внутрь по иерархии). Дальше перед вашими глазами список дат футбольных матчей: вчера, позавчера и т.д. Так как нас интересует вчерашний футбольный матч, мы выбираем «вчера» (снова выбор, уходим еще более вглубь по иерархии). В этом разделе мы видим список матчей, находим интересующий нас и нажимаем на него для получения детальной информации (делаем выбор, уходим еще более вглубь, достигли цели).

Постраничная навигация.

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

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

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

Способы взаимодействия

Apple предлагает несколько типов взаимодействия с вашими часами.

Тап (Нажатие).

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

Жесты

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

Вертикальный свайп прокручивает текущий экран (скролл как на компьютере или на iPhone/iPad).
Горизонтальный свайп перелистывает страницы при постраничном типе навигации.
Свайп слева направо возвращает вас назад (на уровень выше) к родительскому контроллеру.
Тапы (нажатия) означают выбор или взаимодействие.

Часы не поддерживают жесты несколькими пальцами (например стягивание или растягивание двумя пальцами, которое используется на iPhone/iPad для увеличения или уменьшения картинки).

Force Touch (Сильное нажатие)

Apple разработала этот вид взаимодействия специально для часов Apple. Retina экран определяет силу нажатия на экран. Сильное нажатие вызывает контекстное меню к активному экрану (если оно задано разработчиком). Эти меню используются для отображения возможных действий с активным экраном.

Digital Crown (Цифровая корона)

Это механическое колесико было создано для быстрой прокрутки без взаимодействия непосредственно с экраном. Цифровая корона позволяет быстро прокручивать длинные страницы.

Glances (Глансы)

Трудно перевести что это такое. Понятие введенное Apple для обозначение краткого свода основной информации из приложения.

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

Характеристики глансов:

Базируются на шаблонах. Есть разные шаблоны для отображения большего или меньшего количества информации. Шаблон можно выбрать в Xcode.
Не прокручиваемые. Вся информация должна умещаться на один экран.
Только для чтения. Нажатие в любом месте гланса открывает приложение.
Не обязательны. Не всем приложениям нужны глансы. Пользователь может выбирать какие глансы показывать, а какие нет.

Часть экрана внизу забронирована для индикаторов страниц (точки, отображающие глансы).

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

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

Notifications (Уведомления)

Уведомления на часах Apple представляют собой быстрый и легкий способ получить информацию. Уведомления можно разделить на два вида: Краткое уведомление (Short Look) и длинное уведомление (Long Look). Краткое уведомление появляется когда нужно уведомить пользователя о каком-то локальном или удаленном событии. Краткое уведомление предоставляет минимальное количество сдержанной информации – сохраняя определенную степень приватности. Если пользователь опустит руку с часами вниз (после просмотра уведомления), краткое уведомление исчезнет. Если пользователь продолжит удерживать руку поднятой (как при просмотре часов) или нажмет на краткое уведомление – появится длинное уведомление. Оно предоставляет более детальную информаци и большие возможности.

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

Short Notification (Краткое уведомление)

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

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

Long Notification (Длинное уведомление)

Длинные уведомления предоставляют больше информации о входящем уведомлении. Система предоставляет стандартный вид для длинного уведомления, но приложения могут изменять некоторые параметры чтобы соответствовать стилю бренда. Структура длинного уведомления одинаковая для всех приложений. Длинное уведомление состоит из следующих стандартных элементов: лента (поверх которой накладывается пиктограмма (иконка) приложения и название приложения) и кнопка «пропустить» (которая добавляется в конце уведомления). Эти стандартные элементы присутствуют обязательно и генерируются системой автоматически. Между этими элементами находится ваш собственный контент.

Контент приложения может располагаться снизу ленты либо лента может частично перекрывать контент.

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

Существует два вида длинных уведомлений: динамический и статический. Динамический имеет больше настроек чем статический. Более подробно о особенностях и настройке этих типов интерфейсов можно узнать в этом разделе WatchKit

Длинные уведомления могут содержать до 4 кнопок действий.

Кнопка «пропустить» отображается всегда и добавляется к 4 доступным для вас кнопкам автоматически.

Modal sheets (Модальные окна)

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

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

Критически важно привлечь внимание пользователя.
Самостоятельная задача должна быть выполнена либо отменена чтобы избежать потери пользовательских данных.

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

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

Вы не должны добавлять отдельную кнопку отмены в содержание вашего контента. Стандартными заголовками для кнопки закрытия являются «Закрыть», «Отмена». Цвет кнопки закрытия всегда белый.

Если задача требует подтверждения, используйте кнопку «Подтвердить» в содержимом вашего контента. Нажатие данной кнопки должно пропускать модальное окно и запускать необходимое действие (установленное вами для этой кнопки).

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

Layout

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

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

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

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

Делайте текстовые кнопки шириной на весь экран.

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

Размеры экрана

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

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

Цвет

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

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

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

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

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

Не забывайте что в мире примерно 8% мужчин и 0,5% женщин страдают на различные виды цветовой слепоты. Создавая свои дизайны следует учитывать это. Не рекомендуется использовать красный и зеленый как единственные цвета которые отличают различные состояния кнопок или других элементов.

Я рекомендую проверять свои дизайны в специализированных программах для выявления проблем в их восприятии людьми с цветовой слепотой. Я лично в этих целях использую Skala Preview.

Текст

Самое главное что вы должны помнить – текст должен быть легко читаем. Если пользователь не может прочитать слова в вашем приложении, то совершенно неважно насколько прекрасные шрифты и стили вы использовали.

Системный шрифтом, созданным Apple для своих часов является San Francisco. Скачать все семейство можно здесь. Не забываем о лицензиях и о том что Apple разрешает использовать его только на своих устройствах 🙂

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

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

Когда устанавливаете размеры системного шрифта вручную, используйте шрифт San Francisco Text для текста размером 19 поинтов и меньше. Используйте San Francisco Display для текста размером 20 поинтов и больше.

Анимация

Красивая анимация пронизывает часы Apple и делает пользовательский опыт более интересным и динамичным. Хорошая анимация может:

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

В Apple Watch анимация представляет собой запакованную последовательность статических изображений. Анимация обрабатывается на стороне iPhone и изображение передается на часы.

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

Брендинг

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

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

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

Основные элементы интерфейса

Labels

Лейблы отображают статический текст.

Основные характеристики лейблов:

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

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

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

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

Images (Изображения)

Этот элемент показывает одно изображение либо анимированную последовательность изображений.

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

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

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

Все файлы должны быть в Retina @2x разрешении. Нет необходимости создавать не Retina изображения.

Groups (Группы)

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

Группа может:

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

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

Не забывайте что часы Apple поставляются с разными размерами экранов. Поэтому необходимо создавать фоновые изображения во всех разрешениях (272 x 340 px и 312 x 390 px). Не нужно растягивать либо сжимать одно и тоже изображение для различных размеров экранов.

Tables (Таблицы)

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

Таблица:

Поддерживает различные типы строк.
Прокручиваема.
Может использовать в качестве фона цвет либо изображение.

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

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

Buttons (Кнопки)

Кнопка выполняет указанное действие.

Основные характеристики кнопки:

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

Рекомендуется создавать кнопки на всю ширину экрана. Если вы используете несколько кнопок, проследите чтобы у них была одинаковая высота.

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

Switchers (Переключатели)

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

Переключатели всегда показывают текущее состояние и всегда имеют ярлык.

Используйте переключатели чтобы дать возможность пользователю выбрать один из двух доступных вариантов. Например ДА/НЕТ или ВКЛЮЧЕН/ВЫКЛЮЧЕН.

Sliders (Слайдеры)

Слайдер позволяет пользователям изменять значение в заданном диапазоне. Пользователь изменяет текущее значение путем нажатия изображений по обеим сторонам от слайдера.

Слайдер:

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

Используйте собственные изображения по бокам слайдера чтобы подсказать пользователю что слайдер делает. Если вы не зададите собственные изображения, система автоматически будет использовать «+» и «-».

Maps (Карты)

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

Все настройки карты производятся в WatchKit.

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

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

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

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

Date labels (Дата)

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

Используйте этот объект везде где необходимо показать текущий день и время.

Timer labels (Таймер)

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

Menus (Меню)

Сильное нажатие на экран вызывает меню. В меню находятся действия которые может выполнить пользователь с текущим экраном.

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

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

Каждое действие должно иметь изображение и заголовок. Заголовок должен помещаться в одну или две строки.

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

Размеры пиктограмм (иконок) и изображений

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

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

Создавайте все файлы сразу в Retina разрешении. Нет необходимости создавать версию для не Retina экрана как при дизайне для iPhone.

PNG формат рекомендуется для всех изображений и пиктограмм.

Стандартная глубина цвета составляет 24 бита. По 8 бит для представления красной, синей и зеленой составляющей.

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

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

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

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

Menu icons (Пиктограммы меню)

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

Размер контейнера для изображения больше чем изображение.

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

Рекомендуется использовать PNG формат для пиктограмм меню.

И это всё?

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

Полезные ресурсы

Основные

Apple Watch HIG Руководство по созданию интерфейсов для часов от компании Apple

San Francisco Font Системный шрифт Apple Watch

Исходники для Photoshop и Sketch

Apple Watch GIU PSD Большой набор элементов интерфейса Apple Watch для Photoshop

Apple Watch Template PSD Шаблон Apple Watch для презентаций интерфейсов (вид спереди, перспектива) для Photoshop

Apple Watch Template PSD Front, Side Шаблон Apple Watch для презентаций интерфейсов (вид спереди, вид сбоку) для Photoshop

Apple Watch Icons PSD Набор иконок домашнего экрана для Photoshop

Apple Watch GUI Sketch Хороший и качественный набор элементов интерфейса Apple Watch для Sketch

Apple Watch GUI Resource Sketch Маленький набор самых основных элементов интерфейса Apple Watch для Sketch

Apple Watch Template Sketch Шаблон Apple Watch для презентаций интерфейсов (вид спереди) для Sketch

Apple Watch Template Sketch 2 Еще один неплохой шаблон Apple Watch для презентаций интерфейсов (вид спереди) для Sketch

Apple Watch Template Side Sketch Шаблон для презентаций интерфейсов Apple Watch (вид сбоку) для Sketch

Справочник по дизайну для Apple Watch