Дизайнери радять, як тестувати програми
Найкращі інструменти прототипування
Найперші етапи розробки мобільного сервісу можна назвати найважливішими. Look At Me попросив дизайнерів інтерфейсів розповісти про те, навіщо потрібне прототипування, та поділитися улюбленими інструментами для цього процесу.
Прототипування потрібно для декількох речей:
Подивитися, як екран виглядає на мобільному пристрої. Для цього вже є багато всього, наприклад, Sketch дозволяє в процесі роботи транслювати макет на екран. Я використовую для роботи Photoshop, а для виведення на екран Xscope.
Перевірити загальну логіку програми, переконатися, що всі заплановані переходи зрозумілі. Він не дуже багато всього вміє, але для своїх завдань зроблено дуже добре. У ньому є екрани, в екранах можна вказувати нерухому шапку і низ, позначати області, що натискаються, і призначати переходи між екранами.
Спробувати зробити незвичайну анімацію і перевірити, наскільки вона виходить зрозумілою і зручною. — це завжди зручно.
Якщо Pixate схреститься з Flinto та реалізує роботу з екранами, буде дуже зручно. Але одного суперінструменту, де і іконки можна намалювати, і спробувати анімацію, і переходи між екранами швидко запрототипувати, поки немає».
«При демонстрації дизайну мобільного інтерфейсу буває недостатньо статичної картинки. Графічний дизайн - це лише одна зскладових. Велике значення мають анімація, переходи між екранами та їх послідовність. Такі деталі допомагають отримати цілісне уявлення про майбутній продукт.
Я використовую в роботі Pixate – веб-сервіс для створення мобільних прототипів. Головна його перевага – простота. Для роботи не потрібно писати код, а за допомогою наявних інструментів реалізуються всі основні типи анімацій, переходів та взаємодії між екранами. На мій погляд, Pixate не підходить для створення комплексного прототипу, що покриває всю функціональність продукту, проте він дуже зручний для демонстрації концептуальних рішень та окремих деталей інтерфейсу.
Найбільший недолік для мене — відсутність у Pixate візуального відображення таймлайну, тобто всіх анімацій у часі. Працюючи над об'ємною завданням доводиться пам'ятати, інколи ж навіть виписувати все значення секундах (keyframes), оскільки вони задаються у текстовому вигляді. Але це не критично, і для більшості реальних завдань цей інструмент підходить».
арт-директор Look At Media
Важливо швидко візуалізувати задумані переходи та анімацію в додатку та подивитися на них наживо, щоб зрозуміти, які з них вписуються в контекст найкращим чином. У Pixate, наприклад, можна зробити каркас прототипу з прямокутників, помацати його насправді і вже на цьому етапі відмовитися від якихось ефектів, навіть не завантажуючи зображення. Також Pixate дозволяє створювати команди для спільної роботи над одним прототипом, тоді у всіх учасників буде постійний доступ до прототипу з можливістю його редагувати.
Тепер про головні недоліки. По-перше, в Pixate не вдасться зібрати додаток, що складається з великої кількості екранів, в один прототип. Позиціюванняоб'єктів здійснюється в одній робочій області екрану, тому доведеться робити кілька прототипів, що ілюструють різні взаємодії та переходи у додатку. По-друге, за допомогою Pixate неможливо показати якусь феєричну анімацію, весь вибір обмежується стандартною бібліотекою. В іншому кращого інструменту — кращого, ніж Pixate, я поки що не знайшов».