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

Design Course 3 process

546

Published on

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

No Downloads
Views
Total Views
546
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×