Основные гайдлайны ios android

iOS vs. Android: полное руководство по дизайну приложений

Если вы разрабатываете одновременно версии приложения для iOS и Android (Material Design), то это руководство станет вашим новым лучшим другом 😎.

Мы рассмотрим наиболее важные различия между iOS и Android для UX/UI-дизайнеров. Если вы уже создали приложение для одной платформы, здесь собрана большая часть того, что нужно знать, чтобы «перевести» его на другую платформу. Но! Это рекомендации, и практически всё, что я скажу, уже где-то опровергнуто, даже самими Apple/Google. Речь пойдет о «переводе» «iOS- мышления» на «Android-мышление» и наоборот.

Вот список тем, о которых мы поговорим. Пропустите его или дотошно изучите. Решение за вами.

1. Обзор основных отличий.
2. Навигация.
3. Элементы управления.
4. Типографика.
5. Другие стандарты платформ.

UI-дизайн для iOS vs. Android: основные различия

Наиболее важные различия, которые UX/UI-дизайнеры должны учитывать при «переводе» приложения с iOS на Android или наоборот:

Прежде чем углубиться в эту тему, давайте ответим на один важный вопрос, это повлияет на всё, о чем пойдет речь далее…

Должен ли я делать приложения для iOS и Android разными?

Если кратко, то — нет.

Apple и Google — очень умные компании с бессчетным количеством пользователей. Они будут совершать UX-ошибки, как и все остальные компании. Но они не совершат вопиющих ошибок, определяя стандартный язык дизайна своих систем. Поэтому, хотя ниже я и представляю два способа реализации (способ iOS и способ Android), ни один из них не является неправильным. Если пользователи могут уверенно перемещаться по вашему приложению и работать с ним, никто не запрещает вам использовать вкладки в iOS или модальные окна в Android.

Эта статья написана в духе обучения «iOS-мышлению» или «Android-мышлению». И если ваша цель — создать такое приложение для обеих платформ, которое будет нативным для каждой из них, то это руководство вам очень поможет.

А теперь давайте углубимся в тему.

Сравнение навигации в iOS и Android

Навигация в верхней части экрана

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

В iOS (опционально) действие вверху слева на странице почти всегда является действием «назад» — последовательно к предыдущему экрану (из «Шага 2» пользователь возвращается к «Шагу 1») или иерархически к родительскому экрану (из «Входящих» пользователь возвращается в «Почтовые ящики»). Кроме того, таким образом могут быть связаны не связанные изначально страницы. Заголовок страницы практически всегда присутствует, и он изначально большого размера, но уменьшается вместе с верхней панелью во время прокрутки (до прокрутки большой заголовок выравнивается по левому краю, во время прокрутки уменьшенный заголовок выравнивается по центру. — Прим. пер.). Единичное действие вверху справа на странице может отображаться как текстовая ссылка, а несколько действий — как несколько значков действия.

В Android заголовок страницы выравнивается по левому краю. Слева от заголовка страницы не должно быть ничего, но вы можете добавить кнопку «Назад» в двух случаях (во втором случае — при желании):
а) если страница является страницей верхнего уровня и в приложении есть кнопка-гамбургер (она появляется слева от заголовка);
б) если эта страница следует непосредственно за другой (не в иерархической последовательности).

Основные «пункты назначения»

Основные «пункты назначения» в приложении реализуются по-разному.

В приложениях для iOS они представлены в виде вкладок/табов в нижней части экрана:

• от 2 до 5 вкладок;
• названия набраны 10-м кеглем;
• вкладки представляют собой основные места назначения.

Многие популярные сторонние приложения для iOS также соответствуют нескольким дополнительным правилам:

1. Любая вкладка, представляющая основное действие приложения (например, добавление новой фотографии в приложении для работы с фотографиями), располагается по центру.

2. Любая вкладка, относящаяся к профилю или настройкам, появляется последней.

3. Поиск находится на втором месте.

С другой стороны, в стандартных приложениях для iOS:

1. Не поощряется размещение действий на вкладках.
2. Вкладки не содержат разделы, относящиеся к профилю или настройкам.
3. Поиск идет последним.

Самое большое отличие приложений для Android состоит в том, что одни и те же основные «пункты назначения» в большей степени распределены по всему интерфейсу — часто между: (a) кнопкой-гамбургером, (b) панелью поиска, (с) вкладками или (d) плавающей кнопкой действия. Мы рассмотрим все эти 4 случая в следующих разделах. Да, и обратите внимание: Android совсем недавно начал использовать навигацию снизу аналогично тому, как это реализовано в приложениях для iOS, — так что в этом у приложений для Android и iOS может не быть никаких существенных различий.

Источники: iOS панель вкладок, Material Design принципы навигации (здесь больше теории).

Вторичная навигация

В iOS навигация, которая не поместилась в меню в нижней части экрана, может размещаться на универсальной вкладке «Еще» (More) или же в верхнем левом или в верхнем правом углу экрана.

