Kako napraviti prototip u Axure RP ako ništa ne razumijete

Axure RP je najpoznatiji i najpopularniji softver za izradu web stranica i aplikacija. Dovoljno duboko za izradu složenih elemenata, dok je dovoljno svjetlo, tako da nakon deset minuta tinkeringa u sučelju priprema raspored. Dakako, to je daleko od jedinog - postoje mnogi drugi načini izrade prototipa.

Jedna od glavnih značajki Axurea (u usporedbi s konkurentima) je mogućnost programiranja ponašanja gumba, spremnika, widgeta. Na temelju toga može se izraditi prototip koji će funkcionirati kao cjelovita web stranica / aplikacija.

Odricanje od odgovornosti: ovo je moj prvi članak. Ne znam kako pisati, ali postoji akumulirano iskustvo. Stoga, na temelju ovog članka, Nadam se da će materijal biti koristan. Hyde ne tvrdi konačnu istinu - neke odluke i misli su subjektivne, iako su testirane na mnogim projektima.

Što se tiče strukture vodiča, to će biti kako slijedi:

Članak je priložen razmatranom prototipu u .rp formatu, koji se može preuzeti kao primjer. Korištene knjižnice s ikonama, gotovi widgeti su priključeni na prototip.

Razmotreni prototip bit će smješten na poveznici //fys0bf.axshare.com.

Za svaki razmatrani primjer, priložena je video instrukcija. Dakle, ne biste trebali imati problema, kao u nekim dizajnerskim udžbenicima.

Malo o UX / UI-u

Ukratko, UX (korisničko iskustvo) je iskustvo, kako korisnik doživljava sučelje, kakve emocije doživljavaju u interakciji s njim. UI (korisničko sučelje) - to je ono što on vidi, s čime je u interakciji.

Sučelje može biti bilo što: čekić, kliješta, hladnjak, kontrolna ploča zrakoplova, lagani štednjak, itd. Prva tri ne izazivaju pitanja - možete ih koristiti bez razmišljanja, morat ćete ga pokupiti, ali ne možete upravljati avionom profesionalni pilot.

Ako nacrtate paralelu s čekićem, onda je čekić UI ručica, čekić i čarapa. UX čekić je ono što osoba osjeća kad zabija čavao.

Pri dizajniranju sučelja, treba nastojati učiniti ga jednostavnim kao sučelje čekića ili kopača. Bilo kakva komplikacija natjerala bi korisnike da napregnu glavu i to im se ne sviđa.

Najbolje sučelje je kada korisnici uopće ne primjećuju što je to, nego jednostavno dobiju ono što im je potrebno bez osjećaja nelagode - naručite, pročitajte članak, kupite ulaznicu itd.

Kao što je Steve Jobs rekao: "Dizajn nije način na koji uređaj izgleda, već kako radi." Sukladno tome, glavni je cilj učiniti ga tako da korisnici ne oklijevaju u tom procesu. O prisutnosti sučelja obično se pamti u dva slučaja:

- Neugodno mu je. Mali gumbi, morate "cilj" da kliknete. Razmak između redova je prekratak, morate provjeriti. Na odredišnoj stranici ima puno beskorisnih informacija, a element konverzije također mora biti pronađen. Pa, razumiješ.

- Stručni. Tko radi s sučeljima ili je zainteresiran za temu, obratit će pažnju na to kako je dobro napravljen.

Za one koji su u tenku: gdje je prototip online trgovine i tako visoki pojmovi "što korisnik osjeća"? I osim toga. Praktičnost budućeg sučelja trebala bi biti osmišljena na razini kostura, putevi prolaska osobe kroz stranicu (mapiranje putovanja). Naravno, na razini dizajna, puno stvari će se prilagoditi, dodati boje, slike. No, baza je sačuvana, i to je položen samo u fazi stvaranja prototipa.

Općenito možemo formulirati sljedeće "dobročinitelje":

- Jednostavnost. Ne pokušavajte to učiniti složenijim, težim. Pojednostavite, skratite.

- Predlošci. Ne pokušavajte razmišljati o biciklu, novom elementu sučelja, posebnoj značajci koja se ne nalazi nigdje. Što su tipičniji elementi na mjestu na njihovim mjestima, veća je vjerojatnost da će korisnik razumjeti za što su namijenjeni. Ovo pravilo je, naravno, prikladno kada se stvara nešto tipično. Ako razvijate novu uslugu ili sučelje na novoj platformi (npr. Za naočale za virtualnu stvarnost), morate eksperimentirati.

- Ciljana publika. Bez obzira koliko otrcano zvučalo, morate razumjeti za koju je središnju Aziju sučelje namijenjeno. Dob, spol, obrazovanje, opseg, razina bogatstva. Sve to treba uzeti u obzir pri oblikovanju prototipa. Na primjer, ako je Vaša odredišna stranica usmjerena na prodaju vrlo skupih satova, onda ne možete koristiti vrišteće slogane o popustima, ogroman CTA gumb na svakom zaslonu ili treperi brojač koji je ostavio 10 minuta za narudžbu po povoljnoj cijeni. U slučaju da LP predstavlja zaradu na internetu u sustavu mrežnog marketinga (čarobni dodaci prehrani koji vam omogućuju da razgovarate s preminulom bakom), takvi će elementi biti više nego prikladni. Reći ću još više: njihovo korištenje pomoći će u uklanjanju ciljnog tretmana na razini sučelja.

- Natjecatelji. Neki od poznatih ljudi su rekli: "Dobri umjetnici kopiraju, veliki umjetnici kradu." Zapravo ukradu ideje pri dizajniranju sučelja od konkurenata. Natjecatelji mogu biti izravni i neizravni. Također preporučujem špijuniranje dobrih rješenja na stranim mjestima.

Svrha ovog materijala je pokazati kako izraditi prototip u Axure RP. Stoga se neće dalje postavljati pitanja zašto je taj element postavljen tako različito.

Principi i značajke prototipa u Axureu

Prije nego što počnete dizajnirati sučelje, važno je razumjeti u koju svrhu ga namjeravate koristiti. O tome će ovisiti u kojoj će se mjeri ovaj vodič koristiti kao izravna instrukcija:

- Ako napravite prototip stranice, kako biste kasnije dali dizajn, a zatim priložite tehničkom zadatku - to je za takav plan da se izračuna vodič.

- Ako ste dizajner, kupac (i vi imate viziju proizvoda i morate ga prenijeti) ili trebate pripremiti radnu shemu za demonstraciju - možete dodati još slika, zamarati se dubokim programiranjem elemenata, igrati se bojom. Također se preporuča napraviti prilagodljivu verziju unutar jedne stranice.

