Как сделать дизайн для приложения android

Разработка дизайна мобильных приложений. 7 тонкостей, о которых вы должны знать

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

Поэтому в данной статье мы рассказываем о тонкостях дизайна, которые нужно учитывать в разработке.

Что сейчас в тренде?

Простота навигации

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

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

Простой фон

Дизайн iOS приложений положил основу тренду минимализма и простоты. Если веб-дизайнеры включают красивые темы и фоны при создании сайта, то mobile-дизайнеры делают фоновые изображения однотонными или размытыми, что делает навигацию и функции приложения выразительнее. Это также позволяет сократить время загрузки и сделать взаимодействие с пользователем более комфортным.

Цветовые палитры

Разработка дизайна мобильных приложений предполагает разумное использование цветовой палитры. Рекомендуем задействовать больше белого пространства и тонированные версии цветов вашего бренда.

Размещайте цвета стратегически, акцентируя там, где читатели могут найти наиболее релевантную информацию. Хороший метод подбора цветов — Mood board («Доска настроений»). Она помогает создать цветовую гамму приложения, которая будет вызывать нужные вам эмоции и чувства. Больше о методе здесь.

Swiping-жесты

Дизайн мобильных приложений для Android и iOS включает продумывание жестов, с помощью которых пользователи работают с сервисом. Существует несколько жестов и функциональных возможностей, которые можно использовать на вашем сайте: касание, двойное касание, «щипок», «удержать и перетащить», а также «коснуться и перетащить». Анализ пользовательского опыта поможет определиться с наиболее часто используемыми жестами для того, чтобы включить их в приложение и оставаться на вершине.

Интуитивно понятный интерфейс

Юзабилити дизайн приложения для iPhone или Android проходит красной нитью через все пункты разработки. Независимо от того, какое устройство кто-то использует, никто не хочет чувствовать, что они недостаточно умны, чтобы ориентироваться в нем. Ваш интерфейс должен быть интуитивно понятным для всех устройств.

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

Интеграция с социальными сетями

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

Носимые гаджеты

Мобильный дизайн приложений для iPhone или Android — это не все, чем ограничивается сфера мобайла. За последний год на арену вырвались носимые гаджеты — умные часы, фитнес-трекеры. Они стали не просто однозадачными устройствами, а соединили в себе множество функций смартфонов. Поэтому советуем обратить внимание минималистичный дизайн таких гаджетов, суть которых — уловить информацию беглым взглядом и бежать по своим делам.

Разработка дизайна мобильных приложений

Как вы могли заметить, дизайн Андроид приложений, а также iOS, тесно связан с возможностями программирования и разработки. Только работая в связке, вы сможете получить по-настоящему крутой сервис, который соединит в себе пользовательский опыт, хороший дизайн и передовые возможности разработки.

Разработка дизайна приложений — важный этап для создания мобильного приложения в mobile-отделе Artjoker. Наша команда подходит к реализации профессионально — дизайнеры, программисты и тестировщики работают слаженно, а значит, продукты всегда радуют клиентов. Более того, разработка приложения по SCRUM позволяет оптимизировать проект после каждой итерации. На выходе это дает преимущества любых изменений по ходу проекта. Дизайнер не подстраивается под то, что запрограммировал разработчик, а разработчик не «натягивает» дизайн на код. Продукты получаются целостными в обеих сферах, а пользователи наслаждаются работой с ними.

Если вы хотите заказать у нас мобильный дизайн приложения под Андроид или iOS, а также заказать комплексную разработку — заполняйте бриф, мы проконсультируем вас. У всех приложений разная сложность и отличающиеся вводные, поэтому стоимость просчитывается индивидуально. Цена, в первую очередь, завист от объема работ и их сложности, UX дизайн — не исключение.

Поделись своей эмоцией после прочтения статьи

Отлично!

Хорошо!

Любопытно..

Не очень

О чем это?

Спасибо, ваша оценка важна для нас
Поделитесь вашим email Спасибо за подписку!

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

Стилизация Android-приложений и дизайн-система: как это сделать и подружить одно с другим

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

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

Изучив различные способы, выработали свой подход к решению такой задачи. Хотелось сделать так, чтобы дизайн-систему и поддержку стилей можно было повторно использовать в других своих проектах. В соответствии с этой идеей разрабатывались компоненты и темы.

Компоненты дизайн-системы

Дизайн-система и её компоненты предназначены для унификации дизайна и стилевого единства во всем приложении.

Компонентами дизайн-системы в нашем случае будем называть custom view с возможностью адаптации к нескольким стилям приложения. Компоненты могут применяться в любом месте приложения (кнопки, элементы списка, заголовки и т.д.).

Проектирование, отладка и доработка компонентов дизайн-системы

Заказчиками компонентов дизайн-системы являются дизайнеры. С ними на первом этапе согласовываем надобность элемента (оценка переиспользуемости) и его функциональность.

После согласования должно быть понятно, какие опции нужно вынести в атрибуты custom view (цвет текста, текст, иконочку, цвет тинта иконочки и т.д.), а какие скрыть от изменений извне (это позволяет уберечь элемент от неправильного использования разработчиками).