В Android вторичная навигация отображается в виде списка в боковом меню, доступном при нажатии на кнопку-гамбургер.

Примечание: хотя Apple не поощряет использование кнопки-гамбургера (или ее использование в приложениях для iOS по умолчанию), во многих сторонних приложениях для iOS она есть, и это просто ваш выбор — использовать ее или нет. Лучшей практикой считается не скрывать важное, потому что очевидное всегда побеждает.

Источник: Material Design Navigation drawer.

Возврат к предыдущему экрану

В iOS можно вернуться к предыдущему экрану четырьмя способами, в зависимости от контекста.

Что такое модальные и полноэкранные окна? Сейчас расскажу.

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

Полноэкранное окно — это медиафайл, например фотография или видео, занимающий весь экран. И в iOS, и в Android его можно закрыть свайпом вниз.

В Android возвратиться к предыдущему экрану намного проще: в версии 10 и более новых версиях достаточно просто свайпнуть от любой стороны экрана к его центру. В версии 9 используйте кнопку «Назад» в нижнем левом углу экрана.

iOS vs. Android: дизайн элементов управления

Главные кнопки призыва к действию

В iOS главная кнопка на экране обычно расположена в верхнем правом углу.

В Android главная кнопка на экране в большинстве случаев расположена в нижнем правом углу в виде FAB (англ. floating action button — плавающая кнопка действия. — Прим. пер.).

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

Иногда в iOS главные кнопки на экране могут располагаться на нижней панели инструментов. Apple утверждает, что она очень сильно отличается от панели вкладок. В Android можно встретить такие кнопки в верхней части экрана.

Поиск

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

Одно из различий между реализацией поиска в iOS и поиском в Android:

• чтобы отменить поиск, нужно нажать Cancel в iOS или ← в Android;
• чтобы очистить поле ввода, нужно нажать на круглую пиктограмму крестика в iOS или на пиктограмму крестика в Android.

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

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

В iOS поиск обычно отображается среди основных вкладок или как одно из действий в верхней навигационной панели.

В Android вы также можете увидеть поиск на верхней панели контекстных действий.

Источники: iOS search bars, Material Design search pattern.

Меню действий

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

В Android же нижнее меню действий появляется только после нажатия на пиктограмму «кебаб-меню» (три точки, которыми в Android обозначаются дополнительные параметры. — Прим. пер.) и обычно — только когда доступно много возможных действий.

У обеих платформ есть стандарты для всплывающих меню.

Если в iOS 13 вы нажимаете на элемент или удерживаете его, то в «контекстном меню» показываются подходящие действия. Когда отображается «контекстное меню», фон размывается.

В Android многие меню появляются прямо на элементе. В новых версиях Android меню закрывает пиктограмму «кебаб-меню».

Элементы управления выбором

На мобильном устройстве стоит отличать выбор из нескольких вариантов от выбора из большого количества вариантов.

В iOS для реализации выбора из нескольких вариантов используйте элемент управления picker («подборщик» — Прим. пер.). Его можно закрепить внизу на экране (как показано выше) или встроить в контент (см. «Выбор даты»).

Для выбора из нескольких вариантов в Android обычно используется раскрывающееся меню (появляется рядом с выбором) или модальное окно со списком вариантов (появляется в центре экрана, фон затемняется).

Для длинных списков вариантов или для случаев, когда возможен множественный выбор, и в iOS, и в Android можно использовать отдельный «экран выбора». Одна из самых больших ошибок начинающих дизайнеров — попытка уместить большой список вариантов с одиночным выбором в модальное окно, не выделяя для этого списка отдельный экран.

Выбор даты

В iOS выбор даты похож на любой другой элемент выбора (picker control), но с отдельными колонками для месяца, даты и (опционально) года.

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

Источники: iOS picker, Android date picker (обратите внимание на различия в спецификации Material Design).

Вкладки

В iOS отсутствуют вкладки в привычном понимании, но есть сегментированные кнопки, которые
позволяют реализовать функциональность вкладок.

На Android вкладки выполнены в привычном виде.

Источники: iOS segmented controls, Material Design tabs.

Отмена действия

В iOS уведомления появляются в центре экрана, но они также могут всплывать в нижней части экрана (на языке iOS это action panels). Деструктивные действия (например, удаление чего-либо) выделены красным цветом.

На Android некоторые уведомления появляются в центре экрана. Однако для уведомлений, которые не требуют действий от пользователя и исчезают через несколько секунд, можно использовать «снек-бары» (snackbars). «Снек-бары» позволяют сообщить пользователю, что его действие было успешным, а также на них можно предложить выполнить одно действие или выбрать одно из двух действий. Это делает их идеальным решением для функции «Отменить». Я бы предпочел давать пользователям возможность отменить ошибочное действие, чем спрашивать их дважды перед каждым важным действием.

Источник: iOS Undo, Material Design snackbars.