Općenito, zahtjevi za izradu prototipa već su davno formulirani u ovom materijalu. Prenijet ću najvažnije i najrelevantnije, uz dodatak iz prakse:

  • Svi elementi (šešir, podrum) izrađeni su preko majstora.
  • Nemojte napraviti preskakanje sa stilovima, fontovima. Radi se o naslovima, glavnom tekstu.
  • Svi elementi u kojima će biti interaktivnost (klizač, banneri, padajući popisi, itd.) Će se provoditi kroz interakcije. To je potrebno da bi se vizualno shvatili koji su elementi statični i koji nisu.
  • Idealni prototip mora biti povezan kako bi bilo jasno gdje se odvija prijelaz kada kliknete na element. Tekstualne veze su podcrtane, pseudo veze označene su točkastom linijom.
  • Prototip je izrađen na tipičnim stranicama. Na primjer, internetska trgovina je: dom, katalog, kartica proizvoda, kontakti, stranica s običnim tekstom (plaćanje, dostava, o tvrtki), osobni račun, koraci plaćanja. Ovisno o opsegu i zahtjevima, mogu se dodati FAQ, članci, kontakti u različitim gradovima itd.
  • Prototip bi trebao biti izrađen na dimenzionalnoj mreži.
  • Ako već postoji gotov tekst za prototip, morate ga koristiti. Dopušteno je koristiti tekst ribe (Lorem Ipsum), ali morate razumjeti otprilike koliko će tekst na kraju imati tekst.
  • Naslovi, tekst u skočnim prozorima, stavke izbornika - trebali bi biti smisleni. Čak i ako se kasnije promijeni tijekom faze uređivanja, možete napisati "radni" naslov koji prenosi značenje.
  • Sve bi trebalo biti vrlo shematski, bez elemenata bojanja. No postoje iznimke. Kako bi klijentu pokazao rezultat blizak konačnom tipu (menadžment, kolege, testeri), ponekad ima smisla dodati slike u boji, logotipe i rješenja u boji.
  • Svi interaktivni elementi, stranice, majstori, neki objekti trebaju biti smisleno imenovani.
  • Preporučuje se da se prototipovi zatvore lozinkom. Prema zadanim postavkama, dostupni su samo izravnom vezom obrasca 23oh42.axshare.com.
  • Potrebno je razraditi hijerarhiju na razini stranice tako da je vidljivo gniježđenje.
  • Za svaku rezoluciju preporuča se napraviti zasebnu stranicu: to će pomoći da se izbjegne zabuna pri sastavljanju na svim daljnjim fazama: dizajniranje, sastavljanje TK, raspored, programiranje. Svako dopuštenje za odvajanje mapa.
  • Možete koristiti početni zaslon na kojem će biti napisano da za projekt, verziju projekta, koji čini prototip i veze na osnovne dozvole. Ova stavka nije obavezna.

Axure ima vlastite "čipove" koji ga razlikuju od konkurenata, ovdje je njihov nepotpun set:

  • Prototipovi su izgrađeni na temelju osnovnih elemenata, kao u konstruktoru. Elementi su pak spojeni u knjižnice. To mogu biti ikone, tekstni okviri, gumbi, odabrani fontovi, kao i složeni objekti s mnogo dinamičkih panela.
  • Većina osnovnih elemenata su pravokutni spremnici. Čak i riblji tekst ili naslovi izgledaju kao kontejner s prozirnom pozadinom s uvučenom granicom. Na isti način, u bilo kojem spremniku možete smjestiti tekst i formatirati ga na bilo koji način.
  • Dinamičke ploče. Za izradu složenih interaktivnih elemenata trebate koristiti dinamičke panele. To je objekt ili skupina objekata koji se prenose u zasebno beskonačno područje, unutar kojeg također možete stvoriti beskonačan broj radnih područja, država (država) na istoj razini i na sljedećoj razini gniježđenja. Ovu shemu najbolje ilustrira san u snu iz filma "Početak". Sami dinamički paneli mogu se sakriti, premjestiti, promijeniti na stranicama. Uz njihovu pomoć, provode se kartice, modalni pop-upovi, složeni efekti lebdenja, učitavanja stranica itd.
  • Majstor. Kao što je već spomenuto, majstor nije samo zanimljiva značajka, nego i vitalni uvjet. Pomoću njega možete implementirati elemente koji će biti nepromijenjeni na svim stranicama: zaglavlje, podrum, obrazac za pretplatu, karticu proizvoda na popisu. Master je u biti dinamički panel, samo što ima zasebni radni prostor (prema zadanim postavkama u donjem lijevom kutu) i funkcionalnost "dodaj / ukloni na svim stranicama". Postavlja se pitanje, kakva je teškoća jednostavno kopirati element na svaku novu stranicu? Tako je, ako se prototip sastoji od 2-3 stranice i ne možete se zamarati glavnim. No, ako se na stranicama 20, iu procesu rada, morate mijenjati element od kraja do kraja, morat ćete napraviti promjene na svim stranicama, što je iznimno nezgodno.

Tablica veličine

Dimenzionalna mreža osmišljena je da napravi neku organizaciju. To je kao da uspoređujete A4 listove papira i grafove: možete nacrtati crtež na praznom listu, ali je mnogo prikladnije ga implementirati pomoću oznake.

Prototip će koristiti mrežu od 16 stupaca za širinu zaslona od 1280 piksela.

Pri izračunavanju veličine mreže preporučuje se korištenje usluge gridcalculator.dk.

Zadani dokument nedostaje raslinovka i vodiči. Stoga, prije početka rada na prototipu, morate ga stvoriti. Za to trebate:

  • Kliknite desnom tipkom miša na prazan prostor u radnom prostoru.
  • Odaberite Mreža i Vodiči → Izradi vodiče.
  • Tada možete birati između zadanih postavki ili postaviti vlastite.

Preporučuje se da vodilice pričvrstite tako da se ne pomaknu slučajno tijekom rada. Da biste to učinili, desnom tipkom miša kliknite prazno mjesto i odaberite Grid i Guides à Lock. Također možete stvoriti mrežu točaka: Grid i Guides à Show Grid.

Tema rešetki za odgovarajući dizajn dobro je objavljena u ovom članku o Habréu.

Pregled sučelja

Sučelje Axure je prilično jednostavno za čitanje i ima niski ulazni prag. U isto vrijeme, ona je dovoljno složena da omogući sve njezine funkcije. Radni zaslon može se podijeliti na sljedeće elemente:

  1. Glavna alatna traka, alatna traka stila i glavni izbornik.
  2. Stranice.
  3. Knjižnice.
  4. Masters.
  5. Radni prostor.
  6. Interaktor.
  7. Obris.

