Паттерны проектирования интерфейсов

37
Паттерны проектирования интерфейсов 13 ноября 2012

Upload: sergey-protopopov

Post on 26-May-2015

1.994 views

Category:

Education


14 download

TRANSCRIPT

Page 1: Паттерны проектирования интерфейсов

Паттерны проектирования интерфейсов

13 ноября 2012

Page 2: Паттерны проектирования интерфейсов

Самые простые паттерны

Page 3: Паттерны проектирования интерфейсов

Чуть сложнее

Page 4: Паттерны проектирования интерфейсов

Модель MVC

Page 5: Паттерны проектирования интерфейсов

А... Б... В...

Page 6: Паттерны проектирования интерфейсов

ЁПРСТ

Page 7: Паттерны проектирования интерфейсов

Что такое шаблон?шаблон проектирования является повторяемым дизайнерским решением, которое было испытано, проанализированно и проверено.

Page 8: Паттерны проектирования интерфейсов

НавигацияГлобальная навигация (Global navigation)Спицы и колеса (Hub and spoke)Аккордеон (Accordion)Алфавитный список (Alphanumeric Filter Links)Вкладки (Tabs)Домашняя страница (Home link)Пейджинг (Pagination)Хлебные крошки (Breadcrumbs)Погружение (One window drill down)Панельная навигация (Two-Panel Selector)Бесконечный список (Infinite List)

Page 9: Паттерны проектирования интерфейсов

Глобальная навигация

Page 10: Паттерны проектирования интерфейсов

Спицы и колеса

Page 11: Паттерны проектирования интерфейсов

Аккордеон (Accordion)

Page 12: Паттерны проектирования интерфейсов

Алфавитный список

Page 13: Паттерны проектирования интерфейсов

Вкладки (Tabs)

Page 14: Паттерны проектирования интерфейсов

Мегодропдаун (Fat menu)

Page 15: Паттерны проектирования интерфейсов

Домашняя страница

Page 16: Паттерны проектирования интерфейсов

Пейджинг

Page 17: Паттерны проектирования интерфейсов

Бесконечный список

Page 18: Паттерны проектирования интерфейсов

Исследование про "хлебные крошки"

Хлебные крошки

Page 19: Паттерны проектирования интерфейсов

Одностраницное погружение

Page 20: Паттерны проектирования интерфейсов

Панельная навигация

Page 21: Паттерны проектирования интерфейсов

Работа с даннымиКарусель (Carrousel)Фильтр в таблицах (Table Filter)Детали на лету (Details On Demand)Обзор при наведении (Overview by Detail)Холст и инструменты (Сanvas plus palette)Интрига (Intriguing branches)Мастер (Wizzard)

Page 22: Паттерны проектирования интерфейсов

Карусель

Page 24: Паттерны проектирования интерфейсов

Фильтр в таблицах

Page 25: Паттерны проектирования интерфейсов

Детали на лету

Page 26: Паттерны проектирования интерфейсов

Обзор при наведении

Page 27: Паттерны проектирования интерфейсов

Холст и инструменты

Page 28: Паттерны проектирования интерфейсов

Интрига

Page 29: Паттерны проектирования интерфейсов

Мастер - wizzard

Page 30: Паттерны проектирования интерфейсов

Поиск информацииАвтозаполнение (Avtocomplete)Динамический поиск (Dynamic Search)Ограничение поиска (Scoped Search)Дополнительные параметры (Advanced Search)

Page 31: Паттерны проектирования интерфейсов

Автозаполнение

Page 32: Паттерны проектирования интерфейсов

Динамический поиск

Page 33: Паттерны проектирования интерфейсов

Ограничение поиска

Page 34: Паттерны проектирования интерфейсов

Дополнительные параметры

Page 35: Паттерны проектирования интерфейсов

Время читать книги...

The Design of Everyday Things

D. Norman

Design interfacesJenifer Tidwell

Designing Web InterfacesBill Scott, Theresa Neil

Page 37: Паттерны проектирования интерфейсов

Спасибо за внимание!

Сергей ПротопоповUX designer, Omyconf!

При поддержке usabilist.com