Interaktyvių drobės programų kūrimas

Reagavimas rodo į programos prieinamumą automatiškai sulyginamas su kirtais ekrano dydžiais ir formos faktoriais siekiant jautriai naudoti prieinamo ekrano erdves ir suteikiant puikų UI ir UX visuose įrenginiuose, formos faktoriuje ir ekrano dydyje.

Interaktyvumas leidžia nurodyti, kaip įvairūs programos elementai:

  • išsitempia ar keičia dydį keičiant ekrano dydį,

  • Keiskite pozicijas su ekrano dydžio pakeitimais.

Kodėl reikia kurti interaktyviąsias programas

Galutiniai vartotojai gali pasiekti Jūsų programėlę naudodami įvairius įrenginius, pvz., telefonus, planšetinius kompiuterius, nešiojamuosius kompiuterius ir darbalaukius su dideliais monitoriais, skirtingais ekrano dydžiais ir įvairiu pikselių skaičiumi.

Norint užtikrinti puikią vartotojo patirtį naudojant kiekvieno formos koeficiento ir įrenginio programėlę, būtina sukurti programėlę pagal interaktyvaus projektavimo principus. Net jei programėlė skirta naudoti tik žiniatinklio naršyklėje arba mobiliuosiuose telefonuose, vartotojo įrenginio ekrano dydžiai gali būti skirtingi, todėl būtų gerai programėlę kurti taikant interaktyviuosius principus.

Programėlės kūrimas pagal interaktyvumo principus

Prieš pradėdami kurti savo programėlės vartotojo sąsają, turite apsvarstyti šiuos aspektus:

  • Kokius formos elementus ar prietaisus norite paremti.

  • Kaip programėlė turi atrodyti kiekviename formos koeficiente?

  • Kokius programėlės elementus reikia ištempti arba pakeisti jų dydį?

  • Ar kai kuriuose formos koeficientuose yra paslėptų elementų?

  • Ar kai kuriuose formos koeficientuose programėlė veikia kitaip?

Surinkus visus šiuos reikalavimus reikėtų pradėti galvoti apie tai, kaip šie skirtingi vartotojo sąsajos maketai gali būti kuriami naudojant vieną programėlę su interaktyviais „Power Apps“ įrankiais.

Prieš pradėdami naudoti interaktyvius maketus, turite atlikti šiuos veiksmus:

  1. Eikite į Power Apps.

  2. Atidarykite programėlę, kurioje norite naudoti interaktyvų maketą.

  3. Eikite į "Settings>Display", kad išjungtumėte mastelį, kad tilptų, "Lock" formato santykį ir "Lock" orientaciją ir pasirinkite "Apply".

    Nustatymai išjungia užrakto orientaciją.

Interaktyvieji maketai

Šiuos interaktyvius išdėstymus galima sukurti pridedant naują ekraną ir skirtuke Išdėstymas pasirinkus atitinkamą parinktį :

Ekrano išdėstymai.

Pastaba.

Nauji interaktyvūs išdėstymai galimi programų formatams, tačiau nauji ekrano šablonai galimi tik planšetinio kompiuterio formatu.

Perskirtas ekranas

Suskaidyto ekrano makete yra dvi skiltys, kurių kiekviena užima 50 % ekrano pločio staliniuose kompiuteriuose. Mobiliuosiuose įrenginiuose skyriai išdėstomi vienas po kitu ir kiekvienas iš jų užima visą ekrano plotį.

Šoninės juostos maketo kairėje yra fiksuoto pločio šoninė juosta. Pagrindinėje dalyje yra fiksuoto aukščio antraštė, o pagrindinė skiltis užima likusį ekrano plotį. Numatyta, kad šablonas taip pat atrodo ir mobiliajame telefone, tačiau kai kuriuos pritaikymus rekomenduojama naudoti pagal vartotojo sąsajos modelį, kurio reikia mobiliajai patirčiai.

