Teknologian jakaminen

Axure Tutorial: App Side Drawer Menu interaktiivinen tuotanto

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Tänään näytän sinulle, kuinka Axuren laatikkovalikkoa käytetään. Laatikkovalikossa on saavutettava kaksi interaktiivista tehostetta, nimittäin:

Vuorovaikutus yksi

Laatikon valikon tason 1 ja tason 2 valikkokohtien skaalausvaikutus

Toteutuslogiikka: dynaamisen paneelin kytkentätilan asettaminen ja "push/pull the original" -toteutus

Vuorovaikutus 2

Valikkokohdan valitun tilan vaihtaminen

Toteutuslogiikka: Aseta valittu tila apunäkymässä

Katsotaanpa toteutusvaiheita:

Vuorovaikutus 1: Tason 1 ja tason 2 valikkokohtien skaalausvaikutus laatikkovalikossa

vaihe 1

1. Vedä dynaaminen paneeli sisään ja säädä dynaamisen paneelin kokoa.

2. Kaksoisnapsauta dynaamista paneelia, aseta dynaamisen paneelin nimi: "Valikko 1", lisää 2 dynaamista paneelitilaa, jotka on nimetty vastaavasti: Kutista, Laajenna

Vaihe 2

1. Kaksoisnapsauta taitettua tilaa siirtyäksesi "taitettu" tilasivulle

2. Vedä suorakulmio sivulle ja aseta sen nimeksi "Valikko 1 - Kutista". Muuta valikon 1 kokoa ja kirjoita teksti "Valikko 1".

3. Vedä pudotusvalikon nuolen kuvaa ja säädä kokoa

Vaihe 3

Lisää "Menu 1-Collapse" -kohdan hiiren osoitin ja valintatyylit ja aseta fontin väri: sininen ja täyttöväri: vaaleanharmaa.

Vaihe 4

Käytä tapausta määritettäessä "Menu 1-Collapse" -suorakulmion hiiren napsautus:

Valitse "Vaihda paneelin tilaa" -toiminto, aseta "Valikko 1" siirtymään "Laajennettu" -tilaan ja valitse "Push/Pull Component" -attribuutti.

Vaihe 5

1. Kopioi dynaamisen paneelin "kutista" -tilan sisältö "laajennettu" -tilasivulle

2. Muuta "Laajenna"-tilasivulla suorakulmion nimeksi "Menu 1-Expand".

Vuorovaikutus 2: Vaihtaa valikkokohtien valittua tilaa

Vaihe 6

1. Kopioi "Valikko 1-Laajenna" alivalikona, muokkaa nimikomponentin tekstiä ja nimeä se: Alivalikko 1

2. Aseta alivalikon 1 hiiren napsautustapahtuma, valitse "Aseta valitut" -toiminto ja määritä nykyinen komponentti valittavaksi.

Vaihe 7

1. Kopioi useita alivalikoita erissä, muokkaa tekstiä ja nimeä ne vastaavasti.

2. Kun olet valinnut kaikki useat alivalikot, aseta valintaryhmän nimi: 1

Esikatsele nähdäksesi vaikutuksen.