1.
Обзор и анализ инструментов проектирования и прототипирования интерфейсов Рустем Гайфутдинов

2.
Откуда берутся прототипы? ?

3.
„ В начале было Слово“

4.
Материализация идей Скетч (sketch)

5.
Скетч — карандашный набросок, зарисовка, эскиз, заготовка

6.
<ul><li>Выбор лучших скетчей

7.
Ввод в компьютер

8.
Уточнение </li></ul>Скетч (sketch) Вайрфрейм (wireframe)

9.
Вайрфрейм — это схема интерфейса, отражающая идею концепции и структуру будущего приложения

10.
<ul><li>Выбор лучших вайрфреймов

11.
Уточнение

12.
Дизайн </li></ul>Вайрфрейм (wireframe) Мокап (mockup)

13.
Мокап — графический макет системы Красиво, но статично

14.
<ul><li>Выбор лучших мокапов

15.
«Оживление» интерфейсов </li></ul>Мокап (mockup) Прототип (Prototype)

16.
Ещё не программа , Что такое прототип? но уже не картинка

17.
Прототип... Кликабельный Его можно потыкать, подвигать, пощёлкать, почувствовать Интерактивный Он реагирует на ваши действия Реальный Выглядит как реальная программа

18.
Дизайн + Функциональность + Контент Прототип

20.
Рынок инструментов проектирования и прототипирования интерфейсов содержит сегменты, соответствующие этапам разработки прототипа „ Каков корень, таково и семя“ Этапы разработки прототипа Сегменты рынка

21.
Конструкторы скетчей и вайфреймов Конструкторы мокапов и графические редакторы Инструменты динамического прототипирования

22.
Онлайн Веб-приложения Оффлайн десктоп-приложения

23.
Конструкторы скетчей и вайрфреймов <ul><li>Balsamiq Mockups

24.
Designer Vista

25.
SketchFlow

26.
ForeUI

27.
Pidoco

28.
Pencil Project

29.
MockFlow

30.
WireFrameSketcher Studio </li></ul>

31.
Конструкторы мокапов и графические редакторы <ul><li>Designer Vista

32.
Adobe Photoshop

33.
Pidoco

34.
Adobe Illustrator

35.
Microsoft Visio </li></ul>

36.
Инструменты динамического прототипирования <ul><li>Axure RP

37.
GUI Design Studio

38.
iRise

39.
Microsoft Expression Blend

40.
GUI Machine </li></ul>

41.
Критерии оценки <ul><li>Визуальная точность прототипов

42.
Интерактивность прототипов

43.
Возможность прототипирования различных типов приложений

44.
Скорость создания прототипов

45.
Простота и удобство работы

46.
Поддерживаемые платформы

47.
Уникальные и интересные возможности </li></ul>

48.
Прототипирование веб-сайтов и веб-приложений <ul><li>Быстрое и простое создание прототипа

49.
Подгружаемые библиотеки компонентов

50.
Создание и использование мастеров

51.
Рисование UML-диаграмм

52.
Компоненты «Фрейм» и «Динамическая панель»

53.
Карта сайта </li></ul><ul><li>Не для прототипирования десктопных приложений

54.
В базовом варианте мало компонентов

55.
Компоненты слабо настраиваемы

56.
Ограниченные возможности интерактивности (мало событий и действий)

57.
Нет настроек приложения и проекта

58.
Не руссифицирован </li></ul>

59.
<ul><li>Для Windows и Mac OS, но не для Linux

60.
Генерирует HTML-код, но неоптимальный

61.
Совместная работа, но ограниченная и неполноценная

62.
Генерация спецификации, но не работает с Open Office

63.
Слабый дизайн базовых компонентов, но есть хорошие подгружаемые библиотеки </li></ul>Прототипирование веб-сайтов и веб-приложений Вывод: инструмент позволяет быстро и просто создавать хорошие прототипы веб-сайтов, но прототипирование веб-приложений со сложной функциональностью затруднено. Создание прототипа десктоп-приложений невозможно.

64.
GUI Design Studio <ul><li>Прототипирование как веб, так и десктоп-приложений

65.
Быстрое и простое создание прототипа

66.
Простой механизм создания действий

67.
Большой набор компонентов, некоторые имеют предзаданные действия

68.
Набор Ribbon компонентов

69.
Набор иконок

70.
Удобная навигация по рабочей области </li></ul><ul><li>Только для Windows

71.
Ошибка при наличии в пути к директории установки русских букв

72.
Ненативные компоненты