Далее дизайнеры отрисовывают компонент в своих средах и отдают на разработку.

При реализации компонента нужно добавить поддержку тем (светлая или темная тема и т.д.) О том, как компонент поддерживает несколько тем, я расскажу ниже.

Лучшие методики

Создать модуль с компонентами дизайн-системы. Из положительных моментов: отдельный модуль может быть использован в других приложениях, а модульность позволяет быстрее ориентироваться.
Создать тестовое приложение с компонентами дизайн-системы. Это ускоряет разработку и отладку.

Способы внедрения темы в приложение

Мне известно два способа поддержки стилей в Android:

Программный (программная перекраска).
Стандартные механизмы стилей в Android.

Программный способ

Мы перекрашиваем всю иерархию view в runtime. Рекурсивно проходимся по ней и по определенным правилам перехода из одной темы в другую перекрашиваем компоненты. Те из них, которые не должны перекрашиваться, маркируются с помощью android:tag или android:contentDescription . Эти компоненты не учитываются при разборе иерархии экрана.

Перекрашивать можно как перед отображением экрана (например, в onStart() у Activity ), так и при работе с ним.

Недостатки

Требует дополнительных ресурсов, снижает производительность. Стилизация применяется после инициализации всех компонентов.
Нужно быть внимательным к правилам перехода из одной темы в другую. Требуется учесть огромное множество правил перекраски, можно что-то забыть. Получается длинная простыня из switch — case (Java) или when (Kotlin). И в довесок требуется учесть элементы, которые не нужно красить при помощи вышеупомянутых тегов.
Нельзя частично перекрасить в соответствии с темами. В любом правиле есть исключения, и не всегда всё в приложении делается по дизайн-системе. Непонятно, как действовать если требуется частичная перекраска некоторых элементов.

if (view is TextView) < view.setTextColor( if (darkMode) R.color.blue else R.color.black ) >else if (view is TabLayout)

Достоинства

Не требует пересоздания Activity (это важно! Нет морганий при смене темы).
Я внедрил этот подход в одном известном всем продукте (см. скриншоты). Работает довольно быстро при простой однотипной вёрстке(в данном случае она была простая).

Стандартный механизм стилей в Android

Стиль — локальная стилизация экрана или view, затрагивающая только отдельный экран или view. Часто такую стилизацию называют «ThemeOverlay», или «легковесная» тема, которая позволяет переопределить атрибуты основной темы).

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

Темой можно считать множество стилизаций, которые можно переключать.

Примеры

В теме могут содержаться как стили конкретных view элементов, так и конкретные цвета.

Здесь объявлен стиль для конкретной view:

Стили поддерживают явное и неявное наследование:

Явное: Header1 унаследован от BaseTextWidget .
Неявное: Header1.Light унаследован от Header1 .

Если к текстовому элементу мы применим стиль Header1.Light / Dark , то подтянутся стили Header1.Light / Dark и Header1 (достоинство неявного наследования)

Множественного наследования темы не поддерживают. Вероятно, из-за конфликтов одноименных атрибутов.

Стили каждого компонента дизайн-системы мы решили размещать в файлах attrs_component_name.xml (см. attrs_header1 , attrs_button и т.д.)

Стилизация компонентов дизайн системы. Архитектура компонентов. Поддержка нескольких тем

Стандартный конструктор view

Стандартный конструктор view предоставляет обширные средства для настройки элемента. Внешний вид элементов можно изменить через .xml-атрибуты или через определение стиля по умолчанию в стандартном конcтрукторе view.

Рассмотрим стандартный конструктор view на примере H1Component (задаёт крупный текст в шапке экранов):

class H1Component @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.attr.cm_header1_style ) : AppCompatTextView(context, attrs, defStyleAttr)

Здесь attrs — атрибуты из определения .xml (в том числе кастомные атрибуты view). Они парсятся и применяются стандартным образом (см. ниже на примере FabComponent ).

class FabButtonComponent @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : AppCompatImageButton(context, attrs, defStyleAttr) < init < val a = context.obtainStyledAttributes( attrs, R.styleable.FabButtonComponent ) val icon = a.getDrawable(R.styleable.FabButtonComponent_cm_icon) a.recycle() // apply attrs here >>

defStyleAttr — стиль view по умолчанию.

context — контекст view, при помощи которого она создана.

ВАЖНО: чтобы view успешно переключала тему, необходимо чтобы она была создана при помощи контекста, унаследованного от android.view.ContextThemeWrapper (то есть контекст activity подходит, а applicationContext — не подходит (применится тема, которая подтянется из стиля, указанного в Manifest экрана).

ВАЖНО: при такой реализации главный приоритет у атрибутов, объявленных в .xml. У стилей, описанных в теме, приоритет ниже.

Интеграция стиля в компоненты дизайн системы и его связь с темой

Для поддержки темы компонентами дизайн-системы мы определяем в компонентах defStyleAttr и переключаем его в соответствии с темой, в которой он определен.

Реализация темы в приложении

Создаем две темы:

Компоненты дизайн системы системы будут тянуть этот стиль в таком ключе:

class MyBestText @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = R.attr.best_textview_style ) : TextView(context, attrs, defStyleAttr)

