Дизайн для приложения android: Руководство по дизайну мобильных приложений под iOS и Android. Основные различия платформ — Независимое театральное объединение "Зрительские симпатии"

Содержание

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

Если вы проектируете приложения для iOS и Android (Material Design), то это руководство станет вашим новым лучшим другом ?.

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

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

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

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

Нужно ли

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

Если коротко, то «нет».

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

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

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

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

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

В iOS крайнее левое действие почти всегда является действием «назад» – последовательно к предыдущему экрану («Шаг 2» возвращает к «Шагу 1»), или иерархически к родительскому экрану (переход от «Inbox» к «Mailboxes»). Кроме того, здесь может быть привязан несвязанный пункт назначения. Заголовок страницы практически всегда присутствует, но сжимается по мере прокрутки представления пользователем. Дополнительные действия на странице могут отображаться, как одно текстовое действие или несколько иконок.

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

Ресурсы: панель навигации iOS; верхняя панель Material Design.

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

Основная навигация или «пункты назначения» приложений расположены по-разному.

В iOS-приложениях основные пункты назначения перечислены в виде вкладок в нижней части экрана.

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

Многие популярные сторонние iOS-приложения

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

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

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

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

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

Ресурсы: панели вкладок iOS; понимание навигации Material Design

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

В 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; floating action button Material Design

Поиск

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

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

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

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

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

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

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

Ресурсы: строка поиска iOS; паттерн поиска Material Design.

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

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

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

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

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

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

Ресурсы: action sheets iOS, контекстные меню; меню, bottom sheets Android

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

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

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

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

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

Ресурсы: pickers iOS; раскрывающиеся списки, диалоговые окна Android

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

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

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

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

Вкладки

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

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

Ресурсы: сегментированные элементы управления iOS; вкладки Material Design

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

В 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, который недоступен для стороннего использования.

Стили текста

В другой статье, я подробно описал, как стилизовать текст приложения под iPhone и, как стилизовать текст приложения под Android.

Ресурсы: Руководство по типографике iOS; Руководство по типографике Material Design.

Другие стандарты платформ 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.

Заключение

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

Как создаётся дизайн мобильных приложений

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

Давайте разбираться с самого начала.

— искусство сочетания цветов.

Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).

Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.

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

Сервис Coolors позволяет создавать цветовую палитру по фото

— умение оформлять текст при помощи набора и вёрстки.

По сути дизайн — это оформление контента, 80% которого передаётся через текст. Любая информация располагается в виде иерархии — главная и второстепенная части, которые выделяются с помощью определённой стилизации текста.

Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.

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

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

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

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

⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.

Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.

⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.

Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.

⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.

Внешние нагрузки — возникают при взаимодействии пользователя с приложением (собака залаяла, машина проехала, пошёл дождь). Эти нагрузки сложно точно предугадать — можно лишь предположить, в каких условиях будет использоваться приложение чаще всего.

⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.

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

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

Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.

Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.

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

Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.

Графические редакторы достаточно похожи, поэтому, если освоить один инструмент, то изучение другого не займёт много времени.

Из других инструментов дизайнера можно отметить:

10 лайфхаков разработки нативного дизайна приложения под iOS

Разработка дизайна мобильных приложений быстро заняла центральное место среди основных требований к скиллам современного UI-дизайнера. На Google Play и среди пользователей IOS, больше всего ценится нативность в UX и UI решениях. Если мобильное приложение разработано с использованием гайдлайнов, то App Store гораздо легче пропускает его в работу, а пользователи радуются, увидев что-то знакомое и давно любимое. Все это значит, что дизайнеру необходимо ориентироваться в общих требованиях и не забывать отслеживать обновления, которые выходят с завидной периодичностью. Только в этом случае он сможет сохранять профессионализм и оставаться востребованным на рынке труда.

Особенно сложной задачей может стать дизайн мобильных приложений для IOS, так как существует перечень строгих правил, которых необходимо придерживаться, если задачей является сохранение нативного поведения и UI. Максимально тяжело приходится новичкам и пользователям Android, ведь IOS-юзабилити кардинально отличается от привычного поведения приложений на их девайсах.

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

Скелет экрана приложения

Скелет экрана приложения состоит из Status bar, Navigation bar, Tabbar, Modals/Popovers/Alerts, Search bar, Picker. Далее мы описали все эти части.

Status bar

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

Какое бы не было устройство, высота статус бара всегда составляет 20 pt. Исключением является только iPnone X, где размер строки состояния составляет 44 pt, за счет наличия «челочки».

P.S.: Совершенно не обязательно отрисовывать status bar самостоятельно. Можно обратиться к готовым GUI, которые есть в свободном доступе. Существует официальная версия от разработчиков IOS.

Navigation bar

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

Высота панели без status bar в любом устройстве (кроме iPnone X) составляет 44 pt. В IOS-версиях выше 10, панель навигации можно, при необходимости, расширить. То есть добавить дополнительную область, высотой в 52 pt, с большим заголовком строки. Не стоит забывать об отступах — в IOS они должны быть кратны восьми.

В основной части навигационной панели необходимо задавать отступ в 8 pt, а в дополнительной части с заголовком — 16 pt.

Tabbar

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

Если вы решили сделать панель прозрачной, то лучшим решением будет добавить блюр на задний фон.

Высота таббара — 49 pt во всех моделях iPhone. Иконка может быть с подписью или без, но в любом случае, контент центрируется. Размер иконки — 24 pt. Нужно учитывать, что область для клика составляет 44 pt — размещать другие иконки в области клика не рекомендуется. Чтобы понять, как размещать иконки в таббаре, нужно определить их количество, разбить ширину экрана на число иконок/табов. Затем каждую иконку центрировать по ширине и высоте области таба, независимо от того, будет ли текст под иконкой.

Modals, Popovers and Alerts

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

Существуют такие виды всплывающих окон:

1) Action Sheet.

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

2) Alerts

Содержит сообщение, которое необходимо увидеть пользователю. Обычно он предлагает выбор из двух вариантов (например, «Да» или «Нет») или один вариант ответа, как подтверждение прочитанного («Ок»). Помимо этого, в алерте можно предложить заполнить один инпут — ввести свой Email/телефон.

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

3) Edit Menu.

Позволяет пользователю осуществить такие действия, как «Скопировать», «Вырезать», «Вставить», когда элемент выделен. Появляется, если кликнуть на выделенный объект.

4) Popover.

Такие всплывающие окна полезны, когда одно действие позволяет выбрать несколько пунктов. Например, чтобы ответить на вопрос: «В каких дизайнерских программах вы работаете?», — скорее всего, потребуется поставить не одну галочку.

Search bar

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

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

Picker

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

Шрифты и их параметры

В случае, когда перед специалистом стоит задача: «Создать нативный дизайн приложения под IOS», — у него не будет необходимости в выборе шрифта. Разработчики платформы уже позаботились об этом — прописали в гайдлайнах, что необходимо использовать их собственный шрифт «San Francisco».

Он представлен в двух начертаниях: «SF UI Display» и «SF UI Text. Display». Первый, в основном, используется для стандартных элементов интерфейса, а «Text» — для заголовков и основного текста. Основной текст принято делать с небольшой разрядкой.

Размеры шрифтов для основных элементов интерфейса

Элемент	Размер (pt)	Начертание	Тип шрифта
Large Nav Bar Title	34	Bold	Text
Nav Bar Title	17	Semibold	Text
Nav Bar Button	17	Regular	Text
Search Bar	17	Regular	Text
Tab Bar Button	10	Regular	Text
Action Sheets	20	Regular / Semibold	Display

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

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

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

Если же точно нужно использовать два разных шрифта, есть пара ресурсов, которые помогают найти идеальные шрифтовые пары для любого случая жизни. Наиболее известный — Google Fonts, где при открытии детальной страницы шрифта, в боковой панели показывают идеальные шрифтовые пары для него. Интересный факт — на этом сайте вы можете скачать все опубликованные на нем шрифты совершенно бесплатно и с лицензией. Так что, go ahead!

Onboarding — знакомство с приложением и первое впечатление пользователя о вашей работе

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

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

Варианты использования Onboarding

Приветствие

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

Информирование

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

Обучение

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

Персонализация

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

И еще несколько советов по созданию onboarding

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

Основы работы с цветом, программные сложности реализации некоторых цветовых решений

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

Советы по использованию цветов при разработке IOS-приложения

Задействуйте выделяющиеся цвета, чтобы показать, что элемент кликабельный.
Ваши лучшие друзья — комплиментарные цвета.
Используйте ограниченное количество цветов, в идеале, два-три основных, один из которых будет отвечать за кнопки и активные элементы приложения.
Не вводите пользователя в заблуждение, используя цвет, который традиционно приравнивается к какому-то действию. Красный, зеленый, синий и нейтральные оттенки нужно использовать с умом. Например, не заливайте зеленым кнопку «Удалить», а красным — «Продолжить», ведь все знают, что красный — деструктивное действие, зеленый — позитивное, а серый подразумевает неактивность.
Если у компании, для которой разрабатывается приложение, есть лого и/или гайдлайн, стоит использовать имеющиеся данные, чтобы не нарушить связь с брендом.
Градиенты в основных элементах приложения сильно усложняют работу программиста. Если стоит задача использовать градиент, постарайтесь сделать его максимально простым и не использовать необычные повороты — их очень сложно реализовать программно.

Виды кнопок и нестандартные примеры их использования в дизайне приложений на IOS

Кнопки — важный и один из наиболее сложных компонентов мобильных приложений. IOS вмещает большое количество видов кнопок, но их можно разделить на несколько категорий.

Системные кнопки

Системные кнопки часто размещают на панелях навигации/инструментов, но они могут использоваться где угодно.

Несколько советов по созданию системных кнопок

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

Segmented Controls

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

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

При использовании панели Segmented Controls, каждый сегмент можно расценивать, как отдельную кнопку. Здесь можно добавлять кастомные иконки, настраивать скругление.

Call to Action (CTA)

Call to Action — кнопки призыва к действию. Они, зачастую занимают всю ширину экрана и могут содержать не только текст, но и иконки.

Особенности CTA

Кнопку первой важности лучше залить полностью, а второстепенной — задать обводку без заливки.
Если кнопка неактивна до того момента, пока пользователь не выполнит действие (например, заполнит форму), ей можно задать нейтральный серый оттенок, цвет текста тоже не должен слишком выделяться.
Кнопки можно размещать как в середине контента, если это не основное действие экрана, так и закреплять по нижнему краю. Зачастую, так делаем во всплывающем экране или на внутренних экранах приложения.
Иконки в кнопках CTA имеют стандартный размер — 24 х 24 pt.
Кнопкам Call to Action желательно задавать размер не меньше 44 pt.

Иллюстрация, как wow-эффект, и области ее использования

Иллюстрации в мобильных приложениях давно в тренде. С каждым годом к ним предъявляются все более жесткие требования: больше уникальности, дружелюбия, интеграций с брендом. Дизайнеру/иллюстратору уже недостаточно черпать вдохновение в векторных человечках на фотостоках — нужно ориентироваться на тренды в стилистике и представлении информации. Ниже мы перечислили несколько трендов в иллюстрации в 2019-2020 годах.

Яркие цвета и простые формы

«Просто, но сложно», — фраза, которой можно описать новые веяния в иллюстрации. Но состоящая из простых форм работа не обязательно будет простой. Зачастую, важно использовать смелые простые формы, которые складываются в сложные комплексы с яркими цветами. Можно даже задействовать градиенты. Главное — не переборщить с простотой и помнить, что иллюстрации должны быть предельно понятными. Им необходимо цеплять и выделяться из толпы.

Причудливые и абстрактные

Сейчас все больше и больше иллюстраторов смешивают изображения, текстуры, формы и линии для создания забавных абстрактных дизайнов. Если правильно выдержать баланс, это будет выглядеть восхитительно. Не бойтесь экспериментировать! Вдохновляйтесь такими гигантами, как Google, Facebook, Slack, Asana.

Область использования иллюстраций в мобильных приложениях чрезвычайно широка

Onboarding.
Экраны «Спасибо» выглядят гораздо интереснее с иллюстрациями. Пользователи сильно умиляются, когда после завершенного действия разработчики предоставляют им такого рода вкусности.
Стартовые экраны шага процесса.
Туториалы, которые появляются уже после запуска приложения.
Splash — экран загрузки приложения.
Да и любые экраны, где это уместно.

Иконки — инструмент, которым можно задать стиль

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

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

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

В наше время, когда дизайнер рисует мобильное приложение в среде Photoshop, UI-щики хватаются за голову с криками: «Каааак? Зачем?». Не удивительно, ведь этот редактор давно никто не использует при разработке мобильных приложений.

На смену привычному фотошопу пришли векторные редакторы Figma, Sketch, XD и другие.

Дизайнеры Artjoker всей командой по уши влюблены в Figma. Поэтому расскажем немного о разработке мобильных приложений в ее среде.

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

Для того, чтобы упростить работу с большим количеством макетов и одинаковыми элементами, разработчики Figma подарили своим пользователям компоненты. Если какой-то элемент, например, кнопку, сделать компонентом, то все ее копии копии будут повторять поведение своего родителя. Это очень удобный и быстрый способ разом откорректировать все кнопки, изменив лишь родителя. С другой стороны, если вы задали для копии компонента какой-то текст, то при редактировании компонента, копия ребенка изменится, а текст в ней — нет.

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

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

Но дизайнеры на этом не остановились. В среде Фигмы можно создать отдельную страницу с компонентами и сделать таким образом UI Kit, который автоматизирует работу.

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

Все макеты, GUI, mobile, и другие элементы дизайна нужно организовывать в одном файле, но на разных страницах. Советуем сохранять старые версии страниц, так как заказчики часто просят вернуть что-то из прошлой версии. Все старые и драфтовые версии, которые могут пригодиться, рекомендуем сохранять на отдельной странице «Drafts».

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

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

P.S.: По ссылке доступна бесплатная версия UI Kit, которую разработали и успешно внедряют в проекты дизайнеры Artjoker. Все компоненты в ней грамотно настроены и являются «резиновыми»

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

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

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

