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

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

150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.

О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».

дизайн мобильных приложений примеры. %D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B5%D0%B9 %D0%9A%D0%BE%D0%BC%D0%B0%D1%80%D0%BE%D0%B2. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B5%D0%B9 %D0%9A%D0%BE%D0%BC%D0%B0%D1%80%D0%BE%D0%B2. картинка дизайн мобильных приложений примеры. картинка %D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B5%D0%B9 %D0%9A%D0%BE%D0%BC%D0%B0%D1%80%D0%BE%D0%B2.

UX/UI-дизайнер в IBM

дизайн мобильных приложений примеры. %D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D0%B0%D0%BD%D0%B0 %D0%A2%D1%80%D0%B5%D1%82%D1%8F%D0%BA. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D0%B0%D0%BD%D0%B0 %D0%A2%D1%80%D0%B5%D1%82%D1%8F%D0%BA. картинка дизайн мобильных приложений примеры. картинка %D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D0%B0%D0%BD%D0%B0 %D0%A2%D1%80%D0%B5%D1%82%D1%8F%D0%BA.

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

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

Что нужно знать мобильному дизайнеру

Колористика

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

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

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

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

дизайн мобильных приложений примеры. %D1%81%D1%85%D0%B5%D0%BC%D0%B0 %D0%BA%D1%80%D0%BE%D1%81%D1%81%D0%BE%D0%B2%D0%BA%D0%B8 1. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D1%81%D1%85%D0%B5%D0%BC%D0%B0 %D0%BA%D1%80%D0%BE%D1%81%D1%81%D0%BE%D0%B2%D0%BA%D0%B8 1. картинка дизайн мобильных приложений примеры. картинка %D1%81%D1%85%D0%B5%D0%BC%D0%B0 %D0%BA%D1%80%D0%BE%D1%81%D1%81%D0%BE%D0%B2%D0%BA%D0%B8 1.

дизайн мобильных приложений примеры. coolors. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-coolors. картинка дизайн мобильных приложений примеры. картинка coolors.

дизайн мобильных приложений примеры. color tool. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-color tool. картинка дизайн мобильных приложений примеры. картинка color tool.

Типографика

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

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

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

дизайн мобильных приложений примеры. %D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F. картинка дизайн мобильных приложений примеры. картинка %D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F.

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

Композиция

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

дизайн мобильных приложений примеры. %D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5. картинка дизайн мобильных приложений примеры. картинка %D0%B2%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5.

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

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

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

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

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

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

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

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

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

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

Инструменты

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

Figma

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

Sketch

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

Adobe XD

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

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

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

В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.

Сервисы для создания прототипов

Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.

Цели и задачи разработки

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

Приложение — это инструмент бизнеса со своими целями и задачами.

Для примера рассмотрим мобильное приложение банка.

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

контролировать свои расходы.

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

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

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

Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.

К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».

дизайн мобильных приложений примеры. %D0%91%D0%B8%D0%BB%D0%BB %D0%93%D0%B5%D0%B9%D1%82%D1%81 %D0%9A%D1%80%D0%B5%D0%BC%D0%BD%D0%B8%D0%B5%D0%B2%D0%B0%D1%8F %D0%B4%D0%BE%D0%BB%D0%B8%D0%BD%D0%B0. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D0%91%D0%B8%D0%BB%D0%BB %D0%93%D0%B5%D0%B9%D1%82%D1%81 %D0%9A%D1%80%D0%B5%D0%BC%D0%BD%D0%B8%D0%B5%D0%B2%D0%B0%D1%8F %D0%B4%D0%BE%D0%BB%D0%B8%D0%BD%D0%B0. картинка дизайн мобильных приложений примеры. картинка %D0%91%D0%B8%D0%BB%D0%BB %D0%93%D0%B5%D0%B9%D1%82%D1%81 %D0%9A%D1%80%D0%B5%D0%BC%D0%BD%D0%B8%D0%B5%D0%B2%D0%B0%D1%8F %D0%B4%D0%BE%D0%BB%D0%B8%D0%BD%D0%B0.

Soft skills

Коммуникационные навыки

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

Правильная реакция на критику

Дизайнеров постоянно критикуют, и многие на это обижаются.

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

Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.

Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение 🙂

К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯

Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.

Это способ изображения процесса общего системного мышления с помощью схем.

Что нужно учитывать при разработке интерфейса