Тут определены стили каждой темы для этого элемента:

Применяем тему через стандартный механизм Android.

При создании Activity указываем нужную тему. Тогда MyBestText подтянет нужный стиль и окрасит свой текст в белый или черный в зависимости от темы (см. выше описание темы MyBestText ).

private void setAppTheme(@NonNull Boolean isDarkModeEnabled) < if (isDarkModeEnabled) < setTheme(R.style.DesignSystemDark); >else

Цвета из темы мы будем разрешать прямо из .xml и подтягивать из темы.

ВАЖНО: начиная с Android 5.0 допускается отовсюду динамически разрешать android:background=»?attr/primary_background» (селекторы, shape, vector drawables и т.д.) В Android 4.4 есть ограничение на селекторы, при попытке динамически разрешить итоговый цвет из селекторов система упадёт.

При всех достоинствах такой реализации компоненты дизайн-системы не могут в preview Android Studio полноценно работать со стилизованными темами (к элементам не будут применяться стили).

Пока тема официально не использована нашими экранами, а только подключается программно (то есть стили наших activity не подгружают явным образом тему из Manifest ), мы не можем комфортно работать с элементами, поддерживающими темы в preview (их даже не будет в списке).

Тестирование компонентов дизайн-системы

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

Темы в Android являются неизменяемыми, но их всегда можно перезаписать полностью или частично через Activity.setTheme ( @StyleRes final int resid ). Так можно в нужный момент получить любую комбинацию стилей и собрать свою собственную тему. Но все стили должны быть объявлены в .xml заранее.

Программно изменять атрибут темы без отсылок к объявленным стилям, к сожалению, нельзя. По крайней мере, я не нашёл способа.

Если знаете, как подсунуть свой цвет в атрибут темы (не объявленный в ресурсах как style ), то напишите мне. Тогда мы сможем прямо из коробки манипулировать цветами с бэка на уровне стилизации всего приложения!

Делаем рабочее preview компонентов дизайн-системы в Android Studio

Темы экранов приложения должны наследоваться от темы дизайн-системы.

Preview компонентов в .xml

При некорректно установленной теме экрана компоненты дизайн-системы тоже не будут отображаться корректно (не применятся стили и цвета):

При установке темы, унаследованной от темы дизайн-системы, мы получим вот что:

Видно, как разрешились все атрибуты темы и правильно подтянулись стили компонента.

Проверка поведения компонентов в другой теме в Preview без пересборки приложения

Чтобы проверить отображение в другой теме достаточно переключить тему в Preview light/dark.

Если конкретные реализации темы завязаны на ресурсы values/values-night, то можно переключать из preview в dark mode. И всё будет работать из коробки без выставления setTheme в Activity .

Переключение тем в приложении

Переключение тем в приложении может быть завязано на системное переключение dark-mode. В таком случае темы должны быть определены в директориях values и values-night.

Если планируется три и более тем, то потребуется вручную разрешать, какую из тем поставить через activity.setTheme() .

Результаты стилизации смотрим ниже:

А как же третья тема под AB-тестом?

Как ранее говорилось, в таком случае придется вручную выставлять setTheme для применения нужной темы.

Итоги

Как разработать дизайн приложения

В последние годы разработке мобильных приложений уделяется огромное внимание в связи с растущим распространением приложений на мобильных устройствах. Сегодня миллионы приложений доступны в магазинах приложений и стали неотъемлемой частью мобильных устройств. Согласно исследованию Statista, количество загрузок мобильных приложений достигнет 299 миллиардов к 2023 году. Статистика Statista показывает, что большинство пользователей мобильных устройств предпочитают пользоваться мобильными приложениями, а не веб-приложениями. Более того, Statista утверждает, что более четырех миллионов мобильных приложений доступны для объединения Google Play Store и Apple App Store.

Учитывая нынешний ажиотаж на мобильные приложения, многие владельцы бизнеса планируют создать приложения для развития своего бизнеса, но не знают, как разработать успешное приложение. Возможно, вам интересно, почему некоторые приложения выделяются среди других приложений в магазинах приложений. Ответ — интерактивный дизайн. Мобильные приложения с привлекательным дизайном завоевали больше внимания, поскольку они предлагают лучшие элементы дизайна для целевой аудитории. «Как разработать дизайн приложения» — самый распространенный вопрос, который вы можете задать, когда планируете создать собственное мобильное приложение.

В этой статье мы расскажем, что такое дизайн приложений, его важность в разработке приложений, дизайн приложений для Android, дизайн приложений для iOS, этапы процесса разработки приложений и советы по созданию лучшего дизайна. Давайте углубимся в детали дизайна приложения:

Что такое дизайн приложений?