Navigation bar. Появляется вверху приложения и прикреплен к status bar. В зависимости от того, на какой странице мы находимся, навигационная панель будет меняться. Важно размещать на страницах первого уровня иерархии заголовок страницы, чтобы всегда было понятно где мы находимся. На внутренних страницах, помимо заголовка, необходимо добавить стрелку назад, чтобы вернуться на предыдущий экран. Стрелку можно даже подписать, чтобы шаг был еще более очевиден. На этой панели также принято размещать иконки для перемещения на другие внутренние страницы. Например, на главной странице профиля мы можем добавить в navigation bar иконку settings, чтобы был быстрый доступ к странице настроек.
Tab bar. В отличии от Android-приложений, IOS никогда не прячет свою навигацию в скрытое меню. В нижний таббар выносятся основные страницы приложения — желательно, чтобы их было не больше пяти. О характеристиках самой панели и иконок мы рассказывали ранее. В нижнюю навигационную панель вполне можно добавить и кастомные элементы — выделить иконку «+», взяв ее в круг, который будет выходить за рамки панели (смотрите картинку ниже). Но прежде, чем сделать такой вариант, обсудите с вашим разработчиком, насколько это будет затратно по времени. Если все-таки нужно добавить больше пяти иконок, еще раз подумайте, можно ли поместить элемент где-то в навигационной панели. В крайнем случае, предложите скролл иконок (но это не очень хороший кейс).
Segmented controls — очень важный элемент навигации, который позволяет разделить один экран на несколько. При переходе на любой из сегментов, пользователь остается в рамках главной страницы. Чаще всего, эту панель размещают ниже всех элементов навигационной панели и названия экрана (если такое есть), но бывает, что segment controls размещают в контексте какого-то контента.

Иконка приложения: как нельзя и как можно делать

Значок приложения — это уникальное изображение, добавляемое для каждого мобильного app. Пользователи впервые увидят приложение в App Store и Google Play. На данном этапе пользователь решает — хочет ли он узнать больше о сервисе. Если нет, он прокручивает дальше. Хороший значок вызывает интерес, обеспечивает уверенность, убеждает пользователя, что приложение может быть полезно. В то же время, плохая иконка сбивает с толку и ставит под сомнение пользу/качество сервиса. Когда человек его устанавливает, цель значка меняется — это нужно учитывать. Теперь он помогает в поиске приложения на главном экране, среди других значков. Но что делает значок «хорошим»?

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

Вот несколько советов от дизайнеров Artjoker, о том, как сделать ваш значок сервиса понятным и привлекательным

Старайтесь рисовать значок по сетке или, хотя бы, не выходить за края сетки.
Если вы разрабатываете нативный дизайн приложения для именитой компании, лого которой всем известен, стоит разместить фирменный знак, если он есть, в качестве значка продукта (примеры: Behance, Facebook, Twitter и т.д.). Если лого компании не предусматривает короткой версии, не нужно размещать весь полный объем. Лучше придумайте простой и понятный знак, передающий суть приложения, или композицию в фирменном стиле.
Иконки для IOS по гайдлайнам не предусматривают использование теней, как в Material Design для Android. Тут нужно полностью ориентироваться на стиль flat.
Размеры иконки приложения для передачи разработчикам должны составлять 1024х1024 pt.

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

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

Дизайн мобильных приложений: разработка UX/UI дизайна под Android, iOS приложения

Что такое пользовательский интерфейс и зачем его заказывать

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

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

Дизайн приложения для смартфонов — это его “лицо”

Не последнюю роль играет эстетическая составляющая, ведь это первое, на что обращает внимание пользователь. Оформление сервиса призвано привлечь внимание, повысить интерес к бренду.

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

Основные рекомендации по дизайну мобильных приложений:

Простое и четко структурированное меню.
Удобная навигация. Человек должен комфортно себя чувствовать при взаимодействии с сервисом, вне зависимости от устройства и операционной системы (iOS или Android).
Фон, шрифты и цветовая схема, которая не перетягивает на себя все внимание пользователя. Предпочтительнее использовать легкие, светлые тона, рисунки с размытыми контурами без большого количества мелких деталей. Также уместны цвета представляемого бренда.
Жесты с визуальными и аудио-эффектами.
Синхронизация с GPS и часовыми поясами.
Возможность поделиться необходимой информацией в социальных сетях с помощью соответствующих кнопок.
Оформление приложения должно соответствовать его тематике и целевой аудитории.

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

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

Уникальный дизайн приложения или обычный шаблон?

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

Сложность выбора дизайна

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

Индивидуальный дизайн: риски и затраты

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

Шаблонный дизайн – оптимальное решение?

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

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

UX/UI дизайн

Для создания по-настоящему хорошего и удобного для любого пользователя приложения используется UX и UI дизайн, причем второй является логическим продолжением первого. Что такое UX дизайн? Эта аббревиатура означает User Experience или дизайн пользовательского опыта. Он начал массово использоваться с 1993 года. UX дизайн является первым этапом создания мобильного проекта и носит скорее психологический, нежели технический характер, поскольку помогает понять психологию целевой аудитории, узнать их потребности и ожидания. Учитывая все это, дизайнер сможет разработать наиболее логичный дизайн, простую структуру и определить все необходимые инструменты и функции, которые будут востребованы пользователями. То есть, на этом этапе специалист проектирует взаимодействие человека с приложением, чтобы пользователь мог легко и быстро освоиться, находить нужные разделы и элементы, выполнять необходимые действия и получать удовольствие от работы.

Вторым этапом разработки интерфейса является UI дизайн. Что такое UI дизайн? Эта аббревиатура расшифровывается, как User Interface или пользовательский интерфейс. Уже одно название красноречиво говорит о выполняемых UI-дизайнером функциях. Фактически на этапе создания UI происходит визуализация результатов исследований UX: создаются элементы, экраны и страницы, определяется, каков будет стиль кнопок и видовых экранов, какие будут использоваться шрифты, переходы, цветовые палитры, визуальные переходы и эффекты, как будут выглядеть те или иные элементы и окна программы. Исполнитель старается ориентироваться не только на результаты работы UX-дизайнера, но и на гайдлайны мобильных платформ, что позволяет получить удобный и красивый проект, прекрасно работающий на всех устройствах. Эти два этапа неразрывно взаимосвязаны, поэтому зачастую их объединяют в единое целое, и один дизайнер выполняет UX и UI дизайн в приложениях.

UX/UI дизайн в приложениях

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

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

Этапы UX проектирования приложения

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

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

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

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

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

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

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

Цветовая гамма

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

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

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

Как мы делаем дизайн приложения

Еще сравнительно недавно само понятие «дизайн» в вопросах создания приложений было единым, но новое время диктует новые условия игры. И если когда-то оформлению приложений не придавали особого значения и ограничивались шаблонными вариантами, то сейчас для завоевания клиентов и получения высоких рейтингов все гонятся за удобством для пользователей или юзабилити. Именно изменениями в отношении к продвижению приложений было вызвано появление двух направлений в некогда едином дизайне – UX и UI. Некоторые специалисты предпочитают объединять эти направления и рассматривают как одно целое, мы же считаем, что это два взаимосвязанных и неразрывно работающих в комплексе крайне важных этапа создания эффективного приложения.

Первым этапом в этой связке идет разработка UX дизайна. За этой аббревиатурой скрывается нечто абстрактное – «Пользовательский опыт» («User Experience»). На этом этапе специалисту необходимо понять, как должно работать будущее приложение, чтобы пользователю было удобно и комфортно им пользоваться. Фигурально выражаясь, специалист «расставляет» стены в доме таким образом, чтобы здание не рухнуло, но при этом было максимально удобным для всех домочадцев. На этой стадии не стоит вопрос визуального оформления «стен и потолков», прорабатывается интерфейсная логика, по которой пользователи будут «ходить» по приложению — дому. Для этого проводится сбор информации о работе подобных программ и ожиданиях пользователей, проектируется взаимодействие пользователя с приложением, создаются прототипы программ, позволяющие буквально «прощупать» приложение и оценить его работу еще до создания рабочей версии даже в демо-режиме. Это позволяет избежать временных и финансовых затрат на стадии разработки, поскольку и сам заказчик, и программисты будут четко представлять себе, как должен выглядеть и работать разрабатываемый продукт.

Логическим продолжением этапа UX является разработка UI дизайна или пользовательского интерфейса («User Interface»). Обращаясь к аллегории из предыдущего пункта, на этом этапе специалист, уже имея на руках планировку здания и представляя, как будут ходить по дому люди, обдумывает, в какой цветовой палитре оформить то или иное помещение, в каком стиле должна быть подобрана мебель. UI-дизайнер, беря за основу результаты трудов UX-дизайнера, «рисует» интерфейс приложения, определяет размеры и цвет кнопок, окон, меню и других элементов мобильного приложения, а также общий стиль оформления и подходящие шрифты.

User Experience – создает логику приложения, делая его удобным, простым и понятным для любого пользователя, а User Interface – воплощает эту логику в осязаемый интерфейс продукта, который увидит пользователь.

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

Как это делается? Дизайн мобильных приложений под Android. | by Olga Chernenka

И рекомендую сразу давать соответствующее название артборду. Все что вам останется сделать в самом конце — экспорт всех артбордов в 160, 240 и 320 dpi.

Адаптация

После того, как вы подготовите все макеты размером 320 px, начинается самое интересное. Отношение 1px (240dpi) к 1px (160dpi) = 1,5. Отношение между 480 и 320 тоже 1,5. Из этого следует, что бы создать макет 480 px с плотностью 240 dpi, вам всего лишь нужно перенести все слои из макета 320px на макет 480px, выбрать reference point location левый верхний угол и увеличить их в 1,5 раза по вертикали и горизонтали (scale 150%). Создать сетку в 8 dp, которая в данном случае равняется 12 px. И повторить эту процедуру со всеми остальными страницами вашего приложения.

Дальше идет 640 px (320 dpi). Соотношение 1px (320dpi) к 1px (160dpi) = 2. 640 к 320 тоже равняется двум. Значит мы копируем слои из макетов 320 и увеличиваем в 2 раза (scale 200%). Шаг сетки 16 px.

reference point location левый верхний угол, scale 150%

Макеты 720 px (320 dpi) мы делаем из 640 px (320 dpi), так как плотность одинаковая. Нам только нужно будет расширить весь дизайн на 80 px.

Metrics

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

Обозначение размеров шрифтов в единицах измерения sp

Все остальные размеры я показываю в отдельной папке, со всеми страницами одного размера (я беру 320 px). Я расставляла размеры вручную, но есть платное расширение PNG Express, стоит 29$, которое может упростить и значительно ускорить процесс.

Это все, чем на данный момент могу поделиться. Как только получим фидбэк от разработчиков и готовое приложение, возможно всплывут еще какие-то моменты, которые нужно будет внести в наш to do list. В таком случае продолжение следует.

почему он важен и где заказать

Содержание статьи

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

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

В 2008 году на рынке разработчиков произошел настоящий бум – компания Apple выпустила iPhone и App Store. Компания Google в этот же год выпускает первый смартфон на операционной системе Android. Появляется такое понятие, как мобильное приложение. Помимо его функциональных возможностей, пользователи оценивают и внешний вид. Если в 2008 году дизайн играл второстепенную роль, то на сегодняшний день – ключевую.

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

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

Дизайн приложения разделяется на UX и UI. UI-дизайнер создает визуальную часть приложения, а UX-дизайнер – техническую. Наша команда внедряет современные технологии и следует трендам. Мы уделяем внимание как внешнему виду, так и функциональным возможностям приложения, чтобы создать интуитивно понятный интерфейс. Так любой пользователь может легко разобраться в программе.

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

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

Вот несколько примеров наших проектов:

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

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

Цена на создание дизайна мобильного приложения сильно варьируется. Она зависит от следующих факторов:

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

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

Хотите заказать разработку app design?

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

MOBILE-Разработка

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

ЗАКАЗАТЬ MOBILE РАЗРАБОТКУ

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

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

Дизайн приложения в Android Studio.

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

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

Вначале просто перетащим на «экран» два компонента: «кнопку» (Button) и «наклейку» (TextView). Обратите внимание, что компоненты добавились не только на заготовку экрана, но и в «дерево компонентов» (обведено красной линией). Работать с «деревом компонентов» очень удобно, поскольку оно позволяет с легкостью перемещать компоненты относительно друг к другу, простым перетаскиванием по «дереву».

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

Кстати, в режиме работы с кодами можно включить предпоказ вида экрана! Это чрезвычайно удобно, так как позволяет сразу увидеть, к каким изменениям приводит использование свойств компонентов. Включить режим можно с помощью выбора Preview в правой части экрана.

Обратите внимание: для компонентов, которые мы поместили на экран, Android Studio автоматически добавил минимальный код.

Если мы начнем писать строку с новым свойством для панели LinearLayout, то сразу обнаружим, что Android Studio автоматически включает режим поддержки. Мы хотим сменить ориентацию расположения компонентов внутри панели-контейнера, поэтому начинаем в свободной строке набирать свойство «ориентация» (orientation) — и тут же получаем варианты возможного автозаполнения кода. Нам остается только выбрать подходящий — система автоматической поддержки немедленно допишет за нас все необходимое. Затем надо указать, что нам нужна ориентация по вертикали (vertical), — а вот это придется сделать вручную (раньше и это можно было сделать через режим автоматической поддержки).

Обратите внимание, как немедленно изменилось расположение компонент на экране.

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

Первым делом сотрем в кодах всех компонентов строки со свойством android: layout_weight=»l»

Затем добавим в код для панели-контейнера свойство, устанавливающее в центр экрана «центр тяжести» размещения всех компонентов на экране («центровка»):

android:gravity=»center»

Добавим в панель-контейнер и цвет фона: android:background=»#ABCDEF»

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

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

К слову, если у вас уже имеется готовый программный продукт, то без грамотно организованной рекламы кампании, как минимум на начальном этапе продвижения в массы, не обойтись. Можно конечно попытаться сделать всё самостоятельно, но без познаний всех тонкостей и особенностей современных поисковых алгоритмов — ошибки неизбежны, потому стоит делегировать организацию рекламной кампании опытным специалистам https://soroka-marketing.ru/, которые возьмут на себя ответственность за весь процесс продвижения, либо его часть, если вы намерены выполнить часть работы по продвижению самостоятельно.

