opomba,
Dostop do te strani zahteva pooblastilo. Poskusite se vpisati alispremeniti imenike.
Dostop do te strani zahteva pooblastilo. Poskusite lahko spremeniti imenike.
Velja za to priporočilo kontrolnega seznama za dobro arhitekturno optimizacijo uporabniške izkušnje: Power Platform
| XO:06 | Ohranite uporabne in vizualno privlačne postavitve ne glede na velikost in ločljivost zaslona. Uporabite prilagodljive tehnike za dinamično upodabljanje vsebine na različne načine. |
|---|
Ta priročnik opisuje priporočila za oblikovanje postavitev zaslona, ki jih je enostavno krmariti in se tekoče prilagajajo različnim napravam. Ta pristop zagotavlja uporabnikom dosledno in optimalno izkušnjo gledanja ne glede na napravo, ki jo uporabljajo.
Definicije
| Trajanje | Definicija |
|---|---|
| Vidno polje | Vidni del digitalnega vmesnika, kot je spletni brskalnik ali mobilna aplikacija, kjer se prikazuje vsebina. Obsegi vidnega polja so pogosto povezani z razredi naprav (mobilne naprave, tablični računalniki in namizni računalniki) glede na dimenzije in ločljivosti zaslona. |
| Prelomne točke | Specifične vrednosti slikovnih pik, ki določajo obseg vidnega polja, uporabljenega za določanje prilagodljivega vedenja postavitve. |
Ključne strategije oblikovanja
Odzivne postavitve zagotavljajo prilagodljivo in učinkovito uporabniško izkušnjo v različnih velikostih oken. Prilagajajo se s spreminjanjem velikosti vsebine, prerazporejanjem elementov in selektivnim prikazovanjem besedila in slik. Odgovorne postavitve ustrezajo potrebam uporabnikov ne glede na velikost njihovega zaslona.
Določite dosleden okvir aplikacije
Okvir aplikacije je sestavljen iz nabora kontrol, ki so dosledno na voljo na vsakem zaslonu. Sestavljen je iz treh glavnih podkomponent: glave, navigacije in območja vsebine. Preproste aplikacije imajo prilagodljivost uporabe komponente glave, medtem ko bolj dovršene aplikacije pogosto uporabljajo stransko navigacijo za omogočanje več strani. Podkomponente so prilagodljive. Na primer, v glavo lahko vključite globalno iskanje ali pa elemente združite v stranski navigaciji, da ustrezajo zahtevam vaše aplikacije.
Tri glavne podkomponente okvirja aplikacije so:
Glava je osrednja komponenta, zasnovana tako, da je del vsake interne aplikacije. Sestavljen je iz podkomponent, ki uporabnikom omogočajo dostop do funkcij celotnega sistema, jim pomagajo pri orientaciji v uporabniškem vmesniku in zagotavljajo doslednost med izkušnjami. Prikaže se na vrhu okvirja aplikacije in bi moral biti prisoten na vseh straneh aplikacije. Po želji lahko gosti globalne ukaze, kot so iskanje, nastavitve, obvestila, povratne informacije, profil ali pomoč. Ime aplikacije mora biti vedno prikazano in idealno bi moralo služiti tudi kot povezava do domače ali ciljne strani, na katero je mogoče klikniti. Glava mora biti odzivna, ukazi pa se morajo premakniti v kontrolnik prelivanja v vidnih poljih, ki so velika 600 slikovnih pik ali manj. Širina iskalnega vnosa je odzivna tudi pri 1023 slikovnih pikah in manj.
Navigacija je sistem kontrolnikov, ki delujejo skupaj, da uporabnikom pomagajo najti informacije in opraviti naloge. Uporabnikom pomaga pri prehajanju iz enega razdelka v drugi del aplikacije. Hierarhično ni pritrjena na nobeno stran ali razdelek, ampak obstaja nad vso ostalo vsebino. Vedno je prisoten in ga je mogoče minimizirati v strnjeno stanje (imenovano tudi železniško stanje), da se sprosti dodaten prostor za vsebino strani. Pri manjših velikostih oken ga je mogoče minimizirati v pojavni meni. Najpogostejši obliki navigacije sta zgornja navigacija in stranska navigacija. Ne uporabljajte obeh hkrati.
Območje vsebine vsebuje fokus zaslona. Velikost okna brskalnika vpliva na okvir vsebine in prostor, ki je na voljo v glavnem območju vsebine. Ta okvir se prilagaja glede na prelomno točko in ustrezno odzivno vedenje vsake komponente. Več o tem si preberite v razdelku Ustvarjanje matrike prelomnih točk.
Območje vsebine lahko po želji vsebuje več podregij, ki so na voljo za dosledno postavitev elementov, kot so glava strani, stranska podokna v vrstici ali plošče, ki prekrivajo vsebino.
Upoštevanje doslednega oblikovalskega jezika z barvnimi shemami, tipografijo in strukturo postavitve uporabnikom pomaga hitro prepoznati in komunicirati z različnimi elementi brez zmede. Bolj dosledno kot se vzorec okvirja aplikacije uporablja v vseh internih poslovnih aplikacijah, močnejši postane uporabnikov spomin oziroma miselni model. Usklajevanje z industrijskimi standardi ali vzorci skupnih platform ta učinek še okrepi.
Ko je okvir aplikacije določen, se postavitev vsakega zaslona nahaja znotraj območja vsebine okvirja aplikacije.
Premišljeno uporabite območje vsebine
Uporabniki hrepenijo po brezhibnih izkušnjah, kjer so informacije zlahka dostopne, besedilo enostavno berljivo in estetika izboljšuje uporabnost, ne pa jo ovira. Dajte prednost začetni vidnosti ključnih informacij, zagotovite berljivost v vseh stolpcih in uskladite oblikovne elemente za estetsko privlačnost.
Zagotovite, da so bistvene informacije takoj vidne ob odpiranju zaslona brez potrebe po pomikanju. Dajte prednost prikazu bistvenih informacij, kot so možnosti navigacije, ključna vsebina in elementi, ki jih je mogoče uporabiti, blizu vrha zaslona. Iskanje ravnovesja med prikazom zadostnega števila artiklov in zagotavljanjem podrobnih informacij za vsak artikel je stalen izziv. Nasprotno pa je lahko skušnjava, da bi v začetnem pogledu navedli vse možne informacije, vendar preveč informacij tvega, da bo uporabnike preobremenilo in zmanjšalo pomen ključnih elementov. Razmislite o uporabi jedrnatih povzetkov ali predogledov, ki ponujajo vpogled v podrobnejšo vsebino in s tem uporabnike spodbujajo k poglobljenemu branju. Nadzorne plošče so optimizirane za ta namen vizualizacije velikih količin podatkov.
Vključite več stolpcev, razdelkov ali skupin, da logično organizirate vsebino in povečate prostor. Bodite pozorni na širino stolpcev in poskrbite, da bo besedilo ostalo berljivo brez pretiranega naprezanja. Izogibajte se preozkim stolpcem, ki uporabnike silijo v nenehno vodoravno pomikanje in s tem motijo potek interakcije. Nasprotno pa lahko pretirano široki stolpci ovirajo berljivost, zaradi česar morajo uporabniki slediti vrsticam na daljših razdaljah. Prizadevajte si za ravnovesje, ki omogoča udobno branje, hkrati pa učinkovito izkorišča razpoložljivi prostor.
Vizualne elemente ustrezno dimenzionirajte in namestite, da ustvarite vizualno prijeten in uravnotežen vmesnik. Poravnajte napise z ustreznimi vizualnimi elementi ali naslovi, ohranite dosleden razmik med elementi in se držite hierarhije glede na potrebe uporabnikov. Odrežite nepotrebne okraske in preudarno dodelite slikovne pike elementom, ki so najpomembnejši. Dajte prednost in poudarite vsebinske in navigacijske elemente, zlasti v aplikacijah ali na domačih straneh, ki intenzivno uporabljajo navigacijo, in se izogibajte odvečnim okraskom, ki zmanjšujejo uporabnost.
Osnovna mreža je lahko uporabna za dosledno razporejanje elementov. Izbrano vedenje mreže mora biti dosledno na vseh področjih vsebine zaslona v aplikaciji in se lahko uporabi tudi na ravni komponent, kot so kartice ali stranska podokna. Najpogostejša vrsta postavitve mreže, ki se uporablja v spletnih aplikacijah, je stolpčna mreža. Za implementacijo odzivnih zaslonov je priporočljivo vedenje fluidne (ali raztegljive) mreže.
Uporabite ustaljene postavitve in vzorce združevanja
Za organiziranje vsebine in elementov znotraj uporabniškega vmesnika uporabite splošno prepoznane strukture in ureditve. Te postavitve in vzorci so bili sčasoma izpopolnjeni in dokazano učinkoviti, zaradi česar so uporabnikom znani in intuitivni, hkrati pa olajšajo implementacijo prilagodljivih vzorcev. Ko so ključni scenariji in elementi opredeljeni, jih preslikajte v ustaljeno postavitev, ki zagotavlja najboljšo interakcijo. Dajte prednost vsebini in funkcijam, pomembnim za dokončanje naloge. Določite, kateri elementi naj bodo vedno vidni in dostopni na zaslonu ter kateri so lahko skriti ali dostopni prek drugih menijev ali dejanj.
Naslednji seznam, čeprav ni izčrpen, opisuje uveljavljene postavitve, ki se pogosto uporabljajo za poslovne ali produktivnostne aplikacije. Vse je mogoče postaviti znotraj glavnega območja vsebine.
Prihodnji/domači zaslon
Pristajalna stran ali začetni zaslon služi kot vstopna točka v aplikacijo in uporabnikom ponuja pregled ponudbe ali funkcij aplikacije. Običajno si prizadeva pritegniti pozornost obiskovalcev in jih spodbuditi k določenemu dejanju, kot je dokončanje prve naloge ali raziskovanje nadaljnje vsebine. Pogosto vsebuje glavne slike in čiste možnosti navigacije.
Idealen je za dobrodošlico uporabnikom, ponujanje hitrega dostopa do ključnih funkcij, možnosti navigacije ali pozivov k dejanju ter določanje tona izkušnje aplikacije. Dajte prednost jasnosti, preprostosti in intuitivni navigaciji za učinkovito vodenje uporabnikov.
Nadzorna plošča
Nadzorna plošča je centralizirano središče znotraj aplikacije, ki uporabnikom ponuja celovit pregled ustreznih podatkov ali informacij. Pogosto je sestavljen iz prilagodljivih gradnikov ali modulov, ki uporabnikom omogočajo spremljanje določenih meritev ali izvajanje dejanj.
Nadzorne plošče so primerne za aplikacije s kompleksnimi nabori podatkov ali večplastnimi funkcionalnostmi, saj uporabnikom omogočajo spremljanje napredka, analizo trendov in sprejemanje premišljenih odločitev na prvi pogled. Še posebej so uporabni v platformah za analitiko, orodjih za upravljanje projektov in aplikacijah za finančno upravljanje.
Obrazec
Obrazec je strukturirana postavitev, ki uporabnikom omogoča vnos podatkov, običajno sestavljena iz polj za vnos različnih vrst informacij, kot so besedilo, številke, datumi in izbori. Obrazci so bistveni za zbiranje uporabniških vnosov, obdelavo transakcij in omogočanje interakcij znotraj aplikacij.
Običajno se uporabljajo pri registracijskih potekih, postopkih plačila, nalogah vnosa podatkov in vseh scenarijih, ki zahtevajo uporabniški vnos ali povratne informacije.
Pogled entitete/profila
Pogled entitete ali profila prikazuje podrobne informacije o določeni entiteti, kot je uporabniški profil, seznam izdelkov ali element vsebine. Običajno vključuje opisno besedilo, multimedijske elemente in ustrezna dejanja ali interakcije.
Zelo primerni so za prikaz podrobnih informacij o elementih znotraj aplikacije. Uporabnikom zagotavljajo poglobljen vpogled, olajšajo odločanje in podpirajo interakcijo s specifičnimi subjekti, kot so uporabniški profili v aplikacijah za družbena omrežja ali seznami izdelkov na platformah za e-trgovino.
Seznam strani
Seznam ali tabela prikazuje zbirko elementov ali entitet v strukturirani obliki, pogosto predstavljeni v linearni ali mrežni postavitvi. Običajno vključuje kratke povzetke ali predoglede vsakega elementa, skupaj z navigacijskimi elementi za brskanje ali filtriranje.
Strani s seznami so učinkovite za predstavitev velikih naborov vsebine ali podatkov v prebavljivi obliki, kar uporabnikom omogoča učinkovito skeniranje, iskanje in navigacijo. Če so dejanja v določenih vrsticah omogočena, bi moral biti postopek jasen. Seznami se pogosto uporabljajo v sistemih za upravljanje vsebin, seznamih imenikov, rezultatih iskanja in virih novic.
Mini pregled (razdeljen zaslon)
Mini pregled ali razdeljeni zaslon deli vmesnik na dva ločena dela, s seznamom, prikazanim na levi strani, in pogledom elementov na desni. Seznam običajno vsebuje zbirko elementov, medtem ko pogled elementov ponuja podrobne informacije o izbranem elementu na seznamu.
Ta postavitev je še posebej učinkovita v primerih, ko morajo uporabniki hitro brskati po seznamu elementov in si hkrati ogledati podrobne informacije o vsakem elementu, na primer pri izvajanju množičnih operacij. Katalogi izdelkov, sistemi za upravljanje dokumentov, e-poštni ali komunikacijski odjemalci in orodja za upravljanje opravil (na primer pregledovalnik poizvedb Azure Dev Ops) so scenariji, ki običajno ustrezajo temu vzorcu.
Čarovnik
Čarovnik vodi uporabnike skozi vrsto zaporednih korakov ali nalog, običajno linearno, da dokončajo kompleksen postopek ali dosežejo določen cilj. Pogosto vključuje kazalnike napredka, pozive in preverjanja veljavnosti. Čarovniki so koristni za poenostavitev kompleksnih procesov, zmanjšanje kognitivne preobremenitve in vodenje uporabnikov skozi neznane naloge ali delovne procese. Pogosto se uporabljajo v potekih uvajanja, postopkih nastavitve, večstopenjskih obrazcih in interakcijah, ki temeljijo na nalogah, kot je konfiguriranje kompleksnih nastavitev ali transakcij.
Prilagodite in nadgradite standardno postavitev, da bo ustrezala specifičnim zahtevam. Ta postopek lahko vključuje dodajanje ali odstranjevanje elementov, prilagajanje velikosti in položaja elementov ter uporabo oblikovanja, ki ustreza identiteti blagovne znamke ali smernicam za vizualno oblikovanje. Eksperimentirajte z različnimi konfiguracijami in različicami standardne postavitve, da najdete najučinkovitejšo razporeditev vsebine in celotne uporabniške izkušnje.
Oblikovanje postavitev za vse naprave
Postavitve so vrhunec določenih pravil in namerne organizacije vsebine. Ključnega pomena je, da vsebino združite v premišljene strukture, vendar je za to, da vse skupaj teče skupaj z jasno hierarhijo na različnih platformah in velikostih zaslonov, potrebna logika skaliranja. Prilagodljivo in odzivno oblikovanje lahko vsak posebej reši ta izziv. V nekaterih primerih je kombinacija prilagodljivega in odzivnega oblikovanja prava izbira.
Odziven dizajn uporablja samo eno postavitev, kjer je vsebina tekoča in se lahko prilagodi spreminjajoči se velikosti formata. Ta tehnika oblikovanja uporablja medijske poizvedbe za pregled značilnosti določene naprave in ustrezno upodablja vsebino. Odziven dizajn vam omogoča, da funkcijo ustvarite enkrat in jo nato učinkovito prikažete na vseh velikostih zaslona.
Prilagodljiva postavitev se v celoti spremeni glede na obliko, v kateri je predstavljena. Prilagodljivo oblikovanje ima več fiksnih velikosti postavitve in sproži brskalnik, da naloži določeno postavitev glede na razpoložljivi prostor. Spletna mesta, zgrajena s prilagodljivim oblikovanjem, uporabljajo medijske poizvedbe za zaznavanje prelomnih točk, podobno kot odzivno oblikovanje. Uporabljajo tudi dodatne oznake glede na zmogljivosti naprave. Ta postopek je znan kot "postopno izboljševanje".
Premestitev
Spremenite položaj elementov strani.
Z optimizacijo kompozicije, ko se velikost okna poveča, ohranite svojo vsebino organizirano, berljivo in uravnoteženo. Na primer, navpično zložene elemente v mobilnem vidnem oknu je mogoče v večjih vidnih poljih vodoravno prestaviti. Ta sprememba sledi naravnemu vrstnemu redu branja od leve proti desni, ustvarja ravnovesje v oblikovanju in ohranja vizualni fokus na ključnih elementih strani.
Spremeni velikost
Prilagodite velikost in robove elementov strani.
Spremenite velikost elementov strani, da optimizirate bogato uporabniško izkušnjo, tako da na vrhu okna prikažete več vsebine in zmanjšate potrebo po navpičnem pomikanju. Prilagodite robove strani, da dodate bel prostor in ravnovesje postavitvi, kar omogoča, da vsebina diha in izboljša vizualno privlačnost oblikovanja. Na primer, komponenta hero se lahko raztegne na celotno širino okna, da prikaže večji del slike ozadja. Vsebino pod sliko je mogoče razširiti, vendar uporabite različne robove, da dodate raznolikost postavitvi in pomagate opredeliti vizualno hierarhijo.
Vnovično razporejanje
Optimizirajte pretok elementov strani.
Prilagodite elemente strani, da zagotovite njihovo polno prikazovanje, pri čemer upoštevajte velikost in orientacijo okna, tako da prerazporedite vsebino. Na primer, en sam stolpec vsebine v manjšem oknu je mogoče v večjem oknu prerazporediti tako, da se prikažeta dva stolpca besedila. Ta tehnika omogoča prikaz več vsebine »nad pregibom«.
Prikaži/skrij
Optimizirajte vsebino glede na velikost okna in njegovo orientacijo.
Prikažite ali skrijte elemente strani, da optimizirate vsebino glede na velikost okna in njegovo orientacijo. Ta odzivna tehnika prilagodi količino informacij kontekstu gledanja. Na primer, kategorije, ki se prikazujejo na majhnem zaslonu, lahko prikazujejo omejene metapodatke, kot so slika, naslov in povezava, tako da so vidne druge informacije, ki uporabniku pomagajo pri osredotočanju. Na večjem zaslonu lahko kategorije prikažejo dodatne metapodatke, kot so oseba, datum in kratek opis, hkrati pa se še vedno prilegajo vidnemu polju.
Rearhitekt
Razdelite ali strnite elemente in vsebino strani, da ohranite fokus na pomembnih informacijah in dejanjih.
Ta pristop je podoben uporabi prakse "postopnega razkrivanja" v vaši zasnovi, vendar za različne velikosti in orientacije oken. Na primer, razširitev okna omogoča prikaz seznama elementov poleg podrobnosti. Ta vizualna povezava med vsebino uporabnikom omogoča enostavno izbiro drugega elementa. Na manjšem zaslonu ostaja poudarek na prikazu ključnih informacij.
Ustvarite matriko prelomnih točk
Matrika prelomnih točk služi kot grafični prikaz odzivnega ali prilagodljivega vedenja zasnove aplikacije na različnih velikostih in orientacijah zaslona. Običajno predstavlja strukturirano mrežo ali postavitev, ki podrobno opisuje odziv zasnove na različnih prelomnih točkah. Vsak segment ustreza različni širini zaslona, kar ponuja vpogled v strukturo, postavitev in funkcionalnost zasnove. Matrika prelomnih točk zajema upoštevanje širine zaslona, orientacije vidnega polja, oblikovalskih elementov, strukture postavitve, predstavitve vsebine, navigacije, medijev in interaktivnih komponent, da ponazori, kako se zasnova spletnega mesta ali aplikacije odziva na različnih velikostih in orientacijah zaslona. Ta pristop ne le pomaga pri dokončanju zasnove vsakega zaslona, temveč tudi olajša implementacijo, ko se spremembe lastnosti ključnih komponent izrecno spremljajo in dobro sporočajo.
Power Platform olajšanje
Postavitve obrazcev aplikacij, ki jih poganja model, so konfigurirane z uporabo Power Apps Studio. Oblikovalec obrazcev omogoča ustvarjalcem dodajanje elementov v mrežno strukturo, kar omogoča, da so strani obrazcev že po naravi odzivne. Vgrajene komponente po meri, kot so strani po meri, vgrajene komponente platna in Power Apps komponente kode ogrodja komponent , morajo v svoje implementacije vključiti odzivno vedenje. Na primer, strani po meri morajo za pravilno delovanje implementirati odzivno vedenje na enak način kot čista aplikacija s platnom.
Aplikacije platna zahtevajo eksplicitno konfiguracijo za vsako komponento, da implementirajo odzivno vedenje, kar omogoča večji nadzor nad izkušnjo. Velikosti zaslona so določene v definiciji aplikacije, na katero se je mogoče sklicevati za določitev položaja, vedenja, vidnosti in drugih ustreznih lastnosti.