() translation by (you can also view the original English article)
Независимо от того, работаете вы дома, заключая контракты, или на агентство, компании нуждаются в мобильном приложении по многим причинам. Различного типа учреждения должны обслуживать своих клиентов, а также устройства, которые они используют. Часто это означает создание мобильного приложение для Android и iPhone.
В идеальном мире мы потратили бы месяцы на разработку двух приложений. Но на самом деле многие проекты создаются намного быстрее. Для любого приложения, над которыми я работал, сроки выполнения не всегда позволяли создать одно приложение, не говоря уже о двух.
Как правило, сначала вы разрабатываете общую концепцию приложение с настройками, которое оно будет содержать, а затем передаете его двум группам разработчиков. Если вы работаете таким образом, важно понять разницу между двумя платформами на ранней стадии разработки, а также способы, которые ускорят вашу работу и использование которых удвоит ваш опыт.
Перед началом: Выберите ваш подход
1. Держите врага поближе
У каждого из нас есть свои предпочтения по выбору платформы разработки. Я всегда использовал iPhone, поэтому у меня есть более четкое понимание шаблонов пользовательского интерфейса в iOS. Первое, что нужно сделать, это разобраться с другой платформой, которую ранее вы еще не использовали и лучший способ сделать это - купить дополнительное устройство, в моем случае – Android. Возможно, даже неплохо было бы использовать его в качестве основного устройства для разработки проекта, чтобы научиться чувствовать саму платформу.
Если вы работаете на дому, приобретите тестовое устройство. Если вы не можете это позволить, объясните руководству, что покупка дополнительного устройства добавит к вашей проектной работе понимание альтернативной платформы. (приобретение дополнительного устройства из вашего собственного кармана, достаточно дорого, но для компании это низкий расход по сравнению с расходами на дизайн и разработка нового приложения). Если вы работаете как фрилансер, вы должны отразить эти расходы, в своей налоговой декларации.
2. Выберите приоритет
Поскольку мы проектируем для обеих платформ одновременно, имея дело с реальным миром, где время ограничено, вам придется выбрать ведущую платформу для разработки. Примите решение не в соответствии с вашими личными предпочтениями, а на основе требований рынка. Большинство потребителей используют Android? Это платное приложение? Какова целевая аудитория? Задавая эти вопросы, вы сможете решить, какая платформы предпочтительнее.
3. Ознакомьтесь с правилами
Ознакомьтесь с рекомендациями пользовательского интерфейса для Android и iOS. В прошлом Apple, как известно, была системой, имевшая строгие принципы и правила. Чтобы разместить приложение в магазине, существует процесс утверждения, который занимает приблизительно две недели. В магазине GooglePlay нет процесса утверждения. Однако из-за более низкого барьера для входа на рынок Android качество дизайна приложений всегда было хуже. Google стремится изменить это с помощью рекомендаций для материальному дизайну.
Есть много хороших и бесплатных наборов пользовательского интерфейса, которые вы можете использовать для своих проектов (некоторые из них перечислены в конце этой статьи). Использование этих компонентов, естественно, даст вашему приложению ощущение нативности. Но даже когда вы подобрали пользовательский интерфейс, может быть сложно определиться в выборе между двумя платформами и на этом этапе я хочу вам помочь.
Проектирование вашего приложения
Следуйте этим простым шагам, и ваше приложение будет на правильном пути установки на устройствах Android и iOS.
1. Общий стиль
Начиная с iOS7, компания Apple перешла на более «плоский» стиль дизайна и отбросила резкие тени, текстуры и эффекты, которые раньше были характерны для iPhone. Android, будучи более систематичным по стилю в начале, пошел другим путем. Новое руководство по Material Design от Google создают более естественные линии, характерные для реального мира, с многоуровневой «бумажной» иерархией.
2. Реалистичные кнопки
На телефонах Android есть кнопка «Назад», которую можно использовать для возврата к предыдущему экрану приложения.
У iPhone нет этой кнопки, поэтому необходимо вернуться к основному меню экрану. Обычно движение «назад» делается шевроном в верхнем левом углу экрана, и об этом нужно помнить создавая приложение.
3. Глобальные элементы
Существуют глобальные элементы (например, строка состояния и заголовок), которые отображаются на всех страницах вашего дизайна. Вы не должны изменять их высоту или стиль вообще, если вы хотите, чтобы приложение было нативным, поэтому я бы рекомендовал определиться с этими пунктами еще на первых этапах создания дизайна. В другом случае вы можете использовать плэйсхолдер (или статус и верхнюю панель из вашей основной ОС) на каждом из макетов, но указывать разработчику, что они должны быть одинаковыми по всем параметрам.
На каждой платформе имеются небольшие различия в навигации. В Android текст выравнивается влево, тогда как для iOS он центрируется. На iOS многие заказчики заменяют название главной страницы логотипом своей компании, однако, для Android это будет не лучшая практика. Строка состояния (с вашей информацией о сети, аккумуляторах и времени) является нативным компонентом, и здесь вам не нужно учитывать дизайн. Просто убедитесь, что при показе макетов все работает верно, чтобы избежать путаницы или отвлечения внимания.
4. Навигация
Возможно, самая большая разница между платформами iOS и Android - это навигация. Основной навигационный шаблон на Android – это боковое меню. Пользователи Android, естественно, обращаются к нему за элементами меню, и на всякий раз. когда мы видим экран нашего гаджета, мы видим меню. Руководства Apple в большей степени касаются панели вкладок, которая расположена в нижней части экрана и обеспечивает легкий доступ к областям верхнего уровня приложения. Когда вы решаете архитектуру верхнего уровня своего приложения, вы можете создать два отдельных меню для двух платформ.
Думая об архитектуре приложения, более важным по сравнению с макетом меню является тема, который я описал в другой статье, посвященную некоторым проблемам. Если вы будете следовать правилам руководства, то навигация будет создана верно.
Сейчас вы видите два шаблона навигации: боковое меню для Android и панель вкладок для iOS. Иногда проще вообще скрыть навигационный слой, когда вы работаете над отдельными экранами.
5. Использовать Карточки или нет?
Карточки становятся основным компонентом пользовательского интерфейса в цифровом дизайне. Они универсальны и позволяют пользователям отображать небольшие порции контента таким образом, который подходит для мобильных устройств. Визуально карты хорошо вписываются в material design Android (он основан на примере стопки бумаг). Использование теней и отступов между карточками создаст естественный внешний вид.
На iOS использование карточек требует большей осторожности и внимания. Даже крупные приложения, такие как Facebook и Pinterest, используют карточки так, что они не соответствуют рекомендациям iOS. Руководства iOS предлагают использовать глубину в прозрачных объектах и наложениях, но основной вид у них обычно более плоский. Instagram использует совершенно плоский стиль дизайна, хотя каждый пост можно считать карточкой с архитектурной точки зрения. Стоит посмотреть, как Instagram создает тот же компонент в стиле iOS. Если вы собираетесь использовать карточки на iOS будьте очень внимательными с использованием тени, и старайтесь делать их как можно более тонкими.
6. Выбор шрифта
Семейство шрифтов для iOS - Helvetica Neue. На Android - это Roboto. Хотя стиль шрифтов заметно отличается, метрики весьма схожи. Вы сэкономите время, если будете работать только с одним из них, но обсудите с разработчиками вопросы реализации верного шрифта для каждой системы. При работе с важными макетами там, где важен размер шрифта, рекомендуется, по крайней мере, проверить свой макет с использованием обоих шрифтов.
Если вы хотите пройти лишнюю милю, вам нужно будет уделять более пристальное внимание типографическим и условным обозначениям на каждой платформе, ссылаясь на рекомендации. Несколько обобщений:
- Android Material Design использует пустое пространство в макете
- Существует также более резкое использование размеров шрифтов в material design. Потрясающие заголовки с большим количеством свободного пространства обеспечивают понятную иерархию.
- На iOS существует менее резкая вариация размеров шрифта. Но есть немного больше вариаций в толщине шрифтов, которые по-прежнему позволяют показать иерархию.
- Как правило, обе платформы используют более тонкие буквы в семействе шрифтов. Однако в приведенном ниже примере дизайн Android использует сочетание тонких и обычных букв Roboto, в то время как дизайн iOS использует толстые и регулярный буквы для Helvetica Neue.
Это очень простой пример, чтобы подчеркнуть, как просты типографические особенности помогут сразу определить, имеете ли вы дело с Android или iOS-приложением.
7. Сетки и объекты касания
iOS (44px @1x) и Android (48dp - 48px при соотношении 1:1) имеют несколько отличающиеся рекомендации для сенсорных объектов. Руководство по Material Design предлагает выравнивать все элементы с помощью сетки размером 8dp.
В последнем проекте, над которым я работал, мы сочли правильным следовать этим рекомендациям от Android, потому что (a) более крупный объект 48px применим для обеих платформ, и (б) макет для Material Design более точный и новый. В любом случае вам понадобится сетка для работы, но с более строгим определением Android мы обнаружили, что размер 8dp хорошо применим. Это означает, что вы создаете свой документ с шагом в 8dp в горизонтальной и вертикальной плоскостях, чтобы создать структуру сетки.
8. Стиль кнопок
В Material Design предусмотрено несколько стилей кнопок:
- Всплывающие кнопки: самые используемые кнопки. Тени довольно крупные и поднимают их на странице. Они должны использоваться только на фоне или на карточках. Они не должны использоваться при оповещениях или всплывающих окнах, так как это создает слишком много слоев глубины. Первичная кнопка принимает ваш цвет акцента, в то время как вторичная кнопка по цвету обычно менее заметна.
- Плоские кнопки: по существу это текст в вашем цвете с акцентом, без каких-либо ограничивающих элементов. Они используют отступы и все свойства, чтобы поддерживать структуру.
По сравнению с Material Design приложения iOS, как правило, плоские по внешнему виду, не использующие глубину или тени. Первичные кнопки имеют цвет заливки, в то время как вторичные кнопки в противоположность, используя обводку с тем же цветом. Этот переход может стать ограничением, особенно в случае с вкладками и другими элементами. Чтобы добиться этого плоского стиля, важно иметь четкие и последовательные определения, что именно и какие цвета обозначают в вашем приложении.
У iOS также есть кнопка в текстовом стиле, но она не поддерживает стиль верхнего регистра как в Android и более лёгкая в толщине шрифта.
9. Окно действий
Окна действий позволяют пользователям выбирать из множества действий на одном элементе интерфейса. Например, когда я касаюсь (или удерживаю) изображение, которым я хочу поделиться, загрузить, скопировать или удалить.
iOS и Android ведут себя по-разному. Во-первых, есть похожие окна, которые отображаются в нижней части экрана, накладываясь на текущий вид.
Для окна действий и предупреждений iOS и Android используют разные свойства для указания глубины слоёв:
- Перекрытия Android имеют сплошной цвет с небольшой тенью, указывающей, что это верхний слой «бумаги».
- Перекрытия iOS не имеют тени, но обладают небольшой прозрачностью фона.
Кнопки в выпадающем списке
Существуют только на Android, это очень быстрый способ создания меню для выбора. Имейте в виду, однако, что нативного эквивалента iOS нет. В приведенном ниже примере пользователь нажимает «профиль» на шаге 1, видит простое меню в этом месте, и может выбрать один из доступных профилей. Эти меню также часто используются в панели действий, обозначенной тремя вертикальными точками.
Ввод данных
Для определённой информации, таких как дата и время, Android теперь имеет встроенные диалоги. Они выглядят как всплывающие окна с предупреждением, но с пользовательским интерфейсом, специально предназначенным для ввода этого типа данных. Пример показывает поле ввода для календаря. Android имеет оптимизированный оверлей для ввода даты. iOS имеет дело с этим совершенно по-другому, появляясь как колесико, которое появляется как панелька снизу. Будьте осторожны при планировании этих действий и общайтесь с разработчиками на ранних этапах ввода компонентов.
10. Сегментированные элементы управления
Сегментированные элементы управления используются для переключения между различными контентами в пределах одного экрана. Их использование на платформах почти одинаково, но они очень отличаются визуально, поэтому важно подобрать правильный стиль. На iOS есть три вкладки, созданных по аналогии с кнопкам в одну линию, как мы обсуждали ранее. На Android они обозначаются простым подчеркиванием и дают намного больше свободного пространства, чтобы обозначить их взаимодействие.
11. Предупреждения
Важно, чтобы стиль был правильный, потому как они должы обозначать важные действия, такие как регистрация, принятие условий соглашения или даже подтверждение платежа. Мы должны постараться чтобы они вызывали доверие и выглядели нативно.
В предупреждениях Android используются плоские стили кнопок, которые были показаны ранее, размеры которых можно найти в руководстве по material design. Действия находятся в правом нижнем углу окна предупреждения. «Кнопки» на самом деле полностью основаны на тексте. Они используют все отступы, чтобы придать им больше структурированности, и они используют основной цвет действия вашего приложения.
В iOS действия разделены. Они обычно используют обычны регистр или оформлены как заголовок, поскольку они структурно состоят из отдельных блоков. Они выровнены по центру, и наследуют ваш активный цвет.
12. Иконки
Дизайн значков - довольно специфическая область интерфейса. Независимо от того, используете ли вы бесплатные иконки, поощряя дизайнера или разрабатываете их самостоятельно, для каждой платформы существует особый стиль. iOS популяризировала иконки, с очень тонкими штрихами. Значки системы Android имеют более толстые штрихи или полностью сплошные иконки. Раньше иконки Android использовали перспективу или трехмерный поворот, но теперь их рекомендации по стилю указывают на двумерные иконки, которые располагаются прямо. Вот краткий пример с несколькими иконками для сравнения или использование прямых ссылок на иконки для Android или iOS
13. Закуски, тосты, загрузка изображений
Неудачный номер 13. Есть несколько деталей пользовательского интерфейса, которые могут ускользнуть от вашего внимания. Обычные элементы, например оповещения и иконки загрузки, часто остаются без внимания разработчиков. Возможно, у вас был опыт работы с чудными загрузчиками и странными оповещения, которые не соответствовали стилю приложения. Обычно для них есть готовые решения, но они могут быть настроены под стиль вашего приложения. Это определенно та область, в которой сотрудничество с разработчиками - лучший способ решить, каким образом всё должно работать.
14. Общие элементы пользовательского интерфейса
Радиокнопки, флажки, поля и переключатели - это функциональные компоненты, которые должны выглядеть нативно. Как и в случае с предупреждениями и диалогами, эти элементы управления и входные данные являются областью доверия и знакомства для пользователя. Используйте для этого встроенные компоненты, чтобы люди (а) знали, как их использовать, и (б) доверяли своему приложению конфиденциальные данные или реквизитами платежей.
В приведенном ниже примере мы видим эквиваленты переключателей и переключателей для Android и iOS. Опять же, различия достаточно малы для вас, чтобы продвигаться с одним дизайном, и настраивать для другого позже, но тонкие различия необходимы для внешнего вида. Используйте свой набор пользовательского интерфейса как можно больше для этих компонентов и общайтесь с разработчиками на ранней стадии процесса.
Резюме
Невозможно создать нативный вид для вашего приложения на iOS и Android с одним дизайном. Попытайтесь сохранить все эти настройки с самого начала, следите за компонентами, которые не синхронизируются на одной платформе, и всегда сотрудничайте как можно более плотно с разработчиками.
Ресурсы
Эта статья, мы надеемся, даст вам быстрые ответы о том, где можно отклонится в проектировании двух приложений, но вам также понадобятся некоторые инструменты и шаблоны для правильного выполнения вашего проекта. Есть много общедоступных ресурсов, которые вы можете использовать в качестве отправной точки, вот некоторые из лучших:
Методические рекомендации
Если вы хотите узнать больше информации, её можно найти в руководствах по платформе. Они довольно обширны, поэтому я просто выбрал детали, которые важны для сравнения. Но если у вас есть более конкретные вопросы, это лучшее место для начала:
Наборы пользовательских интерфейсов
Эти наборы пользовательских интерфейсов помогут вам восстановить основные элементы управления и соответствующие размеры. Вы можете вырезать нужные вам фрагменты, а затем переключаться между ними для вывода на Android и iPhone ваших проектов.
Иконки
Даже если вы создаете свои собственные иконки, они будут полезны для использования в качестве заполнителей при работе. Дизайн значков может быть заданием сам по себе, и вы не хотите, чтобы значки мешали вам, пока вы получаете общее представление о своем приложении. Я недавно нашел ссылки ниже на icons8, выглядят довольно хорошо, или flaticon.com отлично подходит для более общих значков.
- Линейные значки, которые отлично подходят для дизайна iOS
- Плоские значки, которые хорошо работают с материальным дизайном
Макеты
Всегда полезно иметь макеты устройств для представления вашего приложения. Они бывают разных категорий. Возможно, вам понадобится базовый макет устройства для контекста, упрощенное плоское устройство, позволяющее вашему приложению сиять, или макет в действии, чтобы представить пример использования. Вот несколько ресурсов, которые я нашел полезными, их гораздо больше. Когда дело доходит до устройств Android, будьте осторожны, что вы выбираете. Я склонялся к диапазону Nexus, так как они являются телефонами производства Google и не будут намекать на предпочтение другим производителям.