Взаимодействие с пользователями

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

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

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

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

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

Нюансы мобильных платформ

​​Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).

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

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

В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).

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

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

Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).

Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.

Адаптация контента

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

Длинные процессы

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

дизайн мобильных приложений примеры. color soeheg. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-color soeheg. картинка дизайн мобильных приложений примеры. картинка color soeheg.Профессия

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

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

Этапы создания мобильного приложения

Исследование

дизайн мобильных приложений примеры. Artboard 1 F GUeA. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-Artboard 1 F GUeA. картинка дизайн мобильных приложений примеры. картинка Artboard 1 F GUeA.Погружаемся в цели и задачи бизнеса.

дизайн мобильных приложений примеры. Artboard 2 A8lZyQ. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-Artboard 2 A8lZyQ. картинка дизайн мобильных приложений примеры. картинка Artboard 2 A8lZyQ.Изучаем целевую аудиторию.

Исследования делятся на количественные и качественные.

Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.

Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.

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

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

дизайн мобильных приложений примеры. Artboard 3 rFDtRQ. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-Artboard 3 rFDtRQ. картинка дизайн мобильных приложений примеры. картинка Artboard 3 rFDtRQ.Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.

Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.

дизайн мобильных приложений примеры. Artboard 4 QdUJ5g. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-Artboard 4 QdUJ5g. картинка дизайн мобильных приложений примеры. картинка Artboard 4 QdUJ5g.Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.

На основе вышеуказанных артефактов дизайнер принимает решения.

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

Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.

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

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

Проектирование

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

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

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

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

дизайн мобильных приложений примеры. %D0%B2%D0%B0%D0%B9%D1%80%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D1%8B 1. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D0%B2%D0%B0%D0%B9%D1%80%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D1%8B 1. картинка дизайн мобильных приложений примеры. картинка %D0%B2%D0%B0%D0%B9%D1%80%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D1%8B 1.

дизайн мобильных приложений примеры. %D0%B2%D0%B0%D0%B9%D1%80%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D1%8B 2. дизайн мобильных приложений примеры фото. дизайн мобильных приложений примеры-%D0%B2%D0%B0%D0%B9%D1%80%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D1%8B 2. картинка дизайн мобильных приложений примеры. картинка %D0%B2%D0%B0%D0%B9%D1%80%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D1%8B 2.

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

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

Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.

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

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

Источник

Где найти красивые дизайны мобильных интерфейсов (подборка сайтов)

Проекты с архивами скриншотов интерфейсов мобильных приложений могут пригодиться тем, кто уже работает или только вникает в нишу мобайла. Они содержат лучшие варианты или просто хорошие реализации мобильных интерфейсов. В отличии от сервиса UI Patterns с паттернами дизайнов, здесь в большинстве случаев представлена графика из приложений, а не элементы адаптивных версий сайтов. Называются такие подборки ui patterns или mobile patterns (если будете искать их самостоятельно в гугле).

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

Начнем наш обзор с наиболее известных проектов.

Dribbble

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

Наверняка сайт Dribbble вам хорошо знаком, т.к. является одной из самых крупных площадок для дизайнеров, где они презентуют свои работы, обмениваются впечатлениями и находят вдохновение. Его мы упоминали в пятерке полезных дизайнерских соц.сетей, он также часто встречается в разных подборках графики и т.п. Найти красивые интерфейсы мобильных приложений тут можно двумя способами: 1) вводите в строку поиска запрос «mobile app» или 2) открываете пункт меню Tags, где выбираете теги iphone, ui, android и т.п.

Behance

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

Behance — еще один популярный сервис по типу портфолио с обсуждением и поиском работы. Подробную информацию о нем советую глянуть в детальном обзоре а сейчас просто расскажу как искать красивые интерфейсы приложений. Здесь есть очень мощный механизм фильтров (горизонтальное меню), где сначала можете выбрать вместо «All Creative Fields» категорию UI/UX, а затем дополнительно воспользоваться поиском или похожими тегами по теме (Related tags) — application, iphone, ipad и т.п.

Pinterest

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

Pinterest — бесконечный источник вдохновения и заодно самый популярный сервис графических закладок. На сайте сможете отыскать много интересных материалов, нужно только зарегистрироваться. Далее вводите в строку поиска нужный вам запрос, например — «mobile app design». Можно при этом выбрать в качестве источника готовые подборки (Boards) от бывалых пользователей либо просматривать все файлы.

