Адаптивный дизайн? Адаптивное мышление! Доклад...

АДАПТИВНЫЙ ДИЗАЙН? АДАПТИВНОЕ МЫШЛЕНИЕ!

Евгений ГуриновичРуководитель отдела юзабилити и UX ARTOX

media

ИНФОРМАЦИЯ НА ТЕМУ

http://www.lukew.com/http://www.smashingmagazine.com/https://www.google.ru/Адаптивный_дизайн

и др.

2

ОТЗЫВЧИВЫЙ ВЕБ-ДИЗАЙН

3

Итан Маркотт, 2012 г.

ВОПРОСЫ

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

4

ОПРЕДЕЛЕНИЕ

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

5

РАЗЛИЧИЕ СПОСОБОВ ВВОДА

6

Мышь Палец

ЭЛЕМЕНТЫ ИНТЕРФЕЙСА

7

Адаптированные под курсор *под палец

ПРАВИЛА ПРОЕКТИРОВАНИЯ ИНТЕРФЕЙСОВ

8

1. Размеры элементов не менее 7x7 мм (40 px)2. Отступы между элементами не менее 2 мм

(10 px)3. Не используйте действия по наведению

(или делайте альтернативный вариант для управления)

4. Делайте выбор в пользу кнопок, а не ссылок

РАЗЛИЧНАЯ СТРУКТУРА ИНТЕРФЕЙСА

9

Структура сайта Управление пальцем

ВИДЫ МЕНЮ

10

Меню в подвале Выпадающий список

Меню слева

и др.

ПРАВИЛА УПРАВЛЕНИЯ САЙТОМ

11

1. В версиях с разрешением 1024 width и меньше, по возможности, размещайте элементы управления сайтом внизу экрана

2. Используйте выпадающие элементы

ОСОБЕННОСТИ ОТОБРАЖЕНИЯ ИНФОРМАЦИИ

12

Структура сайта

Чтение информации

АДАПТАЦИЯ РАЗМЕРА ТЕКСТА

13

Для Desktop:― минимальный читабельный текст 3,88 мм (11 pt)

Для мобильных устройств:― минимальный читабельный текст 2,1 мм (6 pt)

АДАПТАЦИЯ ЭЛЕМЕНТОВ

14

Адаптируйте каждый элемент

ПРАВИЛА АДАПТАЦИИ ИНФОРМАЦИИ

15

1. Используйте меньший шрифт в мобильной версии (исключение составляет шрифт элементов управления)

2. По возможности, отображайте контент вверху экрана

3. Уделяйте внимание адаптации каждого элемента сайта

4. Делайте страницу максимально короткой

ОРГАНИЗАЦИЯ ПРОЦЕССА ПРОЕКТИРОВАНИЯ

Обычная схема разработки

16

Wireframe

Prototype

Mockup

Вёрстка

Программирование

Адаптивная схема предложенная Итанам

1280x1024

17

Wireframe

Prototype

Mockup

Вёрстка

Программирование

Обсуждение

1. Почему не Mobile First?2. Очень длинный процесс

обсуждения3. Без фиксации всё теряется4. Макеты отличаются порой

очень сильно5. Проектирование под другие

разрешения требует корректировки текущего

Моя схема разработки

320х480

18

Wireframe Prototype Design

Вёрстка

Программирование

1024х768

1366х768

Wireframe Prototype Design

Wireframe Prototype Design

Wireframe Prototype Design1280х1024

Wireframe Prototype Design…

ПРАВИЛА ОРГАНИЗАЦИИ ПРОЦЕССА

19

1. Используйте принцип Mobile First. Усложнить систему намного проще, чем сделать её простой.

2. Продумывайте изменение элемента уже на самых ранних этапах.

3. Фиксируйте все мысли в процессе проектирования.

4. Помогайте разработчику, ставьте указатели и заметки по анимации и изменению элементов.

5. Используйте библиотеки элементов.

АДАПТИВНОЕ МЫШЛЕНИЕ

20

Разработка адаптивного дизайна требует мыслить не готовыми паттернами, а отдельными решениями.

СПАСИБО ЗА ВНИМАНИЕ!

Евгений Гуринович руководитель отдела юзабилити и UX ARTOX media

@GurinovichEvgen e.gurinovich@artox-media.ruТел.: +7 (495) 620-58-99