Diseinatu eredu pertsonalizatutako aplikaziorako orrialde pertsonalizatua

Artikulua
03/15/2023

Artikulu honek orrialde pertsonalizatua diseinatzeko aholkuak eskaintzen ditu ereduek gidatutako aplikazio batean erabiltzeko.

Garrantzitsua

Orrialde pertsonalizatuak produktuaren aldaketa nabarmenak dituzten ezaugarri berriak dira eta gaur egun Orri pertsonalizatuak ezagutzen diren gaiak atalean azaldutako muga ezagunak dituzte.

Onartutako kontrolak orri pertsonalizatu batean

Orrialde pertsonalizatuak egiterakoan mihise aplikazioen kontrol azpimultzoa onartzen da. Beheko taulan unean onartutako kontrolak zerrendatzen dira.

Kontrol	Kontrol mota	Oharrak
Etiketa¹	Bistaratu
Testu-koadroa¹	Sarrera
Data hautatzailea¹	Sarrera
Botoia¹	Sarrera
Konbinazio-koadroa¹	Sarrera
Egiaztatu koadroa¹	Sarrera
Txandakatu¹	Sarrera
Radio Taldea¹	Sarrera
Irristailua¹	Sarrera
Balorazioa¹	Sarrera
Edukiontzi Bertikala	Diseinua	Erantzun duen diseinu horizontaleko edukiontzi berria
Edukiontzi Horizontala	Diseinua	Erantzun duen diseinu horizontaleko edukiontzi berria
Testu aberastuaren editorea	Sarrera
Galeria	Zerrenda
Icon	Multimedia
Image	Multimedia
Editatu inprimakia	Sarrera
Bistaratu Inprimakia	Sarrera
Kodearen osagaiak	Pertsonalizatu	Gehitu kodeen osagaiak orrialde pertsonalizatu batera
Mihise osagaiak (aurrebista)	Pertsonalizatu	Gehitu kodeen osagaiak orrialde pertsonalizatu batera

¹ Kontrola kontrol moderno berria da. Kontrola honetarako sartu zen: mihise aplikazioak Teams-en. Kontrola Fluent UI liburutegia oinarrituta dago Power Apps Component Framework-ekin bilduta.

Osagai pertsonalizatuak orri pertsonalizaturako euskarria

Kode baxuko (mihisearen osagaiak) eta pro-kodearen (kodearen osagaiak) pertsonalizatutako UX osagaiak gehi ditzakezu zure ingurunean eta fabrikatzaile guztientzako erabilgarri jar ditzakezu. Pertsonalizatutako orrialde espezifikoen UX hedagarritasunari buruzko artikuluak ikusteko, ikusi gehitu mihisearen osagaiak zure eredu bidezko aplikaziorako orri pertsonalizatu batera eta gehitu kode osagaiak eredu pertsonalizatutako zure aplikaziorako orri pertsonalizatura.

Orokorrean, kode txikiko hedagarritasun ikuspegia eraikitzeko, probatzeko eta mantentze kostu txikiagoa du. Mihisearen osagaiak lehenbailehen ebaluatzea gomendatzen dugu eta gero kode osagaiak erabiltzea pertsonalizazio konplexu eta aurreratuagoak egiteko beharra baldin badago.

Informazio gehiago:

Gaitu erantzuteko diseinua edukiontziaren kontrolarekin

Orrialde pertsonalizatuen diseinu sentikorrak definitzen dira Diseinu horizontaleko edukiontzia eta Diseinu bertikaleko edukiontzia kontrolen hierarkia eraikiz. Kontrol hauek mihise aplikazioen diseinatzailean aurkitzen dira Diseinua atalean Txertatu fitxan.

Ezarri pantailaren gutxieneko altuera eta zabalera Aplikazioa objektua orri-mailako korritze-barrak saihesteko eta gorputz bertikala korritze-barra erabiltzeko.

MinScreenHeight=200
MinScreenWidth=200

Aukeran, orri pertsonalizatuaren diseinuaren tamaina egokitu daiteke Ezarpenak > Bistaratzea hurrengoarekin Tamaina ezarri Pertsonalizatua. Ondoren, ezarri Zabalera eta Altuera mahaigaineko orri pertsonalizatuen tamaina tipikoago batera 1080 zabalera eta 768 altuera bezalakoak. Kontrolak pantailan gehitu ondoren ezarpen hau aldatzeak diseinu-propietate batzuk berrezartzea eragin dezake.

Ezarri goiko edukiontzia espazio osoa bete dezan eta aldatu tamaina eskuragarri dagoen espazioaren arabera.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Altuera malguko edukiontzi baten bilgarri horizontala

Orriak mahaigainetik zabalera estu batera doitzeko, gaitu propietate hauek altuera malgua duen edukiontzi horizontal batean. Ezarpen horiek gabe, orrialdeak kontrolak moztuko ditu orria estua denean.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Edukiontzi honen azpian zuzenean dauden haurren edukiontziak edo kontrolak orriari 300 px-ko zabaleran sartzeko gutxieneko zabalera izan dezan ezarri behar dira. Kontuan hartu edukiontziaren edo kontrolaren betegarritasuna eta baita gurasoen edukiontziak ere.

