Adobe Opplev Design Tricks, Tips og Teknikker
Da Adobe introduserte Experience Design som en offentlig forhåndsvisning, oppnådde selskapet to ganske fantastiske prestasjoner samtidig. Først satte de en plass i det nye prototypingsprogramvaremarkedet. For det andre skapte de en mulighet for brukerne å spille med en "arbeidsinngang" og la brukerne påvirke denne fremgangen. Nå som søknaden har vært tilgjengelig i noen måneder, trodde jeg det ville være en god tid å dele noen erfaringstips, tips og teknikker.
Men først kan du lure på hva som menes med Prototyping Software. Blant de store aktørene i dette rommet er Proto.io, Principle, UXPin, Atomic.io, Experience Design og InVision. I motsetning til applikasjoner som Sketch 3, Photoshop og Illustrator hvor statiske design produseres, presenterer disse grafiske redaktørene interaktivitet, bevegelse og andre funksjoner som er felles i dagens mobil- og webdesignrom.
Med mobiliseringen og det uunngåelige, laserlignende fokuset på brukeren, er det ikke lenger nok for en designer å piske opp noen få skisser, trekke sammen noen komposer og deretter slippe prosjektet eller laste det opp til en webserver. UI / UX arbeidsflyten har fundamentalt forandret ting. Hvert trinn i prosessen, fra å identifisere brukeren, skissene, wireframes, mockups og prototyping, er nå utsatt for omfattende brukertesting.
Det er den siste etappen - prototyping - hvor smertepunktene blir oppdaget og fikset før prosjektet går inn i sluttproduksjonen. Dette er hvor interaktivitet, bevegelse, skjermoverganger og plassering av alt på skjermen er så kritiske. Problemer og problemer kan ikke bare vises som et statisk bilde eller forklares muntlig. Tross alt, disse produktene er for ekte mennesker. I stedet for å flytte alt dette for å kode, blir prototypeprosessen i økende grad gjennomført av grafikkprogramvare designet bare for det formålet. Det er lettere å fikse en feil, erstatte et bilde, omskrive litt tekst, flytte en knapp og så videre ved å bruke en visuell editor enn å skrive om og feilsøkingskode.
Faktisk har denne programvaren blitt en nøkkelkomponent i dagens "Rapid Prototyping" design og utvikling miljø.
Med det sagt, la oss ha det gøy med Experience Design.
02 av 07Opprett en destinasjonspinne med en enkel sirkel i Adobe Experience Design
Ett pent aspekt ved XD er bruken av vektor tegneverktøy. Kan jeg ikke finne et ikon? Ikke noe problem. Rull din egen. Dette er hvordan:
- Å velge Ellipseverktøyet og, med alternativet / Alt-Skift-tastene trykket, tegne en sirkel.
- Med sirkelen valgt, angi du Fyll farge til FF0000 og grensen til "ingen" i egenskapene.
- Dobbeltklikk sirkelen for å vise ankerpunktene. Dra bunnankeret nedover.
- Dobbeltklikk på det valgte ankerpunktet, og kurvene blir erstattet med linjer.
- Tegn en annen liten sirkel med en hvit fyll og ingen stoke. Flytt den på plass og velg pinnen og sirkelen. I panelet Juster øverst i egenskapene klikker du på knappen Horisontal senter og knappen er opprettet.
Lag en bakgrunnsskarphet i Adobe Experience Design
Det er vanlig å ha tekst eller annet innhold over et bakgrunnsbilde. Problemet her er bildet, oftere enn ikke, overstyrer innholdet over det. En måte å løse dette problemet på er å uklare bakgrunnsbildet. Du kan uklare bildet i Photoshop eller annen bilderedigeringsprogramvare, men dette er noe ineffektivt, spesielt siden XD nå kan håndtere denne oppgaven for deg. Dette er hvordan:
- Opprett et nytt tavla og legg til bakgrunnsbildet ditt.
- Velg rektangelverktøyet aog trekk et rektangel over bildet. Med rektangelet valgt, angi Fill to White og Stroke to None.
- Med rektangelet valgt, velg bakgrunnssløring i eiendomspanelet. De tre skyvekontrollene er Blurbeløp, Lysstyrke og Opacity. Her er hva de gjør:
- Blurbeløp: Justerer blurriness av bildet under formen. Maksimumsverdien er +50.
- lysstyrke: Justerer høydepunktene og skyggene i bildet. Minimumsverdien er -50 og maksimumsverdien er +50.
- opacity: Påvirker gjennomsiktigheten av formen og synligheten av bildet under formen. Verdiene varierer fra 0% til 100%.
Hvis du virkelig ønsker å "bytte ting", endrer du fargene på formen og spiller med Opacity-verdien for å endre "utseendet" av bildet.
04 av 07Lag en scrim i Adobe Experience Design
Et vanlig designproblem er grensesnittelementer elementene må være en felles farge, men går tapt når de plasseres over et bakgrunnsbilde eller en solid farge. Løsningen er en scrim. En scrim er en noe ugjennomsiktig gradient plassert mellom grensesnittelementet og bakgrunnen. Dette er lett å oppnå i XD. Dette er hvordan:
- Opprett din kunstplate i XD, legg til et bilde og kopier og lim inn et grensesnittelement fra det aktuelle UI-sett - Fil> Åpne UI-sett … - inn i tavlen. I bildet ovenfor gjør bildet det mulig å se statuslinjen og App Bar.
- Velg rektangulærverktøyet og tegne et rektangel. I Fellesskapspanelet velger du Fyll og velg Gradient fra pop ned i Fargeplukeren. Angi gradientfargene til svart og hvitt. Angi A-verdien - Opacity-til 60% og Hvit En verdi til 0%.
- Med rektangelet valgt, velg Objekt> Ordne> Send bakover. Grensesnittelementene er nå synlige over bildet.
Opprett en Image Avatar i Adobe Experience Design
Et felles designmønster finnes i Chat-apper hvor folk snakker med hverandre, og høyttalerens bilde vises på skjermen. Disse avatarene er vanligvis bilder som har blitt maskert. Det er død enkelt å oppnå dette i XD. Dette er hvordan:
- Du starter med et bilde og en sirkel eller annen form på tavlen. Du kan fylle sirkelen med hvilken som helst farge. Det du ikke trenger å gjøre er å legge til en slagfarve. Det vil forsvinne når du lager effekten, så hvorfor bry deg. Hvis du trenger å stoke sirkelen, kopiere den til utklippstavlen.
- Flytt sirkelen til bildet og velg både bildet og sirkelen. Med botobjekter valgt, velg Objekt> Mask med form. Når du slipper musen, er Avataren opprettet. Derfra kan du endre størrelsen på den.
- Hvis du trenger å legge til et slag, lim inn sirkelen som sitter på utklippstavlen på tavlen. Når kopien er valgt, slår du av fyllingen i egenskapene og legger til en strekkfarge og bredde. For å justere dem, velg begge objekter og klikk på Sentraljustere-knappene i Juster-alternativene øverst på egenskapspanelet.
- Hvis du vil flytte bildet rundt i masken, dobbeltklikk masken. Dette vil vise bildet og maskeformen. Klikk på bildet og dra det på plass. Når du slipper musen, vil bildet være i sin nye posisjon inne i masken.
Spill med Adobe Experience Design Artboards
The Experience Design artboards er ikke bare der for deg å plassere innhold. De kan også bli manipulert. Her er et par ting du kan gjøre:
- Hvis du trenger landskaps- og portrettversjoner av en tavla, dupliserer du tavlen og, med duplikatet valgt, klikker du på landskapsknappen i Egenskaper-panelet. Artboardet vil skifte til landskapsorientering. Hvis Artboard har innhold på det, klikker du på Artboard-navnet og Artboard-egenskapene vises i Egenskapspanelet.
- For å legge til en egendefinert farge på Artboard, og prosjektet for den saks skyld, velg Artboard og klikk på Fill-fargebrikken i Utseende-delen av Egenskapspanelet. Skriv inn den heksadesimale verdien for fargen, og klikk på + -tegnet. Fargen legges til som en egendefinert farge. Hvis du vil bruke den fargen andre steder, velger du et objekt og klikker på Tilpasset fargebrikke for å bruke fargen.
- Kunstbrett kan gjøres vertikalt rullegardin. For å gjøre dette, velg artikkelen og endre høyden enten på Egenskapspanelene eller ved å dra bunnen av tavla nedover. I rullingsområdet på egenskapspanelet velger du vertikalt fra popup-menyen og angir visningsportens høyde for skjermen. Den stiplede blå linjen viser deg bunnen av visningsporten. For å teste det, klikk på Play-knappen og blar bort. For å slå av rullingen, velg Ingen i rullegardinmenyen.
Rediger et mobilgrensesnittpakke i Adobe Experience Design
Experience Design inneholder et UI-sett for å utvikle iOS, Android og Windows brukergrensesnitt. Når du først åpner dem, kan du tenke at de er ganske bra satt på plass. Ikke helt, hver av biter og brikkene i disse prosjektene er fullt redigerbare. La oss finne ut ved å bygge en Android wireframe.
- Du starter ved å velge Artboard-verktøyet og velge Android Mobile i Google-delen av Egenskapspanelet.
- Velg Fil> Åpne UI-sett> Google Material. Dette åpner Material Design UI Kit. Velg forstørrelsesglasset og teltet than viser veiledninger på tavla. Jeg liker å begynne med denne fordi det gir meg veiledningene for riktig plassering av grensesnittelementene på skjermen. Hvis du klikker på en av de blå stolpene, vil du se at den er låst. Klikk på låsen som er festet til hver av dem for å låse den opp. Marker kunstglasset og kopier utvalget til utklippstavlen. Gå tilbake til dokumentet og lim inn skjermen i tavlen.
- Klikk en gang på App-linjen som øverst på tavlen. Legg merke til hvordan du kan velge den.Velg Objekt> Ordne> Ta til forside. Ditt valg er nå over skjermveiledningene. Dette skal fortælle deg at alle elementene på skjermen kan redigeres.
- Dobbeltklikk på Statuslinjen øverst og i Egenskaper panel set Fyll farge til 455A64. Dobbeltklikk på applikasjonslinjen og sett fyllingen til 607D8B. Dette burde fortelle deg at hvert element i et UI-sett kan redigeres for å møte prosjektets fargespesifikasjoner.
- Hva med ikonene? Slik endrer du fargene dine. Dobbeltklikk på hjertet for å velge det. Hvis du ser på Egenskapspanelet, kan du anta at du ikke kan redigere valget. Ikke helt. Dobbeltklikk hjertet enda en gang. Egenskapene åpnes og du endrer fyllfarge til FF0000. Gjenta dette dobbeltklikk-trikset for de gjenværende ikonene og teksten.
