В этой статье рассказываю про основные способы создания кроссплатформенного UI/UX — берите на вооружение для похода в компании, предоставляющие услуги по UX дизайну.
1. Дизайн «Под стандарты системы»
Гайдлайны есть как у Google , так и у Apple — как правило, большинству дизайнеров они, знакомы (это никакой не скил для продвинутых: :D). Так вот, да, при таком сценарии мы говорим о создании дизайна, где каждая версия соответствует стандартам отдельно взятой ОС.
Главный приоритет — использование нативных элементов управления.
Этим путем шел Whatsapp, у которого 2 уникальных дизайна — один под iOS, другой под Android
Проектирование кроссплатформенного дизайна с ориентацией на ОС ≠ изобрести велосипед. Напротив, интерфейс остается максимально привычным для пользователя. Чтобы сразу после установки в нем можно было легко сориентироваться, отыскать все нужные фичи. Будь-то отправка сообщения или оформление премиум-подписки.
Главное преимущество мультиплатформенной адаптации для стартапов — на выходе вы получаете 100% работающий кроссплатформенный дизайн. С интуитивным интерфейсом, шрифтами и навигацией «под стандарты». Абсолютно каждый дизайн-элемент уместен и заточен под целевую платформу.
Подход с ориентацией на платформу требует двух создания отдельных дизайн-версий, однако необходимости в том, чтобы придумывать каждую мелкую деталь «с нуля», нет. Четкое следование гайдлайнам Android и iOS позволяет сдерживать поток фантазии, оставляя больше усилий и времени на активности «со звездочкой» — например, на проработку маркетинговой стратегии или создание крутого питча для инвесторов.
И, да, благодаря такому подходу к созданию кроссплатформенного дизайна в отношениях вашего дизайнера и разработчика с бОльшей вероятностью наступит полная гармония. Почему? Да потому что вся программная часть будет вращаться вокруг «стандартов». Тратить время и нервы на поиски подходящей библиотеки для реализации нестандартного пользовательского интерфейса, скорее всего, не придется.
«Ориентация на платформу» ≠ шаблонный дизайн. Это, в первую очередь, про четкое следование iOS/Android гайдлайнам и хороший пользовательский опыт. Будьте уверены, нормы и правила не помешают вам сделать кроссплатформенный дизайн красивым
2. Универсальный дизайн
При таком подходе нет необходимости адаптировать дизайн под каждую систему. Вместо этого создается один общий вариант интерфейса — для iOS и Android.
На выходе получатся единый интерфейс.
Как, например, у того же Airbnb: кто найдет отличия между iOS и Android-версиями?
Как создается универсальный кроссплатформенный дизайн? Самый простой и понятный способ выглядит так:
- досконально изучаете приложение, дизайн которого вам по душе;
- вдохновляетесь тем, как выглядят user-флоу, UI-элементы (тот же поиск, сайдбар). К примеру, вам нравится Tinder или Apple Music;
- штудируете интерфейс сервиса и забираете все ключевые идеи и фишки;
- адаптируете дизайн под собственные нужды.
Вдохновляться и копировать — это не одно и то же. Убедитесь в том, дизайн, который вы планируете взять за основу, «дружит» с концепцией будущего продукта.
Ошибка, которую часто допускают стартапы на этапе проектирования «универсального» UI/UX — давить на КрЕаТиВ
Речь идет об идеях в духе «А давайте сделаем дизайн в духе неоморфизма, щас так все делают!”. И о тех самых «уникальных интерфейсах» — с неправильно подобранными цветами, нечитабельными шрифтами и «созданной с нуля» навигацией. Есть ли смысл упарываться в запредельно кастомный кроссплатформенный дизайн, пренебрегая его понятностью (и здравым смыслом)? Что мне объяснять, вы и сами знаете ответ.
Какой бы ни была специфика продукта, MVP — это не про уникальный дизайн. Главная задача — спроектировать функциональное решение, которое будет приносить пользу. Чтобы по-быстрому определиться с дизайном, обратите внимание на интерфейсы популярных продуктов и возьмите за основу их дизайн-базу. Фонтанировать идеями и креативить будете потом, после того, как проверите спрос и получите первых пользователей.
3. «Гибридный» дизайн
При таком сценарии вся дизайн-логика остается общей — как если бы вы создавали универсальный дизайн. Разница в том, что функциональные компоненты (например, кнопки или поля для поиска) адаптируются специально под каждую систему.
Гибридный дизайн — это микс из универсального дизайна и дизайна « под платформу»
Одни из приверженцев такого дизайна — команда Facebook.
Создателям удалось выдержать баланс между «адаптацией на платформу» и «кастомным интерфейсом с фокусом на бренд»
Еще один пример кроссплатформенного дизайна, где отдельные элементы интерфейса заточены под стандарты каждой ОС:
Сервис аренды жилья PAD: Вот так выглядит дейтпикер
Чем хорош такой подход? Прежде всего, тем, что шансы уронить пользовательский опыт значительно ниже. Заточка «под стандарты платформ» минимизирует ситуации, когда пользовательские сценарии или определенные элементы управления перестают казаться очевидными. Оформление заказа или прохождение онбординга — будьте уверены, с гибридным дизайном и там, и там не будет затыков.
Как и в случае с универсальным подходом, на выходе получается одна дизайн-версия. Некоторые ошибочно полагают, мол, «Одна не две. Заложу-ка побольше времени, ну чтобы точно нормально сделать». Как бы не так. Одна версия или десять — не закладывайте на весь UI/UX-этап больше 1.5 месяцев.
Основная сложность гибридного подхода в том, что вам необходимо соблюдать границу между «ориентацией на платформу» и «универсальностью». Для этого нужно отыскать все проблемные места (экраны и фичи, где без соблюдения Android/iOS гайдлайнов могут случиться затыки). Это может быть, например, тот же календарь или функция «Выбор времени». Все, что точно не будет вызывать вопросов, можно кастомизировать как душе угодно.
Что в итоге?
Какой подход для создания кроссплатформенного дизайна выбрать? Америку я вам не открою — выбор во многом зависит от задач бизнеса и имеющихся ресурсов. По-быстрому сообразил вот такую штуку, чтобы вы не утонули в долгих раздумьях. На здоровье!
Что сработает конкретно на этапе MVP? Если бы стояла задача топить за один конкретный подход к созданию кроссплатформенного дизайна — скорее всего, это бы был гибридный дизайн. При таком сценарии вам не нужно закладывать недели на проработку каждой кнопки, а на выходе получается максимально интуитивный интерфейс.
P.S. И последнее: если вы делаете MVP, пожалуйста, не ставьте во главу угла креатив, позиционирование бренда и вот это вот все. Опирайтесь на гайдлайны. На этапе валидации бизнес-идеи (а MVP вроде как именно об этом), важно фокусироваться на пользователях и тестировании гипотез, а не на дизайнерских приколюхах.
Всем здоровья и крутых проектов!
