Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

11,759 views

Published on

Обзор и анализ инструментов проектирования и прототипирования программных интерфейсов - Microsoft Expression Blend, iRise, Axure, GUI Design Studio, GUI Machine - представленный Рустемом Гайфутдиновым, менеджером "АЛЕЕ СОФТВЕР" по развитию продукта GUI Machine на Vaadin Developer Meetup 24 января 2011 года

Published in: Design
  • Be the first to comment

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

  1. 1. Обзор и анализ инструментов проектирования и прототипирования интерфейсов Рустем Гайфутдинов
  2. 2. Откуда берутся прототипы? ?
  3. 3. „ В начале было Слово“
  4. 4. Материализация идей Скетч (sketch)
  5. 5. Скетч — карандашный набросок, зарисовка, эскиз, заготовка
  6. 6. <ul><li>Выбор лучших скетчей
  7. 7. Ввод в компьютер
  8. 8. Уточнение </li></ul>Скетч (sketch) Вайрфрейм (wireframe)
  9. 9. Вайрфрейм — это схема интерфейса, отражающая идею концепции и структуру будущего приложения
  10. 10. <ul><li>Выбор лучших вайрфреймов
  11. 11. Уточнение
  12. 12. Дизайн </li></ul>Вайрфрейм (wireframe) Мокап (mockup)
  13. 13. Мокап — графический макет системы Красиво, но статично
  14. 14. <ul><li>Выбор лучших мокапов
  15. 15. «Оживление» интерфейсов </li></ul>Мокап (mockup) Прототип (Prototype)
  16. 16. Ещё не программа , Что такое прототип? но уже не картинка
  17. 17. Прототип... Кликабельный Его можно потыкать, подвигать, пощёлкать, почувствовать Интерактивный Он реагирует на ваши действия Реальный Выглядит как реальная программа
  18. 18. Дизайн + Функциональность + Контент Прототип
  19. 20. Рынок инструментов проектирования и прототипирования интерфейсов содержит сегменты, соответствующие этапам разработки прототипа „ Каков корень, таково и семя“ Этапы разработки прототипа Сегменты рынка
  20. 21. Конструкторы скетчей и вайфреймов Конструкторы мокапов и графические редакторы Инструменты динамического прототипирования
  21. 22. Онлайн Веб-приложения Оффлайн десктоп-приложения
  22. 23. Конструкторы скетчей и вайрфреймов <ul><li>Balsamiq Mockups
  23. 24. Designer Vista
  24. 25. SketchFlow
  25. 26. ForeUI
  26. 27. Pidoco
  27. 28. Pencil Project
  28. 29. MockFlow
  29. 30. WireFrameSketcher Studio </li></ul>
  30. 31. Конструкторы мокапов и графические редакторы <ul><li>Designer Vista
  31. 32. Adobe Photoshop
  32. 33. Pidoco
  33. 34. Adobe Illustrator
  34. 35. Microsoft Visio </li></ul>
  35. 36. Инструменты динамического прототипирования <ul><li>Axure RP
  36. 37. GUI Design Studio
  37. 38. iRise
  38. 39. Microsoft Expression Blend
  39. 40. GUI Machine </li></ul>
  40. 41. Критерии оценки <ul><li>Визуальная точность прототипов
  41. 42. Интерактивность прототипов
  42. 43. Возможность прототипирования различных типов приложений
  43. 44. Скорость создания прототипов
  44. 45. Простота и удобство работы
  45. 46. Поддерживаемые платформы
  46. 47. Уникальные и интересные возможности </li></ul>
  47. 48. Прототипирование веб-сайтов и веб-приложений <ul><li>Быстрое и простое создание прототипа
  48. 49. Подгружаемые библиотеки компонентов
  49. 50. Создание и использование мастеров
  50. 51. Рисование UML-диаграмм
  51. 52. Компоненты «Фрейм» и «Динамическая панель»
  52. 53. Карта сайта </li></ul><ul><li>Не для прототипирования десктопных приложений
  53. 54. В базовом варианте мало компонентов
  54. 55. Компоненты слабо настраиваемы
  55. 56. Ограниченные возможности интерактивности (мало событий и действий)
  56. 57. Нет настроек приложения и проекта
  57. 58. Не руссифицирован </li></ul>
  58. 59. <ul><li>Для Windows и Mac OS, но не для Linux
  59. 60. Генерирует HTML-код, но неоптимальный
  60. 61. Совместная работа, но ограниченная и неполноценная
  61. 62. Генерация спецификации, но не работает с Open Office
  62. 63. Слабый дизайн базовых компонентов, но есть хорошие подгружаемые библиотеки </li></ul>Прототипирование веб-сайтов и веб-приложений Вывод: инструмент позволяет быстро и просто создавать хорошие прототипы веб-сайтов, но прототипирование веб-приложений со сложной функциональностью затруднено. Создание прототипа десктоп-приложений невозможно.
  63. 64. GUI Design Studio <ul><li>Прототипирование как веб, так и десктоп-приложений
  64. 65. Быстрое и простое создание прототипа
  65. 66. Простой механизм создания действий
  66. 67. Большой набор компонентов, некоторые имеют предзаданные действия
  67. 68. Набор Ribbon компонентов
  68. 69. Набор иконок
  69. 70. Удобная навигация по рабочей области </li></ul><ul><li>Только для Windows
  70. 71. Ошибка при наличии в пути к директории установки русских букв
  71. 72. Ненативные компоненты
  72. 73. Слабый механизм просмотра прототипов
  73. 74. Прототип не оставляет впечатления работающей программы, многое статично, мало свободы, ограниченная интерактивность
  74. 75. Настройка компонентов в попап окне
  75. 76. Не руссифицирован </li></ul>
  76. 77. GUI Design Studio <ul><li>Есть компоненты как с хорошим, так и со слабым дизайном
  77. 78. Интерфейс программы: много места выделено под рабочую область, но интерфейс не привлекательный, неудобная верхняя панель инструментов </li></ul>Вывод: инструмент позволяет быстро и просто создавать прототипы несложных десктоп и веб-приложений, однако дизайн и интерактивность не на самом высоком уровне. Прототипирование приложений со сложной функциональность затруднительно.
  78. 79. <ul><li>Приятный интерфейс
  79. 80. Высокая интерактивность прототипов, удобный инструмент создания действий
  80. 81. Хороший механизм просмотра прототипов: иммитация работы сессий и БД, дополнительные параметры просмотра
  81. 82. Красивая и понятная визуализация связей страниц сайта и действий, можно описывать логику работы сайта
  82. 83. Совместная работа
  83. 84. Удобный инструмент работы с шаблонами
  84. 85. Экспорт/импорт табличных данных в/из CSV
  85. 86. Экспорт прототипа в iDoc — интерактивный документ </li></ul><ul><li>Только для Windows
  86. 87. Не для прототипирования десктопных приложений
  87. 88. Цена от 6995$
  88. 89. Маленький набор компонентов
  89. 90. Мало настроек компонентов
  90. 91. Более сложный </li></ul>
  91. 92. Вывод: мощный и удобный инструмент для прототипирования веб-сайтов и веб-приложений со сложной функциональностью. Интерактивность прототипов — высокая. Часть функционала приложения уникальна. Однако, не позволяет прототипировать десктоп-приложения. Дорогой.
  92. 93. <ul><li>Только для Windows
  93. 94. Прототипирование только Silverlight и WPF приложений
  94. 95. Более сложный
  95. 96. Не руссифицирован </li></ul><ul><li>Прототипирование как веб, так и десктоп-приложений
  96. 97. Большой и красивый набор нативных компонентов, представление их как в виде скетчей, так и с полноценным дизайном
  97. 98. Компоненты детально настраиваемые
  98. 99. Высокая интерактивность прототипов
  99. 100. Гибкий, интересный и удобный механизм создания действий
  100. 101. Создание анимации, плавных переходов
  101. 102. Карта связей интерфейсов </li></ul>
  102. 103. <ul><li>Генерация кода Visual Basic или Visual C#, но, возможно код неоптимальный. Для Java-разработчиков код бесполезен
  103. 104. Интерфейс программы: необычный, непривычный, «на любителя», иногда сложный, не всегда удобный
  104. 105. Прототипирование не только классических, но и вообще любых приложений — несложных игр, анимаций. </li></ul>Вывод: мощный и удобный инструмент для прототипирования Silverlight и WPF приложений со сложной функциональностью. Интерактивность и визуальная привлекательность прототипов — высокая. Часть функционала приложения уникальна. Однако, не позволяет прототипировать приложения для других платформ. Несколько сложен в освоении.
  105. 106. <ul><li>Прототипирование как веб, так и десктоп-приложений, а в ближайшей перспективе — и для мобильных платформ
  106. 107. Кроссплатформенный: для Windows, Mac OS, Unix
  107. 108. Быстрое и простое создание прототипа
  108. 109. Высокая интерактивность прототипов, простой механизм создания действий
  109. 110. Наборы как нативных, так и платформо-независимых (Vaadin) компонентов, детальная настройка компонентов
  110. 111. Большой набор иконок
  111. 112. Уникальный механизм просмотра прототипов
  112. 113. Механизм для работы с шаблонами
  113. 114. Встроенные утилиты: графический редактор, скриншотер, Pixel Grabber
  114. 115. Детальная настройка проекта и приложения
  115. 116. Русский и английский языки интерфейса </li></ul>
  116. 117. <ul><li>Нет совместной работы, планируем представить клиент-серверное решение в ближайшей перспективе
  117. 118. Нет генерации кода. Планируем сделать тогда, когда сможем генерировать оптимальный, полезный код
  118. 119. Требовательный, работа на нетбуке затруднительна
  119. 120. Нет подгружаемых библиотек компонентов, но существующий набор постоянно пополняется
  120. 121. Нет генерации спецификации, планируем экспортировать прототип в интерактивный документ </li></ul>Вывод: мощный и удобный инструмент для прототипирования десктоп и веб-приложений со сложной функциональностью. Интерактивность и визуальная привлекательность прототипов — высокая. Часть функционала приложения уникальна. Пока не обладает некоторыми удобными и полезными функциями.
  121. 122. Мы в сети Рустем Гайфутдинов Менеджер по развитию продукта [email_address] rustem-gayfutdinov.moikrug.ru GUI Machine Прототипирование десктопных и веб-приложений www.guimachine.ru [email_address] twitter.com/GUI_Machine community.livejournal.com/guimachine

×