ݺߣ

ݺߣShare a Scribd company logo
Некоторые принципы визуального
дизайна. Элементы опыта
взаимодействия по Гарретту
3-е занятие
Пояснение к режимам
Autodesk
Sketchbook Pro 2
Процесс проектирования
– Видение и осознание продукта
– Изучение пользователей: опыт, мотивы, цели,
задачи, сценарии
– Проектирование
– Тестирование спроектированного
– Прототипирование
– Тестирование прототипов и реальных систем
– Проектирование и тестирование в процессе
итерационной разработки
План занятия
– Домашка
– Шесть шляп мышления
– Типы интерфейсов: временные и монопольные
– Принципы тяготения и плотности
– Элементы опыта взаимодействия Гарретта
Организация проверки задания
– Остаточные вопросы, 10
– 2 лучших решения, 20
– Мысли о процессе, «как», 10
– Улучшение лучшего решения, 10
– Перерыв, 10
Шесть шляп мышления Эдвард Де Боно
Белая
Красная
Черная
Желтая
Зеленая
Синяя
информация
эмоции
критика
преимущества
идеи, возможности
над-мышление
Временные и монопольные
Монопольные
Монопольные
Монопольные
Временные
Принципы тяготения
иплотности
Принцип тяготения
Артем Дэп, «Стереотипная сетка. Часть первая.
Принцип тяготения в дизайне»
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Артем Дэп, «Стереотипная сетка.
Часть первая. Принцип тяготения
в дизайне»
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Принцип плотности относительности
Принцип плотности относительности
Артем Дэп,
«Стереотипная сетка.
Часть вторая. Принцип
плотности»
Артемий Лебедев,
«Ководство», § 136.
Теория близости
частный случай
фото — minarai
относительность
Контраст
Ритм
Выравнивание
Схожесть
по мотивам презентации
Джеффа Паттона
«User Experience Distilled»
agileproductdesign.com/presentations
частные случаи
Контраст
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Ритм, повторение
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Выравнивание
фото — tofu minx
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Схожесть
Элементы
опыта взаимодействия
Jesse James Garrett’s
Elements of User Experience
http://www.jjg.net/elements/
«Раскраска»
Компоновка
Структура
Требования
Стратегия
Dude’s Law
Value = Why / How
Ценность = Зачем / Как
David Hussman, dude,
software antropologist
«Раскраска»
Компоновка
Структура
Требования
Стратегия
«Раскраска»
Компоновка
Структура
Требования
Стратегия
панели задач
диалоги
визарды
«Раскраска»
Компоновка
Структура
Требования
Стратегия
Задачи пользователя:
• ввод чисел
• ввод текст
• ввод формул
• форматирование ячейки
• сортировка
• фильтрация
• построение графиков
• сохранение данных
• импорт данных
• экспорт данных
• печать
• …..
«Раскраска»
Компоновка
Структура
Требования
Стратегия
Цели бизнеса
• вытеснить конкурирующие
продукты
• побудить к покупке других
интегрированных продуктов
• сделать xls-формат основным
форматом обмена
• …
Потребители
• бухгалтеры
• бизнесмены
• домохозяйки
• …
Среды использования
• настольный компьютер в офисе
• ноутбук в самолете
• PDA в автомобиле
• …
«Раскраска»
Компоновка
Структура
Требования
Стратегия
Jesse James Garrett’s
Elements of User Experience
http://www.jjg.net/elements/
«Раскраска»
Компоновка
Структура
Требования
Стратегия
Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия
Статьи Артема Дэпа
Стереотипная сетка. Часть первая. Принцип тяготения в дизайне.
http://artem-dap.livejournal.com/6110.html
Стереотипная сетка. Часть вторая. Принцип плотности.
http://artem-dap.livejournal.com/6198.html
Стереотипная сетка. Часть вторая. Принцип плотности второго порядка.
Графическая рифма.
http://artem-dap.livejournal.com/7593.html
Стереотипная сетка. Часть третья. Принцип перспективы. Выкладки.
http://artem-dap.livejournal.com/68464.html
Диджитальный подход к перспективе (в частности в интерфейсной среде)
http://artem-dap.livejournal.com/163258.html
В поисках альтернативной сетки (диджитальная сетка)
http://artem-dap.livejournal.com/274990.html
Диджитальный подход к текстовому набору
http://artem-dap.livejournal.com/173891.html
Домашка
Тестовое задание проектировщику
интерфейсов «Рамблер»
http://dzimin.ru/rambler/vacancy_test.html
Ретроспектива занятия
На связи
Группа — groups.google.com/group/mekra
Файлы — …
Вопросы лично — andrew@ashapiro.ru
Ad

