Прототипирование сайтов и приложений

Хочу рассказать о весьма полезном в работе инструменте, предназначенном для подготовки прототипов пользовательских интерфейсов. Причем совершенно бесплатном, но практически не уступающем своим платным собратьям. И вдобавок кроссплатформенном. Итак, встречайте – Evolus Pencil.

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

После запуска приложение имеет примерно вот такой вид:

Главное окно Pencil

В левой части экрана находятся библиотеки элементов, из которых строится прототип а в правой рабочая область.

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

Подготавливаем шаблон

Добавляем еще одну страницу, указывая в качестве background только что созданный шаблон

Выбираем шаблон

И размещаем на ней элементы, предназначенные для ввода пароля.

Первая страница

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

Добавим второе окно

Вторая страница

И теперь немного “Оживим” интерфейс – добавим переходы из одного экрана в другой

Связываем страницы

Ну и диаграмму нарисуем – как бы Workflow нашей программы

Рисуем диаграмму

Что теперь с этим всем можно сделать? Во первых – экспортировать каждый из экранов как файл-изображение в формате PNG. Но это не самое интересное. Интереснее сделать Экспорт, выбрав Single Web Page в качестве формата.

Выбор формата экспорта

Выбираем нужные страницы

image

И шаблон экспорта

Выбор HTML шаблона

И получаем этакую забавную HTML страницу, на которой можем переходить из одного окна нашего “Приложения” в другое – все элементы, которые мы настроили для перехода работают отлично

Первая страница в браузере Вторая страница в браузере

С таким же успехом можно создавать прототипы интерфейса веб приложений. Для этого есть все необходимые элементы.

Кроме того, можно создавать и свои библиотеки элементов – формат открыт и описан на сайте проекта. По сути это SVG файлы, упакованные в ZIP архив.

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

Ссылки:
Сайт проекта http://www.evolus.vn/pencil/

Прототипирование сайтов и приложений: 2 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *