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

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

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

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

14. Сетка Списки VS. Коллекция Просмотр

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

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

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

15. Карты

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

Хотя iOS не определяет карточный интерфейс в своих рекомендациях, но похожий дизайн можно найти в приложении Apple iOS.

В визуальном стиле Android подчеркивает тени карт, но карты в iOS 10 плоские (после выхода iOS 11 появились длинные тени!)

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

15. Меню VS. Сборщики и новые экраны

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

Меню появляются в следующих 3 ситуациях: 1) после нажатия значка переполнения на панели действий или в строке списка; 2) после нажатия на раскрывающееся меню и 3) после нажатия на 2-строчный стиль, состоящий из метки и значения.

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

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

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

16. Выбор даты / времени

И Android, и iOS имеют свои собственные средства выбора даты / времени по умолчанию. В Android есть средство выбора даты, позволяющее выбрать определенную дату (дату, месяц и год) и время. iOS имеет 4 вида выбора: 1) Дата, которая отображает месяцы, дни месяца и годы. 2) Время, которое отображает часы, минуты и (необязательно) обозначение AM / PM. 3) Дата и время, которые отображают даты, часы, минуты и (необязательно) обозначение AM / PM. 4) Таймер обратного отсчета, который отображает часы и минуты.

17. Делители

Для разделения контента обычно используются разделители.

У Android есть 2 типа разделителей: 1) Полные разделители, используемые для разделения отдельных разделов контента. 2) Вставные разделители, используемые для разделения связанного содержимого.

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

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

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

18. Текстовые поля

Текстовые поля Android обычно появляются в формах, которые нужно заполнить. Существует 3 типа: 1) одна строка 2) несколько строк и 3) полная ширина. В 2017 году Android добавил еще один тип: текстовую область в свои правила.

В зависимости от формата ввода, должен быть предоставлен соответствующий тип клавиатуры. И Android, и iOS предоставляют несколько разных типов клавиатуры. По сути, их можно разделить на 3 типа: 1) Цифровая клавиатура (в iOS есть цифровая клавиатура и телефонная панель), используемая для ввода телефонных номеров, номеров кредитных карт или PIN-кодов. 2) Текстовая клавиатура, используемая для имен людей. 3) Смешанная клавиатура, используется для адресов электронной почты или URL-адресов.

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

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

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

19. Слайдеры

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

У ползунков Android есть 2 типа: 1) Непрерывные ползунки, позволяющие пользователям выбирать значение в диапазоне. 2) Дискретные ползунки, позволяющие пользователям выбирать определенное значение, например 10 или 20, из диапазона.

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

20. Другие паттерны

20-1. Поиск

Поиск Android имеет 2 типа: постоянный поиск и расширяемый поиск, которые можно сравнить с выдающимся поиском iOS и минимальным поиском.

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

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

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

20-2. Удалить и другие действия

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

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

20-3. Выберите текст

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

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

Источник: Google

20–4.Прогресс и деятельность

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

Индикаторы используются для того, чтобы прогресс был предсказуемым. Если прогресс неисчислим, то будут использованы счетчики. Но если прогресс предсказуем и время ожидания не превышает 3–4 секунд, вы также можете рассмотреть возможность использования счетчиков.

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

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

Индикаторы прогресса Android имеют 4 типа: 1) Определить 2) Неопределен 3) Буфер 4) Запрос неопределен и определен для различных ситуаций.

Android линейный индикатор прогресса и активностиЦиркуляр Android неопределенный и определить показатели прогресса

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

Обновите списки, проводя вниз. Индикаторы загрузки появятся.

20-5. Иконки: Поделиться VS. действие

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

Значок Android Share VS. iOS Action icon

20-6. Бары состояния

Строки состояния Android и iOS содержат такую ​​информацию, как время, состояние батареи, состояние Wi-Fi и уровень сигнала. Проведите вниз от строки состояния, чтобы вызвать центры уведомлений.

20-7. Навигация Бары VS. Главная кнопка

Панели навигации Android и панели навигации iOS различаются. Пожалуйста, не путайте их.

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

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

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

резюмировать

навигация

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

Панель приложений / Панель навигации

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

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

Android и iOS имеют нижние панели инструментов для текстов действий, значков действий или состояния.

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

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

Кнопки

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

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

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

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

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

Диалоги VS.Alerts

Диалоги используются для предупреждения, предоставления опций и подтверждения. Android и iOS располагают кнопку основного действия с правой стороны, а дополнительные действия, такие как отмена, с левой стороны. Тексты на кнопке должны быть простыми и понятными. Глаголы могут использоваться вместо Да и Нет.

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

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

Закусочные и тосты VS. Автоматическое закрытие оповещений

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

Списки VS. Столы и ячейки (ряды)

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

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

В Android есть только подзаголовки, но в iOS есть заголовки таблиц для сгруппированных таблиц и заголовки разделов для простых планшетов.

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

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

Меню VS. Сборщики и новые экраны

У Android есть меню, но iOS использует средства выбора для коротких списков и новые экраны для более длинных списков.

Сетка Списки VS. Коллекция Просмотров

По сути, Android и iOS имеют схожие виды сетки / коллекции.

Карты

Интерфейс в виде карты - ключевая особенность Android Material Design, но iOS также имеет похожий дизайн.

Выбор даты / времени

Android и iOS имеют свои собственные средства выбора даты / времени по умолчанию.

циркуль

У Android есть разделители, но iOS использует групповые таблицы для разделения различного контента.

Текстовые поля

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

Слайдеры

Android и iOS имеют свои собственные компоненты. Оба похожи.

Поиск

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

Удалить и другие действия

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

Выберите тексты

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

Прогресс и активность

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

Иконки: Поделиться VS. действие

У Android и iOS есть свой собственный значок. Не используйте значок обмена Android на iOS и наоборот.

Бары состояния

Строка состояния Android и iOS в основном имеет время, состояние батареи, сигнал Wi-Fi и сигнал сотовой связи. Вызывайте центры уведомлений, проводя вниз от строки состояния.

Навигация Бары VS. Домашние кнопки

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

Резюме

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

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

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

Пожалуйста, дайте 10 хлопков - если вы прочитали эту статью.
Пожалуйста, дайте 20 хлопков - если вы считаете, что это полезно.
Пожалуйста, дайте 50 хлопков - если вы думаете, что это удивительно!
Спасибо :)
-------------------------------------------------- ------------------
Я не говорю о причинах, по которым в Руководстве по дизайну материалов и в Руководстве по дизайну интерфейса пользователя для iOS этот тип поведения или правила применяются скорее, чем другие. Эта статья больше похожа на практическое использование. Я хотел бы обсудить контексты и причины в других статьях в будущем.
Я не обновил для Android O и iOS 11, либо.

Ссылка