Kuriant prototipus programoje Adobe XD yra įdomus ir kūrybingas procesas. Šiandien mes pažvelgsime į Overlay funkciją, galingą įrankį, leidžiantį integruoti interaktyvius elementus į jūsų prototipą. Galimybė dinamiškai rodyti ir slėpti informaciją pakelia jūsų dizainą į kitą lygį. Pasinerkime kartu, kaip efektyviai pasinaudoti šia funkcija, kad praturtintumėte savo prototypus.
Reikšmingiausi pastebėjimai
- Overlay funkcija leidžia interaktyviai pateikti turinį.
- Su šia funkcija galite integruoti atsakymų mechanizmus į savo dizainus.
- Perkurti overlays pagerina vartotojo patirtį ir suteikia vartotojui kontrolės jausmą.
Žingsnis po žingsnio instrukcijos, kaip įgyvendinti Overlay funkciją
Pirmiausia jums reikia naujo artboard, kad parodytumėte Overlay-funkciją. Sukurkite artboard savo žymių Overlay – jis suteiks vartotojui atsiliepimus, kai jis spustelės širdies ikoną.
Naudokite stačiakampio įrankį, kad sukurtumėte ryškų stačiakampį savo Overlay. Nubrėžkite stačiakampį žemyn, kuris turėtų būti šviesiai neoninės geltonos spalvos. Padarykite kampus apvalius, laikydami nuspaudę Alt klavišą ir nustatydami reikšmę į 20.
Dabar laikas išbandyti Overlay funkciją. Perjunkite į prototipo režimą ir vilkite širdies ikoną į naują artboard. Nustatykite trigerį į "Tap" ir veiksmą į "Overlay".
Atkreipkite dėmesį, kad prototipo režime aplink Overlay artboard atsiranda žalias rėmas. Tai suteikia jums supratimą, kaip Overlay yra rodomas kartu su originaliu artboard. Overlay yra pozicionuotas taip, kad atrodytų pusiau skaidrus, kas padeda jums geriau patalpinti dizainą.
Norėdami atlikti tolesnius pakeitimus, pereikite į dizaino režimą ir pridėkite tekstą, kuris apibūdina Overlay. Jei keičiant teksto laukelio dydį, užtikrinkite, kad jis būtų gerai skaitomas ir spalvos harmoningai derėtų.
Perkelkite Overlay žemyn, kad jis pasirodytų žiūrėjimo lange. Atkreipkite dėmesį į kontrastą tarp Overlay ir fono, kad užtikrintumėte, jog viskas būtų gerai skaitoma. Jei reikia, pakeiskite Overlay dydį norėdami užtikrinti geresnį skaitomumą.
Norėdami Overlay suteikti šešėlį ir sukurti realistinesnį įspūdį, pasirinkite objektą dizaino režime, pridėkite šešėlį ir pritaikykite reikšmes, kad šešėlis atrodytų patraukliai. Lengvas šešėlis, išspaudus į viršų, gali suteikti Overlay patrauklų efektą.
Baigę redaguoti Overlay, grįžkite į prototipo režimą ir išbandykite sąveiką. Jūsų Overlay dabar turėtų pasirodyti numatytoje vietoje spustelėjus širdį.
Dabar norite įsitikinti, kad Overlay po tam tikro laiko vėl dingsta. Prototipo režime pasirinkite Overlay ir sukurkite laiko pagrindu grindžiamą ryšį atgal į originalų artboard. Nustatykite trigerį į "Timed" ir nustatykite maždaug dviejų sekundžių delsimo laiką, kol Overlay dingsta.
Dabar išbandykite savo Overlay. Jis turėtų pasirodyti, kai paspausite širdį, ir po dviejų sekundžių vėl dingti. Ši paprasta sąveika žymiai pagerina vartotojo patirtį, suteikdama vartotojui momentinį atsiliepimą.
Naudodamiesi šiuo žingsnis po žingsnio vadovu, dabar žinote, kaip efektyviai įgyvendinti overlays programoje Adobe XD. Pasinaudokite šia gebėjimu integruoti interaktyvius elementus į savo prototipus ir pakelkite savo dizainus į kitą lygį.
Santrauka
Taikydami Overlay funkciją galite žymiai pagerinti vartotojų patirtį savo prototipuose. Tai leidžia jums integruoti dinamiškus ir interaktyvius elementus į savo dizainą ir taip užtikrinti aiškią komunikaciją su vartotoju.
Dažnai užduodami klausimai
Kas yra Overlay funkcija programoje Adobe XD?Overlay funkcija leidžia dinamiškai rodyti ir slėpti turinį, kad būtų galima integruoti interaktyvius elementus į prototipus.
Kaip pridėti Overlay?Sukurkite naują artboard savo Overlay, pasirinkite trigerį "Tap" ir nustatykite veiksmą į "Overlay".
Ar galiu keisti Overlay dydį?Taip, galite bet kada keisti Overlay dydį dizaino režime.
Kaip galiu pridėti šešėlį prie savo Overlay?Pasirinkite Overlay objektą dizaino režime ir pridėkite šešėlį, kad gautumėte realistinesnį efektą.
Kiek laiko Overlay lieka matomas?Galite pritaikyti Overlay matomumą, sukurdami laiko pagrindu grindžiamą ryšį su savo pradiniu artboard.
