интерфейс мобильного приложения примеры
Где найти красивые дизайны мобильных интерфейсов (подборка сайтов)
Проекты с архивами скриншотов интерфейсов мобильных приложений могут пригодиться тем, кто уже работает или только вникает в нишу мобайла. Они содержат лучшие варианты или просто хорошие реализации мобильных интерфейсов. В отличии от сервиса 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 — бесконечный источник вдохновения и заодно самый популярный сервис графических закладок. На сайте сможете отыскать много интересных материалов, нужно только зарегистрироваться. Далее вводите в строку поиска нужный вам запрос, например — «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 сайтов источников, где наверняка, найдеттся что-то полезное для работы. Если вы знаете еще проекты архивы интерфейсов мобильных приложений, пишите в комментариях.
Интерфейс мобильного приложения примеры
Разработка интерфейса мобильных приложений — то, чему стоит уделить особое внимание. Дизайн должен быть простым, лаконичным, интуитивно понятным даже для тех пользователей, кто скачал приложение впервые. Не менее важна функциональность и скорость работы. Все это часто помещается в определенные рамки, за которые дизайнер выходить не должен.
Особенности дизайна мобильных приложений и его отличия от десктопных ресурсов
Проектируя интерфейс приложения для мобильных устройств, нужно знать об особенностях дизайна, и дело здесь не только в разрешении экрана. То, что хорошо смотрится с ноутбука или стационарного (десктопного) компьютера, может совершенно не подходить для мобильного устройства, и наоборот.
О чем же следует помнить при разработке интерфейса мобильного приложения?
Размер экрана. Очевидно, что экран телефона меньше экрана компьютера или ноутбука. На дисплее мобильника может поместиться гораздо меньше элементов, поэтому при разработке дизайна важно продумать, что это будет, а также упростить навигацию для пользователя.
Кликабельность. Редко кто сегодня использует стилусы. Поэтому все кликабельные элементы должны быть такого размера, чтобы пользователь мог легко нажать на каждый из них пальцем. Если для этого ему придется увеличить страницу или неоднократно пытаться попасть по кнопке, вряд ли он останется доволен приложением.
Трафик и производительность. Все знают так называемые тяжелые сайты, которые очень неудобно смотреть с телефона — страницы долго грузятся, возникают ошибки. Все, что проектируется для мобильного устройства, должно быть легким — и приложения в том числе. Во-первых, тяжелые файлы много весят, и это может оказаться дорого для аудитории. Во-вторых, все та же скорость работы, которая очень важна. Также стоит следить, чтобы количество обращений к API не снижало общую производительность сервера.
Ориентация страницы. Большую часть времени (около 94%) пользователь держит устройство вертикально. И тем не менее, важно продумать, как будет выглядеть интерфейс при повороте телефона в горизонтальную позицию — это не должно повлиять на удобство.
Управление жестами. То есть можно отключить стандартные кнопки типа «вперед», «назад» и т. д., и все эти команды будут выполняться с помощью определенных жестов. Это отличительная особенность всех современных мобильных устройств, и ее нужно использовать при разработке мобильного приложения.
Камера и микрофон. Ими оснащены все гаджеты. Чаще всего их используют для обеспечения безопасности устройства: помимо стандартного ввода пароля, можно сделать распознавание лица или голоса. Стоит подумать и о других вариантах применительно к конкретному мобильному приложению.
Этапы разработки mobile design
Существуют два основных этапа работы над дизайном:
UX, или User experience — это разработка алгоритма, понимание того, как пользователь будет взаимодействовать с приложением. Иными словами, это некий каркас, архитектура ресурса.
UI, или User Interface Design. UI дизайн определяет внешний вид, удобство и эстетику интерфейса.
Если говорить простым языком, то UX дизайн отвечает за то, как система будет работать, а UI — за то, как все это будет выглядеть. Оба этапа неразрывно связаны между собой, и очень часто всю работу выполняет один человек, особенно в небольших дизайнерских студиях.
В зависимости от особенностей ресурса может потребоваться выполнение каких-то отдельных специфических этапов, но основные шаги при разработке интерфейса любого мобильного приложения всегда одинаковы. Именно поэтапная работа позволяет сэкономить время и ресурсы, а также избежать неожиданных замечаний от клиента.
Создание концепции
Это первый этап разработки после того, как идея самого приложения уже есть. Так как интерфейс разрабатывается под определенную аудиторию, ее нужно изучить и ответить на главный вопрос — чего ждут от нового продукта? Для этого нужно провести исследования. Они бывают:
качественные (интервью, фокус-группы, экспертное мнение) — отвечают на вопросы «как» и «почему»;
количественные (анкетирование, опрос, телефонное интервью) — отвечают на вопросы «сколько» и «как часто».
Все эти исследования помогут составить портрет потенциального потребителя. И уже опираясь на это, можно заняться разработкой функционала приложения.
Важно! В случаях, когда разработка мобильного приложения начинается с нуля, первоначально проводят качественные исследования, чтобы выявить потребности аудитории, а потом количественные. Если же приложению нужна просто доработка, то действовать нужно наоборот.
Далее нужно изучить конкурентов, а также отзывы потребителей об их продукте — это поможет избежать ошибок в разработке. После этого можно перейти к составлению User story map — функционалу будущего прототипа. Дизайнер на основе полученных данных ставит цели, которые преследует пользователь в приложении, а затем указывает действия для их достижения. На этом этапе решается вопрос о том, как будет выглядеть интерфейс приложения: что будет на основном экране, размер кнопок и т. д.
К примеру, если речь идет о разработке приложения для вызова такси, уместно будет разместить минимум иконок и хорошую карту. Пользователь должен просто открыть приложение, нажать пару кнопок и заказать машину — лишняя навигация в прямом смысле будет лишней.
А вот интерфейс приложения интернет-магазина совсем иной. Он, наоборот, может пестрить иконками, которые будут меньше по размеру, но при этом удобны в плане кликабельности.
Мозговой штурм
После разработки концепции стоит приступить к методике мозгового штурма. Для этого все члены команды должны выдвигать свои идеи. Если дизайнер один, то он делает это самостоятельно. Главное правило — предложений должно быть много, пусть даже самых необычных и невыполнимых. Как показывает практика, именно из них в итоге и выходит что-то стоящее.
Именно мозговой штурм, или брейнсторминг дает жизнь самому интерфейсу, превращая идею в реальность. Можно работать на бумаге или в специальных программах, например, Balsamiq Mockups, Sketch, Photoshop и InVision — дело вкуса и привычки.
Создание User Flow Diagram: пример блок-схемы
Разработка интерфейса мобильного приложения — это хорошо, но без представления, как им будут пользоваться, дальше продвинуться не получится. И тут на помощь приходит создание User Flow Diagram.
Это визуальное представление действий пользователя, которые он совершает при взаимодействии с мобильным приложением. Выполняется в виде блок-схемы. User Flow Diagram иллюстрирует всю логику и возможные варианты использования.
Согласование структуры интерфейса и переходов
После создания структуры интерфейса и диаграммы переходов нужно согласовать это с заказчиком. Не стоит отправлять верстку на утверждение, продолжая работать дальше: если клиенту что-то не понравится, проще всего внести исправления именно сейчас.
Если продолжить разрабатывать интерфейс, а затем что-то поменять в структуре, может оказаться, что половину работы придется делать заново.
Определение внешнего вида интерфейса и утверждение стиля
Если предыдущий этап успешно пройден, можно переходить к визуальной части — выбору стиля. Лучший вариант — попросить у заказчика примеры ресурсов, интерфейс которых его устраивает, и отталкиваться от них.
Хороший web-дизайнер должен разбираться в актуальных трендах оформления, а также понимать, что именно подойдет по тематике именно этому клиенту. На основе этих знаний, пожеланий и требований заказчика нужно разработать дизайн. На этом же этапе определяется масштабирование и общее время, которое уйдет, чтобы выполнить соответствующий дизайн.
После этого нужно рассказать заказчику о своем видении, а также объяснить, почему были приняты такие решения для разработки. Целью этого этапа является принятие того интерфейса, который устроит обе стороны.
Демонстрация проекта: макеты, прототипирование и другие варианты
После утверждения общего стиля мобильного приложения нужно показать клиенту полную версию дизайна. Есть разные способы демонстрации продукта, поэтому можно смело выбирать наиболее удобный для себя вариант прототипирования.
Wireframe. Это самый простой инструмент прототипирования интерфейсов. Довольно низкоуровневая демонстрация готового ресурса позволяет наглядно показать, как пользователь будет взаимодействовать с приложением, а также его структуру. По ходу работы можно добавлять необходимые комментарии.
Макет. Это более реальная демонстрация готового приложения. Картинки здесь статичны, но заказчику сразу понятно, как и что будет выглядеть. Можно создать презентацию. Ранее макеты часто рисовали с помощью Adobe Photoshop, сейчас ему на смену пришло приложение Sketch.
Кликабельный прототип. Это наиболее близкий к реальности прототип мобильного приложения. Здесь можно нажимать кнопки, переходить по ветке меню и делать почти все из того, что будет доступно реальному пользователю. Один из самых наглядных вариантов демонстрации разработки приложения, на создание которого уходит довольно много времени и ресурсов. Для работы часто используют InVision, нередко ее дополняет Craft.
Анимированные flow. Это самый наглядный и в то же время самый сложный в исполнении вариант демонстрации процесса работы приложения. В отличие от кликабельного прототипа, здесь еще нужно записать видео взаимодействия с ресурсом. Важно понимать, что сложная анимация существенно затянуть весь процесс, что нежелательно для всех сторон. К тому же соответствующими навыками владеют далеко не все дизайны.
Утверждение дизайна приложения
После демонстрации необходимо внести финальные правки по дизайну. Заказчик уже представляет, как будет выглядеть мобильное приложение. Нередко оказывается, что тот, кто соглашался со всеми предложениями ранее, сейчас заявит, что итоговый результат он представлял иначе. И тогда велика вероятность, что дизайнеру придется очень много переделать. Но в большинстве случаев, при качественном взаимодействии дизайнера и клиента на предыдущих этапах, правки оказываются минимальны.
IOS против Android — две глобальные операционные mobile системы
На сегодняшний день 98% рынка поделили между собой IOS от Apple и Android от Google, поэтому все популярные мобильные приложения разрабатываются под одну из этих операционных систем. Для того чтобы улучшить пользовательский опыт, каждый из гигантов IT-индустрии выпустил рекомендации по дизайну, разработке и проектированию приложений:
Google Material Design для Android;
Human Interface Guidelines для IOS.
Их можно найти в свободном доступе в интернете. Периодически рекомендации изменяются, дополняются, поэтому стоит время от времени перечитывать их заново — это поможет быть в курсе происходящих изменений и актуальных трендов.
Слепо следовать рекомендациям не нужно. Достаточно понимать общие принципы разработки и особенностей веб-дизайна. Более того, можно даже попробовать применить какие-то моменты из рекомендаций для Android к iOS, и наоборот.
Важно! Если у дизайнера телефон Iphone, но в данный момент идет работа над приложением для андроида, стоит хотя бы на время обзавестись устройством именно на андроиде, чтобы лучше понять его интерфейс. И наоборот.
О том, как создавать приложения для разных операционных систем, мы писали в статьях «Дизайн приложений для IOS» и «Дизайн приложений для android».
Советы начинающему дизайнеру мобильных приложений
Если вы только начинаете работать над проектированием мобильных приложений, стоит заранее изучить все аспекты разработки и послушать советы бывалых дизайнеров.
Работа с заказчиком
Хороший дизайнер всегда открыт к диалогу и слушает пожелания заказчика на всех этапах разработки. Даже если идея клиента кажется не самой удачной, стоит дослушать его до конца и предложить свои варианты с учетом запросов заказчика. Мнение и представление о mobile design у клиента и дизайнера могут отличаться, и очень важно донести свои предложения аргументировано, а также понять, что именно в итоге хочет получить клиент. Стоит брать во внимание, что на сам проект влияет сразу несколько факторов:
сроки выполнения заказа;
бюджет, который заказчик закладывает в проектирование;
цель дизайна — одно дело, когда нужна просто презентация для инвесторов, другое — полноценное мобильное приложение;
Взаимодействие с разработчиками
Сделать красивый графический дизайн и в готовом виде отдать его разработчикам — большая ошибка. Велик риск, что многое придется переделывать, но уже в другие, сжатые сроки. Хороший дизайнер с самого начала активно взаимодействует с разработчиками мобильного приложения, обсуждая свои решения и предложения.
В идеале дизайнер должен разбираться не только в своей работе, но и в вопросах разработки, а также четко представлять, насколько реализуемы его дизайнерские решения на практике. Это значит, что придется работать в команде и изучать соответствующую литературу. Если на проекте еще нет разработчиков, можно контактировать с разработчиками из других проектов на той же платформе.
Процесс проектирования мобильного приложения
Чтобы максимально упростить себе задачу, дизайнер может использовать уже готовые элементы. Этот способ работы имеет сразу несколько плюсов:
упрощает сам процесс создания интерфейса;
упрощает пользование приложением на всех уровнях, так как элементы, скорее всего, уже знакомы потребителю;
дизайн будет выглядеть более гармонично.
Поэтому дизайнеру желательно изучить онлайн-каталоги с готовыми элементами и максимально использовать их в проекте.
Использование UI Kit с самого начала работы над проектом
UI Kit — это готовый набор для создания интерфейса мобильного приложения, выполненных в едином стиле. Создается дизайнером с целью передачи начинающим коллегам или для продажи. Использование UI Kit несет в себе множество преимуществ:
единый целостный интерфейс на всех экранах, что помогает оптимизировать время на разработку сложного приложения;
вносить необходимые изменения по мере работы легко;
дизайнеру в процессе работы все реже приходится отрисовывать что-то с нуля;
качественный UI Kit – находка для разработчиков: они пишут коды по тем же принципам, поэтому свободно смогут вносить изменения;
внешний вид интерфейса сохраняется даже при смене дизайнера. Если в середине проекта поменяется сотрудник, новый дизайнер легко сможет продолжить работу с сохранением всех деталей стиля предшественника.