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

Процесс создания дизайна мобильного приложения с нуля

Я начала изучать графический дизайн, когда мне было 13 лет. Я научилась проектировать веб-сайты по онлайн-курсам и целыми днями игрался с Photoshop и Affinity Designer. Этот опыт научил меня мыслить, как дизайнер.

Я занимаюсь проектированием и разработкой приложений уже почти год. Я приняла участие в программе Массачусетского технологического института, где я работала в команде по разработке приложения Universeaty. Два месяца назад я начала работать над новым приложением Crypto Price Tracker, которое вышло недавно, 28 января.

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

Процесс проектирования:

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

Давайте начнем!

Юзерфлоу

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

Обычно юзерфлоу состоит из трех типов фигур.

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

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

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

Юзерфлоу для основного интерфейса.

Прототипы

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

Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошую рабочую область для рисования и заметок.

Вот пример прототипа.

Прототип интерфейса мобильного приложения

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

Наброски дизайна и цветовые палитры

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

Лучшие платформы для поиска паттернов – это Mobile Patterns и Pttrns. И чтобы найти хорошие цветовые палитры, посетите сайт Color Hunt.

Дизайн

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

Существуют программные средства разработки и инструменты для создания дизайна. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch.

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

Перенесение рисунка в пиксели!

Я больше экспериментировала с различными цветовыми палитрами.

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

Будьте готовы получить отзывы и поэкспериментировать с новыми предложениями! Вы получите удивительные отзывы от своих пользователей, когда разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance.

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

Золотой градиент с черным на удивление хорошо выглядит!

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

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

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

Финальная версия дизайна

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

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

Я заканчиваю статью одной из моих любимых цитат о дизайне

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

ux.pub

Вклад дизайнера в разработку мобильных приложений / Habr

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

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

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

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

Как дизайнер может облегчить жизнь разработчику?

Итак, у дизайнера, независимо от его профиля и направленности, существует множество инструментов, с помощью которых он может отрисовать то, что от него требуют. Только вот просто отрисовать экраны мобильного приложения недостаточно. Это не веб-сайт и не веб-приложение. У этой категории цифровых продуктов более строгие правила, которым нужно подчиняться. Под платформы IOS и Android созданы отдельные гайдлайны (см. раздел «Полезные ссылки»).

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

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

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

Дизайнер — часть команды

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

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

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

Как уже было сказано выше, разработчику сейчас приходится столько всего изучать, что времени разбираться в графических редакторах просто нет. Поэтому дизайнер не должен отрисовывать элементы в Photoshop / Illustrator и сдавать макет в *.psd / *.ai файлах. Такие файлы довольно много весят и требуют установки пакета Adobe. Даже если это не играет особой роли, на изучение этих редакторов просто нет времени.

Разработчик хочет просто выбирать элементы и видеть, как их верстать, а не разбираться в структуре слоев одного огромного файла. Сейчас существует много графических редакторов для отрисовки мобильных приложений: Sketch, Figma и другие. В общем, есть из чего выбрать. От выбранного редактора будет зависеть то, как дизайнер представит кликабельный прототип и “живые экраны” для фронтенда.

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

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

Дизайнер должен знать гайдлайны под разные платформы и их отличия

Довольно часто дизайнеры рисуют проекты, не разбираясь в гайдлайнах, смешивают стили или создают нестандартные элементы, думая о красоте экрана. Таких примеров довольно много на Dribbble и Behance. Клиенты, не зная об этих нюансах, одобряют макеты. Когда дело доходит до разработки, дело стопорится. Дизайнер не хочет переделывать неправильно выполненную работу. Заказчик требует именно такой экран или эффект, который он одобрил, но его невозможно сделать.

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

Ресурсы

Это самый больной вопрос при взаимодействии с дизайнером. Обычно дизайнеры не нарезают ресурсы. В большинстве своем они считают, что: не обязаны это делать; это долго и монотонно, и если разработчику надо, он сам все нарежет или можно сбросить *.svg; не знают, что именно нужно нарезать и в каких размерах.

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

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

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

