Ako vyrobiť prototyp v Axure RP, ak nič nerozumiete

Axure RP je najznámejší a najpopulárnejší prototypový softvér pre webové stránky a aplikácie. Dostatočne hlboké, aby sa zložité prvky, zatiaľ čo je dostatočne svetlo, takže po desiatich minútach drotenie v rozhraní pripraviť rozloženie. Samozrejme, že je ďaleko od jediného - existuje mnoho ďalších spôsobov, ako vytvoriť prototyp.

Jednou z hlavných charakteristík Axure (v porovnaní s konkurenciou) je schopnosť naprogramovať správanie sa tlačidiel, kontajnerov, miniaplikácií. Na základe toho môže byť výsledný prototyp vytvorený tak, aby fungoval ako plnohodnotná webová stránka / aplikácia.

Vyhlásenie: toto je môj prvý článok. Neviem, ako písať, ale tam sú nahromadené skúsenosti. Preto na základe tohto článku, Dúfam, že materiál bude užitočný. Hyde netvrdí konečnú pravdu - niektoré rozhodnutia a myšlienky sú subjektívne, aj keď sú testované na mnohých projektoch.

Pokiaľ ide o štruktúru príručky, bude to takto:

Článok je pripojený k uvažovanému prototypu vo formáte .rp, ktorý je možné stiahnuť ako príklad. K prototypu sú pripojené použité knižnice s ikonami, hotové miniaplikácie.

Uvažovaný prototyp bude umiestnený na linke //fys0bf.axshare.com.

Pre každý uvažovaný príklad je pripojená video inštrukcia. Takže by ste nemali mať žiadne problémy, ako v niektorých učebniciach dizajnu.

Trochu o UX / UI

Stručne povedané, UX (User Experience) je skúsenosť, ako užívateľ vníma rozhranie, aké emócie zažívajú pri interakcii s ním. UI (užívateľské rozhranie) - to je to, čo vidí, čo je v interakcii.

Rozhranie môže byť čokoľvek: kladivo, kliešte, chladnička, palubná doska lietadla, pomalý varič, atď. Prvé tri nespôsobujú otázky - môžete ich použiť bez toho, aby ste si mysleli, budete ho musieť vyzdvihnúť, ale nemôžete zvládnuť lietadlo profesionálny pilot.

Ak nakreslíte rovnobežku kladivom, UI kladiva je rukoväť, kladivo a ponožka. UX kladivo je to, čo človek cíti pri zatĺkaní klinec.

Pri navrhovaní rozhrania by sa človek mal snažiť o to, aby bol jednoduchý ako rozhranie kladiva alebo rýpadla. Akákoľvek komplikácia spôsobí, že užívatelia namáhajú hlavu a nepáči sa im to.

Najlepšie rozhranie je, keď si užívatelia ani nevšimnú, čo to je, ale jednoducho získajú to, čo potrebujú, bez toho, aby sa cítili nepohodlne - objednajte si, prečítajte si článok, kúpte si lístok atď.

Ako povedal Steve Jobs: "Design nie je to, ako zariadenie vyzerá, ale ako to funguje." Hlavným cieľom je preto pracovať tak, aby používatelia v procese neváhali. O prítomnosti rozhrania sa zvyčajne pamätá v dvoch prípadoch:

- Je nepohodlný. Malé tlačidlá, musíte "cieľ" kliknúť. Riadkovanie je príliš krátke, musíte sa pozerať. Na vstupnej stránke je veľa zbytočných informácií a musí sa nájsť aj prvok konverzie. No, rozumieš.

- Professional. Kto pracuje s rozhraniami alebo sa zaujíma o túto tému, bude venovať pozornosť tomu, ako dobre sa to robí.

Pre tých, ktorí sú v nádrži: kde je prototyp internetového obchodu a také vysoké predstavy o tom, čo cíti užívateľ? A okrem toho. Pohodlie budúceho rozhrania by sa malo premyslieť na úrovni kostry, na cestách prechodu osoby cez stránku (mapovanie cesty zákazníka). Prirodzene, na úrovni dizajnu bude veľa vecí upravených, pridaných farieb, obrázkov. Ale základňa je zachovaná a je položená práve vo fáze tvorby prototypu.

Vo všeobecnosti môžeme formulovať tieto "dobrodincov":

- Jednoduchosť. Nesnažte sa, aby to bolo komplikovanejšie, ťažšie. Zjednodušte, skráťte.

- Šablóny. Nesnažte sa myslieť na bicykel, nový prvok rozhrania, špeciálnu funkciu, ktorá sa nikde nenachádza. Čím typickejšie prvky na mieste na ich miestach, tým väčšia je šanca, že užívateľ pochopí, na čo sú. Toto pravidlo je samozrejme vhodné pri vytváraní niečoho typického. Ak vyvíjate novú službu, alebo rozhranie na novej platforme (napríklad pre okuliare virtuálnej reality), musíte experimentovať.

- Cieľové publikum. Nezáleží na tom, aké to môže znieť, musíte pochopiť, pre ktoré Stredné Áziu je rozhranie určené. Vek, pohlavie, vzdelanie, rozsah, úroveň bohatstva. Toto by sa malo zohľadniť pri vytváraní prototypu. Napríklad, ak je vaša vstupná stránka zameraná na predaj veľmi drahých hodiniek, potom nemôžete použiť kričiace slogany o zľavách, obrovské tlačidlo CTA na každej obrazovke alebo blikajúce počítadlo, ktoré ponechalo 10 minút na objednanie za výhodnú cenu. V prípade, že LP predstavuje zárobky na internete v systéme sieťového marketingu (magické doplnky stravy, ktoré vám umožnia hovoriť so zosnulou babičkou), potom takéto prvky budú viac než vhodné. Poviem ešte viac: ich použitie pomôže eliminovať cieľovú liečbu na úrovni rozhrania.

- Súťažiaci. Niektorí slávni ľudia povedali: „Dobrí umelci kopírujú, skvelí umelci kradnú.“ Skutočne ukradnite nápady pri navrhovaní rozhraní od konkurentov. Konkurenti môžu byť priami aj nepriami. Tiež odporúčam špehovanie na dobré riešenia na zahraničných stránkach.

Účelom tohto materiálu je ukázať, ako vytvoriť prototyp v Axure RP. Preto nebudú ďalej vznesené žiadne ďalšie otázky, prečo je tento prvok umiestnený tak odlišne.

Princípy a vlastnosti prototypu v Axure

Skôr ako začnete navrhovať rozhranie, je dôležité pochopiť, na aký účel ho plánujete používať. Závisí to od toho, do akej miery by sa táto príručka mala používať ako priamy návod:

- Ak urobíte prototyp stránky, aby sa neskôr dať na dizajn a potom pripojiť k technickej úlohe - to je pre takú schému, že sprievodca je vypočítaná.

