Выходные — идеальное время, чтобы попробовать новые инструменты и креативные приёмы; Отсутствие давления со стороны боссов или клиентов, и (надеюсь) без переадресации на электронную почту или телефон. В эти выходные, между делом, попробуйте создать мобильное приложение в Adobe XD, со своими друзьями или семьёй. XD — универсальный инструмент от Adobe для UX/UI дизайна, прототипирования и обмена опытом своего веб-сайта или мобильного приложения.
Чтобы вы могли работать на много быстрее, мы отобрали для вас некоторые из лучших наборов пользовательских интерфейсов, учебные руководства и ресурсы, чтобы научить вас, как делать дизайн мобильного приложения в XD.
Четыре шага для разработки мобильного приложения
Шаг 1: Скачать Adobe XD и Wires
Поместите свои лучшие идеи в превосходный пользовательский опыт, загрузив последнюю версию Adobe XD и бесплатный комплект вайрфреймов. Комплект Wires включает в себя полный набор готовых к использованию компонентов, шаблонов и многое другое.
Шаг 2: Дизайн
Следуйте этому учебному руководству, чтобы узнать, как создать мобильное приложение в XD. Вы узнаете основы XD, в том числе создание артбордов, разработка иконок и заставок, импорт изображений и работа с повтором сетки (Repeat Grid).
Урок включает:
- Ваше рабочее пространство в XD
- Основные фигуры и текст
- Повтор сетки
- Использование комплектов UI
Шаг 3: Прототип
Следуйте этому учебному руководству, чтобы превратить свой дизайн в интерактивный прототип. Свяжите артбоды друг с другом, переключитесь от дизайна к прототипу и просмотрите свой результат.
Урок включает:
- Режим прототипа
- Связывание артбордов
- Режим предварительного просмотра
Шаг 4: Совместное использование
В этом уроке вы узнаете, как поделиться своим прототипом, чтобы получить обратную связь, предварительно просмотреть на мобильном устройстве и поделиться спецификациями дизайна с разработчиками.
Урок включает:
- Совместное использование прототипов
- Предварительный просмотр на мобильных устройствах
- Добавление комментариев
- Совместное использование спецификаций дизайна
Шаг 5: Добавить финальные штрихи
Загрузите эти бесплатные ресурсы UI, которые помогут вам усовершенствовать опыт любого, проектируемого вами, мобильного приложения.
- Travel Companion UI Kit — Комплексный набор для приложений или веб-сайтов с тематикой, путешествий, от отелей, полетов и списков активностей, до кнопок и иконок.
- Navigo Transportation UI Kit — Поможет вам разрабатывать транспортный опыт для приложений или веб-сайтов, с более чем 60 настраиваемыми экранами, наполненными символами и другими элементами, такими как навигация.
- Apple iOS Design Resources — Новые материалы пользовательского интерфейса, облегчающие быстрое создание приложений для iOS.
- Google Material Sticker Sheet — Предоставляют элементы, такие как светлые и темные символы для статус-баров, панелей приложения, нижних панелей инструментов, карточек, раскрывающихся меню и многого другого, для дизайна приложений под Android.
Жаждете большего?
Поиграйтесь с этими комплектами пользовательского интерфейса
- Windows UI Kit — Позволит начать дизайн приложения для Universal Windows Platform (UWP).
- Office UI Fabric Design Kit — Поможет вам разрабатывать, полноценные решения Office и Office 365.
- Smartwatch UI Kit — Обширный комплект пользовательских интерфейсов смарт-часов с 20+ настраиваемыми компонентами и 30+ отлаживаемыми иконками.
- Dashboard UI Kit — Включает в себя 100 конфигурируемых компонентов на 10 экранах с более чем десятком диаграмм (основой большинства панелей администрирования), для упрощения процесса дизайна административной панели.
- Gaming UI Kit — Содержит все компоненты, которые вам понадобятся для дизайна игровой системы, включая полностью перестраиваемые векторные фигуры и символы, а также 31 разнообразный артборд, и всё это смотрятся великолепно, на больших экранах и игровых мониторах.
Посмотрите на Adobe XD в действии с проектом AdobeLive Behance
Behance может стать отличным ресурсом, чтобы посмотреть, что возможно с Adobe XD. Ознакомьтесь с этим красивым примером действенного UX дизайна, созданного Bahdis Mousavi и Rolf Jensen в Adobe XD.
Mousavi и Jensen использовали Adobe XD, чтобы создать мобильное приложение для салона красоты, которое позволяет пользователю отслеживать определенного стилиста, парикмахера или визажиста, и просматривать график их работы и портфолио. Также приложение пользователям позволяет пользователям оставлять отзывы определённым мастерам, о предоставленных услугах клиентам, тем самым решая две ключевые проблемы в индустрии услуг красоты: Пользователи могут оценивать конкретного мастера, а не заведение, плюс пользователь всегда может отслеживать предпочтительных для себя профессионалов, даже если они меняют салоны.
Этот проект Behance включает исходный файл XD, поэтому вы можете скачать и воспроизвести его, чтобы просмотреть все элементы, которые вошли в интерактивный прототип Mousavi и Jensen.
Следите за процессом UX дизайна в трансляции Трэвиса Нильсона
Когда вы только готовитесь увидеть, насколько мощный Adobe XD, в процессе UX дизайна, трансляции AdobeLive от Трэвиса Нильсона, переполнены отличными идеями и советами. Трэвис Нильсон — дизайнер взаимодействия с продуктом в Google, писатель, подкастер и ютубер, увлечённый UX дизайном. В следующих трёх видео, Трэвис покажет, как задействовать весь процесс проектирования UX, от планирования до рисования эскизов и, окончательного проектирования, прототипирования и построения готового продукта.
Видео 1: Макет приложения "Instagram для подкастов"
В первом видео Трэвис использует Adobe XD для создания макета приложения «Instagram для подкастов».
Что вы изучите:
- Основы UX дизайна — от процесса разработки сценария использования до определения целевых пользователей.
- Как набросать эскиз UI/UX интерфейса и дизайн прототипа низкой точности в Adobe XD.
Он объясняет UX дизайн, проводя вас сквозь процесс разработки сценария использования и выявления целевой аудитории. Затем он сделает набросок UI/UX интерфейса и разработает прототип низкой точности в Adobe XD.
Видео 2: Вайрфрейминг “прототип Instacast”
Во втором видео, Трэвис заканчивает несколько артбордов высокой чёткости и демонстрирует анонс прототипа Instacast.
Что вы изучите:
- Как сделать набросок и исследование потока пользовательских операций.
- Как сделать вайрфрейм в Adobe XD.
Видео 3: Конструируем артборд профилей и эпизодов
В третьем видео, Трэвис конструирует артборды профиля подкастеров и список эпизодов.
Что вы изучите:
- Как проникнуть в поток нового опыта вайрфрейма.
- Советы и рекомендации по дизайну, исследованиям пользователей и пользовательскому опыту.