Zabalera malguko edukiontzi baten bilgarri bertikala

Orriak mahaigainetik zabalera estu batera doitzeko, gaitu propietate hauek zabalera malgua duen edukiontzi bertikal batean. Ezarpen horiek gabe, orrialdeak kontrolak moztuko ditu orria estua denean.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Edukiontzi honen azpian zuzenean dauden haurren edukiontziak edo kontrolak orriari 300 px-ko altueran sartzeko gutxieneko zabalera izan dezan ezarri behar dira. Kontuan hartu edukiontziaren edo kontrolaren betegarritasuna eta baita gurasoen edukiontziak ere.

Informazio gehiago: Sentikorrena den diseinua eraikitzen.

Edukiontzi bertikala goiburu finkoarekin, gorputz malgua, oin finkoa

Edukiontzi bertikala, ezarri Alineatu (horizontala) Luzatu-ra
Txertatu hiru Horizontal Edukiontzi guraso barruan Edukiontzi bertikala
Lehenengo eta hirugarren haurren edukiontzi horizontalen kontroletan, ezarri Luzatu altuera off eta murriztu altuera behar den tokira, hala nola Altuera=80.

Edukiontzi horizontala haurrentzako bi edukiontzi bikoitzekin

Gurpileko edukiontzi horizontalean, ezarri Alineatu (bertikala) Luzatu.
Txertatu hiru Horizontal Edukiontzi kontrol Edukiontzi bertikala guraso barruan.

Orrialde pertsonalizatuen kontrolak diseinatzea, modeloek gidatutako aplikazioen kontroletara lerrokatzeko

Aplikazioen diseinatzaile modernoaren orrialde pertsonalizatua sortuz, ezaugarri horiek balio lehenetsiak erabiltzen dituzte.

Orri pertsonalizatuko gaia. Orri pertsonalizatu batean erabilitako kontrolen gaien balioak automatikoki ezartzen dira interfaze bateratuko gai urdin lehenetsiarekin bat etortzeko. Gai lehenetsi hau estudioan zein aplikazioen exekuzioan erabiltzen da. Gaia hautatzea esplizituki kentzen da orrialde pertsonalizatuak sortzeko.
Kontrolek letra-tamaina ezberdina erabili behar dute, hau da, orrien hierarkian duten posizioan oinarrituta.

Oharra

Orrialde pertsonalizatuko testuak 1.33 eskalatzen du, beraz, FontSize x 1.33 zatitu behar duzu nahi duzun tamaina lortzeko.

Etiketa Mota Bideratu FontSize FontSize erabiltzeko

Orriaren izenburua 17 12.75

Etiketa normalak 14 10.52

Etiketa txikiak 12 9.02

Etiketa Mota	Bideratu FontSize	FontSize erabiltzeko
Orriaren izenburua	17	12.75
Etiketa normalak	14	10.52
Etiketa txikiak	12	9.02

Lehen eta bigarren botoi kontrolek estilo aldaketa hauek behar dituzte:

Botoi nagusiak

Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Bigarren mailako botoiak

Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal

Orrialde pertsonalizatuek ostatatzeko ereduak gidatutako aplikazioak erabiltzen duen fitxa nabigazio diseinu bera jarraitzen dute. Bisualki lerrokatutako HTML egitura semantikoari esker, erabiltzaileek orrialde pertsonalizatuak ondo nabigatzen dituzte teklatua edo pantaila irakurgailua erabiltzen dutenean. Kontuan izan mihise autonomoko aplikazioek ez bezala, orrialde kontrol pertsonalizatuek eta UX elementu batzuek ez dutela fitxa zenbakien esleipen espliziturik behar. Kontrol modernoek ez dute TabIndex propietaterik eta HTML egitura semantikoa erabiltzen dute nabigaziorako.

Zenbait elementu, hala nola kontrolak, mihisearen eta kodeen osagaiak, edukiontziak eta abar, fitxan jar daitezke orriaren diseinu pertsonalizatuan duten posizioaren arabera. Fitxa nabigazioa Z ordenako nabigazioari jarraitzen dio. Osagaiak bezalako taldekatze elementu handiagoen barruko tabulazioen banaketak edukiontzietan nabigatzen dira lehenik eta behin fitxa dokumentu objektuen ereduaren (DOM) zuhaitzaren hurrengo elementura atera aurretik.

Hona hemen adibide bat nabigazioarekin kontrolak, kodea eta mihisearen osagaiak eta edukiontziak dituen orriarekin.

Oharra

Orrialde pertsonalizatuan kontrolak eta elementuak gainjartzeak ez ditu DOM bateratuko, beraz, tabulazioak ikusizko diseinutik sinkronizatuta egon daitezke. Gauza bera gertatzen da formulak erabiliz elementu dinamikoen kokapenean.