Napomena
Za pristup ovoj stranici potrebna je autorizacija. Možete se pokušati prijaviti ili promijeniti direktorije.
Za pristup ovoj stranici potrebna je autorizacija. Možete pokušati promijeniti direktorije.
Odnosi se na ovu Power Platform preporuku za provjeru za optimizaciju dobro osmišljenog iskustva:
| XO:06 | Održavajte upotrebljive i vizualno privlačne izglede u svim veličinama zaslona i razlučivostima. Koristite adaptivne tehnike za dinamičko renderiranje sadržaja na različite načine. |
|---|
Ovaj vodič opisuje preporuke za dizajniranje izgleda zaslona koji se lako kreću i fluidno prilagođavaju na različitim uređajima. Ovaj pristup osigurava korisnicima dosljedan i optimalan doživljaj gledanja bez obzira na uređaj koji koriste.
Definicije
| Pojam | Definicija |
|---|---|
| Viewport | Vidljivi dio digitalnog sučelja, kao što je web-preglednik ili mobilna aplikacija, gdje se prikazuje sadržaj. Rasponi okvira za prikaz često se povezuju s klasama uređaja (mobilni uređaji, tableti i stolna računala) na temelju dimenzija i razlučivosti zaslona. |
| Prijelomne točke | Specifične vrijednosti piksela koje definiraju raspone okvira za prikaz koje se koriste za određivanje ponašanja adaptivnog izgleda. |
Ključne strategije dizajna
Responzivni izgledi pružaju fleksibilno i učinkovito korisničko iskustvo u različitim veličinama prozora. Prilagođavaju se skaliranjem sadržaja, preuređivanjem elemenata i selektivnim prikazom teksta i slika. Odgovorni izgledi zadovoljavaju potrebe korisnika bez obzira na veličinu zaslona.
Određivanje dosljednog okvira aplikacije
Okvir aplikacije sastoji se od skupa kontrola koje su dosljedno dostupne na svakom zaslonu. Sastoji se od tri glavne podkomponente: zaglavlja, navigacije i područja sadržaja. Jednostavne aplikacije imaju fleksibilnost za korištenje komponente zaglavlja, dok sofisticiranije aplikacije često koriste bočnu navigaciju za omogućavanje više stranica. Podkomponente su prilagodljive. Na primjer, možete uključiti globalno pretraživanje u zaglavlje ili grupirati stavke u bočnoj navigaciji kako bi odgovarale zahtjevima vaše aplikacije.
Tri glavne podkomponente okvira aplikacije su:
Zaglavlje je osnovna komponenta dizajnirana da bude dio svake interne aplikacije. Sastoji se od podkomponenti koje korisnicima daju pristup funkcijama na razini sustava, pomažu im u usmjeravanju na korisničko sučelje i pružaju dosljednost u različitim iskustvima. Pojavljuje se na vrhu okvira aplikacije i trebao bi se zadržati na svim stranicama aplikacije. Po želji može ugostiti globalne naredbe, kao što su pretraživanje, postavke, obavijesti, povratne informacije, profil ili pomoć. Naziv aplikacije uvijek bi trebao biti prikazan, a idealno bi trebao poslužiti i kao poveznica na početnu ili odredišnu stranicu koja se može kliknuti. Zaglavlje bi trebalo biti responzivno, s naredbama koje se pomiču u kontrolu preljeva u prozorima za prikaz koji su veličine 600 piksela i manje. Ulazna širina pretraživanja također je responzivna na 1023 piksela i manje.
Navigacija je sustav kontrola koje rade zajedno kako bi pomogle korisnicima da pronađu informacije i dovrše zadatke. Pomaže korisnicima da skaču s odjeljka na odjeljak aplikacije. Hijerarhijski gledano, nije priložen nijednoj stranici ili odjeljku, već postoji iznad svih ostalih sadržaja. Uvijek je prisutan i može se minimizirati na sažeto stanje (koje se naziva i željezničko stanje) kako bi se oslobodio dodatni prostor za sadržaj stranice. Kod manjih veličina prozora može se minimizirati u potpaletni izbornik. Najčešći oblici navigacije uključuju gornju navigaciju i bočnu navigaciju. Nemojte koristiti oba istovremeno.
Područje sadržaja sadrži fokus zaslona. Veličina prozora preglednika utječe na okvir sadržaja i prostor dostupan u glavnom području sadržaja. Ovaj se okvir prilagođava na temelju prijelomne točke i odgovarajućeg responzivnog ponašanja svake komponente. Saznajte više u članku Stvaranje matrice prijelomne točke.
Područje sadržaja po želji može sadržavati nekoliko podregija koje su dostupne za dosljedan položaj elemenata, kao što su zaglavlje stranice, umetnuta bočna okna ili ploče koje prekrivaju sadržaj.
Pridržavanje dosljednog jezika dizajna sa shemama boja, tipografijom i strukturom izgleda pomaže korisnicima da brzo prepoznaju i komuniciraju s različitim elementima bez zabune. Što se dosljednije obrazac okvira aplikacije koristi u svim internim poslovnim aplikacijama, to je jače pamćenje ili mentalni model korisnika. Usklađivanje s industrijskim standardima ili zajedničkim obrascima platforme dodatno pojačava ovaj učinak.
Nakon što se odredi okvir aplikacije, izgled svakog zaslona nalazi se unutar područja sadržaja okvira aplikacije.
Promišljeno koristite područje sadržaja
Korisnici žude za besprijekornim iskustvima u kojima su informacije lako dostupne, tekst je lak za čitanje, a estetika poboljšava, a ne ometa upotrebljivost. Dajte prioritet početnoj vidljivosti ključnih informacija, osigurajte čitljivost u svim stupcima i uskladite elemente dizajna za estetsku privlačnost.
Osigurajte da su bitne informacije odmah vidljive pri otvaranju zaslona bez potrebe za pomicanjem Dajte prioritet prikazu bitnih informacija kao što su opcije navigacije, ključni sadržaj i djelotvorne stavke pri vrhu zaslona. Postizanje ravnoteže između prikazivanja dovoljnog broja artikala i pružanja detaljnih informacija za svaku stavku stalni je izazov. Nasuprot tome, iako može biti primamljivo pružiti sve moguće informacije u početnom prikazu, previše informacija riskira da preplavi korisnike i razvodni značaj ključnih elemenata. Razmislite o korištenju sažetih sažetaka ili pregleda koji nude uvid u detaljniji sadržaj, maveći korisnike da dublje zarone. Nadzorne ploče optimizirane su za tu svrhu za vizualizaciju velikih količina podataka.
Uključite više stupaca, odjeljaka ili grupacija da biste logično organizirali sadržaj i povećali prostor. Obratite pažnju na širinu stupca, osiguravajući da tekst ostane čitljiv bez pretjeranog naprezanja. Izbjegavajte preuske stupce koji prisiljavaju korisnike da se stalno pomiču vodoravno, remeteći tijek interakcije. Nasuprot tome, pretjerano široki stupci mogu ometati čitljivost, zahtijevajući od korisnika da prate linije na većim udaljenostima. Težite ravnoteži koja omogućuje ugodno čitanje uz učinkovito korištenje raspoloživog prostora.
Prikladno dimenzionirajte i postavite vizualne elemente kako biste stvorili vizualno ugodno i uravnoteženo sučelje. Poravnajte titlove s odgovarajućim vizualnim elementima ili naslovima, održavajte dosljedan razmak između elemenata i pridržavajte se hijerarhije na temelju potreba korisnika. Izrežite nepotrebne ukrase i razborito dodijelite piksele elementima koji su najvažniji. Odredite prioritete i naglasite sadržaj i navigacijske elemente, posebno u aplikacijama ili početnim stranicama koje zahtijevaju intenzivnu navigaciju, i izbjegavajte suvišne ukrase koji umanjuju upotrebljivost.
Temeljna rešetka može biti korisna za dosljedno raspoređivanje elemenata. Odabrano ponašanje rešetke trebalo bi biti dosljedno u cijelom području sadržaja svakog zaslona u aplikaciji, a može se primijeniti i na razini komponente, kao što su kartice ili bočna okna. Najčešća vrsta rasporeda rešetke koja se koristi u web aplikacijama je rešetka stupaca. Za implementaciju responzivnih zaslona preporučuje se fluidno (ili rastezljivo) ponašanje mreže.
Koristite ustaljene izglede i uzorke grupiranja
Koristite općepoznate strukture i aranžmane za organiziranje sadržaja i elemenata unutar korisničkog sučelja. Ovi izgledi i uzorci s vremenom su poboljšani i pokazali se učinkovitima, čineći ih poznatima i intuitivnima korisnicima, a istovremeno olakšavaju implementaciju prilagodljivih uzoraka. Nakon što se identificiraju osnovni scenariji i elementi, mapirajte svaki na utvrđeni izgled koji pruža najbolju interakciju. Odredite prioritete sadržaja i značajki važnih za dovršetak zadataka. Odlučite koji elementi uvijek trebaju biti vidljivi i dostupni na zaslonu, a koji se mogu sakriti ili im se može pristupiti putem drugih izbornika ili radnji.
Sljedeći popis, iako nije konačan, opisuje uspostavljene izglede koji se obično koriste za poslovne aplikacije ili aplikacije za produktivnost. Sve se može smjestiti unutar glavne regije sadržaja.
Slijetanje/početni zaslon
Odredišni ili početni zaslon služi kao ulazna točka u aplikaciju, pružajući korisnicima pregled ponude ili značajki aplikacije. Obično ima za cilj privući pozornost posjetitelja i potiče poduzimanje određene radnje, kao što je dovršavanje prvog zadatka ili istraživanje daljnjeg sadržaja. Često sadrži slike heroja i čiste opcije navigacije.
Idealan je za dobrodošlicu korisnicima, nudi brz pristup ključnim funkcijama, opcijama navigacije ili pozivima na akciju i postavlja ton iskustvu aplikacije. Dajte prednost jasnoći, jednostavnosti i intuitivnoj navigaciji kako biste učinkovito vodili korisnike.
Nadzorna ploča
Nadzorna ploča je centralizirano središte unutar aplikacije koje korisnicima pruža sveobuhvatan pregled relevantnih podataka ili informacija. Često se sastoji od prilagodljivih widgeta ili modula, omogućujući korisnicima praćenje određenih metrika ili izvođenje radnji.
Nadzorne ploče prikladne su za aplikacije sa složenim skupovima podataka ili višestrukim funkcijama, omogućujući korisnicima praćenje napretka, analizu trendova i donošenje informiranih odluka na prvi pogled. Posebno su korisni u analitičkim platformama, alatima za upravljanje projektima i aplikacijama za upravljanje financijama.
Obrazac
Obrazac je strukturirani izgled koji korisnicima olakšava unos podataka, obično se sastoji od polja za unos različitih vrsta informacija kao što su tekst, brojevi, datumi i odabiri. Obrasci su ključni za prikupljanje korisničkih unosa, obradu transakcija i olakšavanje interakcija unutar aplikacija.
Obično se koriste u tijekovima registracije, procesima naplate, zadacima unosa podataka i bilo kojem scenariju koji zahtijeva korisnički unos ili povratne informacije.
Prikaz entiteta/profila
Prikaz entiteta ili profila prikazuje detaljne informacije o određenom entitetu, kao što je korisnički profil, unos proizvoda ili stavka sadržaja. Obično uključuje opisni tekst, multimedijske elemente i relevantne radnje ili interakcije.
Prikladni su za prikaz detaljnih informacija o stavkama unutar aplikacije. Korisnicima pružaju dubinske uvide, olakšavaju donošenje odluka i podržavaju angažman s određenim entitetima kao što su korisnički profili u aplikacijama za društvene mreže ili popisi proizvoda na platformama za e-trgovinu.
Stranica s popisom
Popis ili tablica prikazuje zbirku stavki ili entiteta u strukturiranom obliku, često predstavljenu u linearnom ili mrežnom izgledu. Obično uključuje kratke sažetke ili pretpreglede svake stavke, zajedno s navigacijskim kontrolama za pregledavanje ili filtriranje.
Stranice popisa učinkovite su za predstavljanje velikih skupova sadržaja ili podataka u probavljivom formatu, omogućujući korisnicima učinkovito skeniranje, pretraživanje i navigaciju. Ako su omogućene radnje na određenim retcima, postupak bi trebao biti jasan. Stranice popisa obično se koriste u sustavima za upravljanje sadržajem, popisima direktorija, rezultatima pretraživanja i feedovima vijesti.
Mini recenzija (podijeljeni zaslon)
Mini-pregled ili podijeljeni zaslon dijeli sučelje na dva različita dijela, s popisom prikazanim na lijevoj strani i prikazom stavki na desnoj strani. Popis obično sadrži zbirku stavki, dok prikaz stavki pruža detaljne informacije o odabranoj stavci na popisu.
Ovaj je izgled posebno učinkovit u scenarijima u kojima korisnici trebaju brzo pregledavati popis stavki i istovremeno pregledavati detaljne informacije o svakoj stavci, primjerice prilikom izvođenja skupnih operacija. Katalozi proizvoda, sustavi za upravljanje dokumentima, klijenti e-pošte ili komunikacije i alati za upravljanje zadacima (na primjer, preglednik upita Azure Dev Ops) scenariji su koji obično odgovaraju ovom obrascu.
Čarobnjak
Čarobnjak vodi korisnike kroz niz uzastopnih koraka ili zadataka, obično linearno, kako bi dovršili složen proces ili postigli određeni cilj. Često uključuje pokazatelje napretka, upite i provjere valjanosti. Čarobnjaci su korisni za pojednostavljivanje složenih procesa, smanjenje kognitivnog preopterećenja i vođenje korisnika kroz nepoznate zadatke ili tijekove rada. Obično se koriste u tijekovima uključivanja, procesima postavljanja, obrascima u više koraka i interakcijama temeljenim na zadacima kao što je konfiguriranje složenih postavki ili transakcija.
Prilagodite i nadogradite standardni izgled kako bi odgovarao specifičnim zahtjevima. Taj postupak može uključivati dodavanje ili uklanjanje elemenata, prilagodbu veličine i pozicioniranja elemenata te primjenu stila kako bi odgovarao identitetu robne marke ili smjernicama vizualnog dizajna. Eksperimentirajte s različitim konfiguracijama i varijacijama standardnog izgleda kako biste pronašli najučinkovitiji raspored sadržaja i cjelokupnog korisničkog iskustva.
Dizajn izgleda za sve uređaje
Izgledi su kulminacija definiranih pravila i namjerne organizacije sadržaja. Ključno je dovesti svoj sadržaj u promišljene strukture, ali da bi sve teklo zajedno s jasnom hijerarhijom na različitim platformama i veličinama zaslona zahtijeva logiku skaliranja. Individualno, prilagodljiv i responzivan dizajn može riješiti ovaj izazov. U nekim je slučajevima kombinacija prilagodljivog i responzivnog dizajna pravi izbor.
Responzivni dizajn koristi samo jedan izgled, gdje je sadržaj fluidan i može se prilagoditi promjeni veličine formata. Ova tehnika dizajna koristi medijske upite za pregled karakteristika određenog uređaja i u skladu s tim prikazuje sadržaj. Responzivni dizajn omogućuje vam da jednom napravite značajku i da učinkovito funkcionira na svim veličinama zaslona.
Prilagodljivi izgled u potpunosti se mijenja ovisno o formatu u kojem je predstavljen. Adaptivni dizajn ima više fiksnih veličina izgleda i pokreće preglednik da učita zadani izgled na temelju dostupnog prostora. Web stranice izrađene s prilagodljivim dizajnom koriste medijske upite za otkrivanje prijelomnih točaka, slično responzivnom dizajnu. Također koriste dodatnu oznaku na temelju mogućnosti uređaja. Ovaj proces je poznat kao "progresivno poboljšanje".
Premjestiti
Promijenite položaj elemenata stranice.
Neka vaš sadržaj bude organiziran, čitljiv i uravnotežen optimiziranjem kompozicije kako se veličina prozora povećava. Na primjer, okomito složeni elementi na mobilnom prozoru mogu se vodoravno premjestiti na većim prozorima za prikaz. Ova promjena slijedi prirodan redoslijed čitanja slijeva nadesno, stvara ravnotežu u dizajnu i održava vizualni fokus na ključnim elementima na stranici.
Promijeni veličinu
Prilagodite veličinu i margine elemenata stranice.
Promijenite veličinu elemenata stranice kako biste optimizirali za bogato korisničko iskustvo prikazivanjem više sadržaja na vrhu prozora, smanjujući potrebu za okomitim pomicanjem Prilagodite margine stranice kako biste izgledu dodali bijeli prostor i ravnotežu, što omogućuje sadržaju da diše i poboljšava vizualnu privlačnost dizajna. Na primjer, glavna komponenta može se rastegnuti na cijelu širinu prozora kako bi se prikazao veći dio pozadinske slike. Sadržaj ispod slike može se proširiti, ali koristite različite margine da biste dodali raznolikost u izgled i pomogli u definiranju vizualne hijerarhije.
Ponovi tijek
Optimizirajte tijek elemenata stranice.
Prilagodite elemente stranice kako biste osigurali da su u potpunosti prikazani, uzimajući u obzir veličinu i orijentaciju prozora, preuređivanjem sadržaja. Na primjer, jedan stupac sadržaja u manjem prozoru može se promijeniti u većem prozoru da bi se prikazala dva stupca teksta. Ova tehnika omogućuje prikazivanje više sadržaja "iznad preklopa".
Prikaži/sakrij
Optimizirajte sadržaj za veličinu prozora i njegovu orijentaciju.
Prikažite ili sakrijte elemente stranice kako biste optimizirali sadržaj za veličinu prozora i njegovu orijentaciju. Ova responzivna tehnika prilagođava količinu informacija kontekstu gledanja. Na primjer, kategorije koje se pojavljuju na malom zaslonu mogu prikazivati ograničene metapodatke, kao što su slika, naslov i veza, tako da su druge informacije vidljive kako bi se korisnik lakše usredotočio. Na većem zaslonu kategorije mogu prikazati dodatne metapodatke kao što su persona, datum i kratki opis, a da se i dalje uklapaju u okvir za prikaz.
Ponovni arhitektura
Račvaju ili sažmite elemente stranice i sadržaj kako biste zadržali fokus na važnim informacijama i radnjama.
Ovaj pristup sličan je slijeđenju prakse "progresivnog otkrivanja" u vašem dizajnu, ali za različite veličine prozora i orijentacije. Na primjer, proširenje prozora omogućuje prikaz popisa stavki pored detalja. Ova vizualna veza između sadržaja omogućuje korisnicima jednostavan odabir druge stavke. Na manjem zaslonu fokus ostaje na prikazu ključnih informacija.
Stvaranje matrice prijelomne točke
Matrica prijelomne točke služi kao grafički prikaz responzivnog ili prilagodljivog ponašanja dizajna aplikacije na različitim veličinama zaslona i orijentacijama. Obično predstavlja strukturiranu mrežu ili izgled koji detaljno opisuje odgovor dizajna na različitim prijelomnim točkama. Svaki segment odgovara različitoj širini zaslona, nudeći uvid u strukturu, izgled i funkcionalnost dizajna. Matrica prijelomne točke obuhvaća razmatranja širine zaslona, orijentacije okvira za prikaz, elemenata dizajna, strukture izgleda, prezentacije sadržaja, navigacije, medija i interaktivnih komponenti kako bi ilustrirala kako dizajn web-mjesta ili aplikacije reagira na različitim veličinama zaslona i orijentacijama. Ovaj pristup ne samo da pomaže u finalizaciji dizajna svakog zaslona, već i olakšava implementaciju kada se promjene svojstava ključnih komponenti eksplicitno prate i dobro komuniciraju.
Power Platform olakšavanje
Izgledi obrazaca aplikacije stvorene prema modelu konfiguriraju se pomoću Power Apps Studio Dizajner obrazaca dopušta autorima dodavanje elemenata u strukturu mreže, što omogućuje da stranice obrasca budu inherentno responzivne. Ugrađene prilagođene komponente kao što su prilagođene stranice, ugrađene komponente radnog područja i komponente Power Apps koda okvira komponenti moraju uključiti responzivno ponašanje u svoje implementacije. Na primjer, prilagođene stranice moraju implementirati responzivno ponašanje na isti način kao i čista aplikacija radnog područja da bi ispravno funkcionirale.
Aplikacije radnog područja zahtijevaju eksplicitnu konfiguraciju za svaku komponentu za implementaciju responzivnog ponašanja, omogućujući veću kontrolu nad iskustvom. Veličine zaslona određuju se u definiciji aplikacije, na koju se može pozvati za određivanje položaja, ponašanja, vidljivosti i drugih relevantnih svojstava.