Adobe XD-opetusohjelma – Suunnittelukokemus ja prototyyppaus

Sydämellisesti tervetuloa suureen Adobe XD -oppituntiin. Tässä alussa esittelen itseni sinun valmentajanasi.

Mikä on ero käyttäjäkokemuksen (UX) ja käyttöliittymän (UI) välillä? Mitä erilaisia tasonsuunnittelun tyyppejä on olemassa ja mihin tarkoitukseen Adobe XD on parhaiten käytetty? Vastaus löytyy täältä!

Ensimmäistä kertaa avattu Adobe XD - ja heti tarjolla on lukuisia mahdollisuuksia, joita voi valita. Tässä videossa on pieni aloitus Adobe XD:lle, yleiskatsaus ohjelmaan sekä esittely XD:n Splash-näytöstä ja sen toiminnoista.

Taustakankaat (Zeichenflächen) voi luoda Adobe XD:ssä nopeasti eri resoluutioille ja laitteille. Mitä ominaisuuksia tulee ottaa huomioon, saat tietää tässä oppaassa.

Erilaiset rasteriasetukset helpottavat elementtien ja objektien siistiä järjestämistä toistensa alle. Tätä varten meillä on käytettävissämme suorakulmainen ruudukko ja sarakkeiden jakautuminen kolumneihin.

Google, Apple ja Microsoft tarjoavat nopeaan käynnistykseen käytännöllisiä käyttöliittymäkittejä. Nämä valmiit työtilat auttavat meitä valtavasti myöhemmin prototyyppien kehittämisessä eri alustoille.

Värit ovat lähes jokaisessa suunnittelussa äärimmäisen tärkeässä roolissa - tässä videossa opit, miten voit työskennellä väreillä Adobe XD:ssä, miten voit tuoda ne mukaan ja mitä käytännöllisiä lähteitä on olemassa valmiiden väriharmonioiden keräämiseksi.

On olemassa lukuisia tapoja tuoda resursseja kuten kuvia, tiedostoja, tekstidokumentteja jne. Adobe XD:hen. Tässä videossa esittelen muutamia menetelmiä. Koska XD on kuitenkin osa Adoben Creative Cloudia, kirjastoilla on luonnollisesti äärimmäisen mukava ja kätevä työskennellä.

Aihe kirjasimista ja typografiasta on suuri osa matkaamme halki Adobe XD:n. Tässä videossa opit, miten hallitset kirjasimia oikein ja tehokkaasti.

Muodot voidaan joko tuoda helposti Adobe XD:hen tai luoda itse polkutyökalulla. Jos kohdetta käytetään useammin kuin kahdesti, on suositeltavaa lisätä se symbolina varoihin -listalle.

Suunnittelu liittyy paljon inspiraatioon ja ulkoapäin tulevaan panokseen. Tähän kuuluu analoginen ympäristö sekä digitaalinen maailma. Tässä esittelen muutamia portaaleja, joita mielelläni vieraillen.

Aloitetaan pienellä hienolla käytännön projektilla. Tässä ohjeessa ja seuraavissa kahdessa videossa luomme yhden sivun verkkosivun.

Toiston rasteri on yksi Adobe XD:n merkittävimmistä ominaisuuksista. Se auttaa meitä skaalaamaan ja täyttämään kerran luodut objektiryhmät haluamallamme tavalla.

Viimeisessä osassa Onepagerin suunnittelua huolehdimme alatunnisteesta ja alueesta referensseille. Tässä käytämme käteviä SVG-tiedostoja ja opimme lisää suunnittelutekniikoista.

Tässä oppitunnissa keskitymme siihen, miten yksittäiset artboards voidaan yhdistää vuorovaikutteisesti toisiinsa. Selvitämme tässä, mitä mahdollisuuksia siirtymän valintaan ja muita muokkauksia prototyypissä voidaan tehdä.

Jokainen verkkosivusto tarvitsee ankkuripisteen navigointia varten. Tässä videossa keskitymme yksinomaan päänavigaation luomiseen ja niiden väliseen interaktiiviseen yhteyteen.

Tämä koulutus perustuu edelliseen lukuun ja näyttää, miten sovellamme luotua työpöytävalikkoa älypuhelimeen. Hamburger-kuvake ja valikkokohdat saavat mielenkiintoisia animaatioita.

Yksi tehokkaimmista työkaluista parhaan mahdollisen visualisoinnin saavuttamiseksi on Adoben XD:n Auto-Animate-toiminto. Tässä esimerkissä selitän, miten voitte sopeuttaa Auto-Animate-toiminnon periaatteen jokaiseen mahdolliseen tilanteeseen.

Seuraavissa videoissa opimme luomaan prototyypin verkkokauppaa varten. Tässä opimme, kuinka luoda visuaalisesti houkuttelevia high-fidelity-prototyyppejä yksinkertaisista artboardeista. Osa 1/4.

Toisessa osassa huolehdimme yksityiskohtaisten kuvauksien esittämisestä, lisäämme liukusäätimiä kuville ja yhdistämme taustakuvat toisiinsa.

Interaktiivisen prototyypin peitto-toiminto tarjoaa meille jännittäviä mahdollisuuksia, kuten tietojen suoran sisään- ja ulos piilottamisen.

Hyvä käytettävyysdesign antaa käyttäjälle jatkuvasti palautetta järjestelmän tilasta. Tämän palautteen sisällytämme projektiin lopuksi kauniina animaationa.

Adobe XD hallitsee prototyyppiprosessissaan myös vuorovaikutuksen puheohjauksen avulla. Verbaaliset käskyt johtavat siis järjestelmätoimenpiteisiin, jotka voimme määrittää itse. Miten tämä toimii, näytän tässä oppaassa.

Yhteistyö muiden osastojen ja osallistuvien henkilöiden kanssa, äänikommentointi on arvokas ominaisuus, jonka avulla projektin tila voidaan selittää ymmärrettävästi.

Prototyypin testaaminen virtuaaliympäristössä on yksi asia - esittää se sitten livenä loppulaitteessa on aivan eri juttu. Ja juuri tämän voi ratkaista helposti joko USB:n tai Creative Cloud -liitännän kautta Adobe XD:n avulla. Tätä varten käytämme Adobe XD -sovellusta App Storesta.

Yhteistyön aikana on välttämätöntä vaihtaa tietoja muiden osastojen kanssa projektin tilasta. Julkaisutoiminnon avulla prototyyppi voidaan julkaista, jotta arvioijat, kehittäjät ja tilaaja voivat saada visuaalisia vaikutelmia projektista. Tässä vaiheessa alkaa sitten myös asiantuntijaosastojen välillä työkierto, jotta projekti saataisiin kypsyyteen.

Adobe XD muuttuu edelleen hyvin nuorena ohjelmana jokaisen päivityksen myötä: Tässä videossa selitän, mitkä uudistukset ovat tulleet versiosta 18 versioon 19, miten ominaisuuksia käytetään ja milloin ne ovat hyödyllisiä. Tähän sisältyvät: komponentit symbolien sijaan, responsiivinen skaalaus, ohjelmatiivisteet, monikulmio-työkalu, lisää mahdollisuuksia tekstin muotoiluun ja paljon muuta. Hauskaa katselua!