IOS vs. Android: типографика

Шрифт по умолчанию

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

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

Системный шрифт Android называется Roboto. Он очень похож на SF, но есть пара отличий — буквы выше и расстояние между ними немного больше. Этот шрифт можно скачать здесь.

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

Источник

Гайдлайны для мобильных приложений: зачем они нужны?

Содержание

Дизайн мобильного приложения – одна из главных составляющих его успеха. Продвижение мобильного приложения методы эффективность этого продвижения напрямую зависят от визуальной привлекательности приложения, удобности его интерфейса. А это как раз таки является задачей дизайнеров. Сделать качественный дизайн, при этом сэкономив время, могут помочь гайдлайны. О том, что такое гайдлайны и как с помощью них можно создать дизайн приложения, мы и расскажем в этой статье.

Что такое гайдлайн?

Любое приложение сделано для быстрого, оперативного решения определенной задачи. Если же это мобильная игра – то управление ею должно быть максимально понятным. Геймер должен сразу же разобраться в том, как играть в эту игру, иначе велик риск, что она незамедлительно будет удалена.

Пользователи привыкли к быстрой работе приложений и интуитивно понятным интерфейсам. Поэтому даже секундные промедления могут стать причиной того, что юзеры начнут покидать ваш проект. Навигация по приложению должна быть предельно ясна. Это залог того, что продвижение игр в google play или App Store пройдет хорошо.

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

Взаимодействие с приложением стало бы гораздо медленнее. А это противоречит самой сути мобильных приложений – скорости и оперативности.

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

Итак, что же такое гайдлайн? Это набор рекомендаций, принципов и правил создания дизайна, разработанный создателями операционной системы или платформы. Например, у android и apple свои отдельные гайдлайны. Именно поэтому интерфейс всех приложений, скажем, на android, имеет множество общих черт.

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

Зачем нужны гайдлайны? Чтобы не изобретать велосипед с нуля. Благодаря им разработка и продвижение приложений займет гораздо меньше времени, сил и денег. Все описанное в гайдлайне уже создано в виде готового элемента в коде. Разработчику вовсе не обязательно делать это во второй раз.

Свои гайдлайны имеют такие крупные и известные магазины приложений, как Google Play и App Store. Создаются гайдлайны и не такими крупными игроками, например, Windows Phone.

Google

Гайдлайн от Google называется Google Material Design. Он был разработан в 2014 году одновременно с выходом новой операционной системы, android 5.0. Сегодня это не просто гайдлайн, а уже полноценная дизайн система, которую вполне возможно применять и на других платформах. С помощью “материального дизайна” от Google можно даже создавать веб-сайты.

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

Инструкция очень наглядна: она сопровождается изображениями и видеороликами. Начинается гайдлайн с общего вступления и рекомендаций, затем начинается подробное объяснение работы различных инструментов.

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

Главный принципы уроков дизайна от Google – это отзывчивость интерфейса, его глубина, а также движение.

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

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

“Материальный дизайн” от Google приводит множество примеров удачного и неудачного оформления интерфейса, показывает как нужно использовать шрифты, какой кегль и отступ выбрать для них. Гайдлайн имеет очень удобную структуру, везде содержатся ссылки на нужные разделы. Работа с этим гайдлайном, используя полезные сервисы продвижения приложений – можно достичь хороших успехов.

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

Apple

Гайдлайн от Apple вышел годом ранее, чем от Google. Он достаточно лаконичный, но тоже довольно проработанный и дает всю необходимую информацию. Каждый инструмент в инструкции описывается небольшим количеством текста. Иллюстративных материалов тоже не так много. Зато освоить этот гайдлайн вполне возможно за короткое время – для этого может хватить даже несколько часов.

Ключевой принцип гайдлайна от Apple – “воздушность” дизайна и его простота. Контент здесь ставится на первое место, а интерфейс уходит на второй план. Гайдлайн учит создавать максимально интерактивный интерфейс. В нем приветствуется анимация изменения состояния элементов. Инструкция содержит рекомендации по градиентным заливкам, размытию окон и т.п.

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

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

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

Windows Phone

Не такие популярные платформы как предыдущие тоже имеют свои гайдлайны. Например, Windows Phone. В отличие от предыдущих гайдлайнов, этот переведен на русский, что является его преимуществом. Что касается содержания, то оно достаточно подробно, к тому же, хорошо структурировано. Однако в нем довольно много лишней информации, другими словами, “воды”. Все-таки гайдлайн – это скорее краткий справочник или инструкция, нежели учебник. Поэтому излишества в нем не очень уместны.

Выводы

Гайдлайны – это некий справочник для разработчика, в котором даются рекомендации по созданию качественного интерфейса. Гайдлайны создают под конкретную платформу – в частности, android и iOS.

Гайдлайн позволяют сделать процесс разработки быстрее и намного дешевле. Эти рекомендации помогают сделать понятный и быстрый интерфейс.

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

Источник