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