Belešku
Pristup ovoj stranici zahteva autorizaciju. Možete pokušati da se prijavite ili da promenite direktorijume.
Pristup ovoj stranici zahteva autorizaciju. Možete pokušati da promenite direktorijume.
Odnosi se na ovu Power Platform preporuku za proveru za optimizaciju dobrog arhitektonskog iskustva:
| XO:06 | Održavajte upotrebljive i vizuelno privlačne rasporede preko veličina ekrana i rezolucija. Koristite adaptivne tehnike za dinamičko prikazivanje sadržaja na različite načine. |
|---|
Ovaj vodič opisuje preporuke za dizajniranje rasporeda ekrana koji su jednostavni za navigaciju i fluidno se prilagođavaju na različitim uređajima. Ovaj pristup osigurava da korisnici imaju konzistentno i optimalno iskustvo gledanja bez obzira na uređaj koji koriste.
Definicije
| Termin | Definicija |
|---|---|
| Prozorčić | Vidljivi deo digitalnog interfejsa, kao što je veb pretraživač ili mobilna aplikacija, gde se prikazuje sadržaj. Rasponi prikaza su često povezani sa klasama uređaja (mobilni, tablet i desktop) na osnovu dimenzija i rezolucija ekrana. |
| Prelomne tačke | Specifične vrednosti piksela koje definišu opsege prikaza koji se koriste za određivanje adaptivnog ponašanja rasporeda. |
Ključne strategije dizajna
Odgovarajući rasporedi pružaju fleksibilno i efikasno korisničko iskustvo u različitim veličinama prozora. Oni se prilagođavaju skaliranjem sadržaja, preuređivanjem elemenata i selektivnim prikazivanjem teksta i slika. Odgovorni rasporedi zadovoljavaju potrebe korisnika bez obzira na veličinu ekrana.
Odredite konzistentan okvir aplikacije
Okvir aplikacije sastoji se od skupa kontrola koje su dosledno dostupne na svakom ekranu. Sastoji se od tri glavne podkomponente: zaglavlje, navigaciju i region sadržaja. Jednostavne aplikacije imaju fleksibilnost da koriste komponentu zaglavlja, dok sofisticiranije aplikacije često koriste bočnu navigaciju kako bi omogućile više stranica. Podkomponente su prilagodljive. Na primer, možete uključiti globalnu pretragu u zaglavlju ili grupirati stavke u bočnoj navigaciji kako bi odgovarale zahtevima vaše aplikacije.
Tri glavne podkomponente okvira aplikacije su:
Zaglavlje je osnovna komponenta dizajnirana da bude deo svake interne aplikacije. Sastoji se od podkomponenti koje korisnicima omogućavaju pristup funkcijama širom sistema, pomažu im da se orijentišu na korisnički interfejs i obezbeđuju konzistentnost u iskustvima. Pojavljuje se preko vrha okvira aplikacije i trebalo bi da traje na svim stranicama aplikacije. Opciono može hostovati globalne komande, kao što su pretraživanje, podešavanja, obaveštenja, povratne informacije, profil ili pomoć. Ime aplikacije uvek treba da bude prikazano, a idealno bi trebalo da služi i kao link na koji se može kliknuti na početnu ili odredišnu stranicu. Zaglavlje treba da bude odzivno, sa komandama koje se kreću u kontrolu prelivanja u prikazima koji su 600 piksela i ispod. Širina ulaza za pretragu takođe reaguje na 1023 piksela i niže.
Navigacija je sistem kontrola koje rade zajedno kako bi pomogle korisnicima da pronađu informacije i završe zadatke. Pomaže korisnicima da skaču sa odeljka na odeljak aplikacije. Hijerarhijski, nije vezan ni za jednu stranicu ili odeljak, već postoji iznad svih ostalih sadržaja. Uvek je prisutan, i može se minimizirati na srušeno stanje (koje se naziva i železničko stanje) kako bi se oslobodio dodatni prostor za sadržaj stranice. Na manjim veličinama prozora, može se minimizirati u paletni meni. Najčešći oblici navigacije uključuju gornju navigaciju i bočnu navigaciju. Nemojte koristiti oba istovremeno.
Region sadržaja sadrži fokus ekrana. Veličina prozora pretraživača utiče na okvir sadržaja i prostor dostupan u glavnom regionu sadržaja. Ovaj okvir se prilagođava na osnovu tačke prekida i odgovarajućeg ponašanja svake komponente. Saznajte više u Kreirajte matricu tačke prekida.
Region sadržaja može opciono sadržati nekoliko pod-regiona koji su dostupni za konzistentno postavljanje elemenata, kao što je zaglavlje stranice, umetnuti bočni paneli, ili paneli koji prekrivaju sadržaj.
Pridržavajući se konzistentnog jezika dizajna sa šemama boja, tipografijom i strukturom rasporeda pomaže korisnicima da brzo identifikuju i komuniciraju sa različitim elementima bez zabune. Što se konzistentnije obrazac okvira aplikacije koristi u svim internim poslovnim aplikacijama, to je jači opoziv korisnika ili mentalni model. Usklađivanje sa industrijskim standardima ili zajedničkim obrascima platforme dodatno poboljšava ovaj efekat.
Nakon što se odredi okvir aplikacije, izgled svakog ekrana nalazi se u području sadržaja okvira aplikacije.
Zamišljeno koristite region sadržaja
Korisnici žude besprekorna iskustva 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, obezbedite čitljivost u kolonama i uskladite elemente dizajna za estetsku privlačnost.
Uverite se da su bitne informacije odmah vidljive prilikom otvaranja ekrana bez potrebe za pomeranjem. Dajte prioritet prikazu bitnih informacija kao što su opcije za navigaciju, ključni sadržaj i stavke koje se mogu preduzeti pri vrhu ekrana. Uspostavljanje ravnoteže između prikazivanja dovoljnog broja stavki i pružanja detaljnih informacija za svaku stavku je stalni izazov. Nasuprot tome, iako može biti primamljivo pružiti sve moguće informacije u početnom pogledu, previše informacija rizikuje da preplavi korisnike i razvodni značaj ključnih elemenata. Razmislite o upotrebi konciznih rezimea ili pregleda koji nude uvid u detaljniji sadržaj, privlačeći korisnike da se dublje udube. Kontrolne table su optimizovane da služe ovoj svrsi za vizualizaciju velikih količina podataka.
Uključite više kolona, sekcija ili grupa da biste logično organizovali sadržaj i maksimizirali prostor. Obratite pažnju na širinu kolone, osiguravajući da tekst ostane čitljiv bez preteranog naprezanja. Izbegavajte preterano uske kolone koje prisiljavaju korisnike da se stalno pomeraju horizontalno, ometajući tok interakcije. Nasuprot tome, preterano široke kolone mogu ometati čitljivost, zahtevajući od korisnika da prate linije na većim udaljenostima. Težite ravnoteži koja omogućava udobno čitanje uz efikasno korišćenje raspoloživog prostora.
Veličina i položaj vizuelnih elemenata na odgovarajući način da stvori vizuelno prijatan i uravnotežen interfejs. Poravnajte naslove sa odgovarajućim vizuelnim prikazima ili naslovima, održavajte konzistentan razmak između elemenata i pridržavajte se hijerarhije zasnovane na potrebama korisnika. Smanjite nepotrebne ukrase i razumno dodelite piksele elementima koji su najvažniji. Odredite prioritete i naglasite sadržaj i navigacijske elemente, posebno na aplikacijama ili početnim stranicama koje intenzivno koriste navigaciju, i izbegavajte suvišne ukrase koji umanjuju upotrebljivost.
Osnovna mreža može biti korisna za dosledno uređenje elemenata. Izabrano ponašanje mreže treba da bude konzistentno u regionu sadržaja svakog ekrana u aplikaciji i može se primeniti i na nivou komponente, kao što su kartice ili bočna okna. Najčešći tip rasporeda mreže koji se koristi u veb aplikacijama je mreža kolona. Fluidno (ili rastezanje) mrežno ponašanje se preporučuje za implementaciju odgovarajućih ekrana.
Koristite utvrđene rasporede i obrasce grupisanja
Koristite opšte priznate strukture i aranžmane za organizovanje sadržaja i elemenata unutar korisničkog interfejsa. Ovi izgledi i obrasci su rafinirani i dokazano efikasni tokom vremena, čineći ih poznatim i intuitivnim korisnicima, a takođe olakšava implementaciju adaptivnih obrazaca. Kada se identifikuju osnovni scenariji i elementi, mapirajte svaki na uspostavljen raspored koji pruža najbolju interakciju. Odredite prioritete sadržaja i karakteristika važnih za završetak zadatka. Odlučite koji elementi uvek treba da budu vidljivi i dostupni na ekranu, a koji se mogu sakriti ili pristupiti putem drugih menija ili akcija.
Sledeća lista, iako nije iscrpna, opisuje uspostavljene rasporede koji se obično koriste za poslovne aplikacije ili aplikacije produktivnosti. Sve se može smjestiti unutar glavnog regiona sadržaja.
Sletanje / početni ekran
Odredišni ili početni ekran služi kao ulazna tačka za aplikaciju, pružajući korisnicima pregled ponude ili funkcija aplikacije. Obično ima za cilj da privuče pažnju posetilaca i podstiče preduzimanje određene akcije, kao što je završetak prvog zadatka ili istraživanje daljeg sadržaja. Često sadrži slike heroja i čiste opcije za navigaciju.
Idealan je za dobrodošlicu korisnicima, nudi brz pristup ključnim funkcionalnostima, opcijama navigacije ili pozivima na akciju i postavlja ton za iskustvo aplikacije. Dajte prioritet jasnoći, jednostavnosti i intuitivnoj navigaciji kako biste efikasno vodili korisnike.
Kontrolna tabla
Kontrolna tabla je centralizovano čvorište u okviru aplikacije koja korisnicima pruža sveobuhvatan pregled relevantnih podataka ili informacija. Često se sastoji od prilagodljivih vidžeta ili modula, omogućavajući korisnicima da prate određene metrike ili obavljaju akcije.
Kontrolne table su pogodne za aplikacije sa složenim skupovima podataka ili višestrukim funkcionalnostima, omogućavajući korisnicima da prate napredak, analiziraju trendove i donose informisane odluke na prvi pogled. Posebno su korisni u analitičkim platformama, alatima za upravljanje projektima i aplikacijama za finansijsko upravljanje.
Obrazac
Obrazac je strukturirani izgled koji olakšava unos podataka od korisnika, obično se sastoji od polja za unos različitih vrsta informacija kao što su tekst, brojevi, datumi i izbori. Obrasci su od suštinskog značaja za prikupljanje korisničkog unosa, obradu transakcija i olakšavanje interakcije unutar aplikacija.
Oni se obično koriste u tokovima registracije, procesima naplate, zadacima za unos podataka i bilo kom scenariju koji zahteva unos korisnika ili povratne informacije.
Entitet/Profil
Prikaz entiteta ili profila predstavlja detaljne informacije o određenom entitetu, kao što je korisnički profil, spisak proizvoda ili stavka sadržaja. Obično uključuje opisni tekst, multimedijalne elemente i relevantne akcije ili interakcije.
Oni su pogodni za prikazivanje detaljnih informacija o stavkama unutar aplikacije. Oni pružaju korisnicima dubinske uvide, olakšavaju donošenje odluka i podržavaju angažman sa određenim entitetima, kao što su korisnički profili u aplikacijama za društveno umrežavanje ili liste proizvoda na platformama za e-trgovinu.
Stranica sa listom
Lista ili tabela prikazuje kolekciju stavki ili entiteta u strukturiranom formatu, često predstavljen u linearnom ili mrežnom rasporedu. Obično uključuje kratke sažetke ili preglede svake stavke, zajedno sa kontrolama za navigaciju za pretraživanje ili filtriranje.
Stranice sa listom su efikasne za predstavljanje velikih skupova sadržaja ili podataka u probavljivom formatu, omogućavajući korisnicima da efikasno skeniraju, pretražuju i kreću. Ako su akcije na određenim redovima omogućene, proces treba da bude jasan. Stranice liste se obično koriste u sistemima za upravljanje sadržajem, listama direktorijuma, rezultatima pretrage i izvorima vesti.
Mini pregled (podeljeni ekran)
Mini-pregled ili podeljeni ekran deli interfejs na dva različita dela, sa listom prikazanom na levoj strani i prikazom stavki na desnoj strani. Lista obično sadrži kolekciju stavki, dok prikaz stavki pruža detaljne informacije o izabranoj stavci na listi.
Ovaj raspored je posebno efikasan u scenarijima u kojima korisnici moraju brzo pregledati listu stavki i istovremeno pregledati detaljne informacije o svakoj stavci, kao što je prilikom obavljanja masovnih operacija. Katalozi proizvoda, sistemi za upravljanje dokumentima, klijenti e-pošte ili komunikacije i alati za upravljanje zadacima (na primer, pregledač upita Azure Dev Ops) su scenariji koji se obično uklapaju u ovaj obrazac.
Čarobnjak
Čarobnjak vodi korisnike kroz niz uzastopnih koraka ili zadataka, obično na linearan način, kako bi završio složen proces ili postigao određeni cilj. Često uključuje indikatore napretka, upite i provjere validacije. Čarobnjaci su korisni za pojednostavljivanje složenih procesa, smanjenje kognitivnog preopterećenja i vođenje korisnika kroz nepoznate zadatke ili tokove posla. Obično se koriste u tokovima uključivanja, procesima podešavanja, obrascima u više koraka i interakcijama zasnovanim na zadacima, kao što je konfigurisanje složenih postavki ili transakcija.
Prilagodite i graditi na standardnom rasporedu kako bi odgovarali specifičnim zahtevima. Ovaj proces može uključivati dodavanje ili uklanjanje elemenata, podešavanje veličine i pozicioniranja elemenata i primenu stila kako bi odgovarao identitetu brenda ili smernicama vizuelnog dizajna. Eksperimentišite sa različitim konfiguracijama i varijacijama standardnog rasporeda kako biste pronašli najefikasniji aranžman za sadržaj i ukupno korisničko iskustvo.
Dizajn rasporeda za sve uređaje
Rasporedi su kulminacija definisanih pravila i namerne organizacije sadržaja. Dovođenje vašeg sadržaja u promišljene strukture je ključno, ali da sve to teče zajedno sa jasnom hijerarhijom na platformama i veličinama ekrana zahteva logiku skaliranja. Pojedinačno, prilagodljiv i responzivan dizajn može da reši ovaj izazov. U nekim slučajevima, kombinacija adaptivnog i odgovarajućeg dizajna je pravi izbor.
Odgovarajući dizajn koristi samo jedan izgled, gde je sadržaj fluidan i može se prilagoditi promeni veličine formata. Ova tehnika dizajna koristi medijske upite za inspekciju karakteristika datog uređaja i u skladu s tim prikazuje sadržaj. Odgovarajući dizajn vam omogućava da jednom napravite funkciju i da efikasno funkcioniše na svim veličinama ekrana.
Adaptivni raspored se u potpunosti menja na osnovu formata u kojem je predstavljen. Adaptivni dizajn ima više fiksnih veličina rasporeda i pokreće pretraživač da učita dati raspored na osnovu raspoloživog prostora. Veb stranice izgrađene sa adaptivnim dizajnom koriste medijske upite za otkrivanje prekida, slično odgovarajućem dizajnu. Oni takođe koriste dodatnu oznaku na osnovu mogućnosti uređaja. Ovaj proces je poznat kao "progresivno poboljšanje".
Pretraga
Promenite položaj elemenata stranice.
Držite svoj sadržaj organizovanim, čitljivim i uravnoteženim optimizacijom kompozicije kako se veličina prozora povećava. Na primer, vertikalno naslagani elementi na mobilnom prikazu mogu se horizontalno repozicionirati na većim prikazima. Ova promena prati prirodni redosled čitanja s leva na desno, stvara ravnotežu u dizajnu i održava vizuelni fokus na ključne elemente na stranici.
Promeni veličinu
Podesite veličinu i margine elemenata stranice.
Promenite veličinu elemenata stranice kako biste optimizirali za bogato korisničko iskustvo tako što ćete prikazati više sadržaja na vrhu prozora, smanjujući potrebu za vertikalnim pomeranjem. Podesite margine stranice da biste dodali beli prostor i balans u izgledu, što omogućava sadržaju da diše i poboljšava vizuelnu privlačnost dizajna. Na primer, komponenta heroja može da se protegne do pune širine prozora da bi prikazala više pozadinske slike. Sadržaj ispod slike može biti proširen, ali koristite različite margine da biste dodali raznolikost u izgledu i pomogli u definisanju vizuelne hijerarhije.
Dinamičko raspoređivanje sadržaja
Optimizujte protok elemenata stranice.
Podesite elemente stranice kako biste osigurali da su u potpunosti prikazani, uzimajući u obzir veličinu i orijentaciju prozora, preuređivanjem sadržaja. Na primer, jedna kolona sadržaja u manjem prozoru može se prelistati na većem prozoru da bi se prikazale dve kolone teksta. Ova tehnika omogućava da se više sadržaja prikaže "iznad preklopa".
Prikaži/sakrij
Optimizacija sadržaja za veličinu prozora i njegovu orijentaciju.
Prikažite ili sakrijte elemente stranice da biste optimizirali sadržaj za veličinu prozora i njegovu orijentaciju. Ova odgovarajuća tehnika prilagođava količinu informacija kontekstu gledanja. Na primer, kategorije koje se pojavljuju na malom ekranu mogu prikazati ograničene metapodatke, kao što su slika, naslov i veza, tako da su druge informacije vidljive kako bi pomogle korisniku da se fokusira. Na većem ekranu, kategorije mogu prikazati dodatne metapodatke kao što su osoba, datum i kratak opis, dok se i dalje uklapaju u prikaz.
Rearhitekta
Fork ili collapse elemente stranice i sadržaj da zadrži fokus na važne informacije i akcije.
Ovaj pristup je sličan praćenju prakse "progresivnog otkrivanja" u vašem dizajnu, ali za različite veličine prozora i orijentacije. Na primer, proširenje prozora omogućava listu stavki koje će biti prikazane pored detalja. Ova vizuelna veza između sadržaja omogućava korisnicima da lako izaberu drugu stavku. Na manjem ekranu, fokus ostaje na prikazivanju ključnih informacija.
Kreirajte matricu tačke prekida
Matrica tačke prekida služi kao grafički prikaz odgovarajućeg ili adaptivnog ponašanja dizajna aplikacije na različitim veličinama ekrana i orijentacijama. Obično predstavlja strukturiranu mrežu ili raspored koji detaljno opisuje odgovor dizajna na različitim tačkama prekida. Svaki segment odgovara različitoj širini ekrana, nudeći uvid u strukturu, izgled i funkcionalnost dizajna. Matrica tačke prekida obuhvata razmatranja širine ekrana, orijentacije prikaza, elemenata dizajna, strukture izgleda, prezentacije sadržaja, navigacije, medija i interaktivnih komponenti, kako bi ilustrovala kako dizajn veb stranice ili aplikacije reaguje na različite veličine ekrana i orijentacije. Ovaj pristup ne samo da pomaže u finalizaciji dizajna svakog ekrana, već i olakšava implementaciju kada se ključne promene svojstava komponenti eksplicitno prate i dobro komuniciraju.
Power Platform Olakšavanju
Rasporedi obrazaca aplikacija zasnovani na modelu su konfigurisani korišćenjem Power Apps Studio. Dizajner obrazaca dozvoljava proizvođačima da dodaju elemente u strukturu mreže, što omogućava da stranice obrasca budu inherentno odgovorne. Ugrađene prilagođene komponente kao što su prilagođene stranice, ugrađene komponente platna i Power Apps komponente koda Component Framevork moraju da uključe odgovarajuće ponašanje u svoje implementacije. Na primer, prilagođene stranice moraju implementirati responzivno ponašanje na isti način kao i čista aplikacija platna da bi ispravno funkcionisala.
Canvas aplikacije zahtevaju eksplicitnu konfiguraciju za svaku komponentu kako bi implementirale odgovorno ponašanje, omogućavajući veću kontrolu nad iskustvom. Veličine ekrana se određuju u definiciji aplikacije, na koju se može uputiti da bi se odredio položaj, ponašanje, vidljivost i druga relevantna svojstva.