Adobe Experience Дизайн Трикове, съвети и техники

01 от 07

Adobe Experience Дизайн Трикове, съвети и техники

Когато Adobe представи Experience Design като публично предупреждение , компанията изпълни две доста невероятни постижения по едно и също време. Първо, те заложиха място в нововъзникващия прототип на софтуерния пазар. Второ, създадоха възможност на потребителите да играят с "работа в ход" и позволяват на потребителите да влияят на този напредък. Сега, когато приложението е на разположение за няколко месеца, мислех, че ще е подходящо време да споделяте трикове, съвети и техники с опит в дизайна.

Но първо, може би се чудите какво се има предвид чрез Prototyping Software. Сред основните играчи в това пространство са Proto.io, Принцип, UXPin, Atomic.io , Experience Design и InVision. За разлика от приложения като Sketch 3, Photoshop и Illustrator, където се създават статични дизайни, тези графични редактори въвеждат интерактивност, движение и други функции, характерни за днешното мобилно и уеб пространство.

С нарастването на мобилния и неизбежния лазерен фокус върху потребителя вече не е достатъчно дизайнерът да размаже няколко скици, да събере няколко компонента и след това да освободи проекта или да го качи на уеб сървър. Работният процес UI / UX промени съществено нещата. Всяка стъпка от процеса, от идентифицирането на потребителя, скици, проводници, макети и прототипи, сега подлежи на широко тестване от потребители.

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

Всъщност този софтуер се превърна в основен компонент в днешната среда за проектиране и разработка "Rapid Prototyping".

С това казано, нека да се забавляваме с Experience Design.

02 от 07

Създайте Пин за дестинация с опростен кръг в дизайна на Adobe Experience

Един чист аспект на XD е използването му на инструменти за векторно рисуване. Не мога да намеря икона? Няма проблем. Върви си. Ето как:

1. Изберете The Ellipse Tool и с натискане на бутоните Option / Alt-Shift начертайте кръг.
2. С избрания кръг задайте цвета за попълване на FF0000 и границата на "none" в свойствата.
3. Кликнете два пъти върху кръга, за да покажете точките за закрепване. Плъзнете долната котва надолу.
4. Щракнете двукратно върху избраната точка за закрепване и кривите се заменят с линии.
5. Начертайте друг малък кръг с бяло запълване и без стока. Преместете го на позиция и изберете щифта и кръга. В панела Align в горната част на Properties кликнете върху бутона Хоризонтален център и Pin е създаден.

03 от 07

Създаване на фоново размазване в дизайна на Adobe Experience

Обичайно е да имате текст или друго съдържание върху фоново изображение. Проблемът тук е, че изображението, по-често отколкото не, надвишава съдържанието над него. Един от начините за решаване на този проблем е да се размаже фоновото изображение. Можете да размажете изображението в Photoshop или друг софтуер за редактиране на изображения, но това е малко неефективно, особено след като XD вече може да се справи с тази задача за вас. Ето как:

1. Създайте нов графичен план и добавете вашето фоново изображение.
2. Изберете инструмента за правоъгълник и нарисувайте правоъгълник над изображението. С избрания правоъгълник задайте "Изпълни до бяло" и "Ход" на "Няма".
3. При избрания правоъгълник изберете Функция за размазване на фона в панела с свойства. Трите плъзгача са Сума, Яркост и Непрозрачност. Ето какво правят:

• Размер на размазване: Настройва размазването на изображението под формата. Максималната стойност е +50.
• Яркост: Настройва акцентите и сенките в изображението. Минималната стойност е -50, а максималната стойност е +50.
• Непрозрачност: Последи прозрачността на формата и видимостта на изображението под формата. Стойностите варират от 0% до 100%.

Ако наистина искате да промените нещата, променете цвета на формата и играйте с стойността на Opacity, за да промените "look" на изображението.

04 от 07

Създайте Scrim в дизайна на Adobe Experience

Общ проблем с дизайна е елементите на интерфейсните елементи, които трябва да бъдат общ цвят, но се губят, когато се поставят върху фоново изображение или твърд цвят. Решението е скумрия. Шивакът е донякъде непрозрачен градиент, поставен между интерфейсния елемент и фона. Това е лесно да се постигне в XD. Ето как:

1. Създайте своя artboard в XD, добавете изображение и копирайте и поставете елементите на интерфейса от съответния UI Kit - File> Open UI Kit ... - в artboard. В горното изображение снимката прави лентата за състоянието и лентата с приложения трудно да се видят.
2. Изберете инструмента Rectangle Tool и изчертайте правоъгълник. В панела "Свойства" изберете "Изпълни" и изберете "Градиент" от изскачащия прозорец в "Избор на цветове". Задайте градиентските цветове на черно-бяло. Задайте стойност А - Непрозрачност - до 60%, а стойността на бялата A - 0%.
3. При избрания правоъгълник изберете Обект> Подреждане> Изпращане назад . Елементите на интерфейса вече се виждат върху изображението.

05 от 07

Създайте аватар на изображения в дизайна на Adobe Experience

