Дизайн
РЭДМЭДРОБОТ
27 490

32 отличия дизайна мобильного приложения под iOS и Android

Железный дизайнер из Redmadrobot Design Lab Артур Абраров делится наблюдениями.

В закладки
Аудио

Адаптировать дизайн под другую платформу — неотъемлемая часть работы дизайнера мобильных приложений. Цель этой работы — органично вписать дизайн в паттерны взаимодействия пользователя. К тому же проработанная адаптация упрощает разработку за счёт использования нативных компонентов платформы.

Чтобы адаптировать дизайн правильно, нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android. И общаться с разработчиками, в идеале подключать их к дизайну как можно раньше, чтобы они могли сразу задать технические ограничения.

Но в чём именно отличается дизайн под iOS от дизайна под Android? В этой статье я разберу 32 конкретных отличия дизайна под iOS и Android. Они поделены на четыре группы:

  1. Базовые отличия.
  2. Отличия в навигации и паттернах (UX).
  3. Отличия в компонентах (UI).
  4. Прочие отличия.

Особенности iOS будут слева, а Android — справа.

Базовые отличия

Human Interface Guidelines vs Material Design

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

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

2. Единицы измерения: pt vs dp

Дизайн iOS-приложения создаётся в pt, а Android-приложения — в dp. Мы, как правило, создаём дизайн в 1x (или mdpi) и выгружаем в Zeplin. Zeplin отображает для iOS дизайн в pt и генерирует иконки и иллюстрации в 2х и 3х. Под Android отображает дизайн в dp и генерирует графику в hdpi, xhpdi, xxhdpi и xxxhdpi.

3. Размер экрана: 320 pt x 568 pt vs 360 dp x 640 dp

Предпочитаю проектировать iOS-приложение под наименьший размер — iPhone 5 с размером экрана 320pt х 568pt. Делаю это, чтобы избежать некорректного отображения контента на маленьких экранах. Некоторые предпочитают проектировать под iPhone 8.

Под Android есть общепринятый размер экрана — 360dp х 640dp.

При дизайне под iOS иногда создаю дизайн и под iPhone X (375pt х 812 pt). Это нужно, чтобы разработчик понимал, как правильно расставить отступы у экрана этого размера. Ещё при дизайне под iPhone X нужно помнить про Safe area — зону, вне которой не стоит размещать контент.

4. Системный шрифт: San Francisco vs Roboto

Если не знаете, какой шрифт использовать в приложении, берите системный. В случае iOS — это San Francisco. А Android — Roboto.

5. Android Navigation Bar

В отличие от iOS, у Android есть встроенный инструмент навигации назад. Это Android Navigation Bar.

Он либо физически встроен в смартфон, либо является частью интерфейса. С помощью стрелки пользователь перемещается на один шаг назад в хронологической последовательности (reverse chronological navigation). Навигация происходит как внутри приложения, так и между ними.

В начале профессионального пути в качестве дизайнера мобильных приложений я долго мучил Android-разработчиков вопросом: зачем нужны две кнопки назад? Одна есть внизу в Navigation Bar, вторая появляется в Top App Bar при переходе на дочернюю страницу.

Ответ такой. Есть два вида навигации назад: reverse chronological navigation (её осуществляем с помощью стрелки назад в Navigation Bar, зовем её Back).

И upward navigation (её осуществляем с помощью верхней стрелки, зовем её Up).

Представим, что у нас есть путь A-B-C, где A — это материнская страница, а B и С — дочерние. Представим, что пользователь попал напрямую из A в С. Если он нажмёт на кнопку Back, то вернётся на A. Но если нажмёт Up, то сначала попадёт на B — и уже по второму нажатию попадёт на A.

Это сложно реализовать и путанно для пользователя, поэтому сейчас эти две кнопки назад осуществляют одинаковое действие back, как в iOS. То есть если пришли из A в С, то из С вернёмся обратно в А.

6. Важность Elevation в Material

В iOS принципиально нет теней. Как исключение, тени можно обнаружить на главном экране App Store и в Health. Но в целом HIG никак не прописывает использование теней.

