Ответ
Новое поколение прототипирования веб-сайтов Опции темы
Старый 16.07.2014, 20:46
  #1
Midas
 
Аватар для Midas
Регистрация: 05.12.2011
Сообщений: 159

Новое поколение прототипирования веб-сайтов
Я все больше и больше разочаровываюсь в существующем наборе инструментов и принятых методах создания UI и UX.





По личному опыту могу сказать, что создание статических макетов в Photoshop и Illustrator больше не в силах отражать всю суть современного дизайна пользовательского интерфейса. Кроме того, создание каркасов и документаций UX в таких инструментах, как Axure кажется, тоже устарело.

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

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

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

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

Это пространство, а не страница

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

Pasquale d'Silva называет эту область UI дизайна Переходными Интерфейсами, и я думаю, что он точно определил ключевую область исследований современного веб-дизайна и дизайна приложений.

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

Для создания макетов и прототипов взаимодействия может быть использовано анимационное программное обеспечение. After Effects, Adobe Edge Animate, или даже Flash могут быть использованы для отображения анимации и переходов.

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

Средства визуальной композиции

Не удивительно, что многие из инструментов, которые используют интерактивные дизайнеры, обращаются к визуальному композитингу с помощью мультимедиа инструментов, используемых VJ'S и специалистами по видеомонтажу.

Таким, наиболее известным инструментом компании Apple, является их собственный визуальный инструмент Quartz Composer, который всегда был у вас под рукой, если у вас есть Mac, и установлен Xcode. (Вы найдете его в Developer > Applications, или как часть Xcode).

Quartz Composer резко попал в центр внимания, как интерактивный инструмент прототипирования, из-за статьи Go Big by Going Home, где Джули Чжо, дизайнер Facebook, сообщила, что их команда дизайнеров при создании нового Facebook Home широко использовала QC для проектирования и тестирования UI:

"Что-то вроде главной страницы Facebook, лежит полностью за пределами возможностей Photoshop-а, как инструмента проектирования. Как мы можем говорить о физико-ориентированом интерфейсе, элементы которого могут двигаться по экрану с одной только статикой?

Когда вы видите живую, отточенную, интерактивную демонстрацию, вы сможете мгновенно понять, как это все работает – то, чего иногда нельзя достичь простыми словами и каркасным проектированием. И это приводит к лучшей обратной связи, большей итерации, а в конечном итоге к лучшему конечному продукту".
В одной из веток форума QC, дизайнеры решили воспроизвести работу команды Facebook. Последователи Facebook, выпустили Facebook Origami, инструментарий для Quartz Composer специально ориентированный на интерактивных дизайнеров.





Обучение Quartz Composer может занять некоторое время, но его узловой подход вполне логичен. Его визуальное представление вычислительного процесса может сделать работу более понятной для дизайнеров, и они с легкостью будут возиться с параметрами и изменять проводку композиции.

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





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





Еще один новый инструмент, который выглядит довольно интересным, является VUO, правда в настоящее время он еще в бета-версии.





Новое поколение макетов и прототипирования

Новые инструменты направлены непосредственно на интерактивных дизайнеров, разрабатывающих прототипы приложений и веб-сайтов.

Один из лучших таких инструментов, это Briefs. Briefs это приложение под Mac, которое ориентировано на создание приложений для iPhone и iPad, оно очень функционально, хоть и звучит довольно насмешливо. К тому же под iOS есть свое приложение, называемое Briefscase, чтобы позволяет просматривать свои Briefs проекты и проверять их на работающих устройствах.





Работа с Briefs очень логична. Вы можете импортировать изображение экрана и добавить на него простую интерактивность, или, чтобы в полной мере воспользоваться интерактивным опытом, построить макеты экрана из библиотеки стандартных элементов пользовательского интерфейса, таких как панели вкладок, поисковых окон, списков элементов и т.д. Вы можете использовать библиотеки для iOS, Android , настольных компьютеров и стилей платформы "Blueprint". Применив их, вы сможете показать отображение результатов поиска или переход с одного экрана на другой.

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

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

При цене в $199, Briefs является не самым дешевым продуктом, но зато он очень хорошо разработан, и отлично делает то, для чего создавался.

Если хотите использовать приложение с открытым исходным кодом, попробуйте Framer.js – приложение для разработки интерактивных прототипов и быстрого создания макетов пользовательского интерфейса.





С Framer Studio, все элементы экрана сначала создаются в Photoshop, как группа слоев, после чего импортируются в Framer чтобы добавить переходы и функциональность. Framer использует CoffeeScript, "маленький язык, работающий на основе Javascript", чтобы сохранить код чистым и простым. Однако этот код не имеет реальной ценности вне инструмента прототипирования.

Если вы имеете опыт по части использования Photoshop для создания макетов веб-сайтов или приложений, то Framer Studio является отличным способом добавления интерактивности в ваши проекты.

Следующие инструменты для проектирования и разработки

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

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

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

RealTime Studio от Outracks, является хорошо реализованным IDE для визуализации, это почти смесь между узловым инструментом, таким как Quartz Composer, и Timeline на основе инструмента похожего на Edge Animate.





Из-за того, что в RealTime Studio вы можете увидеть и код и его визуальное представление, и дизайнеры и разработчики могут понять и использовать его. Outracks использует свой собственный язык, называемый Uno, который очень похож на Java или ActionScript. Но что круче всего – поскольку код можно экспортировать для целого ряда различных целевых платформ, это практический инструмент развития, а не просто приложение визуализации.

Из-за того, что он очень многое умеет, не удивительно, что экран программы довольно хаотичен. Существует точка зрения, узел, окно Timeline, окно кода, а также окно предварительного просмотра. Некоторые улучшения в пользовательском интерфейсе были бы очень кстати. Тем не менее, я очень доволен этой программой.

И на последок, еще одна интересная новинка – NoFlo. Это потоковый-инструмент Javascript программирования. Разработан компанией Kickstarter, и подчеркивает архаичность существующих инструментов и неиспользованный потенциал потоков на основе средств программирования, которые могут быть более понятны непрограммистам. NoFlo опирается на сервис Node.js для получения функциональных приложений в браузер. Сейчас готовиться выпуск самостоятельного приложения под Android и iOS.





Движок NoFlo имеет открытый исходный код и может быть использован бесплатно. Существует также хостинг-версия на Flowhub.io. Flowhub может работать либо в браузере, либо как приложение Chrome.

Но на самом деле Flowhub не оправдал себя, и является скорее помехой, а не помощью. Я подозреваю, что большинство разработчиков готовы будут писать код вручную, чем использовать Flowhub. Тем не менее, это лишь начало.

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

Я убежден, что будущее дизайна UI заключается в инструментах на основе потоков.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Транскрипция – новое слово в контентогенерации Alsu Сервисы 0 23.07.2013 19:24
Новое поле деятельности для постеров creativius Файлообмен 191 06.07.2012 00:25
обучение раскрутки сайтов mastersexa Статьи 10 19.03.2012 22:43
Куплю базу сайтов protrence Рынок 5 09.03.2012 23:08
Заполнение DLE сайтов новостями avatar Работа 1 30.10.2011 06:32

Метки
дизайн, потоки, прототипы


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 23:34. Часовой пояс GMT +3.