Как прототип мобильное приложение с Adobe XD

Это руководство, показывая вам, как сделать прототип мобильного приложения в Adobe XD, был собран вместе с использованием Adobe XD CC (Beta 2017) в 2016 году недавно запущенный Adobe XD CC У него было несколько твиков, что делает его еще проще в использовании.

• Получите скидку 15% на Adobe Creative Cloud здесь

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

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

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

Что если бы был один инструмент, который означал, что вы можете насладиться полностью подключенным рабочим процессом? Где вы можете разработать и прототип свой опыт в считанные минуты, поделитесь ими в Интернете, чтобы захватить обратную связь, затем легко сделать редактирование, не нарушая свой шаг? Цель с помощью Adobe Teamply Design CC - или, как мы его называем, Adobe XD - это сделать только что.

В этом руководстве мы покажем вам основные области Adobe XD путем проектирования, прототипирования и совместного использования простой «соответствовать мобильному приложению Team».

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

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

Обратите внимание, что некоторые процессы могут незначительно измениться в более новой версии Adobe XD.

01. Установите Adobe XD и начните новый дизайн

Во-первых, убедитесь, что Adobe XD установлен на вашем компьютере Отказ Запустите его, посмотрите на экран приветствия и начните новый дизайн с шаблоном iPhone Artboard.

02. Создать вторую артборду

Используйте инструмент ArtBoard ( А. ) Чтобы создать вторую артборду, затем измените их заголовки (дважды щелкнув на них) на «Page iPhone - Team Page» и «PAGE IPHONE - PAGE TELL». Измените цвета фона Arrboards 'Background для черного, используя инспектор свойств справа. С выбором инструмента ( Внимание ) Выбран, вы можете нажать пробел в любое время для кастрюли по вашему дизайну.

03. Скачать Учебные активы

Я собрал папку активов, которые я буду использовать на протяжении всего этого руководства. Вы можете скачать их здесь Отказ От Finder, Drag 'iPhone-status-bar.svg' на вершину Artboard 1 ( х: 8, у: 5 ). Затем скопируйте и вставьте его в Artboard 2, поэтому оба артерета имеют строку состояния на вершине. Ударить CMD + L. Чтобы заблокировать эти полосы состояния в обеих армантах, поэтому их свойства не могут быть изменены. Чтобы разблокировать их, вы можете снова использовать ярлык или щелкнуть значок «Блокировка».

04. Нарисуйте прямоугольник и установите размеры

