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

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

3. Чуть сложнее

4. Модель MVC

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

6. ЁПРСТ

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

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

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

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

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

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

13. Вкладки (Tabs)

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

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

16. Пейджинг

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

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

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

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

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

22. Карусель

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

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

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

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

28. Интрига

29. Мастер - wizzard

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

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

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

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

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

35. Время читать книги...
The Design of
Design interfaces Designing Web Interfaces
Everyday Things
Jenifer Tidwell Bill Scott, Theresa Neil
D. Norman

36. Ссылки
www.welie.com/patterns
konigi.com/
ui-patterns.com/
patterntap.com/
www.pearltrees.com

37. Спасибо за внимание!
Сергей Протопопов
UX designer, Omyconf!
При поддержке usabilist.com