Натив и Кастом. Что это и как сделать верный выбор
В начале карьеры, я часто винил разработчиков в том, что они не могут собрать продукт в точности так, как я этого задумал. Однажды, я нарисовал хитрый календарь. На разработку и тестирование ушло бы недели три, но у нас на весь сценарий была неделя. Мы не обсудили дизайн с разработчиками и я не знал о том, что реализовать мою задумку так сложно. В итоге, календарь в сыром виде оказался на маркетах. Это был провал и сейчас я расскажу избегать таких ошибок.
В чём проблема
Дизайнеры слабо понимают сложность своих решений и сроки разработки. Даже если они понимают примерно, каждый разработчик всё равно оценит по-своему.
Когда дизайнер придумывает, как будет работать его приложение, у него есть выбор: сделать элемент нативным или кастомным. Например, он может взять кнопку как у Эппл, а может придумать свою. Сейчас расскажу как выбрать.
Нативный элемент
Системный элемент, родной для операционной системы. Есть по-умолчанию в Xcode и Android Studio.
✅ Работает быстро, сразу, из коробки.
✅ Разработчик добавит на экран за полчаса.
✅ Работает быстро, сразу, из коробки. Все состяния продуманы.
✅ Привычны людям, сразу ясно как с ними работать
�� Выглядит и ведёт себя так, как его придумали разработчики Эппл или Гугл. Обычно, нативному элементу нельзя добавить поведение или сильно изменить внешний вид.
�� Поддерживается разработчиками операционной системы. С выходом новой версии, нужно просматривать всё приложение не отвалилось ли чего. Обычно разработчики о таком предупреждают.
�� Если глючит, то глючит сразу по всей системе.
Кастомный элемент
Созданный с нуля под нужды проекта.
✅ Полный контроль над поведением и внешними видом. Всё зависит от желаний дизайнера и умений разработчика.
✅ Можно найти готовый элемент в интернете и скинуть разработчику. Работает не всегда, т.к. элемент может быть написан криво.
�� Качество исполнения зависит от проработанности. Если разрабочик не очень и дизайнер плохо продумал элемент, то и работать он тоже будет посредственно.
�� Поддерживается разработчиком продукта. Если он уволится и не оставит документации— будет больно. Скорее всего кастомный элемент перепишут с нуля и круг замкнётся.
�� Люди не всегда сразу понимают как работать с кастомным элементом,
Когда выбирать нативные элементы
Смотрите на сроки, разработчика и цель приложения.
- Сроки поджимают. Разработчик быстрее соберёт сценарий, вы быстрее его проверите. Позже обвесите дизайн кастомными элементами, если понадобится. Сначала сделайте так, выпустите и проверьте. Потом замените на кастом. Сравните метрики.
- У разработчика мало опыта. Лучше сделать простое и рабочее приложение, чем переусложнить и получить кривой продукт.
- У дизайнера мало опыта. Новички быстро растут и уже через месяц дизайнер захочет изменить элемент.
- Приложению важно выглядеть привычно. Такое может быть, если у приложения огромная аудитория и оно должно восприниматься родным Айос или Андроид.
Нативные элементы привычны людям, они видят их по всей системе и знают как они работают. Если клиентам важнее решать свою задачу, то пусть решают привычной среде. Не тратье их время на обучение интерфейсу. Если у вас приложение по платежам ЖКХ — нативные элементы ваш выбор.
Когда выбирать кастомные элементы
- Важно удивить, выделиться. Если у вас очередное приложение курсов валют — выделяйтесь. Не обязательно делать всё приложение кастомным. Достаточно только самых важных экранов.
- Важно сохранить экосистему продукта и делать как на сайте, другом приложении, печатке, брендубуке. Обычно такое встречается у больших экосистем, типа Сбера, Яндекса, Тинькоффа.
- Нужно сэкономить на дизайне и описании требований. Делайте один интерфейс на все платформы без оглядки на платформы
- Для решения задачи нет нативных элементов. Такое встречается довольно часто в сложных интерфейсах, типа выбора детали на схеме или места в самолёте.
Создать можно любой элемент, вопрос только во времени.
Кастомному элементу нужно придумать все состояния: активный, заблокированный, с длинными надписями, короткими, иконками, заливкой, выбранный, не выбранный, маленький, большой, на нажатие, при загрузке. У нативного элемента всё уже продумано. Пример с табами прям как дизайн систему прорисовывают
Советуйтесь с разработчиком до того, как покажете клиенту
Если клиент утвердит ваш дизайн, а его разработка займёт больше времени, чем вы договорились — придётся пересогласовывать сроки или дизайн.
Неважно какого уровня разработчик — советуйтесь с ним. Разработчик оценит сколько времени ему нужно на вашу задумку. Может работа займёт час, а может неделю.
Советуйтесь с разработчиком каждый раз. То, что ещё неделю назад было кастомом и собиралось за три дня, сегодня может оказаться нативом и собираться за минуту.
Тонкости
Не всё, что есть в родных приложениях Эппл и Гугл можно назвать нативом. Советуйтесь с разработчиком о сложности элемента, даже, если вы нашли его в родных приложениях Айфона или Андроида.
Что дальше
Чаще общайтесь с разработчиками. Не стесняйтесь спрашивать что они думают о дизайне и где у них возникают трудности. Часто разработчик может предложить более простое в разработке решение, которое окажется ещё и более удачным с точки зрения UX. Не бойтесь делиться своей ответственностью за пользовательский опыт.
Что почитать, чтобы лучше понимать разработчиков
32 отличия дизайна мобильного приложения под iOS и Android Артур Абраров из Redmadrobot
Рассказывает как перенести дизайн с одной платформы на другую, обойдясь нативными средствами.
Цикл Дизайн данных Павел Шерер
Самое глубокое раскрытие темы «что нужно знать дизайнеру о разработке» которое я смог найти. Павел рассказывает о том, как устроены сервисы технически, что такое АПИ, сервер, запрос, как это работает с базой данных, как понять что храним локально, а что на сервере и как это всё влияет на дизайн. Эти знания помогут дизайнеру продумывать решения на новом уровне, обязательно прочтите.
Вычислительная Фотография Вастрик
Статья о том, как хитро устроена фотография в наших смартфонах. Наглядно показывает, что самое сложное — придумать хитроумное решение, а уже потом как его написать. Как только вы поймёте логику принятия таких решений — сами сможете подкидывать идеи программистам.
Что такое нативный дизайн
нативный дизайн
Как создавать нативные мобильные приложения
Приложения являются точками соприкасания многих продуктов и услуг, количество которых возрастает. Каждый год пользователи проводят больше времени за мобильными устройствами, в среднем 2 часа…
Различие в проектировании нативных приложений iOS и Android
Чтобы создать лучший дизайн для нативных приложений, вы должны учитывать различия между платформами iOS и Android. Эти платформы отличаются не только тем, как выглядят приложения; они также различаются по своей структуре. Вы должны помнить об этих различиях, чтобы обеспечить с помощью дизайна лучший пользовательский опыт. Нативные мобильные приложения для iOS и Android имеют специальные функции, зависящие от операционной системы. Руководства от Apple и Google рекомендуют по возможности использовать стандартные для платформы средства навигации: элементы управления страницами, панели вкладок, сегментированные элементы управления, представления таблиц, коллекций и разделенные представления. Обычно пользователи знакомы с тем, как эти элементы управления работают на каждой платформе, поэтому, если вы используете стандартные элементы управления, ваши пользователи будут интуитивно знать, как пользоваться вашим приложением. Мы фокусируемся на основных различиях между паттернами дизайна взаимодействия на iOS и Android, чтобы выяснить, почему внешний вид приложений отличается на каждой платформе. Мы также предоставляем шаблоны дизайна приложений и примеры мобильных приложений, которые помогут вам визуализировать то, о чем мы говорим.
Различия в паттернах навигации
Перемещение между экранами является частым действием в мобильных приложениях. Очень важно учитывать, что iOS и Android имеют разные рекомендации по разработке приложений, когда речь заходит о шаблонах навигации. В нижней части Android-устройств есть универсальная панель навигации. Использование кнопки «Назад» на панели навигации – простой способ вернуться на предыдущий экран или этап, и он работает практически во всех приложениях Android. Глобальная панель навигации (Android) С другой стороны, у Apple совсем другой подход к дизайну. Глобальная навигационная панель отсутствует, поэтому в приложениях с нативным дизайном iOS мы не можем вернуться назад с помощью глобальной кнопки «Назад». Это влияет на дизайн мобильных приложений iOS. Внутренние экраны должны иметь собственную навигационную панель с кнопкой «Назад» в верхнем левом углу. Кнопка «Назад» (iOS) Также в приложениях для перехода на предыдущий экран Apple использует жест свайпа слева-направо. Этот жест работает практически во всех приложениях. Свайп слева-направо – возврат назад (iOS) Разница между iOS и Android в этом случае заключается в том, что в приложениях на устройствах iOS жест свайпа слева-направо вернет вас на предыдущий экран. Тот же жест на устройствах Android переключит вкладки. Но в отличие от iOS, на Android-устройствах есть нижняя панель навигации с кнопкой «Назад», которая вернет вас на предыдущий экран. Всегда важно помнить об этой разнице между платформами, чтобы поддерживать согласованность с другими мобильными приложениями. Свайп слева-направо переключение между вкладками (Android)
Отличия навигационных паттернов приложений для iOS и Android
В Material Design Guidelines есть несколько различных вариантов навигации. Один известный навигационный шаблон, используемый в приложениях Android, представляет собой комбинацию панель навигации (navigation drawer) и вкладок. Панель навигации – это меню, которое перемещается слева или справа, при нажатии иконки гамбургер-меню. Вкладки расположены прямо под заголовком экрана и обеспечивают организацию контента на высоком уровне, позволяя пользователю переключаться между представлениями, наборами данных и функциональными аспектами приложения. Слева – ящик навигационного меню; справа – вкладки (Material Design) В Material Design также есть компонент, называемый нижней навигацией. Этот компонент важен для нативных приложений Material Design. Панели нижней навигации позволяют одним нажатием легко переключаться между видами верхнего уровня. Material Design Guidelines не рекомендует использовать нижнюю навигацию и вкладки одновременно, поскольку это может вызвать путаницу при навигации. Нижняя навигация (Material Design) В Human Interface Guidelines от Apple нет стандартного навигационного элемента управления, аналогичного панели навигации. Вместо этого Apple рекомендует добавить глобальную навигацию в панель вкладок. Панель вкладок отображается в нижней части экрана приложения и обеспечивает возможность быстрого переключения между основными разделами приложения. Обычно панель вкладок содержит не более пяти пунктов назначения. Как мы видим, этот компонент похож на нижнюю навигацию в Material Design, но чаще используется в приложениях iOS. Вверху слева – сегментированный элемент управления iOS; Внизу справа – панель вкладок iOS (HIG) Хотя есть элементы, выполняющие аналогичные функции в обеих операционных системах (вкладки и сегментированный элемент управления, панель нижней навигации и панель вкладок), навигация по-прежнему остается одним из основных различий между iOS и Android. Существуют как объективные различия, такие как глобальная панель навигации в Android и ее отсутствие в iOS, так и различия в концепции этих двух систем. Apple считает, что основные элементы навигации должны быть на переднем плане и, что гамбургер-меню следует использовать только для хранения функций, которые не являются повседневными задачами, выполняемыми пользователем. С другой стороны, в приложениях для Android обычной практикой является скрыть первичную навигацию в гамбургер-меню.
Собственный вид стандартных элементов управления требует дополнительных усилий и времени, и не знаком пользователям
Если вы хотите, чтобы каждый элемент вашего приложения выглядел одинаково на разных платформах, вам понадобятся дополнительные усилия на разработку для создания лучшего дизайна мобильного приложения. Наиболее сложные случаи использования включают в себя элементы управления по умолчанию, такие как радиокнопки, флажки, тумблеры и т. д. Для них требуется реализация собственного представления, чтобы отображать на Android элементы управления iOS или элементы управления Android на iOS. Каждая платформа имеет свои уникальные взаимодействия. Хороший дизайн – это дизайн, который учитывает привычки пользователей в каждой операционной системе. Очень важно учитывать различия между платформами при разработке мобильного приложения для iOS и Android, так вы будете разрабатывать приложения, соответствующие ожиданиям пользователей. Одним из примеров элемента, который обычно разрабатывается по-разному на двух платформах, является элемент выбора дат. Пользователи Android не знакомы с селектором даты в стиле игрового автомата, который распространен в iOS. Использование этого стиля для выбора даты в Android потребует пользовательских представлений, которые могут усложняться, увеличивая сложность и продолжительность разработки и делая внешний вид вашего приложения чуждым платформе Android. Слева – стандартные элементы управления iOS; справа – стандартные элементы управления Android Слева стандартные элементы выбора iOS; справа – стандартные элементы выбора Android
Стили кнопок в iOS и Android
В Material Design Guidelines есть два стиля кнопок – плоские и выпуклые. Эти кнопки используются в различных ситуациях. Текст на кнопках Material Design обычно имеет верхний регистр. Иногда мы находим текст на кнопках в верхнем регистре и в нативных приложениях iOS, но чаще всего это заголовок. Слева – стандартные кнопки Material Design; справа – стандартные кнопки HIG Также есть еще один тип кнопок – floating action buttons на Android и кнопки призыва к действию на iOS. Floating action button представляет основное действие в приложении. Например, кнопка «Написать» в почтовом приложении или кнопка написания сообщения в приложении социальной сети могут быть floating action buttons. Аналогичным дизайном для основного действия в приложениях iOS является кнопка призыва к действию, которая расположена в центре панели вкладок. Слева – стандартная floating action button в iOS; справа – стандартная кнопка призыва к действию в Android
Различия между нативным слоем bottom sheets в Android и слоем action sheets в iOS
В Android есть два типа нижних слоев (bottom sheets): модальные нижние листы и постоянные нижние листы. Модальные нижние слои имеют два типа контента: модальные нижние слои с различными действиями и список приложений, который появляется после того, как пользователь нажимает иконку «Поделиться». Мы можем найти аналогичные типы контента в листах действий (action sheets) iOS и (activity views). Но эти компоненты отличаются от нижних слоев Android. Слева – стандартные нижние листы Material Design; справа –листы активности в приложении iOS
Различия в сенсорных целях и сетках
iOS и Android имеют несколько иные рекомендации для сенсорных целей (touch targets) 44px @1x для iOS и 48dp / 48px @1x для Android. Material Design Guidelines также предлагает согласовывать все элементы интерфейса с квадратной базовой сеткой 8dp.
Различия в типографике
San Francisco – системный шрифт в iOS. Roboto – стандартный шрифт в Android. Noto – стандартный шрифт для всех языков в Chrome и Android, которые не поддерживаются Roboto. Вам нужно будет обратить пристальное внимание на типографику и макеты каждой платформы. Слева – типографика Material Design; Справа – типографика HIG
Микровзаимодействия
Когда дело доходит до дизайна, обычно для пользователей первое впечатление является последним. Вот почему так важно с самого начала привлечь внимание пользователей. Во время проектирования и разработки приложений при помощи микровзаимодействий и анимаций мы можем создать для пользователей действительно увлекательный опыт. Давайте определим основные правила и рекомендации относительно взаимодействий и движений для обеих платформ и рассмотрим подробные примеры. Фокус и важность. Взаимодействия фокусируют внимание пользователя на том, что действительно важно в приложении, поэтому необходимо использовать их только тогда, когда это действительно необходимо. Обе платформы препятствуют чрезмерной анимации, поскольку она отвлекает и напрягает пользователей. Согласованность и иерархия. Очень важно помнить, что взаимодействие помогает пользователям ориентироваться в приложении, показывая, как элементы связаны друг с другом. Знакомые, плавные и ненавязчивые переходы с одного экрана на другой увлекают пользователей. Движение указывает, как выполнять действия и предлагает полезные подсказки. Хотя основные рекомендации по использованию микро-анимаций в Material Design Guidelines и Human Interface Guidelines весьма схожи, существуют определенные различия, которые четко определены. Пользователи привыкли к этим, специфичным для каждой платформы, переходам и воспринимают их как абсолютно естественные. Вот почему важно уделять особое внимание знакомым взаимодействиям, которые улучшат пользовательский опыт и выглядят естественно на каждой платформе.
iOS
Пользователи iOS привыкли к тонким анимациям, используемым в iOS, например, к плавным переходам, плавным изменениям в ориентации устройства и скроллинге на основе физики. Пользователи iOS могут чувствовать себя дезориентированными, когда движения не имеют смысла или, кажется, не соответствуют законам физики. Например, если пользователь открывает представление, сместив его вниз с верхней части экрана, он ожидает, что сможет закрыть представление, сдвинув его назад. HIG настоятельно рекомендует делать настраиваемые переходы сопоставимыми со встроенными анимациями, если вы не создаете иммерсивный опыт (например, игра).
Android
В соответствии с Material Design Guidelines, в процессе перехода преобразуемые элементы интерфейса классифицируются как исходящие (outgoing), входящие (incoming) или постоянные (permanent). Категория, к которой относится элемент, влияет на то, как он преобразуется. Анимация направляет внимание пользователя. Когда интерфейс меняет внешний вид, движение обеспечивает непрерывность между размещением и внешним видом элементов до и после перехода. Переходы навигации являются важным элементом общего взаимодействия с интерфейсом. Они помогают пользователям ориентироваться, выражая иерархию приложения. Например, когда элемент раскрывается, чтобы заполнить весь экран, действие раскрытия выражает, что новый экран является дочерним элементом. Экран, из которого он раскрывается, является его родительским элементом. Пример перехода от родительского экрана к дочернему (Material Design Guidelines) С родительского экрана встроенный дочерний элемент при касании поднимается и раскрывается. Переход задает фокус на дочернем экране, одновременно укрепляя отношения между дочерним и родительским элементами. Экраны, имеющие общий родительский экран (например, фотографии в альбоме, разделы в профиле), перемещаются в унисон, чтобы укрепить свою взаимосвязь. Дочерний экран скользит в одну сторону, в то время, как его родственный экран смещается в противоположном направлении. Вкладки находятся на одном уровне и перемещаются вместе по горизонтали На верхнем уровне приложения пункты назначения часто группируются в основные задачи (которые могут быть не связанными друг с другом). Эти переходы экранов заменяются путем изменения таких значений, как непрозрачность и масштаб.
Выводы
Конечно, есть исключения: некоторые приложения iOS следуют рекомендациям Material Design Guidelines (например, Gmail), а некоторые приложения для Android следуют рекомендациям Human Interface Guidelines (например, Instagram). Слева – Gmail для iOS; Справа – Gmail для Android Слева – Instagram для iOS; Справа – Instagram для Android Но одно очевидно: гораздо быстрее разработать мобильное приложение с использованием нативных компонентов для обеих операционных систем. Таким образом, лучше потратить время на дизайн, а не делать один макет приложения, который будет совмещать компоненты Human Interface Guidelines и Material Design, а затем потратить много времени на его разработку из-за нестандартных элементов. SteelKiwi – компания по разработке программного обеспечения и дизайна приложений. Если вы хотите узнать, как создать собственное приложение, свяжитесь с нами! Мы следуем лучшим практикам дизайна Android и придерживаемся Human Interface Guidelines от Apple. Хотите увидеть примеры дизайна приложений, в которых мы использовали нативные элементы, а также пользовательские интерфейсы с мощным стилем? Посетите наши страницы на Dribbble и Behance, чтобы лучше понять, на что мы способны. Перевод статьи SteelKiwi Inc.
Что такое нативное мобильное приложение? Отличие натива от гибрида
Мобильные приложения заполонили наше сознание, став неотъемлемой частью повседневной жизни. Разработка мобильных приложений актуальна и эффективна как для уже устоявшегося бренда с позитивной репутацией, так и для молодых стартапов. Чтобы извлечь максимальную выгоду, необходимо правильно выбрать тип mobile-решения.
Безусловно, такие решения имеют свои плюсы и минусы, но хватит слов, давайте подробнее разберемся в тенденциях современного диджитал пространства, и узнаем, что такое нативное мобильное приложение.
Что такое нативное приложение?
Создается под конкретную платформу и загружается из магазинов Play Маркет или AppStore, используя память ОС устройства. Преимуществом такого типа мобайла является оптимизация под одну операционную систему, поэтому продукты работают корректно и достаточно быстро.
Разработка нативных приложений под ios или андроид происходит с использованиям “родных” для этих платформ языков написание, поэтому органично вписываются в любые девайсы. После установки на гаджет, сервис имеет доступ к большинству сервисов телефона: камере, микрофону, календарю, фото- и видеофайлам, а также другим службам. После установки пользователь может включить push-уведомления, за счет доступа к системе оповещений устройства.
Плюсы и минусы нативных приложений
Разработка нативных приложений имеет свои особенности и много достоинств. Предлагаем рассмотреть в чем исключительность, а какие недостатки натива. Итак — плюсы:
- производительность и высокая скорость работы
- обеспечивают бесперебойную работу игр
- посильны сложные математические вычисления
- устанавливаются только из официальных маркетов
- нативное мобильное приложение поддерживается конкретной операционной системой
- могут работать, как при наличии интернета, так и в оффлайн-режиме
- использует аппаратное и программное обеспечение гаджета
- привлекательный, расширенный интерфейс
Минусы тоже есть:
- охват лишь одной платформы
- создание трудозатратно и занимает много времени
- нативные приложения для android или IOS стоят недешево
Чем натив отличается от гибрида?
Помимо нэйтива, существует еще один тип проектирования. Он не такой ресурсозатратный и более универсальный, однако имеет определенные недостатки. Речь идет о таком альтернативном кроссплатформенном решении, как гибридные мобильные приложения, которые создаются сразу для обеих платформ.
7 фактов о гибридных mobile-продуктах:
- пишутся сразу под две операционные системы
- загружаются одновременно в маркеты AppStore и Google Play
- мультифункциональны и работоспособны
- один способ написания — не требуется несколько языков
- высокая скорость проектирования и визуальная схожесть продукта с нативом
- некорректная работа при отсутствии подключения к интернету
- минимализм в отношении визуализации и анимации — не подходит для игр
При этом, нативные приложения, разработка которых необходима отдельно под IOS и Андроид, стоят гораздо дороже, чем цена единого кроссплатформенного решения.
Желая внедрить мобайл в свой бизнес, стоит учитывать, что приложения-гибриды имеют среднюю скорость работы на фоне натива. Но, если необходимо значительно сэкономить бюджет и оперативно спроектировать два готовых бизнес-решения, стоит сделать выбор в сторону hybrid. Яркий пример успешного кроссплатформенного решения — Instagram, о популярности которого говорить не приходится.
Окончательный выбор можно сделать, понимая какие цели вы ставите и каких результатов ждете. Но, если хотите быть на гребне волны и стремитесь к мировым трендам — не упустите возможность воспользоваться преимуществами мобайла.
Поделись своей эмоцией после прочтения статьи
Отлично!
Хорошо!
Любопытно..
Не очень
О чем это?
Спасибо, ваша оценка важна для нас
Поделитесь вашим email Спасибо за подписку!
Подпишитесь на нашу рассылку, чтобы получать интересные материалы и инсайты из жизни компании Мы будем готовить для вас только самые актуальные и интересные материалы ��