Design Course 3 process

719 views
655 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
719
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Design Course 3 process

  1. 1. Как проектироватьинтерфейс
  2. 2. 1 Дизайн всегда делается для людейфото: evie22 (flickr)
  3. 3. 2 Концептуальные подходы Ориентация на пользователей на задачи/цели пользователей на деятельность пользователей
  4. 4. 3 User-centered design На слэдущей виходишь, дарагой? фото: Edge of Space (flickr)
  5. 5. 4 пользователь?
  6. 6. 5 пользователь? человек!
  7. 7. 6 Персоны Метод Персон Ориентация на пользователей на задачи/цели пользователей на деятельность пользователейфото: Antonio Goya (flickr)
  8. 8. 7 Анализ целей пользователяфото: lightplace (flickr)
  9. 9. 8 Когнитивная психология Действие состоит из следующих этапов: 1 формирование цели 2 формирование намерения 3 определение конкретных действий 4 выполнение действий 5 восприятие нового состояния системы 6 интерпретация изменений 7 оценка результата
  10. 10. 9 Оптимизация действия Хороший дизайн: 1 нагляден 2 имеет ясную концептуальную модель 3 указывает возможные действия 4 позволяет легко выполнить действия 5 говорит, находится ли система в необх. сост. 6 имеет хорошее соотв. между сост. и его отобр. 7 имеет внятную обратную связь
  11. 11. 10 Сценарии использования В сценариях описаны типовые «маршруты» пользователей при достижении целей
  12. 12. фото: www.DaveWard.net (flickr) 11 Прототипирование интерфейсов
  13. 13. 12 Прототип должен создаваться и редактироваться быстро.
  14. 14. 13 Прототип должен создаваться и редактироваться быстро очень быстро.
  15. 15. фото: Shawn Medero (A List Apart) 14 Бумажный прототип
  16. 16. фото: Shawn Medero (A List Apart) 15 Бумажный прототип
  17. 17. 16 Бумажный прототип фото: jcrivera.net
  18. 18. 17 Скетч, иллюстрирующий идеюилл.: Константин Горский, Артем Горбунов
  19. 19. 18 Структурный скетч
  20. 20. 19 Прототип с графическим дизайном
  21. 21. 20 Axure RP Pro
  22. 22. 21 Axure RP Pro Ориентирована на создание веб-сайтов. Генерирует кликабельный HTML и документацию в формате MS Word. Windows, Mac, $589
  23. 23. 22 Caretta GUI Design Studio
  24. 24. 23 Caretta GUI Design Studio Специализированное средство, позволяющее создавать интерфейсы в разных визуальных стилях, аннотации к ним, раскадровки и т. д. Можно экспортировать прототип. Windows, $499
  25. 25. 24 Balsamiq Mockups
  26. 26. 25 Balsamiq Mockups Подходит для быстрого создания макетов интерфейсов. Прототипы выглядят «рисованными». Web, $79
  27. 27. 26 Adobe InDesign
  28. 28. 27 Adobe InDesign Изначально рассчитана для верстки полиграфических материалов, тем не менее подходит и для отрисовки прототипов. На выходе: кликабельный PDF Windows, Mac, $699
  29. 29. 28 Adobe Fireworks
  30. 30. 29 Adobe Fireworks Специально предназначена для прототипирования интерфейсов. На выходе: кликабельный PDF или HTML Windows, Mac, $299
  31. 31. 30 Adobe Dreamweaver
  32. 32. 31 Adobe Dreamweaver Предназначена для HTML-верстки На выходе: кликабельный HTML Windows, Mac, $399
  33. 33. 32 Microsoft Expression Blend
  34. 34. 33 Microsoft Expression Blend Интегрируется с Visual Studio. Прототип можно преобразовывать в конечный продукт. Использует технологии Silverlight или WPF. Windows, $499
  35. 35. 34 Microsoft Visio
  36. 36. 35 Microsoft Visio Возможно, вы уже знакомы с Visio. Можно создавать кликабельные HTML-прототипы Windows, $560
  37. 37. 36 Microsoft Powerpoint
  38. 38. 37 Microsoft Powerpoint Powerpoint поддерживает интерактивные горячие точки, кторые можно использовать для переходов между слайдами, создавая кликабельный прототип. Windows, Mac, $229
  39. 39. 38 Прототипирование: мораль Для простых задач можно использовать любое средство, позволяющее рисовать. Для сложных лучше выбрать специализированный инструмент.
  40. 40. 39

×