- Ak ste dizajnér, zákazník (a máte produktovú víziu a potrebujete to sprostredkovať) alebo potrebujete pripraviť pracovný program pre ukážku - môžete pridať viac obrázkov, obťažovať sa hlbokým programovaním prvkov, hrať s farbou. Odporúča sa tiež vytvoriť adaptívnu verziu v rámci jednej stránky.

Vo všeobecnosti boli požiadavky na konštrukciu prototypu formulované už dávno v tomto materiáli. Prenesiem tie najdôležitejšie a najrelevantnejšie a doplním z praxe:

  • Všetky prvky (klobúk, suterén) sú vytvorené prostredníctvom pána.
  • Nenechajte preskočiť s štýlmi, fonty. Ide o titulky, hlavný text.
  • Všetky prvky, v ktorých bude interaktivita (posuvník, bannery, rozbaľovacie zoznamy atď.), Budú implementované prostredníctvom interakcií. To je potrebné na vizuálne pochopenie, ktoré prvky sú statické a ktoré nie.
  • Ideálny prototyp musí byť prepojený, aby bolo jasné, kde dochádza k prechodu pri kliknutí na prvok. Textové odkazy sú podčiarknuté, pseudo odkazy sú označené bodkovanou čiarou.
  • Prototyp je vyrobený pod typickými stránkami. Napríklad internetový obchod je: domov, katalóg, produktová karta, kontakty, stránka s jednoduchým textom (platba, doručenie, o spoločnosti), osobný účet, platobné kroky. V závislosti od objemu a požiadaviek je možné pridať FAQ, články, kontakty v rôznych mestách atď.
  • Prototyp by mal byť vyrobený na rozmerovej mriežke.
  • Ak už existuje pripravený text pre prototyp, musíte ho použiť. Je povolené používať text rýb (Lorem Ipsum), ale musíte pochopiť, koľko textu bude mať text na konci.
  • Nadpisy, text v kontextových oknách, položky menu - by mali byť zmysluplné. Aj keď sa neskôr počas editačnej fázy zmení, môžete napísať "pracovný" názov, ktorý vyjadruje význam.
  • Všetko by malo byť veľmi schematické, bez farebných prvkov. Existujú však výnimky. Na demonštráciu výsledku blízkeho konečnému typu zákazníkovi (manažment, kolegovia, testeri) niekedy dáva zmysel pridávať plnofarebné obrázky, logá a farebné riešenia.
  • Všetky interaktívne prvky, stránky, majstri, niektoré objekty by mali byť zmysluplne pomenované.
  • Odporúča sa uzavrieť prototypy heslom. Štandardne sú k dispozícii jednoducho priamym odkazom na formulár 23oh42.axshare.com.
  • Je potrebné vypracovať hierarchiu na úrovni stránky, aby bolo viditeľné vnorenie.
  • Pre každé rozlíšenie sa odporúča vytvoriť samostatnú stránku: to pomôže vyhnúť sa nejasnostiam pri zostavovaní vo všetkých ďalších fázach: návrh, zostavenie TK, rozloženie, programovanie. Každé povolenie na samostatné priečinky.
  • Môžete použiť úvodnú obrazovku, na ktorej bude napísané, že pre projekt, verziu projektu, kto robí prototyp a odkazy na základné povolenia. Táto položka je nepovinná.

Axure má svoje vlastné „žetóny“, ktoré ho odlišujú od konkurentov, tu je ich neúplná množina:

  • Prototypy sú postavené na základe základných prvkov, ako v konštrukte. Prvky sú následne kombinované do knižníc. Môžu to byť ikony, textové polia, tlačidlá, vybrané fonty, ako aj zložité objekty s mnohými dynamickými panelmi.
  • Väčšina základných prvkov sú obdĺžnikové nádoby. Dokonca aj text alebo záhlavia rýb vyzerajú ako kontajner s priehľadným pozadím s zatiahnutým okrajom. Rovnakým spôsobom môžete v ľubovoľnom kontajneri umiestniť text a ľubovoľne ho naformátovať.
  • Dynamické panely. Na vytvorenie komplexných interaktívnych prvkov budete musieť použiť dynamické panely. Ide o objekt alebo skupinu objektov, ktoré sa prenášajú do samostatnej nekonečnej oblasti, v ktorej môžete tiež vytvoriť nekonečný počet pracovných oblastí, stavov (stavov) na rovnakej úrovni a na ďalšej úrovni hniezdenia. Túto schému najlepšie ilustruje sen vo filme "Začiatok". Dynamické panely samotné môžu byť skryté, presunuté, zmenené na stránkach. S ich pomocou sú implementované karty, modálne kontextové okná, komplexné efekty vznášania, načítania stránok atď.
  • Master. Ako už bolo uvedené, pán nie je len zaujímavou vlastnosťou, ale aj životne dôležitou podmienkou. S ním môžete implementovať prvky, ktoré sa nezmenia na všetkých stránkach: hlavičky, suterénu, predplatného, ​​produktovej karty v zozname. Master je v podstate dynamický panel, len má samostatný pracovný priestor (štandardne v ľavom dolnom rohu) a funkciu "pridať / odstrániť na všetkých stránkach". Vynára sa otázka, aký je problém jednoducho kopírovať prvok na každú novú stránku? Takže, ak sa prototyp skladá z 2-3 strán a nemôžete sa obťažovať s pánom. Ale ak stránky 20, a v procese práce, musíte vykonať zmeny end-to-end element, budete musieť vykonať zmeny na všetkých stránkach, čo je veľmi nepohodlné.

Tabuľka veľkostí

Rozmerová mriežka je navrhnutá tak, aby vytvorila nejakú organizáciu. Je to ako porovnávanie listov albumu A4 a grafického papiera: kreslenie môžete kresliť na prázdny hárok, ale oveľa jednoduchšie je implementovať ho pomocou značkovania.

Prototyp bude používať 16-stĺpcovú mriežku pre šírku obrazovky 1280 pixelov.

Pri výpočte veľkosti mriežky sa odporúča použiť službu gridcalculator.dk.

Predvoleným dokumentom chýba raslinovka a sprievodcovia. Preto pred začatím práce na prototype ho musíte vytvoriť. Na to potrebujete:

  • Kliknite pravým tlačidlom myši na prázdne miesto v pracovnom priestore.
  • Vyberte položku Mriežka a vodítka → Vytvoriť vodítka.
  • Potom si môžete vybrať z predvolieb alebo si nastaviť vlastné.

Odporúča sa pripevniť vodiace lišty tak, aby sa počas práce nepohybovali náhodne. Ak to chcete urobiť, kliknite pravým tlačidlom myši na prázdne miesto a vyberte položku Mriežka a vodiace čiary guides Vodiace zámky. Môžete tiež vytvoriť mriežku bodov: Mriežka a vodítka → Zobraziť mriežku.

Téma mriežok pre citlivý dizajn je dobre opísaná v tomto článku o Habrémovi.

Prehľad rozhrania

Rozhranie Axure je pomerne jednoduché na čítanie a má nízky vstupný prah. Zároveň je dostatočne komplexný, aby umožňoval všetky jeho funkcie. Pracovná obrazovka môže byť rozdelená do nasledujúcich prvkov:

  1. Hlavný panel s nástrojmi, panel s nástrojmi štýlu a hlavné menu.
  2. Stránky.
  3. Knižnice.
  4. Masters.
  5. Workspace.
  6. Interaktoru.
  7. Obrys.

Ďalšie podrobnosti o každom.

Hlavný panel s nástrojmi, panel s nástrojmi štýlu a hlavné menu

Hlavný panel s nástrojmi je nástrojová lišta, ktorá ovplyvňuje pohyb miniaplikácie alebo skupiny miniaplikácií na obrazovke. Presúvanie znamená pracovný priestor pri práci s objektom, a nie jeho interaktivitu pre používateľa. Na tomto paneli s nástrojmi môžete:

Zmeňte spôsob, akým je vybratá miniaplikácia (úplne alebo čiastočne). Okamžite Pripojiť nástroj - na pripojenie miniaplikácií, ktoré môžete použiť pri kompilácii máp (Mind map).

Pen - pero nástroj ako vo Photoshope. Z miniaplikácie môžete odstrániť nežiaduci prvok.

Viac - súbor prvkov, z ktorých budete používať iba orezanie (Orezanie). Ale bude oveľa pohodlnejšie ho použiť v kontextovom menu (pravým tlačidlom myši na element).

Zoom. Zmena mierky. Pohodlné vidieť, čo je aktuálna mierka pre pracovnú plochu. Pre priblíženie odporúčam použiť klasickú funkciu: Ctrl + rolovanie kolieskom myši.

Predné / zadné. Úprava vrstiev miniaplikácií. Widgety sú často na sebe navrstvené, pomocou týchto tlačidiel môžete nastaviť ich úroveň.

Group / Ungroup. Ak chcete zoskupiť miniaplikácie a odstrániť ich. Často sa používa v prípade, že jedna skupina prvkov musí byť zarovnaná s inou skupinou prvkov. Klávesové skratky sú dostatočne vhodné na použitie jedného ľavého - Ctrl + G na zoskupenie objektov, Ctrl + Shift + G na odstránenie skupín.

Zarovnať / Rozdeliť. Zarovnanie objektov: v strede, pozdĺž okrajov, rovnomerne umiestnite objekty v rade. Jasne to možno vidieť na linke. Z tohto odkazu môžete vidieť, ako funguje zoskupovanie a zarovnanie skupín prvkov.

Zamknúť / Odomknúť. Uzamknúť položku Potrebný na upevnenie prvku, aby sa náhodne nepohol.

Ľavá / Pravá. Ľavé a pravé oblasti môžete odstrániť pomocou nástrojov na pridelenie väčšieho priestoru pod pracovným priestorom.

Ukážka / zdieľanie / publikovanie. Pozrite sa, ako vyzerá prototyp v prehliadači. Ukážka vám umožňuje generovať projekt v prehliadači lokálne. Ale rýchlo stlačte F5. Publikovať - ​​možno poslať na server Axure, kde bude prístupný komukoľvek (pokiaľ nie je chránený heslom).

Panel s nástrojmi Štýl je panel nástrojov, ktorý je zodpovedný za vzhľad, veľkosť, formátovanie.

  • Formátovanie písma, typ, veľkosť, farba, zarovnanie textu - všetko je celkom štandardné.
  • Tiež bloky môžu zmeniť veľkosť hranice, pridať tieň, zmeniť farbu blokov, farbu okrajov. Je možné nastaviť rôzne úrovne priehľadnosti alebo lineárneho gradientu.
  • Schopnosť zmeniť polohu objektu pozdĺž osi x a y, veľkosť dĺžky a výšky (so schopnosťou meniť veľkosť úmerne).
  • Schopnosť urobiť objekt neviditeľným (Skrytý).

Interakciu s panelom s nástrojmi Štýl je možné zobraziť v prepojení videa.

stránky

V tomto bloku je vytvorená hierarchia prototypov, samotné stránky. Môžete tiež vytvoriť priečinky pre jednoduché prerušenie stránky. Ak chcete stránku rýchlo vytvoriť, stlačte kombináciu klávesov Ctrl + Enter. Ak chcete opraviť hierarchiu, buď šípky v rozhraní, alebo šípky Ctrl + na klávesnici.

knižnice

Samotné widgety majú možnosť vybrať si knižnicu. Knižnice Widget sú štandardné, ktoré sú súčasťou programu. Internet je plný užívateľských knižníc (google s dotazom "Stiahnutie knižníc Axure"). Môžete si dokonca urobiť knižnicu pre pohodlie - napríklad knižnicu špecializovaných ikon, panely s nástrojmi, karty atď. Spolu s hotovým prototypom, ako je uvedené na začiatku, bude pripojená rozsiahla knižnica, ktorá bude slúžiť pre vaše zdravie.

Samotný panel s nástrojmi je pomerne jednoduchý - stačí pretiahnuť požadovaný widget na pracovný priestor.

masters

Blok s majstrami, ako je uvedené vyššie. Sprievodcovia na stránkach môžu byť pridaní buď manuálne pretiahnutím na pracovný priestor ako miniaplikáciu, alebo pomocou Pridať stránky (pravé tlačidlo myši na sprievodcu). Vytvorenie, pridanie a práca s majstrami si môžete prezerať na videu. Master môže byť vytvorený z dvoch typov: uzamknutý na jednom mieste a so schopnosťou pohybu. Záhlavie stránky môže byť vytvorené pevne na tomto mieste (Zamknúť na hlavné umiestnenie), kde bolo vytvorené, a zvyšok možno vykonať lepšie bez (Miesto kdekoľvek).

Workspace

Pracovný priestor je miesto, kde je prototyp konštruovaný. Použité stránky, sprievodcovia, dynamické panely sú usporiadané v záložkách nad pracovným priestorom.

interaktoru

Stručne povedané, pomocou tohto panela nástrojov je naprogramovaná celá akcia. Skladá sa z troch záložiek: Vlastnosti, Poznámky, Štýl.

vlastnosti

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

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

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

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

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

Shape

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

Interaction styles

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

  • MouseOver - zmena objektu na vznášači. Používa sa na zvýraznenie odkazov, hraníc prvku.
  • MouseDown - kliknite na položku. Pritom samotný prvok podporuje túto zmenu pri stlačení tlačidla myši.
  • Zvolené - zmena zvolenej hodnoty. Pracuje v spojení so zmenou hodnoty v Interakciách.
  • Disabled (Zakázané) - podobné v mechanike ako je vybraté, iba sémantický význam je "vypnutý".

Poznámky

Umožňuje ponechať komentáre ku každej položke. To môže byť užitočné, keď potrebujete opísať prácu widgetu, ale nie je možné ju naprogramovať, alebo nie je taká vizuálna a je potrebné ju vysvetliť textom.

štýl

Čiastočne duplikuje funkčnosť panela s nástrojmi, len s niekoľkými funkciami. Pomocou zvoleného prvku môžete upravovať riadkovanie, ako aj vnútorné odsadenia pre text v kontajneri. Ak položka nie je vybratá, zobrazia sa nasledujúce možnosti:

  • Nastavte farbu pre všetky strany.
  • Nalejte obrázok na pozadí.
  • Urobte prototyp čiernej a bielej.
  • Na prototyp aplikujte ručne kreslené skice.
  • Možnosť nastavenia polohy (Zarovnanie stránky) prototypu v strede stránky a nie štandardne vľavo.

obrys

Tento panel s nástrojmi obsahuje všetky miniaplikácie, ktoré sa používajú na stránke. Keď kliknete na položku v zozname, bude zvýraznená v pracovnom priestore. Táto oblasť sa najčastejšie používa na vyhľadávanie dynamických panelov a ich stavov (stavu).

Klávesové skratky a LifeHacky

Tam sú klávesové skratky pre mnoho akcií v Axure. Ale ďaleko od všetkých z nich sú vhodné pre tlač, pretože musíte použiť dve ruky, ktorá je niekedy nie je odôvodnená a ľahšie kliknúť myšou. Zoznam bude preto aspoň malý, ale testovaný a odporúčaný na použitie. Tu budem tiež obsahovať niektoré techniky, ktoré pomáhajú urýchliť pracovný tok.

  1. Upínací priestor umožňuje presunúť pracovný priestor namiesto zvislého alebo vodorovného rolovania.
  2. Ctrl + A, Ctrl + Z, Ctrl + X, Ctrl + C, Ctrl + V, Ctrl + B, F2 - štandardná funkčnosť, odporúča sa používať.
  3. S upnutou šifrou môžete pohybovať miniaplikáciou pozdĺž pracovnej oblasti presne pozdĺž osi x a y.
  4. Stlačením klávesu Ctrl počas kopírovania vybratého objektu miniaplikáciu. Ak podržíte skopírovaný objekt podržaný Shift, zostane v súlade s originálom.
  5. Ctrl + G - zoskupovanie widgetov. Ctrl + Shift + G - odstránenie zoskupenia.
  6. F5 - režim náhľadu prehliadača. V budúcnosti môžete jednoducho aktualizovať kartu v prehliadači a zobraziť zmeny.
  7. F6 - otvorí okno pre publikovanie prototypu na server Axure.
  8. Bohužiaľ, v Axure nie je zabudovaná možnosť odhadnúť vzdialenosť medzi objektmi, ako je implementovaná v Sketch av novom Adobe XD. Ale môžete použiť "crutch" vo forme pravidelného obdĺžnika. Postup je jednoduchý, ale pre každého hasiča je video.
  9. Axure poskytuje inteligentné príručky. To je nevyhnutné pre presné vzájomné umiestnenie objektov. Keď ich potiahnete, zobrazia sa okraje a stred ostatných objektov (štandardne vo forme tyrkysových čiar). Preto sa pri ťahaní odporúča navigovať k nim tak, aby bol prototyp hladký a jasný.
  1. Odporúča sa nastaviť umiestnenie na stred stránky. Ide nielen o to, aby to vyzeralo príjemnejšie pre oko, ale aj pre umiestnenie predmetov. Ak sú dynamické panely pripnuté na konkrétne miesto na obrazovke, dôjde k posunu, ak je obsah stránky predvolene (vľavo).
  2. Dynamické panely alebo objekty, ktoré budú neskôr použité v programovaní interakcií, by mali byť zmysluplne pomenované. V opačnom prípade bude ťažké nájsť požadovaný objekt v zozname.

Prototyp hlavného internetového obchodu (desktop).

Vstup skončil a diskusia o prototype začala. Zvolený bol internetový obchod, pretože má najrôznejšie funkčné čipy, ktoré možno zobraziť, ako aj vstupnú stránku, ktorej prvky sa zobrazia na hlavnej stránke. Je dôležité poznamenať, že tento prototyp je v prvom rade dôležitý, aby sa ukázala funkčnosť, spôsob fungovania a nie ako hotový výrobok. Preto, aby som sa čo najviac dištancoval od konečnej aplikácie, vybral som si tému predaja bonsai, pridaním trocha odpadu. V súlade s tým vziať ako hlavné súbor prvkov pre použitie, a nie ako konečný pokyn na vaše projekty.

Účelom prototypu je ukázať funkčnosť, preto budú chýbať stránky ako „Kontakty“, „Správy“, „Články“, pretože tieto stránky z hľadiska funkčnosti nemôžu nič nové demonštrovať.

klobúk

Čiapka sa implementuje pomocou sprievodcu. Ako vytvoriť master bol opísaný vyššie. V čiapke je niekoľko prvkov, ktoré stoja za to zostať podrobnejšie.

logo

V tom nie je žiadny problém, ale jeden životný hack je s ním spojený. Ak prvok, ktorý potrebuje byť aktívny (odkaz na stránku alebo konkrétnu akciu, kliknite), ale sám sa skladá z niekoľkých prvkov, môžete na ňu vložiť priehľadnú nádobu. Tak, v prototype implementované logo, karta s príslušnými článkami.

menu

Podčiarkovník je implementovaný pomocou nástroja Inšpektor -> Vlastnosti -> Styly interakcie -> Panel nástrojov Myš. V okne, ktoré sa objaví, začiarknite políčko Podčiarknutie.

Rozbaľovacie menu je možné realizovať rôznymi spôsobmi. Ak je to jednoduché (bez ďalších vyskakovacích okien), môžete použiť hotový miniaplikáciu.

V prípade internetového obchodu s bonsajmi je to ťažké. Mechanika je nasledovná:

  • Na prvej úrovni je jeden dynamický panel s dvoma štátmi (štát). V prvom stave - text widget "Directory". V druhom stave, rovnaký widget, len so všetkými položkami menu. Vznášanie sa nad prvkom (OnMouseOver) spúšťa prepnutie do druhého stavu (Set Panel State -> zvoľte dynamický panel -> State2 a "Ok"). Ak je výber z dynamického panelu zrušený (OnMouseOut), prepne sa do prvého stavu (Set Panel State -> select dynamic panel -> State2 a "OK").
  • V druhom stave je vytvorený ďalší dynamický panel, ktorý je skrytý (Skrytý). Vo vnútri robíme dva stavy vo forme dvoch produktových kariet s cenou, menom a obrázkom. Vznášanie sa nad menom (OnMouseOver) spôsobí prechod do ďalšieho stavu (SetPanelState -> vyberte dynamický panel -> zvoľte Ďalej). Môžete tak urobiť tak, že prechod na konkrétny stav, resp. Každé meno, sa bude viazať na vašu kartu. Ak to chcete urobiť, musíte namiesto položky Ďalej vybrať príslušný stav. Nezabudnite zaškrtnúť "Zobraziť panel, ak je skrytý".
