Ця програма - найвідоміший інструмент для створення прототипів. Balsamiq доступний для всіх операційних систем, і його можна інтегрувати з різними системами спільної роботи, включаючи Jira, Confluence і Google Drive. Також є онлайн-версія Balsamiq. Ліцензія для одного ПК обійдеться в 79 доларів, а доступ до веб-додатку - від 12 доларів в місяць (не більше трьох активних проектів).
У Balsamiq є велика бібліотека шаблонів, причому майже будь-який елемент інтерфейсу можна налаштувати під конкретний сценарій. Наприклад, додавши на форму меню, що випадає, можна задати, яке з його полів має бути підсвічено як вбрання.
Отримані макети можна зберігати у власному форматі програми для подальшого редагування або експортувати в PNG або PDF.
Також є режим презентації макету. При його включенні макет відображається в повноекранному режимі, а курсор являє собою стрілку, постійно спрямовану в центр екрану. Натиснувши курсором на елемент інтерфейсу можна переміститися в інший макет, або перейти по URL.
WireframeSketcher Studio - можливо, самий зручний інструмент створення макетів з розглянутих в цій статті. У ньому бібліотека шаблонів навіть більше, ніж в Balsamiq, є макети під всі популярні мобільні ОС (iOS, Windows Phone і Android) і навіть деякі веб-фреймворки, наприклад Bootstrap. Інтерфейс цієї програми, в порівнянні з тим же Balsamiq Mockups, більш зручний: найбільш часто використовувані функції, такі як угруповання елементів і винос їх на передній або задній план, виконується кнопками на головній панелі, а не з меню.
Проект може включати в себе кілька «екранів», а всередині кожного екрану елементи інтерфейсу можна об'єднувати в групи. При редагуванні навігація по екранах і групам елементів здійснюється за допомогою панелі, постійно розташованої в лівій частині вікна програми, що вельми зручно при роботі над складними макетами. Праву сторону вікна займає браузер бібліотеки шаблонів.
Всі елементи піддаються тонкій настройці. Проілюструвати механізм роботи інтерфейсу можна за допомогою функції клонування початкового екрана. Після цього кожен крок можна проілюструвати окремо, змінивши відповідні елементи. Ще одна корисна функція - можливість імпортувати графічні файли. Завдяки цьому можна зробити скріншот реального інтерфейсу, а потім домалювати зміни.
WireframeSketcher Studio доступна для Windows, Linux і OS X, а також у вигляді плагіна для Eclipse. Безстрокова ліцензія, що включає в себе один рік технічної підтримки, обійдеться в 99 доларів.
Налаштування шаблонів проводиться примітивно, але зручно: при виборі одного з елементів, які є розміщеними на лист, поруч з ним з'являється кілька кнопок, призначення яких очевидно з піктограм.
FlairBuilder підтримує інтерактивність. По кліку на будь-який елемент інтерфейсу можна перейти на іншу сторінку документа, заховати / показати або зробити активним / неактивним який-небудь елемент макета, перегортати таби, змінювати положення і розмір елементів інтерфейсу. До будь-якого з перерахованих дій можна додати умову виконання на основі стану інших елементів.
DesignerVista заточений виключно для проектування інтерфейсів десктопних додатків під Windows. Звідси й особливості бібліотеки: в ній є, наприклад, величезний набір шаблонів для побудови стрічкового інтерфейсу (ribbon). Навіть простий шаблон вікна представлений в двох варіантах: з Windows 7 і 8.
Інтерфейс програми стилізований під останні версії Microsoft Office. Працювати з ним зручно. Єдиний недолік - немає автоматичного вирівнювання елементів. Наприклад, в WireframeSketcher Studio шаблон при перетягуванні його на лист намагається автоматично вирівнятися щодо сусідніх елементів. При цьому відображаються лінії, що нагадують логіку цього вирівнювання. У DesignerVista для вирівнювання використовуються окремі кнопки на панелі інструментів, це злегка збільшує час створення макета.
Загалом, якщо потрібно працювати тільки з макетами десктопних Windows-додатків, то DesignerVista - ідеальне рішення, отриманий прототип буде майже не відрізнятися від скриншота реальної програми. Ціна ліцензії - 169 доларів для одного користувача.
GUI Design Studio поширюється в двох версіях: Professional і Express, за ціною 129 і 499 доларів відповідно. Цю програму відрізняють від інших найбільш широкі можливості програмування поведінки інтерфейсу, доступні тільки у версії Professional. Мабуть, цим і пояснюється така висока ціна.
Вмісту форм макета можна присвоювати імена змінних. Змінні зберігаються в базі даних, яка розуміє слова SELECT, FROM і WHERE. Крім даних, що вводяться користувачем, в базу можна заздалегідь завантажити свої дані. Для кожного елемента можна задати умови видимості і активності, виходячи із значення тих чи інших змінних.
Крім графічно видимих елементів, в прототип можна додавати і невидимі елементи, при навігації на які будуть відбуватися різні події: виконуватися запити до бази даних, відтворюватися звуки або запускатися анімація деяких елементів інтерфейсу.
Запускати інтерактивні прототипи можна або з самої програми, або зі спеціального viewer'а, який поширюється безкоштовно. Зрозуміло, ніщо не заважає просто експортувати макети в PNG, а то й потрібно інтерактивність. Версія Professional підтримує контроль версій макетів за допомогою SVN.
GUI Design Studio орієнтована на створення макетів програм для ОС Windows. Набір шаблонів тут не такий багатий, як в DesignerVista. Його можна трохи розширити, імпортувавши власні іконки в форматі ico.
Інтерактивність в UXToolbox реалізована досить примітивно. Будь-який елемент інтерфейсу можна використовувати як посилання на інший аркуш документа. Листи одного документа є повністю незалежні макети.
У програмі є два режими відображення макета: wireframe і high-res. Останній робить зображення більш приємним для ока, інтерфейс стає схожим на скріншот.
На жаль, бібліотека шаблонів досить мізерна. З іншого боку, в ній є специфічні елементи інтерфейсу з iOS і Android. У програмах, здатних генерувати тільки схематичні зображення, багато елементів (наприклад, кнопки або смуги прокрутки) зображуються одними і тими ж шаблонами для макетів веб-сайтів і мобільних додатків. Але якщо необхідно створити більш реалістичний макет, такий підхід неприйнятний.
Просять за UXToolbox чимало - 266 доларів за ліцензію для одного користувача. Звернути на неї увагу варто, якщо ти хочеш швидко створювати акуратні макети, які можна вставити не тільки в ТЗ розробника, але і в презентацію.
Хоча ця бібліотека і поступається за кількістю корисних шаблонів кращим програмам в нашому огляді, в ній є все, що потрібно для роботи на швидку руку. Зрозуміло, можна змінювати шаблони в розмірах і редагувати текст, який на них присутній. А ось змінювати стан елементів управління, наприклад натиснути кнопку або вибрати один з пунктів меню, що випадає, як це дозволяють робити повноцінні програми, на жаль, не вийде.
З огляду на хорошу репутацію Microsoft Visio як засобу створення всіляких схем, я не міг не подивитися, чи годиться він для складання макетів для користувача інтерфейсів.
На жаль, в даному випадку спеціальне виявилося краще універсального. В Visio відсутня можливість змінювати стану елементів управління. Наприклад, відсутній такий елемент, як порожня (не вибрано) радіокнопка. А щоб створити список, що розкривається, доведеться використовувати окремі шаблони для кнопки зі стрілкою і кожного з елементів списку. Все це призводить до того, що процес створення макета в Visio займає помітно більше часу, ніж в спеціалізованій програмі.
Макети як сервіс
Займатися прототіпірованії можна і за допомогою веб-сервісів. Очевидна перевага тут в можливостях спільної роботи. Число таких сервісів настільки велике, що розглядати їх так само детально, як і програми, було б досить нудно. Справа в тому, що за функціональністю більшість з них повторюють один одного. Тому я дам стислий опис десяти веб-сервісів, які першими попалися мені на очі.
Покажи цю статтю друзям: