Adobe Experience Ontwerp truuks, wenke en tegnieke

01 van 07

Adobe Experience Ontwerp truuks, wenke en tegnieke

Toe Adobe Experience Experience as 'n Openbare Voorskou geïmplementeer het, het die maatskappy twee nogal fantastiese feats op dieselfde tyd behaal. Eerstens het hulle 'n spasie in die ontluikende prototyping-sagtewaremark gesit. Tweedens, hulle het die geleentheid geskep vir gebruikers om met 'n "werk-in-progress" te speel en laat die gebruikers die vordering beïnvloed. Noudat die aansoek vir 'n paar maande beskikbaar was, het ek gedink dit sal 'n goeie tyd wees om 'n paar ervaringsontwerpstukkies, wenke en tegnieke te deel.

Maar eers kan jy wonder wat bedoel word met Prototyping Software. Onder die groot spelers in hierdie ruimte is Proto.io, Principle, UXPin, Atomic.io , Experience Design en InVision. In teenstelling met toepassings soos Skets 3, Photoshop en Illustrator waar statiese ontwerpe geproduseer word, stel hierdie grafiese redakteurs interaktiwiteit, beweging en ander kenmerke bekend in vandag se mobiele en webdesignruimte.

Met die opkoms van selfoon en die onvermydelike, laseragtige fokus op die gebruiker, is dit nie meer genoeg vir 'n ontwerper om 'n paar sketse op te knip nie, 'n paar komposisies saam te trek en dan die projek vry te stel of op te laai na 'n webbediener. Die UI / UX werkstroom het dinge fundamenteel verander. Elke stap van die proses, van die identifisering van die gebruiker, sketse, draadraamwerke, mockups en prototipering, is nou onderworpe aan uitgebreide gebruikerstoetsing.

Dit is die laaste stadium - prototipering - waar die pynpunte ontdek en vasgestel word voordat die projek in die finale produksie beweeg. Dit is waar interaktiwiteit, beweging, skerm oorgange en plasing van alles op die skerm is so krities. Kwessies en probleme kan nie net as 'n statiese beeld of mondelings verklaar word nie. Na alles, hierdie produkte is vir regte mense. Eerder as om dit alles te skuif, word die prototiperingsproses toenemend onderneem deur grafiese sagteware wat net vir daardie doel ontwerp is. Dit is makliker om 'n fout op te los, 'n prent te vervang, teks te herskryf, 'n knoppie te skuif, ensovoorts, met behulp van 'n visuele redakteur as voortdurend herschryf en ontfoutingskode.

Trouens, hierdie sagteware is 'n belangrike komponent in vandag se "Rapid Prototyping" ontwerp en ontwikkeling omgewing.

Met dit gesê, kom ons het 'n bietjie pret met Experience Design.

02 van 07

Skep 'n bestemmingspen met 'n eenvoudige sirkel in Adobe Experience Design

Een netjiese aspek van XD is die gebruik daarvan vir vektor tekentegnieke. Kan ek nie 'n ikoon kry nie? Geen probleem. Rol jou eie. So is dit:

1. Kies die Ellipse Gereedskap en, met die opsie / Alt-Skuif sleutels gedrukte, teken 'n sirkel.
2. Met die gekose sirkel, stel die Vulkleur in op FF0000 en die Grens na "geen" in die eienskappe.
3. Dubbelklik op die sirkel om die ankerpunte te wys. Sleep die onderste anker afwaarts.
4. Dubbelklik op die geselekteerde Ankerpunt en die krommes word vervang met lyne.
5. Trek nog 'n klein sirkel met 'n wit vul en geen stok. Beweeg dit in posisie en kies die pen en die sirkel. Klik in die paneel Riglyne bo-aan die eienskappe op die Horisontale Sentrum-knoppie en die pen is geskep.

03 van 07

Skep 'n agtergrond vervaging in Adobe Experience Design