Ak potrebujete naprogramovať niekoľko typických interakcií (napríklad účinok na hover), odporúča sa, aby ste najprv úplne upravili jeden objekt a potom ho vynásobili. To urýchli prácu.

Objednávka spätného volania

Objednávka spätného volania sa skladá zo spúšte, v našom prípade je to tlačidlo a väčšina modelov spätného volania.

Tlačidlo je vytvorené prostredníctvom normálneho kontajnera, na ktorý aplikujeme štýly interakcie MouseOver. Efekt vznášania sa môže zobrazovať akýmkoľvek spôsobom v závislosti od zručnosti vášho projektanta. Ak to nestačí, môžete jednoducho zmeniť odtiene sivej na tlačidle. Príklad zmení výplň, farbu písma a farbu ohraničenia kontajnera.

Modálne okno robíme pomocou dynamického panelu s jedným stavom a okamžite ho skryjeme (Skryté). Predtým, ako pristúpime k obsahu, je potrebné zabezpečiť umiestnenie modálneho okna presne v strede obrazovky. Samozrejme môžete manuálne zladiť, ale vzhľadom k tomu, že rôzni užívatelia majú rôzne výšky a šírky obrazovky, nemusia sa objaviť v strede. Preto robíme nasledovné:

  • Kliknite pravým tlačidlom myši na dynamický panel.
  • Vyberte možnosť Pin to Browser.
  • Zaškrtnite "Pin to window prehliadača".
  • Vyberte položku Stred a stred a potom kliknite na tlačidlo OK.

Čo je pekné, potom, čo dynamický panel môže byť odstránený kdekoľvek, a to sa ešte objaví presne v strede.

Vzhľad modálneho okna sa vykonáva nasledovne:

  • Vyberte tlačidlo spúšte.
  • V časti Interakcie vyberte položku OnClick.
  • V bloku Widgety vyberte položku Show / Hide.
  • Nájdite požadovaný miniaplikáciu.
  • Parameter Viditeľnosť preložiť do Show.
  • Vo viacerých možnostiach vyberte položku ako lightbox a ako pozadie vyberte niečo sivé a priesvitné.

Modálne okno sa skladá z dvoch widgetov Input Field (nazývaných Input Field (vybrané)), tlačidla „Order“, kríža na zatvorenie okna a dvoch označení, ktoré sa zobrazia, keď je formulár odoslaný správne a nesprávne.

Kríž je obyčajná ikona zo sady ikon. Akcia - skryje modálne okno pri kliknutí na krížik. Vykonáva sa rovnakým spôsobom ako vzhľad modálneho okna, iba v parametri Viditeľnosť prekladáme prepínač do pozície Skryť.

V objednávkovom formulári spätného volania je naprogramovaná jednoduchá validácia pre plnenie. Ak v poli "telefón" nie sú zadané žiadne znaky, zobrazí sa správa: "Nezabudnite zadať telefónne číslo!". Ak je zadaný ľubovoľný znak, zobrazí sa správa „Aplikácia bola úspešne odoslaná!

Pre vstupné polia môžete nastaviť text - text s náznakom, ktorý zadáte do tohto poľa.

Validácia je naprogramovaná nasledovne:

  • Vytvoríme dva bloky s textom úspešného odoslania a neúspešným. Preložiť do pozície Skryté.
  • Na spúšťacom tlačidle nastavte akciu OnClick.
  • V hornej časti okna vyberte položku Upraviť podmienku.
  • V okne, ktoré sa objaví, napíšte: text na miniaplikáciu, miniaplikáciu vstupného poľa s telefónom, hodnotu, hodnotu, prázdnu hodnotu. V poli Popis by ste mali napísať: "ak text na" Názov widgetu vstupného poľa s telefónom "sa rovná" "". Kliknite na tlačidlo Ok.
  • Vyberte Zobraziť. Môžete pridať napríklad animáciu, ktorá sa len vyleje (vzhľad) na 1 milisekundu.
  • Pridať Počkajte v ľavom bloku, môžete vložiť 2 sekundy. Používa sa na počítanie, napríklad čakanie medzi akciami.
  • Dajte Skryť a vyberte miniaplikáciu s upozornením, ktoré musíte vyplniť.

Ak je teda vstupné pole s telefónnym číslom prázdne, po kliknutí na tlačidlo "Objednať" sa zobrazí varovanie, ktoré musíte vyplniť. Zmiznú za 2 sekundy.

Správa o úspechu je nakonfigurovaná cez druhú podmienku (Case):

  • V Interakcii tlačidla "Objednať" kliknite na OnClick, Prípad 2 je vytvorený automaticky.
  • Zobrazujeme text s úspešným odoslaním prostredníctvom Show.
  • Potom počkajte (Počkajte), napríklad sekundy 3.
  • A skryť (Skryť) modálne okno.

Ukazuje sa, že ak prvá podmienka nie je splnená (t.j. vo vstupnom poli je nejaká hodnota s telefónnym číslom), potom je splnená druhá podmienka. Zobrazí sa správa, že experti sa čoskoro spoja a po 3 sekundách zmizne modálne okno.

Tlačidlo nahor

Tlačidlo "hore" sa používa na rolovanie na prvú obrazovku. Dovoľte mi pripomenúť vám, že sme stále v sprievodcovi „Cap“. Realizujeme ho nasledovne:

  • Pridajte do pracovného priestoru ikonu vo forme šípky, alebo napríklad použite kontajnerový trojuholník.
  • Prekladáme do dynamického panelu a skryjeme ho (je to panel, nie samotný prvok).
  • Potom panel opravíme na jednom mieste v prehliadači. Kliknite pravým tlačidlom myši na panel -> Pripnúť do prehliadača. V okne vyberte, ktorá strana sa má pripojiť. Príklad sa používa vpravo a dole (vpravo a dole) s odsadením 30 pixelov.

Teraz je potrebné zabezpečiť, aby sa samotné tlačidlo zobrazovalo pri rolovaní do určitého bodu na stránke. Kliknite na prázdne miesto v pracovnom priestore -> v časti Interakcie vyberte položku OnWindowScroll -> v hornej časti okna kliknite na položku Upraviť podmienku -> V podmienkach vyberte hodnotu -> kliknite na fx -> v okne, ktoré sa zobrazí, kliknite na Vložiť premennú funkcie -> vyberte funkciu v okne Window.scrollY a kliknite na "Ok" -> nasledujúce hodnoty by mali byť väčšie ako a hodnota -> V poslednom vstupnom poli zadajte počet pixelov posúvaných nahor. Príklad používa 600 px. Výsledkom je, že v poli Description by sa malo zapísať nasledovné: ak "[[Window.scrollY]]" je väčšie ako "600". Teraz si musíte vybrať samotnú akciu. V aplikácii Miniaplikácie vyberte položku Zobraziť / skryť -> kliknite v zozname na dynamickom paneli, tlačidlá nahor -> v možnostiach, vyberte položku Preniesť dopredu.

Zobrazí sa tlačidlo, teraz musíme urobiť, aby zmizol, keď sme prenesení na prvú obrazovku. Ak to chcete urobiť, opäť kliknite na Interakcie na OnWindowScroll -> Prípad 2 sa objaví, s podmienkou Else Ak je pravda -> v miniaplikáciách vyberte Zobraziť / Skryť -> vyhľadať tlačidlo hore a vyberte skryť.

Voliteľne môžete vykonať efekt, keď podržíte tlačidlo nahor, pomocou dvoch stavov (stav), OnMouseEnter a OnMouseOver.

Full-šírka pozadia

Mnohé prvky na mieste natiahnu celú šírku obrazovky, vrátane uzáveru. To možno vykonať dvoma spôsobmi: prostredníctvom pravidelného kontajnera a OnPageLoad a pomocou dynamických panelov. Pre uzáver vyberte druhú možnosť.

  • Každý kontajner preložíme do dynamického panela, pričom ho ponecháme prázdny (odstránenie kontajnera alebo jeho priehľadnosť).
  • Vo vlastnostiach dynamického panela nájdeme záznam 100% Wide (iba prehliadač) a označíme zaškrtnutím.
  • V štýle v zadnej farbe nastavíme farbu, v prípade nášho prototypu je biela alebo #FFFFFF.

Teraz sa panel automaticky roztiahne na akékoľvek rozlíšenie.

Pevné menu

Fixné menu je, keď pri rolovaní nadol zostane časť navigačných prvkov zo záhlavia v hornej časti obrazovky.

To sa robí nasledovne:

  • Na začiatok určíme, ktoré prvky budú v pevnom viečku. V príklade je to menšia verzia loga, menu bez vyskakovacích prvkov a tlačidlo objednávky hovoru.
  • Potom skopírujte vybrané prvky a preložte ich do samostatného dynamického panelu.
  • Skrytý (dynamický) panel.
  • Druhé kryty substrátu robia celú šírku, ako v predchádzajúcom príklade.
  • Kliknite pravým tlačidlom myši na panel -> Pripnúť na prehliadač -> V horizontálnom kolíku vyberte položku Stred, na zvislom kolíku - na vrchu. A OK.
  • Teraz musíte nastaviť vzhľad pevnej čiapky. To sa robí analogicky s tlačidlom hore. Ak to chcete urobiť, na stránke Interakcie v OnWindowScroll vytvoríme tretí prípad (kliknite pravým tlačidlom na OnWindowScroll -> Add Case).
  • Pridajte podmienku. V podmienkach, zvoľte hodnotu -> kliknite na fx -> v okne, ktoré sa objaví, kliknite na Insert Variable of Function -> Select Window.scrollY funkciu v okne a kliknite na "OK" -> nasledujúce hodnoty by mali byť väčšie ako a hodnota -> V poslednom poli vstup určíme, aký počet pixlov sa posunul pevným viečkom. Zadajte výšku uzáveru - 120x. Výsledkom je, že v poli Description by sa malo zapísať nasledovné: ak "[[Window.scrollY]]" je väčšie ako "120". Teraz si musíte vybrať samotnú akciu. V aplikácii Miniaplikácie vyberte položku Zobraziť / skryť -> kliknite v zozname na dynamickom paneli pevného záhlavia -> v možnostiach, vyberte položku Preniesť do predu. Pre hladký vzhľad čiapok môžete zadať animáciu nadol.
  • Je tiež dôležité zmeniť spúšťaciu podmienku tretieho prípadu, pretože predvolená hodnota je Else ak je pravdivá, t.j. pred tým bola podmienka If nastavená pre tlačidlo hore. Preto teraz musíte kliknúť pravým tlačidlom myši na prípad 3 a vybrať možnosť Prepnúť, ak / ak inde.
  • Potom nastavte podmienku 4 Case (Add Case), kde sa skryje pevný záhlavie, ak sa posunieme nahor a prekročíte hranicu 120 pixelov. V tomto prípade stačí skryť pevnú hlavičku (Skryť).

Prvá obrazovka alebo ako urobiť paralaxu a natiahnuť obraz na šírku.

Okrem hlavného obrazu, na ktorý chceme aplikovať efekt paralaxy a natiahnuť ho, je pri kliknutí na šípku posúvaná na druhú obrazovku. To robí analogicky s tlačidlom hore.

  • Pomenujte element (môžete vytvoriť priehľadný bod vytvorený vopred), na ktorý sa má posúvač vykonať.
  • Vyberte šípku, v Vlastnosti kliknite na OnClick.
  • V zozname Akcie vyberte položku Prejdite na položku Widget (Anchor link), potom nájdite náš prvok, označte len položku Scroll vertical. Môžete tiež vybrať animáciu, napríklad Swing.

Roztiahnite obrázok na šírku

Predtým sme dynamické panely natiahli po celej šírke obrazovky, len pomocou výplne. Dovoľte mi ukázať vám, ako natiahnuť obrázok. Za týmto účelom:

  • Vytvorte dynamický panel založený na ľubovoľnom prvku, potom ho odstráňte a panel rozložte na odhadovanú veľkosť na výšku obrázku.
  • Vo vlastnostiach dynamického panela nájdeme záznam 100% Wide (iba prehliadač) a označíme zaškrtnutím.
  • V štýle nájdeme Back image -> click import a vyberte obrázok v počítači.
  • V rozbaľovacej ponuke, kde nie je vybratá možnosť Opakovať, vyberte možnosť Stretch to Cover.

Príklad ukazuje, že samotný dynamický panel má šírku 300 px, pričom sa natiahne na celú šírku obrazovky.

Ako urobiť paralaxový efekt

Efekt paralaxy (napríklad vertikálny) sa vytvorí spomalením rolovania niektorých prvkov na pozadí ostatných. Nastavuje sa takto:

  • Na stránke Interakcie (tzn. Keď nie je vybratý žiadny prvok) pomocou funkcie OnWindowScroll.
  • V miniaplikáciách vyberte položku Presunúť -> kliknite na požadovaný prvok (v našom prípade ide o dynamický panel s obrázkom bonsai) -> vo vlastnostiach, vyberte Presunúť do, a do vstupného poľa y kliknite na fx.
  • Rovnako ako v predchádzajúcom príklade s tlačidlom hore, vyberte Window.scrollY -> potom budete musieť upraviť vzorec s rukami, pridaním do vstupného poľa získať nasledujúce hodnoty: [[Window.scrollY * 0,25]]. Hodnota 0,25 znamená oneskorenie, s ktorým sa prvok bude pohybovať. Môže byť prispôsobený vašej chuti.

