11 підказок у проектуванні дизайну додатків для Apple Watch

Apple Watch повністю новий тип пристроїв з новими обмеженнями та можливостями, які ми не зустрічали раніше під час створення дизайну для web, desktop та mobile.

Нещодавно я їздив до Сан-Франциско і дізнався про дизайн додатків для Apple Watch із WWDC. Я із задоволення поділюся з вами кількома простими порадами які допоможуть вам створювати кращі продукти.


Більшість із речей, про які я згадав у цій статті пояснюються у двох сесіях WWDC 2015: Designing for Apple Watch і Apple Watch Design Tips and Tricks. Подивіться також Watch Human Interface Guidelines від Apple.


Завжди пам’ятайте що ви повинні

Проектувати дизайн для Продуктивності

Згідно з аналітикою Apple показаною на WWDC середній час взаємодії користувача із Годинником становить між 2 та 5 секундами. Якщо є хоча б одна річ, яку вам потрібно запам’ятати із цієї статті так це саме це. Завжди намагайтеся подати контент користувачу якомога швидше. Це надзвичайно важливо у Годиннику, в порівнянні з іншими платформами.


1. Оптимізуйте вашу .JPG графіку

Користувач Apple Watch, який дивиться на 4cm екран що зазвичай постійно знаходиться у стані руху віддасть перевагу швидкому завантаженню картинки ніж її якості.

Зробіть якість .JPG нижчою

Намагайтеся використовувати точний розмір фото, уникайте обрізання

2. Оптимізуйте PNG-картинки

Використовуйте PNG-8 замість PNG-24

Використання PNG-8 замість PNG-24 Допоможе значно зменшити розмір файлу. Ще одна річ яку ви можете оптимізувати, це додати чорний фон замість прозорого. Я не роблю цього для Web/mobile, але на годинниках ми маємо більше контролю над тим, де графіка буде відображена. І в 90% випадків це буде саме чорне тло.

Цей спосіб особливо покращує швидкодію коли ви зберігаєте серію картинок для майбутньої анімації.

Використовуйте ImageOptim щоб стиснути картинки ще сильніше

3. Використовуйте прогресивне завантаження

Якщо треба завантажити важкий контент на кшталт картинок або мап, показуйте користувачу решту контенту. Не блокуйте увесь екран тільки тому що ви чекаєте на завантаження фото.

4. Переконайтеся що заглушка під картинку має такий же розмір як і сама картинка

Інакше, як тільки зображення буде завантажено, решта вмісту буде “стрибати” і дезорієнтувати користувача (особливо, якщо він почав прокрутку).

5. Розумно впорядкуйте свій контент

При дуже короткотривалому часу взаємодії надзвичайно важливо показати потрібний вміст якомога швидше.

6. Кнопка “Назад” на Годиннику не має позначки. Це місце зайняте назвою екрана.

На iPhone/iPad в верхній частині екрану в нас були як заголовок так і підпис кнопки “Назад”. У Годиннику не достатньо місця для обох, тож Apple вирішили залишити лише заголовок екрана на який зараз дивиться користувач.

7. Робіть елементи великими

Більше значить краще. Переконайтесь що кожен клікабельний елемент має розмір хоча б у 75 пікселів для 38 мм Годинників або 80 пікселів для 42 мм.

8. Використовуйте правильний шрифт (SF Compact)

у Apple є два різних шрифта для mobile/desktop і для Годинника. Сімейство шрифта San Francisco має Компактну версію для Годинника. Порівняно з версією regular він має більше вільного простору між символами, які роблять його більш розбірливим при невеликих розмірах.

9. Оптимізуйте свою іконку для Годинника

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

Видаліть текст, зробіть гліф якомога мінімалістичнішим

Спростіть графіку для маленьких розмірів

Підлаштуйте під функціональність Годинника

Ваш спеціалізований додаток для Годинника робить ті ж самі речі, що й ваш мобільний додаток? Інколи додаток для Годинника має лише доповняльну функціональність, на кшталт додатку Камери який використовується як затвор для камери iPhone. Спробуйте підлаштувати свою іконку так, щоб відобразити цю різницю в функціональності.

10. Не турбуйтеся про відступи у Sketch/Photoshop

Кров з моїх очей іде коли я бачу відступи до країв у документі Photoshop/Sketch коли створюється дизайн додатку Годинника. Я б ніколи не дорпустив такого на web або mobile, але коли мова йде про Apple важливо усвідомити що він має апаратну рамку, яка додає природні відступи додатку.

11. Не забувайте про користувачів із колірною сліпотою

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

Ця стаття є перекладом статті Artiom Dashinsky 11 Tips For Designing Apps for Apple Watch
www.dashinsky.com