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