Human Interface Guidelines (стр. 4 )

Handoff

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

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

Визуальный Дизайн

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

Размеры Дисплея

Размеры Apple Watch бывают 38мм и 42 мм.

38мм (высота)

42мм (высота)

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

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

Расположение

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

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

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

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

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

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

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

Цвет

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

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

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

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

Индивидуализация

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

1

2

3

4

5

Prev Next

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

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

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

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

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

Шрифтовое Оформление

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

Шрифты

В Apple Watch системным шрифтом является SF Compact. Существует два варианта этого шрифта: SF Compact Text и SF Compact Display. Когда вы выбираете системный шрифт для текста в названиях и других элементах интерфейса, Apple Watch автоматически применяет наиболее подходящую версию этого шрифта на основании размера в пунктах. При необходимости, система также меняет шрифт автоматически.

Выберите верный вариант шрифта для использования в макетах приложения. Выберите SF Compact Text для названий, размер текста которых равен 19 пунктам или меньше. Для названий, размер текста которых равен 20 пунктам или больше, выберите SF Compact Display. Эти размеры в пунктах предназначены для макетов изображений, разрешение которых равно 144 пикселям на дюйм.

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

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

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

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

Встроенные Стили Шрифта

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