Druhá obrazovka alebo riešenie výhod

Ďalej implementujeme ďalší efekt pri rolovaní, a to krásny vzhľad výhod. Tento prvok tvorivosti nestačil, tak som ich nazval podľa ich postavenia. Je to len dva textové widgety s textom titulu a rýb, ako aj ikona. Ak je pri vytváraní prototypu potrebné poskytnúť tento obsah, potom to robíme skôr zámerne ako príkladom.

Algoritmus vzhľadu je približne rovnaký ako algoritmus vzostupného tlačidla. Hlavná vec je tu uhádnuť, kedy dosiahnu vzdialenosť. Samotný vzhľad môže byť realizovaný cez Move, ale príklad to uľahčil. Samotné elementy sa nikam nepohybujú, zobrazujú sa (Show) s animáciou (Animate) posúvajúcou sa doľava (slide left), hore (slide up) a doprava (slide right).

Tretia polovica obrazovky alebo druhy tovaru

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

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

  • Берем контейнер заданного размера (или подходящее изображение, как на примере) и переводим в динамическую панель (назовем ее "Бонсай в сортах").
  • Внутри динамической панели с изображением создаем контейнер с прозрачностью (29 на примере), добавляем текстовые блоки с описанием (белого цвета для контрастности). Потом все это переводим в динамическую панель (назовем "Бонсай в сортах слайд"). Расположим его сразу после основного изображения. Таким образом, через окошко динамической панели "Бонсай в сортах" в 300 на 300 пикселей, динамическая панель ("Бонсай в сортах слайд"), которая находится внутри, не будет видна.
  • Далее, делаем так, что при наведении на динамическую панель "Бонсай в сортах" передвигалась панель "Бонсай в сортах слайд". Ak to chcete urobiť, vyberte panel "Bonsai v odrodách", vyberte v Interakcie OnMouseEnter.
  • V miniaplikáciách vyberte položku Presunúť, vyberte v zozname prvkov položku Bonsai a v podmienkach, v ktorých y nastavíme hodnotu -300 (pohyb pozdĺž osi y o mínus 300 pixlov, t. J. Hore). Pri pohybe by mala byť hodnota podľa. Môžete pridať animáciu, napríklad Swing.
  • Aby panel nezmizol, postup je identický, stačí vybrať OnMouseOut a hodnota musí byť kladná.

Keď je jeden prvok pripravený, možno ho vynásobiť štyrmi. A tam, v prípade potreby, pri každej zmene obrázku a opisu.

Štvrtá obrazovka alebo akcia akcií

V tomto bloku je niekoľko výtržností a nezmyselných dekorácií.

Reverzná správa

S týmito prvkami, to zvyčajne nemá cenu obťažovať, to je dosť niekedy určiť obrázok alebo blok. Ale ak je túžba, môžete vykonať zmenu minút a sekúnd. Jediná negatívna vec je, že to nie je tak technologicky vyspelé, ako sa môže zdať (ak majstri Axure prečítajú tento článok a vedia, ako to urobiť s krátkym vzorcom - napíšte, pretože tieto znalosti sa v buržoázii nenachádzali).

  • Pre každú číslicu vytvárame niekoľko kontajnerov, ktoré voláme, aby sme sa nedali zmiasť (napríklad „Jednotky, sekundy“, „Desiatky sekúnd“).
  • Na stránke Interakcia (nezabudnite odstrániť výber z elementu) kliknite na OnPageLoad.
  • V miniaplikáciách vyberte Nastaviť text a v prvkoch vyberte "Jednotky sekúnd" a nastavte hodnotu na 8.
  • V miniaplikáciách vezmeme Wait a nastavíme hodnotu na 1000 ms (to znamená 1 sekundu).
  • V miniaplikáciách vyberte Nastaviť text a v prvkoch vyberte "Jednotky sekúnd" a nastavte hodnotu na 7.
  • V miniaplikáciách si vezmeme Wait, nastavíme hodnotu na 1000 ms.

Opakujte toľkokrát, koľkokrát nie ste spokojní s výsledkom. Akonáhle sa počítajú do 10, meníme desiatky sekúnd a počítame do 60 minút. Súčasne nie je potrebné vybrať prvky v miniaplikáciách vždy s perami. V poli Organizovať akcie ich môžete skopírovať a prilepiť.

Naklápacie prvky

Ak chcete prvok otočiť, presuňte kurzor na jeho roh a podržte kláves Ctrl. Potom otočte myšou. Vývojári nevynašli bicykel a implementovali ho ako vo všetkých grafických editoroch.

Ihneď po počítadle je prvok, ktorý neustále mení svoju pozíciu. Jeho implementácia je podobná predchádzajúcemu príkladu s časovačom, s jediným rozdielom, že implementácia je jednoduchšia:

  • Vezmite si widget widget, nastavte hodnotu na "1000 rubľov", nakloňte v jednom smere.
  • Prekladáme ho do dynamického panelu a kopírujeme prvý stav (štát).
  • Druhý stav je naklonený iným smerom.
  • Na stránke Interakcie vyberte položku OnPageLoad.
  • V aplikácii Miniaplikácie vyberte položku Nastaviť stav panela a v stĺpci Vyberte stav vyberte možnosť Ďalej. Zaškrtávame zábal od posledného po prvý (pomocou tohto slučkujeme proces). Tiež, zaškrtnite Repeat every. Číslo v milisekundách udáva rýchlosť, s akou sa stav navzájom nahradí. Môžete tiež pridať animáciu. Kliknite na tlačidlo OK.

Týmto spôsobom môžete implementovať akúkoľvek animáciu. Ako príklad som urobil animáciu králika a vhodnejšie pre prácu načítanie animácie.

Vystrihnúť efekt

Ďalší život hack je uloženie vlastné-cut kontajner na iný objekt, ako je obrázok. Ak to chcete urobiť, vezmite kontajner do poľa Vlastnosti -> Vybrať tvar -> Previesť na vlastný tvar. A potom kliknutie na elementy alebo pridanie nových poskytne akýkoľvek tvar.

Piata obrazovka alebo ako nahrať video YouTube do prototypu

V prototype môžete jednoducho vytvoriť video. V predvolenej knižnici musíte nájsť miniaplikáciu Inline Frame. Uverejnite ho na pracovnom priestore, ako by ste chceli, aby sa video nachádzalo. Potom kliknite na túto položku. V zobrazenom zozname vyberte odkaz na externú adresu URL alebo súbor a do vstupného poľa zadajte adresu URL formulára //www.youtube.com/embed/b5dexpeO-l4. Môžete ho získať v službe YouTube kliknutím na tlačidlo „Zdieľať“ pod videom a výberom kódu html. Samotný kód ignorujeme a kopírujeme iba adresu URL z vyššie uvedeného príkladu.