Вам также могут быть интересны следующие статьи:

Качество приложений

Core | Разработчики Android

Последнее обновление: 17 мая 2021 г.

Полезный способ оценить качество приложения — пройтись пешком. через рабочие процессы в вашем приложении и оцените плавность и безопасность опыт приложения.

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

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

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

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

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

Площадь	ID	Тесты	Описание
Навигация	VX-N1	CR-3	Приложение поддерживает стандартную навигацию по кнопке «Назад» и не использует никаких настраиваемых экранных подсказок «Кнопка возврата».
	VX-N2	CR-3	Приложение поддерживает навигацию с помощью жестов для возврата / перехода на главный экран.
	VX-N3	CR-1 CR-3 CR-5	Приложение правильно сохраняет и восстанавливает состояние пользователя или приложения. Приложение сохраняет состояние пользователя или приложения при выходе из режима переднего плана и предотвращает случайную потерю данных из-за обратной навигации и других изменений состояния. При возврате на передний план приложение должно восстановить сохраненное состояние и любую значительную транзакцию с отслеживанием состояния, которая была отложена.Примеры включают: изменения в редактируемых полях, ходе игры, меню, видео и других разделах приложения или игры. Когда приложение возобновляется из переключателя приложений «Недавние», оно возвращает пользователя в то состояние, в котором оно использовалось в последний раз. Когда приложение возобновляется после того, как устройство выходит из спящего (заблокированного) состояния, оно возвращает пользователя в то состояние, в котором оно использовалось в последний раз. При перезапуске приложения из главного экрана или из всех приложений оно должно выполнить одно из следующих действий, в зависимости от того, сколько времени прошло с момента последнего использования: Если приложение использовалось в последний раз недавно (в минутах), восстановите состояние приложения как можно ближе к его предыдущему состоянию. Если с момента последнего использования приложения прошло больше времени, попробуйте восстановить приложение как можно ближе к его предыдущему состоянию; или запустите его с домашнего экрана или другого состояния по умолчанию.
Уведомления	VX-S1	CR-9	Уведомления соответствуют рекомендациям по Material Design. В частности: Уведомления не используются для перекрестного продвижения или рекламы другого продукта, так как это строго запрещено Play Store. Каналы уведомлений определены в соответствии с передовой практикой, а не обслуживают все уведомления из одного канала. Выбор правильного приоритета уведомлений. По возможности, несколько уведомлений объединяются в одну группу уведомлений. Установите время ожидания для уведомлений, где это необходимо. Уведомления являются постоянными, только если они связаны с текущими событиями, такими как воспроизведение музыки или телефонный звонок. Для получения дополнительной информации см. Раздел «Функциональность».
Уведомления	VX-S2	CR-9	Для приложений обмена сообщениями, социальных приложений и разговоров: Используйте уведомления `MessagingStyle` для разговоров. Поддержите действие прямого ответа. Поддерживайте ярлыки бесед и применяйте передовые методы для получения лучшего прямого рейтинга. Опорные пузыри.
Пользовательский интерфейс и графика	VX-U1	CR-5	Приложение поддерживает как альбомную, так и портретную ориентацию (если возможно) и складывание / разворачиваясь. Ориентации предоставляют в основном одни и те же функции и действия и сохраняют функциональную паритетность. Допускаются незначительные изменения в содержании или просмотрах.
	VX-U2	CR-5	Приложение использует весь экран в обеих ориентациях и не учитывает почтовый ящик. изменение ориентации, включая складывание и раскладывание. Допускается незначительный почтовый ящик для компенсации небольших отклонений в геометрии экрана.
	VX-U3	CR-5	Приложение правильно обрабатывает быстрые переходы между ориентацией дисплея и сворачиванием устройства. / разворачивание без проблем с рендерингом или потери состояния.
Визуальное качество	VX-V1	CR-все	Приложение отображает графику, текст, изображения и другие элементы пользовательского интерфейса без заметных искажений, размытия или пикселизации. Приложение должно использовать векторные чертежи, где это возможно. Приложение обеспечивает высококачественную графику для всех целевых размеров экрана и форм-факторов. Не видно наложения на краях меню, кнопок и других элементов пользовательского интерфейса.
	VX-V2	CR-все	Приложение отображает текст и текстовые блоки приемлемым образом для каждого из поддерживаемых в приложении языков. Композиция подходит для всех поддерживаемых форм-факторов. Обрезанные буквы или слова не видны. Не видно неправильных переносов слов внутри кнопок или значков. Расстояние между текстом и окружающими элементами достаточно.
	VX-V3	CR-все	Содержимое приложения и все веб-содержимое, на которое ссылается приложение, поддерживают темную тему.
Доступность	VX-A1	CR-все	Сенсорные мишени должны иметь размер не менее 48dp. Учить больше.
	VX-A2	CR-все	Текст и контент переднего плана приложения должны поддерживать достаточно высокий коэффициент цветовой контрастности. со своим фоном: 3,0: 1 для крупного текста / графики 4,5: 1 для мелкого текста (текст меньше 18 пунктов, или если текст выделен жирным шрифтом и меньше 14 пунктов) Подробнее о цвете и контрасте.
	VX-A3	CR-все	Опишите каждый элемент пользовательского интерфейса, за исключением `TextView` , используя `contentDescription` .

Ваше приложение должно реализовывать ожидаемое функциональное поведение.

Площадь	ID	Тесты	Описание
Аудио	FN-A1	CR-1 CR-8	Звук возобновляется, когда приложение возвращается на передний план, или указывает пользователю, что воспроизведение находится в приостановленном состоянии.
	FN-A2	CR-1 CR-2 CR-8	Если воспроизведение звука является основной функцией, приложение должно поддерживать фоновое воспроизведение.
	FN-A3	CR-0	Когда пользователь инициирует воспроизведение звука, приложение должно выполнить одно из следующих действий в течение одной секунды: Начните воспроизведение звука. Обеспечивает визуальный индикатор того, что аудиоданные готовятся.
	FN-A4	CR-0	Приложение должно запрашивать фокусировку звука при начале воспроизведения звука и отказываться от фокусировки звука при остановке воспроизведения.
	FN-A5	CR-0	Приложение должно обрабатывать запросы других приложений на аудиофокус. Например, приложение может уменьшить громкость воспроизведения, когда другое приложение воспроизводит речь.
Медиа	FN-M1	CR-0 CR-6 CR-8	Если приложение воспроизводит звук в фоновом режиме, оно должно создать уведомление со стилем MediaStyle.
	FN-M2	CR-0	Если приложение воспроизводит видео, оно должно поддерживать воспроизведение «картинка в картинке».
	FN-M3	CR-0	Если приложение кодирует видео, оно должно делать это с использованием стандарта сжатия видео HEVC.
Совместное использование	FN-S1	CR-0	Приложение должно использовать общий лист Android при совместном использовании содержимого. Он может предлагать цели, недоступные для пользовательских решений.
Фоновая служба	FN-B1	CR-6	Приложение избегает запуска излишне долгих служб в фоновом режиме.Чтобы обеспечить бесперебойную работу устройства пользователя, система применяет различные ограничения для фоновых служб. Это не считается хорошим использованием фоновых служб: Поддержание сетевого подключения для уведомлений Поддержание соединения Bluetooth Сохранение включенного GPS Узнайте, как выбрать правильное решение для вашей работы.

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

Площадь	ID	Тесты	Описание
Устойчивость	ПС-С1	CR-все SD-1	Приложение не вылетает или заблокировать поток пользовательского интерфейса, вызывающий ANR (Android Not Ответ ») ошибки. Использовать Google Отчет о запуске Google Play для выявления потенциальных проблем со стабильностью. После развертывания платите внимание к странице Android Vitals в Google Играйте в консоль разработчика.
Производительность	PS-P1	CR-все SD-1	Приложение загружается быстро или предоставляет пользователю обратную связь на экране (индикатор выполнения или аналогичный сигнал), если приложение загружается дольше двух секунд.
	ПС-П2	CR-все SD-1	Приложения должны отображать кадры каждые 16 мс, чтобы достичь 60 кадров в секунду. Разработчики могут использовать опцию рендеринга Profile HWUI при тестировании.Если есть проблемы, доступны инструменты, которые помогут диагностировать медленный рендеринг.
	ПС-П3	ПМ-1	При включенном StrictMode (см. Тестирование StrictMode ниже) красные вспышки (предупреждения о производительности от StrictMode) не отображаются при тестировании приложения. Любые красные вспышки указывают на плохое поведение в отношении хранилища, доступа к сети или утечек памяти.
SDK	PS-T1	CR-0	Приложение работает на последней общедоступной версии платформы Android без сбоев и серьезного воздействия на основные функции.
	ПС-Т2	СП-1	Приложение предназначено для последней версии Android SDK, необходимой для соответствия требованиям Google Play, путем установки значения `targetSdk` .
	ПС-Т3	СП-1	Приложение создано с использованием последней версии Android SDK путем установки значения `compileSdk` .
	ПС-Т4	СП-2 СП-3	Все используемые SDK Google или сторонних производителей являются актуальными.Любые улучшения этих SDK, такие как стабильность, совместимость или безопасность, должны быть доступны пользователям своевременно. Для SDK Google рассмотрите возможность использования SDK на базе сервисов Google Play, если они доступны. Эти SDK обратно совместимы, получают автоматические обновления, уменьшают размер пакета вашего приложения и эффективно используют ресурсы устройства. Разработчик несет ответственность за кодовую базу всего приложения, включая любые сторонние SDK.
	ПС-Т5	СП-3	Приложение не использует интерфейсы, отличные от SDK.
	ПС-Т6	СП-2	В производственное приложение не включены библиотеки отладки. Это может вызвать проблемы с производительностью, а также с безопасностью.
Аккумулятор	ПС-Б1	БА-1	Приложение правильно поддерживает функции управления питанием, представленные в Android 6.0 (Doze и App Standby). В случае, если основные функции нарушены из-за управления питанием, только соответствующие приложения могут запросить исключение.См. Раздел Поддержка других вариантов использования в Doze и App Standby. Во время разработки разработчики могут тестировать поведение приложения в режиме ожидания и дремоты с помощью этих команд ADB. Что касается использования батареи, разработчики могут использовать профилировщик энергии Android Studio или инструмент Battery Historian в сочетании с запланированной фоновой работой для диагностики непредвиденного использования батареи.

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

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

Площадь	ID	Тесты	Описание
Разрешения	SC-P1	SC-4	Приложение запрашивает только абсолютного минимального количества разрешений , необходимых для поддержки рассматриваемого варианта использования.Для некоторых разрешений, таких как местоположение, по возможности используйте грубое местоположение вместо точного.
	SC-P2		Приложение запрашивает разрешение на доступ к конфиденциальным данным (например, SMS, журнал вызовов или Место нахождения) или услуги, которые стоят денег (например, Dialer или SMS), только если они напрямую связаны с ядром варианты использования приложений. Последствия, связанные с этими разрешениями, должны быть хорошо известны пользователю. В зависимости от того, как вы используете разрешения, может быть альтернативный способ для выполнения сценария использования вашего приложения, не полагаясь на доступ к конфиденциальной информации.Например, вместо запрашивая разрешения, связанные с контактами пользователя, может быть более целесообразным запросить доступ используя неявное намерение.
	SC-P3	CR-0	Приложение запрашивает разрешения времени выполнения в контексте, когда функция запрашивается, а не заранее во время запуска приложения.
	SC-P4	CR-0	Приложение четко объясняет, почему необходимы определенные разрешения, или следуйте рекомендованному процессу для объясните, зачем ему нужно разрешение.
	SC-P5	CR-0	Приложение должно корректно деградировать, когда пользователи отказывают в разрешении или отзывают его. Приложение не должно полностью препятствовать доступу пользователя к приложению.
Данные и файлы	SC-DF1	SC-1	Все конфиденциальные данные хранятся во внутренней памяти приложения.
	SC-DF2	SC-10	Никакие личные или конфиденциальные данные пользователя не регистрируются в системном журнале или журнале конкретного приложения.
	SC-DF3		Приложение не использует не сбрасываемые аппаратные идентификаторы, такие как IMEI, для идентификации.
Идентификационный номер	SC-ID1	CR-0	Приложение предоставляет подсказки для автозаполнения учетных данных и другой конфиденциальной информации, такой как данные кредитной карты, физический адрес и номер телефона.
	SC-ID2	CR-0	Интегрируйте One Tap для Android для беспрепятственного входа в систему.
	SC-ID3	CR-0	Приложение поддерживает биометрическую аутентификацию для защиты финансовых транзакций или конфиденциальной информации, такой как важные пользовательские документы.
Компоненты приложения	SC-AC1	SC-5	Приложение явно устанавливает атрибут `android: exported` для всех действий, служб, приемников вещания и особенно поставщиков контента. Экспортируются только компоненты приложения, которые обмениваются данными с другими приложениями , или компоненты, которые должны вызываться другими приложениями .
	SC-AC2	CR-0 SC-4	Все намерения и трансляции соответствуют лучшим практикам: Используйте явные намерения, если целевое приложение четко определено. Используйте намерения, чтобы отложить разрешения для другого приложения, у которого уже есть разрешение. Безопасный обмен данными между приложениями. Намерения, содержащие полезную нагрузку, проверяются перед использованием. Если вам нужно передать намерение другому приложению, чтобы принимающее приложение могло вызывать и ожидать обратного вызова в вызывающем приложении, не включайте вложенное намерение в дополнительные функции.Используйте PendingIntent. При настройке PendingIntents явно установите флаг неизменяемости, где это применимо.
	SC-AC3	SC-3	Все компоненты, которые совместно используют контент между вашими приложениями , используют `android: protectionLevel = "signature"` для настраиваемых разрешений. Сюда входят действия, услуги, приемники вещания и особенно поставщики контента. Приложения не должны полагаться на доступ к списку установленных пакетов.Доступ ограничен начиная с Android 11.
