Проектирование графических интерфейсов лекция 8
-
Upload
technopark -
Category
Documents
-
view
129 -
download
1
Transcript of Проектирование графических интерфейсов лекция 8
![Page 1: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/1.jpg)
Навигация
![Page 2: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/2.jpg)
ПерсонажиСценарииТребованияОбъекты
![Page 3: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/3.jpg)
![Page 4: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/4.jpg)
Принцип работы с продуктом?
![Page 5: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/5.jpg)
![Page 6: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/6.jpg)
ЛаконичностьСдвиг в сторону опытныхРабота с объектамиНепристойно захватываем все пространство
![Page 7: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/7.jpg)
![Page 8: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/8.jpg)
Быстрый ввод в контекстСдвиг в сторону новичковОриентируемся на задачи и сценарииСкорость!
![Page 9: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/9.jpg)
![Page 10: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/10.jpg)
Совсем для тупыхАлерты и крайние случаиИногда настройкаМаксимальная информативностьНичего не происходит —сервиса нет
![Page 11: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/11.jpg)
Что еще?
![Page 12: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/12.jpg)
![Page 13: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/13.jpg)
![Page 14: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/14.jpg)
Фиксируем структуру
![Page 15: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/15.jpg)
Частота (не суммируем)ПерсонажиФункцииОбъекты системыТребования (отсценариев и персонажей)
![Page 16: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/16.jpg)
Типы экранов?
![Page 17: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/17.jpg)
![Page 18: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/18.jpg)
Структура объектовСценарии и действияОбъекты как функцииКарты и помощникиОбщесистемные возможностиШорткаты и алерты
![Page 19: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/19.jpg)
![Page 20: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/20.jpg)
ОперативнаяСтруктурнаяНавигацияАрхивнаяНалоги
![Page 21: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/21.jpg)
![Page 22: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/22.jpg)
1
2
3
4
![Page 23: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/23.jpg)
Протестировать разныерешенияДешево менять и дорабатыватьНаправить ожиданиязаказчикаЗаставить участвовать
![Page 24: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/24.jpg)
Детальное проектирование
![Page 25: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/25.jpg)
Зачем?
![Page 26: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/26.jpg)
![Page 27: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/27.jpg)
![Page 28: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/28.jpg)
![Page 29: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/29.jpg)
![Page 30: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/30.jpg)
Рисуем!
![Page 31: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/31.jpg)
Законы распределения и
группировки
![Page 32: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/32.jpg)
Пространственная группировкаПохожесть элементовДинамика
![Page 33: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/33.jpg)
Паттерны
![Page 34: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/34.jpg)
Определяем что оптимизируем
![Page 35: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/35.jpg)
Распределяем элементы по
экранам
![Page 36: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/36.jpg)
![Page 37: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/37.jpg)
MS Visio
![Page 38: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/38.jpg)
+ПолотноОбъемыГибкость инструменов
![Page 39: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/39.jpg)
-КартинкиШаблоныСтили
![Page 40: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/40.jpg)
InDesign
![Page 41: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/41.jpg)
+Мастер пейджМакросыКликабельностьДизайнеры
![Page 42: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/42.jpg)
-СкоростьГлюкиСтраницы
![Page 43: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/43.jpg)
Axure
![Page 44: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/44.jpg)
+ИнтерактивМастер ЭлементИмитация в мобильных
![Page 45: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/45.jpg)
-Сложная логикаЦвета
![Page 46: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/46.jpg)
Еще?
![Page 47: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/47.jpg)
![Page 48: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/48.jpg)
Бумага
![Page 49: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/49.jpg)
+ПривычкаСкоростьНалогИдеологияДоступность
![Page 50: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/50.jpg)
-Детали
![Page 51: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/51.jpg)
Хитро
![Page 52: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/52.jpg)
Хитро
![Page 53: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/53.jpg)
Хитро
![Page 54: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/54.jpg)
Хитро
![Page 55: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/55.jpg)
Хитро
![Page 56: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/56.jpg)
![Page 57: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/57.jpg)
Рисуем?
![Page 58: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/58.jpg)
Принципы и законы
![Page 59: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/59.jpg)
Минимизируем деятельность
![Page 60: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/60.jpg)
КогнитивнаяРабота с памятьюВизуальная работаФизическая (моторная)
![Page 61: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/61.jpg)
Минимизируем деятельность
![Page 62: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/62.jpg)
Закон Фитса
![Page 63: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/63.jpg)
Хитро
![Page 64: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/64.jpg)
Закон Хикка
![Page 65: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/65.jpg)
Время для принятия решения обуславливается количеством предлагаемых альтернатив. Чем больше альтернатив, тем больше времени необходимо.
![Page 66: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/66.jpg)
Закон сохранения сложности Теслера
![Page 67: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/67.jpg)
Хитро
![Page 68: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/68.jpg)
Пока Йокэ
![Page 69: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/69.jpg)
Хитро
![Page 70: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/70.jpg)
Поиск решений
![Page 71: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/71.jpg)
ПерсонажиМозговой штурмПаттерныЧек-листыGOMSСтандарты
![Page 72: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/72.jpg)
Паттерны
![Page 73: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/73.jpg)
Listbox: не более 20-ти элементов
Radiobutton: не более 3х элементов
Checkbox не должен использоваться для переключения между двумя режимами;
Меню не должно содержать исчезающих и появляющихся элементов, вместо этого необходимо использовать блокировку элементов
![Page 74: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/74.jpg)
Нажатие на клавишу 0,28Нажатие на кнопку мыши 0,10Перемещение мыши 1,10Взятие-бросание мыши 0,40Выбор действия 1,20Реакция системы 0,1-
![Page 75: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/75.jpg)
Термины Стандарты ОС: Microsoft , Apple, SAP Стандарты отдельных приложений: MS Office 2007 SO/ГОСТ стандарты: ISO 9241, ISO 9126 и так далееiOS, Android и прочие гайдлайны
![Page 76: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/76.jpg)
Уже ближе
![Page 77: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/77.jpg)
Организация информации
![Page 78: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/78.jpg)
![Page 79: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/79.jpg)
Цвет
![Page 80: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/80.jpg)
Управления вниманием ГруппировкиУправления эмоциональным состояниемИндивидуализации
![Page 81: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/81.jpg)
Избегайте
![Page 82: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/82.jpg)
Типографика
![Page 83: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/83.jpg)
МинимализмЗасечки – для текстаМалые строчные –заголовки, большие -текст
![Page 84: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/84.jpg)
![Page 85: Проектирование графических интерфейсов лекция 8](https://reader036.fdocuments.net/reader036/viewer/2022062708/558c33b6d8b42a941c8b45e7/html5/thumbnails/85.jpg)