Daljnje pojedinosti o svakom od njih.

Glavna alatna traka, alatna traka stila i glavni izbornik

Glavna alatna traka je alatna traka koja na ovaj ili onaj način utječe na kretanje widgeta ili grupe widgeta po zaslonu. Pomicanje se podrazumijeva pod radnim prostorom pri radu s objektom, a ne njegovom interaktivnošću za korisnika. Na ovoj alatnoj traci možete:

Promijenite način odabira widgeta (u cijelosti ili djelomično). Odmah Poveži Alat - za povezivanje widgeta, možete ih koristiti prilikom kompilacije umnih mapa (Mind map).

Pen - pen alat kao u Photoshopu. Možete izrezati neželjeni element iz widgeta.

Više - skup elemenata iz kojih ćete koristiti samo obrezivanje (Crop). No, bit će mnogo prikladnije koristiti ga kroz kontekstni izbornik (desni klik na element).

Zum. Promjena ljestvice. Zgodno je vidjeti trenutnu ljestvicu za radno područje. Da biste povećali prikaz, preporučujem da koristite klasičnu funkcionalnost: Ctrl + pomicanje kotačićem miša.

Prednja / stražnja strana. Da biste prilagodili slojeve widgeta. Često, widgeti su slojeviti jedni na druge, koristeći ove gumbe možete podesiti njihovu razinu.

Grupa / Razgrupiranje. Za grupiranje widgeta i njihovo uklanjanje. Često se koristi ako jedna skupina elemenata treba biti poravnana s drugom skupinom elemenata. Vruće tipke dovoljno su zgodne za korištenje jedne lijeve strane - Ctrl + G za grupiranje objekata, Ctrl + Shift + G za uklanjanje grupa.

Poravnaj / distribuiraj. Za poravnavanje objekata: u sredini, duž rubova, ravnomjerno pozicionirajte objekte u nizu. Jasno je da se to može vidjeti na poveznici. Iz ovog linka možete vidjeti kako funkcionira grupiranje i poravnavanje grupa elemenata.

Zaključaj / Otključaj. Zaključaj stavku Potrebno za fiksiranje elementa, kako se ne bi slučajno pomaknuli.

Lijevo / desno. Pomoću alata možete ukloniti lijeva i desna područja kako biste dodali više prostora ispod radnog područja.

Pregled / dijeljenje / objavljivanje. Pogledajte kako izgleda prototip u pregledniku. Pregled omogućuje lokalno generiranje projekta u pregledniku. Ali brzo pritisnite F5. Objavi - može se poslati na poslužitelj Axure, gdje će biti dostupan svima (osim ako nije zaštićen lozinkom).

Alatna traka stila je alatna traka koja je odgovorna za izgled, veličinu i oblikovanje.

  • Formatiranje fontova, vrsta, veličina, boja, poravnanje teksta - sve je standardno.
  • Također, sami blokovi mogu promijeniti veličinu granice, dodati sjenu, promijeniti boju blokova, boju granica. Moguće je postaviti različite razine transparentnosti ili linearnog gradijenta.
  • Sposobnost da se promijeni položaj objekta duž x i y osi, veličina duljine i visine (s mogućnošću proporcionalne promjene veličine).
  • Sposobnost da objekt postane nevidljiv (Skriven).

Interakcija s alatnom trakom stilova može se pregledati u video vezi.

stranice

U ovom bloku formira se prototipska hijerarhija, same stranice. Također možete stvoriti mape za jednostavne prijelaze stranica. Da biste brzo stvorili stranicu, možete pritisnuti Ctrl + Enter. Da biste ispravili hijerarhiju, ili strelice na sučelju ili Ctrl + strelice na tipkovnici.

knjižnice

Sami widgeti s mogućnošću odabira knjižnice. Widget knjižnice su standardne koje dolaze s programom. Internet je pun korisničkih knjižnica (google s upitom "Preuzimanje biblioteka Axure"). Možete čak i sami napraviti knjižnicu radi praktičnosti - na primjer, biblioteka specijaliziranih ikona, alatnih traka, kartica i sl. Zajedno s gotovim prototipom, kao što je spomenuto na početku, priključit će se opsežna knjižnica, koristiti je za vaše zdravlje.

Sama alatna traka je prilično jednostavna za korištenje - samo povucite željeni widget na radni prostor.

majstori

Blok s majstorima, kao što je gore spomenuto. Čarobnjaci na stranicama mogu biti dodani ili ručno povlačenjem na radni prostor kao widget ili putem Add Pages (desnom tipkom miša na čarobnjaku). Stvaranje, dodavanje i rad s majstorima može se vidjeti na videu. Majstor može biti stvoren od dvije vrste: zaključan na jednom mjestu i sposoban za kretanje. Zaglavlje stranice može se stvoriti fiksno na tom mjestu (Lock to Master Location) gdje je stvoreno, a ostatak se može bolje obaviti bez (Place Anywhere).

Radni prostor

Radni prostor je mjesto na kojem je prototip konstruiran. Korištene stranice, čarobnjaci, dinamičke ploče raspoređene su u pločice iznad radnog područja.

interaktor

Ukratko, uz pomoć ove alatne trake, programirana je cijela akcija. Sastoji se od tri kartice: Svojstva, Bilješke, Stil.

Nekretnine

Набор событий, которые можно задействовать для определенного взаимодействия элемента или группы элементов. Их всего около 30, но обычно используются в штук 5 из них:

  • OnClick - как понятно из названия, срабатывание по клику. Например, нужно сделать так, чтобы при клику по кнопке появлялось модальное окно. Самое часто используемое событие.
  • OnMouseEnter/OnMouseOut - действие, которое будет происходить при наведении на элемент, снятие наведения.
  • OnSwipeLeft/OnSwipeRIght - свайп, прокрутка пальцем на мобильных устройствах.

Помимо программирования элементов при взаимодействии с ними можно также задавать поведение элементов просто при загрузке страницы или скролле. Для этого не должно быть выделено ни одного элемента, тогда в этом блоке появятся следующие свойства:

  • OnPageLoad - действие, которое запустится, как только загрузится страница. Пример - пролистывания у слайдера, анимация элементов.
  • OnWindowScroll - событие, которые сработает как только пользователь доскроллит до определенного маркера. Пример - анимация в лендингах, появление кнопки "наверх".

Примеры использования этих событий будут рассмотрены дальше в прототипе.

Shape

