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

13 ноября 2012

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

Чуть сложнее

Модель MVC

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

ЁПРСТ

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

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

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

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

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

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

Вкладки (Tabs)

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

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

Пейджинг

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

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

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

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

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

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

Карусель

http://zvooq.ru/#/waves/04DC-F44B8B-7120/

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

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

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

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

Интрига

Мастер - wizzard

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

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

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

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

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

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

The Design of Everyday Things

D. Norman

Design interfacesJenifer Tidwell

Designing Web InterfacesBill Scott, Theresa Neil

Ссылки

www.welie.com/patternskonigi.com/ui-patterns.com/patterntap.com/www.pearltrees.com

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

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

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