Дизайн приложения состоит из всех визуальных элементов приложения, определяющих, как приложение будет выглядеть для пользователей. Привлекательный пользовательский интерфейс помогает привлечь внимание целевой аудитории. Дизайн мобильных приложений объединяет элементы UX и UI приложения, чтобы определить внешний вид и функциональность приложения. Дизайн мобильного приложения включает в себя цветовую схему, шрифт и другие элементы дизайна. В то же время пользовательский опыт (UX) определяет возможности приложения и его использование.

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

Почему дизайн приложений важен?

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

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

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

Платформа приложения

Большинство мобильных приложений поддерживают платформы Android и iOS. Прежде чем нанимать команду разработчиков приложений, необходимо определить, какое приложение вы хотите создать — для Android или для iPhone.

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

Приложения для iOS господствуют на рынке США, а приложения для Android популярны во всем мире. Таким образом, ваша целевая аудитория поможет вам определиться с выбором платформы для вашего приложения. Теперь мы расскажем о важных вещах, о которых следует помнить при разработке приложений для iOS и Android. Давайте начнем:

Попробуйте no-code платформу AppMaster

AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле

Дизайн приложений для iOS

Если вы выбрали приложение для iOS, необходимо учесть несколько моментов. Если вы начали воплощать свою идею приложения в реальность, то эта платформа — лучший вариант для вас. Это надежная и простая в использовании платформа для мобильных приложений, которая делает дизайн без ошибок благодаря более простой отладке. Таким образом, разработка мобильных приложений на этой платформе позволяет дизайнерам без проблем исправлять ошибки и добавлять новые обновления в приложения. Прежде чем нанимать дизайнера приложений для iOS, вы должны сосредоточиться на требованиях пользователей Apple к дизайну, чтобы сделать путешествие пользователя более интерактивным. Они предпочитают интуитивно понятный дизайн с новейшими функциями и совместимость с несколькими платформами Apple. Это означает, что приложение должно быть совместимо с iPhone, iPod, iWatches, Mac и т.д.

Дизайн приложений для Android

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

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

Процесс разработки приложений — пошаговое руководство

После выбора платформы вы можете приступать к процессу разработки приложения. Разработка приложений — это не сложная задача, и она требует только много упорного труда и преданности делу. Возможно, вы задаетесь вопросом о том, какие этапы включает в себя процесс разработки приложения. Мы здесь, чтобы положить конец всем вашим опасениям. Здесь мы раскрываем пошаговое руководство по разработке интуитивного дизайна. Давайте начнем:

Шаг 1: Найдите идею вашего приложения

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

UX-дизайн

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

Отзывы пользователей

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

Исследование рынка

Исследование рынка имеет решающее значение в процессе разработки для анализа конкурентов и отслеживания последних тенденций в дизайне. С помощью анализа конкурентов вы можете выяснить своих конкурентов, их долю рынка и основные особенности их мобильных приложений. Например, дизайнеры приложений могут изменить дизайн вашего мобильного или веб-приложения, почерпнув идеи из приложений конкурентов.

Шаг 2: Проверьте свою идею

Настало время, когда вам нужно проверить свою идею, чтобы убедиться в жизнеспособности вашего приложения. Для этого лучше всего провести лифт-питч перед зеркалом. Если идея имеет смысл для вас, то она будет иметь смысл и для других. Вы можете сделать свою идею ясной или испортить ее путаным объяснением. Поэтому, прежде чем представить свою идею разработчику приложений, мы рекомендуем вам объяснить ее перед семьей и друзьями и попросить их высказать свои соображения. Ваши близкие — это те люди, которые искренне помогут вам разобраться с вашим приложением.

Попробуйте no-code платформу AppMaster

AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле

Возможно, вы столкнетесь с некоторыми моментами, о которых раньше не задумывались. Кроме того, вы можете представить свою идею незнакомым людям, чтобы получить четкое представление о том, что вы создаете.

Шаг 3: Выберите функции приложения

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

Выбор функций для вашего мобильного приложения позволит вам получить четкое видение вашего приложения. На этом этапе вы излагаете свою идею на бумаге, чтобы воплотить ее в жизнь. Примечательно то, что на первых двух этапах вам нужно сосредоточиться на целесообразности вашего приложения, а не думать о его монетизации. На начальном этапе монетизация приложения не является вашей заботой. На этом этапе вы должны подумать о лучших вариантах, чтобы сделать лучший пользовательский опыт с помощью функций вашего приложения. Допустим, вы заинтересованы в создании Android-приложения для социальных сетей, и вы можете начать писать на бумаге следующие вещи:

Учетная запись пользователя
Различные способы входа в учетную запись пользователя, такие как пароль, Google или Facebook.
Опции для добавления пользователями имени пользователя, фотографии профиля и биографии
Возможность добавить фотографию профиля из библиотеки устройства или непосредственно с камеры.
Push-уведомления

Шаг 4: Создайте прототип дизайна вашего приложения

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

Экран

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

Когда у вас есть четкая roadmap экрана приложения, самое время переходить к следующему шагу. Важно отметить, что этот эскиз экрана является окончательным, и существует 100% вероятность того, что дизайнер мобильного приложения может внести необходимые изменения, когда процесс продвинется дальше.