Позволяет изменить форму виджета используя готовые пресеты, а также с возможностью сделать свою форму.

Interaction styles

Имеет 4 значения:

  • MouseOver - promijenite objekt na lebdenju. Koristi se za označavanje veza, granica elementa.
  • MouseDown - kliknite na stavku. Istodobno, sam element podržava tu promjenu dok je gumb miša pritisnut.
  • Izabrano - promjena za odabranu vrijednost. Djeluje zajedno s promjenom vrijednosti u interakcijama.
  • Onemogućeno - slično u odabranoj mehanici, samo je semantičko značenje "onemogućeno".

bilješke

Omogućuje vam da ostavite komentare za svaku stavku. To može biti korisno kada trebate opisati rad widgeta, ali ne postoji mogućnost programiranja, ili to nije tako vizualno i potrebno ga je objasniti tekstom.

stil

Djelomično ponavlja funkcionalnost alatne trake stila, uz samo nekoliko značajki. S odabranim elementom možete urediti prored, kao i interne uvlake za tekst u spremniku. Ako nije odabrana nijedna stavka, pojavljuju se sljedeće opcije:

  • Postavite boju za sve stranice.
  • Izlijte sliku u pozadinu.
  • Učinite prototip crno-bijelim.
  • Nanesite rukom nacrtanu skicu na prototip.
  • Mogućnost postavljanja pozicioniranja (poravnanja stranice) prototipa u središtu stranice, a ne prema zadanim lijevim stranama.

obris

Ova alatna traka sadrži sve widgete koji se koriste na stranici. Kada kliknete na stavku na popisu, bit će označena u radnom prostoru. To će se područje najčešće koristiti za pretraživanje dinamičkih panela i njihovih država (država).

Hot Keys i LifeHacks

Postoje hotkeys za mnoge akcije u Axureu. No, daleko od svih njih je pogodan za pritisnite, jer morate koristiti dvije ruke, što je ponekad nije opravdano i lakše kliknuti mišem. Stoga će popis biti barem mali, ali testiran i preporučen za uporabu. Ovdje ću također uključiti neke tehnike koje pomažu ubrzati tijek rada.

  1. Pričvršćeni prostor omogućuje vam premještanje radnog prostora umjesto okomitog ili vodoravnog pomicanja.
  2. Ctrl + A, Ctrl + Z, Ctrl + X, Ctrl + C, Ctrl + V, Ctrl + B, F2 - standardna funkcionalnost, preporučuje se za korištenje.
  3. Kada je šifra učvršćena, widget možete pomicati duž radnog područja točno duž osi x i y.
  4. Pritiskom na Ctrl dok odabrani objekt kopira widget. Ako držite Shift dok držite kopirani objekt, on će ostati u skladu s izvornikom.
  5. Ctrl + G - grupiranje widgeta. Ctrl + Shift + G - uklanjanje grupiranja.
  6. F5 - način pregleda preglednika. Ubuduće možete jednostavno ažurirati karticu u pregledniku da biste vidjeli promjene.
  7. F6 - otvara prozor za objavljivanje prototipa na Axure poslužitelju.
  8. Nažalost, u Axureu nema ugrađene sposobnosti za procjenu udaljenosti između objekata, kao što je implementirano u Sketch iu novom Adobe XD. No, možete koristiti "štaka" u obliku pravilnog pravokutnika. Postupak je jednostavan, ali za svakog vatrogasca postoji video.
  9. Axure nudi pametne vodiče. To je potrebno za točno pozicioniranje objekata u odnosu na svaki drugi. Kada ih povučete, prikazuju se granice i središte drugih objekata (prema zadanim postavkama, u obliku tirkiznih linija). Prema tome, prilikom povlačenja, preporuča se kretanje do njih tako da je prototip glatka i jasna.
  1. Preporučuje se postavljanje položaja na sredini stranice. Stvar je ne samo u tome što izgleda ugodnije oku, nego iu pozicioniranju objekata. Ako su dinamičke ploče prikvačene na određeno mjesto na zaslonu, pojavit će se pomak ako je sadržaj stranice prema zadanim postavkama (lijevo).
  2. Dinamičke panele ili objekte koji će kasnije biti korišteni u programiranju interakcije treba smisleno imenovati. Inače će se željeni objekt teško naći na popisu.

Prototip glavne online trgovine (desktop).

Ulaz je završen i započela je rasprava o prototipu. Odabrana je internetska trgovina koja ima najrazličitije funkcionalne čipove koji se mogu prikazati, kao i odredišnu stranicu, čiji će elementi biti prikazani na glavnoj stranici. Važno je napomenuti da je ovaj prototip prvenstveno važan kako bi se prikazala funkcionalnost, kako funkcionira, a ne kao gotov proizvod. Stoga, kako bih se maksimalno udaljio od konačne aplikacije, odabrao sam temu prodaje bonsaija, dodajući malo smeća. Sukladno tome, uzmite glavni kao određeni skup elemenata za uporabu, a ne kao konačnu instrukciju na svojim projektima.

Svrha prototipa je pokazati funkcionalnost, stoga će nedostajati stranice poput "Kontakti", "Vijesti", "Članci", jer ove stranice u smislu funkcionalnosti ne mogu pokazati ništa novo.

šešir

Ograničenje se provodi pomoću čarobnjaka. Prethodno je opisano kako stvoriti majstora. U kapici je nekoliko elemenata koje vrijedi ostati detaljnije.

logo

U tome nema poteškoća, ali jedan životni hak je povezan s njom. Ako element koji mora biti aktivan (veza na stranicu ili određenu hover akciju, kliknite), ali sama se sastoji od nekoliko elemenata, na nju možete umetnuti prozirni spremnik. Dakle, u prototip implementiran logotip, kartica s relevantnim člancima.

meni

Donja donja crta je implementirana pomoću Inspector -> Properties -> Stilovi interakcije -> MouseOver alatna traka. U prozoru koji se pojavi, stavite kvačicu u podcrtano.

Skočni izbornik može se implementirati na različite načine. Ako je jednostavan (bez dodatnih skočnih prozora), možete koristiti gotov widget.