ТЗ с описанием работы экранов

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

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

Что делать, если ничего из вышеперечисленного нет, а работать нужно?

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

Проект был связан с арендой недвижимости и разрабатывался под две платформы: IOS и Android. Процесс разработки начинался как любой другой. Позже оказалось, что дизайнер не полностью разбирался в мобильных приложениях. Что такое гайды он не знал. На дизайне присутствовали прозрачные элементы, шрифты использовались только под одну платформу. Колористику можно было описать как использование “50 оттенков серого”.

Мне дали *.psd файл. Вроде бы ничего плохого. Такие файлы сдают многие дизайнеры. Но мне пришлось установить пакет Adobe, чтобы взглянуть на макет. Файл был очень “тяжелым” и открывался минут 10. Не все экраны были отрисованы отдельно на рабочей области. Они находились один поверх другого как слои, и чтобы посмотреть один экран, нужно было отключить все остальные. Так как у меня не было значительного опыта работы с пакетом, я подумал об Avocode как об инструменте для обработки дизайн-материала. Конечно, эта программа не идеальна, но она меня буквально спасла.

Кликабельный прототип мне передали в InVision. Замечу, просто кликабельный прототип без живых экранов.

Выводы:

Что я ожидал получить от дизайнера:

• кликабельный прототип и живые экраны (InVision, Zeplin или Figma)
• переработанное ТЗ с описанием работы экранов
• карту экранов с переходами
• пользовательскую историю
• нарезанные ресурсы в размерах @1, @2, @3
• шрифты

Из всего перечисленного я получил только кликабельный прототип и *psd файл.

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

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

Всем спасибо за внимание и успешных проектов!

Полезные ссылки:

IOS guidelines
Android guidelines
Problems of development the legacy mobile project
Figma
Sketch

habr.com

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

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

Знайте свой рынок

Одной из первых вещей, которую вы должны сделать, чтобы подготовить и информировать себя к разработке мобильного приложения, является наличие собственного смартфона. Это должно быть очевидным, что если вы являлись пользователем смартфона в течение нескольких лет, для вас это станет большим преимуществом при разработке мобильных приложений. Вы должны стать пользователем перед тем, как быть дизайнером, и с помощью самого устройства и его приложений, вам будет намного легче понять потребности и проблемы приложений. Ваше внимание должно быть сконцентрировано на iPhone или Android, так как они являются двумя наиболее распространенными платформами. В последнее время с запуском Windows Phone 8, появился рынок, с дизайном и для этой платформы. И даже если вы должны быть осведомлены о всех видах приложений, предназначенных для нее, мы все еще бы рекомендовали вам пока сосредоточиться на IOS и Android.

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

Так что, если случайно, вы все еще не пользователь смартфона, то тогда пора купить один и начать загрузку и тестирования приложений, так как это пользовательский опыт, и безусловно, один из самых важных вещей при разработке богатых и мощных мобильных приложений. И не лимитируйте себя только устройством, которым вы владеете, пытайтесь получить информацию о других тоже. Вы можете проверить скриншоты приложений на каждом рынке, App Store для IOS, Google Play для Android и Apps+Games для Windows Phone. Мы рекомендуем вам проверить одну услугу и как эта услуга работает на разных мобильных платформах, таким образом вы сможете изучить стили и различия между каждой платформы. Например, ниже вы можете посмотреть пример Facebook для IOS, Android и Windows Phone.

Визуальное вдохновение

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

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

Вы должны вдохновлять себя большими мобильными приложениями, которые создаются, пока мы говорим. У веб-сайтов, таких как mobile-patterns.com и pttrns.com есть сотни экранов с высоким качеством для мобильных приложений. Если вам нужно вдохновение по иконкам IOS, тогда советуем посетить iicns.com.
Визуальное вдохновение не только важно для внешнего вида вашего приложения, но и для того, как пользователь взаимодействует с ним. Постарайтесь узнать все возможные жесты, поймите, как пользователь хочет взаимодействовать с приложением, и спросите себя, какой самый простой и самый естественный путь для достижения действия, и как вы можете сделать инновацию (прорыв) в этой области?