Mobile Mozaic

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

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

Mobile Design Inspiration

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

Первое, что бросается в глаза на сайте Mobile Design Inspiration — наличие анимаций (gif’ок), отображающих работу интерфейсов мобильных приложений. Если сравнивать такой формат со скриншотами, то он, конечно, более наглядный, т.к. позволяет увидеть не просто дизайн экрана, но и разные эффекты при взаимодействии пользователя с ним.

Pttrns

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

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

Inspired UI

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

По умолчанию на главной сайта Inspired UI отображаются последние скриншоты. В шапке есть выпадающий список категорий и выборка по устройствам (iPhone, iPad, Android). Как и в прошлом примере, при клике на картинку определенного приложения попадаете не страницу со всеми его дизайнами.

UIHaus

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

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

Mobile Tuxedo

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

В сервисе Mobile Tuxedo собраны разные ресурсы и информация по теме мобильных приложений. Для интерфейсов переходим в раздел UI Patterns. Под картинками оранжевым цветом выделены метки, с помощью которых можно просмотреть несколько объектов. При клике на картинку вас перебрасывает на страницу приложения в iTunes. Подборки скриншотов здесь нет.

UIMovement

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

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

LovelyUI

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

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

Meer.li

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

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

AppreciateUI

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

Пользоваться сайтом AppreciateUI предельно просто: слева находятся типы интерфейсов мобильных приложений и элементом в них, справа — соответствующие скриншоты. По личным ощущениям, здесь нет каких-то экстравагантных и супер ярких дизайнов, скорее обычные классические примеры графики. С другой стороны, не каждая программа должна иметь броское и оригинальное оформление, некоторым важна в первую очередь функциональность. Отличительной фишкой сайта есть то, что при клике на картинке она открывается в новом окне в достаточно большом разрешении (приблизительно 600 x 1000 пикселей).

Uplabs

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

Красивые интерфейсы приложений в сервисе Uplabs — не единственная представленная здесь графика, хотя их достаточно много. Очень классно реализована страница просмотра того или иного скриншота — увеличивается картинка плюс отображается информация по элементу, похожие объекты, есть даже возможность скачать исходники в некоторых случаях. Данный проект является частью группы тематических сайтов по дизайну — при переключении на вкладку Android грузится аналогичный сервис MaterialUp, для веб-графики — SiteUp.

AndroidUX

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

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

Mobile Patterns

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

Из плюсов сервиса Mobile Patterns я бы отметил хорошую навигацию по разным типам объектов, а также большие картинки, открывающиеся при клике (где-то 700 x 1300 пикселей). Сверху возле логотипа можно выбрать отдельное отображение графики по платформам iPhone и Android, планшетов нет. В целом сайт содержит достаточно неплохие варианты интерфейсов, можно кое-что для себя почерпнуть.

Capptivate.co

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

Автор проекта Capptivate.co решила собрать в одном месте варианты отличной анимации из iOS программ. Сверху в меню найдете типы интерфейсов (контент, навигация, загрузка, инфографика), а также разные виды эффектов для них: вращение, появление, затемнение и т.п. Если вам нужно добавить немного интерактивных объектов и оживить собственное приложение, здесь есть на что посмотреть.

UXArchive

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

Сайт UXArchive будет интересен в первую очередь создателям интерфейсов, так как в нем уделяется больше внимания работе приложений, а не внешнему виду. Здесь собраны 22 типа задач, возникающих в мобильном софте: логин, бронирование, поиск, шеринг, загрузка, создание/удаление и т.п. Данные процессы рассмотрены на 139 различных приложеиях, что в итоге дает почти 400 разных примеров. Каждый из них представлен в виде серии скриншотов. Для общего развития также почитайте статью про разницу между UI и UX. На примерах разобраться получается достаточно наглядно и легко.

App.itize.us

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

Создатели проекта App.itize.us провели тщательный отбор наиболее толковых приложений. По каждому из них доступно детальное описание, но увы подборки скриншотов не наблюдается — здесь есть только одна картинка и линк на программу. С другой стороны набор графики из нее можно глянуть на том же iTunes, пройдя по ссылке. Для удобства слева найдете список категорий/тематик: книги, игры, новости, музыка, путешествия, видео и другие.

UIParade

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

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

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

Источник

Добавить комментарий

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