U slučaju online trgovine koja prodaje bonsai, to je teško. Mehanika je sljedeća:

  • Na prvoj razini postoji jedna dinamička ploča s dvije države (država). U prvom stanju - tekstualni widget "Imenik". U drugom stanju, isti widget, samo sa svim stavkama izbornika. Lebdeći nad elementom (OnMouseOver) pokreće prebacivanje u drugo stanje (Postavi stanje ploče -> odaberite dinamički panel -> State2 i "Ok"). Ako je odabir s dinamičke ploče poništen (OnMouseOut), prebacuje se na prvo stanje (Postavi stanje ploče -> odaberite dinamičku ploču -> Država2 i "U redu").
  • Unutar drugog stanja stvara se još jedna dinamička ploča koja je skrivena (skrivena). Unutar njih napravimo dvije države u obliku dvije kartice proizvoda s cijenom, imenom i slikom. Lebdenje nad imenom (OnMouseOver) uzrokovat će prijelaz u sljedeće stanje (SetPanelState -> odaberite dinamički panel -> odaberite Sljedeće). Možete napraviti tako da prijelaz na određeno stanje, odnosno, svako ime vezati svoju karticu. Da biste to učinili, umjesto sljedećeg, morate odabrati odgovarajuće stanje. Svakako označite "Prikaži ploču ako je skriveno".
Ako trebate programirati nekoliko tipičnih interakcija (na primjer, učinak na lebdenju), preporučuje se da najprije potpuno prilagodite jedan objekt, a zatim ga pomnožite. To će ubrzati rad.

Povratni poziv

Narudžba za povratni poziv sastoji se od okidača, u našem slučaju, gumba i najviše modela prozora za povratne pozive.

Gumb je napravljen kroz normalan spremnik, na koji primjenjujemo MouseOver interakcijskih stilova. Efekt lebdenja može se prikazati na bilo koji način, ovisno o vještini dizajnera. Ako to nije dovoljno, možete jednostavno promijeniti nijanse sive boje na gumbu. Primjer mijenja ispunu, boju fonta i boju obruba spremnika.

Izrađujemo modalni prozor pomoću dinamičkog panela s jednim stanjem i odmah ga skrivamo (Hidden). Prije nego što pređemo na sadržaj, potrebno je predvidjeti položaj modalnog prozora točno na sredini zaslona. Naravno, možete ručno poravnati, ali zbog činjenice da različiti korisnici imaju različite visine i širine zaslona, ​​oni se možda neće pojaviti u sredini. Stoga činimo sljedeće:

  • Desnom tipkom miša kliknite dinamičku ploču.
  • Odaberite Pin to Browser.
  • Stavite kvačicu "Prikvači u prozor preglednika".
  • Odaberite Centar i sredina, a zatim kliknite "U redu".

Što je lijepo, nakon toga se dinamički panel može ukloniti bilo gdje, ai dalje će se pojavljivati ​​točno u sredini.

Izgled modalnog prozora obavlja se na sljedeći način:

  • Odaberite gumb okidača.
  • U interakciji odaberite OnClick.
  • U bloku Widgets odaberite Show / Hide.
  • Pronađite željeni widget.
  • Parametar Vidljivost se prevodi u Prikaži.
  • U više opcija odaberite tretirati kao lightbox i odaberite nešto sivo i prozirno kao pozadinu.

Modalni prozor sastoji se od dva widgeta Input Field (koji se nazivaju Polje za unos (odabrano)), gumb "Naruči", križ za zatvaranje prozora i dvije oznake koje će se pojaviti kada se obrazac šalje ispravno i pogrešno.

Križ je obična ikona iz skupa ikona. Akcija - skrivanje modalnog prozora kada kliknete na križ. To se radi na isti način kao i izgled modalnog prozora, samo u parametru Vidljivost prevedemo radio gumb u poziciju Sakrij.

U obrascu za povratni poziv programirana je jednostavna provjera valjanosti za punjenje. Ako u polje "telefon" ne unesete nijedan znak, pojavit će se poruka: "Ne zaboravite navesti broj telefona!". Ako unesete bilo koji znak, poruka "Prijava je uspješno poslana! Naši stručnjaci će Vas uskoro kontaktirati!"

Za polja za unos možete postaviti tekst teksta nagovještaj - savjet s uputama što unijeti u ovo polje.

Provjera valjanosti programirana je na sljedeći način:

  • Stvaramo dva bloka s tekstom uspješnog slanja i neuspješnim. Prevedite na Skriveni položaj.
  • Na okidaču postavite radnju OnClick.
  • Na samom vrhu prozora odaberite Uredi stanje.
  • U prikazanom prozoru upišite: tekst na widgetu, widget polja za unos s telefonom, jednako, vrijednost, prazna vrijednost. U polju Opis potrebno je napisati sljedeće: "ako je tekst na" Naziv widgeta polja za unos s telefonom "jednako je" ". Kliknite U redu.
  • Odaberite Prikaži. Možete dodati animaciju, na primjer, samo izblijediti (izgled) za 1 milisekundu.
  • Dodaj Pričekajte u lijevom bloku, možete staviti 2 sekunde. Koristi se za brojanje, na primjer, čekanje između akcija.
  • Stavite Sakrij i odaberite widget s upozorenjem da trebate ispuniti podatke.

Dakle, ako je polje za unos s telefonskim brojem prazno, kada kliknete na gumb "Naruči" pojavit će se upozorenje da ga morate ispuniti. Nestati za 2 sekunde.

Poruka o uspjehu konfigurirana je putem drugog uvjeta (Slučaj):

  • U interakciji gumba "Naruči" kliknite OnClick, Slučaj 2 se kreira automatski.
  • Prikazujemo tekst uz uspješno slanje kroz Prikaži.
  • Zatim pričekajte (Pričekajte), na primjer, sekunde 3.
  • I sakrij (sakrij) modalni prozor.

Ispada da, ako prvi uvjet nije zadovoljen (tj. Postoji neka vrijednost u polju za unos s telefonskim brojem), tada je zadovoljen drugi uvjet. Pojavljuje se poruka da će stručnjaci uskoro kontaktirati, a nakon 3 sekunde modalni prozor će nestati.

Gumb Gore

Gumb "gore" koristi se za pomicanje do prvog zaslona. Dopustite mi da vas podsjetim da smo još uvijek u čarobnjaku "Cap". Primjenjujemo ga na sljedeći način:

  • U radni prostor dodajte ikonu u obliku strelice ili, na primjer, koristite trokut spremnika.
  • Prevodimo u dinamički panel i sakrijemo ga (to je ploča, a ne sam element).
  • Zatim popravljamo ploču na jednom mjestu u pregledniku. Desnom tipkom miša kliknite ploču -> Prikvači u preglednik. U prozoru odaberite koju ćete stranu pričvrstiti. Primjer se koristi s desne i donje strane (Desno i Donje) s uvlačenjem od 30 piksela.