Дизайн мобильных шаблонов

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

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

Задайте себе следующие вопросы: «Какая главная цель моего приложения?”, “Сколько и какие наиболее важные разделы моего приложения”, “Какие действия должны быть доступны пользователю при использовании приложения?». Это вопросы, которые помогут вам выбрать шаблон и определить его базовую структуру.

Начинаем дизайн

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

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

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

Как только макет экрана и приложения закончен, вы можете перейти к созданию последних отполированных пикселей в Photoshop. Мы бы рекомендовали вам, получить хороший PSD, такой как teehan+lax iOS шаблон. Тем самым вам не прийдется заниматься дизайном iOS “дефолтовых” элементов, таких как кнопки, меню выбора, уведомления и т.д. Не волнуйтесь, если вы разрабатываете приложение для Android, для них тоже существуют шаблоны.

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

 

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

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

28-03-2016

lpgenerator.ru

Адаптивный дизайн приложения под каждого пользователя / Habr

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

А что если уйти еще дальше и помимо контента предоставлять людям персонализированный UI?!

Теория

Концепция

1. Приложение само понимает, чем ты часто пользуешься и выносит часто используемую функциональность на первый экран.
2. Располагает элементы по степени значимости на странице так, чтобы вам не нужно было бы тянуться большим пальцем до него.
3. В зависимости от того насколько часто этот элемент используется, его содержание тоже будет сильно отличаться
4. Так же есть триггеры: пришло пуш уведомление, определенная дата или действие пользователя. Этот триггер имеет свой удельный вес, который присваивается отдельному элементу на короткое время.

Логика

Этап калибровки

Человек пользуется приложением.

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

Этап плавного внедрения

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

Этап проверки элемента

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

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

Практика

Пример реализации приложения

Хороший пример это банковские приложения.

Почему?

1. Они многофункциональные
2. Большая часть функций мне как пользователю вообще не нужна, но другим они могут быть важней
3. Некоторая часть функций может быть нужна, только в определенный момент
4. Такими приложениями пользуются все, поэтому легче понять концепцию

Здесь я постараюсь показать на этапе эскизов как я вижу должно быть. Если пост будет интересен, то тогда я уже сделаю демо приложение на iOS.Грубый эксиз приложения

Сценарии

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

Сценарий 1: Перевожу часто деньги одному и тому же человеку (младший брат, ребенок, жена).

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

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

2 уровень блока:

Здесь мы уже можем переводить непосредственно с самой ячейки, нажав на кнопку перевести

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

3 уровень блока

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

Сценарий 3 Закрываю кредит после получения зп.

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

В блоке теперь появляется оплата кредита.

Сценарий 4 Использую чат с поддержкой

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

Сценарий 5 Вывожу деньги с расчетного счета на карту

Срабатывает триггер о поступлении денег р/с и я допустим всегда распределяю их между своими картами:

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

habr.com

Общие принципы в создании мобильных приложений для начинающего UX/UI-дизайнера / e-Legion corporate blog / Habr

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

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

Ещё они нужны, когда выходит классное обновление в приложении, и грех его не выделить.

Яндекс.Транспорт рассказывает о новых фишках.

Среднее количество слайдов 3-4, больше читать неинтересно.

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

Например, в iOS основное меню находится снизу в Tab bar, а в Android –– это боковое меню.

Пример отображения экрана на iOS и Android.

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

9-ая операционная система поддерживается не на всех устройствах, т.е. рисуя макеты для iPhone 6, используя шрифт SF, необходимо понимать, что у некоторых пользователей будет старая добрая гельветика. (Это нестрашно, разве что, может помешать в максимальном значении символов в одной строке)