В Material тени играют большую роль. Они добавляют интерфейсу третье пространство (ось Z), за счёт чего у каждого компонента появляется своё строгое место на этой оси (от 0 dp до 24 dp). Причём эта ось Z существует не просто на идейном уровне: у разработчиков есть параметр elevation, в котором они задают положение компонента по этой оси.

Навигация и смена состояний сопровождается изменением elevation компонентов. Поэтому при дизайне под Android нам стоит осознанно подходить к созданию теней.

7. Отличия в нейминге

Отличий в нейминге много. Предлагаю рассмотреть эти пять.

a. Tab Bar vs Bottom Navigation Bar

Это bar для верхнеуровневой навигации по приложению. Статично находится внизу экрана на обеих платформах. Помимо нейминга они отличаются и в поведении. Его разберём чуть позже.

b. Navigation Bar vs Top App Bar

Этот bar у обеих платформ выполняет примерно одинаковые задачи: сообщает пользователю его текущее местоположение в приложении, даёт возможность вернуться на предыдущий экран и предлагает одно или несколько контекстных действий. Подробнее об отличиях — ниже в статье.

c. Segmented Controls vs Tabs

Помимо нейминга у Tabs Android есть несколько особенностей: между табами можно перемещаться по свайпу, и Material разрешает использовать их для верхнеуровневой навигации.

d. Alerts vs Dialogs

Интересно, что в iOS описан только один инструмент предупреждения пользователя — Alerts. В Android их три: Snackbars, Banners и Dialogs.

Snackbar предназначен для сообщений низкой приоритетности и не требует действий. Dialogs блокирует взаимодействие с интерфейсом и требует совершить действие. Banners находятся между ними: не блокирует взаимодействие, но требует совершить действие.

e. Touch ID vs Android Fingerprint

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

Отличия в навигации и паттернах (UX)

8. Способы верхнеуровневой навигации

Начнём с самого верха. iOS рекомендует только один способ верхнеуровневой навигации — через Tab bar. У Android в ответ есть три способа: Navigation Drawer, Bottom Navigation Bar и Tabs.

Если количество верхнеуровневых страниц больше пяти, используем Navigation Drawer. Если меньше — Bottom Navigation Bar. Tabs нечасто применяют для этой навигации, но способ нам доступен. Однако Material рекомендует не совмещать Tabs и Bottom Navigation Bar, так как взаимодействие с данными компонентами влияет на контент страницы и пользователь может запутаться.

9. Отличия в поведении Tab Bar и Bottom Navigation Bar

Это отличие предлагает Material.

Если вы в iOS перейдёте от материнской страницы к дочерней, потом через Tab Bar переключитесь на другую материнскую страницу, то по возвращении на первую материнскую страницу вы всё также будете находиться на дочерней. В Android всё строже — при переключении через Bottom Navigation Bar вы всегда переключаетесь между материнскими страницами. Если до этого вы были на дочерней, она сбросится.

Наши разработчики Android уверены, что такое поведение системы неверное. В случае переключения по Bottom Navigation стоит сохранять открытые дочерние страницы, как на iOS.

10. Особое поведение Tabs у Android

Tabs у Android, в отличие от Segmented Controls iOS, имеют такое свойство: по табам можно перемещаться с помощью свайпа влево и вправо.

Это потому, что страницы табов находятся на одной высоте (elevation).

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

В целом эти два компонента не заменяют друг друга полностью. Segmented control — это control, который управляет контентом страницы. А Tabs — инструмент навигации.

Поэтому стоит советоваться с разработчиками перед тем, как при адаптации рассматривать их как равноценные компоненты. Иногда корректнее заменять андроидовские Tabs на Page Control. Всё зависит от контекста.

11. Отличия в появлении дочернего экрана

В iOS появление дочернего экрана (не считая модалок) происходит только одним образом: дочерняя страница появляется справа поверх материнской с эффектом slide in. Возвращение на материнский экран происходит с эффектом slide out.

Material рекомендует показывать пользователю иерархическую взаимосвязь материнской и дочерней страницы с помощью осмысленной анимации.