Dit is algemeen om teks of ander inhoud oor 'n agtergrondafbeelding te hê. Die probleem hier is die beeld, meer dikwels as nie, oorheers die inhoud hierbo. Een manier om hierdie probleem op te los, is om die agtergrond beeld te vervaag. Jy kan die beeld vervaag in Photoshop of ander bewerkingsprogrammatuur, maar dit is ietwat ondoeltreffend, veral aangesien XD hierdie taak nou vir jou kan hanteer. So is dit:

1. Skep 'n nuwe kunsbord en voeg jou agtergrondbeeld by.
2. Kies die Gereedskap Gereedskap om 'n reghoek oor die prent te teken. Met die gekose Reghoek, stel die Fill to White en die Stroke to None.
3. Kies die agtergrond verwarring in die eienskappe paneel met die gekose reël . Die drie glyers is Blur-bedrag, Helderheid en Deursigtigheid. Hier is wat hulle doen:

• Blurbedrag: Pas blurigheid van die prentjie onder die vorm aan. Die maksimum waarde is +50.
• Helderheid: Pas die hoogtepunte en skadu's in die prent aan. Die minimum waarde is -50 en die maksimum waarde is +50.
• Deursigtigheid: Beïnvloed die deursigtigheid van die vorm en die sigbaarheid van die beeld onder die vorm. Die waardes wissel van 0% tot 100%.

As jy regtig dinge wil verander, verander die kleur van die vorm en speel met die deursigtigheid waarde om die "look" van die prent te verander.

04 van 07

Skep 'n Scrim in Adobe Experience Design

'N Algemene ontwerp probleem is koppelvlak elemente moet 'n algemene kleur wees, maar verlore gaan as dit oor 'n agtergrond of vaste kleur geplaas word. Die oplossing is 'n scrim. 'N Scrim is 'n ietwat ondeursigtige gradiënt tussen die koppelvlakelement en die agtergrond. Dit is maklik om te bereik in XD. So is dit:

1. Skep jou kunspanbord in XD, voeg 'n prent by en plak 'n koppelvlakelemente van die toepaslike UI Kit - Lêer> Open UI Kit ... - in die artboard. In die bostaande prent maak die foto die statusbalk en die App Bar moeilik om te sien.
2. Kies die Gereedskap Gereedskap en teken 'n reghoek uit. In die Eienskappe paneel kies Fill en kies Gradient van die pop-down in die Color Picker. Stel die verloop kleure in swart en wit. Stel die A-waarde - Deursigtigheid-tot 60% en die Wit A-waarde tot 0%.
3. Kies met die gekose Reghoek Objek> Reël> Stuur agteruit . Die koppelvlak-elemente is nou sigbaar oor die prent.

05 van 07

Skep 'n Image Avatar in Adobe Experience Design

'N Algemene ontwerppatroon word gevind in Chat-programme waar mense met mekaar praat en die spreker se foto verskyn op die skerm. Hierdie avatars is gewoonlik beelde wat gemasker is. Dit is dood, eenvoudig bereik dit in XD. So is dit:

1. Jy begin met 'n beeld en 'n sirkel of ander vorm op die bord. Jy kan die sirkel met enige kleur invul. Wat jy nie hoef te doen is om 'n beroerte kleur te voeg nie. Dit sal verdwyn wanneer jy die effek skep, so waarom pla. As jy die sirkel moet stok, kopieer dit na die knipbord.
2. Beweeg die sirkel na die prent en kies beide die beeld en die sirkel. Met botvoorwerpe gekies, kies Object> Masker met vorm . As jy die muis los, word die Avatar geskep. Van daar kan jy dit verander.
3. As jy 'n beroerte wil byvoeg, plak die sirkel wat op jou knipbord geplaas word op die bord. Met die gekose kopie, skakel die Eienskappe in en vul 'n streepkleur en -wydte in. Om hulle te reël, kies albei voorwerpe en klik die knoppies Sentrumslyne in die opsies Riglyne boaan die eienskappepaneel.
4. As jy die foto in die masker wil beweeg, dubbelkliek op die masker. Dit sal die beeld en die vorm van die masker wys. Klik op die prent en sleep dit in posisie. As jy die muis los, sal die prentjie in sy nuwe posisie in die masker wees.

