Обучение ui/ux дизайну

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

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

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

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

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Согласно Apple, время взаимодействия пользователя с Apple Watch в среднем составляет приблизительно 2-5 секунд.

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

1. Оптимизируйте всю JPG-графику

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

 

Снижайте качество всех JPG-изображений

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Желательно использовать фотоснимки точно необходимого размера для того, чтобы избежать обрезки

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

2. Оптимизируйте PNG-исходники

 

Применяйте PNG-8 вместо PNG-24

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Применение PNG-8 вместо PNG-24 дает возможность значительно уменьшить размер.

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

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

 

Применяйте ImageOptim для максимальной компрессии

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

3. Применяйте прогрессивную загрузку

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

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

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

 

4. Делайте картинку-заглушку того же размера, что и изображение контента

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

В другом случае как только картинка загрузится, вся прочая часть контента «подпрыгнет» и сразу дезориентирует пользователя (в особенности если скролить).

 

5. Выстраивайте контент разумно

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

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

 

6. В Watch кнопка «назад» не имеет метки. Данное место занято наименованием скрина.

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

На iPad/iPhone был и тайтл, и специальная метка «назад» вверху дисплея. В Watch же не хватает места для двух элементов, поэтому Apple решил оставить лишь тайтл.

 

7. Детали интерфейса должны быть большими

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Чем больше элементы интерфейса, тем лучше. Убедитесь в том, что все кликабельные элементы интерфейса имеют размер минимум 80 px для 42 мм Watch или 75 px для 38 мм.

 

8. Применяйте правильный шрифт (SF Compact)

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

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

 

9. Оптимизируйте иконку для Watch

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

Уберите текст и сделайте глиф немного минималистичнее

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Упростите графику для очень маленького размера

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Оптимизируйте ее под функционал Apple Watch

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Выполняет ли ваша программа под Watch такие же функции, что и мобильное приложение?

Бывает так, что приложение под Apple Watch располагает только комплиментарным функционалом, как программа Camera на Watch использовалась в качестве обычного затвора для камеры iPhone.

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

 

10. Не думайте насчет отступов в Sketch/Photoshop

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

Близость всего контента к краям документа в Sketch/Photoshop при дизайне под Apple Watch мне режет глаза. Я никогда бы не допустил подобного для веба или же мобильных версий, однако в случае с Watch крайне важно учитывать то, что там есть специальные аппаратные скосы, которые добавят отступы в программе и так.

 

11. Обязательно учитывайте пользователей-дальтоников

11 рекомендаций по дизайну приложений для Apple Watch в Sketch

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

Бонус: Бесплатный курс по Дизайну Приложений под iOS

Перевод

Понравилось? Расскажите друзьям: