Подходы к многоплатформенная UI Design адаптации: A Case Study

Там нет победителя в битве между МО и Android, и мы все это знаем.

Если продукт преуспевает на одной платформе, он, несомненно, будет портирована на другой.Иногда разработчики приложений даже не потрудились ждать и выпустить приложения для платформ одновременно обоих.Для дизайнеров это означает только одно — им придется адаптировать пользовательский интерфейс приложения и, UX на другой platform обеспечивая последовательную язык дизайна всей продукции .

Есть три различных сценария интерфейса мультиплатформенной адаптации: подпорные бренда консистенцию;совместив с конвенциями, характерных для платформы;и ищет баланс между ними.Мы решили проанализировать эти три подхода, глядя на самых популярных приложений там, так что вы получите некоторое представление, какой метод лучше всего подходит для вас .

Бренд-ориентированный подход Link

Придерживаться бренда и игнорируя “родителей правила» самый быстрый, самый простой и наиболее экономически эффективный подход, но только по отношению к дизайна пользовательского интерфейса, а не программного обеспечения.Пользовательский интерфейс является довольно сложным в реализации, так усилий в области развития будет стоить вам больше по сравнению с ценой, строящих стандартных компонентов .

Кроме того, выбирая марку в качестве приоритета в дизайне пользовательского интерфейса может быть довольно опасный подход, чтобы взять.Я называю такие приложения “подростков”, потому что они не чувствуют себя как дома, не следовать правилам, и может быть очень раздражает иногда.Они думают, что они разные, но на самом деле they’ повторно то же самое, как и все остальное в их возрасте.Есть исключения, хотя .

VSCO Кэм Link

Первый VSCO Cam приложение в Visual Supply Co. для прошивкой вышел в 2012 году Год спустя, популярный продукт для редактирования фотографий была портирована на Android.Android, версия приложения почти полностью скопированы интерфейс версии IOS,.Любопытно, что ни версия приложения VSCO Cam коррелирует с специфических стандартов платформы она предназначена для .

VSCO Cam iOS and Android 1
VSCO Кэм IOS (слева) и Android.( Просмотр большой version __31 | | 2__8 )

Руководящие принципы Падение платформы в пользу идентичности бренда хорошо оправдано в этом случае.Основатели __38 В VSCO Кама | сочтут творчество какмассово important 3 , которая объясняет свое видение продукта они строят.Они разработали приложение, чтобы быть частью бренда и бренд, чтобы быть частью художественного сообщества, поэтому творческая целостность бренда является более важным для VSCO Cam .

VSCO Cam 4
VSCO Кэм.( Просмотр большой version 5 )

Instagram Link

Как приложение VSCO Cam, Instagram был запущен в App Store образом, прежде чем он стал доступен для Android.IPhone приложение, которое сильно соответствовал принципов IOS испытали огромный успех;в этом случае, типичный пользовательский интерфейс для Apple, преданных стал отличительной чертой Instagram в.Это объясняет, почему создатели Instagram в не тратить много времени на создание уникального пользовательского интерфейса для Android.Даже если в целом эстетика приложение в не соответствовать тому, что пользователи Android ожидают, Instagram получил более 1 миллиона downloads 6 от Google Play на день один .

Instagram iOS and Android 7
Instagram IOS (слева) и Android.( Просмотр большой version __46 | 8 )

Текущие версии IOS и Android на Instagram выглядят как близнецы, но есть еще несколько элементов, которые отличают их друг от друга.Например, строка поиска выглядит родным для обеих платформ.Интерфейс камеры в последней версии Android также немного отличается от версии IOS.Более того, логотип Instagram находится в центре навигационной панели iPhone приложение, но был перенесен в левой части панели инструментов в Android версии .

Instagram search interface iOS and Android 9
Поиск Instagram интерфейс IOS (слева) и Android.( Просмотр большой version 10 )

Приложение Instagram для Android не соответствует стандартам дизайна платформа, но она по-прежнему чувствует себя удобно пользователи .

Instagram video interface on iOS (left) and Android 11
Instagram видео интерфейс прошивкой (слева) и Android.( Просмотр большой version __28 | 12 )

Проволока Link

Сотрудничество основано и поддерживается создателей Skype, Провод другое приложение обмена сообщениями.Это doesn’ т сильно отличаются от своих коллег, за исключением в одном — имеет поразительно красивая пользовательский интерфейс, который никогда не сможет оставить впечатление, особенно на брюки в обтяжку, которые используют его.Дизайнеры Wire использовали нестандартные жест приводом решения, основная цель которых, чтобы скрыть, как много вещей из глаз пользователя как можно скорее.

Мы строим элегантный и полезный инструмент для общения по всей модальности — текст, голос, видео и СМИ.Медиа в центре опыта Wire, таким образом, мы выбрали, чтобы уменьшить хром и удалите ненужную в пользу содержания.Мы также приложили много усилий в типографии и читаемости .

— Priidu Zilmer, Wire’ S глава design

Требуется совсем немного догадок для пользователя, пытающегося перейти через приложение в первый раз.Но, с другой стороны, провода использует много микро-взаимодействиям, которые делают пользовательский опыт более увлекательным и engaging.Упрощенная поиск контактов, приятный цвет палитры, возможность выбрать фоновое изображение и цвет способствуют уникальности провода в мире, где онлайн-общения правит Телеграмма, WhatsApp, Viber, и куча других типичных вида сообщенийприложения .

Wire iOS and Android 13
Проволока IOS (слева) и Android.( Просмотр большой version 14 )

Мы инвестируем много в дизайне, и мы не могли сделать это три принципиально различных способа (для Android, IOS, рабочий стол / веб), особенно в конвенциях платформы сами часто движущихся целей.Получение слишком близко к ним означает, что вы можете внезапно выходят из синхронизации — так же, как когда IOS 7 и Android-L поставляется .

В то же время, мы знаем, что риск не после конвенций знакомые платформы.Таким образом, мы постоянно работаем, чтобы найти правильный баланс путем перебора и регулировки, так что наш проект может быть достаточно простой, чтобы перевести также через платформы .

— Priidu Zilmer, Wire’ S глава design

Интерфейсы ввода-вывода и Android провода приложение абсолютно идентичны, в том числе проектирование и иконок UX.Проволока приложения не хватает каких-либо ссылок на оригинальные принципов (для размера интерактивными элементами, за исключением).Это приложение является еще одним примером дизайна пользовательского интерфейса уделяется больший вес, чем требования платформы.

По Zilmer, в Wire’ ы дизайн команда не чувствую, что повышение, как пользователи подключаются к и поделиться с людьми в их жизни может быть сделано пребывания в чисто конвенций .

Wire 15
Проволока IOS (слева) и Android.( Просмотр большой version __29 | 16 )

VSCO Кэм, Instagram и провода решил сосредоточиться на бренд в дизайне интерфейса.Но значит ли это, что меньше мобильного стартап, который следует по их стопам может стать столь же успешным?Есть несколько ситуаций, где я считаю, после бренда-ориентированный подход может быть выигрышной стратегией .

При Должен ли я Следуйте бренд-ориентированного подхода? Link

Тот же пользователь заходит на ваш продукт из нескольких каналов (рабочий стол, Ipad, iPhone, Android) Link

Часто бренды, которые используютнесколько каналов для взаимодействия с клиентами следовать бренда-ориентированный подход.Тем не менее, это только разумно, если тот же самый пользователь доступ к продукт от различных платформ и типов устройств (Ipad, Android телефон, веб-).Например, тот же пользователь iBroadcast 17 , музыкальный сервис, обращается к нему с IOS и Android устройств, даже рабочий стол и.App’ S версии похожи везде, потому что высокий приоритет для iBroadcast создает плавный переход от одной платформы к другой, так что пользователь не чувствую никакой разницы .

Наша служба есть люди, прыгающие между веб-сайт, приложение IOS, Android и приложения.Мы хотим, чтобы сделать переход как можно более последовательными, так это просто для наших пользователей .

— Род Коллен, соучредитель iBroadcast

The iBroadcast app for iOS and Android 18
Приложение iBroadcast для прошивкой (слева) и Android.( Просмотр большой version __22 | 19 )

В случае ваше приложение падает под это описание, даже если it’ са мультиплатформенный продукт, вы можете подумать дважды, прежде чем принимать бренда-ориентированный подход.Например, Facebook (который we’ будете рассмотрим чуть позже) следует смешанный подход к мультиплатформенной адаптации дизайна пользовательского интерфейса.Дело в том, что Facebook’ пользователи с, как правило, взаимодействуют с социальной сети, используя тот или иной платформы (IOS или Android), но не оба из них .