Darbas su talpyklėmis

Talpyklės – tai visų interaktyvių dizaino elementų kūrimo blokai. Konteineris gali būti automatinio išdėstymo konteineris vertikalia arba horizontalia kryptimi arba fiksuoto išdėstymo konteineris, kuris ateityje palaikys apribojimus.

Toliau pateiki keli patarimai, kaip kurti savo programėlės vartotojo sąsają su talpyklėmis:

  • Visada sukurkite UI elementus, kurie konteineryje sudaro UI lentelę.

  • Talpyklei leidžia turėti savo interaktyvias savybes ir parametrus, kad būtų galima nustatyti jos padėtį ir dydžio keitimą skirtingo dydžio ekranuose.

  • Leidžia keisti, kaip jos antriniai komponentai išdėstomi atsižvelgiant į interaktyvumą.

Talpyklei pasirinkite vieną iš dviejų maketo režimų: rankinį arba automatinį (horizontalų arba vertikalų)

Automatinio išdėstymo talpyklės

Du valdikliai, horizontalus konteineris ir vertikalus konteineris gali būti naudojami automatiškai išdėstyti antrinius komponentus. Šios talpyklės apibrėžia antrinių komponentų padėtį, kad nereikėtų nustatyti X, Y komponentui, esančiam talpyklės viduje. Be to, turimą vietą antriniams komponentams galima paskirstyti atsižvelgiant į parametrus bei apibrėžiant antrinių komponentų vertikalų ir horizontalų lygiavimą.

Kada naudoti automatinio maketo talpykles

Automatinio maketo talpykles galima naudoti šiais atvejais:

  • Vartotojo sąsaja turi reaguoti į ekrano dydžio ar formos koeficiento pokyčius.
  • Yra daugiau nei vienas antrinis komponentas, kurio dydį reikia keisti arba kurį reikia perkelti priklausomai nuo ekrano dydžio ar formos koeficiento pokyčių.
  • Kai elementus reikia sukrauti vertikaliai arba horizontaliai (neatsižvelgiant į jų dydį).
  • Kai elementus ekrane reikia išdėstyti tolygiai.

Automatinio išdėstymo talpyklės pavyzdys

