Upload
ivo-dimitrov
View
862
Download
0
Embed Size (px)
DESCRIPTION
Немного измененная презентация для WUD 2012 (в конце сделаны работы для проектирования).
Citation preview
Думай и адаптируй! Adap1ve Design
Dimitrov Ivo CVO at Ingenius Systems
Быстрый рост
На сегодняшний день скорость развития мобильного веба опережает десктопный в 8 раз
Быстрый рост
Это значит, что 16% пользователей Рунета Выходит в сеть с помощью мобильный устройств.
Быстрый рост
Это более
14 млн. пользователей!
Быстрый рост
Зачем упускать такое количество пользователей?
Быстрый рост Посмотрите на разницу
Март, 2012 Октябрь, 2012
Возможности
Какие возможности доступны при использовании десктопного интернета?
Возможности
Большой экран
Быстрый интернет
Клавиатура
и Мышь
Удобное место для работы/отдыха
Возможности
А какие возможности доступны пользователям мобильного интернета?
Возможности
Маленький экран
Медленный интернет
Пальцы
Сенсоры
Ограничения?
• Размер экрана • Скорость интернета • Доступные возможности
Ограничения = Фокус
Размер экрана позволяет сосредоточиться на главном и использовать дефицитное место с умом.
Ограничения = Фокус
Медленная скорость интернета заставляет задуматься о скорости загрузки вашего проекта …
Ограничения = Фокус
1. Использование меньшего кол-‐ва изображений
2. Оптимизация подключаемых файлов 3. Использование изображений меньшего
«веса» 4. Продумывание кода для более быстрой
загрузки проекта
…, что влечет за собой:
Ограничения = Фокус Возможности при проектировании «маленьких разрешений»
Мультитач действия Платформы Нажатие
iOS Android OS Web OS Windows Phone 7 и 8 OS X Windows 7 и 8 RIM >6.0 Ubuntu
Двойное нажатие
Перемещение
Смахивание
Сведение
Разворачивание
Вращение
Ограничения = Фокус Не стоит забывать о …
Взаимодействие
Чтение
Разм
еры пальца?
Ограничения = Фокус Остальные интересные возможности мобильного интернета
• Позиционирование и движение устройства • Гироскоп • Определение местоположения пользователя • Мультитач сенсоры • Видео и изображения: съемка и быстрое сохранение на телефон
Что такое
Адаптивный дизайн – это техника, при которой создается один сайт для разных разрешений экрана, а так же адаптация элементов взаимодействия пользователя с продуктом.
Режимы отображения
Два основных режима использования устройств – Портретный и Ландшафтный.
Рекомендации по адаптации
• «Резиновые» изображения • Адаптивный текст • Адаптивная навигация • Адаптивные таблицы • Отображение и скрытие контента
Рекомендации по адаптации
В зависимости от размера экрана подгружать соответствующего размера изображения, что бы экономить драгоценный трафик
Рекомендации по адаптации
Оптимизация размера шрифта в зависимости от размера экрана, а так же изменение его расположения.
Рекомендации по адаптации
Путь адаптации навигации – оставить как есть?
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Рекомендации по адаптации
Путь адаптации навигации – выпадающий список?
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Рекомендации по адаптации
Путь адаптации навигации – показать списком?
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Рекомендации по адаптации
Путь адаптации навигации – раскрывающий список?
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Рекомендации по адаптации
Путь адаптации навигации – перенос списка в подвал?
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Рекомендации по адаптации
Путь адаптации навигации – меню слева?
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Рекомендации по адаптации
Путь адаптации навигации – выделение приоритетов?
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Рекомендации по адаптации
h�p://bradfrost.github.com/this-‐is-‐responsive/pa�erns.html
Выпадающие списки с вложенными элементами Скрытие вложенных элементов
Рекомендации по адаптации
Без адаптации таблицы выглядят так
Рекомендации по адаптации
Garre� Dimon предложил несколько вариантов отображения таблицы в зависимости от поставленной задачи.
h�p://css-‐tricks.com/examples/ResponsiveTables/responsive.php
Разворот таблицы и представление в виде списка. Если вам требуется редактирование таблицы, то это один из лучших способов.
Рекомендации по адаптации
Sco� Jehl предложил немного другой вариант -‐ отображение данных в виде диаграммы.
h�p://jsbin.com/emexa4
Рекомендации по адаптации
Еще одна из идей -‐ показывать данные на маленьком экране только после запроса (клике на область).
h�p://jsbin.com/apane6/14/
Рекомендации по адаптации
Скрытие элементов в зависимости от размера экрана
Паттерны адаптации
Главный блок остается всегда сверху, второстепенные блоки уходят под главный блок.
Паттерны адаптации
Второстепенные блоки опускаются под главный блок в зависимости от приоритетности.
Паттерны адаптации
Сокращение левого блока и перенос его наверх на главным блоком. Чаще используется, когда в нем расположена навигация.
Паттерны адаптации
Скрытие блоков за пределы видимости (экрана).
Паттерны адаптации
Примеры скрытия блоков
Пара примеров
Пара примеров
Пара примеров
А теперь – займемся делом!
У каждой команды должны быть:
• Листы чистой бумаги • 5 варианта задания • Таблица рекомендаций по адаптации • Ножницы • Карандаши и ручки
Если чего либо нет, то подходите ко мне =)
Делает крутой интерфейс (25 минут)
Спасибо
Ivo Dimitrov Follow me: @gogola Like me: �.me/Dimitrov.Ivo Mail: [email protected]