design course 3 process
DESCRIPTION
TRANSCRIPT
Как проектировать интерфейс
1 Дизайн всегда делается для людей
фото: evie22 (flickr)
2 Концептуальные подходы
Ориентация на пользователей
на задачи/цели пользователей
на деятельность пользователей
3 User-centered design
фот
о: E
dge
of S
pace
(flic
kr)
На слэдущей виходишь, дарагой?
44
пользователь?
55
пользователь?
человек!
6 Персоны
Ориентация на пользователей
на задачи/цели пользователей
на деятельность пользователей
6
МетодПерсон
фот
о: A
nton
io G
oya
(flic
kr)
7 Анализ целей пользователяф
ото:
ligh
tpla
ce (fl
ickr
)
8 Когнитивная психология
Действие состоит из следующих этапов:
формирование цели
формирование намерения
определение конкретных действий
выполнение действий
восприятие нового состояния системы
интерпретация изменений
оценка результата
1234567
9 Оптимизация действия
Хороший дизайн:
нагляден
имеет ясную концептуальную модель
указывает возможные действия
позволяет легко выполнить действия
говорит, находится ли система в необх. сост.
имеет хорошее соотв. между сост. и его отобр.
имеет внятную обратную связь
1234567
10 Сценарии использования
В сценариях описаны типовые «маршруты» пользователей при достижении целей
11 Прототипирование интерфейсовф
ото:
ww
w.D
aveW
ard.
net (
flick
r)
12
Прототип должен создаваться и редактироваться быстро.
13
Прототип должен создаваться и редактироваться быстро
очень быстро.
14 Бумажный прототипф
ото:
Sha
wn
Med
ero
(A L
ist A
part
)
15 Бумажный прототипф
ото:
Sha
wn
Med
ero
(A L
ist A
part
)
16 Бумажный прототип
фот
о: jc
river
a.ne
t
17 Скетч, иллюстрирующий идею
илл.: Константин Горский, Артем Горбунов
18 Структурный скетч
19 Прототип с графическим дизайном
20 Axure RP Pro
21 Axure RP Pro
Ориентирована на создание веб-сайтов.
Генерирует кликабельный HTML и документацию в формате MS Word.
Windows, Mac, $589
22 Caretta GUI Design Studio
23 Caretta GUI Design Studio
Специализированное средство, позволяющее создавать интерфейсы в разных визуальных стилях, аннотации к ним, раскадровки и т. д.
Можно экспортировать прототип.
Windows, $499
24 Balsamiq Mockups
25
Подходит для быстрого создания макетов интерфейсов.
Прототипы выглядят «рисованными».
Web, $79
Balsamiq Mockups
26 Adobe InDesign
27
Изначально рассчитана для верстки полиграфических материалов, тем не менее подходит и для отрисовки прототипов.
На выходе: кликабельный PDF
Windows, Mac, $699
Adobe InDesign
28 Adobe Fireworks
29
Специально предназначена для прототипирования интерфейсов.
На выходе: кликабельный PDF или HTML
Windows, Mac, $299
Adobe Fireworks
30 Adobe Dreamweaver
31
Предназначена для HTML-верстки
На выходе: кликабельный HTML
Windows, Mac, $399
Adobe Dreamweaver
32 Microsoft Expression Blend
33
Интегрируется с Visual Studio. Прототип можно преобразовывать в конечный продукт. Использует технологии Silverlight или WPF.
Windows, $499
Microsoft Expression Blend
34 Microsoft Visio
35
Возможно, вы уже знакомы с Visio.Можно создавать кликабельные HTML-прототипы
Windows, $560
Microsoft Visio
36 Microsoft Powerpoint
37
Powerpoint поддерживает интерактивные горячие точки, кторые можно использовать для переходов между слайдами, создавая кликабельный прототип.
Windows, Mac, $229
Microsoft Powerpoint
38
Для простых задач можно использовать любое средство, позволяющее рисовать.
Для сложных лучше выбрать специализированный инструмент.
Прототипирование: мораль
39