Люди во всем мире используют smartphones больше, чем когда-либо, для повседневных задач. В среднем пользователь проводит за смартфоном около пяти часов в день. Большую часть времени тратится на использование приложений.
Android и iOS — наиболее часто используемые операционные системы для smartphones, что, по данным Gartner, составляет 99% рынка смартфонов. Следовательно, все идеи по разработке собственных мобильных приложений сосредоточены на Android и iOS.
При разработке пользовательского интерфейса (UI) для приложений iOS и Android каждый дизайнер должен учитывать различия и сходства между двумя платформами. Независимо от того, обновляете ли вы дизайн уже опубликованного приложения или начинаете с нуля, это руководство поможет вам эффективно разрабатывать собственные приложения для iOS и Android.
Значки приложений
Значок приложения формирует у пользователя первое впечатление о бренде.
Существуют определенные рекомендации по созданию иконок для Android и iOS, которым вы должны следовать как дизайнер. Иконки приложений для iOS должны иметь плоский стиль и скевоморфизм. Все приложения для iOS имеют одинаковую форму значков — квадратную с закругленными углами. Значок должен быть непрозрачным и не загромождать фон. Кроме того, сохраняйте простой фон и избегайте прозрачности.
iOS предполагает, что значок должен иметь одну центральную точку, которая может привлечь внимание и помочь пользователям идентифицировать приложение.
Всегда следует помнить одну вещь: никогда не используйте копии Apple аппаратные продукты, поскольку они защищены авторским правом.
С другой стороны, Android позволяет вам выбирать из множества цветов и теней бумаги. Для выражения общего визуального языка графические элементы значка должны быть согласованными.
В отличие от iOS, вы можете использовать прозрачный фон для значков приложений Android и любую форму по вашему выбору. Что касается элементов, используемых в значке, избегайте использования слишком большого количества слоев, поскольку большее количество слоев может усложнить значок. Кроме того, при перекрытии элементов значка не следует перекрывать более двух элементов, поскольку это не обеспечивает четкого фокуса.
Элементы значков следует сохранять в их геометрической форме, а не перекашивать, вращать, изгибать, деформировать или изгибать их.
Навигация
Навигация, процесс перемещения между различными экранами, помогает пользователям выполнять задачи. Он соединяет экраны, связывая элементы друг с другом.
Навигация в приложениях iOS должна использовать панель вкладок, тогда как приложения Android могут использовать вкладки, а также меню ящиков в качестве основных компонентов навигации.
Не многие приложения для Android используют нижнюю панель навигации, но рекомендации по материалам позволяют это. Некоторые известные приложения для Android используют эту навигацию. Например, Instagram и Форсквер. Для основных действий на экране, таких как публикация нового твита или добавление нового элемента, iOS позволяет использовать кнопку, которая обычно размещается в правой части панели навигации. Тогда как на Android используется плавающая кнопка. Навигация в приложении Android осуществляется с помощью трех кнопок (назад, домой и обзор), которые могут быть физическими или виртуальными в зависимости от устройства.
iOS, с другой стороны, имеет только одну физическую кнопку «Домой» для навигации и кнопку «Назад» внутри приложений. Пользователи Android могут использовать эти кнопки для возврата, когда захотят, независимо от кнопки «Назад» внутри приложения.
Типография
И iOS, и Android Material рекомендуют дизайнерам использовать в приложении шрифты по умолчанию.
Шрифтом по умолчанию для iOS является San Francisco (SF), который оптимизирован для повышения четкости и единообразия текста. Вес, размер и цвет шрифта можно использовать для выделения ключевой информации в приложении.
iOS автоматически применит правильный вариант в соответствии с размером точки и будет использовать настройки специальных возможностей, когда шрифты San Francisco используются для стандартных элементов управления, таких как кнопки и метки. Использование SF Pro Text для текста размером 19 пунктов или меньше и SF Pro Display для текста размером 20 пунктов или больше наиболее подходит для макетов интерфейса.
С другой стороны, шрифтами по умолчанию для Android являются Roboto и Noto для языков, не включенных в Roboto. Вы можете выбрать выразительные шрифты для заголовков, которые привлекают пользователей. Google предлагает использовать заголовки с засечками или без засечек. Избегайте использования выразительных шрифтов, таких как рукописные или рукописные стили, для текста в основном тексте.
Дизайнерам следует обратить внимание на то, чтобы не использовать сочетание нескольких разных шрифтов, из-за чего приложение может выглядеть неряшливо и фрагментировано. Хотя и iOS, и Android позволяют использовать собственные шрифты, их использование должно быть ограничено, поскольку их часто трудно читать. Пользовательские шрифты следует использовать только в том случае, если это необходимо приложению для целей брендинга.
Сетка
Сетки используются для отображения нескольких элементов в двухмерном виде с возможностью прокрутки в приложениях. Размеры, отступы и интервалы используемых в них сеток и шрифтов должны быть одинаковыми повсюду.
Android предлагает определенные сетки. Например, сетка 8 dp для общих целей и интервал 4 dp для выравнивания значков и типов навигации.
С другой стороны, iOS не определила каких-либо конкретных спецификаций сетки. В приложениях iOS обычно для размеров и интервалов используются значения, кратные 4 и 5 точкам.
Панели приложений/панели навигации
Android и iOS используют разные названия для полос. В то время как Android называет панели панелями приложений или панелями действий, iOS использует термин «панель навигации». Они расположены в верхней части приложения для размещения текущего имени экрана, названия приложения и кнопок действий.
Android позволяет размещать имена в левой части панели приложений, а кнопки действий — в правой части. Количество кнопок действий обычно не превышает трех. Если их больше трех, значок переполнения используется для менее важных кнопок.
С другой стороны, на панели навигации iOS слева отображается кнопка «Назад», часто помеченная заголовком предыдущего экрана. В правой части панели могут быть кнопки управления, такие как кнопки «Редактировать» или «Готово». Дизайнеры могут использовать оттенок фона для панелей навигации и настроить их так, чтобы они скрывались при активации клавиатуры.
Помимо панели навигации, приложения iOS используют больше панелей, включая панель поиска, панель инструментов, строку состояния и т. д.
Кнопки
Android и iOS определили дизайн кнопок по умолчанию, но обе платформы позволяют дизайнерам использовать для этого свои собственные творческие способности. Однако следует позаботиться о том, чтобы стили кнопок были легко понятны пользователям.
В Android плавающие кнопки действий имеют определенные характеристики, которые расположены в правом нижнем углу. Для кнопок, допускающих нажатие, можно использовать только прописные буквы. В то же время кнопки призыва к действию iOS размещаются в центре панели вкладок, чтобы пользователи могли легко дотянуться до них и нажать.
Ресурсы и плотность экрана
Когда вы завершили разработку приложения, вам необходимо реализовать его путем экспорта ресурсов. Существует ряд различий между размерами и плотностью экрана для Android и iOS.
Android позволяет выбирать из нескольких размеров и плотностей экрана с такими коэффициентами масштабирования, как 1x, 1,5x, 2x, 3x и 4x. Единицей измерения плотности в приложениях Android является независимый от плотности пиксель. Плотность экрана может варьироваться от 160 до 640 точек на дюйм.
iOS проще с плотностью экрана, где разрешение 2x и 3x хорошо работает с большинством устройств.
Было ли это полезно?
Это руководство содержит большинство полезных функций и их конструктивные характеристики, которые помогут вам создавать собственные мобильные приложения для Android и iOS, учитывая при этом различия и сходства между ними.