Poznámka
Na prístup k tejto stránke sa vyžaduje oprávnenie. Môžete sa skúsiť prihlásiť alebo zmeniť adresáre.
Na prístup k tejto stránke sa vyžaduje oprávnenie. Môžete skúsiť zmeniť adresáre.
Vzťahuje sa na toto odporúčanie kontrolného zoznamu pre dobre architektúrovanú optimalizáciu používateľského zážitku: Power Platform
| XO:06 | Zachovajte použiteľné a vizuálne príťažlivé rozloženia naprieč veľkosťami a rozlíšeniami obrazovky. Používajte adaptívne techniky na dynamické vykresľovanie obsahu rôznymi spôsobmi. |
|---|
Táto príručka popisuje odporúčania pre navrhovanie rozložení obrazoviek, ktoré sa ľahko ovládajú a plynulo sa prispôsobujú rôznym zariadeniam. Tento prístup zabezpečuje, že používatelia majú konzistentný a optimálny zážitok zo sledovania bez ohľadu na to, aké zariadenie používajú.
Definície
| Pojem | Definícia |
|---|---|
| Výhľad | Viditeľná časť digitálneho rozhrania, ako je webový prehliadač alebo mobilná aplikácia, kde sa zobrazuje obsah. Rozsahy zobrazovanej oblasti sú často spojené s triedami zariadení (mobilné zariadenia, tablety a stolné počítače) na základe rozmerov a rozlíšení obrazovky. |
| Body zlomu | Konkrétne hodnoty pixelov, ktoré definujú rozsahy zobrazovaných oblastí používané na určenie adaptívneho správania rozloženia. |
Kľúčové dizajnérske stratégie
Responzívne rozloženia poskytujú flexibilný a efektívny používateľský zážitok v rôznych veľkostiach okien. Prispôsobujú sa zmenou rozsahu obsahu, preskupením prvkov a selektívnym zobrazovaním textu a obrázkov. Zodpovedné rozloženie spĺňa potreby používateľov bez ohľadu na veľkosť ich obrazovky.
Určenie konzistentného rámca aplikácie
Rámec aplikácie pozostáva zo sady ovládacích prvkov, ktoré sú konzistentne dostupné na každej obrazovke. Skladá sa z troch hlavných podkomponentov: hlavičky, navigácie a oblasti obsahu. Jednoduché aplikácie majú flexibilitu používať komponent hlavičky, zatiaľ čo sofistikovanejšie aplikácie často používajú bočnú navigáciu na povolenie viacerých stránok. Podkomponenty sú prispôsobiteľné. Napríklad môžete do hlavičky zahrnúť globálne vyhľadávanie alebo zoskupiť položky v bočnej navigácii tak, aby vyhovovali požiadavkám vašej aplikácie.
Tri hlavné podkomponenty rámca aplikácie sú:
Hlavička je základný komponent navrhnutý tak, aby bol súčasťou každej internej aplikácie. Skladá sa z podkomponentov, ktoré poskytujú používateľom prístup k funkciám celého systému, pomáhajú im orientovať sa v používateľskom rozhraní a zabezpečujú konzistentnosť naprieč rôznymi skúsenosťami. Zobrazuje sa v hornej časti rámca aplikácie a mal by pretrvávať na všetkých stránkach aplikácie. Voliteľne môže hostiť globálne príkazy, ako napríklad vyhľadávanie, nastavenia, upozornenia, spätnú väzbu, profil alebo pomoc. Názov aplikácie by sa mal zobrazovať vždy a ideálne by mal slúžiť aj ako klikateľný odkaz na domovskú alebo vstupnú stránku. Hlavička by mala byť responzívna a príkazy by sa mali presunúť do ovládacieho prvku pretečenia vo výrezoch s veľkosťou 600 pixelov a menej. Šírka vyhľadávacieho poľa je tiež responzívna pri rozlíšení 1023 pixelov a menej.
Navigácia je systém ovládacích prvkov, ktoré spolupracujú, aby pomohli používateľom nájsť informácie a dokončiť úlohy. Pomáha používateľom preskakovať z jednej sekcie do druhej v aplikácii. Hierarchicky nie je pripojený k žiadnej stránke ani sekcii, ale existuje nad všetkým ostatným obsahom. Je vždy prítomný a môže byť minimalizovaný do zbaleného stavu (nazývaného aj železničný stav), aby sa uvoľnilo viac miesta pre obsah stránky. Pri menších veľkostiach okna sa dá minimalizovať do rozbaľovacej ponuky. Medzi najbežnejšie formy navigácie patrí horná navigácia a bočná navigácia. Nepoužívajte oboje súčasne.
Oblasť obsahu obsahuje fokus obrazovky . Veľkosť okna prehliadača ovplyvňuje rámec obsahu a priestor dostupný v hlavnej oblasti obsahu. Tento rámec sa prispôsobuje na základe bodu zlomu a zodpovedajúceho responzívneho správania každého komponentu. Viac informácií nájdete v časti Vytvorenie matice bodov prerušenia.
Oblasť obsahu môže voliteľne obsahovať niekoľko podoblastí, ktoré sú k dispozícii pre konzistentné umiestnenie prvkov, ako napríklad hlavičku stránky, vložené bočné panely alebo panely, ktoré prekrývajú obsah.
Dodržiavanie konzistentného dizajnového jazyka s farebnými schémami, typografiou a štruktúrou rozloženia pomáha používateľom rýchlo identifikovať a interagovať s rôznymi prvkami bez zmätku. Čím konzistentnejšie sa vzor rámca aplikácie používa vo všetkých interných obchodných aplikáciách, tým silnejšia je pamäť alebo mentálny model používateľa. Zosúladenie s priemyselnými štandardmi alebo spoločnými vzormi platforiem tento účinok ešte viac zosilňuje.
Po určení rámca aplikácie sa rozloženie každej obrazovky nachádza v oblasti obsahu rámca aplikácie.
Premyslene využite oblasť obsahu
Používatelia túžia po bezproblémových zážitkoch, kde sú informácie ľahko dostupné, text sa ľahko číta a estetika skôr zlepšuje, než bráni použiteľnosti. Uprednostnite počiatočnú viditeľnosť kľúčových informácií, zabezpečte čitateľnosť vo všetkých stĺpcoch a harmonizujte dizajnové prvky pre estetickú príťažlivosť.
Zabezpečte, aby boli dôležité informácie okamžite viditeľné po otvorení obrazovky bez nutnosti rolovania. Uprednostňujte zobrazenie dôležitých informácií, ako sú možnosti navigácie, dôležitý obsah a akčné položky v hornej časti obrazovky. Dosiahnutie rovnováhy medzi zobrazením dostatočného počtu položiek a poskytovaním podrobných informácií o každej položke je neustálou výzvou. Naopak, hoci môže byť lákavé poskytnúť všetky možné informácie v úvodnom zobrazení, príliš veľa informácií riskuje, že používateľov zahltí a oslabí význam kľúčových prvkov. Zvážte použitie stručných súhrnov alebo ukážok, ktoré ponúkajú pohľad na podrobnejší obsah a lákajú používateľov k hlbšiemu skúmaniu. Dashboardy sú optimalizované na tento účel, aby sa dalo vizualizovať veľké množstvo údajov.
Zahrňte viacero stĺpcov, sekcií alebo zoskupení, aby ste logicky usporiadali obsah a maximalizovali priestor. Venujte veľkú pozornosť šírke stĺpcov a uistite sa, že text zostane čitateľný bez nadmerného namáhania. Vyhnite sa príliš úzkym stĺpcom, ktoré nútia používateľov neustále posúvať sa horizontálne a narúšajú tak plynulosť interakcie. Naopak, príliš široké stĺpce môžu brániť čitateľnosti a vyžadovať od používateľov sledovanie riadkov na dlhé vzdialenosti. Snažte sa nájsť rovnováhu, ktorá zabezpečí pohodlné čítanie a zároveň efektívne využije dostupný priestor.
Vhodne prispôsobte veľkosť a umiestnenie vizuálnych prvkov tak, aby ste vytvorili vizuálne príjemné a vyvážené rozhranie. Zarovnajte popisky s príslušnými vizuálmi alebo nadpismi, udržiavajte konzistentné rozstupy medzi prvkami a dodržiavajte hierarchiu na základe potrieb používateľa. Odstráňte nepotrebné ozdoby a rozumne prideľte pixely prvkom, na ktorých najviac záleží. Uprednostňujte a zdôrazňujte obsahové a navigačné prvky, najmä v aplikáciách alebo na domovských stránkach s vysokou navigáciou, a vyhýbajte sa zbytočným ornamentom, ktoré znižujú použiteľnosť.
Podkladová mriežka môže byť užitočná na konzistentné usporiadanie prvkov. Zvolené správanie mriežky by malo byť konzistentné v celej oblasti obsahu každej obrazovky v aplikácii a možno ho použiť aj na úrovni komponentov, ako sú karty alebo bočné panely. Najbežnejším typom mriežkového rozloženia používaného vo webových aplikáciách je stĺpcová mriežka. Pre implementáciu responzívnych obrazoviek sa odporúča fluidné (alebo roztiahnuteľné) správanie mriežky.
Používajte zavedené rozloženia a vzory zoskupovania
Používajte bežne uznávané štruktúry a usporiadania na organizovanie obsahu a prvkov v používateľskom rozhraní. Tieto rozloženia a vzory boli časom zdokonalené a osvedčili sa ako účinné, vďaka čomu sú pre používateľov známe a intuitívne a zároveň uľahčujú implementáciu adaptívnych vzorov. Keď sú identifikované základné scenáre a prvky, namapujte každý z nich na zavedené rozloženie, ktoré poskytuje najlepšiu interakciu. Uprednostnite obsah a funkcie dôležité pre dokončenie úlohy. Rozhodnite, ktoré prvky by mali byť vždy viditeľné a prístupné na obrazovke a ktoré je možné skryť alebo k nim získať prístup prostredníctvom iných ponúk alebo akcií.
Nasledujúci zoznam, hoci nie je vyčerpávajúci, popisuje zavedené rozloženia bežne používané pre obchodné alebo produktívne aplikácie. Všetky je možné umiestniť do hlavnej oblasti obsahu.
Úvodná/Domovská obrazovka
Úvodná alebo domovská obrazovka slúži ako vstupný bod do aplikácie a poskytuje používateľom prehľad o ponukách alebo funkciách aplikácie. Zvyčajne sa zameriava na upútanie pozornosti návštevníkov a povzbudzuje ich k vykonaniu konkrétnej akcie, ako je napríklad dokončenie prvej úlohy alebo preskúmanie ďalšieho obsahu. Často obsahuje hlavné obrázky a prehľadné možnosti navigácie.
Je ideálny na privítanie používateľov, ponúkanie rýchleho prístupu ku kľúčovým funkciám, možnostiam navigácie alebo výzvam na akciu a nastavenie tónu pre používateľský zážitok z aplikácie. Uprednostňujte jasnosť, jednoduchosť a intuitívnu navigáciu, aby ste používateľov efektívne viedli.
Tabuľa
Ovládací panel je centralizované centrum v rámci aplikácie, ktoré používateľom poskytuje komplexný prehľad relevantných údajov alebo informácií. Často pozostáva z prispôsobiteľných widgetov alebo modulov, ktoré umožňujú používateľom sledovať konkrétne metriky alebo vykonávať akcie.
Dashboardy sú vhodné pre aplikácie s komplexnými súbormi údajov alebo viacstrannými funkciami, ktoré umožňujú používateľom sledovať pokrok, analyzovať trendy a robiť informované rozhodnutia na prvý pohľad. Sú obzvlášť užitočné v analytických platformách, nástrojoch na riadenie projektov a aplikáciách finančného riadenia.
Formulár
Formulár je štruktúrované rozloženie, ktoré uľahčuje zadávanie údajov od používateľov a zvyčajne pozostáva z polí na zadávanie rôznych typov informácií, ako sú text, čísla, dátumy a výbery. Formuláre sú nevyhnutné na zhromažďovanie vstupov od používateľov, spracovanie transakcií a uľahčenie interakcií v rámci aplikácií.
Bežne sa používajú v registračných procesoch, procesoch platby, úlohách zadávania údajov a v akýchkoľvek scenároch vyžadujúcich vstup alebo spätnú väzbu od používateľa.
Zobrazenie entity/profilu
Zobrazenie entity alebo profilu zobrazuje podrobné informácie o konkrétnej entite, ako je napríklad profil používateľa, zoznam produktov alebo položka obsahu. Zvyčajne obsahuje popisný text, multimediálne prvky a relevantné akcie alebo interakcie.
Sú vhodné na zobrazenie podrobných informácií o položkách v aplikácii. Poskytujú používateľom podrobné informácie, uľahčujú rozhodovanie a podporujú interakciu s konkrétnymi entitami, ako sú napríklad používateľské profily v aplikáciách sociálnych sietí alebo zoznamy produktov na platformách elektronického obchodu.
Stránka so zoznamom
Zoznam alebo tabuľka zobrazuje kolekciu položiek alebo entít v štruktúrovanom formáte, často prezentovanom v lineárnom alebo mriežkovom rozložení. Zvyčajne obsahuje stručné súhrny alebo ukážky každej položky spolu s ovládacími prvkami navigácie na prehliadanie alebo filtrovanie.
Stránky so zoznamami sú efektívne na prezentovanie veľkých súborov obsahu alebo údajov v ľahko stráviteľnom formáte, čo používateľom umožňuje efektívne prehľadávanie, vyhľadávanie a navigáciu. Ak sú povolené akcie na konkrétnych riadkoch, proces by mal byť jasný. Stránky so zoznamami sa bežne používajú v systémoch správy obsahu, zoznamoch adresárov, výsledkoch vyhľadávania a informačných kanáloch správ.
Minirecenzia (rozdelená obrazovka)
Minirecenzia alebo rozdelená obrazovka rozdeľuje rozhranie na dve odlišné časti, pričom na ľavej strane sa zobrazuje zoznam a na pravej strane zobrazenie položiek. Zoznam zvyčajne obsahuje kolekciu položiek, zatiaľ čo zobrazenie položky poskytuje podrobné informácie o vybratej položke v zozname.
Toto rozloženie je obzvlášť efektívne v situáciách, keď používatelia potrebujú rýchlo prehľadávať zoznam položiek a zároveň si zobraziť podrobné informácie o každej položke, napríklad pri hromadných operáciách. Katalógy produktov, systémy správy dokumentov, e-mailoví alebo komunikační klienti a nástroje na správu úloh (napríklad prehliadač dotazov Azure Dev Ops) sú scenáre, ktoré zvyčajne zodpovedajú tomuto vzoru.
Sprievodca
Sprievodca vedie používateľov sériou postupných krokov alebo úloh, zvyčajne lineárnym spôsobom, aby dokončil zložitý proces alebo dosiahol konkrétny cieľ. Často zahŕňa indikátory priebehu, výzvy a overovacie kontroly. Sprievodcovia sú prospešní pre zjednodušenie zložitých procesov, zníženie kognitívneho preťaženia a sprevádzanie používateľov neznámymi úlohami alebo pracovnými postupmi. Bežne sa používajú v procesoch zaškolenia, nastavenia, viackrokových formulároch a interakciách založených na úlohách, ako je konfigurácia zložitých nastavení alebo transakcií.
Prispôsobte a vytvorte štandardné rozloženie tak, aby vyhovovalo špecifickým požiadavkám. Tento proces môže zahŕňať pridávanie alebo odoberanie prvkov, úpravu veľkosti a umiestnenia prvkov a použitie štýlu tak, aby zodpovedal identite značky alebo pokynom pre vizuálny dizajn. Experimentujte s rôznymi konfiguráciami a variáciami štandardného rozloženia, aby ste našli najefektívnejšie usporiadanie obsahu a celkového používateľského zážitku.
Návrh rozložení pre všetky zariadenia
Rozloženia sú vyvrcholením definovaných pravidiel a zámernej organizácie obsahu. Začlenenie obsahu do premyslených štruktúr je kľúčové, ale dosiahnutie plynulého prepojenia s jasnou hierarchiou naprieč platformami a veľkosťami obrazoviek si vyžaduje logiku škálovania. Túto výzvu dokážu individuálne vyriešiť adaptívny aj responzívny dizajn. V niektorých prípadoch je tou správnou voľbou kombinácia adaptívneho a responzívneho dizajnu.
Responzívny dizajn používa iba jedno rozloženie, kde je obsah plynulý a dokáže sa prispôsobiť meniacej sa veľkosti formátu. Táto dizajnérska technika využíva mediálne dotazy na kontrolu charakteristík daného zariadenia a podľa toho vykresľuje obsah. Responzívny dizajn vám umožňuje vytvoriť funkciu raz a nechať ju efektívne fungovať na všetkých veľkostiach obrazoviek.
Adaptívne rozloženie sa úplne mení v závislosti od formátu, v ktorom je prezentované. Adaptívny dizajn má viacero pevných veľkostí rozloženia a spúšťa prehliadač tak, aby načítal dané rozloženie na základe dostupného priestoru. Webové stránky vytvorené s adaptívnym dizajnom používajú mediálne dotazy na detekciu bodov prerušenia, podobne ako responzívny dizajn. Používajú tiež dodatočné označenie na základe možností zariadenia. Tento proces je známy ako „progresívne zlepšovanie“.
Premiestniť
Zmeňte umiestnenie prvkov stránky.
Udržujte svoj obsah organizovaný, čitateľný a vyvážený optimalizáciou kompozície so zväčšujúcou sa veľkosťou okna. Napríklad vertikálne naskladané prvky v mobilnom výreze je možné premiestniť horizontálne vo väčších výrezoch. Táto zmena sleduje prirodzené poradie čítania zľava doprava, vytvára rovnováhu v dizajne a zachováva vizuálne zameranie na kľúčové prvky na stránke.
Zmeniť veľkosť
Upravte veľkosť a okraje prvkov stránky.
Zmeňte veľkosť prvkov stránky a optimalizujte tak bohatý používateľský zážitok zobrazením väčšieho množstva obsahu v hornej časti okna, čím sa zníži potreba vertikálneho rolovania. Upravte okraje stránky, aby ste pridali biely priestor a vyvážili rozloženie, čo umožní obsahu dýchať a zvýši vizuálnu príťažlivosť dizajnu. Napríklad, komponent Hero sa môže roztiahnuť na celú šírku okna, aby sa zobrazila väčšia časť obrázka na pozadí. Obsah pod obrázkom sa môže rozšíriť, ale použite rôzne okraje, aby ste rozloženie spestrili a pomohli definovať vizuálnu hierarchiu.
Natečenie textu
Optimalizujte tok prvkov stránky.
Upravte prvky stránky tak, aby sa zobrazovali úplne, pričom zohľadnite veľkosť a orientáciu okna, a to zmenou usporiadania obsahu. Napríklad, jeden stĺpec obsahu v menšom okne je možné vo väčšom okne preformátovať tak, aby sa zobrazili dva stĺpce textu. Táto technika umožňuje zobrazenie väčšieho množstva obsahu „nad záhybom“.
Zobraziť/skryť
Optimalizujte obsah pre veľkosť okna a jeho orientáciu.
Zobraziť alebo skryť prvky stránky pre optimalizáciu obsahu pre veľkosť okna a jeho orientáciu. Táto responzívna technika prispôsobuje množstvo informácií kontextu sledovania. Napríklad kategórie zobrazované na malej obrazovke môžu zobrazovať obmedzené metadáta, ako napríklad obrázok, názov a odkaz, aby boli viditeľné ďalšie informácie, ktoré používateľovi pomôžu sústrediť sa. Na väčšej obrazovke môžu kategórie zobrazovať ďalšie metadáta, ako napríklad personu, dátum a krátky popis, pričom sa stále zmestia do zobrazovanej oblasti.
Rearchitekt
Rozdeľte alebo zbaľte prvky a obsah stránky, aby ste zachovali sústredenie na dôležité informácie a akcie.
Tento prístup je podobný postupu „postupného odhaľovania“ vo vašom návrhu, ale pre rôzne veľkosti a orientácie okien. Napríklad rozšírenie okna umožňuje zobrazenie zoznamu položiek vedľa podrobností. Toto vizuálne prepojenie medzi obsahom umožňuje používateľom jednoducho vybrať inú položku. Na menšej obrazovke zostáva zameranie na zobrazenie kľúčových informácií.
Vytvorenie matice bodov prerušenia
Matica bodov prerušenia slúži ako grafické znázornenie responzívneho alebo adaptívneho správania návrhu aplikácie naprieč rôznymi veľkosťami a orientáciami obrazovky. Zvyčajne predstavuje štruktúrovanú mriežku alebo rozloženie s podrobnosťami o reakcii návrhu v rôznych bodoch zlomu. Každý segment zodpovedá odlišnej šírke obrazovky, čo ponúka prehľad o štruktúre, rozložení a funkčnosti dizajnu. Matica bodov prerušenia zahŕňa aspekty šírky obrazovky, orientácie zobrazovacej oblasti, dizajnových prvkov, štruktúry rozloženia, prezentácie obsahu, navigácie, médií a interaktívnych komponentov, aby ilustrovala, ako dizajn webovej stránky alebo aplikácie reaguje na rôznych veľkostiach a orientáciách obrazovky. Tento prístup nielen pomáha dokončiť návrh každej obrazovky, ale tiež uľahčuje implementáciu, keď sú zmeny vlastností kľúčových komponentov explicitne sledované a dobre komunikované.
Power Platform uľahčenie
Rozloženia formulárov aplikácií riadených modelom sa konfigurujú pomocou Power Apps Studio. Návrhár formulárov umožňuje tvorcom pridávať prvky do mriežkovej štruktúry, čo umožňuje, aby stránky formulárov boli inherentne responzívne. ... Vstavané vlastné komponenty, ako napríklad vlastné stránky, vstavané komponenty plátna a Power Apps komponenty kódu Component Framework , musia vo svojich implementáciách zahŕňať responzívne správanie. Napríklad, vlastné stránky musia implementovať responzívne správanie rovnakým spôsobom ako čisto plátnová aplikácia, aby fungovali správne.
Aplikácie Canvas vyžadujú explicitnú konfiguráciu pre každý komponent, aby implementovali responzívne správanie, čo umožňuje väčšiu kontrolu nad používateľským rozhraním. Veľkosti obrazovky sú určené v definícii aplikácie, na ktorú sa možno odvolať na určenie pozície, správania, viditeľnosti a ďalších relevantných vlastností.