design course 3 process

40
Как проектировать интерфейс

Upload: kostya-gorskiy

Post on 30-Nov-2014

672 views

Category:

Design


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Design Course 3 process

Как проектировать интерфейс

Page 2: Design Course 3 process

1 Дизайн всегда делается для людей

фото: evie22 (flickr)

Page 3: Design Course 3 process

2 Концептуальные подходы

Ориентация на пользователей

на задачи/цели пользователей

на деятельность пользователей

Page 4: Design Course 3 process

3 User-centered design

фот

о: E

dge

of S

pace

(flic

kr)

На слэдущей виходишь, дарагой?

Page 5: Design Course 3 process

44

пользователь?

Page 6: Design Course 3 process

55

пользователь?

человек!

Page 7: Design Course 3 process

6 Персоны

Ориентация на пользователей

на задачи/цели пользователей

на деятельность пользователей

6

МетодПерсон

фот

о: A

nton

io G

oya

(flic

kr)

Page 8: Design Course 3 process

7 Анализ целей пользователяф

ото:

ligh

tpla

ce (fl

ickr

)

Page 9: Design Course 3 process

8 Когнитивная психология

Действие состоит из следующих этапов:

формирование цели

формирование намерения

определение конкретных действий

выполнение действий

восприятие нового состояния системы

интерпретация изменений

оценка результата

1234567

Page 10: Design Course 3 process

9 Оптимизация действия

Хороший дизайн:

нагляден

имеет ясную концептуальную модель

указывает возможные действия

позволяет легко выполнить действия

говорит, находится ли система в необх. сост.

имеет хорошее соотв. между сост. и его отобр.

имеет внятную обратную связь

1234567

Page 11: Design Course 3 process

10 Сценарии использования

В сценариях описаны типовые «маршруты» пользователей при достижении целей

Page 12: Design Course 3 process

11 Прототипирование интерфейсовф

ото:

ww

w.D

aveW

ard.

net (

flick

r)

Page 13: Design Course 3 process

12

Прототип должен создаваться и редактироваться быстро.

Page 14: Design Course 3 process

13

Прототип должен создаваться и редактироваться быстро

очень быстро.

Page 15: Design Course 3 process

14 Бумажный прототипф

ото:

Sha

wn

Med

ero

(A L

ist A

part

)

Page 16: Design Course 3 process

15 Бумажный прототипф

ото:

Sha

wn

Med

ero

(A L

ist A

part

)

Page 17: Design Course 3 process

16 Бумажный прототип

фот

о: jc

river

a.ne

t

Page 18: Design Course 3 process

17 Скетч, иллюстрирующий идею

илл.: Константин Горский, Артем Горбунов

Page 19: Design Course 3 process

18 Структурный скетч

Page 20: Design Course 3 process

19 Прототип с графическим дизайном

Page 21: Design Course 3 process

20 Axure RP Pro

Page 22: Design Course 3 process

21 Axure RP Pro

Ориентирована на создание веб-сайтов.

Генерирует кликабельный HTML и документацию в формате MS Word.

Windows, Mac, $589

Page 23: Design Course 3 process

22 Caretta GUI Design Studio

Page 24: Design Course 3 process

23 Caretta GUI Design Studio

Специализированное средство, позволяющее создавать интерфейсы в разных визуальных стилях, аннотации к ним, раскадровки и т. д.

Можно экспортировать прототип.

Windows, $499

Page 25: Design Course 3 process

24 Balsamiq Mockups

Page 26: Design Course 3 process

25

Подходит для быстрого создания макетов интерфейсов.

Прототипы выглядят «рисованными».

Web, $79

Balsamiq Mockups

Page 27: Design Course 3 process

26 Adobe InDesign

Page 28: Design Course 3 process

27

Изначально рассчитана для верстки полиграфических материалов, тем не менее подходит и для отрисовки прототипов.

На выходе: кликабельный PDF

Windows, Mac, $699

Adobe InDesign

Page 29: Design Course 3 process

28 Adobe Fireworks

Page 30: Design Course 3 process

29

Специально предназначена для прототипирования интерфейсов.

На выходе: кликабельный PDF или HTML

Windows, Mac, $299

Adobe Fireworks

Page 31: Design Course 3 process

30 Adobe Dreamweaver

Page 32: Design Course 3 process

31

Предназначена для HTML-верстки

На выходе: кликабельный HTML

Windows, Mac, $399

Adobe Dreamweaver

Page 33: Design Course 3 process

32 Microsoft Expression Blend

Page 34: Design Course 3 process

33

Интегрируется с Visual Studio. Прототип можно преобразовывать в конечный продукт. Использует технологии Silverlight или WPF.

Windows, $499

Microsoft Expression Blend

Page 35: Design Course 3 process

34 Microsoft Visio

Page 36: Design Course 3 process

35

Возможно, вы уже знакомы с Visio.Можно создавать кликабельные HTML-прототипы

Windows, $560

Microsoft Visio

Page 37: Design Course 3 process

36 Microsoft Powerpoint

Page 38: Design Course 3 process

37

Powerpoint поддерживает интерактивные горячие точки, кторые можно использовать для переходов между слайдами, создавая кликабельный прототип.

Windows, Mac, $229

Microsoft Powerpoint

Page 39: Design Course 3 process

38

Для простых задач можно использовать любое средство, позволяющее рисовать.

Для сложных лучше выбрать специализированный инструмент.

Прототипирование: мораль

Page 40: Design Course 3 process

39