http://2013.profsoux.ru/papers/33/

1. АДАПТИВНЫЙ ДИЗАЙН?
АДАПТИВНОЕ МЫШЛЕНИЕ!
Евгений Гуринович
Руководитель отдела юзабилити и UX ARTOX media

2. ИНФОРМАЦИЯ НА ТЕМУ
ht t p: / / www. l ukew. com/
ht t p: / / www. smashi ngmagazi ne. com/
ht t ps: / / www. googl e. r u/ Адаптивный_диз
айн
и др.
2

3. ОТЗЫВЧИВЫЙ ВЕБ-ДИЗАЙН
3
Итан Маркотт,
2012 г.

4. ВОПРОСЫ
1. Различные способы ввода
2. Различная структура интерфейса
3. Особенности отображения информации
4. Организация процесса проектирования
4

5. ОПРЕДЕЛЕНИЕ
Адаптивный веб-дизайн
(англ. Responsive web design) —
дизайн веб-страниц, обеспечивающий
отличное восприятие на различных
устройствах (авт. различных разрешениях),
подключённых к интернету
5

6. РАЗЛИЧИЕ СПОСОБОВ ВВОДА
6
Мышь Палец

7. ЭЛЕМЕНТЫ ИНТЕРФЕЙСА
7
Адаптированные под курсор *под палец

8. ПРАВИЛА ПРОЕКТИРОВАНИЯ
ИНТЕРФЕЙСОВ
8
1. Размеры элементов не менее 7x7 мм (40 px)
2. Отступы между элементами не менее 2 мм
(10 px)
3. Не используйте действия по наведению
(или делайте альтернативный вариант для
управления)
4. Делайте выбор в пользу кнопок, а не
ссылок

9. РАЗЛИЧНАЯ СТРУКТУРА ИНТЕРФЕЙСА
9
Структура сайта Управление пальцем

10. ВИДЫ МЕНЮ
10
Меню в
подвале
Выпадающий
список
Меню слева
и др.

11. ПРАВИЛА УПРАВЛЕНИЯ САЙТОМ
11
1. В версиях с разрешением 1024 width и
меньше, по возможности, размещайте
элементы управления сайтом внизу экрана
2. Используйте выпадающие элементы

12. ОСОБЕННОСТИ ОТОБРАЖЕНИЯ
ИНФОРМАЦИИ
12
Структура сайта Чтение информации

13. АДАПТАЦИЯ РАЗМЕРА ТЕКСТА
13
Для Desktop:
― минимальный читабельный
текст 3,88 мм (11 pt)
Для мобильных устройств:
― минимальный читабельный
текст 2,1 мм (6 pt)

14. АДАПТАЦИЯ ЭЛЕМЕНТОВ
14
Адаптируйте каждый элемент

15. ПРАВИЛА АДАПТАЦИИ
ИНФОРМАЦИИ
15
1. Используйте меньший шрифт в мобильной
версии (исключение составляет шрифт
элементов управления)
2. По возможности, отображайте контент
вверху экрана
3. Уделяйте внимание адаптации каждого
элемента сайта
4. Делайте страницу максимально короткой

16. ОРГАНИЗАЦИЯ ПРОЦЕССА
ПРОЕКТИРОВАНИЯ
Обычная схема разработки
16
Wireframe
Prototype
Mockup
Вёрстка
Программирование

17. Адаптивная схема предложенная Итанам
1280x1024
17
Wireframe
Prototype
Mockup
Вёрстка
Программирование
Обсуждение
1. Почему не Mobile First?
2. Очень длинный процесс
обсуждения
3. Без фиксации всё теряется
4. Макеты отличаются порой
очень сильно
5. Проектирование под другие
разрешения требует
корректировки текущего

18. Моя схема разработки
320х480
18
Wireframe Prototype Design
Вёрстка
Программирование
1024х768
1366х768
Wireframe Prototype Design
Wireframe Prototype Design
Wireframe Prototype Design1280х1024
Wireframe Prototype Design…

19. ПРАВИЛА ОРГАНИЗАЦИИ
ПРОЦЕССА
19
1. Используйте принцип Mobile First. Усложнить
систему намного проще, чем сделать её простой.
2. Продумывайте изменение элемента уже на самых
ранних этапах.
3. Фиксируйте все мысли в процессе проектирования.
4. Помогайте разработчику, ставьте указатели и
заметки по анимации и изменению элементов.
5. Используйте библиотеки элементов.

20. АДАПТИВНОЕ МЫШЛЕНИЕ
20
Разработка адаптивного дизайна требует
мыслить не готовыми паттернами, а
отдельными решениями.

21. СПАСИБО ЗА ВНИМАНИЕ!
Евгений Гуринович
руководитель отдела юзабилити и UX ARTOX media
@GurinovichEvgen
gurinovich.evgen@gmail.com