Sada trebate predvidjeti da se sam gumb pojavljuje prilikom pomicanja do određene točke na stranici. Kliknite na prazno mjesto u radnom prostoru -> u Interactions odaberite OnWindowScroll -> na samom vrhu prozora kliknite na Edit Condition -> U uvjetima odaberite vrijednost -> kliknite na fx -> u prozoru koji se pojavi kliknite na Insert Variable of Function -> odaberite funkciju u Windowu Window.scrollY i kliknite "Ok" -> sljedeće vrijednosti bi trebale biti veće od i vrijednost -> U zadnjem polju unosa navedite broj piksela koji se pomiče prema gore. Primjer koristi 600 px. Kao rezultat toga, u polje Opis treba upisati sljedeće: ako je "[[Window.scrollY]]" veći od "600". Sada morate sami odabrati akciju. U Widgetima odaberite Show / Hide -> kliknite na popisu na dinamičkoj ploči, gumbe prema gore -> u opcijama, odaberite Bring to front.

Pojavit će se gumb, sada moramo učiniti da nestane kada budemo prebačeni na prvi zaslon. Da biste to učinili, još jednom kliknite na Interactions on OnWindowScroll -> Case 2 će se pojaviti, uz uvjet Else Ako je True -> u Widgetima odaberite Show / Hide -> potražite gumb gore i odaberite sakrij.

Po želji, možete napraviti učinak kada prelazite gumb gore, koristeći dvije države (država), OnMouseEnter i OnMouseOver.

Pozadina pune širine

Mnogi elementi na licu mjesta protežu se cijelom širinom zaslona, ​​uključujući i kapu. To se može učiniti na dva načina: kroz običan spremnik i OnPageLoad i uz pomoć dinamičkih panela. Za kapicu odaberite drugu opciju.

  • Prevodimo bilo koji kontejner u dinamičku ploču, ostavljajući je praznom (uklanjanje spremnika ili prozračivanje).
  • U Svojstva dinamičke ploče nalazimo rekord 100% Wide (samo preglednik) i stavimo kvačicu.
  • U Style u boji straga postavljamo boju, u slučaju našeg prototipa je bijela ili #FFFFFF.

Sada će se panel automatski proširiti na bilo koju razlučivost.

Fiksni izbornik

Fiksni izbornik je kada, kada se pomičete prema dolje, dio navigacijskih elemenata iz zaglavlja ostane na samom vrhu zaslona.

To se radi na sljedeći način:

  • Za početak, utvrđujemo koji će elementi biti u fiksnoj veličini. U primjeru je to manja verzija logotipa, izbornik bez pop-up elemenata i gumb narudžbe poziva.
  • Zatim kopirajte odabrane elemente i prevedite ih u zasebni dinamički panel.
  • Skrivena (dinamička) ploča.
  • Drugi poklopci supstrata čine cijelu širinu, kao u prethodnom primjeru.
  • Desnom tipkom miša kliknite ploču -> Prikvači u preglednik -> U Horizontal Pin, odaberite Centar, u okomitom pin - vrhu. I u redu.
  • Sada morate postaviti izgled fiksne kapice. To se radi po analogiji s gumbom gore. Da biste to učinili, na stranici Interakcije u OnWindowScroll kreiramo treći slučaj (desnom tipkom miša kliknite OnWindowScroll -> Dodaj slučaj).
  • Dodajte uvjet. U uvjetima, odaberite vrijednost -> kliknite na fx -> u prozoru koji se pojavi, kliknite na Umetni varijablu funkcije -> Odaberite funkciju Window.scrollY u prozoru i kliknite "OK" -> sljedeće vrijednosti trebaju biti veće od i vrijednosti -> U posljednjem polju ulaz koji navodimo kroz broj piksela koji se pomicanjem pojavljuje. Navedite visinu kapice - 120px. Kao rezultat toga, u polje Opis treba upisati sljedeće: ako je "[[Window.scrollY]]" veći od "120". Sada morate sami odabrati akciju. U Widgetima odaberite Show / Hide -> kliknite na popisu na dinamičkoj ploči fiksnog zaglavlja -> u opcijama, odaberite Bring to front. Za glatku pojavu kape možete odrediti animaciju za slajd dolje.
  • Također je važno promijeniti uvjet za pokretanje trećeg slučaja, budući da je zadana vrijednost Else if true, tj. Prije toga, uvjet If je već postavljen za gumb gore. Stoga sada trebate kliknuti desnom tipkom miša na slučaj 3 i odabrati Toggle if / if else.
  • Zatim postavite uvjet 4 Slučaj (Dodaj slučaj), gdje će fiksno zaglavlje biti skriveno ako pomičemo gore i pređemo granicu od 120 piksela. U ovom slučaju, dovoljno je sakriti fiksni zaglavlje (Sakrij).

Prvi zaslon ili kako napraviti paralaksu i rastegnuti sliku na širinu.

Osim glavne slike, na koju želimo primijeniti efekt paralakse i istegnuti je, postoji strelica, kada se klikne, ona se pomiče na drugi zaslon. To čini po analogiji s gumbom gore.

  • Imenujte element (možete stvoriti transparentnu točku kreiranu unaprijed) na koju treba izvršiti svitak.
  • Odaberite strelicu, u Properties kliknite na OnClick.
  • Na popisu Actions odaberite Scroll to Widget (Anchor link), a zatim pronađite naš element, označite Scroll vertikalno. Također možete odabrati animaciju, kao što je Swing.

Rastegnite sliku na širinu

Ranije smo dinamičke panele rastezali po cijeloj širini zaslona, ​​koristeći samo ispunu. Pokazat ću vam kako rastegnuti sliku. Za ovo:

  • Stvorite dinamički panel na temelju bilo kojeg elementa, a zatim ga izbrišite i rasporedite ploču na procijenjenu veličinu slike.
  • U Svojstva dinamičke ploče nalazimo rekord 100% Wide (samo preglednik) i stavimo kvačicu.
  • U odjeljku Stil nalazimo Natrag slika -> kliknite uvoz i odabiremo sliku na računalu.
  • U padajućem izborniku, gdje je odabrano ponavljanje, odaberite Stretch to Cover.

Primjer pokazuje da sama dinamička ploča ima širinu od 300 px, dok se proteže na cijelu širinu zaslona.

Kako napraviti efekt paralakse

Efekt paralakse (na primjer, vertikalno) stvara se usporavanjem pomicanja nekih elemenata na pozadini drugih. Postavlja se na sljedeći način:

  • Na stranici Interakcije (tj. Kada nije odabran niti jedan element) pomoću funkcije OnWindowScroll.
  • U Widgetima odaberite Move -> kliknite na željeni element (u našem slučaju to je dinamička ploča sa slikom bonsai) -> u svojstvima, treba odabrati Move to i u polje za unos y kliknuti na fx.
  • Kao u prethodnom primjeru s gumbom gore, odaberite Window.scrollY -> tada ćete morati prilagoditi formulu rukama, dodajući u polje za unos sljedeće vrijednosti: [[Window.scrollY * 0.25]]. Vrijednost od 0,25 znači kašnjenje s kojim će se element pomaknuti. Može se prilagoditi vašem ukusu.