Сеть	SC-N1	SC-9	Весь сетевой трафик отправляется через SSL.
	SC-N2	SC-6	Приложение объявляет конфигурацию сетевой безопасности.
	SC-N3		Если приложение использует сервисы Google Play, провайдер безопасности инициализируется при запуске приложения.
Веб-просмотры	SC-W1	SC-6	Не используйте setAllowUniversalAccessFromFileURLs () для доступа к локальному контенту. Вместо этого используйте WebViewAssetLoader.
Веб-просмотры	SC-W2	SC-7	WebView не должны использовать addJavaScriptInterface () с ненадежным содержимым. На Android 6.0 и более поздних версиях используйте вместо этого каналы сообщений HTML.
Исполнение	SC-E1		Приложение не загружает динамически код извне APK.Разработчикам следует использовать пакеты Android App Bundle, которые включают доставку функций Play и доставку активов Play. С августа 2021 года использование наборов Android App Bundle станет обязательным для всех новых приложений в магазине Google Play.
Криптография	SC-C1		Приложение использует надежные криптографические алгоритмы, предоставляемые платформой, и генератор случайных чисел. Кроме того, в приложении не реализованы пользовательские алгоритмы.

Убедитесь, что ваши приложения можно опубликовать в Google Play.

Площадь	ID	Тесты	Описание
Политики	ГП-П1	GP-все	Приложение строго соблюдает условия Политики в отношении содержания для разработчиков Google Play и не предлагает неприемлемый контент, не использует интеллектуальную собственность или торговые марки других лиц и т. Д.
Политики	GP-P2	ГП-1	Уровень зрелости приложения установлен соответствующим образом в соответствии с Руководством по оценке контента.
Страница сведений о приложении	GP-D1	ГП-1 ГП-2	Графический элемент приложения соответствует рекомендациям, изложенным в этом статья поддержки. Убедитесь, что: Список приложений включает высококачественную функциональную графику. Графический элемент не содержит изображений устройств, снимков экрана или небольшого текста, который будет неразборчивым при уменьшении и отображении на экране наименьшего размера, на который нацелено ваше приложение. Графическое изображение не похоже на рекламу.
	GP-D2	ГП-1	Скриншоты и видео приложения не отображают и не ссылаются на устройства, отличные от Android.
	GP-D3	ГП-1	Скриншоты или видео приложения не представляют содержание и возможности вашего приложения вводящим в заблуждение образом.
Поддержка пользователей	GP-X1	ГП-1	Общие ошибки, о которых сообщают пользователи, на вкладке «Обзоры» на странице Google Play устраняются, если они воспроизводимы и возникают на многих различных устройствах.Если ошибка возникает только на нескольких устройствах, вы все равно должны устранить ее, если эти устройства особенно популярны или новы.

С целью настройки тестовой среды для этого контрольного списка мы рекомендуем следующее:

Сосредоточено на тестировании эмулятора — Android Emulator — отличный способ протестировать ваше приложение в разных версиях Android и с разными разрешениями экрана. Вы должны настроить эмулируемые устройства (AVD) для представления наиболее распространенных форм-факторов и комбинаций аппаратного и программного обеспечения для вашей целевой пользовательской базы.В дополнение к тестированию для телефонов мы также рекомендуем вам протестировать другие форм-факторы, используя следующие эмуляторы при минимуме :
- Складные элементы — Складывающиеся 7,6 дюйма с внешним дисплеем (это указано в списке телефонов в диспетчере AVD).
- — Pixel C 9,94 дюйма (2560 x 1800 пикселей).
- Для тестирования уведомлений мобильного приложения соедините мобильное устройство / эмулятор с эмулятором Wear OS — Wear OS Round 1.84 ».
Аппаратные устройства — Ваша тестовая среда должна включать небольшое количество реальных аппаратных устройств, которые представляют ключевые форм-факторы и комбинации аппаратного и программного обеспечения, которые в настоящее время доступны потребителям.Нет необходимости тестировать на каждое устройство , представленное на рынке — скорее, вам следует сосредоточиться на небольшом количестве типичных устройств, даже используя одно или два устройства в каждом форм-факторе.
Лаборатории тестирования устройств — Вы также можете использовать сторонние службы, такие как Firebase Test Lab, для тестирования своего приложения на более широком спектре устройств.
Тестируйте с последней версией Android — Помимо тестирования репрезентативных версий Android для целевой пользовательской базы, вы всегда должны тестировать последнюю версию Android (в настоящее время Android 11).Это гарантирует, что последние изменения в поведении не окажут негативного влияния на взаимодействие с пользователем.

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

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

Тип	Тест	Описание
Базовый пакет	CR-0	Перейдите ко всем частям приложения — всем экранам, диалоговым окнам, настройкам и всем пользовательским потокам. Если приложение позволяет редактировать или создавать контент, играть в игры или воспроизводить мультимедиа, обязательно протестируйте эти потоки. При тестировании приложения добавьте прерывания от других приложений, например получение уведомления или телефонного звонка; и применять временные изменения к атрибутам устройства, таким как подключение к сети, функция батареи, доступность GPS и загрузка системы. Введите и протестируйте все потоки покупок в приложении
	CR-1	На каждом экране приложения нажмите на устройстве клавишу «Домой» или проведите пальцем вверх при навигации с помощью жестов, затем повторно запустите приложение с экрана «Все приложения».
	CR-2	На экране каждого приложения переключитесь на другое работающее приложение, а затем вернитесь к тестируемому приложению с помощью переключателя приложений «Недавние».
	CR-3	На каждом экране приложения (и в диалоговых окнах) нажмите кнопку «Назад» или воспользуйтесь жестом прокрутки назад.
	CR-5	На каждом экране приложения поверните устройство между альбомной и книжной ориентацией и сложите / разверните не менее трех раз.
	CR-6	Переключитесь на другое приложение, чтобы отправить тестовое приложение в фоновый режим. Перейдите в Настройки и проверьте, есть ли в тестовом приложении какие-либо службы, работающие в фоновом режиме. В Android 4.0 и выше перейдите на экран приложений и найдите приложение на вкладке «Запуск».
	CR-7	Нажмите кнопку питания, чтобы перевести устройство в спящий режим, затем нажмите кнопку питания еще раз, чтобы вывести экран из спящего режима.
	CR-8	Настройте блокировку экрана на устройстве. Нажмите кнопку питания, чтобы перевести устройство в спящий режим (который блокирует устройство). Затем снова нажмите кнопку питания, чтобы вывести экран из спящего режима и разблокировать устройство.
	CR-9	Запускайте и наблюдайте в ящике уведомлений все типы уведомлений, которые может отображать приложение. Разверните уведомления, где это возможно (Android 4.1 и выше), и коснитесь всех доступных действий.
	CR-10	Просмотрите поддержку для других вариантов использования в режиме ожидания и ожидания приложений.
Установить на SD-карту	СД-1	Повторите Core Suite с приложением, установленным на SD-карту устройства (если приложение поддерживает этот метод установки). Чтобы переместить приложение на SD-карту, вы можете использовать «Настройки»> «Информация о приложении»> «Переместить на SD-карту».
Производительность и стабильность	СП-1	Просмотрите файл манифеста Android и конфигурацию сборки, чтобы убедиться, что приложение создано на основе последнего доступного SDK ( `targetSdk` и `compileSdk` ).
	СП-2	Просмотрите файл `build.gradle` на предмет устаревших зависимостей.
	СП-3	Используйте инструмент Android Studio lint для обнаружения использования интерфейса, отличного от SDK. Существуют и другие альтернативные методы тестирования.
Мониторинг производительности	ПМ-1	Повторите Core Suite с включенным профилированием StrictMode. Обратите пристальное внимание на сборку мусора и ее влияние на взаимодействие с пользователем.
Аккумулятор	БА-1	Повторить Core Suite в циклах дремоты и ожидания приложений. Обратите особое внимание на будильники, таймеры, уведомления, синхронизацию и т. Д. Требования и рекомендации см. В разделе «Тестирование с Doze и режим ожидания приложения».
Безопасность	SC-1	Просмотрите все данные, хранящиеся во внешнем хранилище.
	СК-2	Просмотрите, как обрабатываются данные, загруженные из внешнего хранилища.
	SC-3	Просмотрите всех поставщиков содержимого, определенных в файле манифеста Android. Убедитесь, что у каждого провайдера есть соответствующий уровень защиты .
	SC-4	Просмотрите все разрешения, необходимые вашему приложению, в файле манифеста, во время выполнения и на экране настроек приложения (Настройки> Информация о приложении) на устройстве.
	SC-5	Проверьте все компоненты приложения, определенные в файле манифеста Android, на предмет соответствующего состояния экспорта.Экспортируемое свойство должно быть явно установлено для всех компонентов.
	SC-6	Просмотрите конфигурацию сетевой безопасности приложения и убедитесь, что никакие проверки конфигурации не завершились ошибкой.
	SC-7	Для каждого WebView перейдите на страницу, для которой требуется JavaScript.
	SC-8	В каждом WebView попытайтесь перейти к сайтам и контенту, которые не загружаются непосредственно вашим приложением.
	SC-9	Объявите конфигурацию сетевой безопасности, которая отключает трафик открытого текста, затем протестируйте приложение.
	SC-10	Запустите приложение и проверьте все основные функции, наблюдая за журналом устройства. Никакая личная информация пользователя не должна регистрироваться.
Google Play	ГП-1	Войдите в консоль разработчика Google Play, чтобы просмотреть свой профиль разработчика, описание приложения, снимки экрана, изображения функций, рейтинг контента и отзывы пользователей.
	ГП-2	Загрузите графическое изображение и снимки экрана и уменьшите их, чтобы они соответствовали размерам дисплеев на устройствах и форм-факторам, на которые вы ориентируетесь.
	ГП-3	Просмотрите все графические ресурсы, мультимедиа, текст, библиотеки кода и другое содержимое, которое упаковано в приложение или загружаемый файл расширения.

Тестирование с помощью StrictMode

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

Вы можете настроить политику мониторинга потоков, используя StrictMode.ThreadPolicy.Builder и включите весь поддерживаемый мониторинг в ThreadPolicy с использованием detectAll () .

Не забудьте включить визуальное уведомление о нарушениях политики для ThreadPolicy с использованием штраф FlashScreen () .

Руководство по разработке Android | CodePath Android Cliffnotes

Обзор
При изучении разработки приложений для Android одна из наиболее важных тем, которую нужно понять, — это создание восхитительных мобильных интерфейсов и взаимодействий.Это означает понимание соглашений во вселенной Android, общих правил стиля, шаблонов и т. Д.
Указания
Официальная документация по Android содержит отличный набор ресурсов для дизайна. В этом разделе будут выделены несколько ключевых рекомендаций по дизайну и даны ссылки на соответствующие руководства. Вы также можете ознакомиться с этими советами по дизайну Android, чтобы получить быстрый обзор.
Принципы проектирования
Ознакомьтесь с этими принципами дизайна, которые были разработаны командой Android User Experience Team и для них, чтобы учитывать интересы пользователей.Учитывайте их, применяя собственное творчество и дизайнерское мышление. Отклоняться с целью.
Материальный дизайн
С выпуском Android 5.0 обновлены рекомендации по дизайну современного пользовательского интерфейса Android. Эти рекомендации называются «материальным дизайном». Эта новая структура включает в себя несколько изменений интерфейса приложений Android, и Google настоятельно рекомендует принять эти новые принципы. Дополнительные сведения см. В следующих ресурсах:
Используя эти материалы, вы сможете понять и начать соблюдать эти рекомендации для своих собственных приложений.
Чистый Android
При планировании своего приложения для Android помните, что разные платформы работают по разным правилам и соглашениям. Дизайнерские решения, которые имеют смысл на одной платформе, будут выглядеть неуместными в контексте другой платформы. Если в прошлом вы создавали веб-приложения и / или мобильные приложения, просмотрите это Руководство по Pure Android, чтобы узнать, как избежать ошибок в дизайне Android. Ознакомьтесь с этой статьей от jackrabbit для более подробной разбивки.
Обзор пользовательского интерфейса
Посетите страницу обзора пользовательского интерфейса, на которой представлен общий обзор ключевых элементов пользовательского интерфейса.В частности, ознакомьтесь с общим пользовательским интерфейсом приложения, в котором описаны ключевые элементы пользовательского интерфейса, включая панель действий, панель навигации и область содержимого.
Цветовые схемы
Ознакомьтесь с руководством по цветовым схемам и цветами Android, которые включают общие цветовые палитры для приложений Android. За красивыми цветовыми схемами обращайтесь:
Для материального дизайна см. Палитру материалов для выбора цвета.
Типографика
Ознакомьтесь с руководством по типографике, чтобы понять распространенные типы шрифтов для приложений Android, а также цвета и размеры шрифтов по умолчанию.См. Библиотеку каллиграфии для каждого пользовательского шрифта.
Иконография
Значок — это любое изображение, которое занимает небольшую часть экрана и обеспечивает быстрое и интуитивно понятное представление действия, статуса или приложения. Иконки должны быть созданы для работы на широком спектре устройств. Также существует множество различных типов значков, таких как значок «Launcher» на главном экране, значки ActionBar и значки уведомлений. Чтобы начать работу с иконками, ознакомьтесь с руководством по стилю иконок материалов.Если вы ищете актуальные значки для использования, посетите значки materialdesignicons.com и material.io.
Для получения более подробной информации ознакомьтесь с руководством по иконографии и рекомендациями по дизайну значков. В частности, постарайтесь понять советы по дизайну и следовать правильным соглашениям об именах для различных значков.
Гибкая конструкция
Android работает на миллионах телефонов, планшетов и других устройств с экранами самых разных размеров и форм-факторов. Воспользовавшись преимуществами гибкой системы макетов Android, вы можете создавать приложения, которые плавно масштабируются от больших планшетов до небольших телефонов.Посетите следующие ресурсы для получения дополнительной информации:
Проектирование для Android статей
Общие шаблоны
Существует около десятка общих шаблонов пользовательского интерфейса, которые интегрированы почти в каждое приложение. При создании экранов Android важно придерживаться этих общих руководств по шаблонам. Наиболее важные из них перечислены ниже:
Общая структура приложения — общие рекомендации по элементам приложения.
Жесты UX — Жесты позволяют пользователям взаимодействовать с вашим приложением, манипулируя предоставленными вами экранными объектами.
UX навигации — последовательная навигация является важным компонентом общего пользовательского опыта
Пользовательский интерфейс ActionBar. Панель действий — один из наиболее важных элементов дизайна, которые вы можете реализовать.
Прокрутка просмотров — эффективная навигация — один из краеугольных камней хорошо разработанного приложения.
Панель навигации. Панель навигации — это панель, которая переходит от левого края экрана и отображает основные параметры навигации приложения.
Пользовательский интерфейс уведомлений — позволяет вашему приложению информировать пользователя о событиях, таких как новые сообщения чата или событие календаря.
Настройки — место в вашем приложении, где пользователи указывают свои предпочтения относительно того, как ваше приложение должно вести себя.
Следуя этим и связанным с ними руководствам, подробно объясняется, как создавать согласованные и привлекательные мобильные приложения.
Сравнительный анализ
Один из лучших способов понять передовые практики и шаблоны для разработки приложений — это тестирование других популярных приложений на платформе. Один из лучших способов сделать это — купить устройство Android и использовать множество популярных приложений.В дополнение к этому, мы можем проводить сравнительный анализ, проверяя веб-сайты, которые предоставляют нам широкий выбор приложений и то, как они достигают определенных общих шаблонов пользовательского интерфейса. Для этого мы можем проверить следующие сайты:
UI-Oh-My — отличный ресурс для просмотра скриншотов приложений.
Вдохновленный-ui — Бесконечный список красивого дизайна пользовательского интерфейса
mobilepatterns — аккуратно организованные общие шаблоны экрана
pttrns — Список экранов android по категориям
androidniceties — Блог красивых интерфейсов
androidux — исследует общие шаблоны для UX
.
androidpatterns — шаблоны пользовательского интерфейса, упорядоченные по таким вопросам, как «Как разрешить пользователям управлять своими учетными записями?»
Использование указанных выше сайтов для создания интуитивного понимания того, как создавать различные пользовательские интерфейсы в ваших приложениях.
Каркас
При разработке мобильного приложения есть несколько этапов, которые вы, вероятно, пройдете во время гибкой разработки. Во-первых, вы определяете основную ценность приложения и определяете ключевые пользовательские сценарии. Оттуда полезно начать определять и рисовать различные пользовательские интерфейсы и взаимодействия с пользователем для приложения.
Самый простой способ создания каркаса — это создание эскизов с низкой точностью на бумаге вручную. Чтобы упростить задачу, вы можете распечатать масштабированный фрейм Android.Вы также можете использовать множество отличных цифровых инструментов:
Pencil Project — отличный бесплатный кроссплатформенный инструмент для создания каркасов с трафаретами для Android
FluidUI — онлайн-инструмент для создания каркасов, бесплатный для ограниченного использования с обширными наборами шаблонов для Android
MockingBird — онлайн-инструмент для создания каркасов, бесплатный для ограниченного использования, без шаблонов для Android
Balsamiq — чрезвычайно мощный инструмент для создания каркасов, используемый многими профессионалами отрасли.
Дополнительную перспективу и примеры см. В документации Android по каркасному моделированию.
Список литературы
iOS и Android. Дизайн пользовательского интерфейса приложений: объяснение различий (2021)
Если вы разрабатываете для iOS и для Android (материальный дизайн) версии приложения , это руководство станет вашим новым лучшим другом 😎.
Мы собираемся рассмотреть наиболее важных различий между iOS и Android для дизайнеров UX / UI. Если вы создали приложение на одной платформе , это большая часть того, что вам нужно знать , чтобы «перевести» его на другую платформу.Но! — это , руководство , и в основном все, что я скажу, где-то противоречит, даже самим Apple / Google. Речь идет о переводе «мышления iOS» в «мышление Android» и наоборот.
Вот что мы расскажем. Пропустите или прочтите это прямо — как урод. Это ваш вызов.
Обзор основных отличий
Навигация
Органы управления
Типографика
Другие стандарты платформы
iOS vs.Дизайн пользовательского интерфейса Android: основные отличия
Вот наиболее важных отличий , которые UX / UI дизайнеры должны учитывать при «переводе» приложения с iOS на Android или наоборот:
О, и прежде чем мы действительно погрузимся в подробности, давайте ответим на один важный вопрос, который образует здесь все остальное …
У меня
есть , чтобы мои приложения для Android и iOS были разными?
Короче говоря: нет.
Apple и Google — очень умные компании с миллионом пользователей каждая.Они будут делать ошибки UX, как и все остальные, но в целом, когда они определяют язык дизайна для стандартного способа работы их системы, они не будут делать невероятно вопиющих ошибок. Итак, хотя я представляю два способа сделать все ниже (способ iOS и способ Android), ни один из них не является неправильным . Если ваши пользователи могут уверенно перемещаться и использовать созданное вами приложение, тогда никто не сможет запретить вам использовать вкладки на iOS или модальные представления на Android.
Эта статья написана в духе обучения «думать на iOS» или «думать на Android» — и если ваша цель — создать приложение для обеих платформ, но при этом каждая из них будет чувствовать себя родной для той системы, в которой она работает, то это руководство будет огромным подспорьем.
С учетом сказанного, приступим.
iOS и Android-навигация
Навигация в верхней части экрана
Начнем буквально сверху. Каждая платформа имеет разные стандарты того, что отображается в верхней части большинства экранов.
В iOS (необязательное) левое действие почти всегда представляет собой своего рода «возврат» — последовательно ли к предыдущему экрану («Шаг 2» возвращается к «Шагу« 1 ») или к родительскому экрану иерархически (« Входящие »Переходит в« Почтовые ящики »).В качестве альтернативы здесь можно указать не связанный пункт назначения. Заголовок страницы практически всегда присутствует и начинается с большого размера, но сжимается вместе с заголовком по мере того, как пользователь прокручивает страницу. Необязательные действия правой страницы могут отображаться как одно текстовое действие или несколько действий значка .
На Android заголовок страницы выравнивается по левому краю. Слева от заголовка страницы не должно быть ничего, но (а) если страница является страницей верхнего уровня и в приложении есть кнопка гамбургера, она появляется там, или (б) если эта страница следует за другой последовательно, вы можете при желании добавить кнопку возврата.
Ресурсы: панели навигации iOS; Верхняя панель приложения Material Design
Основные пункты назначения для навигации
Основные части или «пункты назначения» в приложении расположены по-разному.
В приложениях iOS основные места назначения в приложении перечислены как вкладки в нижней части .
Всего 2-5 вкладок
Они обозначены кеглем 10 шрифтом
Они представляют собой основные направления или «существительные» приложения
Как бы то ни было, многие популярные сторонние приложения для iOS также соответствуют нескольким дополнительным рекомендациям :
Любая вкладка, которая представляет основное действие приложения — например, добавление новой фотографии в приложение на основе фотографий, — расположена по центру
Появляется любая вкладка, связанная с профилем или настройками последняя
Появляется поиск секунд
Приложения iOS по умолчанию, с другой стороны, (1) не поощряют действия на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) отображают поиск из последних .
Самая большая разница в приложениях Android состоит в том, что одни и те же основные пункты назначения более разбросаны по интерфейсу — часто между (а) кнопкой гамбургера, (б) панелью поиска, (в) вкладками или (г) плавающей кнопка действия. Мы поговорим обо всех четырех в следующих разделах. О, и примечание : Android в последнее время использует нижнюю навигацию, как и iOS, так что у вас может не быть такой большой разницы.
Ресурсы: панели вкладок iOS; Материальный дизайн понимает навигацию (примечание: это немного теоретически)
Дополнительные пункты назначения
В iOS пункты назначения навигации, которые не помещаются на нижней панели вкладок, могут (а) быть переведены на общую вкладку «Еще» или (б) отображаться как действия в верхнем левом или верхнем правом углу другие направления.
В Android дополнительные пункты назначения для навигации перечислены в боковом меню, доступном при нажатии кнопки гамбургера.
Примечание: хотя Apple специально не поощряет использование кнопки гамбургера (или не использует ее в своих приложениях по умолчанию), во многих сторонних приложениях iOS есть одна , и это просто еще один выбор, который можно сделать, если хотите. использовать это или нет. Лучшая практика — избегать всего, что скрывает важные вещи, потому что очевидное всегда побеждает.
Ресурсы: панель навигации Material Design
Шаблон «Назад» на iOS vs.Android
В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.
Способ возврата (iOS) Контекст, в котором это работает
Нажмите кнопку «Назад» в верхнем левом углу экрана Любой экран, на котором отображается действие «Назад».
Проведите пальцем вправо от левого края экрана Любой экран, на котором в левом верхнем углу отображается действие «Назад».
Нажмите «Готово» в правом верхнем углу экрана. Модальные виды без редактирования
Проведите пальцем вниз по содержимому экрана Модальный или полноэкранный режимы
Что такое модальный и полноэкранный режимы просмотра? Рад, что ты спросил.
Модальные представления — это одноэкранные задачи, которые появляются при перемещении вверх на переднем плане, позволяя предыдущему экрану заглядывать вверх, отступая на задний план. Вы можете закрыть их, проведя пальцем вниз или нажав действие «Назад» вверху.
Полноэкранные просмотры — это мультимедийные данные, такие как фотографии или видео, которые занимают весь экран. Их можно закрыть, проведя пальцем вниз на iOS и Android .
На Android вернуться назад намного проще: для Android 10 и новее просто проведите пальцем с любой стороны экрана внутрь — всегда будет перемещаться назад .Для Android 9 используйте вездесущую кнопку «Назад» в нижнем левом углу экрана.
iOS и Android. Дизайн управления
Основные кнопки призыва к действию
В iOS основная кнопка страницы обычно находится в правом верхнем углу.
На Android , однако, основная кнопка страницы часто появляется в нижнем — справа как плавающая кнопка действия, или сокращенно FAB.
Стоит отметить, что для каждой платформы по-прежнему будут исключения.Давайте взглянем.
Иногда на iOS важные действия на странице появляются на нижней панели инструментов. Apple любит подчеркивать, что это , на самом деле отличается от панели вкладок, но теперь идет на .
Аналогичным образом, иногда на Android важные действия будут появляться в верхней части экрана.
Ресурсы: кнопки iOS; Плавающая кнопка действия Material Design
Поиск на iOS по сравнению с Android
Как в iOS , так и в Android , поиск является обычным, но очень гибким элементом управления.Иногда это основная задача приложения, иногда — крайний вариант использования, и в большинстве случаев это промежуточный вариант. Как и следовало ожидать, каждая платформа обеспечивает здесь некоторую гибкость. Давайте посмотрим на общие парадигмы.
Одно различие между поиском в стиле iOS и Android:
Чтобы отменить поиск, нажмите «Отмена» на iOS или «←» на Android
Чтобы удалить текущий запрос и остаться на экране поиска, нажмите «X» на iOS или «X» на Android.
Когда поиск — это очень важная функция, iOS и Android сразу отобразят строку поиска.Как всегда на этих платформах, при нажатии на панель поиска открывается совершенно отдельный экран.
Когда поиск не так важен или распространен, вы можете получить к нему доступ через другие места.
В iOS поиск обычно отображается как одна из вкладок на основных вкладках или как действие на верхней панели навигации.
На Android вы также увидите это в контекстных действиях на верхней панели.
Ресурсы: панели поиска iOS; Шаблон поиска Material Design
Меню действий iOS и Android
В iOS меню действий может быть вызвано любой кнопкой или попыткой выполнить какое-либо действие.Они скользят снизу вверх, где до них легко дотянуться большим пальцем.
Однако на Android нижние листы появляются только при нажатии трехточечного значка «меню шашлыка» (который является значком Android для «дополнительных опций»). А появление снизу обычно бывает только тогда, когда есть много возможных действий.
Обе платформы имеют стандарты для оперативных меню.
Более новая (iOS 13) функция iOS , называемая «контекстными меню», показывает связанные действия, когда вы нажимаете и удерживаете элемент.Когда отображается контекстное меню, фон размывается.
А на Android многие меню появятся на месте прямо на элементе. В более новых версиях Android меню будет закрывать сам значок шашлыка.
Ресурсы: листы действий iOS, контекстные меню; Меню Android, нижние листы
Элементы управления выбором
На мобильных устройствах разумно обрабатывать выбор из нескольких вариантов иначе, чем выбор из множества вариантов.
Для выбора среди относительно небольшого числа вариантов используйте средство выбора в iOS .Средства выбора могут отображаться закрепленными внизу (как показано выше) или встроенными в контент (см. «Средства выбора даты» ниже для примера).
Для выбора среди нескольких параметров в Android обычно используется раскрывающееся меню (которое появляется на месте) или модальное диалоговое окно (которое появляется по центру и затемняет фон приложения) со списком параметров.
Для более длинных списков параметров или когда возможен множественный выбор, обычно отображается специальный «экран выбора» как на iOS , так и на Android .Одна из самых больших ошибок начинающих дизайнеров в мобильном дизайне — , а не , посвящение всего экрана выбору одного варианта с множеством опций.
Ресурсы: средства выбора iOS; Выпадающие меню Android, диалоговые окна
Выбор даты на iOS по сравнению с Android
В iOS средства выбора даты принимают вид любого другого элемента управления выбора, но со столбцом для дня, месяца и (необязательно) года.
Android имеет собственный элемент управления выбором даты.Вы можете указать год, но не включать его, или разрешить пользователю выбирать, включать ли он его.
Ресурсы: сборщик iOS; Средство выбора даты Android (обратите внимание на различия в спецификации Material Design)
Вкладки iOS и Android
Стоит отметить, что iOS не имеет элемента управления, визуально напоминающего «вкладки». Вместо этого Apple призывает вас использовать сегментированную кнопку для перехода между родственными представлениями.
В Android вкладка в стиле «плоский дизайн» используется для того же дисплея.
Ресурсы: сегментированные элементы управления iOS; Вкладки Material Design
Шаблон «Отменить» на iOS и Android
В iOS предупреждения появляются в центре экрана, но вы также можете видеть, как предупреждения скользят вверх из нижней части экрана (технически называемые «панелями действий» на жаргоне iOS). Деструктивные действия (например, удаление чего-либо) — красные.
На Android некоторые предупреждения появляются в центре экрана. Однако для предупреждений, которые не требуют ввода данных пользователем и должны исчезнуть через несколько секунд, вы можете использовать «закусочные».Snackbar — это фантастика, потому что (а) они дают вам возможность сообщить пользователю, что его действие было успешным, и (б) вы, , можете добавить к ним действие или два, что делает их идеальным местом для «Отменить». . И когда дело доходит до этого, я предпочитаю дать своим пользователям возможность исправить ошибку, а затем дважды спрашивать их, когда они пытаются принять важное решение.
Ресурсы: Отмена iOS; Закусочные Material Design
iOS против Android Типографика
Шрифт по умолчанию
Хотя нет необходимости устанавливать в приложении iPhone по умолчанию шрифт iPhone или аналогичный шрифт для Android, полезно знать, какие системные шрифты являются , на всякий случай, если вы хотите имитировать стиль нативного приложения.
Системный шрифт iOS называется SF. Это компактный шрифт, предназначенный для удобочитаемости при небольших размерах. Вы можете скачать SF здесь.
Системный шрифт Android называется Roboto. Хотя в целом это очень похожий на SF шрифт, у него более высокие буквы и немного больше места для передышки. Вы можете скачать Roboto здесь.
Кроме того, большая часть ОС Android установлена в проприетарном шрифте Google под названием Product Sans, который недоступен для стороннего использования.
Стили текста
В другой статье, состоящей из нескольких частей, я собрал подробное описание того, как стилизовать текст в приложении iPhone и как стилизовать текст в приложении Android .
Ресурсы: рекомендации по типографике для iOS; Руководство по типографике Material Design
iOS и Android Стандарты других платформ
Размер и форма значка приложения
Вам следует разработать значки следующих размеров для приложений iPhone:
Размер значка Где используется
180×180 пикселей Главный экран iPhone для телефонов @ 3x (например, все модели iPhone 12, 11 Pro, X, Xs, 8+)
120×120 пикселей Главный экран iPhone для телефонов @ 2x (e.грамм. 11, XR, 8)
1024×1024 пикселей Магазин приложений
В конечном счете, ваш значок можно использовать и в других размерах, но если вы создадите его в 60 пикселей, а затем убедитесь, что он хорошо смотрится в 120×120, 180×180 и 1024×1024 пикселей, вы золотой.
Создавайте значки следующих размеров для приложений Android:
Размер значка Где используется Кратное 48×48 пикселей
48×48 пикселей Главный экран (телефоны со средним разрешением) 1х
72×72 пикселей Главный экран (телефоны с высоким разрешением) 1.5x
96×96 пикселей Главный экран (телефоны xhdpi) 2x
144×144 пикселей Главный экран (телефоны xxhdpi) 3x
192×192 пикселей Главный экран (телефоны xxxhdpi) 4x
512×512 пикселей Большая версия для Google Play store (все устройства) НЕТ
Итак, если вы (1) создадите красивый векторный значок размером 48×48 пикселей, (2) увеличите масштаб до 400%, чтобы убедиться, что он по-прежнему выглядит великолепно, и (3) создадите отдельную версию с размером 512×512 пикселей, вы будете золотыми .
Когда вы впервые посмотрите на таблицы значков, которые вам нужны для iPhone или Android, это может показаться довольно сложным. Но пока вы знаете базовый размер и можете проверять и экспортировать его с большим кратным увеличением, это совсем не сложно.
Ресурсы: рекомендации по значкам приложений iOS; Рекомендации по значкам приложений для материального дизайна (к сожалению, здесь ничего не говорится о размерах значков)
iOS и Android Минимальный размер целевой точки
Платформа Минимальный размер метки
iOS 44x44pt
Android 48x48dp
Обратите внимание, что точки Apple («pt») и пиксели, не зависящие от устройства Android («dp»), функционально эквивалентны.Они просто относятся к базовому размеру (так же, как единица CSS «пиксели»), который измеряется независимо от того, имеет ли экран нормальное разрешение, высокое разрешение, сверхвысокое разрешение или что-то еще, что люди делают в наши дни!
Благодаря большему размеру касания Android и меньшему количеству пикселей на экран приложения Android, как правило, имеют более чистый и легкий вид, чем их собратья на iOS.
Язык дизайна в материальном дизайне по сравнению с iOS
Пытаясь продемонстрировать различия между двумя языками дизайна и философиями, это руководство охватывает большую часть схожих языков iOS и Material Design.Чтобы узнать больше об этом, вы захотите погрузиться в официальную документацию каждой дизайн-системы.
Чтобы узнать больше о проектировании для iOS, прочтите Руководство Apple по интерфейсу пользователя.
Чтобы узнать больше о дизайне в стиле Material Design, прочтите сайт Material Design.
Завершение
Я что-то пропустил? Что-то устаревшее? Напишите мне на [адрес электронной почты защищен]. Я буду постоянно обновлять это руководство, чтобы оно было самым точным и актуальным в Интернете для перевода между мобильными приложениями iPhone и Android.
Последняя записка 😎
Если вы здесь впервые, возможно, вас заинтересует:
Learn UI Design, мой полнометражный онлайн-видеокурс по дизайну пользовательского интерфейса
The Design Newsletter, информационный бюллетень для 50 000+ человек с оригинальными статьями по дизайну, цель которых дать вам тактические советы по улучшению ваших навыков UX / UI.
Некоторым людям есть что сказать о информационном бюллетене.
Благодарность за информационный бюллетень по дизайну
Спасибо за ваш информационный бюллетень.Возможно, это лучший информационный бюллетень, который я получал с 1999 года, когда я начал работать фрилансером.
Триша Литтлфилд
Основатель, TheSimpleWeb
Каждый раз, когда я получаю от вас письмо, я говорю: «Черт, это длинное письмо! Я ни за что не буду читать все это », а затем я начал читать и сказал:« Черт, это чертовски блестяще », и прочитал все это.
Жан-Филипп
UX-стратег, внештатный сотрудник
Подписано более 50 000 человек.
Нет спама. Отпишитесь в любое время.
Руководство для новичков по разработке приложений для Android
Android — чрезвычайно популярная мобильная платформа. В настоящее время устройствами Android пользуется больше людей, чем мобильными устройствами любого другого типа. Это дает вам как дизайнеру возможность создать приложение, которым могут пользоваться миллионы людей. В то же время начало работы с Android-дизайном может показаться сложным, особенно если у вас нет опыта в дизайне мобильных устройств.Но не волнуйтесь! Советы, упомянутые в этой статье, помогут вам создать удобную мобильную среду для пользователей Android.
Изучите основные правила дизайна для Android
Как и в случае с другими дисциплинами, когда дело доходит до изучения новых вещей, вам необходимо усвоить некоторые основные правила, чтобы все делать правильно. Эти правила заложат прочную основу для вашего дизайна.
Изучите язык дизайна Android
Хорошо известно, что лучшие приложения, представленные на рынке, создаются в соответствии с правилами, изложенными в руководстве по платформе.Когда дело доходит до разработки приложения для Android, изучение Material Design должно стать первым естественным шагом для вас как дизайнера. Материальный дизайн — это намного больше, чем просто рекомендации по платформе; это документ, описывающий визуальный язык. Как описывает это Google: «Мы поставили перед собой задачу создать визуальный язык для наших пользователей, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями технологий и науки».
Создайте строгую визуальную иерархию
Невозможно создать хороший пользовательский интерфейс, не имея надлежащей визуальной иерархии в пользовательском интерфейсе.Вот почему, когда дело доходит до приложений для Android, основополагающими элементами материального дизайна являются сетки и пробелы. Вам нужно сосредоточиться на удалении всех чисто декоративных элементов и сосредоточиться на самом важном — на контенте.
Использование общих системных шаблонов
Многие дизайнеры считают, что когда дело доходит до создания нового продукта, им необходимо разрабатывать каждый шаблон взаимодействия своего приложения с нуля. Я настоятельно рекомендую вам избегать этого пути. Каждый настраиваемый компонент, который будет отличаться от языка Material Design, может увеличить когнитивную нагрузку на пользователей (просто потому, что он будет им незнаком, и им нужно будет научиться его использовать).Но даже если вам удастся создать пользовательский компонент, ваше решение будет стоить намного дороже. Вы потратите много времени не только на их разработку, но и на реализацию на этапе разработки.
Стандартные компоненты (стандартные макеты, навигация, цветовые схемы и т. Д.) Уменьшают накладные расходы на проектирование и проектирование как в отношении начальных инвестиций, так и в отношении долгосрочной поддержки. И Android, и iOS имеют множество шаблонов, которые считаются отраслевыми стандартами.
Используйте движение для описания пространственных отношений между видами
Когда дело доходит до плоского дизайна, может быть сложно установить прочные отношения между различными страницами или элементами пользовательского интерфейса.Без четкой логической связи пользователи могут задаться вопросом, как разные страницы связаны друг с другом. Инструмент, который помогает создать эту связь, называется анимацией. Метафора материала уделяет большое внимание моушен-дизайну, потому что она не только помогает передать значение пользовательского интерфейса, но и делает интерфейс более динамичным.
В этом примере движение используется для создания логической связи между двумя различными состояниями — просмотром музыкальных дорожек и прослушиванием любимой дорожки.Изображение: Аниш Чандран
Не забывайте о доступности
Пытаясь создать красивое приложение, многие дизайнеры игнорируют одно важное правило хорошего дизайна — доступность. Доступность — это то, что позволяет пользователям с любым уровнем подготовки успешно использовать пользовательский интерфейс. Как говорит Material Design: «Хорошо спроектированный продукт доступен пользователям с любыми способностями, в том числе с ослабленным зрением, слепотой, нарушением слуха, когнитивными нарушениями или двигательными нарушениями».
Доступность начинается с мелких вещей, таких как выбор правильного контраста для элементов пользовательского интерфейса и копирования текста.W3C рекомендует следующие коэффициенты контрастности для основного текста и текста изображения:
Мелкий текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к его фону
Крупный текст (14 пунктов полужирного / 18 пунктов обычного и выше) должен иметь коэффициент контрастности не менее 3: 1 по отношению к его фону
Даже великие дизайнеры могут попасть в ловушку проблемы низкой контрастности. Некоторые части этой страницы плохо читаются людьми с нормальным зрением. Изображение: Антон Ахейчанка
Когда у вас есть правильный контраст для элементов пользовательского интерфейса, вы можете переключиться на более сложные вещи, такие как анимация и звук.Не забудьте сделать движение и звуковые эффекты необязательными, чтобы пользователи с нарушениями зрения или слуха могли отключить их при необходимости. В приложении должны быть подписи, стенограмма или другая альтернатива критическим эффектам движения или звуковым оповещениям.
Учитывайте особенности устройства
Будьте готовы оптимизировать дизайн для различных экранов
Когда дело доходит до разработки приложения для iOS, у вас есть точно определенное количество устройств и дисплеев, необходимых для разработки вашего продукта (в большинстве случаев , список устройств начинается со старого iPhone, например 5s, и идет до последних моделей, таких как iPhone X).Но когда дело доходит до разработки приложения для Android, у вас не будет определенных моделей экранов / устройств. Android работает на множестве устройств с разными размерами экрана и плотностью пикселей.
Компании, специализирующиеся на разработке мобильных приложений, всегда проводят различные тесты, чтобы убедиться, что их продукт работает на всех типах устройств. Это тестирование обычно выполняется командой обеспечения качества (QA). Они также создают подробные отчеты об ошибках, обнаруженных в процессе.
Будьте готовы оптимизировать приложение для подавляющего большинства размеров экрана.Размеры и плотность экрана могут сильно различаться — от смартфона за 100 долларов с крошечным экраном и низким разрешением экрана до планшетов высокого класса с дисплеями типа Retina.
Для достижения этой цели вы должны переключиться с пикселей на пиксели, не зависящие от плотности (dp или dip) в качестве единицы измерения. Сохранение независимости плотности важно, потому что без нее элемент пользовательского интерфейса (например, значок) может казаться больше на экране с низкой плотностью и меньше на экране с высокой плотностью.
Пример двух устройств одинакового размера, но с разной плотностью пикселей.Система Android использует dp, чтобы помочь вам добиться независимости плотности. Изображение: Google
Обязательно проверьте, как поддерживать разные размеры экрана. Как видно из приведенного ниже примера, размеры экрана варьируются от xsmall до xlarge.
На этом рисунке подробно показано, как разная ширина dp экрана обычно соответствует разным размерам и ориентации экрана. Изображение: Google
Ваша цель как дизайнера заключается в том, чтобы следующие объекты отлично смотрелись на экране любого размера и плотности:
Текстовые объекты (например,грамм. ярлыки, текстовая копия)
Значки и изображения (например, фоновые изображения)
Динамическое содержимое (например, анимация и видео)
Оптимизация для различного оборудования
Получите максимальную производительность для своего приложения. Вы не можете рассчитывать, что у всех ваших пользователей будет топовое оборудование, такое как Samsung Galaxy S9, поэтому вам следует сосредоточиться на том, чтобы сделать ваше приложение менее требовательным к аппаратным ресурсам. В идеале разрабатываемое приложение должно отлично работать на разном оборудовании — от устройств низкого уровня за 100 долларов до устройств высшего класса.
Совет. Используйте аналитику Google Play, чтобы понять, какие устройства чаще всего используются людьми для работы с вашим приложением. Оптимизируйте свое приложение для этой группы устройств.
Использование возможностей устройства
Современные мобильные устройства имеют множество аппаратных компонентов, которые можно использовать для облегчения жизни пользователей. Камера, GPS-навигатор, Bluetooth, NFC, акселерометр, гироскоп и многое другое — все эти датчики могут обогатить пользовательский интерфейс. Позвольте мне привести простой пример того, как вы можете использовать местоположение GPS для повседневных задач.Когда дело доходит до заполнения формы, вместо того, чтобы спрашивать пользователя о его / его текущем местоположении, вы можете запросить доступ к службе определения местоположения и автоматически заполнить необходимые данные. Это сэкономит драгоценное время ваших пользователей.
Автоматическое определение местоположения может сэкономить время пользователей. Изображение: Thinkwithgoogle
Продвигайте свой бренд
Когда дело доходит до разработки приложения, одна из ваших целей должна заключаться в том, чтобы передать индивидуальность бренда. Вам необходимо создать продукт, отражающий ваш бренд.У дизайнеров есть несколько мощных инструментов, которые можно использовать для этой цели:
Color. Используйте цвета компонентов в соответствии с нашей торговой маркой.
Иллюстрации. Создавайте иллюстрации, которые передают сообщение и ассоциируются с вашим брендом.
В Google Trips используются красивые иллюстрации, которые помогают отразить бренд. Изображение: The Verge
Прототип и тестирование вашего дизайна
Когда дело доходит до создания мобильного приложения, нет другого выбора, кроме как создать прототип и протестировать свой дизайн.Не пытайтесь создать идеальный дизайн с первого раза. В большинстве случаев это просто невозможно. Вместо этого будьте готовы доработать свой продукт.
Наличие в вашем наборе инструментов дизайнера отличного инструмента для создания прототипов Android, такого как Mockplus, может значительно облегчить вашу жизнь. Mockplus не только поможет вам создать интерактивный прототип с высокой точностью за считанные минуты; это также позволяет вам протестировать прототип на реальных пользователях. Итак, в следующий раз, когда у вас будет какое-то предположение о том, как должна выглядеть или функционировать определенная функция / экран / элемент пользовательского интерфейса вашего продукта — не угадайте, а протестируйте!
Mockplus — мощный инструмент для создания прототипов для разработчиков приложений Android
Отслеживайте итерации дизайна
Если вы отслеживаете свою проектную работу, это поможет вам лучше понять, как эволюционировало ваше дизайнерское мышление.Особенно важно сохранить все отрицательные итерации (неудачные попытки). Отрицательные итерации знаний не позволят вам снова совершить те же ошибки.
Заключение
Когда дело доходит до создания отличного мобильного приложения, самое важное, что следует учитывать, — это то, что вы разрабатываете для своих пользователей, а не для себя. Как дизайнер, вы должны тратить меньше времени на продвижение пикселей и больше времени на работу с вашими пользователями. Экспериментируйте, пробуйте разные подходы, выбирайте тот, который лучше всего подходит для вашей целевой аудитории, и опирайтесь на ценность, которую вы предоставляете своим пользователям.Удачи!
Лучшие приложения для материального дизайна для Android
Мы впервые написали эту статью еще в 2014 году. Мы хотели помочь людям найти приложения для материального дизайна, когда их действительно было не так много. В наши дни материальный дизайн повсюду. Большинство популярных приложений используют его в той или иной форме, и новые приложения запускаются с ним каждый день. Таким образом, мы переделали список, чтобы показать некоторые из лучших примеров материального дизайна, которые вы можете найти.Каждое приложение в этом списке было признано Google в какой-то момент за использование его материального дизайна. Даже если эти приложения не самые лучшие или не самые полезные, они действительно хороши в этом Material Design. Вот лучшие приложения Material Design для Android! Для справки, этот список вряд ли изменится, потому что Google на самом деле не присуждает столько дизайнерских наград, сколько раньше. Однако, если они это сделают, эти приложения, вероятно, появятся здесь.
Лучшие приложения для материального дизайна для Android
B&H Photo Video
Цена: Бесплатно
B&H Photo — популярный интернет-магазин.Их приложение тоже красивое. Он использует Material Design практически везде, где это возможно. В нем реализованы функции покупок, поиска и даже корзины. Страница категорий не только имеет цветовую кодировку, чтобы ее было легко различить на глаз, но и дизайн маленьких значков четкий и плоский. Ни в коем случае дизайн не кажется преувеличенным или нелепым. Просто во всем хороший дизайн. Мы хотим, чтобы больше приложений для покупок выглядели так, как это.
См. Также: Лучшие фото-приложения для Android
Houzz Home Design
Цена: Бесплатно
Houzz получил награду за дизайн от Google Play.Кто мы такие, чтобы с этим спорить? Приложение тоже неплохое. Это приложение для домашнего дизайна. Вы можете ознакомиться с идеями украшения и дизайна для вашего дома. Вы также можете сохранять идеи и проверять действительно уникальные вещи. Это почти как Pinterest, но специально для товаров для дома. Он покрывает множество баз на очень небольшом пространстве. Его конструкция позволяет вам перемещаться и просматривать большой объем информации за очень короткий промежуток времени, не чувствуя себя перегруженным. Он просто так хорошо выглядит и работает. Поистине одно из лучших приложений для материального дизайна.
См. Также: Лучшие приложения для домашнего дизайна и приложения для улучшения дома для Android
LocalCast
Цена: Бесплатно / Дополнительное пожертвование
LocalCast — это приложение для потоковой передачи. Он транслирует видео, изображения и многое другое на ваш Chromecast с вашего устройства. Приложение также имеет хороший дизайн. Он использует материальный дизайн в полной мере. Однако ему удается не чувствовать себя раздутым или ненужным. Цвета красиво контрастируют, не раздражая.Элементы управления тоже выглядят неплохо. Он также поддерживает Roku, Amazon Fire Sticks, Apple TV и множество смарт-телевизоров. Это действительно хорошо для того, что есть.
Lyft
Цена: Бесплатно / Зависит от поездки
Джо Хинди / Android Authority
Lyft по-прежнему быстро развивается. Тем не менее, его дизайн приложения, вероятно, лучший в области транспортных приложений. Он эффективно использует слои в Material Design. Подобные приложения очень загружены. Наличие набора элементов управления и банка — это сразу тонна информации.Lyft отлично справляется с предоставлением большого количества информации, не чувствуя дискомфорта в использовании. Цветовая палитра выдержана и хорошо выглядит. Это уже одно из лучших приложений для общественного транспорта, но его дизайн определенно делает его немного более привлекательным.
См. Также: Лучшие приложения для такси и совместного использования поездок для Android
Демонстрация материального дизайна
Цена: Бесплатно
Демонстрация дизайна материалов — подарок для разработчиков. Это позволяет вам легко и быстро проверить Material Design.Он показывает использование многих элементов материального дизайна. Это включает в себя переходы, макеты страниц, просмотры карточек, плавающую кнопку действия, выдвижное меню и многое другое. Продвинутые программисты уже знают это. Тем не менее, это дает новичку хорошее представление о том, как это может работать. Его можно загрузить и использовать бесплатно. Это отличное приложение для создания приложений с материальным дизайном.
Галерея дизайна материалов
Цена: Бесплатно
Джо Хинди / Android Authority
Галерея материалов — приложение для разработчиков.Разработчики загружают в приложение свои приложения, структуру пользовательского интерфейса или другие элементы. Другие разработчики оставляют отзывы по этому поводу. Разработчики могут критиковать свой дизайн и идеи о том, как улучшить свой продукт. Для всего этого он работает очень хорошо. Это также помогает инди-разработчикам, не имеющим огромной команды дизайнеров, получить наилучшую возможную обратную связь для наилучшего возможного дизайна. Это не обязательно для создания хороших приложений с материальным дизайном, но определенно помогает. Это тоже бесплатно.
Newton Mail
Цена: Бесплатно / 49 долларов США.99 в год
Newton Email, вероятно, лучшее почтовое приложение с точки зрения дизайна. Он чистый, цвета удобны для организации, он может быть тематическим и в нем много элементов материального дизайна. Это немного дороговато, но этот список не о цене. Основной вид прост. Это позволяет быстро просматривать множество писем, не запутавшись. Выдвижное меню содержит ваши несколько учетных записей электронной почты, а плавающая кнопка действия делает все остальное. Вы также можете пролистывать электронные письма для получения дополнительных команд.Он использует столько дизайна, сколько необходимо для функциональности. Хорошая сторона заключается в том, что он делает это, не чувствуя себя смешным, сбивающим с толку или раздутым. Это определенно одно из лучших приложений для материального дизайна.
См. Также: Лучшие почтовые приложения для Android для управления почтовым ящиком
Робинхуд
Цена: Бесплатно
Джо Хинди / Android Authority
Robinhood — еще один обладатель награды Google Play в области дизайна. Это приложение для торговли акциями. Вы можете просматривать такие вещи, как цены на акции в режиме реального времени, вести список желаемых акций, за которыми хотите следить, и совершать сделки в режиме реального времени бесплатно.Как брокерская компания Robinhood имеет свои взлеты и падения, особенно после крупного разгрома GameStop в начале 2021 года. Однако даже людям, которые в конечном итоге ушли из Robinhood, не хватает гибкого пользовательского интерфейса, легкого управления и простоты.
См. Также: Лучшие биржевые приложения для Android
Solid Explorer
Цена: Бесплатно / 1,99 $
Solid Explorer — одно из лучших приложений для работы с файлами. Дизайн тоже довольно симпатичный. Он имеет плавающую кнопку действия, которая содержит многие из наиболее распространенных команд управления файлами.Он использует цвета, чтобы различать папки и файлы для упрощения организации. Выдвижное меню и различные другие особенности дизайна работают вместе, чтобы создать очень сплоченный опыт. Это сложно сделать для такого утилитарного приложения, как приложение для просмотра файлов. Это определенно одно из лучших приложений для материального дизайна.
Textra SMS
Цена: Бесплатно / 3,99 доллара США
Многие текстовые приложения используют Material Design. Ни один из них не делает это так хорошо, как Textra. Он использует базовые элементы, такие как плавающая кнопка действия и выдвижной ящик для большинства вещей.Тем не менее, его отличительная особенность полностью настраивается. Вы можете выбирать между светлым и темным фоном, основным и второстепенным цветом. Это означает, что вы можете сделать так, как хотите. Вы даже можете изменить значок, чтобы он лучше соответствовал вашему домашнему экрану. Элементы управления, кнопка Material Design, тематика — все это есть. Textra — один из лучших примеров материального дизайна в Play Store.
См. Также: Лучшие приложения для текстовых сообщений и SMS для Android
Если мы пропустили какое-либо из лучших приложений Material Design для Android, расскажите нам о них в комментариях! Вы также можете щелкнуть здесь, чтобы ознакомиться с нашими последними списками приложений и игр для Android!
Спасибо за внимание! Также посмотрите:
Топ-10 практических примеров дизайна пользовательского интерфейса Android-приложений для вдохновения | Энни Дай | AndroidPub
Как сделать элегантный дизайн пользовательского интерфейса для Android-приложения? В этой статье собраны 10 практических примеров дизайна пользовательского интерфейса Android-приложений, которые очень популярны в повседневной жизни людей.
Исследование рынка показало, что рыночный разрыв между iOS и Android увеличивается. Устройства Android становятся ведущим игроком на рынке мобильных приложений. Плоский дизайн Apple очень популярен в последние годы, но дизайн пользовательского интерфейса Android-приложений, основанный на материальном дизайне, также заслуживает внимания и изучения дизайнерами.
Как сделать элегантный дизайн пользовательского интерфейса для Android-приложения? В Интернете разбросано множество ресурсных и справочных материалов. Итак, здесь Mockplus собрал 10 лучших примеров дизайна пользовательского интерфейса Android-приложений, которые очень популярны в повседневной жизни людей.
Как и Apple App Store, в Google Play Store есть множество погодных приложений. Eye in Sky Weather выделяется своей минималистской голографической тематикой, и пользователи должны ожидать от нее основных функций погодного приложения. Это приложение включает в себя 14 лучших наборов значков погоды, которые вы можете добавить самостоятельно. Доступны четыре виджета и одно масштабируемое уведомление с широкими возможностями настройки. Также есть расширение DashClock.
Snapseed — это комплексное приложение для редактирования фотографий от Google.В дополнение к основным функциям редактирования, предоставляемым Instagram, я также ценю этот тип редактирования, который делает редактирование фотографий проще, чем когда-либо. Многие приложения для редактирования фотографий усложняют этот процесс, но Snapseed упрощает его и предлагает множество параметров, которые можно легко настроить.
Конечно, вы можете изменить освещение и добавить фильтры, но возможность перефокусировать изображение и изменить стиль пленки делает их набор инструментов уникальным. И, наконец, благодаря возможностям сохранения и повторного редактирования, которые вы создали в прошлом, сделайте это приложение моим любимым редактором фотографий.
YouTube , крупнейший в мире веб-сайт для обмена видео, пользуется преимуществами их продуманного дизайна с момента своего основания в 2005 году. То же самое вдохновляет и сегодня, и вы можете увидеть простые в использовании сервисы мобильных приложений для iOS и Android.
Точно так же, хотя YouTube не является специализированным мобильным приложением, более половины видео YouTube просматривается на мобильных устройствах. Потребность в таком приложении в 2017 году совершенно очевидна. Так что пользовательский интерфейс для приложений Android и iOS в какой-то степени одинаково важен.
YouTube проделал огромную работу, сохраняя доступный и свежий дизайн, обновляя приложения каждые две недели и адаптируя дизайн к изменениям, которые они вносят в платформу. Фактически, большинство пользователей предпочитают мобильную версию.
Одним из новейших претендентов на самый красивый дизайн пользовательского интерфейса Android-приложений является Pinterest для социальных сетей. Pinterest добавил достаточно деталей в пользовательский интерфейс, от тщательно реализованного процесса регистрации до полномасштабного отображения фотографий, чтобы изображения и контент оставались в центре внимания.
Trello — это инструмент управления проектами и организации, основной задачей которого является то, что они называют «советом директоров». Каждая доска может соответствовать разным задачам или обязанностям и должна быть выполнена. Простой и очевидный дизайн ускоряет выполнение работы и снижает количество ошибок связи между сторонами.
Trello — хороший пример дизайна пользовательского интерфейса, поскольку в нем не так много ненужных функций. Все на главном экране приложения легко понять и работает точно так же, как и приложение, без каких-либо проблем, связанных с передачей какой-либо задачи с одной доски на другую.Дизайн интерфейса очень интуитивно понятный, первый пользователь приложения может легко просматривать разные страницы.
Slack — это инструмент командного взаимодействия всех форм и размеров. Планируете ли вы мероприятие, работаете над проектом или просто устали от электронной почты, Slack становится одним из наиболее широко используемых инструментов среди профессионалов. Ключом к успеху является их простой, но мощный дизайн.
Хотя Slack не является специализированным мобильным приложением, его пользовательский опыт на мобильных устройствах не хуже, чем на компьютере.Все, что вам нужно, очень четко размещено в левом раскрывающемся меню, а командный канал всегда обновляется в основной области приложения.
Duolingo — компания, изучающая языки, которая учит пользователей говорить на разных языках с помощью мини-игр и коротких курсов. Основанная в 2009 году, компания достигла 100 миллионов пользователей и продолжает расти, в основном за счет простоты их приложений и постоянных технологических инноваций.
Любой, кто пользуется Duolingo, понимает простоту приложения.Выполнив миссию или игру, вы можете перейти в более продвинутые категории. Это также отличная идея — объединить увлекательность мобильных игровых приложений и использовать их для изучения новых языков, на основе чего пользовательский опыт также является одним из факторов, привлекающих пользователя.
Wickr так же прост, как и дизайн многих других эффективных пользовательских интерфейсов мобильных приложений. Он отлично передает сообщение о безопасности, сохраняя при этом свой базовый черно-белый дизайн. Независимо от того, находится ли пользователь вне работы или по личному выбору, существуют безопасные способы отправки зашифрованных сообщений.Он имеет возможности группового обмена сообщениями, а также индивидуального общения. Отправитель сообщения может контролировать продолжительность просмотра сообщения, изображения или видео. Такие сообщения, как Snapchat, могут показывать только 1–10 секунд, и со временем они будут фрагментировать удаленное сообщение в цифровом виде.
Hipmunk — самый быстрый и простой способ спланировать свое путешествие. Это приложение сэкономит ваше время, сравнивая все популярные туристические сайты, включая напоминания о том, куда вы хотите отправиться, просмотр отзывов других пассажиров, бронирование рейсов, поиск гостиничных номеров для ближайшего пункта назначения, который вы хотите Подождите.
Дизайн, который мне очень нравится, заключается в том, что он может адаптировать ваш вид к вашим потребностям, например, к разметке городских карт или к лучшему времени для бюджетного отеля. Это действительно настраиваемое приложение для бронирования поездок.
PEAR — это персонализированное фитнес-приложение, которое помещает тысячи тренировок и персональных тренеров прямо у вас на ладони. Это приложение меня удивило, потому что оно обрабатывает данные о вашем здоровье в режиме реального времени в соответствии с вашими конкретными потребностями. Для этого требуются некоторые упражнения, такие как бег, езда на велосипеде и силовые тренировки, и в зависимости от того, какое из них вы выберете, обеспечить ободряющий звук.Он синхронизируется со всеми основными фитнес-трекерами и приложениями, чтобы упростить управление всеми данными упражнений.
Самое главное, вы можете включать и выключать телефон по своему желанию. Если вы занимаетесь йогой или чем-то, что требует обеих рук, ваш тренер может направить вас исключительно через аудио. Например, если вы бегаете на беговой дорожке, она предоставляет полезные графики частоты пульса, сжигаемых калорий и общего прогресса. В целом, это очень полезное приложение, учитывая личную пригодность, а также его настраиваемые функции и дизайн.
Как разработчики Android, вы можете обратиться к спецификациям Google Android Design, официальным документам о том, как создать дизайн пользовательского интерфейса Android-приложений, всегда было много советов и предложений.
В разделе «Дизайн пользовательского интерфейса Github» собрано множество материалов, связанных с дизайном, и отличные сайты, посвященные дизайну. Не ограничивается только дизайном интерфейса приложений Android.
Это видео объясняет пользователям Eclipse, как создать графический пользовательский интерфейс для вашего приложения с помощью Android Studio. Ролик длинный (почти час), но логически процесс прост.
Одно из лучших руководств по макету и анимации пользовательского интерфейса Android. В нем рассказывается, как использовать Android Studio для создания различных макетов (макет фрейма, линейный макет, относительный макет и макет сетки), представлений (TextView, ListView, ImageView, GridView, RecyclerView) и действий (анимация атрибутов, анимация с возможностью рисования).Это руководство предназначено для начинающих и опытных дизайнеров и доступно на GitHub.
Я думаю, что создание прототипа — это основной шаг для определения стиля приложения. На этапе разработки прототипа приложения дизайнеры должны с осторожностью выбирать и использовать элементы пользовательского интерфейса в инструментах прототипирования. Исходя из характеристик приложений Android, Mockplus и Justinmind, как правило, больше соответствуют материальному дизайну.
Вам может понравиться:
30 исключительных приложений Material Design для Android
Material Design — это сердце и душа платформы Google Android (и все в большей степени остальной вселенной Google, от Chrome OS до Интернета в целом).Даже если вы не задумываетесь об этом, стандарты дизайна, представленные в Android 5.0, вероятно, станут основной частью вашего смартфона или планшета.
Но вот что самое интересное: как только вы начнете ощущать материальный дизайн и согласованный стиль, который он привносит на свои мобильные устройства, приложения со старыми стилями дизайна начинают выглядеть неуместными, устаревшими и не имеющими отношения к делу. Но не бойтесь: помимо базовых функций, которые есть на каждом телефоне Android — Gmail, Google Drive и т. Д. — есть много вкусных добра дизайна материалов, которые только и ждут, чтобы их поглотили.
Так что наденьте свой любимый нагрудник, возьмите метафорическую вилку и приготовьтесь: вот 30 первоклассных приложений для Android, которые правильно используют материальный дизайн.
Приложения для материального дизайна, часть 1: Новости и информация
1. Pocket Casts (3,99 доллара США)
Pocket Casts привносит яркий и приятный интерфейс в подкастинг на Android. Он наполнен функциями, включая синхронизацию ваших каналов и предпочтений между устройствами, но при этом приятен для глаз и прост в использовании.
2. Реле для Reddit (бесплатно с дополнительным обновлением за 2,99 доллара без рекламы)
Если вы поклонник Reddit — а кто не любит время от времени заглядывать в него? — это приложение для вас. Relay for Reddit превращает популярный социальный сайт в прекрасный формат, посвященный материальному дизайну, что делает его интересным для чтения с любого мобильного устройства.
3. FeedlyReader (бесплатно)
Мое приложение для отслеживания всех новостных сайтов, за которыми я следую. FeedlyReader — это минималистичный, но мощный RSS-ридер, который показывает вам последние истории из вашей учетной записи Feedly в формате чистый карточный макет.Мне особенно нравятся настраиваемые ярлыки смахивания, которые я использую, чтобы быстро открывать статьи в Link Bubble или отмечать их как прочитанные, не покидая основного списка историй.
4. PaperBoy (бесплатно)
Для того, чтобы читать RSS как в журнале, стоит попробовать Paperboy. Приложение Feedly-synced имеет отличный интерфейс для отслеживания ваших любимых каналов с большими изображениями и плавной анимацией, окруженной красочными элементами дизайна материалов. Он даже может читать вам истории вслух, если вы хотите наверстать упущенное в дороге.
5. Flyne, Offline Reader (бесплатно с обновлением за 0,99 доллара для полной функциональности)
Flyne вносит свой вклад в Material Design с помощью ориентированного на карты пользовательского интерфейса, который сохраняет изображения большими и централизованными, и встроенного браузера что делает контент неизменно красивым. Приложение предлагает возможность просматривать статьи из Feedly или Twitter, как в Интернете, так и за его пределами, хотя вам придется заплатить 99 центов за обновление в приложении, чтобы добавить свои собственные источники.
6. Palabre (бесплатно, дополнительно 2 доллара США.47 обновление без рекламы)
Palabre имеет отточенный интерфейс в стиле журнала для просмотра ваших RSS-каналов, которые необходимо прочитать от Feedly. Благодаря приятной анимации и легкодоступным опциям для обмена контентом — как через родную систему обмена Android, так и непосредственно в Pocket, если вы используете эту службу для сохранения историй, — он полнофункциональный и довольно приятный в использовании.
7. Пряжа для новостей Hacker News (бесплатно с дополнительным обновлением за 2,99 доллара США без рекламы)
Hacker News — очень любимый сайт для новостей для компьютерных фанатов — и если вы хотите проверить это со своего Телефон или планшет Android, Yarn — это именно то, что вам нужно.Он объединяет все последние истории HN в простой мотив материального дизайна, делая просмотр заголовков и чтение статей естественной частью работы с Android.
8. Buzzfeed (бесплатно)
Buzzfeed в наши дни — это не только GIF-файлы, достойные LOL. Офисы сайта пополнились настоящими писателями, которые создают интересный контент о технологиях и множестве других тем. И да, глупые котята все еще здесь. Приложение публикации обеспечивает замечательный дизайн, который соответствует текущим стандартам Google и демонстрирует, как должно быть создано приложение для конкретного сайта.
9. MyStocks (бесплатно с опциональным обновлением за 2,99 доллара без рекламы)
Отслеживание акций никогда не было лучше, чем с MyStocks, приложением, которое привносит в мир Уолл-стрит нотку материального дизайна. Помимо дизайна, MyStocks имеет несколько удобных функций, таких как настраиваемые оповещения и множество исторических диаграмм.
10. Спаржа — Моя поваренная книга (бесплатно с опциональным обновлением за 1,99 доллара без рекламы)
Ваши рецепты еды и напитков будут выглядеть особенно восхитительно в Спарже, приложении для сбора личных рецептов, которое добавляет немного стиля Google в дизайн виртуальная кухня.Приложение упрощает сохранение рецептов с веб-сайтов: вы просто делитесь ими из браузера своего устройства прямо в Asparagus, а оно позаботится обо всем остальном.
Приложения для материального дизайна, часть 2: Связь
11. Messenger (бесплатно)
Разные телефоны поставляются с разными приложениями для обмена сообщениями по умолчанию, но новый Messenger от Google непросто превзойти, когда дело доходит до чистого и интуитивно понятный интерфейс для традиционных текстовых сообщений. Если вы не используете Hangouts для обмена сообщениями, стоит воспользоваться этой привлекательной альтернативой.
12. Talon для Twitter Plus (3,99 доллара США)
Посмотрим правде в глаза: официальное приложение Twitter для Android отстой. Но Talon этого не делает. Приложение превращает Twitter в красивый клиент для материального дизайна с множеством полезных функций и забавными визуальными эффектами. Учитывайте множество вариантов настройки, и у вас есть отличный универсальный пакет для всех ваших потребностей, связанных с твитами.
13. Falcon Pro 3 (4 доллара для использования с одной учетной записью, на 2 доллара больше для каждой дополнительной учетной записи)
Falcon менее полнофункциональный, чем Talon — например, у него нет никаких виджетов или поддержки для популярной службы синхронизации Tweet Marker — но, черт возьми, пользоваться ею приятно.Приложение имеет великолепную темную тему и загружено плавной анимацией, которая делает чтение и отправку твитов удовольствием. Просто убедитесь, что все, что вам нужно сделать, это базовые задачи Twitter, иначе вы можете захотеть большего.
14. Pushbullet (бесплатно)
Pushbullet позволяет быстро и безболезненно отправлять изображения, файлы и ссылки между устройствами (среди прочего), а его приложение делает процесс управления вашими нажатиями приятным как может быть. Если вы еще не пробовали, сейчас идеальное время.
Приложения для материального дизайна, часть 3: Мультимедиа
15. LocalCast для Chromecast / DLNA (бесплатно с дополнительным обновлением без рекламы 3,49 доллара США)
Многие приложения имеют свои собственные механизмы для отправки контента на Chromecast — но если вы хотите перенести локально сохраненные изображения или видео со своего телефона на большой экран, простого способа сделать это не получится. LocalCast меняет это, и делает это в стиле Material Design. Приложение также будет работать с Apple TV, Sonos, Xbox 360 и One и другими устройствами с поддержкой DLNA.
16. Snapseed (бесплатно)
Нет лучшего инструмента для редактирования изображений на вашем мобильном устройстве, чем приложение Snapseed (теперь принадлежащее Google и полностью бесплатное). Snapseed изобилует мощными функциями обработки фотографий — от основ настройки до продвинутых вещей, таких как размытие линз и точечный ремонт, — а с недавно реализованным пользовательским интерфейсом Material Design он больше похож на часть Android, чем когда-либо.
No related posts.