06 van 07

Speel Met Adobe Experience Design Artboards

Die ondervindingontwerpborde is nie net daar vir jou om inhoud te plaas nie. Hulle kan ook gemanipuleer word. Hier is 'n paar dinge wat jy kan doen:

1. As jy Landscape en Portrait weergawes van 'n artboard nodig het, dupliseer die artboard en, met die gekose duplikaat, klik die landskapsknoppie in die Eienskappe-paneel. Die Artboard sal verander na landskap oriëntering. As die Artboard inhoud daarop het, klik die Artboard se naam en die Artboard-eienskappe sal in die Eienskappepaneel verskyn.
2. Om 'n gepasmaakte kleur by die Artboard te voeg, en die projek vir die saak, kies die Artboard en klik op die Fill-kleurskyfie in die Voorkoms-afdeling van die Eienskappe-venster. Voer die heksadesimale waarde vir die kleur in en klik op die + -teken. Die kleur sal bygevoeg word as 'n persoonlike kleur. Om die kleur elders toe te pas, kies 'n voorwerp en klik die Custom Color-chip om die kleur toe te pas.
3. Artboards kan vertikaal skuifbaar gemaak word. Om dit te doen, kies die artboard en verander die hoogte op die Eienskappepanele of sleep die onderkant van die artboard afwaarts. Kies in die Scrollbare gedeelte van die eienskappe paneel vertikaal in die aftrekkieslys en voer die hoogtepunt vir die skerm in. Die stippelblou lyn wys jou die onderkant van die uitsigspoort. Om dit te toets, klik die Play-knoppie en blaai weg. Om af te blaai, kies None in die Scrolling pop-down.

07 van 07

Wysig 'n Mobile UI Kit in Adobe Experience Design

Experience Design bevat 'n UI Kit vir die ontwikkeling van iOS, Android en Windows UI's. Wanneer jy hulle eers oopmaak, kan jy dink hulle is redelik goed in plek. Nie heeltemal nie - elkeen van die stukkies in die kits is ten volle redigeerbaar. Kom ons uitvind deur 'n Android-draadraam te bou.

1. Jy begin deur die Artboard-instrument te kies en Android Mobile in die Google-afdeling van die Eienskappe-paneel te kies .
2. Kies Lêer> Open UI Kit> Google Materiaal . Dit maak die UI Kit vir Materiaalontwerp oop. Kies die vergrootglas en tentoonstelling vir die skermgidse . Ek wil graag met hierdie een begin, want dit gee my die riglyne vir behoorlike op-skerm plasing van die koppelvlak elemente. As jy op een van die Blou maatjies klik, sal jy sien dit is gesluit. Klik die slot wat aan elkeen geheg is om dit te ontsluit . Merk die kunsbord en kopieer die keuse na die knipbord. Keer terug na jou dokument en plak die skerm in jou artboard.
3. Kliek een keer op die App balk wat die bokant van die artboard. Let op hoe jy dit kan kies. Kies Object> Reël> Bring na Front. U keuse is nou bokant die skermgidse. Dit moet u vertel dat elk van die elemente op die skerm geredigeer kan word.
4. Dubbelklik op die statusbalk bo en in die eienskappe paneel s en die vul kleur na 455A64 . Dubbelklik op die programbalk en stel die vul in op 607D8B. Dit moet jou vertel dat elke element in 'n UI-pakket kan geredigeer word om die projek se kleurspesifikasies te bereik.
5. Wat van die ikone? Hier is hoe om hul kleur te verander. Dubbelklik op die hart om dit te kies. As u na die Eienskapspaneel kyk, kan u aanvaar dat u nie die keuse kan wysig nie. Nie heeltemaal nie. Dubbelklik die hart nog een keer . Die eienskappe oop en jy verander die vulkleur na FF0000. Herhaal hierdie dubbel dubbel klik vir die oorblywende ikone en die teks.