UX&UI. ПРОДУКТОВЫЙ ДИЗАЙН ИЛИ КАК НЕ ЗАСТРЯТЬ В ОДНОМ РАЗРЕШЕНИИ ДЕНЬ ЕДИНЫЙ ИНТЕРФЕЙС 04 Гладков Артем
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
U X & U I . П Р О Д У К Т О В Ы Й Д И З А Й Н
И Л И К А К Н Е З А С Т Р Я Т Ь
В О Д Н О М Р А З Р Е Ш Е Н И И
Д Е Н Ь
ЕДИНЫЙ ИНТЕРФЕЙС
04
Гладков Артем
Нет мобильного веба и большого веба,
есть один единый веб.
Да и дизайнер должен быть один,
а не разные под каждую платформу
Это единая система, но в разных
отображениях.
Е — ЕДИНЫЙ
ВАЖНО ДУМАТЬ О ВСЕХ УСТРОЙСТВАХ
Проект выглядит схоже на любом устройстве
Люди привыкают к единобразию интерфейса, единый опыт
Один веб-сайт для всех устройств, удобство разработки
ЧАСТО ПРО МОБИЛЬНЫЕ ВЕРСИИ ПРОСТО ЗАБЫВАЮТ
Общая мобильная аудитория Mail.Ru Group превысила 50%.
А, например, в «Одноклассниках» — это 64%.
Это общая тенденция и цифра только растет.
Google лчуше ранжирует сайты с мобильной версией.
ridus.ru
egais.ru
УСТРОЙСТВА,БРЕЙКПОЙНТЫ
И СЕТКА
viewportsizes.com
1366x768
1600x900
1920x1080
1366x768
1600x900
1920x1080
1024x768
768x1024
1024x768
768x1024
320x480
480x320
320x480
480x320
ОСТАВЛЯЕМ ОСНОВНЫЕ БРЕЙКПОЙНТЫ
Д Е С К Т О П П Л А Н Ш Е Т М О Б И Л Ь Н Ы Е
Мы будем использовать значения,
которые видит бразузер, а не физическое
разрешение девайсов, т.е. всегда
используем 1x.
Именно эти значения будут проставлены
в media queries в CSS-стилях.
Мы будем использовать значения,
которые видит бразузер, а не физическое
разрешение девайсов, т.е. всегда
используем 1x.
Именно эти значения будут проставлены
в media queries в CSS-стилях.
РАБОТАЕМ С CSS-ПИКСЕЛЕМ И VIEWPORT-ОМ
Р Е Т И Н А
Б Р А У З Е Р
Сетка — это правила, т.е. меньше
ошибок: даже в презе есть сетка.
Продумываем сетку для каждого
брейкпойнта, колонки могут меняться.
Элементы сетки: колонка (column),
отступ между колонками (gutter) и
общий отступ по краям (margin).
Сетка — это правила, т.е. меньше
ошибок: даже в презе есть сетка.
Продумываем сетку для каждого
брейкпойнта, колонки могут меняться.
Элементы сетки: колонка (column),
отступ между колонками (gutter) и
общий отступ по краям (margin).
ВСЕ ДЕЛО В СЕТКЕ: ДЛЯ ВСЕХ БРЕЙКПОЙНТОВ
Резиновая сетка — кол-во колонок не меняется, они просто
меняют свою ширину.
Ступенчатая сетка — на брейкпойнтах меняется количество
колонок, лейаут перерисовывается.
Резиновая сетка — кол-во колонок не меняется, они просто
меняют свою ширину.
Ступенчатая сетка — на брейкпойнтах меняется количество
колонок, лейаут перерисовывается.
СЕТКА МОЖЕТ ТЯНУТЬСЯИЛИ МЕНЯТЬСЯ СТУПЕНЧАТО
MEDIA MAIL.RU
Ограниченная контентная область, чтобы было удобно
читать
Контролируемый размер блоков, хорошо работает
с графикой
Мобильная адаптация сейчас на другом урле
Ограниченная контентная область, чтобы было удобно
читать
Контролируемый размер блоков, хорошо работает
с графикой
Мобильная адаптация сейчас на другом урле
НА МЕДИА — СТУПЕНЬКАМИ
PRODUCTIVITYMAIL.RU
Сетка работатет без колонок, потому что у нас есть в
интерфейсе есть 5 горизонтальных блоков
Мы пытались выкроить максимум свободного места,
потому что для нас это важно
Сетка работатет без колонок, потому что у нас есть в
интерфейсе есть 5 горизонтальных блоков
Мы пытались выкроить максимум свободного места,
потому что для нас это важно
НА ПОЧТЕ РЕЗИНОВАЯ СЕТКА
ЕЩЕ ПРИМЕРЫ
ОТРИСОВКА ИНТЕРФЕЙСА
С ЧЕГО НАЧИНАТЬ?
Смотрим на аудиторию и проект — делаем вывод
на каких девайсах пользователи будут чаще использовать
наш сервис.
Новости, социальные сети — скорее мобильные.
Продуктивити-сервисы (редактирование текста, фото,
проектирование) — скорее десктоп.
КАКИЕ ДЕВАЙСЫ В ПРИОРИТЕТЕ?
Рисуем интерфейс под мобильный
телефон, потом масштабируем
до таблетки и десктопа
Упрощаем и оставляем только самое
важное
Держим в голове тачабельность,
все крупное, жирное
Легковесный (думает про графику)
MOBILE-FIRST
DESKTOP-FIRST
Начинаем с десктопа и деградируем
до мобильного
Учитывайте на длину строки
(от 45 до 75 знаков в идеале)
Компенсируйте ширину отступами
по краям
Продумайте сразу как могут
трансформироваться блоки
Начинаем с десктопа и деградируем
до мобильного
Учитывайте на длину строки
(от 45 до 75 знаков в идеале)
Компенсируйте ширину отступами
по краям
Продумайте сразу как могут
трансформироваться блоки
Привет, SURFACE — десктопы превращаются
в гибридов.
На этот вопрос можно ответить задачами проекта,
если это сложный продуктовый инструмент, то можно
пожертвовать тачабельностью в силу кол-ва контента.
Привет, SURFACE — десктопы превращаются
в гибридов.
На этот вопрос можно ответить задачами проекта,
если это сложный продуктовый инструмент, то можно
пожертвовать тачабельностью в силу кол-ва контента.
ДЕСКТОП УЖЕ ТОЖЕ ДОЛЖЕН БЫТЬ ТАЧАБЕЛЬНЫМ?
32
28
29
29
26
40
56
ИНСТРУМЕНТЫ
ADOBE EDGE REFLOW
Можно экспортировать
макеты из Photoshop-а
Произвольные брейкпойнты
Можно экспортнуть в верстку
и смотреть на локалке
Слегка посмотреть код,
скопировать стили
Можно экспортировать
макеты из Photoshop-а
Произвольные брейкпойнты
Можно экспортнуть в верстку
и смотреть на локалке
Слегка посмотреть код,
скопировать стили
MACAW
Максимально простой,
минимум элементов и стилей,
норм для адаптивности
Произвольные брейкпойнты
Качественный код, который
можно использовать в «бою»
Можно вставлять свой код
Максимально простой,
минимум элементов и стилей,
норм для адаптивности
Произвольные брейкпойнты
Качественный код, который
можно использовать в «бою»
Можно вставлять свой код
WEBFLOW
Полноценный GUI для верстки
Говорит на языке верстки
Собирает неплохой код
Брейкпойнты (с инфой про
дивайсы)
Можно экспортировать код
и паблишить на свой домен
Полноценный GUI для верстки
Говорит на языке верстки
Собирает неплохой код
Брейкпойнты (с инфой про
дивайсы)
Можно экспортировать код
и паблишить на свой домен
СВЕРСТАТЬ САМОМУ
Можно написать код самостоятельно. Для этого лучше
использовать готовые css-стили, в которых есть и сетки,
и типографика.
foundation.zurb.com/grid.html
getskeleton.com
purecss.io/grids
Можно написать код самостоятельно. Для этого лучше
использовать готовые css-стили, в которых есть и сетки,
и типографика.
foundation.zurb.com/grid.html
getskeleton.com
purecss.io/grids
DEVELOPER PREVIEW
Просмотр готового кода
Просмотр кода под девайс
Готовый набор
брейкпойнтов
Просмотр готового кода
Просмотр кода под девайс
Готовый набор
брейкпойнтов
БЛАГОДАРЧИК
fb.com/tema.gladkov
Related Documents