В принципе, разница не раздражает, а кому-то и совсем не видна.

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

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

Один экран на разных разрешениях.

Красота в деталях. Особенно приятно, когда в приложении продуманы все мелочи: что делать, если контента пока нет? Не загрузился? Загрузилась часть? Отвалился интернет? Всё это необходимо отрисовать и отдать разработчику, иначе он всё сделает за вас.

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

Шрифт (android)

Недавно я столкнулась с тем, что в Аndroid каждая компания задает свой шрифт, т.е. может получиться такая ситуация, что в модели нет шрифта roboto. Или пользователь установил свой шрифт в смартфоне (рукописный или др.). Что делать в этом случае? Идеальная картина на nexus, это слишком маленький процент, чтобы ориентироваться только на него.

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

А ещё можно встретить вот такие баги.

Здесь ситуация ещё интереснее, чем в iOS. Размеров смартфонов даже в одной ветке (XH, например) много, и сделать на всех устройствах идеально невозможно. Но может помочь выработка принципа отображения элементов. Как вариант, выяснить для себя, что отображение функций на экране девайса 2:1 и передать эту информацию разработчику.

Тут стоит не забывать проработать момент с клавиатурой и набором текста.

Пожалуйста, любите детали!

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

Если у вас остались вопросы или вы считаете иначе, то я буду рада пообщаться с вами! И спасибо вам за ваши комментарии!
Мой e-mail: [email protected]

habr.com

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

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

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

Готовый прототип можно тестировать на реальном мобильном стройстве или в браузере.

Инструмент для создания мокапов на HTML5 с простым интерфейсом и набором форм, кнопок, полей, контейнеров и основных элементов интерфейса. 

Содержит шаблоны для прототипирования приложений под iPhone и iPad.

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

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

Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.

Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.

Генератор интерактивных прототипов с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов, библиотеками для iPhone, iPad и Android.

Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.

Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.

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

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

Инструмент  создания интерфейсов и диаграмм для приложений под iPhone.

Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.

Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.

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

Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.

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

Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.

Позволяет создавать кликабельные мокапы с возможностью навигации по элементам и структуре прототипа приложения. Есть шаблоны для iPhone/iPad и устройств на основе Android. Готовый прототип можно экспортировать в IPML, JPG, PNG, PDF или HTML, либо отправить ссылкой на веб-страницу другим участникам проекта для обсуждения и совместного тестирования.

Завершает подборку open-source инструмент разработки диаграмм и прототипов интерфейса с поддержкой встроенной библиотеки форм и элементов и возможностью создавать визуальные блок-схемы для дизайнеров мобильных приложений.

spark.ru

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

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

• Имеет возможность визуального редактирования;
• Поддерживает фреймы;
• Подходит для разработки дизайна приложений на Android и iOS.

2. Mockflow для фрейминга:

• Включает огромную библиотеку элементов;
• Идеально подходит для платформ Android, iOS и Windows Phone;
• Имеет большое количество элементов для прототипирования.

3. Balsamiq для прототипирования:

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

4. Платформа Proto для создания прототипов:

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

5. Flair Builder – инструмент для создания интерфейса мобильных приложений:

• Включает массу функциональных возможностей для реализации дизайнерских решений;
• При помощи данного инструмента можно создать HTML-прототип практически каждого дизайна;
• Позволяет тестировать прототипы на смартфонах в режиме реального времени.

6. Библиотека HotGloo:

• Поддерживает CSS3-эффекты;
• Позволяет легко проводить тесты дизайна на дисплее любого мобильного устройства;
• Содержит огромное количество графических элементов.

7. Редактор Invision для внесения быстрых изменений в дизайн:

• Имеет большое количество шаблонов;
• Поддерживает множество форматов;
• Включает возможность экспорта готовых прототипов.

8. iPlotz для создания мокапов:

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

9. Инструмент Wireframe Sketcher:

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

10. Веб-приложение Pidoco:

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

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

Share this:

lampalampa.net