Doporučení pro optimalizaci rozvržení
Platí pro toto doporučení kontrolního seznamu optimalizace prostředí pro Power Platform Well-Architected:
| XO:06 | Udržujte použitelná a vizuálně přitažlivá rozvržení napříč velikostí obrazovky a rozlišením. Použijte adaptivní techniky k dynamickému vykreslování obsahu různými způsoby. |
|---|
Tato příručka popisuje doporučení pro navrhování rozvržení obrazovky, které lze snadno procházet a plynule přizpůsobovat různým zařízením. Tento přístup zajišťuje, že uživatelé budou mít konzistentní a optimální zobrazení bez ohledu na zařízení, které používají.
Definice
| Pojem | definice |
|---|---|
| Pole zobrazení | Viditelná část digitálního rozhraní, jako je webový prohlížeč nebo mobilní aplikace, kde se zobrazuje obsah. Rozsahy polí zobrazení jsou často spojeny s třídami zařízení (mobil, tablet a stolní počítač) na základě rozměrů a rozlišení obrazovky. |
| Zarážky | Konkrétní hodnoty pixelů, které definují rozsahy výřezů používané k určení chování adaptivního rozvržení. |
Klíčové strategie návrhu
Responzivní rozvržení poskytují flexibilní a efektivní uživatelské prostředí v různých velikostech oken. Přizpůsobují se změnou měřítka obsahu, přeskupováním prvků a selektivním zobrazováním textu a obrázků. Responzivní rozložení splňují potřeby uživatelů bez ohledu na velikost jejich obrazovky.
Určete konzistentní rámec aplikace
Rám aplikace se skládá ze sady ovládacích prvků, které jsou konzistentně dostupné na každé obrazovce. Obsahuje tři hlavní dílčí součásti: záhlaví, navigaci a oblast obsahu. Jednoduché aplikace mají flexibilitu používat komponentu záhlaví, zatímco sofistikovanější aplikace často využívají boční navigaci k umožnění více stránek. Dílčí komponenty jsou přizpůsobitelné. Můžete například začlenit globální vyhledávání do záhlaví nebo seskupit položky v boční navigaci, aby vyhovovaly požadavkům vaší aplikace.
Tři hlavní dílčí součásti rámce aplikace jsou:
Záhlaví je základní komponenta navržená tak, aby byla součástí každé interní aplikace. Skládá se z dílčích komponent, které uživatelům poskytují přístup k celosystémovým funkcím, pomáhají jim orientovat se v uživatelském rozhraní a poskytují konzistenci napříč prostředími. Zobrazuje se v horní části rámce aplikace a mělo by se zobrazovat na všech stránkách aplikace. Může volitelně hostit globální příkazy, jako je vyhledávání, nastavení, oznámení, zpětná vazba, profil nebo nápověda. Vždy by se měl zobrazovat název aplikace, který by v ideálním případě měl sloužit i jako klikací odkaz na úvodní nebo cílovou stránku. Záhlaví by mělo reagovat a příkazy by se měly přesunout do ovládacího prvku přetečení ve výřezech o velikosti 600 pixelů a méně. Šířka vstupu vyhledávání je také responzivní při 1023 pixelech a méně.
Navigace je systém ovládacích prvků, které spolupracují a pomáhají uživatelům hledat informace a provádět úkoly. Pomáhá uživatelům přeskakovat ze sekce do sekce aplikace. Hierarchicky není připojena k žádné stránce nebo sekci, ale existuje nad vším ostatním obsahem. Je vždy přítomna a může být minimalizována do sbaleného stavu (také nazývaného stav kolejnice), aby se uvolnil další prostor pro obsah stránky. U menších velikostí okna ji lze minimalizovat do rozbalovací nabídky. Mezi nejběžnější formy navigace patří horní navigace a boční navigace. Nepoužívejte obojí současně.
Oblast obsahu obsahuje ohnisko obrazovky. Velikost okna prohlížeče ovlivňuje rámec obsahu a prostor dostupný v oblasti hlavního obsahu. Tento rámec se přizpůsobí na základě zarážky a odpovídajícího chování každé komponenty. Další informace naleznete v tématu Vytvoření matice zarážky.
Oblast obsahu může volitelně obsahovat několik podoblastí, které jsou k dispozici pro konzistentní umístění prvků, jako je záhlaví stránky, vložené boční panely nebo panely, které překrývají obsah.
Dodržování konzistentního návrhového jazyka u barevných schémat, typografie a struktury rozvržení pomáhá uživatelům rychle identifikovat různé prvky a pracovat s nimi bez zmatků. Čím důsledněji se vzor rámce aplikace používá ve všech interních podnikových aplikacích, tím silnější je zapamatování nebo mentální model uživatele. Uvedení do souladu s průmyslovými standardy nebo běžnými vzory platforem tento efekt dále zvyšuje.
Po určení rámce aplikace se rozvržení každé obrazovky nachází v oblasti obsahu rámce aplikace.
Promyšleně používejte oblast obsahu
Uživatelé touží po bezproblémových prostředích, kde jsou informace snadno dostupné, text je snadno čitelný a estetika vylepšuje, nikoli brání použitelnosti. Upřednostněte počáteční viditelnost klíčových informací, zajistěte čitelnost napříč sloupci a harmonizujte prvky designu pro estetickou přitažlivost.
Zajistěte, aby byly důležité informace okamžitě viditelné po otevření obrazovky bez nutnosti posouvání. Upřednostněte zobrazení základních informací, jako jsou možnosti navigace, důležitý obsah a položky, které lze provádět v horní části obrazovky. Nalézt rovnováhu mezi zobrazením dostatečného množství položek a poskytováním podrobných informací o každé položce je neustálou výzvou. A naopak, i když může být lákavé poskytnout všechny možné informace v počátečním pohledu, příliš mnoho informací vytváří riziko, že zahltí uživatele a oslabí význam klíčových prvků. Zvažte použití stručných shrnutí nebo náhledů, které nabízejí pohled na podrobnější obsah a lákají uživatele k hlubšímu prozkoumání. Řídicí panely jsou optimalizovány tak, aby sloužily tomuto účelu pro vizualizaci velkého množství dat.
Zahrňte více sloupců, sekcí nebo seskupení, abyste logicky uspořádali obsah a maximalizovali prostor. Věnujte pečlivou pozornost šířce sloupců, aby text zůstal čitelný bez nadměrného namáhání. Vyhněte se příliš úzkým sloupcům, které nutí uživatele neustále se posouvat vodorovně, což narušuje tok interakce. Naopak příliš široké sloupce mohou zhoršit čitelnost, což vyžaduje, aby uživatelé sledovali řádky na delší vzdálenosti. Usilujte o rovnováhu, která umožní pohodlné čtení a zároveň efektivně využije dostupný prostor.
Přizpůsobte velikost a umístění vizuálních prvků, abyste vytvořili vizuálně příjemné a vyvážené rozhraní. Zarovnejte titulky s odpovídajícími vizuály nebo názvy, udržujte konzistentní mezery mezi prvky a dodržujte hierarchii založenou na potřebách uživatelů. Odstraňte zbytečné ozdoby a uvážlivě přidělte pixely prvkům, na kterých záleží nejvíce. Upřednostněte a zdůrazněte obsah a navigační prvky, zejména v aplikacích nebo domovských stránkách náročných na navigaci, a vyhněte se nadbytečným ozdobám, které snižují použitelnost.
Podkladová mřížka může být užitečná pro konzistentní uspořádání prvků. Zvolené chování mřížky by mělo být konzistentní v celé oblasti obsahu každé obrazovky v aplikaci a lze jej také použít na úrovni komponent, jako jsou karty nebo boční panely. Nejběžnějším typem rozložení mřížky používané ve webových aplikacích je mřížka sloupců. Pro implementaci responzivních obrazovek se doporučuje chování tekuté (nebo roztažené) mřížky.
Použijte zavedené rozvržení a vzory seskupení
Používejte běžně uznávané struktury a uspořádání pro organizaci obsahu a prvků v rámci uživatelského rozhraní. Tato rozvržení a vzory byly vylepšovány a v průběhu času se ukázaly jako účinné, díky čemuž jsou pro uživatele známé a intuitivní a zároveň usnadňují implementaci adaptivních vzorů. Jakmile jsou základní scénáře a prvky identifikovány, namapujte každý z nich na zavedené rozložení, které poskytuje nejlepší interakci. Upřednostněte obsah a funkce důležité pro provedení úkolu. Rozhodněte, které prvky by měly být na obrazovce vždy viditelné a přístupné a které lze skrýt nebo k nim přistupovat prostřednictvím jiných nabídek nebo akcí.
Následující seznam, i když není vyčerpávající, popisuje zavedená rozvržení běžně používaná pro obchodní nebo produktivní aplikace. Vše se může odehrávat v oblasti hlavního obsahu.
Cílová/úvodní obrazovka
Cílová a úvodní obrazovka slouží jako vstupní bod do aplikace a poskytuje uživatelům přehled o nabídkách nebo funkcích aplikace. Obvykle si klade za cíl upoutat pozornost návštěvníků a vybízí k provedení konkrétní akce, jako je provedení prvního úkolu nebo prozkoumání dalšího obsahu. Často obsahuje hlavní obrázky a čisté možnosti navigace.
Je ideální pro vítání uživatelů, nabízí rychlý přístup ke klíčovým funkcím, možnostem navigace nebo výzvám k akci a nastavuje tón pro používání aplikace. Upřednostněte srozumitelnost, jednoduchost a intuitivní navigaci, abyste mohli uživatele efektivně vést.
řídicí panel
Řídicí panel je centralizované centrum v rámci aplikace, které uživatelům poskytuje komplexní přehled relevantních dat nebo informací. Často se skládá z přizpůsobitelných widgetů nebo modulů, které uživatelům umožňují sledovat konkrétní metriky nebo provádět akce.
Řídicí panely jsou vhodné pro aplikace s komplexními datovými sadami nebo mnohostrannými funkcemi, které uživatelům umožňují sledovat pokrok, analyzovat trendy a činit informovaná rozhodnutí na první pohled. Jsou zvláště užitečné v analytických platformách, nástrojích pro řízení projektů a aplikacích pro správu financí.
Formulář
Formulář je strukturované rozvržení, které usnadňuje zadávání dat od uživatelů, obvykle se skládá z polí pro zadávání různých typů informací, jako je text, čísla, data a výběry. Formuláře jsou nezbytné pro sběr uživatelských vstupů, zpracování transakcí a usnadnění interakcí v rámci aplikací.
Běžně se používají v registračních tocích, pokladních procesech, úlohách zadávání dat a všech scénářích vyžadujících vstup nebo zpětnou vazbu od uživatele.
Zobrazení entity/profilu
Zobrazení entity nebo profilu představuje podrobné informace o konkrétní entitě, jako je uživatelský profil, výpis produktu nebo položka obsahu. Obvykle zahrnuje popisný text, multimediální prvky a relevantní akce nebo interakce.
Jsou vhodné pro předvádění podrobných informací o položkách v rámci aplikace. Poskytují uživatelům hloubkový přehled, usnadňují rozhodování a podporují zapojení do konkrétních subjektů, jako jsou uživatelské profily v aplikacích sociálních sítí nebo výpisy produktů na platformách elektronického obchodu.
Stránka seznamu
Seznam nebo tabulka zobrazuje kolekci položek nebo entit ve strukturovaném formátu, často v lineárním nebo mřížkovém rozložení. Obvykle obsahuje stručné shrnutí nebo náhledy každé položky spolu s ovládacími prvky navigace pro procházení nebo filtrování.
Stránky seznamu jsou efektivní pro prezentaci velkých sad obsahu nebo dat ve stravitelném formátu, což uživatelům umožňuje efektivně skenovat, vyhledávat a procházet. Pokud jsou zapnuty akce na konkrétních řádcích, proces by měl být jasný. Stránky se seznamy se běžně používají v systémech pro správu obsahu, seznamech adresářů, výsledcích vyhledávání a zpravodajských kanálech.
Minirecenze (rozdělená obrazovka)
Minirevize nebo rozdělená obrazovka rozděluje rozhraní do dvou samostatných sekcí se seznamem zobrazeným na levé straně a zobrazením položek na pravé straně. Seznam obvykle obsahuje kolekci položek, zatímco zobrazení položek poskytuje podrobné informace o vybrané položce v seznamu.
Toto rozvržení je zvláště účinné ve scénářích, kde uživatelé potřebují rychle procházet seznam položek a současně zobrazit podrobné informace o každé položce, například při provádění hromadných operací. Katalogy produktů, systémy správy dokumentů, e-mailoví nebo komunikační klienti a nástroje pro správu úloh (například prohlížeč dotazů Azure Dev Ops) jsou scénáře, které tomuto vzoru obvykle vyhovují.
Průvodce
Průvodce provádí uživatele řadou po sobě jdoucích kroků nebo úkolů, obvykle lineárním způsobem, aby dokončili komplexní proces nebo dosáhli konkrétního cíle. Často zahrnuje indikátory průběhu, výzvy a kontroly ověření. Průvodci jsou prospěšní pro zjednodušení složitých procesů, snížení kognitivního přetížení a provázení uživatelů neznámými úkoly nebo pracovními postupy. Běžně se používají v zaváděcích tocích, procesech nastavení, vícekrokových formulářích a interakcích založených na úkolech, jako je konfigurace složitých nastavení nebo transakcí.
Přizpůsobujte a stavte na standardním rozložení tak, aby vyhovovalo konkrétním požadavkům. Tento proces může zahrnovat přidávání nebo odebírání prvků, úpravu velikosti a umístění prvků a použití stylů, aby odpovídaly zásadám identity značky nebo vizuálního designu. Experimentujte s různými konfiguracemi a variacemi standardního rozvržení, abyste našli nejefektivnější uspořádání pro obsah a celkovou uživatelskou zkušenost.
Navrhněte rozvržení pro všechna zařízení
Rozvržení jsou vyvrcholením definovaných pravidel a záměrného uspořádání obsahu. Převedení obsahu do promyšlených struktur je klíčové, ale zajistit, aby vše plynulo společně s jasnou hierarchií napříč platformami a velikostmi obrazovek, vyžaduje logiku škálování. Individuálně, adaptivní a responzivní design může vyřešit tuto výzvu. V některých případech je správnou volbou kombinace adaptivního a responzivního designu.
Responzivní design používá pouze jedno rozvržení, kde je obsah plynulý a dokáže se přizpůsobit měnící se velikosti formátu. Tato technika návrhu využívá dotazy na média ke kontrole vlastností daného zařízení a podle toho vykresluje obsah. Responzivní design vám umožňuje vytvořit funkci jednou a nechat ji efektivně fungovat na všech velikostech obrazovky.
Adaptivní rozvržení se mění zcela podle formátu, ve kterém je prezentováno. Adaptivní design má několik pevných velikostí rozvržení a spouští prohlížeč, aby načetl dané rozvržení na základě dostupného místa. Weby vytvořené s adaptivním designem používají mediální dotazy k detekci zarážek, podobně jako responzivní design. Používají také další značky na základě možností zařízení. Tento proces se označuje jako „progresivní vylepšení“.
Změna pozice
Změna pozice prvků stránky.
Udržujte svůj obsah uspořádaný, čitelný a vyvážený optimalizací kompozice s rostoucí velikostí okna. Například vertikálně naskládané prvky na mobilním poli zobrazení lze horizontálně přemístit na větších polích zobrazení. Tato změna sleduje přirozené pořadí čtení zleva doprava, vytváří rovnováhu v návrhu a zachovává vizuální zaměření na klíčové prvky na stránce.
Změnit velikost
Upravte velikost a okraje prvků stránky.
Změňte velikost prvků stránky pro optimalizaci pro bohaté uživatelské prostředí zobrazením více obsahu v horní části okna, čímž se sníží potřeba vertikálního posouvání. Upravte okraje stránky, abyste přidali bílý prostor a vyvážení rozvržení, což umožňuje obsahu dýchat a zvyšuje vizuální přitažlivost návrhu. Hlavní komponenta se například může roztáhnout na celou šířku okna, aby se zobrazila větší část obrázku na pozadí. Obsah pod obrázkem může být rozšířen, ale použijte různé okraje pro zpestření rozvržení a pomáhá definovat vizuální hierarchii.
Přeformátování
Optimalizujte tok prvků stránky.
Upravte prvky stránky tak, aby bylo zajištěno jejich úplné zobrazení, přičemž se zohledňuje velikost a orientace okna změnou uspořádání obsahu. Například jeden sloupec obsahu v menším okně lze přeformátovat ve větším okně a zobrazit dva sloupce textu. Tato technika umožňuje zobrazit více obsahu „nad okrajem“.
Zobrazit/skrýt
Optimalizujte obsah pro velikost okna a jeho orientaci.
Zobrazte nebo skryjte prvky stránky pro optimalizaci obsahu pro velikost okna a jeho orientaci. Tato responzivní technika přizpůsobuje množství informací kontextu zobrazení. Například kategorie zobrazené na malé obrazovce mohou zobrazovat omezená metadata, jako je obrázek, název a odkaz, takže jsou viditelné další informace, které uživateli pomohou soustředit se. Na větší obrazovce mohou kategorie zobrazovat další metadata, jako je osoba, datum a krátký popis, a přitom se stále vejdou do pole zobrazení.
Nová architektura
Rozvětvete nebo sbalte prvky a obsah stránky, abyste se mohli soustředit na důležité informace a akce.
Tento přístup je podobný postupu „progresivního informování“ ve vašem návrhu, ale pro různé velikosti a orientace oken. Například roztažení okna umožňuje zobrazení seznamu položek vedle podrobností. Toto vizuální propojení mezi obsahem umožňuje uživatelům snadno vybrat jinou položku. Na menší obrazovce zůstává pozornost zaměřena na zobrazení klíčových informací.
Vytvořte matici zarážek
Matice zarážek slouží jako grafické znázornění responzivního nebo adaptivního chování návrhu aplikace na různých velikostech a orientacích obrazovky. Obvykle představuje strukturovanou mřížku nebo rozvržení podrobně popisující odezvu návrhu v různých zarážkách. Každý segment odpovídá odlišné šířce obrazovky a nabízí pohled na strukturu, rozvržení a funkčnost návrhu. Matice zarážek zahrnuje úvahy o šířce obrazovky, orientaci pole zobrazení, designových prvcích, struktuře rozvržení, prezentaci obsahu, navigaci, médiích a interaktivních komponentách, aby ilustrovala, jak design webu nebo aplikace reaguje na různé velikosti a orientace obrazovky. Tento přístup nejen pomáhá provést návrh každé obrazovky, ale také usnadňuje implementaci, když jsou změny vlastností klíčových komponent explicitně sledovány a dobře komunikovány.
Usnadnění dáky Power Platform
Rozvržení formuláře aplikace řízená modelem se konfigurují pomocí Power Apps Studio. Návrhář formulářů umožňuje tvůrcům přidávat prvky do mřížkové struktury, což umožňuje, aby stránky formuláře byly přirozeně responzivní. Vložené vlastní komponenty jako vlastní stránky, vložené komponenty plátna a komponenty kódu Power Apps Component Framework musí do svých implementací začlenit responzivní chování. Aby například vlastní stránky fungovaly správně, musí implementovat responzivní chování stejným způsobem jako čistě aplikace plátna.
Aplikace plátna vyžadují explicitní konfiguraci pro každou komponentu, aby implementovaly responzivní chování, což umožňuje větší kontrolu nad prostředím. Velikosti obrazovky se určují na základě definice aplikace, na kterou lze odkazovat při určování polohy, chování, viditelnosti a dalších relevantních vlastností.