Компонент, при взаимодействии с которым пользователь переходит к дочерней странице, раскрывается и покрывает собой материнскую страницу. Так пользователь понимает, откуда и куда он перешёл, почему это произошло и куда он вернётся при нажатии на кнопку «Назад». Переход происходит с помощью Standard Easing.

12. Особый паттерн вызова Navigation Drawer

При проектировании приложения с Navigation Drawer важно помнить, что этот компонент «забирает» себе жест edge swipe слева вправо. Поэтому не стоит добавлять этому жесту другую логику.

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

13. Поведение контента при скролле

По HIG контент в iOS при скролле ведёт себя так: Navigation Bar уменьшается в ширине, исчезает Tool Bar. Но в целом iOS-разработчики могут настроить любое поведение контента и баров при скролле.

Material предлагает больше вариантов поведения при скролле. Например, Bottom Navigation Bar, Search и Bottom App Bar при скроле могут исчезать.

Top App Bar может либо исчезать, либо подниматься выше основного контента.

Разное поведение поиска

Интересно, что HIG относит поиск к барам и называет его Search Bar. В Material мы находим поиск в разделе Navigation, не в Components. То есть для Material поиск — это ещё один способ навигации.

Как в iOS, так и в Android поиск может статично присутствовать на экране и, как правило, прибит к Navigation Bar или Top App Bar.

На обеих платформах поиск может быть в виде иконки, только в iOS иконка раскрывается в самостоятельный компонент Search Bar, а в Android поиск раскрывается внутри Top App Bar.

Особенность поиска в iOS — его можно «спрятать» под Navigation Bar и вызывать по жесту Swipe down. Такой же жест типичен и для рефреша (pull to refresh), поэтому не стоит вызывать поиск и рефреш по этому одному действию.

Отличия в компонентах (UI)

15. Каких компонентов нет в iOS

В iOS нет многих нативных компонентов Android. Пробежимся по ним.

a. Navigation Drawer

iOS в принципе не признаёт бургер-меню. Как говорили раньше, в iOS верхнеуровневая навигация только по Tab Bar.

b. Backdrop

Backdrop — самый удивительный для меня компонент в Material. На момент написания статьи Android ещё только планирует реализовать его как нативный. В целом при изучении компонентов Material стоит проверять, доступны ли они уже для использования.

Сам Material любит этот компонент. Посмотрите, например, на победителей Material Design Award 2019.

c. Banner

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

d. Snackbar

Как и Banner, Snackbar — не нативный для iOS. Snackbar применяют, чтобы донести до пользователя короткое сообщение о результате его действия.

e. Chips

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

f. Bottom App Bar

Тут можно поспорить, что у iOS есть похожий компонент — Tool Bar. Но они разные, вот почему: Toolbar — это бар для контекстных действий. Например, при редактировании списка сообщений в Messages появляется Tool Bar с действиями Read All и Delete.

Bottom App Bar — это перемещение Top App Bar вниз с теми же действиями верхнего уровня: открытие Navigation Drawer, вызов поиска и так далее. Ещё в Bottom App Bar мы размещаем FAB.

g. FAB

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

Если вы используете в Android FAB для основного действия на экране, то в iOS это основное действие стоит разместить наверху в Navigation Bar справа (смотри пример: iMessages).

h. Bottom Navigation Drawer

Разновидность Navigation Drawer, типичная только для Android. Вызывается нажатием кнопки бургер-меню в Bottom App Bar.

i. Side Sheet

Хоть Material и разрешает использовать этот компонент в мобильном приложении, я бы рекомендовал заменить его на более привычный Bottom Sheet.

j. Expanding Bottom Sheet

Этот очень красивый компонент Android не найти среди нативных для iOS. Expanding Bottom Sheet — это поверхность, которая прибита к низу страницы. При нажатии поверхность расширяется до полноценной страницы.

k. Standard Bottom Sheet

Standard Bottom Sheet — разновидность Bottom Sheet, и его нет среди компонентов iOS.

16. Каких компонентов нет в Android

Теперь рассмотрим, каких компонентов не найти в библиотеке Android.

