Как адаптировать интерфейс под другой размер экрана
Про адаптацию нужно думать сразу. Использовать responsive, где это возможно. Задаться системой брейкпоинтов. При адаптации уже готового дизайна самое важное — не нарушить бизнес-логику и не ухудшить ключевые сценарии пользователей.
Три главных предмета в фокусе внимания
-
Система брейкпоинтов
Меняется, потому что меняются диагонали, соотношения экранов, разрешение. И старые экраны тоже никуда не деваются. Ее нужно не просто взять и всю жизнь использовать, надо под конкретный проект.
-
Паттерны использования устройства
Как минимум, сенсонрный или не сенсорный. Что используют для ввода, насколько он большой, насколько далеко. В дороге в трясучке или в спокойной обстановке.
-
Готовность технологии к адаптивной верстке
Часто очень много проблем с адаптацией решает уже зашитые во фреймворк приемы. Иногда вообще ничего делать не надо, за тебя уже подумали. И это не дизайнерская задача, а вводные для дизайна.
5 советов,
как делать хорошо
- Изучите технологическую платформу
Разработчики уже придумали много приемов и методов, с помощью которых вы сможете легко организовать адаптивный дизайн.
- Изучите адпативные приемы в интерактивном режиме Figma
Сам прототип может быть адаптивным. Это не очень просто, но это можно сделать.
- Всегда делайте responsive
Каждую часть интерфейса делайте responsive, это первый шаг к адаптиву. Исключение тут только фикисрованные размеры экранов специализированных устройств.
- Тестируйте на устройствах
Для постоянного тестирования подойдут эмуляторы. Но периодически нужны реальные физические устройства. У железа есть свои особенности, как минимум, цветопередача или сетка сенсоров на старых гаджетах.
- Следите за бизнес-логикой
Иногда она случайно меняется при переходе от одного разрешения к другому. Иногда ее можно подпихнуть коленочкой. Главное, не потерять важное.
Например
Один интерфейс и для огромного монитора диспетчера, и для 10-дюймового планшета кладовщика. Для тестирования заказчик закупил ровно те планшеты, которые будут использоваться при внедрении.
Адаптировали мобильную версию под веб. Разрешение то же самое, но элементы другие.
Хороший образец
Раздел «Базовые брейкпоинты» в нашей дизан-системе.
Так делать не надо
Исказить бизнес-процесс и ухудшить ключевыой сценарий по ходу адаптации.
Инструменты
Конкретные приемы работы с адаптивными макетами.
Друзья с разными устройствами
Посмотреть, как оно выглядит вживую.
Дизайн-система
В хороших дизайн-системах адаптивность хорошо описана.
Dev-режим браузера
Если интерфейс сверстан, то можно посмотреть, как он будет выглядеть на разных устройствах.
Адаптация — это в большой степени рутинная задача, хоть она и требует высокой квалификации. И не стоит по ходу выполнения рутинной задачи нарушать бизнес-логику, отказываться от ключевой функциональности и добавлять новшества только ради упихивания в экранчик уже спроектированного интерфейса.
Евгений Романовский, руководитель проектного офиса «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169