Как адаптировать интерфейс под другой размер экрана
Про адаптацию нужно думать сразу. Использовать responsive, где это возможно. Задаться системой брейкпоинтов. При адаптации уже готового дизайна самое важное — не нарушить бизнес-логику и не ухудшить ключевые сценарии пользователей.
#интерфейсы
#responsive
#адаптивный дизайн
Три главных предмета в фокусе внимания
1
Система брейкпоинтов
Меняется, потому что меняются диагонали, соотношения экранов, разрешение. И старые экраны тоже никуда не деваются. Ее нужно не просто взять и всю жизнь использовать, надо под конкретный проект.
2
Паттерны использования устройства
Как минимум, сенсонрный или не сенсорный. Что используют для ввода, насколько он большой, насколько далеко. В дороге в трясучке или в спокойной обстановке.
3
Готовность технологии к адаптивной верстке
Часто очень много проблем с адаптацией решает уже зашитые во фреймворк приемы. Иногда вообще ничего делать не надо, за тебя уже подумали. И это не дизайнерская задача, а вводные для дизайна.
Например
Хороший образец
Раздел «Базовые брейкпоинты» в нашей дизан-системе. Выложим, когда сделаем публичной
Так делать не надо
Исказить бизнес-процесс и ухудшить ключевыой сценарий по ходу адаптации.
Инструменты
Инструкция Figma
Конкретные приемы работы с адаптивными макетами.
Друзья с разными устройствами
Посмотреть, как оно выглядит вживую.
Дизайн-система
В хороших дизайн-системах адаптивность хорошо описана.
Dev-режим браузера
Если интерфейс сверстан, то можно посмотреть, как он будет выглядеть на разных устройствах.
Адаптация — это в большой степени рутинная задача, хоть она и требует высокой квалификации. И не стоит по ходу выполнения рутинной задачи нарушать бизнес-логику, отказываться от ключевой функциональности и добавлять новшества только ради упихивания в экранчик уже спроектированного интерфейса.
Евгений Романовский, руководитель проектного офиса «Собаки Павловой»
5 советов,
как делать
хорошо
1
Изучите технологическую платформу
Разработчики уже придумали много приемов и методов, с помощью которых вы сможете легко организовать адаптивный дизайн.
2
Изучите адпативные приемы в интерактивном режиме Figma
Сам прототип может быть адаптивным. Это не очень просто, но это можно сделать.
3
Всегда делайте responsive
Каждую часть интерфейса делайте responsive, это первый шаг к адаптиву. Исключение тут только фикисрованные размеры экранов специализированных устройств.
4
Тестируйте на устройствах
Для постоянного тестирования подойдут эмуляторы. Но периодически нужны реальные физические устройства. У железа есть свои особенности, как минимум, цветопередача или сетка сенсоров на старых гаджетах.
5
Следите за бизнес-логикой
Иногда она случайно меняется при переходе от одного разрешения к другому. Иногда ее можно подпихнуть коленочкой. Главное, не потерять важное.