a. Page Controls

Page Control показывает, на какой из страниц находится пользователь. Его нет среди нативных компонентов Android.

b. Toolbar

Toolbar привычен только для iOS.

c. Steppers

Steppers — стандартный control iOS, не описан в Material. Используем его для ввода небольших значений. Пример: количество копий при печати.

d. Popover

Popover — всплывающая панель, которая в основном используется на iPad.

В iOS есть одно стандартное применение Popover — настройка текста в ридерах или браузерах.

17. Разные Status Bar

На обеих платформах Status Bar выполняет одинаковую задачу: сообщает о времени, уровне заряда, качестве мобильной связи и Wi-Fi. Они отличаются расположением этих индикаторов внутри Status Bar и в целом визуальным решением.

Ещё у Status Bar Android есть такая особенность, когда приходит уведомление из приложения, в Status Bar появляется иконка этого приложения. В iOS такого нет.

18. Refresh Content Controls vs Swipe to refresh

Рефрешеры вызываются одним и тем же жестом swipe down на обеих платформах. Но в iOS Refresh Content Control «толкает» остальной контент вниз, в то время как Swipe to refresh у Android появляется поверх контента. Кроме того, рефреш iOS при скроле контента исчезает, а у Android остаётся видимым.

19. Разные Control

Контролы платформ отличаются только визуально. Можно отметить, что в iOS контролы проще: галочки используются как для radiobutton, так и для Checkbox. В Android они отличаются формой контрола.

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

20. Разный вид стрелки «Назад» и положение заголовка

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

21. Разный вид иконки трёх точек

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

22. Разный вид Picker

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

Material также рекомендует давать пользователям возможность вводить дату с помощью Input Field-а.

23. Разные Text Fields

HIG куда менее требователен к Text Fields, по сравнению с Material.

Отличия

В iOS Label находится внутри поля ввода и исчезает во время ввода текста. Material рекомендует поднимать Label при вводе текста.

Схожее

Обе платформы советуют при необходимости добавлять Clear Button.

Что ещё просит Material

Material также рекомендует выделять Label и полосу под Text Field основным цветом — это помогает понять, что поле выделено. Material описывает поведение поля при ошибке ввода. В Material на выбор есть две формы: Filled и Outlined.

24. Context Menus vs Menus

Context Menus появился в iOS 13. Этот контрол предлагает пользователю нескольких контекстных действий, связанных с выбранным элементом. В Android есть частично похожий на него элемент — Menus.

Menus Android применяется в большем числе кейсов: оно предлагает контекстные действия как для выбранного элемента, так и для всей страницы в целом; используется как инпут с несколькими вариантами на выбор (дропдаун меню); применяется для редактирования текста. Context Menus — компонент только iOS. А Menus Android можно использовать как в мобильном приложении, так и на десктопе.

25. Action View/Activity View vs Modal Bottom Sheet

Если в iOS приложении iOS вы используете Action View или Activity View, в Android их может отчасти заменить компонент Android Modal Bottom Sheet. Он также возникает в нижней части экрана, затемняет контент и закрывается похожими способами (кнопка, нажатие вне модального окна, иногда смахивание вниз). Задача компонентов — предложить выбор или контекстные действия.

26. Edit Menus vs Text Selection Tool Bar

Помимо визуального отличия Edit Menus и Text Selection Tool Bar отличаются следующим: при долгом нажатии в Android пользователь может продолжить выделение текста. В iOS после долго нажатия возникает лупа для точного выбора места в слове.

Также Android отличается от iOS тем, что при вызове дополнительных действий Text Selection Tool Bar принимает форму Menus.

27. Разный размер divider

В iOS это 0,5 pt, в Android — 1 dp.

Прочие отличия

28. Разные требования к размеру зоны нажатия

По гайдлайнам минимальная зона нажатия в iOS — 44 x 44 pt, а в Android — 48 x 48 dp.

29. App Store vs Google Play

