Adobe Experience Design Tricks, tips och tekniker

01 av 07

Adobe Experience Design Tricks, tips och tekniker

När Adobe introducerade Experience Design som en offentlig förhandsgranskning, genomförde företaget två ganska fantastiska prestationer samtidigt. Först stakade de ut ett utrymme i den framväxande prototypprogramvaran. För det andra skapade de en möjlighet för användarna att spela med ett "in-progress" och låta användarna påverka utvecklingen. Nu när ansökan har varit tillgänglig under några månader, tyckte jag att det skulle vara bra att dela med dig av några erfarenhetsverktyg, tips och tekniker.

Men först kanske du undrar vad som menas med Prototyping Software. Bland de stora aktörerna i detta utrymme finns Proto.io, Principle, UXPin, Atomic.io, Experience Design och InVision. Till skillnad från applikationer som Sketch 3, Photoshop och Illustrator där statiska konstruktioner produceras presenterar dessa grafiska redaktörer interaktivitet, rörelse och andra funktioner som är vanliga i dagens mobil- och webbdesignutrymme.

Med uppkomsten av mobil och det oundvikliga, laserlösa fokuset på användaren är det inte längre tillräckligt för en designer att piska upp några skisser, dra ihop några kompisar och släpp sedan projektet eller ladda upp det till en webbserver. UI / UX-arbetsflödet har fundamentalt förändrat saker. Varje steg i processen, från att identifiera användaren, skisser, wireframes, mockups och prototyping, är nu föremål för omfattande användartestning.

Det är det sista steget - prototyper - där smärtpunkterna upptäcks och fixas innan projektet går in i slutproduktionen. Det är så här interaktivitet, rörelse, skärmövergångar och placering av allt på skärmen är så kritiska. Problem och problem kan inte bara visas som en statisk bild eller förklaras verbalt. När allt kommer omkring är dessa produkter för verkliga människor. I stället för att flytta allt detta för att kodas, sker prototypprocessen alltmer av grafikprogramvara som är utformad för detta ändamål. Det är lättare att åtgärda ett misstag, byta ut en bild, skriva om lite text, flytta en knapp och så vidare med en visuell redigerare än att ständigt skriva om och felsöka kod.

Faktum är att denna programvara har blivit en nyckelkomponent i dagens "Rapid Prototyping" design och utveckling miljö.

Med det sagt, låt oss ha roligt med Experience Design.

02 av 07

Skapa en destinationspinne med en enkel cirkel i Adobe Experience Design

En snygg aspekt av XD är dess användning av vektorritningsverktyg. Kan jag inte hitta en ikon? Inga problem. Rulla din egen. Här är hur:

1. Välj Ellipseverktyget och, med alternativet / Alt-Skift-tangenterna tryckt, rita en cirkel.
2. Med den valda cirkeln ställer du in Fyll färg till FF0000 och gränsen till "ingen" i egenskaperna.
3. Dubbelklicka på cirkeln för att visa ankarpunkterna. Dra ned ankaret nedåt.
4. Dubbelklicka på den valda ankarpunkten och kurvorna ersätts med rader.
5. Rita en annan liten cirkel med en vit fyllning och ingen stoke. Flytta den till position och välj pinnen och cirkeln. Klicka på knappen Horisontell mitt i fönstret Justera högst upp i egenskaperna och knappen är skapad.

03 av 07

Skapa en bakgrundssläckning i Adobe Experience Design

Det är vanligt att ha text eller annat innehåll över en bakgrundsbild. Problemet här är bilden, oftare än inte, överdriver innehållet ovanför det. Ett sätt att lösa problemet är att dimma bakgrundsbilden. Du kan oskärpa bilden i Photoshop eller annan bildredigeringsprogram, men det är något ineffektivt, särskilt eftersom XD nu kan hantera den här uppgiften för dig. Här är hur:

1. Skapa en ny tavla och lägg till din bakgrundsbild.
2. Välj rektangelverktyget and rita en rektangel över bilden. Med rektangeln vald, ställa in Fill to White och Stroke to None.
3. Med rektangeln vald, välj bakgrundsskärpa i fastighetspanelen. De tre reglagen är Blurbelopp, Ljusstyrka och Opacitet. Här är vad de gör:

• Blurbelopp: Justerar blurriness av bilden under formen. Det maximala värdet är +50.
• ljusstyrka: Justerar höjdpunkterna och skuggorna i bilden. Minsta värdet är -50 och maximumvärdet är +50.
• Opacitet: Påverkar genomskinligheten i formen och synligheten av bilden under formen. Värdena varierar från 0% till 100%.

Om du verkligen vill "byta saker" ändrar du formens färg och spelar med Opacity-värdet för att ändra bildens "look".

04 av 07

Skapa en Scrim i Adobe Experience Design

Ett vanligt designproblem är gränssnittselementen element måste vara en vanlig färg men förloras när de placeras över en bakgrundsbild eller en helfärgad färg. Lösningen är en scrim. En scrim är en något ogenomskinlig gradient placerad mellan gränssnittselementet och bakgrunden. Detta är lätt att åstadkomma i XD. Här är hur:

1. Skapa din tavla i XD, lägg till en bild och kopiera och klistra in ett gränssnittselement från det lämpliga UI Kit - File> Open UI Kit … - in i tavlan. I bilden ovan gör fotoet statusfältet och App Bar svårt att se.
2. Välj rektangelverktyget och rita ut en rektangel. I fönstret Egenskaper välj Fyll och välj Gradient från pop-downen i färgväljaren. Ställ in gradientfärgen till svartvitt. Ställ in A-värdet - Opacitet-till 60% och den Vit Ett värde till 0%.
3. Med rektangeln vald, välj Objekt> Ordna> Skicka bakåt. Gränssnittselementen är nu synliga över bilden.

05 av 07

Skapa en bild Avatar i Adobe Experience Design

Ett vanligt designmönster finns i Chat-appar där människor pratar med varandra och högtalarens bild visas på skärmen. Dessa avatarer är vanligtvis bilder som har blivit maskerade. Det är dött enkelt att uppnå detta i XD. Här är hur:

1. Du börjar med en bild och en cirkel eller annan form på tavlan. Du kan fylla cirkeln med vilken färg som helst. Det du inte behöver göra är att lägga till en strokefärg. Den kommer att försvinna när du skapar effekten, så varför stör. Om du behöver sticka cirkeln, kopiera den till klippbordet.
2. Flytta cirkeln till bilden och välj både bilden och cirkeln. Med bot objekt vald, välj Objekt> Mask med form. När du släpper ut musen skapas Avatar. Därifrån kan du ändra storlek på det.
3. Om du behöver lägga till en stroke, klistra in den cirkel som sitter på klippbordet på tavlan. Med den valda kopian stänger du av fyllningen i egenskaperna och lägger till en stroke färg och bredd. För att ordna dem, välj båda objekten och klicka på Centrera justera-knapparna i alternativen Justera högst upp i egenskapspanelen.
4. Om du vill flytta fotot runt i masken, dubbelklicka på masken. Detta visar bilden och maskformen. Klicka på bilden och dra den till plats. När du släpper musen kommer bilden att vara i sin nya position inne i masken.

06 av 07

Spela med Adobe Experience Design Artboards

Experience Design-tavlorna är inte bara för dig att placera innehåll. De kan också manipuleras. Här är några saker du kan göra:

1. Om du behöver landskaps- och porträttversioner av en tavla, duplicera du tavlan och, med den valda dubbletten, klickar du på landskapsknappen i panelen Egenskaper. Artboard kommer att byta till Liggande orientering. Om Artboard har innehåll på det, klicka på Artboard-namnet och Artboard-egenskaperna visas i Egenskaper-panelen.
2. För att lägga till en anpassad färg till Artboard, och projektet för den delen, välj Artboard och klicka på Fill Color Chip i avsnittet Utseende i Egenskaper Panel. Ange det hexadecimala värdet för färgen och klicka på + -tecknet. Färgen läggs till som en anpassad färg. Om du vill använda den där färgen på annat håll väljer du ett objekt och klickar på det anpassade färgchipet för att applicera färgen.
3. Konstbrädor kan göras vertikalt rulla. För att göra detta, välj på tavlan och ändra dess höjd antingen på Egenskaper paneler eller genom att dra nederst på Tavlan nedåt. I rullgardinsområdet på egenskapspanelen väljer du vertikalt från popup-menyn och anger visningsportens höjd för skärmen. Den streckade blå linjen visar dig botten av visningsporten. För att testa det, klicka på knappen Spela upp och bläddra bort. För att stänga av rullning, välj Ingen i rullningspanelen.

07 av 07

Redigera ett mobilt UI-paket i Adobe Experience Design

Experience Design innehåller ett UI-paket för att utveckla iOS-, Android- och Windows-gränssnitt. När du först öppnar dem kanske du tror att de är ganska bra på plats. Inte riktigt - alla bitar och bitar i dessa kit är helt redigerbara. Låt oss ta reda på det genom att bygga en Android wireframe.

1. Du börjar med att välja Artboard-verktyget och välja Android Mobile i Google-delen av egenskapspanelen.
2. Välj Arkiv> Öppna UI Kit> Google Material. Detta öppnar Material Design UI Kit. Välj förstoringsglaset och tältet than Screen Guides. Jag gillar att börja med den här eftersom det ger mig guider för korrekt placering på gränssnittselementen på skärmen. Om du klickar på en av de blå staplarna ser du att den är låst. Klicka på låset som är fäst vid var och en för att låsa upp det. Markera tavlan och kopiera markeringen till urklippet. Återgå till ditt dokument och klistra in skärmen i din tavla.
3. Klicka en gång på App-fältet som längst upp på tavlan. Lägg märke till hur du kan välja den.Välj Objekt> Ordna> Ta fram. Ditt val är nu över skärmguiderna. Detta bör berätta att var och en av elementen på skärmen kan redigeras.
4. Dubbelklicka på statusfältet längst upp och i egenskapspanelen set Fyllfärgen till 455A64. Dubbelklicka på programfältet och sätt fyllet till 607D8B. Detta bör berätta att varje element i ett UI-paket kan redigeras för att uppfylla projektets färgspecifikationer.
5. Vad sägs om ikonerna? Så här ändrar du färgen. Dubbelklicka på hjärtat för att välja den. Om du tittar på egenskapspanelen kan du anta att du inte kan redigera valet. Inte riktigt. Dubbelklicka på hjärtat en gång till. Egenskaperna öppnas och du ändrar fyllningsfärgen till FF0000. Upprepa dubbel dubbelklick för de återstående ikonerna och texten.