Это руководство поможет вам начать создавать дизайн для Android, перенося существующие мобильные проекты для iOS на Android с помощью основных шаблонов UX для Android и Material Design.
Структура обеспечивает единообразие дизайна и эффективность работы. Если вы используете общую базовую систему проектирования, то можете переводить макеты с помощью собственной системы, а не Material Design 3. И Android, и iOS придерживаются принципа, что контент важнее всего.
Затем можно добавить элементы брендинга, такие как цвет, шрифт и форма. Это не только делает контент более понятным, но и помогает создавать более целостные видео.
Начните с дизайна для iOS
Прежде чем начать, создайте копию приложения для iOS. Приложения для iOS состоят из трех частей: панелей, представлений и элементов управления. Используйте эту структуру, чтобы сначала перевести текст, а затем применить к нему стили.
Узнайте больше о компонентах приложений Android.
1. Как удалить системный интерфейс iOS
Удалите строку состояния и индикатор главного экрана. Теперь это сделать проще.
2. Как изменить размер фреймов
Вы можете использовать компактный размер Android – 412 dp. Однако даже в пределах одного класса размера экрана может быть много разных устройств. Например, протестируйте размер 360 dp, чтобы учесть особенности небольших экранов, и адаптируйте его для всех классов размеров окон.
3. Заменить системными панелями Android
Системный интерфейс Android может выглядеть по-разному в зависимости от устройства и настроек пользователя, но стандартный системный интерфейс поможет вам лучше понять контекст дизайна. Разместите панель уведомлений вверху, а панель навигации с тремя кнопками или навигацию жестами – внизу.
Подробнее о системных панелях Android…
4. В зависимости от способа навигации
Замените панель вкладок (нижнюю панель навигации) на панель навигации.
Посмотрите на карту процессов. В вашем приложении для iOS используется меню "Ещё"? (рекомендации HIG не советуют использовать этот шаблон). Ограничьтесь пятью элементами или меньшим их числом, используйте нижнюю панель навигации для основных действий, подумайте, можно ли перенести второстепенные элементы, например профиль или настройки, на верхнюю панель приложения, или, возможно, основное действие можно реализовать с помощью плавающей кнопки действия.
Основная навигация должна всегда присутствовать на родительских экранах (верхний уровень раздела на карте переходов). Дочерние представления (все, что находится под родительским представлением) могут включать основную навигацию, если они находятся выше в иерархии навигации и не являются модальными.
Обновите нижнюю панель навигации, добавив подходящие значки и ярлыки. Обе платформы избегают бокового движения между пунктами назначения.
5. Панели навигации в верхние панели приложений
Разбейте их на разделы: сначала родительские, а затем детские. Панель приложений состоит из двух частей: слева – навигация и заголовок, справа – элементы действий.
Если в приложении используется меню навигации вместо нижней панели навигации, на всех родительских экранах будет показываться значок меню.
Если в приложении нет боковой панели или выдвижного меню, то в родительских представлениях не показывается значок основной навигации.
По умолчанию заголовок в панели приложений для Android выравнивается по левому краю.
В детском режиме на месте значка навигации показывается стрелка вверх. Не путайте с кнопкой "Назад". Стрелка вверх позволяет пользователю перемещаться на уровень выше в иерархии навигации приложения, а кнопка "Назад" или жест прокрутки от края экрана относятся к системной навигации, позволяя пользователю вернуться назад или даже выйти из приложения.
Что насчет модальных представлений? Для модальных окон, занимающих весь экран (например, видеопроигрывателей и изображений), это будет похоже на панель приложения дочернего представления, за исключением того, что значок навигации должен измениться на значок закрытия, который закрывает модальное окно.
6. Больше модальности
Начните с больших модальных окон, которые лучше всего подходят для того, чтобы сосредоточить внимание пользователя на задаче. В iOS они часто показываются в виде листов, которые можно смахнуть вниз.
Завершите замену панелей приложений. В модальных окнах для iOS замените верхнюю часть листа и фоновое изображение на панель приложений в полноэкранном диалоговом окне.
Бонус: проверьте, можно ли перевести какие-либо модальные окна iOS в нижние листы.
Листы действий и активности в нижние экраны. (Теперь можно переводить и страницы для отправки).
Для оповещений используйте системные диалоговые окна. Если вы используете их для важной информации, которую пользователь должен каким-либо образом подтвердить, замените их на системные диалоговые окна. На этом этапе также замените все поля ввода и выбора.
7. Контент, связанный с братьями и сестрами
Вкладки, элементы просмотра страниц или вкладки с возможностью прокрутки. Если вы используете сегментированные элементы управления на устройстве iOS, они будут преобразованы во вкладки на устройстве Android. Оба варианта позволяют фильтровать похожую, но не идентичную информацию. Вкладки Android обычно прикрепляются к панели приложений и позволяют переключаться между контентом с помощью пролистывания.
8. Контент и настройки
В зависимости от того, как вы настроили ограничения или поведение при изменении размера, большая часть вашего контента, возможно, уже была изменена. Но сейчас самое время задать поля. 16 dp – хороший стандарт для маленьких экранов.
Базовая сетка основана на сетке 8 dp для компонентов и 4 dp для текста и значков. Сетка с шагом 8 пт хорошо работает на iOS, поэтому ее можно использовать в качестве отправной точки для обеих платформ.
Элементы управления. Замените переключатели на переключатели Android. Используйте флажки и переключатели Android. Все эти функции есть в Android.
Если у вас есть формы, замените текстовые поля iOS на поля Android. В Material Design есть варианты с контуром и заливкой, поэтому выберите тот, который лучше всего подходит для вашего бренда.
Списки материалов имеют некоторые отличия от ячеек таблицы в iOS:
- Разделительные линии используются редко.
- В списках индикаторы не используются, чтобы не перегружать интерфейс.
- Размеры должны быть кратны 8 dp.
9. Стиль
Цвет. Цвет интерфейса состоит из акцентных, семантических и поверхностных цветов, собранных в цветовую схему. Эти цвета применяются к элементам интерфейса в соответствии с их ролями.
Шрифт. Если вы используете системный шрифт, замените San Francisco. Roboto – системный шрифт Android по умолчанию. Однако мы рекомендуем вам использовать темы и скачиваемые шрифты Google, чтобы подчеркнуть уникальный стиль вашего бренда.
Значки. Если вы используете символы SF, убедитесь, что все они преобразованы в значки или символы Material. Выберите подходящий вариант. Знаете ли вы, что значки Material можно использовать на любой платформе?
Анимация. В Android и iOS используются разные принципы анимации, которые следует учитывать при разработке для каждой платформы. Движение материалов информативно, сфокусировано и выразительно. Эффект пульсации – это особый элемент, который используется в компонентах для обратной связи при касании. Система движения – это набор шаблонов переходов, в которых используются анимации преобразования контейнера, общей оси, затухания и исчезновения. Подумайте, есть ли в вашем дизайне элементы с постоянными контейнерами, как они связаны друг с другом и как они должны появляться и исчезать.
10. Уборка
Если вы переводите прототип, сейчас самое время переподключить элементы. Вернитесь к основной навигации. Затем добавьте панели приложений, учитывая разницу между кнопками "Вперед" и "Назад" и выбрав подходящие для Android переходы между страницами (упоминаются на шаге 9).
У вас должен быть полностью рабочий прототип, готовый к передаче.
Руководство по стилю и компонентам
Если у вас уже есть система дизайна или руководство по стилю, вы можете использовать собственные базовые стили (цвет, шрифт, значки, формы) вместе с Material Design, как вы бы использовали их вместе с рекомендациями по iOS. С помощью тематического оформления Material Design можно настроить компоненты Material Design в соответствии с уникальным стилем бренда, используя цвета, шрифты и формы.
Наличие правил для отдельных платформ – обычная практика для многоплатформенных продуктов, которая позволяет сделать вашу систему дизайна более ориентированной на пользователя.
Наконец, если вы работаете без дизайн-системы, помните, что она нужна не каждому приложению или продукту. Рекомендуем создать руководство по стилю на одной странице. Руководство по стилю – это документ, в котором изложены основные требования к дизайну. Правила фирменного оформления часто содержат руководство по стилю.
Этот код можно скопировать для Android и использовать в качестве источника для обновления стилей (или символов, компонентов или библиотеки).