Черен шаблон за дизайн се намира в приложенията за чат, където хората говорят помежду си и на екрана се появява снимката на високоговорителя. Тези аватари обикновено са изображения, които са били маскирани. Мъртвото е просто да постигнеш това в XD. Ето как:

1. Започвате с изображение и кръг или друга форма върху платното. Можете да запълните кръга с всеки цвят. Това, което не е необходимо да направите, е да добавите цвят на удара. Тя ще изчезне, когато създадете ефекта, така че защо се притеснявате. Ако се наложи да загреете кръга, копирайте го в клипборда.
2. Преместете кръга върху изображението и изберете както изображението, така и кръга. При избраните обекти на бот изберете Object> Mask with Shape . Когато пуснете мишката, аватарът е създаден. Оттам можете да го преоразмерите.
3. Ако трябва да добавите удар, поставете кръга, намиращ се в клипборда, върху платката. При избраното копие изключете попълването на свойствата и добавете цвят и ширина на хода. За да ги подредите, изберете и двата обекта и кликнете върху бутоните Center Align в опциите Align в горната част на панела за свойства.
4. Ако искате да преместите снимката в маската, кликнете двукратно върху маската. Това ще покаже формата на изображението и маската. Кликнете върху изображението и го плъзнете на позиция. Когато пуснете мишката, изображението ще бъде в новото си положение вътре в маската.

06 от 07

Възпроизвеждане с Adobe Experience Design Artboards

Екскурсорите за дизайна Experience Experience не са само за вас, за да поставите съдържание. Те също могат да бъдат манипулирани. Ето няколко неща, които можете да направите:

1. Ако се нуждаете от ландшафтни и портретни версии на архитектурата, дублирайте платката и с избрания дубликат кликнете върху бутона за пейзаж в панела "Имоти". В Artboard ще се промени ориентацията на Landscape. Ако в Artboard се съдържа съдържание, щракнете върху името на Artboard и свойствата на Artboard ще се появят в панела Properties.
2. За да добавите персонализиран цвят към Artboard и проекта за този въпрос, изберете Artboard и кликнете върху цветния чип Fill в секцията Appearance на панела Properties. Въведете шестнадесетичната стойност за цвета и кликнете върху знака +. Цветът ще бъде добавен като персонализиран цвят. За да приложите този цвят на друго място, изберете обект и кликнете върху персонализирания цветен чип, за да приложите цвета.
3. Картите могат да се правят вертикално превъртаеми. За да направите това, изберете изкуствения борд и променете височината му или върху панелите за свойства, или плъзнете долната част на картинката надолу. В прозореца Скролируемо на панела с имоти изберете вертикално от изскачащото меню и въведете височината на прозореца за екрана. Тази пунктирана синя линия показва долната част на прозореца за показване. За да го тествате, кликнете върху бутона "Пусни" и превъртете. За да изключите превъртането, изберете "Няма" в прозореца за превъртане.

07 от 07

Редактиране на мобилен потребителски комплект в дизайна на Adobe Experience

Дизайнът на опит съдържа потребителски интерфейс за разработване на iOS, Android и Windows UI. Когато ги отворите за пръв път, може да си помислите, че са добре поставени на място. Не съвсем - всяка от тези части в тези комплекти е напълно редактируема. Нека да разберем, като изградим андроид рамка.

1. Започнете, като изберете инструмента Artboard и изберете Android Mobile в секцията Google на Панела за имоти .
2. Изберете File> Open UI Kit> Google Material . Това отваря Kit UI Kit. Изберете увеличителното стъкло и маркирайте картинката за екранни ръководства . Искам да започна с тази, защото ми дава ръководства за правилното поставяне на интерфейсните елементи на екрана. Ако кликнете върху една от сините ленти, ще видите, че е заключена. Кликнете върху прикрепеното към всеки от тях заключване, за да го отключите . Маркирайте графиката и копирайте избора в клипборда. Върнете се в документа си и поставете екрана в архитектурата си.
3. Кликнете веднъж върху лентата с приложения, която е в горната част на работния плот. Забележете как можете да го изберете. Изберете обект> Подреждане> Довеждане напред. Изборът ви вече е над екрана. Това трябва да ви каже, че всеки от елементите на екрана може да бъде редактиран.
4. Щракнете двукратно върху лентата за състоянието в горната част, а в панела "Свойства" и "Цвят на запълване" на 455А64 . Кликнете два пъти върху лентата с приложения и задайте запълването й на 607D8B. Това трябва да ви каже, че всеки елемент в потребителския комплект може да бъде редактиран, за да отговаря на спецификациите на цветовете на проекта.
5. Какво ще кажете за иконите? Ето как да промените цвета си. Кликнете два пъти върху сърцето, за да го изберете. Ако погледнете панела "Свойства", може да предположите, че не можете да редактирате селекцията. Не точно. Двойно кликване върху сърцето още веднъж . Свойствата се отварят и промените цвета за попълване на FF0000. Повторете този трик с двойно кликване за останалите икони и текста.