Design Course 4 interaction
-
Upload
kostya-gorskiy -
Category
Design
-
view
649 -
download
0
Transcript of Design Course 4 interaction
![Page 1: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/1.jpg)
Некоторые идеи интерактивного дизайна
![Page 2: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/2.jpg)
1 Машина — друг человека
Все, что система может сделать самостоятельно, она должна сделать самостоятельно.
![Page 3: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/3.jpg)
2 Логика!
В интерфейсах логика важнее эстетики.
![Page 4: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/4.jpg)
3 Тут всё понятноф
ото:
Tre
ndir.
com
![Page 5: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/5.jpg)
4 А вот это уже не совсем ясно...ил
л.: С
туди
я А
ртем
ия Л
ебед
ева
![Page 6: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/6.jpg)
5 А вот это уже совсем не ясно!ил
л.: С
туди
я А
ртем
ия Л
ебед
ева
![Page 7: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/7.jpg)
6 Информативность и наглядность
Дизайн должен подсказывать, какие действия возможны в данный момент.
Дизайн должен быть наглядным.
![Page 8: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/8.jpg)
7 Как открыть дверь?
фото: Thomas Hawk (flickr.com)
![Page 9: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/9.jpg)
8 Аффорданс
Объект должен показывать способ своего использования своими неотъемлемыми свойствами.
![Page 10: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/10.jpg)
9
Вопрос:в каком разделе я нахожусь?
Вкладки
![Page 11: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/11.jpg)
10 Пример: заполнение формы
![Page 12: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/12.jpg)
11 Пример: заполнение формы
![Page 13: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/13.jpg)
12 Пример: заполнение формы
![Page 14: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/14.jpg)
13 Пример: заполнение формы
![Page 15: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/15.jpg)
14 Пример: четкое визуальное выделение
![Page 16: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/16.jpg)
15 Пример: четкое визуальное выделение
![Page 17: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/17.jpg)
16 Пример: четкое визуальное выделение
![Page 18: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/18.jpg)
17 Мэппингф
ото:
Inde
sit
![Page 19: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/19.jpg)
18 Мэппинг
![Page 20: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/20.jpg)
19 Мэппинг
![Page 21: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/21.jpg)
20 Теория близостиил
л.: А
ртем
ий Л
ебед
ев
![Page 22: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/22.jpg)
21 Теория близостиил
л.: А
ртем
ий Л
ебед
ев
![Page 23: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/23.jpg)
22 Теория близостиид
ея и
лл. А
ртем
ия Л
ебед
ева
![Page 24: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/24.jpg)
23 Теория близостиид
ея и
лл. А
ртем
ия Л
ебед
ева
![Page 25: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/25.jpg)
24 Закон Фиттса
Время прицеливания = k log2
2 × расстояние до объектаразмер
![Page 26: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/26.jpg)
25 Закон Фиттса
![Page 27: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/27.jpg)
26 Принцип обратной связи
— Мгновенная проверка ввода— Индикация ошибок— Отображение прогресса— Подтверждение действия
![Page 28: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/28.jpg)
27 Мгновенная проверка ввода
![Page 29: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/29.jpg)
28 Роботизация
![Page 30: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/30.jpg)
29 Обязательные для заполнения поля
![Page 31: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/31.jpg)
30 Простота
![Page 32: Design Course 4 interaction](https://reader033.fdocuments.us/reader033/viewer/2022042815/557ec90bd8b42ae27f8b489d/html5/thumbnails/32.jpg)
31