Ваше приложение для iOS будут скачивать из App Store. Приложение для Android — из Google Play. Чтобы разместить приложение в сторах правильно, нужно соблюдать их требования. Требования App Store стоит прочесть здесь, а Google Play — здесь. Там много особенностей, поэтому рекомендую изучить перед публикацией.

30. Особый паттерн в iOS — Undo and Redo

Это особый паттерн iOS: если потрясти смартфон, приложение предложит пользователю отменить или повторить последнее совершенное действие. Как правило, этот жест используется для удаления введённого текста.

31. Отношение к Branded Launch

Material разрешает на Launch Screen размещать логотип приложения. HIG не рекомендует использовать Launch Screen для маркетинговых целей, и предлагает при запуске приложения выводить только Placeholder.

32. Дополнительные темы Material Design

На сайте Material раскрыты ещё и такие темы, как: Data Formats (разные форматы данных), Data Visualization (правильная инфографика), Empty States (дизайн пустых состояний), Offline States (интерфейс при отсутствии интернета), Accessibility (доступный дизайн) и Bidirectionality (дизайн для читающих справа налево).

Заключение

Знание гайдлайнов повышает наш уровень осознанности. Мы понимаем сложившиеся пользовательские паттерны и создаём приложение, которое органично вписывается в привычки пользователей.

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

А если мы хотим внедрить новое, кастомное решение, знание гайдлайнов помогает аргументировать это нововведение.

Итого: знание гайдлайнов и их отличий — важный навык дизайнера мобильных приложений.

Какие ещё отличия вы знаете? Поделитесь ими в комментариях.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "РЭДМЭДРОБОТ", "author_type": "self", "tags": ["ux","ui","mobile","ios","design","android"], "comments": 59, "likes": 217, "favorites": 863, "is_advertisement": false, "subsite_label": "design", "id": 93884, "is_wide": false, "is_ugc": true, "date": "Fri, 22 Nov 2019 14:01:41 +0300", "is_special": false }
0
{ "id": 93884, "author_id": 337772, "diff_limit": 1000, "urls": {"diff":"\/comments\/93884\/get","add":"\/comments\/93884\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/93884"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
59 комментариев
Популярные
По порядку
Написать комментарий...
31

Спросите у Яндекса, чем дизайн для ИОС отличается от Андройда.

Ответить
4

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

Ответить
15

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

Ответить
17

Хз, гайдланы может только под iOS работают как задумано. На Андроиде у каждого производителя своя прошивка.
А Яндекс.Навигатором моя мама может пользоваться и на своем андроиде и на моем айфоне одинаково успешно.

Ты еще веб сайты делай разными исходя из Mac или Win или Linux.

Гайдлайны системы себя изжили, они как рекомендация. 
Какая из победителей Apple design awards сделана по гайдланам?

Ответить
1

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

Пользователь - лох, и он будет делать так, как ему прикажет дизайн приложения. 

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

Ответить
14

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

Ответить

Комментарий удален

1

это только на первый взгляд

Ответить
1

Кто не придерживается?
WhatsApp который полностью на них собран?)

Ответить
0

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

Ответить
0

Назови популярные приложения для Андроид, которым пользуется подавляющее большинство людей.

Вацап, Инста, Вк, сервисы Яндекса, что еще? 

Ну и прочитай мой второй коммент https://vc.ru/design/93884-32-otlichiya-dizayna-mobilnogo-prilozheniya-pod-ios-i-android?comment=1520577

Ответить
0

Почему тогда игры не делают по гайдланам, а имеют свой уникальный дизайн?

Ответить
0

Написал же, вы пишете коммент не читая постов чтоли?!
пользовательский опыт не меняется исходя из платформы.

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

Ответить
–1

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

Ответить
0

А не из стремления испортить жизнь разработчикам. 

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

Ответить
0

Дизайн делается удобным для пользователя и под его нужды, а не для соответствия гайдлайнам...

Тут вот увидел. Да и вообще во всех твоих сообщениях прослеживается - гайды хуйня придуманные идиотами. 

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

Логично, чтобы облегчить жизнь им и пользователям системы. 

Ответить
1

гайды хуйня придуманные идиотами.

Ты это сам себе придумал. Мой посыл — гайды это рекомендации, а не требования. 

Ответить
13

Офигенная статья. Пригодится — в закладки. Правда, с появлением всяких React Native и ростом их популярности, жизнь дизайнеров стала проще и можно снова калякать как захочется — все равно верстальщик/разработчик сделает по-своему )))
Лично у меня Material Design вызывает не самые приятные чувства. Тени всегда казались похожими на грязь под ногтями, цвета — отвратительными, а от дизайна полей форм (из одной полоски) вообще плохо становилось. Сейчас они выгрузили вторую версию, эдакую «дизайнерскую оттепель» с более щадящими гайдами и жить стало легче.
А вообще, в бытность пришлось повоевать с ангуляр-разработчиками. У них вроде этот Материал шел в пакете и все сообщество на нем сидит, а я пытался от него избавиться, потому что в веб-приложениях все равно приходилось многие вещи кастомизировано рисовать и кодить из-за нехватки нужных компонентов из коробки. Учитывая, что сами программисты редко пользовались гайдами Материала, то все его преимущества сходили на нет, оставив после себя только отвратительную цветную шапку приложения с грязной тенью под ней.