Способ возврата (iOS)	Контекст, в котором это работает
Нажмите кнопку «Назад» в верхнем левом углу экрана	Любой экран, на котором отображается действие «Назад».
Проведите пальцем вправо от левого края экрана	Любой экран, на котором в левом верхнем углу отображается действие «Назад».
Нажмите «Готово» в правом верхнем углу экрана.	Модальные виды без редактирования
Проведите пальцем вниз по содержимому экрана	Модальный или полноэкранный режимы

Размер значка	Где используется
180×180 пикселей	Главный экран iPhone для телефонов @ 3x (например, все модели iPhone 12, 11 Pro, X, Xs, 8+)
120×120 пикселей	Главный экран iPhone для телефонов @ 2x (e.грамм. 11, XR, 8)
1024×1024 пикселей	Магазин приложений

Размер значка	Где используется	Кратное 48×48 пикселей
48×48 пикселей	Главный экран (телефоны со средним разрешением)	1х
72×72 пикселей	Главный экран (телефоны с высоким разрешением)	1.5x
96×96 пикселей	Главный экран (телефоны xhdpi)	2x
144×144 пикселей	Главный экран (телефоны xxhdpi)	3x
192×192 пикселей	Главный экран (телефоны xxxhdpi)	4x
512×512 пикселей	Большая версия для Google Play store (все устройства)	НЕТ