Märkus.
Juurdepääs sellele lehele nõuab autoriseerimist. Võite proovida sisse logida või kausta vahetada.
Juurdepääs sellele lehele nõuab autoriseerimist. Võite proovida kausta vahetada.
Kehtib selle Power Platform hästi läbimõeldud kogemuse optimeerimise kontrollnimekirja soovituse kohta:
| XO:06 | Säilitage kasutatavad ja visuaalselt atraktiivsed paigutused ekraani suuruste ja eraldusvõimete lõikes. Kasutage adaptiivseid tehnikaid sisu dünaamiliseks renderdamiseks mitmel viisil. |
|---|
Selles juhendis kirjeldatakse soovitusi ekraanipaigutuste kujundamiseks, mida on lihtne navigeerida ja mida on erinevates seadmetes sujuvalt kohandatud. See lähenemisviis tagab, et kasutajatel on järjepidev ja optimaalne vaatamiskogemus olenemata kasutatavast seadmest.
Määratlused
| Mõiste | Määratlus |
|---|---|
| Vaateava | Digitaalse liidese (nt veebibrauseri või mobiilirakenduse) nähtav osa, kus sisu kuvatakse. Vaateakna vahemikud on sageli seotud seadmeklassidega (mobiilseadmed, tahvelarvutid ja lauaarvutid) ekraani mõõtmete ja eraldusvõime alusel. |
| Murdepunktid | Konkreetsed piksliväärtused, mis määratlevad vaateava vahemikud, mida kasutatakse adaptiivse paigutuse käitumise määramiseks. |
Peamised disainistrateegiad
Tundlikud paigutused pakuvad paindlikku ja tõhusat kasutuskogemust erinevate aknasuuruste puhul. Nad kohanduvad sisu skaleerimise, elementide ümberkorraldamise ning teksti ja piltide valikulise kuvamise teel. Vastutustundlikud paigutused vastavad kasutajate vajadustele olenemata nende ekraani suurusest.
Ühtse rakenduseraami määramine
Rakenduse raam koosneb juhtelementide komplektist, mis on igal ekraanil pidevalt saadaval. See koosneb kolmest peamisest alamkomponendist: päisest, navigeerimisest ja sisupiirkonnast. Lihtsad rakendused kasutavad päisekomponenti paindlikult, samas kui keerukamad rakendused kasutavad mitme lehe lubamiseks sageli külgmist navigeerimist. Alamkomponendid on kohandatavad. Näiteks saate lisada päisesse globaalse otsingu või rühmitada üksused külgmisel navigeerimisribal, et see vastaks teie rakenduse vajadustele.
Rakenduse raami kolm peamist alamkomponenti on:
Päis on põhikomponent, mis on loodud olema osa igast sisemisest rakendusest. See koosneb alamkomponentidest, mis annavad kasutajatele juurdepääsu kogu süsteemi hõlmavatele funktsioonidele, aitavad neil kasutajaliidesele orienteeruda ja tagavad kogemuste järjepidevuse. See kuvatakse rakenduse raami ülaosas ja peaks säilima kõigil rakenduse lehtedel. Soovi korral võib see majutada globaalseid käske, nagu otsing, sätted, teatised, tagasiside, profiil või spikker. Rakenduse nimi peaks alati olema kuvatud ja ideaalis peaks see olema ka klõpsatav link avalehele või sihtlehele. Päis peaks reageerima ja käsud peaksid liikuma 600 piksli ja väiksemate vaateakende ületäitumise juhtnuppu. Otsingusisendi laius on samuti tundlik 1023 piksli ja alla selle.
Navigeerimine on juhtelementide süsteem, mis töötavad koos, et aidata kasutajatel teavet leida ja ülesandeid täita. See aitab kasutajatel hüpata rakenduse jaotisest sektsiooni. Hierarhiliselt ei ole see lisatud ühelegi lehele ega jaotisele, vaid eksisteerib kogu muu sisu kohal. See on alati olemas ja selle võib minimeerida ahendatud olekusse (nimetatakse ka raudtee olekuks), et vabastada lehe sisu jaoks lisaruumi. Väiksemate aknasuuruste korral saab selle minimeerida hüpikmenüüsse. Kõige levinumad navigeerimisvormid on ülemine navigeerimine ja külgmine navigeerimine. Ärge kasutage mõlemat korraga.
Sisupiirkond sisaldab ekraani fookust. Brauseriakna suurus mõjutab sisuraami ja põhisisupiirkonnas saadaolevat ruumi. See kaader kohandub iga komponendi katkestuspunkti ja vastava reageerimiskäitumise põhjal. Lisateavet leiate teemast Katkestuspunkti maatriksi loomine.
Sisupiirkond võib soovi korral sisaldada mitut alampiirkonda, mis on saadaval elementide ühtseks paigutuseks (nt lehepäis, tekstisisesed külgpaanid või sisu katvad paneelid).
Ühtse disainikeele järgimine koos värviskeemide, tüpograafia ja paigutusstruktuuriga aitab kasutajatel kiiresti tuvastada ja suhelda erinevate elementidega ilma segaduseta. Mida järjepidevamalt rakenduse raamimustrit kõigis sisemistes ärirakendustes kasutatakse, seda tugevamaks muutub kasutaja meeldetuletus või vaimne mudel. Tööstusstandardite või ühiste platvormimustritega vastavusse viimine suurendab seda efekti veelgi.
Pärast rakenduse raami määramist asub iga ekraani paigutus rakenduse raami sisualal.
Kasutage sisupiirkonda läbimõeldult
Kasutajad ihkavad sujuvaid kogemusi, kus teave on hõlpsasti kättesaadav, tekst on kergesti loetav ja esteetika pigem suurendab kui takistab kasutatavust. Seadke prioriteediks põhiteabe esialgne nähtavus, tagage veergude loetavus ja ühtlustage disainielemente esteetilise atraktiivsuse saavutamiseks.
Veenduge, et oluline teave oleks ekraani avamisel kohe nähtav, ilma et oleks vaja kerida. Seadke prioriteediks olulise teabe, näiteks navigeerimisvalikute, olulise sisu ja kasutatavate üksuste kuvamine ekraani ülaosas. Tasakaalu leidmine piisavate esemete kuvamise ja iga üksuse kohta üksikasjaliku teabe esitamise vahel on pidev väljakutse. Ja vastupidi, kuigi võib olla ahvatlev esitada kogu võimalik teave algses vaates, võib liiga palju teavet kasutajatele üle jõu käia ja põhielementide tähtsust nõrgendada. Kaaluge lühikeste kokkuvõtete või eelvaadete kasutamist, mis pakuvad pilguheit üksikasjalikumale sisule, meelitades kasutajaid süvenema. Armatuurlauad on optimeeritud selle eesmärgi täitmiseks suurte andmemahtude visualiseerimiseks.
Lisage mitu veergu, jaotist või rühmitust, et sisu loogiliselt korraldada ja ruumi maksimeerida. Pöörake hoolikalt tähelepanu veeru laiusele, tagades, et tekst jääb loetavaks ilma liigse koormuseta. Vältige liiga kitsaid veerge, mis sunnivad kasutajaid pidevalt horisontaalselt kerima, häirides suhtluse voogu. Seevastu liiga laiad veerud võivad takistada loetavust, nõudes kasutajatelt liinide jälgimist pikemate vahemaade tagant. Püüdke saavutada tasakaal, mis võimaldab mugavat lugemist, kasutades samal ajal olemasolevat ruumi tõhusalt.
Visuaalsete elementide suurus ja paigutus on sobilik, et luua visuaalselt meeldiv ja tasakaalustatud liides. Joondage pealdised vastavate visuaalide või pealkirjadega, säilitage elementide vahel ühtlane vahekaugus ja järgige kasutaja vajadustest lähtuvat hierarhiat. Kärpige tarbetuid kaunistusi ja eraldage pikslid mõistlikult kõige olulisematele elementidele. Seadke sisu ja navigeerimiselemendid tähtsuse järjekorda ja rõhutage, eriti navigeerimismahukates rakendustes või kodulehtedel, ning vältige üleliigseid kaunistusi, mis vähendavad kasutatavust.
Aluseks olev ruudustik võib olla kasulik elementide järjepidevaks paigutamiseks. Valitud ruudustiku käitumine peaks olema rakenduse iga ekraani sisupiirkonnas ühtlane ja seda saab rakendada ka komponendi tasemel, näiteks kaartidel või külgpaanidel. Kõige levinum veebirakendustes kasutatav ruudustiku paigutuse tüüp on veeruruudustik. Tundlike ekraanide rakendamiseks on soovitatav kasutada sujuvat (või venitatud) ruudustiku käitumist.
Kasutage väljakujunenud paigutusi ja rühmitusmustreid
Kasutage üldtunnustatud struktuure ja korraldusi sisu ja elementide korraldamiseks kasutajaliideses. Neid paigutusi ja mustreid on aja jooksul täiustatud ja tõhusaks osutunud, muutes need kasutajatele tuttavaks ja intuitiivseks, muutes samal ajal adaptiivsete mustrite rakendamise lihtsaks. Kui põhistsenaariumid ja elemendid on kindlaks tehtud, kaardistage igaüks väljakujunenud paigutusega, mis tagab parima suhtluse. Seadke prioriteediks ülesande täitmiseks oluline sisu ja funktsioonid. Otsustage, millised elemendid peaksid olema ekraanil alati nähtavad ja juurdepääsetavad ning milliseid saab peita või millele pääseb juurde teiste menüüde või toimingute kaudu.
Järgnev loend, kuigi see pole ammendav, kirjeldab väljakujunenud paigutusi, mida tavaliselt kasutatakse äri- või tootlikkuse rakendustes. Kõiki saab paigutada põhisisupiirkonda.
Maandumine/avakuva
Siht- või avakuva toimib rakenduse sisenemispunktina, andes kasutajatele ülevaate rakenduse pakkumistest või funktsioonidest. Tavaliselt on selle eesmärk köita külastajate tähelepanu ja julgustada tegema konkreetseid toiminguid, näiteks täitma esmakordset ülesannet või uurima täiendavat sisu. See sisaldab sageli kangelaspilte ja puhtaid navigeerimisvõimalusi.
See sobib ideaalselt kasutajate vastuvõtmiseks, pakkudes kiiret juurdepääsu põhifunktsioonidele, navigeerimisvalikutele või üleskutsetele ning seades tooni rakenduse kasutuskogemusele. Seadke esikohale selgus, lihtsus ja intuitiivne navigeerimine, et kasutajaid tõhusalt juhendada.
Armatuurlaud
Armatuurlaud on rakenduse tsentraliseeritud keskus, mis annab kasutajatele põhjaliku ülevaate asjakohastest andmetest või teabest. Sageli koosneb see kohandatavatest vidinatest või moodulitest, mis võimaldavad kasutajatel jälgida konkreetseid mõõdikuid või teha toiminguid.
Armatuurlauad sobivad keerukate andmekogumite või mitmetahuliste funktsioonidega rakendustele, võimaldades kasutajatel jälgida edusamme, analüüsida suundumusi ja teha teadlikke otsuseid ühe pilguga. Need on eriti kasulikud analüütikaplatvormidel, projektihaldustööriistades ja finantshaldusrakendustes.
Vorm
Vorm on struktureeritud paigutus, mis hõlbustab kasutajatelt andmete sisestamist ja koosneb tavaliselt väljadest erinevat tüüpi teabe (nt teksti, numbrite, kuupäevade ja valikute) sisestamiseks. Vormid on olulised kasutajate sisendi kogumiseks, tehingute töötlemiseks ja rakendustes suhtlemise hõlbustamiseks.
Neid kasutatakse tavaliselt registreerimisvoogudes, kassasse mineku protsessides, andmesisestusülesannetes ja igas muus stsenaariumis, mis nõuab kasutaja sisendit või tagasisidet.
Üksuse/profiili vaade
Üksuse või profiili vaade kuvab üksikasjalikku teavet konkreetse üksuse, näiteks kasutajaprofiili, tooteloendi või sisuüksuse kohta. Tavaliselt sisaldab see kirjeldavat teksti, multimeediaelemente ja asjakohaseid toiminguid või interaktsioone.
Need sobivad hästi rakenduse üksuste kohta üksikasjaliku teabe kuvamiseks. Need pakuvad kasutajatele põhjalikku teavet, hõlbustavad otsuste langetamist ja toetavad suhtlemist konkreetsete üksustega, näiteks kasutajaprofiilidega sotsiaalvõrgustike rakendustes või tooteloenditega e-kaubandusplatvormidel.
Loendileht
Loend või tabel kuvab üksuste või üksuste kogumit struktureeritud vormingus, sageli lineaarse või ruudustiku paigutusega. Tavaliselt sisaldab see iga üksuse lühikokkuvõtet või eelvaadet koos navigeerimisnuppudega sirvimiseks või filtreerimiseks.
Loendilehed on tõhusad suurte sisu- või andmekogumite esitamiseks arusaadavas vormingus, võimaldades kasutajatel tõhusalt skannida, otsida ja navigeerida. Kui konkreetsete ridade toimingud on lubatud, peaks protsess olema selge. Loendilehti kasutatakse tavaliselt sisuhaldussüsteemides, kataloogiloendites, otsingutulemustes ja uudistevoogudes.
Miniülevaade (jagatud ekraan)
Miniülevaade või jagatud ekraan jagab liidese kaheks eraldi osaks, kus vasakul pool kuvatakse loend ja paremal pool üksuste vaade. Loend sisaldab tavaliselt üksuste kogumit, samas kui üksuse vaade pakub loendis valitud üksuse kohta üksikasjalikku teavet.
See paigutus on eriti tõhus olukordades, kus kasutajad peavad kiiresti sirvima üksuste loendit ja vaatama iga üksuse kohta korraga üksikasjalikku teavet, näiteks hulgitoimingute tegemisel. Tootekataloogid, dokumendihaldussüsteemid, e-posti või suhtluskliendid ja ülesannete haldamise tööriistad (näiteks Azure Dev Ops päringuvaatur) on stsenaariumid, mis tavaliselt sellesse mustrisse sobivad.
Viisard
Viisard juhendab kasutajaid keeruka protsessi lõpuleviimiseks või konkreetse eesmärgi saavutamiseks läbi järjestikuste sammude või ülesannete, tavaliselt lineaarselt. See sisaldab sageli edenemisindikaatoreid, juhiseid ja valideerimiskontrolle. Võlurid on kasulikud keerukate protsesside lihtsustamiseks, kognitiivse ülekoormuse vähendamiseks ja kasutajate juhendamiseks harjumatute ülesannete või töövoogude kaudu. Neid kasutatakse tavaliselt sisseelamisvoogudes, seadistusprotsessides, mitmeastmelistes vormides ja ülesandepõhistes interaktsioonides, näiteks keerukate sätete või tehingute konfigureerimisel.
Kohanda ja ehita standardpaigutust vastavalt konkreetsetele nõuetele. See protsess võib hõlmata elementide lisamist või eemaldamist, elementide suuruse ja paigutuse kohandamist ning stiili rakendamist vastavalt brändi identiteedile või visuaalse disaini juhistele. Katsetage standardpaigutuse erinevaid konfiguratsioone ja variatsioone, et leida sisu ja üldise kasutajakogemuse jaoks kõige tõhusam paigutus.
Kõikide seadmete kujunduspaigutused
Paigutused on määratletud reeglite ja sisu tahtliku korralduse kulminatsioon. Sisu läbimõeldud struktuuridesse koondamine on võtmetähtsusega, kuid selle sujuvaks ja selge hierarhiaga toimimiseks eri platvormidel ja ekraanisuurustel on vaja skaleerimisloogikat. Nii adaptiivne kui ka reageeriv disain saavad sellele väljakutsele eraldi lahenduse. Mõnel juhul on õige valik adaptiivse ja responsiivse disaini kombinatsioon.
Kohanduv disain kasutab ainult ühte paigutust, kus sisu on sujuv ja kohandub muutuva vormingu suurusega. See disainitehnika kasutab meediapäringuid antud seadme omaduste kontrollimiseks ja sisu vastavalt renderdamiseks. Responsiivne disain võimaldab teil funktsiooni luua üks kord ja see toimib tõhusalt kõigis ekraanisuurustes.
Adaptiivne paigutus muutub täielikult olenevalt esitamise vormingust. Adaptiivsel disainil on mitu fikseeritud paigutuse suurust ja see käivitab brauseri antud paigutuse laadimiseks olemasoleva ruumi põhjal. Adaptiivse disainiga loodud veebisaidid kasutavad katkestuspunktide tuvastamiseks meediapäringuid, sarnaselt responsiivse disainiga. Samuti kasutavad nad seadme võimete põhjal täiendavat märgistust. Seda protsessi nimetatakse "progressiivseks täiustamiseks".
Ümberpaigutamine
Muutke lehe elementide asukohta.
Hoidke oma sisu korrastatuna, loetavana ja tasakaalustatuna, optimeerides kompositsiooni akna suuruse suurenedes. Näiteks saab mobiilse vaateakna vertikaalselt virnastatud elemente suuremates vaateakendes horisontaalselt ümber paigutada. See muudatus järgib loomulikku vasakult paremale lugemisjärjekorda, loob kujunduses tasakaalu ja säilitab visuaalse fookuse lehe põhielementidel.
Muuda suurust
Lehe elementide suuruse ja veeriste reguleerimine.
Rikkaliku kasutuskogemuse optimeerimiseks muutke lehe elementide suurust, kuvades akna ülaosas rohkem sisu ja vähendades vertikaalse kerimise vajadust. Lehekülje veeriste lisamiseks ja küljenduse tasakaalustamiseks kohanda lehe veeriseid, mis laseb sisul hingata ja suurendab kujunduse visuaalset atraktiivsust. Näiteks võib kangelaskomponent venitada kogu akna laiuseks, et kuvada rohkem taustapilti. Pildi all olevat sisu võib laiendada, kuid paigutuse mitmekesisuse suurendamiseks ja visuaalse hierarhia määratlemiseks kasutage erinevaid veeriseid.
Ümberpaigutus
Optimeeri leheelementide voogu.
Kohanda lehe elemente, et need oleksid täielikult kuvatud, võttes arvesse akna suurust ja suunda ning korraldades sisu ümber. Näiteks saab väiksemas aknas ühe sisuveeru ümber paigutada suuremas aknas, et kuvada kahte tekstiveeru. See tehnika võimaldab kuvada rohkem sisu "voldi kohal".
Näita/peida
Optimeeri sisu akna suuruse ja suuna järgi.
Näita või peida leheelemente, et optimeerida sisu akna suuruse ja suuna järgi. See reageeriv tehnika kohandab teabe hulka vaatamise kontekstiga. Näiteks väikesel ekraanil kuvatavate kategooriate puhul võidakse kuvada piiratud metaandmeid, nagu pilt, pealkiri ja link, et muu teave oleks nähtav ja aitaks kasutajal keskenduda. Suuremal ekraanil saavad kategooriad kuvada täiendavaid metaandmeid, näiteks isikut, kuupäeva ja lühikirjeldust, mahtudes samal ajal vaatevälja.
Ümberarhitekt
Olulise teabe ja toimingute fookuse säilitamiseks hargne või ahenda leheelemente ja sisu.
See lähenemisviis sarnaneb teie kujunduses "järkjärgulise avalikustamise" tava järgimisega, kuid erinevate akna suuruste ja suundade puhul. Näiteks akna laiendamine võimaldab kuvada üksikasjade kõrval üksuste loendit. See visuaalne seos sisu vahel võimaldab kasutajatel hõlpsalt valida teise üksuse. Väiksemal ekraanil jääb fookus põhiteabe kuvamisele.
Loo murdepunktide maatriks
Katkestuspunktide maatriks on rakenduse kujunduse reageeriva või adaptiivse käitumise graafiline kujutis erinevates ekraanisuurustes ja -orientatsioonides. Tavaliselt esitab see struktureeritud ruudustiku või paigutuse, mis kirjeldab disaini reaktsiooni erinevatel murdepunktidel. Iga segment vastab erinevale ekraani laiusele, pakkudes ülevaadet disaini struktuurist, paigutusest ja funktsionaalsusest. Katkestuspunktide maatriks hõlmab ekraani laiuse, vaatevälja orientatsiooni, kujunduselementide, paigutuse struktuuri, sisu esituse, navigeerimise, meedia ja interaktiivsete komponentide kaalutlusi, et illustreerida, kuidas veebisaidi või rakenduse kujundus reageerib erinevatele ekraanisuurustele ja -orientatsioonidele. See lähenemisviis mitte ainult ei aita iga ekraani kujundust lõpule viia, vaid muudab ka juurutamise lihtsamaks, kui võtmekomponentide omaduste muudatusi selgelt jälgitakse ja hästi edastatakse.
Power Platform hõlbustamine
Mudelipõhise rakenduse vormipaigutused konfigureeritakse kasutades Power Apps Studio. Vormi kujundaja võimaldab loojatel lisada elemente ruudustiku struktuuri, mis muudab vormilehed loomupäraselt responsiivseks. Manustatud kohandatud komponendid, näiteks kohandatud lehed, manustatud lõuendikomponendid ja Power Apps komponentide raamistiku koodikomponendid peavad oma implementatsioonis sisaldama reageerimisvõimet. Näiteks peavad kohandatud lehed korrektseks toimimiseks rakendama reageerivat käitumist samamoodi nagu puhas lõuendirakendus.
Lõuendirakendused nõuavad iga komponendi jaoks selget konfiguratsiooni, et rakendada reageerimisvõimet , mis võimaldab suuremat kontrolli kogemuse üle. Ekraanisuurused määratakse rakenduse definitsioonis, millele saab viidata asukoha, käitumise, nähtavuse ja muude asjakohaste omaduste määramiseks.