Навигационная панель

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

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

Цветовая схема

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

Размер шрифта

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

Иконка или логотип приложения

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

Удобство использования приложения

Удобство использования заключается в том, насколько легко использовать продукт/услугу по назначению. Удобство использования приложения — это более широкая тема, известная как пользовательский опыт (UX). UX приложения описывает, что чувствуют целевые пользователи при его использовании. В процессе разработки приложения от дизайнера зависит, как удовлетворить пользователей приложения, создав интуитивно понятный дизайн. Например, дизайнеры мобильных приложений могут добавить в приложение интуитивно понятные элементы пользовательского интерфейса, чтобы сделать его приятным для пользователя. На этом этапе разработки приложения дизайнеры приложений сосредотачиваются на повышении удобства использования приложения путем добавления более привлекательных элементов дизайна пользовательского интерфейса. На этом этапе дизайнеры приложений определяют визуальное оформление каждого экрана и размещают все элементы пользовательского интерфейса на экране пользователя.

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

Попробуйте no-code платформу AppMaster

AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле

Последовательность экранов при входе в приложение

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

Используйте инструменты проектирования

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

Советы по дизайну приложений для улучшения пользовательского опыта

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

Совет 1: Сохраняйте простоту дизайна вашего приложения

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

Совет 2: Сосредоточьтесь на целевой аудитории

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

Совет 3: Создайте прощающий пользовательский интерфейс

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

Совет 4: Знайте о привычках пользователей

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

Совет 5: Используйте четкую цветовую схему

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

Совет 6: Добавьте кнопки призыва к действию

Разработайте варианты действий для пользователей приложения, когда они впервые заходят в ваше приложение. Для этого вы можете добавить кнопки призыва к действию, такие как «Зарегистрироваться» или «Войти», чтобы получить доступ к приложению. Но при создании приложения для Apple App Store эти опции приведут к неодобрению приложения. Причина в том, что большинство пользователей не заинтересованы в раскрытии своих данных для доступа к функциям вашего приложения.

Совет 7: Используйте белые пробелы

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

Совет 8: Учитывайте всех пользователей

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

Попробуйте no-code платформу AppMaster

AppMaster поможет создать любое веб, мобильное или серверное приложение в 10 раз быстрее и 3 раза дешевле

Совет 9: Добавьте анимацию в дизайн приложения

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

Совет 10: Получайте отзывы пользователей

После выпуска приложения лучше всего получить отзывы пользователей, чтобы выявить недостатки в дизайне приложения. Для этого вы можете собрать отзывы пользователей в Google Play Store или Apple App Store.

Сколько стоит дизайн приложения?

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

Небольшие приложения:
Приложение небольшого размера состоит из 5-8 экранов и предназначено для одной платформы. Стоимость разработки небольшого приложения составляет менее $2000.
Средние приложения:
Приложения среднего размера состоят из 10 — 15 экранов и предназначены для гибридных платформ, таких как Google Play Store и Apple App Store. Стоимость разработки приложения среднего размера составляет от $200K до $600K.
Большие приложения:
Большие приложения, также известные как нативные приложения, состоят из 20+ экранов и предназначены для гибридных платформ. Эти нативные приложения требуют сложной интеграции, поэтому стоимость разработки нативного приложения выше, чем стоимость разработки других приложений. Средняя стоимость разработки нативного приложения составляет более $1М. Итак, после изучения сметы расходов на разработку приложения мы рекомендуем вам попробовать конструкторы приложений для простых и средних приложений.

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

Можете ли вы разработать приложение бесплатно?

После изучения сметы расходов вы, возможно, захотите узнать, как разработать приложение бесплатно. Можно ли разработать приложение бесплатно? Ответ — абсолютное да. Да, вы не ослышались. Вы можете создать свое приложение, не потратив ни копейки, с помощью такого производителя приложений, как AppMaster.

Этот популярный производитель приложений позволяет владельцам бизнеса создавать приложения с помощью функций «перетащи и брось». Вам нужно только настроить его в соответствии с вашими конкретными требованиями к дизайну приложения. При использовании программы для создания приложений стоит обратить внимание на то, что для публикации приложения в Google Play Store или Apple App Store необходимо приобрести абонентский план.

Могу ли я разработать приложение самостоятельно?

Ответ на этот вопрос — да. Вы можете разработать приложение, даже если у вас нет навыков кодирования. Благодаря таким разработчикам приложений, как AppMaster, которые произвели революцию в процессе разработки приложений для владельцев бизнеса, не обладающих знаниями кодирования.

С помощью этой платформы для разработки приложений no-code вы можете разработать приложение для своего бизнеса. Вам не нужно нанимать команду разработчиков, потому что вы можете создать приложение, используя опции drag-and-drop этих no-code платформ. Давайте рассмотрим особенности популярного инструмента AppMaster, который может помочь вам в разработке приложений:

Позволяет создавать веб-приложения Такой производитель приложений, как AppMaster, позволяет владельцам малого бизнеса масштабировать свой бизнес с помощью веб-приложения. С помощью этого no-code инструмента вы можете разработать мобильное приложение и веб-версию.
Публикация в один клик После разработки приложения в AppMaster вы сможете опубликовать его в магазинах приложений в один клик.
Облако AppMaster AppMaster предоставляет бесплатный облачный вариант развертывания. Таким образом, после разработки приложения с помощью этой платформы вы можете разместить свое приложение на бесплатном облаке AppMaster. Более того, при желании вы можете разместить свое приложение на своих серверах или в других облаках.

Заключительные размышления

После изучения этого удобного руководства, мы надеемся, что вы хорошо ориентируетесь в процессе разработки мобильных приложений, чтобы создать интуитивно понятное приложение для ваших целевых пользователей. В этой статье мы обсудили этапы процесса разработки приложений, проверенные советы по созданию интуитивно понятного дизайна, стоимость разработки приложений и лучшие практики для снижения стоимости разработки приложений. Чтобы сократить стоимость разработки приложенияВ процессе разработки приложения мы рекомендуем вам не нанимать дизайнеров и разработчиков приложений, а воспользоваться таким производителем приложений, как AppMaster. Самое лучшее в AppMaster — это то, что он позволит вам создать приложение с помощью опций drag-and-drop. Более того, эта платформа для разработки приложений без кода предоставляет исходный код, к которому вы можете получить доступ.

Попробуйте AppMaster, чтобы воплотить в жизнь вашу идею приложения!

Руководство по дизайну мобильных приложений под iOS и Android. Основные различия платформ

Посібник із дизайну мобільних додатків під iOS та Android. Основні відмінності платформ

Редакція ・ Серп 28 ’22

#mobile #tutorial

Если вы проектируете приложения для iOS и Android (Material Design), то это руководство станет вашим новым лучшим другом ?. Мы рассмотрим наиболее важные для UX / UI дизайнеров различия между iOS и Android. Если вы создали приложение для одной платформы, то из этой статьи вы узнаете, что нужно, чтобы «перевести» его на другую платформу. Но, это всего лишь рекомендации. Речь идет о переводе «iOS-мышления» на «Android-мышление» и наоборот.

Дизайн интерфейса iOS и Android: основные отличия

Ниже представлены наиболее важные различия, которые UX / UI дизайнеры должны учитывать при «переводе» приложения с iOS на Android или наоборот:

Элемент дизайна	iOS	Android
Минимальный размер цели нажатия	44×44 pt	48×48 dp (Что такое dp?)
Основная навигация приложений	Панель нижней навигации	Вкладки вверху экрана
Дополнительная навигация приложений	Кнопка «More» на нижней панели или интерфейс текущей страницы	Панель нижней навигации или боковое гамбургер-меню
Главная кнопка/действие	Верхняя навигация, с правой стороны	Floating action button
Вторичные действия	Интерфейс текущей страницы	Верхняя навигация, с правой стороны
Список с единственным вариантом выбора	Список с галочкой для выбранного элемента	Список Radio button
Списки множественного выбора	Список с переключателями или список с галочками для выбранных элементов	Список с галочками или список с переключателями
Подтверждение или отмена деструктивного действия	Модальное диалоговое окно подтверждения выбора	Отмена действия посредством временного уведомления на экране

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

Нужно ли делать приложения для Android и iOS разными?

Если коротко, то «нет». Apple и Google – очень умные компании с миллионами пользователей. Они будут совершать UX-ошибки, как и любая другая компания, но они не совершат вопиющих ошибок, когда будут определять язык дизайна своих систем. Поэтому, хотя, ниже я и представляю два альтернативных подхода (iOS и Android), ни один из них не является неправильным. Если пользователи могут уверенно перемещаться по вашему приложению и использовать его, никто не может запретить вам использовать вкладки на iOS или модальные представления на Android. Если ваша цель – создать приложение для обеих платформ так, чтобы оно было нативным для той системы, на которой работает, то это руководство для вас.

Навигация iOS и Android

Навигация в верхней части экрана

Начнем с вершины – буквально. Каждая платформа имеет разные стандарты для того, что отображается в верхней части большинства экранов. В iOS крайнее левое действие почти всегда является действием «назад» – последовательно к предыдущему экрану («Шаг 2» возвращает к «Шагу 1»), или иерархически к родительскому экрану (переход от «Inbox» к «Mailboxes»). Кроме того, здесь может быть привязан несвязанный пункт назначения. Заголовок страницы практически всегда присутствует, но сжимается по мере прокрутки представления пользователем. Дополнительные действия на странице могут отображаться, как одно текстовое действие или несколько иконок. На Android заголовок страницы выравнивается по левому краю. Слева от заголовка страницы не должно быть ничего, но (а) если это страница верхнего уровня и в приложении есть кнопка гамбургер-меню, она расположена там, или (б) если эта страница следует другой последовательно, вы можете (по желанию) добавить кнопку назад. Ресурсы: панель навигации iOS; верхняя панель Material Design.