Kaip sukurti interaktyvų ekraną:

  1. Sukurkite tuščią drobės programą naudodami planšetinio kompiuterio išdėstymą.

  2. Pasirinkite Nustatymai>Ekranas ir išjunkite mastelį, kad tilptų, Užrakinti formato koeficientą ir Užrakinti orientaciją ir pasirinkite Taikyti.

  3. Dabar iš Įterpti sritis kairėje šoninėje juostoje, po Išdėstymas skirtukas, pasirinkite Horizontalus konteineris.

    Įdėkite konteinerius.

  4. Reikia pakeisti viršutinės talpyklės dydį, kad ji užimtų visą plotą su šiomis savybėmis. Pakeitus jos dydį ji bus tokio paties dydžio, kaip ir ekranas.

    1. X = 0
    2. Y = 0
    3. Plotis = pirminis.plotis
    4. Aukštis = pirminis. Aukštis

  5. Dabar iš įterpimo srities pridėkite du vertikalius konteinerius į horizontalų konteinerį.

    Pridėkite vertikalius konteinerius.

  6. Norėdami sukurti konteinerius, užpildykite visą vertikalią erdvę, pasirinkite Konteineris1 ir nustatykite Align (vertical) ypatybę kaip Stretch.

    Sulygiuokite tempimą.

  7. Norėdami padalinti ekraną tarp turinio, naudokite Fill portions ypatybę dviejuose antriniuose konteineriuose. Kairioji talpyklė užims iki 1/4 ekrano erdvės.

    1. Pasirinkite Konteineris2. Pamatysite, Flexible width kad nuosavybė įjungta. Nustatykite į Fill portions 1.
    2. Pasirinkite Konteineris3. Pamatysite, Flexible width kad nuosavybė įjungta. Nustatykite Fill portions į 3.

  8. Pasirinkite Konteineris2. Nustatykite Fill = RGBA(56, 96, 178, 1) ypatybę formulės juostoje. Nustatyti Align (horizontal)Stretch.

  9. Norėdami sukurti meniu, įtraukite kelis mygtukus. Jei reikia, pervardykite mygtukus.

    Pridėti mygtukus.

  10. Pasirinkite Konteineris3 , pridėkite horizontalų konteinerį ir išjunkite Flexible height ypatybę. Nustatykite Height į 100. Nustatyti Align (vertical)Stretch.

  11. Pridėkite keletą piktogramų į konteinerį4. Pakeiskite piktogramas, kad jos skirtųsi nuo piktogramos savybės.

    Pridėkite piktogramų.

  12. Pasirinkite Konteineris4. Nustatykite Justify (horizontal) ypatybę į End. Nustatykite Align (vertical) į Center. Nustatykite Gap į 40, kad sukurtumėte tarpą tarp piktogramų.

  13. Pasirinkite Konteineris3. Nustatyti Align (horizontal)Stretch. Nustatyti Vertical OverflowScroll.

  14. Pridėkite skirtingą etiketę, įvestis, laikmenas , kol jos išsiplės už sudėtinio rodinio ribų. Pakeiskite stačiakampių spalvą, kad jos būtų skirtingos. Pamatysite slinkties juostą prieigai prie nematomo turinio.

    Pridėkite skirtingas įvestis.

  15. Pasirinkite „Peržiūra“ arba F5. Pakeiskite naršyklės lango dydį, kad pamatytumėte, kaip programėlė peisitaiko prie skirtingo dydžio ekranų.

Žinomos problemos

  • Tam tikri maketo talpyklės savybių deriniai nėra suderinami arba gali sukelti nepageidaujamus rezultatus, pvz.:

    • Jei konteinerio ypatybė Wrap įjungta, ypatybės Align nustatymas ignoruojamas antriniuose valdikliuose.
    • Jei konteinerio ypatybė Wrap yra išjungta, o konteinerio pagrindinės ašies perpildymas nustatytas kaip Slinkti (Horizontalus perpildymas horizontaliems konteineriams arba Vertikalus perpildymas vertikaliems konteineriams), rekomenduojama nustatyti ypatybę Justify kaip Pradėti arba Tarpas tarp.
    • Parinktys Centras arba Pabaiga gali lemti, kad antriniai valdikliai taps nepasiekiami, kai konteineris yra per mažas, kad būtų rodomi visi valdikliai, net jei Overflow ypatybė nustatyta kaip Slinkti.

  • „Canvas“ programėlėje negalima keisti valdiklių dydžio ar keisti jų padėties, nes vilkimo ir numetimo valdikliai maketo talpyklėse yra išjungti. Vietoje to maketo talpyklės savybės naudokite tam, kad gautumėte pageidaujamą dydį ir padėtį. Valdiklių tvarką galima keisti naudojant medžio rodinį arba rodyklių klavišus kaip sparčiuosius klavišus.

  • Šiuo metu maketo konteineriuose nepalaikomi valdikliai Duomenų lentelė, Diagramos ir Paveikslėlio pridėjimas .

  • Kai kurios maketo talpyklių savybės antriniams valdikliams yra paslėptos. Paslėptas savybes vis dar galima pasiekti iš formulių juostos arba iš išplėstinio skydo. Tačiau šios ypatybės bus ignoruojamos net jei jos ir bus nustatytos šiose vietose.

  • Kai valdikliai perkeliami į maketo konteinerį (pavyzdžiui, kopijuojant arba įklijuojant valdiklius), jie į konteinerį įterpiami pagal jų tvarką `medžio rodinyje`.

Taip pat žr.

Kurkite reaguojančius maketus

  • Paskutinį kartą atnaujinta