Ответить
5

+++

и ублюдский roboto

Ответить
0

Который от Сан Франциско отличается кернингом, а так почти идентичны.

Ответить
8

Вообще разные шрифты. Робото вытянутый суженный, а кириллица там вообще отвратная. СанФранциско — адаптированный под маленькие экраны внебрачный сын Гельветики Ньэ и Гилл Санс.

Ответить
0

Можно же написать СФ - растянутый и приплюснутый, верно? Еще и начертание тоньше, т.е. это дело вкуса. По кириллице сложности есть почти везде, особенно для "Ш, Щ, Ю, Ф, Ж и Ы".
Например, лично мое восприятие, для работы с документами Calibri в MS Office почти идеален, но в Web он скучен и ужасен. Благо, сейчас со шрифтами меньше проблем, чем скажем в начале 2000х.

Ответить
4

если вы не видите разницы это не делает их идентичными.

Ответить
0

если у вас эти шрифты идентичны, то у меня для вас плохие новости 

Ответить
0

они потиху отходят от него на свой Product Sans

Ответить
1

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

Ответить
0

Это сейчас можно уходить и от шрифтов, и от цветов и размеров. А раньше дизайнеры устраивали баталии на тему FlatUI Colors это хорошо или плохо. Помню, когда первую версию материала выгрузили, в офисе был восторг, изучали всем составом в 30 человек эти гайды, а в бою стало понятно, что для админки и быстрых МВП норм, а для всего остального — овчинка выделки не стоит. 

Ответить
0

Все верно. HIG старше MD, т.е. когда вышел MD к HIG уже привыкли.
Сначала применение MD вызывал много вопросов, т.к. все пытались использовать его, не как рекомендации, а как правило, отсюда скучные и одно яйцевые UI. По мере привыкания и опыта, пошло разнообразие.
Для опытного UI/UX диза - оба гайда идентичны, но со своим набором отличний, как и указано в статье, и вкусовщину никто не отменял.

Ответить
1

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

Ответить
0

Я обычно подаю разработчикам сверстанный HTML/CSS макет, собранный из PUG/SASS кусков, поэтому Material мне совсем не подошел, так как он лично на мой вкус — некрасивый. Я честно полгода игрался с ним, пытаясь сделать что-то приятное глазу, но и в рамках гайдов, ничего дельного из этого не вышло.
Ну, посмотри на эти тени. Зачем они такие грязные?

Ответить
7