More Related Content

Similar to Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия (20)

Task-Centered Design
Task-Centered DesignTask-Centered Design
Task-Centered Design
Yury Solonitsyn
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронин
Media Gorod
проектирование и тестирование @mdd by looi
проектирование и тестирование @mdd by looi проектирование и тестирование @mdd by looi
проектирование и тестирование @mdd by looi
Arthur Arsyonov
А.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектированияА.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектирования
Anatoly Levenchuk
Прототипы vs Техническое задание — Владимир Зайонц
Прототипы vs Техническое задание — Владимир Зайонц Прототипы vs Техническое задание — Владимир Зайонц
Прототипы vs Техническое задание — Владимир Зайонц
Wake_up_province
UX наоборот - введение в UX
UX наоборот - введение в UXUX наоборот - введение в UX
UX наоборот - введение в UX
cgvictor
Тестирование дизайн макетов сайта
Тестирование дизайн макетов сайтаТестирование дизайн макетов сайта
Тестирование дизайн макетов сайта
editor2012
Redsoft - проектирование интернет магазинов 2017
Redsoft - проектирование интернет магазинов 2017Redsoft - проектирование интернет магазинов 2017
Redsoft - проектирование интернет магазинов 2017
Alex Shishkin
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014
cgvictor
Егор Стремоусов. Дизайн и юзабилити интернет-магазина
Егор Стремоусов. Дизайн и юзабилити интернет-магазинаЕгор Стремоусов. Дизайн и юзабилити интернет-магазина
Егор Стремоусов. Дизайн и юзабилити интернет-магазина
Egor Stremousov
Проектирование интернет-сайтов и систем в Redsoft
Проектирование интернет-сайтов и систем в RedsoftПроектирование интернет-сайтов и систем в Redsoft
Проектирование интернет-сайтов и систем в Redsoft
Redsoft
Как сделать прототип
Как сделать прототипКак сделать прототип
Как сделать прототип
Irina Ryzhova
Creative Tech — Processing 1
Creative Tech — Processing 1Creative Tech — Processing 1
Creative Tech — Processing 1
Alexander Katin
378 vasilyev
378 vasilyev378 vasilyev
378 vasilyev
Елена Ключева
Искусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельностьИскусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельность
Cybermarketing, Moscow
Разработка требований и Проектирование интерфейсов
Разработка требований и Проектирование интерфейсовРазработка требований и Проектирование интерфейсов
Разработка требований и Проектирование интерфейсов
Denis Beskov
Почему размер имеет значение
Почему размер имеет значениеПочему размер имеет значение
Почему размер имеет значение
SQALab
Автоматизация тестирования ПО на редких платформах
Автоматизация тестирования ПО на редких платформахАвтоматизация тестирования ПО на редких платформах
Автоматизация тестирования ПО на редких платформах
SQALab
рит2007 требования и состав работ бесков доронин
рит2007   требования и состав работ   бесков доронинрит2007   требования и состав работ   бесков доронин
рит2007 требования и состав работ бесков доронин
Media Gorod
проектирование и тестирование @mdd by looi
проектирование и тестирование @mdd by looi проектирование и тестирование @mdd by looi
проектирование и тестирование @mdd by looi
Arthur Arsyonov
А.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектированияА.Левенчук -- Будущее проектирования
А.Левенчук -- Будущее проектирования
Anatoly Levenchuk
Прототипы vs Техническое задание — Владимир Зайонц
Прототипы vs Техническое задание — Владимир Зайонц Прототипы vs Техническое задание — Владимир Зайонц
Прототипы vs Техническое задание — Владимир Зайонц
Wake_up_province
UX наоборот - введение в UX
UX наоборот - введение в UXUX наоборот - введение в UX
UX наоборот - введение в UX
cgvictor
Тестирование дизайн макетов сайта
Тестирование дизайн макетов сайтаТестирование дизайн макетов сайта
Тестирование дизайн макетов сайта
editor2012
Redsoft - проектирование интернет магазинов 2017
Redsoft - проектирование интернет магазинов 2017Redsoft - проектирование интернет магазинов 2017
Redsoft - проектирование интернет магазинов 2017
Alex Shishkin
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014
cgvictor
Егор Стремоусов. Дизайн и юзабилити интернет-магазина
Егор Стремоусов. Дизайн и юзабилити интернет-магазинаЕгор Стремоусов. Дизайн и юзабилити интернет-магазина
Егор Стремоусов. Дизайн и юзабилити интернет-магазина
Egor Stremousov
Проектирование интернет-сайтов и систем в Redsoft
Проектирование интернет-сайтов и систем в RedsoftПроектирование интернет-сайтов и систем в Redsoft
Проектирование интернет-сайтов и систем в Redsoft
Redsoft
Как сделать прототип
Как сделать прототипКак сделать прототип
Как сделать прототип
Irina Ryzhova
Creative Tech — Processing 1
Creative Tech — Processing 1Creative Tech — Processing 1
Creative Tech — Processing 1
Alexander Katin
Искусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельностьИскусство создания интерфейса, простота, удобство и рентабельность
Искусство создания интерфейса, простота, удобство и рентабельность
Cybermarketing, Moscow
Разработка требований и Проектирование интерфейсов
Разработка требований и Проектирование интерфейсовРазработка требований и Проектирование интерфейсов
Разработка требований и Проектирование интерфейсов
Denis Beskov
Почему размер имеет значение
Почему размер имеет значениеПочему размер имеет значение
Почему размер имеет значение
SQALab
Автоматизация тестирования ПО на редких платформах
Автоматизация тестирования ПО на редких платформахАвтоматизация тестирования ПО на редких платформах
Автоматизация тестирования ПО на редких платформах
SQALab

