Да, сегодня 1 апреля. Нет, это не шутка. Про iPad тоже не шутка.
С этого дня (и навсегда) iOS-приложение ВКонтакте станет универсальным — все обновления будут доступны одновременно на iPhone и iPad.
Я Матвей Правосудов, старший продуктовый дизайнер ВКонтакте. Расскажу про дизайн универсального приложения: от концептов и возникших проблем до принятых решений и итогового результата. Бонусом — советы (на случай, если вы окажетесь в похожей ситуации) и публичные макеты в Figma для всех желающих.
Предыстория
Последние несколько лет у нас было два приложения в App Store: ВКонтакте (для iPhone) и «ВКонтакте для iPad».
![Скриншоты отдельного приложения для iPad Скриншоты отдельного приложения для iPad](https://habrastorage.org/getpro/habr/upload_files/f99/def/250/f99def250bb64066fb2a311692c05dc3.png)
В 2015 году каждую крупную фичу мы проектировали отдельно под iOS (для iPhone), Android, веб, m.vk.com и iPad. Мы делали независимую и сильно отличающуюся версию для планшетов, хотя аудитория iPad была (и остаётся) значительно меньше, чем на других платформах.
Со временем количество новых функций и продуктов (а значит, и обновлений) росло. Адаптировать их для каждой платформы становилось всё сложнее. Мы сфокусировались на версии с самой большой аудиторией — мобильном приложении ВКонтакте: по количеству пользователей оно обогнало не только iPad, но и vk.com с m.vk.com. Прежний подход с отдельной версией для планшетов оказался неэффективным — и стало ясно, что нужно новое решение.
Прийти к нему помогла наша единая дизайн-система. Мы уже некоторое время работаем над ней, чтобы ускорять разработку и делать процессы проще. Например, уже рассказывали про работу с цветами в тёмной теме и делились библиотеками компонентов, которыми каждый день пользуемся сами. Универсальное приложение для iPhone и iPad — логичный следующий шаг.
![](https://habrastorage.org/getpro/habr/upload_files/75c/b47/051/75cb470512cb5629f80aa12814f7aa09.png)
Новый процесс проектирования
Чтобы не затягивать запуски и не разрабатывать при каждом обновлении варианты под разные устройства, мы решили сделать приложение для iPhone и iPad универсальным. Это позволяет за один подход адаптировать его почти полностью к разным размерам экранов. А в будущих фичах адаптивность заведётся почти самостоятельно.
И мы попробовали несколько идей.
![Один из первых смелых концептов. Две колонки, новая шапка, плеер внутри таббара. Одним словом — шик Один из первых смелых концептов. Две колонки, новая шапка, плеер внутри таббара. Одним словом — шик](https://habrastorage.org/getpro/habr/upload_files/2a2/b00/c23/2a2b00c23831b4f822ea1819483cd3ab.png)
Макет смелый и эффективно использует пространство экрана, но нам не подошёл. Он подразумевает дополнительную разработку под iPad — а мы как раз хотели от неё отказаться, чтобы не замедлять запуск новых фич. Поэтому потребовались ограничения для дизайнерских решений. Конечно, мы обожаем крутые концепты, но в этой задаче нужна простая система навигации и сетки. И она должна хорошо работать как на iPhone, так и на iPad.
Поэтому что мы сделали дальше? Взяли приложение для iPhone и растянули.
![Более спокойный концепт Более спокойный концепт](https://habrastorage.org/getpro/habr/upload_files/8db/6f5/9ae/8db6f59aee2d2eb2be3674b056e7a7fb.png)
Эта идея сработала. С ней разработчикам не приходится заново верстать каждый экран — достаточно настроить правила адаптации ключевых экранов к широкому размеру.
Закапываясь в ограничениях, легко сделать быстрое в разработке, но неудобное приложение. Чтобы не попасть в эту ловушку, мы нашли баланс: глобальные компоненты адаптируем, но локально пользуемся преимуществами iPad.
— А чем отличается iPad от ноутбука или телефона, кроме размера экрана?
В первую очередь контекстом использования. Сидеть за ноутбуком удобно, когда ты не находишься в движении и есть стол, где можно расположить устройство. В твоём распоряжении клавиатура для ввода, а ещё тачпад или мышь. В такой комфортной рабочей обстановке, за компьютером, пользователи могут распространять фокус внимания на несколько окон и состояний. Сами приложения могут быть сложнее, если это уместно.
Мобильный телефон — маленький. Нет дополнительных устройств ввода, только пальцы. Благодаря этим и другим ограничениям получилось компактное устройство, которым удобно пользоваться на ходу, в автобусе, тренажёрном зале. Но в таких условиях люди не могут охватить вниманием сразу несколько окон. Поэтому мобильные приложения открываются на полный экран, а каждая страница заточена под конкретную задачу.
Планшет — что-то среднее между ноутбуком и телефоном. По умолчанию без клавиатуры и мышки, но с большим экраном. Планшетом можно пользоваться на ходу, но уже не так удобно. При этом дизайнеры ожидают, что владельцы устройств справятся с несколькими фокусами внимания или приложениями. Поэтому появились разделения на колонки, Split View, Slide Over и другие возможности.
При проектировании навигации в новом приложении мы учли основные особенности условий, в которых используется iPad. Пока не поддерживаем технологии многозадачности iPadOS в полную силу, но займёмся этим в будущем.
![Сколько фокусов внимания может сохранять пользователь на разных девайсах Сколько фокусов внимания может сохранять пользователь на разных девайсах](https://habrastorage.org/getpro/habr/upload_files/fba/41c/627/fba41c627e470f310a870b2e72104aae.png)
После проработки основных концептов и обсуждения с разработчиками мы приступили к важному этапу — проектированию системы адаптации.
Универсальное приложение
Подготовка
Немного расскажу про инструменты и план работы. С прошлого года мы работаем в Figma, и пришло время по максимуму использовать главную функцию редактора — мультиплеер.
Мы собрали почти всех дизайнеров и распределились по командам. Я стартовал сразу и готовил систему, а другие продуктовые дизайнеры подхватывали новые описанные компоненты и утаскивали в свои макеты. Каждый из нас отвечал за свой продукт: музыку, видео, мессенджер, клипы, сервисы, ленту новостей, истории, постинг, звонки, стикеры и подарки, сообщества, маркет, инфраструктуру. Когда макеты очередного продукта были готовы — мы перетаскивали их из черновиков на мастер-страницу команды. Разработчики тоже не отставали и оперативно применяли свежие макеты.
Мы планировали использовать нативные iOS-компоненты. Поэтому для дизайна под iPad потребовались хорошие знания по работе модалок и навигации. Ещё нам пригодилось приложение Adaptivity (A). Оно платное, но помогло разобраться, какие стандартные размеры у модальных окон и таблиц и как они меняются при разных ориентациях устройства.
На этом мы завершили подготовку.
Адаптивность. Проектирование навигации
Самое верхнеуровневое проектирование любого продукта — это информационная архитектура и навигация. Структуру мы оставляли такой же, как на iPhone, а вот над навигацией пришлось подумать.
Мы постоянно работаем над ней в приложении. Тестировали разные варианты, и один был с левым меню, в котором сконцентрированы наиболее часто используемые разделы. Его мы и решили взять за основу версии для iPad.
![Новый дизайн ленты новостей и открытое боковое меню Новый дизайн ленты новостей и открытое боковое меню](https://habrastorage.org/getpro/habr/upload_files/fcb/5d9/a6c/fcb5d9a6c2fe3f0ac3a75401e37cf25f.png)
Сначала разбили весь экран на две колонки: сайдбар с навигацией слева и основной контент справа. Идея навигации была в том, чтобы взять боковое меню из мобильной версии и добавить пункты таббара в самый верх. У пользователя остаётся в быстром доступе вся основная навигация, а ещё можно быстро переходить к второстепенным пунктам меню. Так рекомендует адаптировать приложения и Apple.
![Первый вариант навигации Первый вариант навигации](https://habrastorage.org/getpro/habr/upload_files/037/873/2b8/0378732b8547b4450b4b937db125b552.png)
Но мы решили на всякий случай попробовать разные концепты — чтобы было из чего выбирать. Набросали три варианта навигации в приложении. Первый был предпочтительным: в ландшафтной ориентации всегда доступна навигация, достаточно площади для контента, а в портретной меню компактно схлопывается.
![](https://habrastorage.org/getpro/habr/upload_files/3f3/602/339/3f3602339dc728e1f8a7e4192071ab38.png)
Затем мы замиксовали подходы и сделали в ландшафте всегда раскрытую навигацию, а в портрете выезжающее меню, как на iPhone (по умолчанию оно скрыто, чтобы не съедать ширину).
![](https://habrastorage.org/getpro/habr/upload_files/b2e/bc4/b85/b2ebc4b85becbc6a368f26fd0ceda764.png)
Финальный вариант был самым простым: таббар остаётся, а боковое меню открывается из шапки экрана.
![](https://habrastorage.org/getpro/habr/upload_files/ce3/299/f1b/ce3299f1b25e89d59b016559f5b4f3fb.png)
Обсудили с разработчиками возможности и остановились на третьем варианте. Адаптация интерфейса к планшету и так довольно непростая и порождает много багов — а мы не хотели ещё больше усложнять коллегам работу. К тому же сайдбар замедлил бы вёрстку экрана мессенджера, где мы планировали использовать Split View. Но мы всё же держим в уме первый вариант навигации с сайдбаром — на будущее.
Адаптивность. Каркас и глобальные компоненты
Чтобы ускорить дизайн и разработку, мы использовали системный подход: выделили структуры экранов (каркасы) и большие компоненты, а затем описали для них правила адаптации к iPad. Дизайнеры придерживались стратегии правил — и разработчики один раз заводили, например, снекбар, и он правильно работал во всех случаях.
Гайды. Глобальные правила и примеры компонентов мы вынесли на отдельную страницу в Figma — Guide. Дизайнеры брали оттуда готовые объекты, а разработчики ориентировались на примеры и реализовывали их в коде.
![Пример гайда по модальному окну для историй и мини-приложений Пример гайда по модальному окну для историй и мини-приложений](https://habrastorage.org/getpro/habr/upload_files/939/7cb/594/9397cb5949936ece199418c72c958201.png)
Каркасы экранов. Мы вывели несколько типовых структур страниц, которые чаще всего встречались в приложении.
Материк. Залитый фон, одна длинная белая колонка с контентом. Подходит почти всем страницам.
Широкий материк. Нужен для страниц, где много, например, фотографий или видео. Рука не поднималась ужимать яркий медиаконтент в узкую колонку материка, и мы разрешили быть ему широким.
Острова. Несколько материков, которые живут на серой странице. Острова появляются в дизайне «ленточных» страниц: новостей, стены пользователя, закладок, лайков.
Hero. А ещё у нас бывают страницы про одну сущность: автора клипов, маску, эффект, флешмоб. Или настроечные экраны, в которых не так много контента, но хочется акцентировать внимание на заголовке. Для этого мы просто растянули шапку с градиентом на всю ширину.
![Основные каркасы Основные каркасы](https://habrastorage.org/getpro/habr/upload_files/76a/4ac/63e/76a4ac63ec732032b037482a2339f272.png)
Совет: новый Auto Layout 2.0 от Figma заметно ускоряет адаптацию экранов для iPad. Особенно настройка фиксированной ширины у родительского контейнера и Fill у всех внутренних фреймов.
Модальные окна. Для модальных окон мы взяли системные размеры Form Sheet и Page Sheet и придерживались их. Модальная карточка приобрела ширину Form Sheet, а модальная страница обзавелась двумя ширинами: 416 и 640 точек.
Частным случаем модального окна были выезжающие из шапки панели. Например, в новостной ленте можно переключиться между разными типами контента. В мобильной версии меню выезжало просто из шапки. А на iPad мы ограничили меню по ширине в 416 точек, скруглили уголки и навесили разделитель. Получился новый компонент — «галстук».
Конечно, его можно было сделать в виде контекстного меню. Но это потребовало бы больше разработки, чем просто задать максимальную ширину и скруглить углы.
![Пример «галстука» Пример «галстука»](https://habrastorage.org/getpro/habr/upload_files/1e4/43d/893/1e443d893f58801877505632501a1b73.png)
Основные разделы
Применив каркасы и принципы, мы получили дизайн корневых экранов на iPad:
лента — типичные острова;
сервисы — своеобразные, со своей вёрсткой;
мессенджер — с представлением Master & Detail;
клипы — на полный экран, но с сохранением пропорций видео.
А ещё на iPad в таббаре много свободного места, и мы добавили в меню музыку и уведомления. Теперь приложение ВКонтакте на iPad даже чуть более функциональное, чем на iPhone.
![](https://habrastorage.org/getpro/habr/upload_files/1a1/ccf/15e/1a1ccf15ed5b833595a8efa52eaa9cab.png)
![](https://habrastorage.org/getpro/habr/upload_files/345/ea5/0f2/345ea50f23f9004a092caed62935a445.png)
![](https://habrastorage.org/getpro/habr/upload_files/67d/8ff/dc1/67d8ffdc1430308f4f000c98bba79f11.png)
![](https://habrastorage.org/getpro/habr/upload_files/47b/bef/f70/47bbeff70ad4988f5b9817c2eaa542cd.png)
![](https://habrastorage.org/getpro/habr/upload_files/ee3/a1e/87a/ee3a1e87a7e14aecde15f671eb43f36d.png)
![](https://habrastorage.org/getpro/habr/upload_files/552/86d/7d6/55286d7d61ac2b0d9c92718b3e27d135.png)
Заключение
Мы избавились от старого подхода с двумя приложениями для iPhone и iPad — и сделали одно, универсальное. Больше нет причин откладывать поддержку планшета — все основные компоненты и так адаптированы под большой экран, а отдельные легко укладываются в описанные каркасы.
Ещё один плюс — тёмная тема пришла и на iPad. Планшетом стало комфортно пользоваться ночью: экран не слепит и ничего не отвлекает от контента.
![](https://habrastorage.org/getpro/habr/upload_files/038/9ab/83b/0389ab83ba4161582ed5ef7c0d6b4a1b.png)
Fun fact: так как мы сделали универсальное приложение, пути назад нет. Без поддержки iPad в новых версиях Apple будет отклонять релизы, поэтому версия для планшета теперь всегда под контролем.
Это только начало! Не все идеи вошли в итоговый интерфейс. Мы не хотели откладывать релиз только ради концептуальных и смелых решений — пользователи ждут. Но в будущем планируем использовать все возможности iPad и сделать важные функции ещё удобнее. Речь о Split View, более удобном музыкальном плеере, поддержке технологии Picture in Picture, контекстных меню и многом другом. А ещё в глубинах ВКонтакте остались экраны, до которых мы ещё не добрались. О них тоже позаботимся и адаптируем.
Где скачать приложение?
Всё просто: установите на iPad ВКонтакте из App Store или, если это приложение уже есть на вашем планшете, — обновите до последней версии. Мы пока не будем отключать прежнее, чтобы было время перейти.
Благодарности
Над приложением работала огромная команда. Спасибо менеджерам, разработчикам, тестировщикам, отделу маркетинга и исследований и всем-всем-всем.
![](https://habrastorage.org/getpro/habr/upload_files/7f7/d94/4b6/7f7d944b630d96de0273a58cc62132e8.png)
Бонусы
Советы дизайнерам, которые будут проектировать универсальное приложение
Подождите 5 лет.Найдите iPad и воспользуйтесь приложениями. И системными, и сторонними. Так будет легче найти удачные приёмы и понять общие принципы.
Подумайте о контексте и внимании. iPad — что-то среднее между ноутбуком и телефоном. Он не такой мобильный, поэтому пользователи могут фокусироваться на нескольких частях экрана.
Выделите сетку и основные компоненты в отдельные правила, чтобы упростить разработку. Чем больше автоматических адаптаций, тем проще.
Учитывайте рекомендации Apple. Посмотрите лекцию Designed for iPad и попробуйте применить советы из неё.
Постройте эффективный процесс. Если у вас в команде несколько дизайнеров, распределите зоны ответственности. А ещё такая задача — самый подходящий момент, чтобы синхронизироваться с разработчиками после каждого макета, если вы ещё так не делаете.
Макеты для iPad
Теория — это круто, но лучше закреплять всё на практике и примерах. Поэтому мы подготовили публичный Figma-файл в комьюнити @vk. Там больше 200 экранов!
![](https://habrastorage.org/getpro/habr/upload_files/e58/a06/155/e58a061556e605d7fc7a3fb988edda50.png)
Заглядывайте в макет, дублируйте его к себе и экспериментируйте! Прикольные концепты можно закинуть в VK Designers — лучшие опубликуем в сообществе. Не стесняйтесь <3