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. Изберете Елипсовият инструмент и с натискане на бутоните Option / Alt-Shift начертайте кръг.
2. С избрания кръг задайте Запълнете цвета на FF0000 и границата на "никой" в свойствата.
3. Кликнете два пъти върху кръга, за да покажете точките за закрепване. Плъзнете долната котва надолу.
4. Щракнете двукратно върху избраната точка за закрепване и кривите се заменят с линии.
5. Начертайте друг малък кръг с бяло запълване и без стока. Преместете го на позиция и изберете щифта и кръга. В панела Align в горната част на Properties кликнете върху бутона Хоризонтален център и Pin е създаден.

03 от 07

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

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

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

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

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

04 от 07

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

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

1. Създайте своя artboard в XD, добавете изображение и копирайте и поставете елементи от интерфейса от подходящия UI Kit - Файл> Отворен UI комплект … в графиката. В горното изображение снимката прави лентата за състоянието и лентата с приложения трудно да се видят.
2. Изберете инструмента Rectangle и изчертайте правоъгълник. В панела "Свойства" изберете "Изпълни" и изберете "Градиент" от изскачащия прозорец в "Избор на цвят". Задайте градиентските цветове на черно-бяло. Задайте стойност А - Непрозрачност - до 60% и Бяло стойност до 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. Изберете лупата и маркера tтой екранни ръководства, Искам да започна с тази, защото ми дава ръководства за правилното поставяне на интерфейсните елементи на екрана. Ако кликнете върху една от сините ленти, ще видите, че е заключена. Кликнете върху прикрепеното към всеки от тях заключване, за да го отключите, Маркирайте графиката и копирайте избора в клипборда. Върнете се в документа си и поставете екрана в архитектурата си.
3. Кликнете веднъж върху лентата с приложения, която е в горната част на работния плот. Забележете как можете да го изберете.Изберете обект> Подреждане> Довеждане напред. Изборът ви вече е над екрана. Това трябва да ви каже, че всеки от елементите на екрана може да бъде редактиран.
4. Кликнете два пъти върху лентата за състояние в горната част и в панела "Свойства"и цвета за попълване на 455А64, Кликнете два пъти върху лентата с приложения и задайте запълването й на 607D8B. Това трябва да ви каже, че всеки елемент в потребителския комплект може да бъде редактиран, за да отговаря на спецификациите на цветовете на проекта.
5. Какво ще кажете за иконите? Ето как да промените цвета си. Кликнете два пъти върху сърцето за да го изберете. Ако погледнете панела "Свойства", може да предположите, че не можете да редактирате селекцията. Не точно. Двойно кликване върху сърцето още веднъж, Свойствата се отварят и промените цвета за попълване на FF0000. Повторете този трик с двойно кликване за останалите икони и текста.