Основная навигация

Всего 2-5 вкладок
Они имеют размер шрифта 10
Они представляют основные пункты назначения

Многие популярные сторонние iOS-приложения также соответствуют нескольким дополнительным правилам:

Любая вкладка, представляющая основное действие приложения – например, добавление новой фотографии в фото-приложение – центрируется
Любая вкладка профиля или настроек расположена последней
Поиск идет вторым

С другой стороны, iOS-приложения по умолчанию (1) не поощряют действия, находящиеся на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) показывают поиск последним.

Самое большое различие в приложениях Android заключается в том, что одни и те же основные пункты назначения распространены по всему интерфейсу – часто между (a) кнопкой гамбургер-меню, (b) панелью поиска, (c) вкладками или (d) floating action button. Мы поговорим обо всех 4 элементах в следующих разделах. Да, и обратите внимание: Android использует нижнюю навигацию совсем недавно, аналогично iOS – так что вы можете вообще не делать разницу между версиями приложений.

Вторичное навигационное меню

В iOS пункты навигации, которые не помещаются в нижней панели вкладок, могут (a) быть перенаправлены на универсальную вкладку «More» или (b) отображаться как действия в верхнем левом или верхнем правом углу других пунктов назначений.

На Android вторичные навигационные пункты назначения перечислены в боковом меню, доступном при нажатии кнопки гамбургер-меню.

Примечание: хотя Apple специально не рекомендует использовать кнопку гамбургер-меню, у многих сторонних iOS-приложений она есть, и вы можете сами выбрать, использовать ее или нет. Лучше всего избегать элементов, скрывающих важные вещи, потому что очевидное всегда побеждает.

Ресурсы: Material Design nav drawer

Действие «Назад»

В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.

Метод навигации назад (IOS)

Контекст, в котором используется

Нажать «Назад» в верхнем левом углу экрана

Любой экран, на котором присутствует действие «Назад»

Свайп вправо от левого края экрана

Любой экран, на котором действие назад расположено в верхнем левом углу

Нажать «Готово» в верхнем правом углу экрана

Не редактируемые модальные представления

Свайп вниз по контенту

Модальные или полноэкранные представления

Что такое модальные и полноэкранные представления? Хорошо, что вы спросили.

Модальные окна – это одноэкранные задачи, которые появляются, на переднем плане, заставляя предыдущий экран отступить на задний план. Вы можете отклонить их, проведя пальцем вниз или нажав «Назад» в верхней части модального окна.

Полноэкранные окна – это медиа-файлы, фотографии или видео, которые занимают весь экран. Их можно закрыть на iOS и Android, свайпом вниз.

В Android навигация назад намного проще: для Android 10 и новее просто проведите пальцем с любой стороны экрана – это всегда будет навигация назад. Для Android 9 используйте вездесущую кнопку «Назад» в левом нижнем углу экрана.

Дизайн элементов управления iOS и Android

Основные кнопки призыва к действию

В iOS основная кнопка страницы обычно находится в правом верхнем углу.

В Android, однако, основная кнопка страницы часто отображается в правом нижнем углу, как кнопка floating action button или сокращенно FAB.

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

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

В Android, напротив, иногда важные действия будут отображаться в верхней части экрана.

Поиск

Как на iOS, так и на Android поиск – очень гибкий элемент управления. Иногда это основной пункт приложения, иногда это крайний вариант использования, и большую часть времени он находится между этими двумя вариантами. Как и следовало ожидать, каждая платформа обеспечивает определенную гибкость. Давайте посмотрим на общие парадигмы.

Одно из различий в стиле поиска между iOS и Android:

Чтобы отменить поиск, в iOS нажмите «Отмена» или «←» в Android
Чтобы очистить текущий запрос, но остаться на экране поиска, нажмите «X» в iOS или «X» в Android

Когда поиск является очень важной функцией приложения, iOS и Android сразу отобразят панель поиска. Нажатие на строку поиска откроет отдельный экран.

Если поиск не является критически важным, вы можете получить к нему доступ из других мест.

В iOS поиск обычно отображается среди основных вкладок или действий в верхней навигационной панели.

В Android вы также найдете его в контекстных действиях на верхней панели.

Меню действий

В iOS меню действий могут быть вызваны любой кнопкой или попыткой предпринять какое-либо действие. Они скользят снизу-вверх, в легко доступную область экрана.

В Android, однако, нижние листы появляются только при нажатии на иконку с тремя точками (это иконка Android для «дополнительных параметров»). И обычно появляются снизу только тогда, когда есть много вариантов возможных действий.

Обе платформы имеют свои стандарты для меню действий.

В новой версии iOS (iOS 13) функция, называемая «контекстное меню», отображает связанные действия при нажатии и удержании элемента. Когда отображается контекстное меню, фон размыт.

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

Элементы управления выбором

На мобильных устройствах следует по-разному реализовывать выбор одного варианта и выбор нескольких вариантов из множества.

