Country not specified
Unknown website Share

Apps4all

Страна: -
Город: -
Был онлайн: -
О себе:
 
08-07-2016, 11:04
Apps4all

Инструменты прототипирования и их возможности

Как сделать дизайн интерфейса для нового приложения или опции? Старый добрый карандаш и бумага? Photoshop или Sketch? Как бы вы не представляли себе это процесс, получение отклика по дизайну еще до этапа финального кодинга – это отличная возможность сэкономить время и усилия.

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

Эра анимации

Apple внес большие изменения в дизайн интерфейса iOS 7. Старые реалистичные структуры стали более плоскими и простыми. Многие детали стали анимированными, что позволило пользователю быстрее реагировать в ходе интеракции. С одной стороны, новичкам это усложняет процесс познания функционала, но одновременно это и упрощает понимание того, что происходит в конкретный момент и как устроено приложение. Хорошо сделанная анимация может удивлять, усиливая вовлечение. Сегодня анимация стала неотъемлемой частью качественного дизайна интерфейса. А ведь прежде почти не было инструментов, которые могли бы помочь дизайнерам учитывать этот важный аспект пользовательского опыта. Разработчикам приходилось добавлять анимацию и с помощью настроек долго и мучительно пытаться заставить их работать правильно.

В обновлении Android 5.0 Google так же упростила стиль интерфейса, назвав его Material Design. И здесь анимация тоже является ключевой частью пользовательского опыта.

Реализация идей

Если вы планируете создать прототип, не стоит полагаться на карандашный набросок. Этого достаточно для демонстрации базовых принципов работы приложения, но мало для понимания схемы взаимодействия внутри него. Prott позволяет фиксировать ваши скетчи и превращать их в интерактивные прототипы.

54bcfc76cb02f6.64247065.png

Для тех, кто предпочитает зарисовку своих идей в формате digital, но хочет сделать это бюджетно и без особых усилий, Apple предлагает альтернативный путь – Keynote. Да, именно он! Создавайте слайды в формате экрана устройства и анимируйте пошаговые действия. Конечно, здесь есть очевидное ограничение: вы не сможете взаимодействовать со всем интерфейсом в купе, а лишь создавать последовательные цепочки действий.

Если вы делаете приложение исключительно для iOS и хотите использовать стандартные элементы интерфейса, то вам подойдет увлекательный AppCooker. Это приложение для iPad, предназначенное для создания приложений для iPhone и iPad. Оно сильно ограничено по сравнению со многими десктопными инструментами, но в целом –полезное и занятное.

Высококачественные прототипы без кода

Facebook начал использовать Apple Quartz Composer, графический инструмент для прототипирования. Затем они добавили набор собственных инструментов и выпустили бесплатный Origami. Это очень мощный комплект для работы, однако, тот факт, что он изначально не было создан для дизайна приложений, делает его сложным для практического изучения и использования.

54bcfc83d22603.34199664.png

Для тех, кто хочет нечто вроде Origami, но попроще, есть несколько аналогов.

Form – это полная свобода творчества. Сервис был выпущен RelativeWave на платной основе, но затем был куплен компанией Google и стал бесплатным. Пока сервис функционирует только в рамках iOS, но Android тоже числится в планах. Каки Origami, Form оснащен графической программной средой.

54bcfc8d7aa1d2.40980847.png

Если же вы хотите создавать прототипы, которые выглядят и работают как нативные приложения, тогда стоит обратить внимание на Pixate. Он позволит вам создавать iOS- и Android-прототипы, которые напрямую используют нативные компоненты интерфейса. Вы сможете самостоятельно добавлять собственные стили и анимацию в программную среду.

54bcfc972fd346.37442944.png

Решения на базе HTML5

На рынке представлено множество решений по прототипированию, включающих создание интерфейсов с помощью HTML5. Два качественных примера - Proto.io and Framer.

Proto.io оснащен опциями совместной работы и позволяет получать отзывы от команды разработчиков или клиента. В отличие от большинства инструментов на рынке, Proto.io имеет собственную библиотеку компонентов Windows Phone, iOS и Android. Proto.io позволяет проводить тестирование на реальных устройствах. Это решение одно из наиболее дорогих, однако оно того определенно стоит.

54bcfca2d79208.41304324.png

Тем, кто хорошо знаком с JavaScript (или CoffeeScript), отлично подойдет Framer. Кстати, сервис имеет возможность прямого импорта из Photoshop и Sketch.

54bcfcad5177a0.72421473.png

А что насчет функциональных прототипов?

Что если ваш прототип нуждается в большем, чем просто выглядеть и работать как финальная версия приложения? Некоторые концепции приложений могут функционировать и тестироваться только при наличии реальных данных или при использовании камеры.

В такой ситуации вам может помочь LiveCode. Этот инструмент оснащен средой для создания визуального интерфейса, хорошими анимационными возможностями и позволяет создавать полнофункциональные прототипы. Также в его силах легко и быстро добавить базу реальных данных или специфические мобильные опции. LiveCode целесообразно использовать, когда речь о высоком уровне сложности прототипирования. 

 
приложение
прототип
Apple
интерфейс
разработка
тестирование
0 0 0

Чтобы оставлять комментарии вам необходимо зарегистрироваться