Druge prednosti zaslona

Dalje, provodimo još jedan efekt prilikom pomicanja, naime, lijep izgled prednosti. Taj element kreativnosti nije bio dovoljan, pa sam ih nazvao prema njihovom položaju. To su samo dva tekstualna widgeta s tekstom naslova i ribe, kao i ikona. Ako je pri izradi prototipa potrebno osigurati taj sadržaj, onda to radimo namjernije, a ne primjerom.

Algoritam izgleda je otprilike isti kao i kod gumba prema gore. Glavna stvar ovdje je pogoditi kada dospiju do daljine. Sama pojava može se ostvariti kroz Pokret, ali je primjer olakšan. Elementi se ne pomiču nigdje, pojavljuju se (Show) s animacijom (Animate) klizanjem ulijevo (slajd lijevo), gore (slajd gore) i desno (slajd desno).

Treća polovica zaslona ili vrste robe

Цель данного блока показать, какую можно сделать анимацию при наведении на карточку товара или категорию, как на примере. Для этого, как ранее говорилось достаточно создать один элемент, заранее подогнанным по размеру. На примере, его ширина составляет 300 px, т. е. на экране уместиться ровно 4 элемента.

Итак, цель анимации сделать так, чтобы при наведении на элемент выдвигалась полупрозрачная плашка с информацией, а при снятии выделения она отъезжала. Za ovo:

  • Берем контейнер заданного размера (или подходящее изображение, как на примере) и переводим в динамическую панель (назовем ее "Бонсай в сортах").
  • Внутри динамической панели с изображением создаем контейнер с прозрачностью (29 на примере), добавляем текстовые блоки с описанием (белого цвета для контрастности). Потом все это переводим в динамическую панель (назовем "Бонсай в сортах слайд"). Расположим его сразу после основного изображения. Таким образом, через окошко динамической панели "Бонсай в сортах" в 300 на 300 пикселей, динамическая панель ("Бонсай в сортах слайд"), которая находится внутри, не будет видна.
  • Далее, делаем так, что при наведении на динамическую панель "Бонсай в сортах" передвигалась панель "Бонсай в сортах слайд". Da biste to učinili, odaberite panel "Bonsai u varijantama", odaberite u Interactions OnMouseEnter.
  • U Widgetima odaberite Premjesti, odaberite "Bonsai u varijantama slajdova" u popisu elemenata iu uvjetima u kojima smo y postavili -300 (kretanje po y osi minus 300 piksela, tj. Gore). Na potezu bi trebala biti vrijednost od. Možete dodati animaciju, primjerice Swing.
  • Da bi ploča nestala, postupak je identičan, samo morate odabrati OnMouseOut, a vrijednost mora biti pozitivna.

Kada je jedan element spreman, može se pomnožiti s četiri. I tamo, ako je potrebno, u svakoj promjeni slike i opis.

Četvrti zaslon ili akcija dionice

U ovom bloku ima huliganstva i besmislenih ukrasa.

Obrnuti izvještaj

S tim elementima, obično se ne isplati gnjaviti, dovoljno je ponekad označiti sliku ili blok. Ali ako postoji želja, možete provesti promjenu minuta i sekundi. Jedina negativna stvar je da ona nije toliko tehnološki napredna kao što se može činiti (ako majstori Axure pročitaju ovaj članak i koji to znaju napraviti kratkom formulom - pišu, jer to znanje nije bilo u buržoaziji).

  • Izrađujemo nekoliko spremnika za svaku znamenku, koje nazivamo kako ne bismo bili zbunjeni (primjerice, "Jedinice, sekunde", "Deset sekundi").
  • Na stranici Interakcija (zapamtite, uklonite odabir iz elementa) kliknite OnPageLoad.
  • U Widgetima, odaberite Set Text i u elementima odaberite "Units of seconds" i postavite vrijednost na 8.
  • U Widgetima uzimamo Wait i postavljamo vrijednost na 1000 ms (to jest, 1 sekundu).
  • U Widgetima, odaberite Set Text i u elementima odaberite "Units of seconds" i postavite vrijednost na 7.
  • U Widget-ovima uzimamo Wait, vrijednost postavljamo na 1000 ms.

Ponovite onoliko puta koliko niste zadovoljni rezultatom. Nakon prebrojavanja na 10, mijenjamo desetke sekundi, a nakon toga brojimo do 60 minuta. U isto vrijeme nije potrebno svaki put odabrati elemente u widgetima pomoću olovaka. U polju Organiziraj akcije možete ih kopirati i zalijepiti.

Nagibni elementi

Da biste zakrenuli element, samo pomaknite pokazivač u njegov kut i držite tipku Ctrl. Zatim okrenite miš. Programeri nisu izmislili bicikl i implementirali ga kao u svim grafičkim urednicima.

Odmah nakon brojača nalazi se element koji stalno mijenja svoj položaj. Njegova implementacija slična je prethodnom primjeru s vremenskim uređajem, s jedinom razlikom da je implementacija jednostavnija:

  • Uzmite tekstualni widget, postavite vrijednost na "1000 rubalja", nagnite se u jednom smjeru.
  • Prevodimo ga u dinamički panel i kopiramo prvo stanje (State).
  • Drugo stanje je nagnuto u drugom smjeru.
  • Na stranici Interakcije odaberite OnPageLoad.
  • U Widgeti odaberite Set Panel State i u stupcu Select state odaberite Select. Označavamo omot od zadnjeg do prvog (koristeći ovo prelazimo proces). Također, stavite kvačicu u Repeat svaki. Broj u milisekundama označava brzinu kojom će se država zamijeniti. Također možete dodati animaciju. I kliknite "U redu".

Na taj način možete implementirati bilo koju animaciju. Primjerice, napravila sam animaciju zeca i, što je prikladnije za posao, animaciju za učitavanje.

Cut Out Effect

Drugi životni hak je nametanje kontejnera prilagođenog na drugi objekt, kao što je slika. Da biste to učinili, uzmite spremnik, u Properties -> Select shape -> Convert to custom shape. A onda klik na elemente ili dodavanje novih će dati bilo koji oblik.

Peti ekran ili kako uploadati Youtube video na prototip