Для выбора среди относительно небольшого числа вариантов в iOS используйте элемент управления выбора. Вы можете отображать его закрепленным внизу (как показано выше) или встроенным в контент (см. «Date Pickers» ниже).

Для выбора из нескольких вариантов на Android обычно используется раскрывающееся меню (которое отображается на месте) или модальное диалоговое окно со списком вариантов (которое отображается по центру и затемняет фон приложения).

Для более длинных списков вариантов или, когда возможен множественный выбор, как на iOS, так и на Android, часто встречается выделенный «экран выбора». Одна из самых больших ошибок начинающего дизайнера в дизайне мобильных приложений – это не выделение полного экрана для выбора одного варианта из большого количества опций.

Средства выбора даты (Date pickers)

В iOS средства выбора даты имеют вид любого другого элемента выбора, но со столбцом для дня, месяца и года (по желанию).

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

Ресурсы: iOS picker; Android date picker (обратите внимание на различия в спецификации Material Design)

Вкладки

Стоит отметить, что у iOS нет элемента управления, который визуально напоминает «вкладки». Вместо этого Apple призывает вас использовать сегментированную кнопку для перехода между сестринскими представлениями.

В Android вкладка в стиле «плоский дизайн» используется для того же дисплея.

Отмена действия

В iOS предупреждения появляются по центру экрана, но вы также увидите, как предупреждения скользят вверх от нижней части экрана (технически называемой «панелью действий» языком iOS). Деструктивные действия (например, удаление чего-либо) имеют красный цвет.

В Android некоторые предупреждения появляются по центру экрана. Однако, когда они не требуют ввода данных пользователем и должны исчезнуть через несколько секунд, вы можете использовать «snackbars». Snackbars – хороший выбор, потому что (а) они дают вам возможность сообщить пользователю, что его действие было успешным, и (б) вы можете добавить к ним одно или два действия, что делает их идеальным местом для размещения действия «Отменить». Я бы предпочел, чтобы мои пользователи имели возможность отменить действие. Дважды спрашивайте пользователя каждый раз, когда он пытается принять важное решение.

Ресурсы: Undo от iOS; snackbars от Material Design

Типографика iOS и Android

Шрифт по умолчанию

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

Системный шрифт iOS называется San Francisco (SF). Это компактный шрифт, разработанный для сохранения удобочитаемости при небольших размерах текста. Вы можете скачать SF здесь.

Системный шрифт Android называется Roboto. Хотя он очень похож на SF, его буквы выше, а межбуквенное расстояние немного больше. Вы можете скачать Roboto здесь.

Кроме того, для многих Android систем установлен собственный Google-шрифт под названием Product Sans, который недоступен для стороннего использования.

Стили текста

Другие стандарты платформ iOS vs. Android

Размер и форма иконок приложений

Вы должны проектировать иконки приложений iPhone в следующих размерах:

Размер иконки	Где используется
180×180 px	Экран «Домой» iPhone для размеров @3x (например, 11 Pro, X, Xs, 8+)
120×120 px	Экран «Домой» iPhone для размеров @2x (например, 11, XR, 8)
1024×1024 px	App Store

В конечном счете, ваша иконка может быть сделана и в других размерах, но, если вы сделаете ее в 60px, то убедитесь, что она хорошо смотрится в размерах 120×120, 180×180 и 1024x1024px.

Проектируйте иконки Android-приложений в следующих размерах:

Размер иконки	Где используется	Кратность 48×48 px
48×48 px	Основной экран (medium DPI телефоны)	1x
72×72 px	Основной экран (high DPI телефоны)	1.5x
96×96 px	Основной экран (xhdpi телефоны)	2x
144×144 px	Основной экран (xxhdpi телефоны)	3x
192×192 px	Основной экран (xxxhdpi телефоны)	4x
512×512 px	Большая версия для Google Play store (все устройства)	N/A

Поэтому: 1) создайте красивую векторную иконку с разрешением 48×48 px, 2) увеличьте изображение до 400%, чтобы убедиться, что оно по-прежнему выглядит великолепно, и 3) создайте отдельную версию с разрешением 512×512 px.

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

Ресурсы: рекомендации по иконкам приложений iOS; рекомендации по иконкам приложений Material Design (к сожалению, это ничего не говорит о размерах иконок)

Минимальный размер цели нажатия

Платформа	Минимальный размер цели нажатия
iOS	44x44pt
Android	48x48dp

Обратите внимание, что points Apple («pt») и device-independent pixels Android («dp») функционально эквивалентны. Они просто ссылаются на базовый размер (такой же, как CSS-единица «пиксель»), который измеряется независимо от разрешения экрана.

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

Язык дизайна

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

Чтобы узнать больше о проектировании для iOS, прочтите рекомендации Apple «Human Interface Guidelines».

Чтобы узнать больше о проектировании в стиле Material Design, прочтите материалы на сайте Material Design.

Заключение

Я что-то упустил? Что-то устарело? Пишите на почту erik@learnui.design. Я буду постоянно обновлять это руководство, чтобы оно было наиболее точным и актуальным для перевода мобильных приложений для iPhone и Android.