Sdílet prostřednictvím

Pokyny pro posouvání

Posouvání nebo rolování umožňuje uživatelům navigovat v rámci jednoho zobrazení, aby zobrazili obsah, který se nevejde do oblasti zobrazení. Mezi příklady zobrazení patří struktura složek počítače, knihovna dokumentů nebo fotoalbum.

Důležitá rozhraní API: Windows.UI.Input, Windows.UI.Xaml.Input

Co dělat a co nedělat

Indikátory posouvání a posuvné lišty

  • Před načtením obsahu do aplikace se ujistěte, že je možné posouvání nebo rolování.

  • Zobrazte indikátory posouvání a posuvníky pro poskytování ukazatelů umístění a velikosti. Skryjte je, pokud poskytujete vlastní navigační funkci.

    Poznámka Na rozdíl od standardních posuvníků jsou indikátory posouvání čistě informativní. Nejsou vystaveny vstupním zařízením a nelze s nimi manipulovat žádným způsobem.

     

Jednoosé posouvání (jednorozměrné přetečení)

  • Posouvání na jedné ose použijte pro oblasti obsahu, které přesahují jednu hranici oblasti zobrazení (svislé nebo vodorovné).

    • Svislé posouvání jednorozměrného seznamu položek
    • Vodorovné posouvání pro mřížku položek

  • Nepoužívejte povinné body přichycení u jednoosého posouvání, pokud uživatel musí mít možnost zastavit mezi body přichycení. Nutné body přichycení zaručují, že se uživatel zastaví u přichycení. Místo toho používejte přichytávací body podle blízkosti.

Volné posouvání (dvojrozměrné přetečení)

  • Pro oblasti obsahu, které přesahují hranice oblasti zobrazení (svislé i vodorovné), použijte posouvání se dvěma osami.

    • Přepište výchozí chování kolejnice a použijte volné posouvání pro nestrukturovaný obsah, kde se uživatel pravděpodobně pohybuje v různých směrech.

  • Volné posouvání je obvykle vhodné pro navigaci v obrázcích nebo mapách.

Stránkované zobrazení

  • Pokud se obsah skládá z diskrétních prvků nebo chcete zobrazit celý prvek, použijte povinné přichycovací body. Může to zahrnovat stránky knihy nebo časopisu, sloupec položek nebo jednotlivé obrázky.

    • Bod přichycení by se měl umístit na každou logickou hranici.
    • Každý prvek by měl mít velikost nebo měřítko tak, aby odpovídal zobrazení.

Logické a klíčové body

  • Pokud jsou v obsahu klíčové body nebo logická místa, u kterých se uživatel pravděpodobně zastaví, použijte přichycovací body. Například záhlaví oddílu.

  • Pokud jsou definována omezení maximální a minimální velikosti nebo hranice, použijte vizuální zpětnou vazbu k předvedení, kdy uživatel dosáhne nebo překročí tyto hranice.

Řetězení integrovaného nebo vnořeného obsahu

  • Pro text a obsah založený na mřížce používejte posouvání s jednou osou (obvykle vodorovné) a rozložení sloupců. V těchto případech se obsah obvykle zalamuje a proudí přirozeně ze sloupce do sloupce a udržuje uživatelské prostředí konzistentní a zjistitelné napříč aplikacemi pro Windows.

  • K zobrazení textových seznamů nebo seznamů položek nepoužívejte vložené posouvatelné oblasti. Vzhledem k tomu, že indikátory posouvání a posuvníky se zobrazují jenom v případě, že je vstupní kontakt zjištěn v rámci oblasti, nejedná se o intuitivní nebo zjistitelné uživatelské prostředí.

  • Neřetězte ani neumisťujte oblast s možností posouvání do jiné oblasti s možností posouvání, pokud se obě posouvají ve stejném směru, jak je zde znázorněno. To může způsobit neúmyslné posouvání nadřazené oblasti při dosažení hranice podřízené oblasti. Zvažte nastavení osy panorámování kolmo.

    obrázek znázorňující vloženou posuvnou oblast, která se posune stejným směrem jako její kontejner.

Další pokyny k použití

Posouvání dotykem pomocí gesta potažení nebo posunutí jedním nebo více prsty je podobné skrolování myší. Interakce při panoramování se nejvíce podobá otáčení kolečka myši nebo posouvání posuvné oblasti, než kliknutí na posuvník. Pokud není v rozhraní API proveden rozdíl nebo to nevyžaduje určité zařízení-specifické uživatelské rozhraní Windows, jednoduše obě interakce označujeme jako posouvání.