Компонентов пользовательского интерфейса предоставляют интуитивно понятные пользовательские взаимодействия, и выделяющийся в то же время Link

Одно из исследований study 20 предполагает четыре компонента интуитивного взаимодействия: шестое чувство, verbalizability, легкости, и волшебный опыт.Сочетание этих компонентов позволяет дизайнерам создавать бесшовные опыт пользователей, независимо от следовать ли они platform’ руководящие принципы с или нет.В конце концов, некоторые пользовательские компоненты могут обеспечить превосходную презентационную или интерактивный опыт, чем платформыСтандарты .

It’ S Также стоит отметить, что различия между платформами может быть причиной, почему приложение может чувствовать себя удобно использовать на одной платформе, но неудобно на другом .

Создатели HowAboutWe, в приложение знакомств, argue 21 , что единственный способ по-настоящему обеспечить стиль и последовательность макета через различные Android версии OS, производителей, размеров экрана и плотностей, чтобы использовать пользовательскиеUI решения.Родные компоненты пользовательского интерфейса имеют некоторые ограничения, но вы всегда можете новшества, чтобы улучшить пользовательский опыт с вашим продуктом .

Например, Android-приложение бюджет управления, Receipt 22 , имеет довольно необычные раскрывающиеся анимации, игнорирующие platform’ S руководящие принципы, но умудряются заниматься пользователи .

Я не был доволен тем, как руководящие принципы предложил реализации определенных функций и думал, что я мог придумать лучшего решения.

Вообще, я только проигнорировал рекомендации, когда я думал, что явное преимущество делать вещи мой путь, таких, как предоставление лучшую обратную связь с пользователем, удаляя ненужные шаги или предотвращения сбоев рабочих процессов.Замена модальные всплывающие окна или ненужные экраны с встроенных элементов являются большой частью этого .

— Богдан Mihaiciuc, основатель Receipt

Если уникальных и красивых решений UI в опыте пользователя приложение затруднит, они не делают хорошее первое впечатление на пользователей и привлечь их в продукт.Одна из причин, почему пользователи чувствуют влечение к Мой День обратного отсчета app 23 является уникальным дизайном интерфейса, идентичны на обеих платформах .

Отличный дизайн пользовательского интерфейса в Citymapper __36 | 24 делает приложение выделиться на всех платформах, в том числе сети .

Для нас это всегда было о балансе.Чувствуя знакомый в поведении нашего интерфейса, но и делает четкий и уникальный о том, кто мы такие, как бренд .

Я думаю, что значение уникального языка дизайна часто underestimated… Вы имеете в виду Citymapper?Да “ Зеленый одним .” Это само по себе является чрезвычайно ценным .

Иногда дизайнеры могут быть слишком драгоценным о пиксель-совершенства и “ | correctness__57 их конструкций.Жизнь хаотично, и поэтому строительство продукт.Так зачем скрывать тот факт?Мы в этом вместе — люди, которые строят продукт, и люди, которые используют его .

— Гилберт Wedam, ведущий дизайн в Citymapper

При адаптации пользовательского интерфейса на другую платформу, вы должны поставить себя впользователя обувь независимо от используемого подхода.Возможность создания трения пользовательский опыт, сохраняя бренд согласованности является одним из достоинств великого дизайнера .

Подход платформы ориентированного Link

Вопреки марки-ориентированного подхода, после конкретных платформ стандартов требует значительно больше времени и денег (если мы говорим о дизайне пользовательского интерфейса исключительно).Когда вы переносите дизайн, много UX и UI элементы должны быть воссозданы с нуля, чтобы выровнять с соглашениями целевой платформы .

В этом случае фокус смещается от бренда идентичности знакомого пользовательского опыта, так как пользователи привыкли к конвенциям платформы.Они имеют интуитивно понятный понимание правил проектирования вокруг их платформы, которые вы можете использовать в своих интересах — которая именно то, что телеграмма и WhatsApp сделал очень хорошо .

Телеграмма Link

Телеграмма является популярным сообщениями приложение соучредителем Павел Дуров, человеком позади крупнейшего российского социальной сети Вконтакте,.Телеграмма имеет минималистский стиль дизайна и поддерживает безопасный протокол шифрования для частного общения, который дает приложение большой конкурентное преимущество .