Давайте сосредоточимся на Armboard 1 (страница команды). Использование инструмента прямоугольника ( р ), нарисуйте розовый прямоугольник (# FF2BC2 без границы) в Artboard 1 и установите его размеры до 375 x 230, используя панель инспектора свойств справа.

05. Изменить порядок объектов

Чтобы повернуть границу или заполнить включение и выключение, нажмите на значок «глаз» справа. Ударить Shift + CMD + [ отправить его до конца до спины или перейти к Объект & gt; Arrange & gt; Отправить на обратную связь Отказ Если вы хотите изменить цвета, используя шестнадцатеричные значения, щелкните значок цвета, и когда появляется нативный сборщик цветов, выберите вторую вкладку в верхней части и измените раскрывающуюся до «ползунки RGB».

06. Создайте заголовок

Использование текстового инструмента ( Т ), нажмите, чтобы создать заголовок для вашей страницы команды. Мой - Helvetica Bold, 20, #ffffff, X: 18, Y: 123. Давайте начнем собрать наш список членов команды. Нарисуйте серую площадь, где фотография члена команды будет сидеть (100 х 100, х: 8, Y: 238, # D0D0D0 без границы).

07. Добавьте еще один прямоугольник

Справа от этого нам нужен белый прямоугольник (260 х 100, х: 108, Y: 238, #ffffff без границы), на котором мы включаем имя члена команды в качестве заголовка и заголовок задания в качестве подпозда. На данный момент используйте текст заполнителя и стиль, как вы хотите.

08. Добавить значок стрелки

Чтобы показать эту коробку, будет приспособленным областью, мы включаем значок стрелки. Перетащите «Path.svg» от Finder на XD Canvas до точки с артборда. Затем переместите его к X: 330, Y: 279.

09. Поместите свой выстрел в голову

От искателя, перетащите головы на место на сером квадрате.

10. Создать список

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

Ну, не с Adobe XD - вы можете использовать функцию Repeart Grid. Выберите элементы, которые вы хотите повторить, нажмите кнопку «Повторить сетку» на инспекторе свойств справа ( CMD + R. ) И используйте зеленые ручки, чтобы повторить элементы вертикально. Вы также можете повторить их горизонтально для версии планшета.

11. Отрегулируйте маржу

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

12. Отредактируйте текстовые поля

Хотя свойства (цвета, положения X и Y и т. Д.) являются глобальными, содержание каждого элемента может быть уникальным. Отредактируйте текстовые поля каждому человеку и заголовок задания. Вы можете дважды щелкнуть, чтобы войти в сетку и группу, или CMD + клик Для прямого выбора любого элемента в группе или повторной сетке. Теперь нам просто нужно сразу захватить все головы и перетащить их на сетку, и мы закончили с этим экраном.

13. Создайте затемненный эффект

Давайте перейдем к Artboard 2 (страница детализации). Опять же, мы начнем с прямоугольника заполнителя (375 x 444, X: 0, Y: 0, #ffffff без границы) и перетащите головы, чтобы заполнить его. Мы создадим затемненный эффект, изменив непрозрачность изображения до 60 процентов и отправляя его обратно ( Shift + CMD + [ ).

14. Добавьте другую стрелку

Затем заблокируйте элемент головы ( CMD + L. ) и добавьте другую стрелку («Back-Arrow.svg»), чтобы указать, что пользователь может вернуться в список команд. Это нужно сидеть на X: 20, Y: 40. Важно сначала заблокировать изображение, потому что в противном случае SVG заменит выстрел.

15. Добавить контактную информационную панель

Мы хотим включить розовую панель на каждой странице, которая перечисляет контактные данные члена команды (375 x 45, X: 0, Y: 400). Используйте текстовый инструмент ( Т ) Чтобы создать текстовый элемент, чтение «Plachholder Link», отцентрируйте его, стиль его, и поместите его на X: 169, Y: 416.

16. Создайте больше экземпляров текстового элемента

Давайте используем инструмент Repear Grid для создания еще двух экземпляров этого текстового элемента. Сначала конвертируйте текст на повторную сетку ( CMD + R. ) Затем удерживайте клавишу опция при расширении сетки горизонтально. Красивая, не так ли? Direct - выберите текст ( CMD + клик ) и измените содержимое, чтобы прочитать «электронную почту», «Twitter» и «LinkedIn».

17. Создание имени и Bio Box

Чтобы закончить дизайн, создать белую коробку (360 x 214, X: 8, Y: 445), которые будут включать имя члена команды и бигу. Сначала добавьте текстовый элемент, используя имя человека заполнителя. Для текстового элемента, который удерживает бигу, мы хотим использовать область текста. Для этого выберите текстовый инструмент ( Т ) и нажмите и перетащите, чтобы определить область для вашей копии. Опять же, найдите несколько текста заполнителя и отрегулируйте его стиль свойства.

18. Создавайте артеруты для других членов команды

Теперь давайте сделаем новые артборды для других членов команды. Первое разблокировать основное изображение ( CMD + L. ), затем нажмите на заголовок Armboard 2, чтобы выбрать его и нажмите CMD + C. скопировать это. Уменьшить ( CMD + - Или используйте трекпад, чтобы скрепить Zoom), затем нажмите CMD + V. вставить три новых артборда. Добавьте некоторую информацию BIOG на каждую страницу. Обновите имена и изображения выстрелов и договорим о армиментах на холсте. Круто! Наш дизайн закончен сейчас.

19. Установите поток

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

20. Подключите вверх

Пойдем, хотя каждый из предметов в нашем списке на Armboard 1 и проводит их на соответствующую страницу детализации. Для каждого из них мы хотим установить Segue, чтобы скользить влево, и ослабление ослабить. Далее мы можем подключить спину стрелки на каждой из деталей страницы назад к Armboard 1 - не забудьте установить Segue, чтобы скользить в этот раз. Бум - наш прототип готов.

21. Проверьте прототип

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

22. Сделайте видео

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

23. Поделитесь своей работой

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

24. Экспорт файлов

От XD, вы можете экспортировать PNGS для веб, iOS и Android в разных размерах, а также высоко оптимизированные файлы SVG.

25. Наслаждайтесь результатами

Поздравляю! Вы освоили основы дизайна Adobe Experial CC (превью). Не стесняйтесь делиться своими прототипами в Интернете и в социальных сетях - Добавить #adobexd. Таким образом, мы можем увидеть вашу работу.

Эта статья изначально появилась в Чистый журнал Выпуск 280. Подписаться на Net здесь Отказ

Статьи по Теме

• Как избежать прототипирования подводных камней
• Как использовать анимацию в мобильных приложениях
• 10 советов для лучшего мобильного UX Design