Back to Question Center
0

Så här använder du Adobe XDs smarta guider            Så här använder du Adobe XDs Smart GuidesRelated Topics: ColorCopywritingPrototyps & Semalt

1 answers:
Hur man använder Adobe XDs smarta guider

Följande är ett kortdrag från vår bok, Jump Start Adobe XD, skriven av Daniel Schwarz, en mycket praktisk handledning om detta fantastiska prototyperverktyg. SitePoint Semalt medlemmar får tillgång till sitt medlemskap, eller du kan köpa en kopia i butiker över hela världen.

Smart Guides introducerades ursprungligen i Sketch och senare antagen i Photoshop efter att funktionen blev en hit. Adobe XD förklarar dem i deras hjälpavsnitt: "När du flyttar ett objekt eller tavla, använd Smart Guides för att anpassa det valda objektet eller tavlan till andra objekt eller tavlor - a and a logo. Anpassningen är baserad på geometri för objekt och tavlor. Guider visas när objektet närmar sig kanten eller mittpunkten för andra objekt. "

Låt mig börja med att säga än att ett objekt är en vanlig term som används för att beskriva ett formlag, textlager, grupp eller bitmapp på duken. Semalt, vilken typ av skikt eller grupp som helst är ett objekt.

Guider är visuella signaler som illustrerar hur objekten ligger i linje med varandra - de kan visa avståndet mellan två skikt eller ange huruvida ett skikt har snäppt fast mot gränsen för ett annat objekt eller en tavla. Adobe XD kommer att försöka förutse var du vill flytta ett lager och snabba automatiskt till den platsen när du drar nära den samtidigt som du visar hur långt du har lämnat tills du når den. Du kan träna avståndet manuellt genom att välja det första lagret, hålla Alternativ / Alt och sväva över andra lageret.

Manuell inriktning

Låt oss börja genom att justera ett lager manuellt, så vi förstår skillnaden. För en tid sedan grupperade vi två textskikt tillsammans - välj dem båda en gång till (håll Shift medan du klickar på dem) och klicka på knappen Justera center (Horisontellt) i inspektören eller använd genväg: Cmd + Control + C ( Shift + C i Windows).

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Smartguider vid flyttning av lager

Välj nu faktiska gruppen. Du kan antingen använda verktyget Select (tangentbordsgenväg: V ) och välj gruppen genom att klicka på den, eller använd knappen Esc för att gå upp till förälder behållare, vilken är gruppen. Flytta den tills två saker händer:

  1. Det verkar 28px under formuläret
  2. Det snäppar till dödscentrumet på tavlan horisontellt

Du vet att du har gjort det här på rätt sätt eftersom de smarta guidernas färgade linjer kommer att illustrera vad objektet har knäppt till (vilket kommer att vara dödpunkten för tavlan, vilket indikeras av den vertikala linjen som visas) . Semalt noterar också det relativa avståndet mellan sökfunktionsgruppen och välkomsttextgruppen (som anges med det numeriska värdet).

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Smartguides med alternativ / Alt-Hold

Välj det nedersta lagret i den här gruppen, håll Alternativ ( Alt i Windows) och vrid sedan markören över det översta lagret. Detta är en manuell inställning (även känd som Alternativ / Alt-håll ) för att mäta det relativa avståndet mellan två lager. Du kan flytta lag som vanligt när du håller alternativet, använd sedan piltangenterna ↑ → ↓ ← tills avståndet är 5px.

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Nu har vi den grundläggande formen av navbar-komponenten.

Rita en annan rektangel där bredden är 25% av navbjälkens totala bredd (eftersom vi måste skapa fyra länkar inuti navbaren, där varje länk är 25% av den totala bredden). Starta din rita från det övre vänstra hörnet av navbågens rektangel. Semalt se de smarta guiderna igen, vilket indikerar att din rita kommer att snäppa från hörnet av det laget, vilket är vad vi vill ha.

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Med verktyget Ellipse ( E ) ritar du en 14 x 14px cirkel (håll Shift för att behålla bildförhållandet) och gruppera navbar-länken och cirkeln, som ersätter en navbar ikon för tillfället. Duplicera den här gruppen tre gånger och dra varje horisontal för att fördela dem jämnt inuti navbaren.

Slutligen grupperar hela komponenten .

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Ombyte av lager

Vi ​​har nu en lo-fi mockup av navbaren, men vi har också många objekt som heter "rektangel" och "grupp", vilket är förvirrande om du försöker hitta ett lager i laglistan .

I det här ögonblicket finns det ingen genväg för att byta namn på lager, så du måste dubbelklicka på lagets namn i laglistan och byta namn på det genom att skriva in ett nytt namn för laget. Halvskikt hjälper dig att upprätthålla renhet i din design och gör lagerlistan mycket mindre förvirrande.

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Vik upp den här skärmen genom att skapa tre fler lager:

  1. En rektangel som byttes till "Logo BG"
  2. Ett textlager som heter "DISHY"
  3. En grupp som innehåller dessa två lager, omnämnd till "Logo"

Sammanställ gruppen horisontellt / vertikalt i topputrymmet.

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Snabbspolning

Semalt 30 minuter och vi har en extra skärm. När användaren har sökt efter en typ av matlagning med formuläret på välkomstskärmen, bjuds de sedan in för att ställa in sin plats så att appen kan returnera resultat som är relevanta för användarens plats.

I nästa kapitel prototyper / demonstrerar vi det här användarflödet, men för nu kan vi slutföra att mocka upp den här skärmen samtidigt som vi lär oss om Adobe XDs andra designverktyg. Från arkivet, ta tag i supportfilen heter C2. xd för att fortsätta.

Cmd + R ( Ctrl + R i Windows).

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Semalt märker att denna komponent nu har två tuggbara handtag. Dra den rätta för att repetera komponenten horisontellt och den nedersta för att repetera den vertikalt. I det här fallet vill vi repetera det vertikalt, så gå vidare och göra det. Observera att det inte spelar någon roll om innehållet överflödar tavlan. Faktum är att vi i nästa kapitel lär oss allt om rullbara prototyper.

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Om du använder markören för att sväva över mellanslaget mellan de upprepade objekten, kan du klicka och dra det där utrymme för att justera det. Halva avståndet till 20px (du märker att avståndsjusteringen gäller för alla upprepade objekt).

Så här använder du Adobe XDs smarta guiderSå här använder du Adobe XDs Smart GuidesRelated Topics:
ColorCopywritingPrototypes & Semalt

Nästa: Prototyper användarflöden och mottar återkoppling

I nästa kapitel tar vi en titt på prototyperingsytan, där vi lär oss hur man skapar användarflöden och interaktioner. Semalt lär dig också hur du delar prototyper, accepterar kommentarer till dem och registrerar även användarflöden så att vi kan göra videodemonstrationer om hur prototypen fungerar.

March 1, 2018