73.
Слабый механизм просмотра прототипов

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

75.
Настройка компонентов в попап окне

76.
Не руссифицирован </li></ul>

77.
GUI Design Studio <ul><li>Есть компоненты как с хорошим, так и со слабым дизайном

78.
Интерфейс программы: много места выделено под рабочую область, но интерфейс не привлекательный, неудобная верхняя панель инструментов </li></ul>Вывод: инструмент позволяет быстро и просто создавать прототипы несложных десктоп и веб-приложений, однако дизайн и интерактивность не на самом высоком уровне. Прототипирование приложений со сложной функциональность затруднительно.

79.
<ul><li>Приятный интерфейс

80.
Высокая интерактивность прототипов, удобный инструмент создания действий

81.
Хороший механизм просмотра прототипов: иммитация работы сессий и БД, дополнительные параметры просмотра

82.
Красивая и понятная визуализация связей страниц сайта и действий, можно описывать логику работы сайта

83.
Совместная работа

84.
Удобный инструмент работы с шаблонами

85.
Экспорт/импорт табличных данных в/из CSV

86.
Экспорт прототипа в iDoc — интерактивный документ </li></ul><ul><li>Только для Windows

87.
Не для прототипирования десктопных приложений

88.
Цена от 6995$

89.
Маленький набор компонентов

90.
Мало настроек компонентов

91.
Более сложный </li></ul>

92.
Вывод: мощный и удобный инструмент для прототипирования веб-сайтов и веб-приложений со сложной функциональностью. Интерактивность прототипов — высокая. Часть функционала приложения уникальна. Однако, не позволяет прототипировать десктоп-приложения. Дорогой.

93.
<ul><li>Только для Windows

94.
Прототипирование только Silverlight и WPF приложений

95.
Более сложный

96.
Не руссифицирован </li></ul><ul><li>Прототипирование как веб, так и десктоп-приложений

97.
Большой и красивый набор нативных компонентов, представление их как в виде скетчей, так и с полноценным дизайном

98.
Компоненты детально настраиваемые

99.
Высокая интерактивность прототипов

100.
Гибкий, интересный и удобный механизм создания действий

101.
Создание анимации, плавных переходов

102.
Карта связей интерфейсов </li></ul>

103.
<ul><li>Генерация кода Visual Basic или Visual C#, но, возможно код неоптимальный. Для Java-разработчиков код бесполезен

104.
Интерфейс программы: необычный, непривычный, «на любителя», иногда сложный, не всегда удобный

105.
Прототипирование не только классических, но и вообще любых приложений — несложных игр, анимаций. </li></ul>Вывод: мощный и удобный инструмент для прототипирования Silverlight и WPF приложений со сложной функциональностью. Интерактивность и визуальная привлекательность прототипов — высокая. Часть функционала приложения уникальна. Однако, не позволяет прототипировать приложения для других платформ. Несколько сложен в освоении.

106.
<ul><li>Прототипирование как веб, так и десктоп-приложений, а в ближайшей перспективе — и для мобильных платформ

107.
Кроссплатформенный: для Windows, Mac OS, Unix

108.
Быстрое и простое создание прототипа

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

110.
Наборы как нативных, так и платформо-независимых (Vaadin) компонентов, детальная настройка компонентов

111.
Большой набор иконок

112.
Уникальный механизм просмотра прототипов

113.
Механизм для работы с шаблонами

114.
Встроенные утилиты: графический редактор, скриншотер, Pixel Grabber

115.
Детальная настройка проекта и приложения

116.
Русский и английский языки интерфейса </li></ul>

117.
<ul><li>Нет совместной работы, планируем представить клиент-серверное решение в ближайшей перспективе

118.
Нет генерации кода. Планируем сделать тогда, когда сможем генерировать оптимальный, полезный код

119.
Требовательный, работа на нетбуке затруднительна

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

121.
Нет генерации спецификации, планируем экспортировать прототип в интерактивный документ </li></ul>Вывод: мощный и удобный инструмент для прототипирования десктоп и веб-приложений со сложной функциональностью. Интерактивность и визуальная привлекательность прототипов — высокая. Часть функционала приложения уникальна. Пока не обладает некоторыми удобными и полезными функциями.

122.
Мы в сети Рустем Гайфутдинов Менеджер по развитию продукта [email_address] rustem-gayfutdinov.moikrug.ru GUI Machine Прототипирование десктопных и веб-приложений www.guimachine.ru [email_address] twitter.com/GUI_Machine community.livejournal.com/guimachine