Šiesta obrazovka alebo spôsob, ako vytvoriť posuvník v Axure

Dosiahli sme typický prvok, ktorý pravdepodobne už viete, ako to urobiť. Ale ak sem pôjdete len pre toto, budem opakovať od samého začiatku:

  • Berieme kontajner alebo akýkoľvek iný predmet, ktorý môže označovať obsah jazdca.
  • Prekladáme ho do dynamického panelu.
  • Kopírovať alebo pridávať stav (stav). Napríklad, obvyklý kontajner bol skopírovaný, na ktorom bol napísaný "Slide 1".
  • Pridať položky, ktoré môžu byť spúšťačom na prepnutie posuvníka. Môžete ho prepnúť automaticky pomocou príkladu, ktorý bol predtým diskutovaný na stránke Interakcie a OnPageLoad. Tu používame ikony šípok, ktoré sú umiestnené vľavo a vpravo.
  • Na ikonu vo vlastnostiach visíme OnClick. V aplikácii Widgets v ľavej časti vyberte položku Nastaviť stav panela. V zozname nájdeme požadovaný dynamický posuvný panel. V okne Select (Vybrat '), na tlačidle vpravo, vyberte položku Next (Ďalej) na tlačidle vľavo - Predchádzajúca a začiarknite položku Wrap from first to last. Animácia sa vykonáva na tlačidle vľavo, vpravo napravo.

Siedma a ôsma obrazovka alebo informácie o spoločnosti a najnovšie články

Typické objekty, ktoré sa dajú umiestniť podľa vašich predstáv (prirodzene podľa logickej a dimenzionálnej mriežky). Blok "Nové materiály v našom blogu" je implementovaný prostredníctvom transparentného kontajnera, ktorý sa zobrazuje dopredu (Front). Hover edge sa zadáva cez MouseOver.

Deviata obrazovka alebo ako prejsť

Kartu je možné označiť niekoľkými spôsobmi:

  1. Kontajner podpisom je karta.
  2. Screenshot z Google Maps alebo Yandex.Maps.
  3. Vložením plnej interaktívnej mapy do prototypu.

Ako urobiť prvý v prvých dvoch prípadoch, vy sami môžete prísť na to, ale ako realizovať tretiu možnosť, musíte zvážiť podrobnejšie.

Najprv musíte použiť rovnaký predvolený widget, ktorý sme použili na vloženie videa z YouTube - Inline Frame. Umiestnite ho na pracovnú plochu, pretože bude pohodlný. Ďalej musíte vziať s Yandex.Maps kód, ktorý už musíte umiestniť podľa odkazu v widget sám:

  • Dvakrát kliknite na rámik vloženého prvku
  • Vložiť odkaz Odkaz na externú adresu URL alebo súbor.

Teraz sa pozrime, ako získať kód z Yandex.Maps:

  • Prejdite na stránku //yandex.ru/maps/.
  • Z kontaktov ideme na požadovanú adresu.
  • V ľavom dolnom rohu vedľa nástrojov a spätnej väzby nájdeme tlačidlo "zdieľať" a klikneme naň.
  • Z poľa "vložiť kód na stránku" skopírujeme iba časť adresy URL, ktorá vyzerá takto: //yandex.ru/map-widget/v1/-/CBQX48GkdD

Teraz musíme mapu natiahnuť na celú šírku obrazovky. Nie je možné implementovať prostredníctvom dynamického panelu, musíte použiť druhú metódu:

  • Na stránke Interakcie vyberte položku OnPageLoad.
  • V časti Akcie vyberte položku Nastaviť veľkosť a kliknite na prvok Inline Frame.
  • V Šírke kliknite na fx.
  • Kliknite na Insert Variable of Function.
  • Zo zoznamu vyberte Window.width a kliknite na "OK".
  • V rozbaľovacom zozname Anchor vyberte Top alebo Center.

suterén

Prvky v suteréne môžu byť podmienečne rozdelené do dvoch blokov - predplatné a samotný druh dodatočných informácií. Toto nemá zmysel opísať samostatne, ale na formulári predplatného stojí za to zastaviť sa podrobnejšie, pretože ide o mierne komplikovanú verziu príkazu na spätné volanie.

Vo formulári spätného volania sme uviedli, že ak je pole prázdne, potom sa vyplní nesprávne. S formulárom predplatného môžete označiť prítomnosť symbolu @.

  • Vytvoríme dva bloky s textom úspešného odoslania a neúspešným. Preložiť do pozície Skryté.
  • Na spúšťacom tlačidle nastavíme akciu OnClick.
  • V hornej časti okna vyberte položku Upraviť podmienku.
  • V zobrazenom okne zadajte: text na miniaplikácii, vstupné polia widgetu z e-mailu, neobsahuje hodnotu @. Pole Popis by malo napísať, ak text na e-maile neobsahuje znak „@“. Kliknite na tlačidlo Ok.
  • Vyberte Zobraziť. Môžete pridať napríklad animáciu, ktorá sa len vyleje (vzhľad) na 1 milisekundu.
  • Pridať Počkajte v ľavom bloku, môžete vložiť 2 sekundy. Používa sa na počítanie, napríklad čakanie medzi akciami.
  • Dajte Skryť a vyberte miniaplikáciu s upozornením, ktoré musíte vyplniť.
  • Pridajte druhý prípad (prípad).
  • Zvoľte Zobraziť / Skryť.
  • Kliknite na widget widget s úspešným dizajnom.
  • Vyberte Počkajte a nastavte hodnotu na 2 000.
  • Skryť správu o úspešnom odoslaní pomocou možnosti Skryť.

záver

Ako bolo uvedené na začiatku, je to len prvá časť. V budúcich článkoch bude existovať katalóg, produktová karta, osobné konto a ďalšie povolenia. Môžete tiež zanechať v komentároch otázky o implementácii prvkov - možno budem hovoriť o nich v nasledujúcich článkoch.

Ako som sľúbil, poskytujem bezplatné knižnice prvkov, ako aj hotový prototyp, o ktorom sme v tomto článku uvažovali. Na tento účel používame službu, ktorá poskytne prepojenie na zdieľanie v sociálnej sieti.

Stiahnite si knižnice (prvky a ikony) a hotový prototyp Axure. Kak-oznámi-prototip-v-Axura-rp-jak-nichego-v-eTOM-NE-ponimaesh
#
UsabilityInstrumentsWeb Development

Pozrite si video: Tutorial 4IT115: Tvorba prototypu v Axure RP (December 2019).

Loading...

Zanechajte Svoj Komentár