Adobe XD-урок – Дизайн на потребителски интерфейс и прототипиране

Сърдечно добре дошли на голямото ръководство за Adobe XD. В този въвеждащ текст представям се като вашият треньор.

Каква е разликата между потребителски опит (UX) и потребителски интерфейс (UI)? Какви видове дизайн на ниво съществуват и за какво се използва най-добре Adobe XD? Отговорът можете да намерите тук!

Първият път, когато отворих Adobe XD - и вече ми се предлагат много възможности, които мога да избера. В това видео има една кратка представяне на Adobe XD, общ преглед на програмата, както и въведение във функциите на екрана за стартиране на XD.

Артбордовете (полета за рисуване) могат лесно да бъдат създадени за различни резолюции и устройства в Adobe XD. Какви специфични характеристики трябва да се вземат предвид, може да научите от този урок.

Различни настройки на растерите ни улесняват чистото подреждане на елементи и обекти помежду си. За тази цел имаме на разположение правоъгълен растер и разделение на колоните за колони.

Google, Apple и Microsoft предоставят практически UI-китове за бърз старт. Тези готови артборди ни помагат значително при последващото изграждане на прототипи за различни платформи.

Цветовете играят изключително важна роля в почти всеки дизайн - в това видео ще научиш как да работиш с цветове в Adobe XD, как да ги импортираш и какви практически източници има за събиране на готови цветови хармонии.

Има много начини да се импортират активи като изображения, файлове, текстови документи и други в Adobe XD. В това видео представя няколко метода. Въпреки това, тъй като XD е част от Creative Cloud на Adobe, е изключително удобно и лесно да се работи с библиотеките.

Темата за шрифтове и типографията е важен елемент в нашето пътуване през Adobe XD. В това видео ще научиш как да работиш правилно и ефективно с шрифтове.

Формите могат да бъдат лесно импортирани в Adobe XD или да бъдат създадени с инструмента за пътеки. Ако някой обект се използва повече от два пъти, се препоръчва да бъде добавен като символ в списъка с ресурси.

Дизайнът има много общо с вдъхновението и входа отвън. Това включва аналоговата среда, както и цифровия свят. Тук представям някои портали, които често посещавам.

Започваме с един малък, но красив практичен проект. В този урок и в следващите две видеа ще създадем Onepager.

Решетката за повторение е една от най-значимите функции на Adobe XD. Тя ни помага да скалираме и попълваме по индивидуален начин веднъж създадените групи обекти.

В последната част на оформянето на Onepager-a се грижим за футера и един раздел за референции. Тук използваме удобни SVG файлове и научаваме още дизайн техники.

В този урок ще разгледаме как може да бъдат свързани интерактивно отделните артбордове. Ще разгледаме възможностите за избор на прехода (транзишън) и другите модификации, които можем да направим в прототипа.

Всяка уеб страница се нуждае от опорна точка за навигация. В това видео ще разгледаме само създаването на основна навигация в горната част и интерактивната връзка помежду им.

Тренингът се основава на предходната глава и показва как да адаптираме създаденото десктоп меню за смартфон. Иконата на хамбургер и менюто се подобряват с интересни анимации.

Едно от най-мощните средства за възможно най-добра визуализация е функцията за автоматично анимиране на Adobe XD. В този пример обяснявам как можете да адаптирате принципа на функцията за автоматично анимиране адаптивно за всяка възможна ситуация.

В следващите видеоклипове ще научим как да създадем прототип за онлайн магазин. Ще научим как от прости артбордове да създадем визуално привлекателни прототипи с висока резолюция. Част 1 от 4.

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

Функцията за препокриване за интерактивно прототипиране ни предлага вълнуващи възможности, като информацията може да бъде показвана и скривана директно.

Добрият дизайн на употребителския интерфейс винаги предоставя обратна връзка за състоянието на системата на потребителя. Тази обратна връзка ще я включим в красива анимация в края на проекта.

Adobe XD също поддържа интеракция с помощта на гласови команди в своя процес на прототипиране. Гласовите команди водят до системни действия, които можем да дефинираме сами. Как работи това, ще покажа в този урок.

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

Да тестваш прототип във виртуална среда е едно нещо - да го представиш на живо на устройство е съвсем друго. И точно това може удобно да се направи чрез Adobe XD чрез USB или чрез връзката с Creative Cloud. За целта използваме приложението Adobe XD от магазина за приложения.

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

Adobe XD се променя като все още млада програма с всеки ъпдейт все повече: В този видеоклип обяснявам какви нововъведения се появиха при преминаването от версия 18 на версия 19, как се използват функциите и в кой сценарий са полезни. Сред тях са: компоненти вместо символи, Responsive Resize, водещи линии, инструмент за полигони, допълнителни възможности за форматиране на текст и много други. Насладете се!