Windows 10 Fall Creators Update – změna chování Ve výchozím nastavení se místo výběru textu aktivní pero v aplikacích pro Windows posune stejně jako dotyk, touchpad a pasivní pero. Pokud vaše aplikace závisí na předchozím chování, můžete přepsat posouvání perem a vrátit se k předchozímu chování. Podrobnosti najdete v referenčním tématu rozhraní API pro třídu ScrollViewer.

V závislosti na vstupním zařízení uživatel posune v oblasti, kde je možné posouvání, pomocí některé z těchto možností:

  • Pomocí myši, touchpadu nebo aktivního pera můžete kliknout na šipky posuvné lišty, přetáhnout posuvné pole nebo kliknout kdekoliv v posuvné liště.
  • Tlačítko kolečka myši pro emulaci tažení posuvníku.
  • Rozšířená tlačítka (XBUTTON1 a XBUTTON2), pokud jsou podporována myší.
  • Klávesy se šipkami klávesnice pro emulaci přetažení posuvného boxu nebo klávesy stránky pro emulaci kliknutí v rámci posuvníku.
  • K posunutí nebo přejetí prsty požadovaným směrem použijte dotykovou obrazovku, touchpad nebo pasivní pero/stylus.

Posuvné zahrnuje pomalé posouvání prstů ve směru otáčení. Výsledkem je relace 1:1, kdy se obsah posune stejnou rychlostí a vzdáleností jako prsty. Gesto potáhnutí prsty, které zahrnuje rychlé posouvání a zvedání prstů, má za následek aplikaci následující fyziky na pohyb animace:

  • Decelerace (inertia): Zvedání prstů způsobuje, že posouvání začne zpomalovat. To je podobné skluzu do zastavení na kluzkém povrchu.
  • Absorpce: Posunovací dynamika během decelerace způsobí mírný odrazový efekt, pokud je dosaženo bodu přichycení nebo hranice oblasti obsahu.

Typy panorámování

Windows podporuje tři typy posouvání:

  • Jednoduchá osa – posouvání je podporováno pouze jedním směrem (vodorovně nebo svisle).
  • Kolejnice – posouvání je podporováno ve všech směrech. Jakmile ale uživatel překročí prahovou hodnotu vzdálenosti v určitém směru, je posouvání omezeno na tuto osu.
  • Volný tvar – posouvání je podporováno ve všech směrech.

Posouvání uživatelského rozhraní

Zážitek z interakce při posouvání obrazu je jedinečný pro vstupní zařízení, ale stále poskytuje podobné funkce.

Na základě zjištěného vstupního zařízení existují dva režimy zobrazení posouvání:

  • Indikátory posouvání pro dotykové ovládání
  • Posuvníky pro další vstupní zařízení, včetně myši, touchpadu, klávesnice a pera.

Poznámka Indikátory posouvání jsou viditelné jenom v případě, že je kontakt dotykového ovládání v posouvatelné oblasti. Podobně je posuvník viditelný jenom v případě, že je kurzor myši, kurzor pera nebo fokus klávesnice v oblasti pro posouvání.

 

Indikátory posouvání Indikátory posouvání se podobají posuvné krabičce v posuvníku. Označují poměr zobrazovaného obsahu k celkové posouvatelné oblasti a relativní pozici zobrazeného obsahu v posouvatelné oblasti.

Následující diagram znázorňuje dvě posouvatelné oblasti různých délek a jejich indikátory posouvání.

obrázek znázorňující dvě posouvatelné oblasti různých délek a jejich indikátory posouvání

Chování při posouváníBody přichycení Posouvání pomocí gesta tažení prstem zavádí do interakce chování setrvačnosti při zvednutí dotykového kontaktu. Při nečinnosti se obsah pokračuje v posouvání až do dosažení prahové hodnoty vzdálenosti bez přímého vstupu od uživatele. K úpravě tohoto chování setrvačnosti použijte body přichycení.

Body přichycení určují logické body v obsahu aplikace. Cognitivně fungují body přichycení jako mechanismus stránkování pro uživatele a minimalizují únavu z nadměrného rolování nebo přetahování ve velkých oblastech, které je možné posouvat. Pomocí nich můžete zpracovat nepřesné uživatelské zadání a zajistit, aby se v oblasti zobrazení zobrazila konkrétní podmnožina informací o obsahu nebo klíči.

Existují dva typy bodů přichycení:

  • Vzdálenost – Po zvednutí kontaktu je vybrán bod přichycení, pokud se inertia zastaví v rámci prahové hodnoty vzdálenosti bodu přichycení. Posouvání se může stále zastavit mezi body automatického přichycení.
  • Povinné – vybraný bod přichycení je ten, který bezprostředně předchází nebo následuje poslední bod přichycení, kterým bylo procházeno před zvednutím kontaktu (v závislosti na směru a rychlosti gesta). Posouvání se musí zastavit na povinném bodu přichycení.

Posouvání bodů přichycení je užitečné pro aplikace, jako jsou webové prohlížeče a fotoalba, které emulují stránkovaný obsah nebo mají logické seskupení položek, které se dají dynamicky seskupit tak, aby se vešly do oblasti zobrazení nebo zobrazení.

Následující diagramy ukazují, jak posouvání do určitého bodu a uvolnění způsobí, že se obsah automaticky posune do logického umístění.

obrázek znázorňující oblast s možností posouvání

Potažením prstem posunete.

obrázek znázorňující posouvání posouvané oblasti doleva

Zvedněte kontakt dotykového ovládání.

obrázek znázorňující oblast s možností posouvání, která se zastavila v logickém bodu přichycení

Posunovatelná oblast se zastaví v bodu přichycení, ne tam, kde byl kontakt dotyku zvednut.

Kolejnice Obsah může být širší a vyšší než rozměry a rozlišení zobrazovacího zařízení. Z tohoto důvodu je často nutné posouvání ve dvou rozměrech, a to vodorovně i svisle. Rails vylepšuje uživatelské prostředí v těchto případech tím, že zdůrazňuje posouvání podél osy pohybu (svislé nebo vodorovné).

Následující diagram znázorňuje koncept kolejnic.

diagram obrazovky se zábradlími, které omezují posouvání

Řetězení integrovaného nebo vnořeného obsahu

Jakmile uživatel dosáhne limitu přiblížení nebo posouvání u prvku, který je vnořený do jiného prvku přiblížení nebo posouvání, můžete určit, zda má nadřazený prvek pokračovat v operaci přiblížení nebo posouvání zahájené ve svém podřízeném prvku. Říká se tomu zoomování nebo řetězení posouvání.

Řetězení se používá k posouvání v oblasti obsahu s jednou osou, která obsahuje jednu nebo více oblastí pro posouvání na jedné ose nebo volné posouvání (pokud je dotykový kontakt uvnitř jedné z těchto dílčích oblastí). Když je dosažena hranice posouvání podřízené oblasti v konkrétním směru, aktivuje se posouvání v nadřazené oblasti ve stejném směru.

Pokud je vnořená oblast s možností posouvání uvnitř jiné posouvatelné oblasti, je důležité zadat dostatek místa mezi kontejnerem a vloženým obsahem. V následujících diagramech je jedna posouvatelná oblast umístěna uvnitř jiné posouvatelné oblasti, z nichž každá prochází kolmými směry. V každé oblasti je dostatek místa, kde mohou uživatelé posouvat.

obrázek znázorňující vloženou oblast, kterou lze posouvat.

Jak je znázorněno v následujícím diagramu, bez dostatečného místa může vložená posunovatelná oblast kolidovat s posouváním v kontejneru a vést k neúmyslnému posouvání v jedné nebo více posunovatelných oblastí.

obrázek znázorňující nedostatečné odsazení pro vloženou oblast s možností posouvání

Tyto pokyny jsou užitečné také pro aplikace, jako jsou fotoalba nebo mapové aplikace, které podporují nekontrénované posouvání v rámci jednotlivých obrázků nebo map a zároveň podporují posouvání s jednou osou v rámci alba (do předchozího nebo dalšího obrázku) nebo oblasti podrobností. V aplikacích, které poskytují podrobnosti nebo oblast možností odpovídající volně posouvatelnému obrázku nebo mapě, doporučujeme, aby rozložení stránky začínalo podrobnostmi a oblastí možností, protože neomezené posouvání obrázku nebo mapy by mohlo zasahovat do posouvání do oblasti podrobností.

Ukázky

Archivní ukázky

  • Last updated on