Телеграмма запущен как прошивкой и Android в то же время, и решили сосредоточиться на функциональности, а не внешностью.Таким образом, его дизайнеры решили придерживаться платформы-ориентированного подхода .

ОС IOS и Android версии одного и того же продукта такие же разные, как типичные прошивкой и приложения для Android может быть.Версия IOS полностью соответствует руководящим яблоко, и выглядит в точности как приложение предназначена для прошивкой 7/8: справа панели навигации есть значок для ввода нового сообщения и слева есть кнопка для редактирования;в нижней части экрана находится панель вкладок с разделами, и на вершине вы можете найти имя текущего раздела .

Telegram for iOS and Android 25
Телеграмма для прошивкой (слева) и Android.( Просмотр большой version __30 | | 26__3 )

Android, версия Телеграмма соответствует руководящим Материал Дизайн Google.Он имеет меню гамбургер для навигации по разделам приложения, в простой кнопку поиска в правом верхнем углу, и плавающий кнопку — сердце и душу материальной конструкции .

Telegram 27
Список Телеграмма контакты в ИО (слева) и Android.( Просмотр большой version 28 )

Приложения используют платформы стандарт управления и элементы UX взаимодействия.Бьюсь об заклад, дизайнеры телеграмму были руководствоваться самых общих принципов юзабилити при создании приложения .

Telegram 2 29
Настройки Телеграмма интерфейс в ИО (слева) и Android.( Просмотр большой version __29 | 30 )

WhatsApp Link

Мы собираемся придерживаться темы приложения обмена сообщениями на некоторое время.Другой кандидат мы будем смотреть на это так называемый евангелист __63 сообщениями WhatsApp |, в настоящее время имущество Facebook.Приложение IOS был выпущен еще в 2009 году, а вскоре после версиями для BlackBerry и Symbian.Приложение WhatsApp для Android появятся на рынке только в 2012 году выглядел в точности как приложение пользователи Android будет признавать и любви.

С WhatsApp доступна практически на любой платформе, это естественно, что он прилипает к методу платформы-ориентированным.Версии IOS и Android на WhatsApp выглядеть совершенно отличаются друг от друга.Его дизайнеры сделали большую работу по мультиплатформенной adaptation.Они изменили все от УБ на сообщение взглядом на иконах в расположении элементов и пунктов меню .

WhatsApp for iOS and Android 31
WhatsApp для прошивкой (слева) и Android.( Просмотр большой version __56 | 32 )

В настоящее время версия iPhone приложение соответствует стандартам IOS 8.Версия для Android?Вы уже догадались это … получил материал Design Visual обновления впоследнее изменение .

Komoot Link

Komoot является выхода на приложение для туристов и велосипедистов, который принадлежит к запуске из Германии.Первый app’ S версия пришел к прошивкой в ​​2010 году и год after 33 это сопровождалось Android версии.И старые версии приложения Komoot не имеют ничего общего с текущими продуктами запуске .

komoot for iOS and Android 34
Komoot для прошивкой (слева) и Android.( Просмотр большой version __24 | | 35__3 )

Приложения IOS и Android компиляции на основе руководящих принципов и лучших практик для проектирования приложений для своих платформ.Приложения содержат много контента путешествия включая топографические карты, от поворота к повороту навигации, рекомендации по прохладных местах и ​​многое другое.Вся эта функциональность должна быть легко доступна для пользователя .

Мы решили придерживаться каждой platform’ S правила, так как родной пользовательский интерфейс более предсказуемым и, следовательно, легче для пользователя.Более того, Apple, Google и отдавать предпочтение приложений, которые следуют их требованиям к дизайну пользовательского интерфейса.Это может быть очень важно для продвижения на Apple’ S App Store и Google Play .

— Дмитрий Прудников, интерфейс и UX дизайнер Komoot

Komoot неоднократно признакам в Apple’ S App Store.Он был назван одним из Google Play’ S Лучший приложения 2014 года, и в настоящее время одним из лучших приложений в Google Play в Германии .

Сейчас мы через с этими примерными приложений, давайте обсудим, когда придерживаясь правил платформу может быть наиболее разумный метод .

При Должен ли я следовать подходу платформы-ориентированной? Link

Высоко конкурентной среде рынка предложит вам сделать быстрый запуск и быстро …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.