Adobe Oplev Design Tricks, Tips og Teknikker
Da Adobe introducerede Experience Design som en offentlig forhåndsvisning, gennemførte virksomheden to ganske fantastiske resultater samtidig. For det første satte de et rum i det nye prototyper-softwaremarked. For det andet skabte de en mulighed for, at brugerne kunne spille med en "work-in-progress" og lade brugerne påvirke denne udvikling. Nu da ansøgningen har været tilgængelig i et par måneder, troede jeg, det ville være en god tid at dele nogle erfaringsdesign tricks, tips og teknikker.
Men først kan du undre sig over, hvad der menes med Prototyping Software. Blandt de store spillere i dette rum er Proto.io, Principle, UXPin, Atomic.io, Experience Design og InVision. I modsætning til programmer som Sketch 3, Photoshop og Illustrator, hvor statiske designs fremstilles, introducerer disse grafiske redaktører interaktivitet, bevægelser og andre funktioner, der er fælles i dagens mobil- og webdesignrum.
Med mobilenes stigning og det uundgåelige, laserlignende fokus på brugeren er det ikke længere tilstrækkeligt for en designer at piske nogle få skitser, trække sammen nogle kompositioner og derefter frigive projektet eller uploade det til en webserver. UI / UX-arbejdsgangen har fundamentalt ændret ting. Hvert trin i processen fra at identificere brugeren, skitser, wireframes, mockups og prototyping er nu underlagt omfattende brugertest.
Det er den sidste fase - prototyping - hvor smertepunkterne opdages og fastgøres før projektet går i slutproduktion. Det er her, hvor interaktivitet, bevægelse, skærmovergange og placering af alt på skærmen er så kritiske. Problemer og problemer kan ikke blot vises som et statisk billede eller forklares verbalt. Disse produkter er trods alt rigtige mennesker. I stedet for at flytte alt dette for at kode, bliver prototypeprocessen i stigende grad gennemført af grafisk software designet netop til det formål. Det er lettere at lave en fejl, erstatte et billede, omskrive nogle tekst, flytte en knap og så videre ved hjælp af en visuel editor end konstant omskrivning og debugging kode.
Faktisk er denne software blevet en vigtig komponent i nutidens "Rapid Prototyping" Design og Development miljø.
Med det sagt, lad os have det sjovt med Experience Design.
02 af 07Opret en destinationspin med en enkel cirkel i Adobe Experience Design
Et pænt aspekt af XD er brugen af vektor tegningsværktøjer. Kan jeg ikke finde et ikon? Intet problem. Roll din egen. Sådan er det:
- Vælg Ellipseværktøjet og tryk på en cirkel med alternativet / Alt-Skift-tasterne.
- Med den valgte cirkel skal du indstille Fyld farve til FF0000 og grænsen til "ingen" i egenskaberne.
- Dobbeltklik på cirklen for at vise ankerpunkterne. Træk bundforankringen nedad.
- Dobbeltklik på det valgte ankerpunkt, og kurverne erstattes af linjer.
- Tegn en anden lille cirkel med en hvid fyld og ingen stok. Flyt den på plads og vælg pin og cirkel. Klik på knappen Horizontal Center i panelet Juster øverst i Egenskaberne, og Pin'en er oprettet.
Opret en baggrundssløring i Adobe Experience Design
Det er almindeligt at have tekst eller andet indhold over et baggrundsbillede. Problemet her er billedet, oftere end ikke, overstyrer indholdet over det. En måde at løse dette problem på er at sløre baggrundsbilledet. Du kan sløre billedet i Photoshop eller andre billedredigeringssoftware, men det er noget ineffektivt, især da XD nu kan håndtere denne opgave for dig. Sådan er det:
- Opret et nyt billboard og tilføj dit baggrundsbillede.
- Vælg rektangelværktøjet and tegne et rektangel over billedet. Med den valgte rektangel skal du sætte Fill to White og Stroke to None.
- Med den valgte rektangel, vælg baggrundssløring i ejendomspanelet. De tre skydere er Blurbeløb, Lysstyrke og Opacitet. Her er hvad de gør:
- Blur beløb: Justerer blurriness af billedet under formen. Den maksimale værdi er +50.
- Lysstyrke: Justerer højdepunkterne og skyggerne i billedet. Minimumsværdien er -50 og maksimumsværdien er +50.
- Gennemsigtighed: Påvirker gennemsigtigheden af formen og synligheden af billedet under formen. Værdierne varierer fra 0% til 100%.
Hvis du virkelig ønsker at "skifte tingene op", skal du ændre farven på formen og afspille med opacitetsværdien for at ændre billedet "se".
04 af 07Opret en Scrim i Adobe Experience Design
Et fælles design problem er grænsefladeelementer elementer skal være en fælles farve, men går tabt, når de placeres over et baggrundsbillede eller en solid farve. Løsningen er en scrim. En scrim er en noget uigennemsigtig gradient placeret mellem grænsefladeelementet og baggrunden. Dette er let at opnå i XD. Sådan er det:
- Opret dit tavle i XD, tilføj et billede og kopier og indsæt et interfaceelement fra det relevante UI Kit - File> Open UI Kit … - ind i tavlen. I ovenstående billede gør billedet statuslinjen og applinjen vanskelig at se.
- Vælg rektangelværktøjet og tegne et rektangel. I feltet Egenskaber vælg Udfyld og vælg Gradient fra pop-down i Farvevælgeren. Indstil gradientfarverne til sort / hvid. Indstil A-værdien - Opacitet - til 60% og Hvid En værdi til 0%.
- Med den valgte rektangel, vælg Objekt> Arranger> Send baglæns. Interfaceelementerne er nu synlige over billedet.
Opret en Image Avatar i Adobe Experience Design
Et fælles designmønster findes i Chat-apps, hvor folk taler med hinanden, og højttalerens billede vises på skærmen. Disse avatarer er som regel billeder, der er blevet maskeret. Det er dødt, gør det nemt i XD. Sådan er det:
- Du starter med et billede og en cirkel eller anden form på tavlen. Du kan fylde cirklen med en hvilken som helst farve. Det du ikke behøver at gøre er at tilføje en slagfarve. Det forsvinder, når du opretter effekten, så hvorfor genere det. Hvis du har brug for at stoke cirklen, skal du kopiere den til udklipsholderen.
- Flyt cirklen til billedet, og vælg både billedet og cirklen. Med udvalgte botobjekter, vælg Objekt> Mask med form. Når du slipper musen, oprettes Avatar. Derfra kan du ændre størrelsen på det.
- Hvis du har brug for at tilføje et slagtilfælde, skal du sætte den cirkel, der sidder på dit udklipsholder, på tegnebrættet. Med den valgte kopi slukker du udfyld Egenskaberne og tilføjer en slagfarve og bredde. Hvis du vil rette dem op, skal du markere begge objekter og klikke på knappen Centrere justering i indstillingerne Juster øverst på egenskabspanelet.
- Hvis du vil flytte billedet rundt i masken, dobbeltklik på masken. Dette vil vise billedet og maskeformen. Klik på billedet og træk det i position. Når du slipper musen, vil billedet være i sin nye position inde i masken.
Spil med Adobe Experience Design Artboards
The Experience Design kunstplade er ikke kun der for dig at placere indhold. De kan også manipuleres. Her er et par ting, du kan gøre:
- Hvis du har brug for landskabs- og portrætversioner af et kunstplade, skal du duplikere tegnebrættet og med det valgte duplikat klikke på landskabsknappen i panelet Egenskaber. Artboard'en vil skifte til Landskabsorientering. Hvis Artboard har indhold på det, skal du klikke på Artboardens navn, og Artboard-egenskaberne vises i Egenskabspanelet.
- For at tilføje en brugerdefineret farve til Artboard, og projektet for den sags skyld, skal du vælge Artboard og klikke på Fill Color Chip i Udseende-sektionen i Egenskabspanelet. Indtast den hexadecimale værdi for farven, og klik på + -tegnet. Farven vil blive tilføjet som en brugerdefineret farve. Hvis du vil anvende den pågældende farve andetsteds, skal du vælge et objekt og klikke på den brugerdefinerede farvechip for at anvende farven.
- Kunstplade kan gøres lodret rulning. For at gøre dette skal du vælge tegnebrættet og ændre dets højde enten på Egenskabspanelerne eller ved at trække bunden af tavlen nedad. I rulningsområdet på egenskabspanelet skal du vælge lodret fra pop-down menuen og indtaste visningsportens højde for skærmen. Den stiplede blå linje viser dig bunden af visningsporten. For at teste det, skal du klikke på knappen Afspil og rulle væk. Hvis du vil slukke for rulning, skal du vælge Ingen i rullemenuen.
Rediger et mobilbrugerpakke i Adobe Experience Design
Experience Design indeholder et UI-sæt til udvikling af iOS-, Android- og Windows-brugergrænseflader. Når du først åbner dem, tror du måske, at de er temmelig godt sat på plads. Ikke helt - hver bit og stykker i disse kits er fuldt redigerbare. Lad os finde ud af ved at opbygge en Android wireframe.
- Du starter ved at vælge værktøjet Artboard og vælge Android Mobile i Google-sektionen i Egenskabspanelet.
- Vælg Filer> Åbn UI-sæt> Google Materiale. Dette åbner Material Design UI Kit. Vælg forstørrelsesglas og telt than Screen Guides kunstplade. Jeg kan godt lide at starte med denne ene, fordi den giver mig vejledninger til korrekt placering på skærmen af grænsefladeelementerne. Hvis du klikker på en af de blå stænger, vil du se, at den er låst. Klik på låsen fastgjort til hver af dem for at låse den op. Markér tegnebrættet og kopier markeringen til udklipsholderen. Gå tilbage til dit dokument og indsæt skærmen i din tavle.
- Klik en gang på App-linjen øverst på tavlen. Bemærk hvordan du kan vælge den.Vælg Object> Arrange> Bring to Front. Dit valg er nu over skærmens vejledninger. Dette skal fortælle, at hver af elementerne på skærmen kan redigeres.
- Dobbeltklik på statuslinjen øverst og i Egenskabspanelet set Fill farve til 455A64. Dobbeltklik på applikationslinjen og indstil dens udfyldning til 607D8B. Dette skal fortælle, at hvert element i et UI-kit kan redigeres for at opfylde projektets farvespecifikationer.
- Hvad med ikonerne? Sådan ændrer du deres farve. Dobbeltklik på hjertet for at vælge det. Hvis du ser på Egenskabspanelet, kan du antage, at du ikke kan redigere valget. Ikke helt. Dobbeltklik på hjertet endnu en gang. Egenskaberne åbnes, og du ændrer fyldfarven til FF0000. Gentag dette dobbeltklikkede trick for de resterende ikoner og teksten.