Достаточно базовая тема, хорошо расписана. Однако местами я бы дополнил, например:
7.c Сегмент применяется как фильтрация контента нежели навигация, сравнение некорректно, прим.: в звонках "все" и "пропущенные". К стати, на момент публикации статьи сегмент свайпается в области нажатия (iOS 13).
Есть табы и в нативном представлении как элемент навигации, если глянуть тот же календарь в режиме просмотра расписания недели – свайп вправо и влево работают аналогично (не нативные приложения такие как Instagram, Skype, Twitter уже давно ввели свайп между табами).
15.c Есть у iOS в системе баннеры, но не в гайдлайнах :(. Приаттачил пример. 
15.e Гайдов у iOS нет на эту тему, зато есть примеры в нативной, зайти надо в поиск галереи или нативной почты и ввести ключевое слово.
15.g А вот и есть, в нативных notes, при создании заметок, есть FAB, который предлагает несколько опций создания контента заметки. Как и FAB в Android – вызывает действие или открывает опции доступных действий или шорткатов.
15.k Bottom Sheet присутствует в Apple Maps, Apple Music (мини-плеер) как пример разворачиваемого окна. 
19. В iOS, в нативном представлении есть пример multiselect и он отличается от single-select галочки, я бы порекомендовал привести их в пример. Например в Messages зайти в список сообщений и перейти в режим выбора для удаления. 
23. Стоить уточнить, что у iOS есть двухколоночные и textarea как альтернативы. Первый имеет label напротив поля ввода, второй имеет label над полем ввода как и material input в активном состоянии.

Ответить
6

У андроида нереально отстойный нативный Date picker. Люди постарше не могут толком сообразить из-за флатовского дизайна что год это активная кнопка.

Ответить
3

Что тут отстойного?

Ответить
3

Для выбора одной даты эпловский барабан выглядит удобнее. Для Date Range (забыл как это по-русски) — андроид нагляднее.

Ответить
2

У вас прокачанный вариант. Я про этот, а теперь сравните с эпловским.

Ответить
3

Вообще не в курсе, что есть какой-то другой вариант, в гайдах везде идёт именно тот что я скинул :)
На вкус и цвет, мне лично удобнее picker, потому что надоедает быть участником шоу "поле чудес" и постоянно крутить барабан :)

Ответить
0

Я тоже не сообразил. Хотя не старый.

Ответить
3

На самом деле очень крутая статья. Добавлю в закладки на сегодняшний вечер:-)

Ответить
3

Ну раз крутая статья, пожалуй, добавлю в закладки!

Ответить
–2

А я посрать сходил, нужны подробности?

Ответить
13

Конечно, пиши статью на Vc в раздел - личный опыт.

Ответить
4

Сразу видно, что статью писал не разработчик, статью писал дизайнер:) 
П.с. Статья годная, лайк

Ответить
3

Восхищён и объем статьи и объемом информации!

Ответить
2

разработчика React Native статья ставит в тупик =) 
про анимацию в приложениях напишите еще, пожалуйста. Как сделать красиво и не переборщить =)

Ответить
1

Вот ещё на эту тему хороший гайд
https://learnui.design/blog/ios-vs-android-app-ui-design-complete-guide.html

Ответить
1

Вот это я понимаю, потрудились! 👏

Ответить
1

спасибо

Ответить
1

Спасибо за лонгрид

Ответить
1

Очень интересный обзор, большое спасибо за чтиво (-:

Ответить
1

Хороший материал, молодец! 👍
Только я бы ещё добавила, как минимум, про Palette API у андроида и к различиям в статус барах можно добавить, что у iOS в нем появляется возврат к предыдущему приложению, если новое было открыто при переходе из другого (ну например, в сафари будет висеть возврат к фейсбуку, если мы вышли в сафари из фб)

Ответить
0

Точно, спасибо!

Ответить
–2

по моему самая крутая контора в рунете и не только, может показаться что лизнул
но это показалось, статья - годнота

Ответить
0

а мля спутал с evil martiants - postccss, но эти тож норм )

Ответить
–3

Скеоморфизм!
Без В
[ˈskjuːəˌmɔːrf,]

Ответить
0

Галерея с двумя л, тогда уж.

Ответить
–3

“нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android”

Вы только начали заниматься дизайном неделю назад?

Ответить
0

Хорошая статья.

Ответить
0

Ничего не написано про выделение при клике, смена цвета/подсветка/ripple effect.

Ответить
0

| у Android есть встроенный инструмент навигации назад. Это Android Navigation Bar.

 10 версии выключается в настройках, в предыдущих можно скрывать с экрана

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }