Android VS. iOS: сравните 20 компонентов и шаблонов пользовательского интерфейса (часть 1)

20 различий между Android и iOS, которые вы должны знать при разработке кроссплатформенных приложений

中文 版 Оригинальная версия на китайском языке, опубликованная 10 декабря 2016 г.

Android VS. iOS: сравните 20 компонентов и шаблонов пользовательского интерфейса (часть 2)

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

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

1. Навигационный ящик, вкладки и нижняя навигация VS. Tab Bars

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

Ящик навигации был самым представительным дизайном Android в 2013 году. Элементы категорий на верхнем уровне информационной структуры помещены в ящик, который можно скрыть, чтобы пользовательские интерфейсы выглядели простыми и понятными. Но позже, когда появилось много исследований, раскрывающих проблемы удобства использования навигационной панели, Google начал перемещать важные функции / элементы категорий из ящиков навигации на вкладки в своих приложениях; Youtube был примером этого. В 2016 году в Руководстве по дизайну материалов появилась нижняя навигация, которая показывает, что некоторые компоненты пользовательского интерфейса в Android становятся ближе к iOS.

Эволюция структуры Youtube: важные функции, «Мои подписки», «История» и «Список воспроизведения» помещены в ящик -> Реорганизована структура приложения, ящик удален, а основные функции перемещены во вкладки -> Тенденции добавлены во вкладки.Эволюция структуры Google Фото: основные функции помещены в ящик -> Основные функции перемещены в навигацию по кнопкам -> Кнопка с плавающим действием поиска, которая может прерывать просмотр фотографий, превращается в панель поиска.

Обратите внимание, что между вкладками Android и нижней навигацией все еще есть некоторые различия:

  1. Вкладки могут использоваться на более высоких или более низких уровнях в иерархии информации, но Bottom Navigation используется только на верхнем уровне.
  2. Вкладки поддерживают не только касание, но и жест смахивания для переключения видов, но Bottom Navigation поддерживает только касание.
  3. Количество пунктов в вкладках является гибким. Вы можете поместить 2-5 элементов в фиксированные вкладки или несколько элементов в прокручиваемых вкладках. Но только 3-5 пунктов могут быть помещены в нижнюю навигацию. 2 или более 5 предметов запрещено。

В некоторых приложениях с глубокими и сложными структурами навигации мы можем обнаружить, что навигационная панель, нижняя панель навигации и вкладки появляются одновременно. Я не рекомендую, чтобы навигационная панель и нижняя навигация одновременно использовались в приложениях, потому что трудно определить иерархическую структуру между ними. Уровень навигационного ящика выше или ниже нижнего уровня навигации? Или они находятся на параллельном уровне? Неоднозначные структуры могут запутать пользователей. Google Plus является отрицательным примером для меня. Я действительно запутался после того, как обновил Google Plus, а затем увидел одновременно навигационную панель и нижнюю навигацию.

Анализируя текущие приложения Google, мы можем обнаружить навигационную панель и нижнюю навигацию на параллельном уровне. Возьмем в качестве примера Google Photos и Google Plus, после того как на главном экране отобразился блок навигации, ни один элемент категории не выделен. Android, кажется, помещает категории, такие как учетная запись, настройки и другие дополнительные функции, в ящик и размещает часто используемые / основные функции в нижней части навигации.

Гугл плюс

iOS долгое время использовала нижние «панели вкладок» в качестве навигации по умолчанию и никогда не менялась. Панели вкладок, как и в нижней навигации Android, содержат от 3 до 5 элементов категорий, и вы можете переключать представления категорий, нажимая элементы.

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

2. App Bars (Action Bars) VS. Бары навигации

Панели в верхней области экранов приложений Android называются панелями приложений, a.k.a. панелями действий и панелями инструментов, которые в основном используются для обозначения текущего имени экрана или имен приложений и кнопок действий. Имена располагаются в левой части панелей действий, а справа - кнопки действий, которые обычно не превышают 3. Если действий больше 3, мы бы использовали значок переполнения и поместили менее важные действия в меню переполнения.

И Android, и iOS имеют свои собственные стили иконок. Но iOS обычно помещает строку, знак «назад» или название предыдущей страницы рядом со значком «Назад», что позволяет пользователям точно знать, куда они вернутся.

Несколько общих панелей приложений и панелей навигации

3. Панели инструментов

Кнопки действий можно размещать не только на панелях действий / панелях навигации, но и на нижних «панелях инструментов» как на Android, так и на iOS.

Хотя нижние панели инструментов не упоминаются в Руководстве по проектированию материалов (они обозначают панели инструментов только как панели приложений), мы все же можем обнаружить, что нижние панели инструментов используются в Google Keep и Google Photos.

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

4. Вкладки В.С. Сегментированные элементы управления

Страницы на вторичном или более низком уровне иерархии могут использовать «вкладки» в Android и «сегментированные элементы управления» в приложениях iOS.

И вкладки Android, и сегментированные элементы управления iOS могут быть размещены в позиции панели действий / панели навигации.

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

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

Что касается количества элементов на вкладках Android, в фиксированной панели вкладок это будет 2–5. Прокручиваемая панель вкладок может использоваться, когда есть длинные строки или более 5 элементов. Сегментированный элемент управления должен иметь пять или меньше сегментов на iPhone, чтобы обеспечить достаточно места для легкого нажатия.

5. Кнопки

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

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

Хотя в Руководстве по дизайну материалов определены только визуальные стили плоских и выпуклых кнопок, в Google Play также можно найти призрачные кнопки, которые представляют собой плоские фигуры без заливки и простого контура и похожие на выпуклые кнопки без теней. Призрачные кнопки можно сравнить с обычной кнопкой iOS; поднятые кнопки, как кнопки для нажатой кнопки.

Текст на кнопках Android обозначен заглавными буквами; Кнопки iOS в основном используют Заголовок. Иногда призрачные кнопки используют UPPERCASE, например кнопки OPEN и UPDATE в App Store, но иногда они используют Case Title, например «Заказать таблицу» и «Directions» в Map iOS 10. Правило использования заглавных букв в iOS кажется несовместимым.

6. Кнопки с плавающим действием VS. Кнопки призыва к действию

Плавающие кнопки действий, FAB впервые появился с Material Design в Android 5.0. FAB, расположенные в правом нижнем углу экрана, используются для решения проблемы удобства использования одной рукой. Сложно добраться до кнопок на панелях действий при использовании телефонов одной рукой. FAB иногда также расположены на стыке двух областей, и это делает FAB более привлекательными.

Кнопка с плавающим действием представляет основное действие в приложении. Например, кнопка «Создать» в почтовом приложении и кнопка «Создать запись» в приложении для социальной сети подходят для использования FAB.

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

7. Нижние листы В.С. Листы действий и виды деятельности

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

Нижний лист Android имеет 2 формы: модальные нижние листы и постоянные нижние листы.

Модальные нижние листы Android имеют два содержимого: 1) модальные нижние листы с различными действиями и 2) список приложений, который появляется после того, как пользователи нажимают значок «Поделиться». Первый похож на iOS Action Sheets; последний похож на вид активности iOS после нажатия значка «Действия». Макет содержимого модальных нижних листов Android может быть списком или сеткой.

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

Несмотря на то, что я не могу найти такие компоненты, как Android Persistent Bottom Sheets, определенные в Руководстве по интерфейсу пользователя iOS, вы все равно можете увидеть подобный дизайн в встроенных приложениях iOS, Map и Music.

Image Credit: Руководство по дизайну материалов Google и дизайн Facebook

8. Диалоги В.С. Оповещения

Диалоги Android в основном имеют 3 функции: 1) Изменяет: прерывает действия пользователей и информирует пользователя о ситуации. 2) Меню: предоставьте пользователям возможность выбрать опцию или изменить простые настройки. 3) Подтверждение: в качестве покаки, ​​подтвердите выбор пользователя, прежде чем оно будет принято для предотвращения ошибок.

Диалоги Android состоят из заголовков, содержимого и кнопок. Названия иногда могут быть опущены. Содержимое может содержать не только чистый текст, но и другие компоненты, такие как список параметров или текстовые поля. В предупреждении iOS также есть заголовки, содержимое и кнопки, похожие на диалоги Android. Разница лишь в том, что контент может быть опущен, но заголовок должен быть сохранен.

Диалоги Android имеют 3 формы: 1) Простые диалоги, как и в меню: в диалоге нет кнопок OK и Отмена. Вы можете нажать на параметр в диалоговом окне, чтобы выбрать, а затем диалоговое окно исчезнет. Вы можете нажать за пределами диалогового окна или клавишу Назад, чтобы закрыть диалоги. 2) Диалоги подтверждения, наиболее распространенные: для пользователей есть кнопки, чтобы подтвердить свои действия. 3) Полноэкранные диалоги, используемые только на телефонах: полноэкранные диалоги не являются полноэкранными на планшетах. Полноэкранные диалоговые окна Android похожи на модальное представление iOS, которое будет представлено позже.

тексты

Заголовок и текст содержимого в диалогах Android выравниваются по левому краю; Текст заголовка и описания в центре выравнивания предупреждений iOS. Android использует «Случай предложения» для названий; iOS использует «Заголовок». И Android, и iOS используют «Случай предложения» для текста контента.

Заголовок диалогового окна Android и предупреждения iOS должен быть коротким и понятным. Избегайте вопросов с некоторыми указаниями, например «Вы уверены, что хотите удалить файл?». Предложение должно быть простым, нейтральным и прямым, например «Удалить файл?».

Кнопки

О количестве кнопок, Android и iOS могут иметь 1-2 кнопки. Руководства iOS рекомендуют избегать 3 или более кнопок в целом, потому что больше кнопок создает сложность и может потребовать прокрутки. Если вам нужно более двух вариантов, попробуйте вместо этого использовать лист действий. Но когда iOS спрашивает пользователей, хотят ли они обновить свою версию iOS, в предупреждении отображаются три кнопки: «Установить сейчас, позже» и «Подробности».

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

При копировании на кнопках следует избегать использования «Да» и «Нет», действие записи на кнопках будет более четким и прямым, например «Отмена» и «Сохранить», «Отмена» и «Удалить».

iOS использует красный текст кнопки для предупреждения, если действие невозможно восстановить, например удалить. Android не использует определенный цвет текста кнопки. Что касается текста кнопки, Android использует UPPERCASE, а iOS использует Case Case. Текст кнопки выравнивается прямо в Android, но выравнивается по центру в iOS.

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

9. Полноэкранные диалоги VS. Модальные виды и поповеры

Полноэкранные диалоговые окна Android можно найти только на небольших мобильных устройствах, таких как смартфоны, которые можно сравнить с модальными представлениями iOS. Модальные представления iOS имеют 4 стиля: полноэкранный режим, лист страницы, лист формы и другие, такие как разделенный вид и поповер. Что касается перехода модальных представлений на телефонах, модальный вид будет сдвигаться вверх при входе и выдвигаться вниз при выходе.

Popovers используются только для планшетов

10. Закуски и тосты VS. Оповещения

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

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

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

Некоторые приложения могут настроить свои оповещения так, чтобы они появлялись на секунды, как тосты Android.

11. Списки В.С. таблицы

Списки, самый распространенный и базовый компонент, можно найти в каждом приложении (вы можете найти его в Настройках приложений, по крайней мере). В Android списки состоят из непрерывного столбца строк. В iOS мы называем списки как планшеты, состоящие из множества ячеек, или рядов.

Стиль списка Android имеет однострочный список, двухстрочный список (состоит из основного текста и вторичного текста) и многострочный список (состоит из основного текста и 2 или более вторичного текста). Значки, эскизы и элементы управления списками, такие как флажки, переключатели и кнопки переключения, можно добавлять в списки. Обычно основные действия размещаются в левой части списка, а второстепенные - в правой.

Таблицы iOS похожи на списки Android, но есть некоторые моменты, на которые следует обратить внимание:

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

2) Ряд iOS имеет лучшее удобство использования, чем Android. Если есть дочерний экран, iOS будет показывать индикатор стрелки на ячейке на родительском экране, чтобы пользователи могли знать, что эта ячейка может быть вставлена ​​и приведет к другому экрану. Но в Android мы не можем знать, предназначены ли списки только для отображения информации или для входа на другой экран. Все они выглядят одинаково.

3) Таблицы iOS имеют 2 формы: простые и сгруппированные. Простой стол имеет целый белый экран с разделителями. Несмотря на то, что только несколько ячеек имеют содержимое, в зоне отдыха все еще есть разделители. Сгруппированные таблицы имеют серый фон. Первая сгруппированная таблица имеет некоторое пространство с панелью навигации, а вторая сгруппированная таблица ниже. Android имеет только один стиль и использует только разделитель для разделения двух разных списков.

12. Подзаголовки VS. Заголовки сгруппированных таблиц и заголовки разделов

Подзаголовки Android и заголовки iOS используются для разделения и группировки списков или списков сетки с различным содержимым. В iOS есть 2 разных стиля для разделения списков: 1) Сгруппированные таблицы, используемые для группировки совершенно разной информации; 2) Заголовки разделов, которые можно увидеть в простых таблицах, используются для сортировки аналогичного формата данных, например, фотографий с разными датами съемки или контактов с разными именами.

Подзаголовки Android используют регистр предложений. В заголовках сгруппированных таблиц iOS используется «UPPERCASE», а в заголовках простых таблиц - «Заголовок».

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

13. Список элементов управления

Элементы управления списком также являются важными компонентами для приложений. В этой главе будут представлены элементы управления списками, такие как множественный раздел, одиночный выбор, переключатели, переупорядоченные захваты, оставленные объекты и переключатели разворачивания / свертывания.

13–1.Многократный выбор: флажки VS. Галочка с кружком

Android использует флажки для множественного выбора. Поле с галочкой представляет статус выбранного элемента; поле без галочки означает, что элемент не выбран. Флажки, которые можно найти на веб-сайте или в настольной ОС, обычно используются для множественного выбора, но в iOS этот компонент отсутствует. В iOS круг с галочкой используется для множественного выбора, но его форма может заставить пользователей спутать его с переключателем.

Флажки Android можно поставить слева или справа, но iOS обычно ставит несколько элементов управления выбора на правой стороне.

Стоит отметить, что Android иногда использует флажки в качестве переключателей для включения / отключения функций, но iOS использует для этого кнопки переключателей, а не элементы управления кругом

13–2.Одиночный выбор: радиокнопки / галочки VS. галочки

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

В iOS нет переключателей, но вместо этого есть галочки в качестве элементов управления выбором.

Android раньше помещал переключатели в правой части списков, но теперь вы можете найти переключатели, расположенные слева. iOS ставит галочки справа, но галочки можно ставить слева, если справа есть другие элементы, например, индикатор следующей страницы.

Несмотря на то, что в Руководстве по дизайну материалов нет галочек, которые появляются постепенно с 2016 года, вы можете найти пример в меню Календаря Google.

Android Single Selection: радио кнопки и галочки. Но левый пример плохой как простой диалог, он НЕ должен иметь кнопку CENCEL в соответствии с Руководством Google. Или это может быть диалог подтверждения, добавив кнопку ОК, но это приведет к большему количеству шагов.

13-3. Выключатели

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

Настройки Android вкл / выкл: Gmail использует флажки, но в Фото используются кнопки переключения

13-4. Упорядочивание / Gripper

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

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

13-5. Оставить позади (Размах действий)

Проведя пальцем влево или вправо, вы можете найти некоторые скрытые действия за списком. Это очень часто встречается в iOS. Обычно в прошлом вы могли найти действие удаления при смахивании, теперь есть и другие действия, помимо удаления. В почтовом приложении вы можете найти архив, пометить и многое другое после того, как проведете пальцем влево; пометить прочитанным или непрочитанным, проведя вправо.

После Android 5.0 в руководствах показаны действия смахивания, так называемые Leave-Behinds. Стоит отметить, что Leave-Behinds не следует использовать на экране с вкладками из-за конфликта жестов, и именно поэтому Android не имел этого компонента раньше.

Проведя список на расстояние и затем остановившись, вы можете увидеть 1-3 действия позади, а затем нажмите одно из них, чтобы принять меры. Но если вы проведете пальцем на большее расстояние, будут предприняты действия по умолчанию. Android имеет только одно действие и выполняет действие, проводя прямо.

Источник изображения: Google Design Design Guideline и Facebook Design

13-6. Развернуть / свернуть

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

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

Источник изображения: Руководство по дизайну материалов Google

Развернуть / свернуть нельзя найти в Руководстве по интерфейсу пользователя iOS, и это редко встречается в приложениях iOS. Подобные элементы управления могут быть отображены на экране «Обзор» в App Store в iOS 8. Но это больше похоже на путь, чем на элемент управления «развернуть / свернуть», потому что вы не можете видеть другие элементы, сгруппированные в разных заголовках на одном экране.

iOS 8 App Store
Пожалуйста, дайте 10 хлопков - если вы прочитали эту статью.
Пожалуйста, дайте 20 хлопков - если вы считаете, что это полезно.
Пожалуйста, дайте 50 хлопков - если вы думаете, что это удивительно!
Спасибо :)

Продолжить Android VS. iOS: сравните 20 компонентов и шаблонов пользовательского интерфейса (часть 2)

Ссылка