More from Andrew Shapiro (14)

Разработчикам о дизайне интерфейса
Разработчикам о дизайне интерфейсаРазработчикам о дизайне интерфейса
Разработчикам о дизайне интерфейса
Andrew Shapiro
Customer Journey Mapping
Customer Journey MappingCustomer Journey Mapping
Customer Journey Mapping
Andrew Shapiro
К искусству записи пользовательских историй
К искусству записи пользовательских историйК искусству записи пользовательских историй
К искусству записи пользовательских историй
Andrew Shapiro
Дизайн, движимый данными
Дизайн, движимый даннымиДизайн, движимый данными
Дизайн, движимый данными
Andrew Shapiro
Как вырастить дизайнера. Год муштры и 101 день вдохновения
Как вырастить дизайнера. Год муштры и 101 день вдохновенияКак вырастить дизайнера. Год муштры и 101 день вдохновения
Как вырастить дизайнера. Год муштры и 101 день вдохновения
Andrew Shapiro
Вредный дизайн. Пуфики, 8 февраля 2013
Вредный дизайн. Пуфики, 8 февраля 2013Вредный дизайн. Пуфики, 8 февраля 2013
Вредный дизайн. Пуфики, 8 февраля 2013
Andrew Shapiro
Генеративный дизайн. Личный опыт
Генеративный дизайн. Личный опытГенеративный дизайн. Личный опыт
Генеративный дизайн. Личный опыт
Andrew Shapiro
От дизайн-процесса к дизайн-результату
От дизайн-процесса к дизайн-результатуОт дизайн-процесса к дизайн-результату
От дизайн-процесса к дизайн-результату
Andrew Shapiro
Моделирование продукта с использованием бумажного прототипирования. Agilecamp...
Моделирование продукта с использованием бумажного прототипирования. Agilecamp...Моделирование продукта с использованием бумажного прототипирования. Agilecamp...
Моделирование продукта с использованием бумажного прототипирования. Agilecamp...
Andrew Shapiro
Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...
Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...
Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...
Andrew Shapiro
Мекра, занятие второе. Режимы, видимость, монотонность, состоятельность
Мекра, занятие второе. Режимы, видимость, монотонность, состоятельностьМекра, занятие второе. Режимы, видимость, монотонность, состоятельность
Мекра, занятие второе. Режимы, видимость, монотонность, состоятельность
Andrew Shapiro
Мекра, первое занятие
Мекра, первое занятиеМекра, первое занятие
Мекра, первое занятие
Andrew Shapiro
10 камней преткновения пользователя в путешествии по сложному интерфейсу
10 камней преткновения пользователя в путешествии по сложному интерфейсу10 камней преткновения пользователя в путешествии по сложному интерфейсу
10 камней преткновения пользователя в путешествии по сложному интерфейсу
Andrew Shapiro
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
Andrew Shapiro
Разработчикам о дизайне интерфейса
Разработчикам о дизайне интерфейсаРазработчикам о дизайне интерфейса
Разработчикам о дизайне интерфейса
Andrew Shapiro
К искусству записи пользовательских историй
К искусству записи пользовательских историйК искусству записи пользовательских историй
К искусству записи пользовательских историй
Andrew Shapiro
Дизайн, движимый данными
Дизайн, движимый даннымиДизайн, движимый данными
Дизайн, движимый данными
Andrew Shapiro
Как вырастить дизайнера. Год муштры и 101 день вдохновения
Как вырастить дизайнера. Год муштры и 101 день вдохновенияКак вырастить дизайнера. Год муштры и 101 день вдохновения
Как вырастить дизайнера. Год муштры и 101 день вдохновения
Andrew Shapiro
Вредный дизайн. Пуфики, 8 февраля 2013
Вредный дизайн. Пуфики, 8 февраля 2013Вредный дизайн. Пуфики, 8 февраля 2013
Вредный дизайн. Пуфики, 8 февраля 2013
Andrew Shapiro
Генеративный дизайн. Личный опыт
Генеративный дизайн. Личный опытГенеративный дизайн. Личный опыт
Генеративный дизайн. Личный опыт
Andrew Shapiro
От дизайн-процесса к дизайн-результату
От дизайн-процесса к дизайн-результатуОт дизайн-процесса к дизайн-результату
От дизайн-процесса к дизайн-результату
Andrew Shapiro
Моделирование продукта с использованием бумажного прототипирования. Agilecamp...
Моделирование продукта с использованием бумажного прототипирования. Agilecamp...Моделирование продукта с использованием бумажного прототипирования. Agilecamp...
Моделирование продукта с использованием бумажного прототипирования. Agilecamp...
Andrew Shapiro
Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...
Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...
Мекра, 4-е занятие. Синтаксис элементов интерфейса, подход Дизайн-бюро Артёма...
Andrew Shapiro
Мекра, занятие второе. Режимы, видимость, монотонность, состоятельность
Мекра, занятие второе. Режимы, видимость, монотонность, состоятельностьМекра, занятие второе. Режимы, видимость, монотонность, состоятельность
Мекра, занятие второе. Режимы, видимость, монотонность, состоятельность
Andrew Shapiro
Мекра, первое занятие
Мекра, первое занятиеМекра, первое занятие
Мекра, первое занятие
Andrew Shapiro
10 камней преткновения пользователя в путешествии по сложному интерфейсу
10 камней преткновения пользователя в путешествии по сложному интерфейсу10 камней преткновения пользователя в путешествии по сложному интерфейсу
10 камней преткновения пользователя в путешествии по сложному интерфейсу
Andrew Shapiro
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
Andrew Shapiro
Ad

Мекра, 3-е занятие. Принципы плотности и тяготения в визуальном дизайне. Элементы опыта взаимодействия