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

01 од 07

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

Кога Adobe го воведе Искуството Дизајн како јавен преглед , компанијата оствари две неверојатни подвизи во исто време. Прво, тие го отвориле просторот во новиот прототипен софтверски пазар. Второ, тие создадоа можност за корисниците да играат со "работа во тек" и им дозволува на корисниците да влијаат на тој напредок. Сега кога апликацијата е достапна за неколку месеци, мислев дека ќе биде добро време да споделите некои трикови, совети и техники за Искусен дизајн.

Но, прво, може да се прашувате што подразбира Софтвер за прототипирање. Меѓу главните играчи во овој простор се Proto.io, Principle, UXPin, Atomic.io , Experience Design и InVision. За разлика од апликациите како што се Sketch 3, Photoshop и Illustrator, каде се создаваат статични дизајни, овие графички уредници воведуваат интерактивност, движење и други карактеристики кои се вообичаени во денешниот мобилен и веб дизајн простор.

Со порастот на мобилни и неизбежни, фокусирани на ласерски фокус на Корисникот, веќе не е доволно дизајнерот да ги извади неколку скици, да се повлече заедно неколку компи, а потоа да го ослободи проектот или да го постави на веб сервер. Работниот процес UI / UX фундаментално ги промени работите. Секој чекор од процесот, од идентификување на корисникот, скици, жичени рамки, мокети и прототипови, сега се предмет на широко корисничко тестирање.

Тоа е последната фаза - прототипирање - каде што болните точки се откриваат и фиксираат пред проектот да се претвори во финално производство. Ова е местото каде што интерактивноста, движењето, транзициите на екранот и поставеноста на сè што е на екранот се толку критични. Прашањата и проблемите не можат едноставно да се прикажат како статичка слика или да се објаснат вербално. Впрочем, овие производи се за вистински луѓе. Наместо да се придвижи сето тоа на код, процесот на прототипирање се повеќе се презема од графички софтвер дизајниран токму за таа цел. Полесно е да се поправи грешката, да се замени сликата, да се преработи некој текст, да се помести копче и така натаму со користење на визуелен уредувач од постојано преработен и дебагирачки код.

Всушност, овој софтвер стана клучна компонента во денешното "Рапидно прототипирање" за дизајн и развој на животната средина.

Со тоа речеме, ајде да се забавуваме со Experience Design.

02 од 07

Направете дестинациски пин со едноставен круг во Adobe Experience Design

Еден уреден аспект на XD е неговата употреба на векторски алатки за цртање. Не може да пронајдете икона? Нема проблем. Се тркалаат. Еве како:

1. Изберете ја алатката Ellipse и, со притискање на копчињата Option / Alt-Shift, нацртајте круг.
2. Со избраниот круг, поставете ја бојата за пополнување на FF0000 и границата на "нема" во својствата.
3. Двоен-клик на кругот за да ги прикажете точките за прицврстување. Повлечете го долниот котвич надолу.
4. Двоен-клик на избраната точка за Сидро и кривите се заменуваат со линии.
5. Нацртајте уште еден мал круг со бело полнење и нема стомак. Поместете го во позиција и одберете го иглата и кругот. Во панелот Порамни на врвот на Properties кликнете на копчето Хоризонтален центар и се креира Пин.

03 од 07

Креирај замаглување на позадината во Adobe Experience Design

Често е да имате текст или друга содржина над позадината. Проблемот тука е сликата, почесто отколку не, ја надминува содржината над неа. Еден начин за решавање на ова прашање е да се замагли позадинската слика. Можете да ја замаглувате сликата во Photoshop или друг софтвер за уредување на слики, но ова е малку неефикасно, особено затоа што XD сега може да ја изврши оваа задача за вас. Еве како:

1. Направете нова табла и додадете слика за позадина.
2. Изберете алатката Правоаголник и нацртајте правоаголник над сликата. Со избраниот правоаголник, поставете ги Пополнете на бело и Мозочниот удар до Нема.
3. Со избраниот правоаголник, одберете Background Blur во панелот својства. Трите лизгачи се замаглувањето, осветленоста и непроѕирноста. Еве што прават:

• Замаглување: Ја прилагодува замаглувањето на сликата под формата. Максималната вредност е +50.
• Осветленост: Ги прилагодува главните и сенките на сликата. Минималната вредност е -50 и Максималната вредност е + 50.
• Непроѕирност: влијае на транспарентноста на обликот и видливоста на сликата под обликот. Вредностите се движат од 0% до 100%.

Ако навистина сакате да ги "префрлите работите", промените ја бојата на обликот и репродуцирајте ја вредноста на Непроѕирноста за да го промените "изгледот" на сликата.

04 од 07

Креирај Скриј во Adobe Experience Design

А заеднички дизајн проблем е елементите на интерфејсот елементи мора да биде вообичаена боја, но, се изгубени кога се става во текот на позадина слика или солидна боја. Решението е измама. А scrim е малку нетранспарентен градиент поставен помеѓу елементот интерфејс и позадината. Ова е лесно да се постигне во XD. Еве како:

1. Направете ја својата картичка во XD, додадете слика и копирајте и ставете елементи од интерфејсот од соодветниот UI Kit - Датотека> Отвори UI Kit ... - во табла. Во горната слика, фотографијата ја прави лентата за статус и лентата со апликации тешко да се видат.
2. Изберете алатката Правоаголник и извлечете правоаголник. Во Панелот со својства одберете Пополнете и изберете Градиент од скокачот во изборот на боја. Поставете ги градиентните бои на црно-бело. Поставете ја вредноста А - Непроѕирност до 60%, а вредноста на бела А на 0%.
3. Со избраниот правоаголник, одберете Object> Arrange> Send Backward . Елементите на интерфејсот сега се видливи над сликата.

05 од 07

Креирај слика Аватар во Adobe искуство дизајн

Честа Дизајн на моделот се наоѓа во апликациите за разговор, каде што луѓето зборуваат едни со други и сликата на звучникот се појавува на екранот. Овие аватари се обично слики кои биле маскирани. Мртвото едноставно го постигнува ова во XD. Еве како:

1. Почнувате со слика и круг или друга форма на таблата. Можете да го пополните кругот со било која боја. Она што не треба да направите е да додадете боја на удар. Ќе исчезне кога ќе го создадете ефектот, па зошто да се мачам. Ако не треба да го зафаќате кругот, ископирајте го на таблата со исечоци.
2. Поместете го кругот на сликата и одберете ја сликата и кругот. Со избраните објекти на бот, одберете Object> Mask with Shape . Кога го пуштите глушецот, аватарот е создаден. Од таму можете да ја промените големината.
3. Ако ви треба да додадете удар, ставете го кругот што седи на таблата со исечоци на таблата. Со избраната копија, исклучете го пополнувањето на својствата и додадете боја и ширина на удар. За да ги поставите, изберете ги двата објекти и кликнете на копчињата Центрирање во опциите "Порамни" на врвот на панелот својства.
4. Ако сакате да ја преместите фотографијата околу маската, двојно кликнете на маската. Ова ќе ја прикаже сликата и формата на маската. Кликнете на сликата и повлечете го во позиција. Кога ќе го ослободите глушецот, сликата ќе биде во својата нова положба во маската.

06 од 07

Играј со Adobe Experience Design Artboards

Изборните плочи на Искуството не се само таму за да поставите содржина. Тие, исто така, може да се манипулираат. Еве неколку работи што можете да ги направите:

1. Ако ви треба верзии на пејзаж и портрет на табла, дуплирајте ја таблата и, со избраниот дупликат, кликнете на копчето за пејзаж во панелот својства. Artboard ќе се смени во ориентација на пејзаж. Ако Artboard има содржина на неа, кликнете на името на Artboard и атрибутот Artboard ќе се појави во Properties Panel.
2. За да додадете сопствени бои на Artboard, и проектот за таа работа, изберете Artboard и кликнете Chip на боја за пополнување во делот Изглед на панелот својства. Внесете ја хексадецималната вредност за бојата и кликнете на знакот +. Бојата ќе се додаде како прилагодена боја. За да ја примените таа боја на друго место, одберете објект и кликнете на чесниот обид за боја за да ја примените бојата.
3. Artboards може да се направи вертикално scrollable. За да го направите ова, одберете ја таблата и менувајте ја својата висина или на Панелите со својства или со влечење на дното од артичката надолу. Во површината за лизгање на панелот својства, од вертикалното мени одберете вертикална и внесете ја висината на визирот за екранот. Тоа пловеше сина линија ви го покажува дното на приказот. За да го тестирате, кликнете на копчето Play и скролувајте. За да го исклучите лизгањето, одберете None во прозорецот Scrolling.

07 од 07

Уредување на мобилен UI Kit во Adobe Experience Design

Искусниот дизајн содржи UI Kit за развој на iOS, Android и Windows UI. Кога прво ги отворате, можеби мислите дека се добро поставени на место. Не сосема - секој дел од парчиња во овие комплети е целосно уреден. Ајде да дознаеме со изградба на жица на Android.

1. Ќе започнете со избирање на алатката Artboard и избирање на Android Mobile во делот на Google на панелот својства .
2. Изберете File> Open UI Kit> Google Material . Ова го отвора комплетот на УИ на материјален дизајн. Изберете ја зголемувачката стакло и маркираната табла за екрански водичи . Сакам да започнам со оваа, бидејќи ми дава водичи за правилно поставување на елементите на интерфејсот на екранот. Ако кликнете на еден од Blue bars, ќе видите дека е заклучен. Кликнете на заклучувањето прикачено на секој од нив за да го отклучите . Маркирајте ги артиклот и копирајте го изборот во таблата со исечоци. Вратете се на документот и ставете го екранот во вашата табла.
3. Кликни еднаш на лентата со апликации што е на врвот на таблата. Забележете како можете да го изберете. Изберете Object> Arrange> Bring to Front. Вашиот избор сега е над Екранските водичи. Ова треба да ви каже дека секој од елементите на екранот може да биде изменет.
4. Двоен клик на полето за статус на врвот, и во палетата со својства и пополнете боја до 455A64 . Двоен клик на апликациската лента и поставете го неговото пополнување на 607D8B. Ова треба да ви каже дека секој елемент во UI-комплет може да биде изменет за да ги задоволи спецификациите на бојата на проектот.
5. Што е со иконите? Еве како да ја сменат нивната боја. Двоен клик на срцето за да го изберете. Ако погледнете во панелот со својства, може да претпоставите дека не можете да го уредувате изборот. Не е сосема. Двоен клик на срцето уште еднаш . Својствата се отвораат и ја менувате бојата за пополнување на FF0000. Повторете го овој двоен-клик трик за останатите икони и текстот.