Možete jednostavno napraviti video u prototipu. U zadanoj knjižnici morate pronaći widget Inline Frame. Objavite ga na radnom prostoru onako kako želite da se videozapis smjesti. Zatim kliknite na tu stavku. U prikazanoj vezi odaberite vanjski url ili datoteku iu polje za unos unesite URL obrasca //www.youtube.com/embed/b5dexpeO-l4. Možete ga dobiti na usluzi YouTube klikom na gumb "dijeli" ispod videozapisa i odabirom html koda. Mi ignoriramo sam kod, kopiramo samo URL iz gore navedenog primjera.

Šesti zaslon ili kako napraviti klizač u Axureu

Dosegnuo je tipičan element koji vjerojatno već znate. Ali ako dođete ovdje samo zbog toga, ponavljam od samog početka.

  • Uzmemo kontejner ili bilo koji drugi objekt koji može ukazivati ​​na sadržaj klizača.
  • Prevedemo ga u dinamički panel.
  • Kopiranje ili dodavanje stanja (država). Primjerice, kopiran je uobičajeni spremnik na kojem je napisan "Slide 1".
  • Dodajte stavke koje mogu biti okidač za prebacivanje klizača. Možete ga uključiti automatski, koristeći primjer koji je prethodno opisan pomoću stranice Interactions i OnPageLoad. Ovdje koristimo ikone strelica, stavljajući ih lijevo i desno.
  • Na ikoni u svojstvima koju objesimo OnClick. U widgetima na lijevoj strani odaberite Postavi stanje ploče. Na popisu se nalazi traženi dinamički klizač. U stanju Odaberi, na gumbu s desne strane odaberite Sljedeće, na lijevom gumbu - Prethodni i označite Prelomi od prvog do zadnjeg. Animacija se vrši na gumbu lijevo, lijevo, desno.

Sedmi i osmi ekran ili informacije o tvrtki i nedavni članci

Tipični objekti koji se mogu postaviti kako želite (prirodno prateći logiku i dimenzionalnu mrežu). Blok "Novi materijali na našem blogu" provodi se kroz prozirni spremnik koji se prikazuje naprijed (Prednji). Rub ruba je naveden preko MouseOver.

Deveti zaslon ili kako proći

Kartica se može odrediti na nekoliko načina:

  1. Kontejner potpisom je kartica.
  2. Snimak zaslona iz Google karata ili Yandex.Maps.
  3. Umetanjem pune interaktivne karte u prototip.

Kako to učiniti prvi u prva dva slučaja, vi sami možete shvatiti, ali kako provesti treću opciju, morate razmotriti detaljnije.

Prvo morate koristiti isti zadani widget koji smo koristili za umetanje videozapisa s usluge YouTube - Inline Frame. Stavite ga na radno područje, jer će to biti prikladno. Zatim s Yandex.Mapom morate uzeti kôd koji već morate postaviti po referenci u samom widgetu:

  • Dvaput kliknite na okvir umetnutog elementa
  • Umetni vezu veze na vanjski URL ili datoteku.

Pogledajmo sada kako dobiti kod iz Yandex.Maps:

  • Idite na //yandex.ru/maps/.
  • Iz kontakata vozimo željenu adresu.
  • U donjem lijevom kutu pored alata za ispis i povratne informacije nalazimo gumb "share" i kliknemo na njega.
  • Iz polja "insert code to site" kopiramo samo dio URL-a koji izgleda ovako: //yandex.ru/map-widget/v1/-/CBQX48GkdD

Sada moramo proširiti kartu na punu širinu zaslona. Nemoguće je implementirati putem dinamičkog panela, morate koristiti drugu metodu:

  • Na stranici Interakcije odaberite OnPageLoad.
  • U Akcijama odaberite Postavi veličinu i kliknite na element Inline Frame.
  • U širini kliknite na fx.
  • Kliknite na Umetni varijablu funkcije.
  • S popisa odaberite Window.width i kliknite "OK".
  • Na padajućem popisu Sidro odaberite Top ili Center.

podrum

Elementi u podrumu mogu se podijeliti u dva bloka uvjetno - pretplatnički obrazac i vrsta dodatnih informacija. Ovo posljednje nema smisla posebno opisivati, ali na obrascu za pretplatu vrijedi se detaljnije zaustaviti, jer je to malo komplicirana verzija naloga za povratni poziv.

U obrascu za povratni poziv, naznačili smo da je, ako je polje prazno, popunjeno netočno. S obrascem pretplate možete naznačiti prisutnost simbola @.

  • Stvaramo dva bloka s tekstom uspješnog slanja i neuspješnim. Prevedite na Skriveni položaj.
  • Na gumb okidača postavljamo OnClick akciju.
  • Na samom vrhu prozora odaberite Uredi stanje.
  • U prozoru koji se pojavi upišite: text on widget, polja za unos widgeta iz e-pošte, ne sadrži vrijednost, @. Polje Opis treba napisati sljedeće ako tekst na e-pošti ne sadrži "@". Kliknite U redu.
  • Odaberite Prikaži. Možete dodati animaciju, na primjer, samo izblijediti (izgled) za 1 milisekundu.
  • Dodaj Pričekajte u lijevom bloku, možete staviti 2 sekunde. Koristi se za brojanje, na primjer, čekanje između akcija.
  • Stavite Sakrij i odaberite widget s upozorenjem da trebate ispuniti podatke.
  • Dodajte drugi slučaj (Slučaj).
  • Odaberite Prikaži / Sakrij.
  • Kliknite na tekstualni widget s uspješnim dizajnom.
  • Odaberite Pričekajte i postavite vrijednost na 2.000.
  • Sakrij poruku o uspješnom slanju putem opcije Hide.

zaključak

Kao što je spomenuto na početku, ovo je samo prvi dio. U budućim člancima bit će katalog, kartica proizvoda, osobni račun i druge dozvole. Također možete ostaviti u komentarima pitanja o provedbi elemenata - možda ću o njima govoriti u sljedećim člancima.

Kao što sam obećao, nudim besplatne knjižnice elemenata, kao i gotov prototip, koji smo razmatrali u ovom članku. Za to koristimo uslugu koja će pružiti vezu za dijeljenje na društvenoj mreži.

Preuzmite knjižnice (elemente i ikone) i gotov prototip Axure. kak-sdelat-prototip-v-axure-RP-esli-nichego-v-eTOM-ne-ponimaesh
#
UsabilityInstrumentsWeb razvoj

Pogledajte videozapis: Create a Social Media App - Design & Prototype Adobe Xd Tutorial (Rujan 2019).

Ostavite Komentar