Složené vzory pro Visual Studio

Složené vzory kombinují interakce a prvky návrhu v různých konfiguracích. Mezi nejdůležitější složené vzory v Visual Studio s ohledem na konzistenci patří:

Vizualizace dat

Přehled

Grafy jsou vizuální způsob, jak agregovat a vizualizovat data za účelem zlepšení rozhodování. Můžou pomoci uživatelům s mnoha daty, ale s malým významem vidí, co si zaslouží pozornost a co může potřebovat akci.

Uživatel bude mít výhodu v grafu, pokud platí kterákoli z následujících podmínek:

  • Pomůže tento graf uživatelům identifikovat úkoly, na které můžou můžou působit?

  • Umožní graf uživatelům odhadovat důsledky potenciálních změn?

  • Pomůže graf uživatelům zjišťovat trendy a identifikovat vzory?

  • Umožní graf uživatelům dělat lepší rozhodnutí?

  • Pomůže graf zodpovědět konkrétní otázku, kterou můžou mít uživatelé v daném kontextu?

Obecná pravidla pro grafy

  • Jasně označte data. Ilustrace bez vysvětlení jsou jenom pěkný obrázky.

  • Začněte osy na nule, abyste se vyhnuli zkosení poměrů. Délka čáry a velikost pruhu jsou důležitými vizuálními podněty k pochopení vztahů mezi datovými body.

  • Vytváření grafů, ne infografiky Infografika je reprezentace dat a jejich hlavním cílem je vizuální vyprávění příběhů. Grafy mohou (a měly by) být vizuálně atraktivní, ale nechat data mluvit sama za sebe.

  • Vyhněte se neskeumorfismu, grafickým pruhům, kontrastním hashmarkům a dalším dotykům infografiky.

  • Nepoužívejte 3D efekty jako dekorativní prvek. Používejte je jenom v případě, že jsou skutečně nedílnou součástí schopnosti uživatele porozumět informacím.

  • Nepoužívejte více čar a výplní, protože více než dvě barvy mohou ztěžovat čtení a interpretaci tohoto typu grafu.

  • Nepoužívejte graf (ani žádný obrázek) jako jediný způsob, jak porozumět konceptu nebo interakci s daty. To představuje potíže pro uživatele se zrakovým postižením.

  • Nepoužívejte na stránce grafy jako nahodilé ani dekorativní prvky. Jinými slovy, pokud graf nepřidá žádnou hodnotu nebo pomůže uživatelům problém vyřešit, nepoužívejte ho.

Typy grafů

Mezi typy grafů používaných v Visual Studio patří pruhové grafy, pruhové grafy, upravený výsečový graf označovaný jako prstencový graf neboli prstencový graf, časové osy, bodové grafy (označované také jako "shlukové grafy") a Ganttovy grafy. Každý typ grafu je užitečný pro komunikaci jiného typu informací.

Další aspekty grafů

Barva

Existuje konkrétní paleta barev grafů definovaná pro použití v Visual Studio. Paleta je přístupná pro hlavní typy barhosleposti a barvy je možné rozlišit, i když se používají jako velmi úzké řezy barvy. Tyto barvy můžete použít v libovolné kombinaci pro libovolný typ grafu nebo grafu v uživatelském rozhraní. Pokud nepotřebujete tolik různých barev, není nutné používat všech sedm barev. Tyto barvy nebyly navrženy tak, aby se používaly s žádnými prvky popředí, takže nad tyto barvy neumisťovat text ani piktogramy. Tyto odstíny by měly být nahodřené a vystavené uživatelským přizpůsobením v části Nástroje > Možnosti (viz Vystavení barev pro koncové uživatele).

Políčko Hex RGB
Swatch 71B252 #71B252 113,178,82
Swatch BF3F00 #BF3F00 191,63,0
Swatch FCB714 #FCB714 252,183,20
Swatch 903F8B #903F8B 144,63,139
Swatch 117AD1 #117AD1 17,122,209
Swatch 79D7F2 #79D7F2 121,215,242
Swatch B5B5B5 #B5B5B5 181,181,181

Uživatelské rozhraní pro objekty a prohlížení

Tato část poskytuje kontext k prohlížení, označované také jako zobrazení náhledu kódu, což je typ uživatelského rozhraní pro místní objekt, který je pro Visual Studio.

Přehled

  • Uživatelské rozhraní on-object by mělo uživateli poskytnout více informací nebo interaktivitu, aniž by řešte jeho hlavní úlohu.

  • Hlavní vzor uživatelského rozhraní pro objekty v Visual Studio se označuje jako "informace v bodě pozornosti".

  • Uživatelské rozhraní on-object v Visual Studio je buď vložené, nebo s plovoucí desetinnou čárkou, nebo trvalé nebo přechodné.

    • Zobrazení náhledu kódu, typ uživatelského rozhraní v objektu v Visual Studio, je vložené a odolné.

    • CodeLens, typ uživatelského rozhraní pro on-object v Visual Studio, je plovoucí a přechodný

    Znalost toho, jak část kódu funguje nebo jak najít podrobnosti o tomto kódu, často vyžaduje, aby vývojář přepíná kontext a přechádl na jiný obsah nebo jiné okno. Tyto změny kontextu mohou být rušivé, protože uživatelé se mohou při opouštění hlavního okna ztratit na svůj původní úkol. Navíc může být obtížné získat původní kontext, zejména pokud přepnutí oken způsobilo, že původní kód byl zakryt jiným uživatelským rozhraním.

    Uživatelské rozhraní v objektu se řídí vzorem zvaným "informace v bodě pozornosti". Tyto zprávy, automaticky otevíraná okna a dialogová okna poskytují uživatelům další relevantní informace, které přidávají další informace nebo interaktivitu, aniž by se řešili soustředit na hlavní úkol. Mezi příklady uživatelského rozhraní pro místní objekt patří automaticky otevíraná okna, která se zobrazí, když uživatel najede ukazatelem myši na ikonu v oznamovací oblasti, červenou podtržení podtržením překlepu a zobrazení náhledu představené v Visual Studio 2013.

Rozhodovací body

V Visual Studio existuje několik způsobů, jak tento model informací v bodě pozornosti použít. Pro celkové prostředí je nezbytné zvolit správný mechanismus a jeho implementaci konzistentním a předvídatelným způsobem. V opačném případě se uživatelům může zobrazit matoucí nebo nekonzistentní prostředí, které ztěžuje zaměření na samotný obsah.

Vztahy mezi hlavním obsahem a obsahem podrobností

Informace, které je třeba věnovat pozornost, slouží k zobrazení vztahu mezi obsahem, na který se uživatel zaměřuje (hlavní obsah) a dalším souvisejícím obsahem (obsah "podrobností"). V tomto modelu obsah podrobností jasně souvisí s obsahem, se který uživatel pracuje, a lze ho zobrazit blízko hlavního obsahu. Další informace nebo informace, které nelze shrnout, aniž by se zahltil hlavní obsah, by měly dodržovat jiný vzor, například okno nástroje.

  • Obsah podrobností se vždy zobrazuje v těsné blízkosti hlavního obsahu.

  • Vždy se ujistěte, že obsah s podrobnostmi stále umožňuje uživateli soustředit se na hlavní obsah. Nejlepší způsob, jak toho dosáhnout, je často vykreslit obsah podrobností co nejvíce blízko hlavního obsahu. Můžete to provést vykreslením obsahu podrobností v automaticky otevíranou okně vedle hlavního obsahu nebo vykreslením podrobného obsahu v řádku pod hlavním obsahem.

  • Nikdy nepoužívejte informace v bodě pozornosti, který uživatele odvede od hlavního obsahu. Pokud uživatelé potřebují zobrazit obsah podrobností samostatně, zveřejnit explicitní akci, která uživateli umožní to udělat.

Podrobnosti návrhu

Jakmile se rozhodnete, že uživatelské rozhraní je správné volbou, existují čtyři hlavní požadavky na návrh:

  1. Trvalost: je očekáváno, že je obsah trvalý nebo přechodný? Budou si uživatelé chtít ponechat informace, které se budou zobrazovat, aby mohli odkazovat na nebo pracovat s nimi? Nebo se uživatelé budou chtít rychle podívat na informace a pak pokračovat s hlavní úlohou?

  2. Typ obsahu: bude obsah informativní, napadnutelný nebo navigace? Potřebuje uživatel další podrobnosti o hlavním obsahu? Musí uživatel dokončit úkol, který má vliv na hlavní obsah? Nebo uživatel musí směrovat na jiný prostředek?

  3. Typ indikátoru: provede okolní indikátor? Mohou být informace užitečné a zobrazeny bez zahlcení hlavního obsahu?

  4. Gesta: jaká gesta budou použita k vyvolání a zavření uživatelského rozhraní? Jak si uživatel zavolá podrobný obsah a pošle ho hned? Existuje hodnota pro přidání gesta, jako je například připnutí pro přepínání mezi přechodnými a trvalými stavy?

    Každý z těchto čtyř rozhodovacích bodů bude mít dopad na hlavní součásti uživatelského rozhraní pro objekty.

Komponenty uživatelského rozhraní pro objekty

  1. Typ kontejneru (předvádějící obsah)

    • Dekadické

    • Přiřazený

  2. Typ obsahu

    • Informativní: data, která mohou být statická nebo dynamická

    • Možné akce: příkazy, které mění hlavní obsah

    • Navigace: odkazy, které přijímají uživatele do jiného okna nebo aplikace, jako je například MSDN

  3. Gesta

    • Invocation

    • Zavření

    • Připnutí

    • Další interakce

  4. Model trvalosti a potvrzení

    • Dočasný

    • Odolné

    • Automaticky

    • Na vyžádání

  5. Okolní indikátory (volitelné)

    • Podtržení vlnovkou

    • Ikona inteligentní značky

    • Další okolí ukazatelů

Typ kontejneru (předvádějící obsah)

K dispozici jsou dvě hlavní možnosti pro prezentování obsahu v okamžiku pozornosti:

  1. inline: vložený předvádějící, jako je náhled zobrazení, který byl představený v editoru kódu Visual Studio 2013, vytváří prostor pro nový obsah posunutím stávajícího obsahu.

    • Dáváte přednost vloženému předvádějící, pokud očekáváte, že uživatelé budou chtít strávit významné množství času, který bude odkazovat na obsah, který máte k dispozici, nebo v něm pracovat.

    • Nepoužívejte vložené prezentující, pokud očekáváte, že uživatelé budou chtít zobrazit informace, které máte k dispozici, a potom pokračovat v hlavním úkolu s minimálním přerušením.

  2. Floated: plovoucí předvádějící je umístěn co nejblíže vybranému obsahu, ale nemění rozložení stávajícího obsahu. Můžete použít různé strategie, jako je například zobrazení plovoucího panelu obsahu na nejbližším dostupném prázdném místě pro vybraný symbol.

    • Preferovat plovoucí předvádějící, pokud očekáváte, že uživatelé budou chtít zobrazit informace, které jsou k dispozici, a pak pokračovat s hlavním úkolem s minimálním přerušením.

    • Nepoužívejte plovoucí předvádějící, pokud očekáváte, že uživatelé budou chtít strávit významné množství času, který bude odkazovat na nebo v interakci s obsahem, který máte k dispozici.

Typ obsahu

Existují tři hlavní typy obsahu, které lze zobrazit v jakémkoli kontejneru uživatelského rozhraní v objektu. Můžete zobrazit jakoukoli kombinaci těchto typů informací. Existují tři typy:

  1. Informativní: Většina kontejnerů uživatelského rozhraní v objektu se zobrazí jako určitý druh informativního obsahu. Obsah může představovat informace o současném stavu prostředí nebo může představovat informace o možném budoucím stavu prostředí. Například lze použít k zobrazení efektu konkrétního příkazu, jako je refaktoring, pro existující kód.

    • Vždy používejte kanonickou reprezentaci informací, které zobrazíte. Kód by měl například vypadat jako kód, být dokončen s zvýrazňováním syntaxe a měl by respektovat libovolné písmo a další nastavení prostředí, které uživatel nastavil.

    • V případě, že se stejné informace zobrazují jako hlavní obsah, vždy zvažte podporu všech akcí nad informačním obsahem. Pokud například prezentujete existující kód v kontejneru uživatelského rozhraní v objektu, důrazně zvažte možnost Procházet a upravovat tento kód.

    • Při prezentování informačního obsahu, který představuje možný budoucí stav, vždy zvažte použití jiné barvy pozadí.

  2. Možné akce: některé kontejnery uživatelského rozhraní v objektech budou mít možnost provádět určitou akci nad hlavním obsahem, například provedení operace refaktoringu.

    • Vždycky umístit příkazy, které se mají provést, nezávisle na informativním obsahu.

    • V případě potřeby vždy povolte a zakažte akce.

    • Vždy Přečtěte si standardní pokyny pro reprezentaci příkazů uvnitř dialogových oken.

    • Vždy Udržujte počet akcí, které jsou vystaveny v kontejneru uživatelského rozhraní v objektu, do absolutního minima. Interakce s uživatelským rozhraním v uživatelském rozhraní by měla být odlehčené a rychlé prostředí. Uživatel by neměl vyplatit energii při správě samotného kontejneru uživatelského rozhraní v objektu.

    • Vždy Vezměte v úvahu, jak a kdy se kontejner uživatelského rozhraní v objektu bude zavřít nebo zrušit. Osvědčeným postupem je, že všechny akce, které uzavírají dialog mezi hlavním a podrobným obsahem, by měly také při vyvolání této akce Zavřít kontejner uživatelského rozhraní v objektu.

  3. Navigace: některé kontejnery uživatelského rozhraní v objektu obsahují odkazy, které přebírají uživatele do jiného okna nebo aplikace, jako je například otevření článku na webu MSDN v prohlížeči uživatele.

    • Vždy předřaďte jakékoli navigační propojení s "otevřený", aby se uživatelé nepřekvapeni pomocí přechodu na jiný obsah.

    • Vždycky oddělují navigační odkazy z odkazů s akcemi.

Okolní indikátory (volitelné)

Okolní indikátory můžou být drobné, včetně textu, který je zobrazený v kontrastní barvě od zbytku kódu nebo zjevně, včetně tickler symbolů, jako jsou vlnovky podtržení a ikony inteligentních značek. Okolní indikátory komunikují dostupnost dalších relevantních informací. V ideálním případě poskytují užitečné informace, a to i bez nutnosti uživatele s nimi pracovat.

  • Vždy umístěte okolí indikátoru tak, aby se uživatel nenavíc ani nepřezahltí. Pokud není možné umístit indikátor okolí takovým způsobem, zvažte jiné řešení.

  • Vždy Umístěte indikátor okolí co nejblíže k obsahu, ke kterému se vztahuje.

  • Vždy se pokuste vytvořit indikátor, který shrnuje informace, které zpřístupňuje. Zvažte zadání počtu dostupných datových položek (například "3 odkazy" místo jednoduše "odkazy") nebo si můžete představit jiný způsob sumarizace dat.

    • V případech, kdy data pro indikátor nelze vždy vypočítat a zobrazit, okamžitě zvažte poskytnutí progresivní zpětné vazby při výpočtu hodnot. zvažte například animace změn, které odpovídají aktualizacím dostupných dat, podobně jako živá dlaždice e-mailu na Windows Phone aktualizuje se, jak se zvyšuje počet nepřečtených e-mailů.
  • Nikdy Nepřidávat další indikátory, než uživatel může u daného obsahu rozumně brát v úvahu. Okolní indikátory by měly být užitečné bez nutnosti jakékoliv interakce od uživatele. Indikátory ztratí své Ambience, pokud vyžadují přetečení a jiné ovládací prvky pro správu, aby je bylo možné zobrazit.

Gesta

Klíčovým aspektem, který uživateli umožňuje zachovat fokus na hlavním obsahu, je podpora správných gest pro otevření a zavření dalšího obsahu podrobností.

  • Vždy vyžadovat, aby uživatel prováděl nějaký explicitní gesto pro otevření dalšího obsahu. Mezi společná otevřená gesta patří:

    • Najetí myší: popisy a neinteraktivní informační obsah

    • Explicitní příkaz: vložený předvádějící

    • Dvakrát klikněte na indikátor okolí: Automaticky otevírané okno CodeLens

  • Vždy zavřít podrobný obsah pokaždé, když uživatel stiskne klávesu ESC.

  • Vždy Vezměte v úvahu kontext uživatelského rozhraní v objektu. Pro předvádějící obsah, který umožňuje interakci v rámci kontejneru, pečlivě zvažte, jestli se mají zobrazit další informace o ukazateli myši, což je pravděpodobně rušivé pro pracovní postup uživatele.

  • Nikdy nezobrazovat obsah při najetí myší, který je možná upravitelný nebo pozve na interakci uživatele Toto chování může frustrovat uživatele, pokud se pokusí přesunout kurzor nad obsah s podrobnostmi, protože standardní chování pro popis tlačítka se okamžitě odvolá, když ukazatel už není nad hlavním obsahem, který ho vytvořil.

Modely výběru

Přehled

Model výběru je mechanismus používaný k označení a potvrzení operací na jednom nebo více objektech, které mají zájem v rámci uživatelského rozhraní. toto téma popisuje vzory interakcí výběru v rámci Visual Studio editory dokumentů: textové editory, návrhové plochy a modelovací povrchy.

Uživatelé musí mít způsob, jak Visual Studio, na čem pracují, a Visual Studio musí reagovat předvídatelně a poskytnout uživatelům zpětnou vazbu ohledně toho, na čem pracují. Rozdíly nebo nekomunitace mezi uživatelem a uživatelským rozhraním mohou vést k tomu, že si uživatel neunikl do nějaké akce, což může mít nezamýšlené důsledky. Chyba často zmizí, dokud uživatel neuvidí, že něco chybí nebo se změnilo. Modely výběru jsou proto jednou z nejdůležitějších částí návrhu uživatelského rozhraní. I když modely výběru v Visual Studio jsou konzistentní s Windows, existují mírné odchylky.

V Visual Studio, stejně jako Windows, se modely výběru liší v závislosti na kontextu, ve kterém k interakci dochází. Výběry se mohou vyskytovat ve čtyřech typech objektů:

  • Text

  • Grafické objekty

  • Seznamy a stromy

  • Mřížky

    V rámci těchto objektů existují tři typy výběrů:

  • Souvislé

  • Nesouvislé

  • Oblast

Obor

Nejdůležitější součástí výběru je zajistit, aby uživatel věděl, v kterém okně (aktivaci) a kde se nachází fokus (výběr). Visual Studio rozšiřuje funkce správy oken v Windows, ale schéma aktivace je stejné: interakce s oknem přináší fokus na toto okno. Visual Studio má dva indikátory aktivace: jeden pro okna dokumentů a jeden pro okna nástrojů.

U oken dokumentů je aktivní okno označeno záložkou okna dokumentu, která přichází dopředu a mění barvu pozadí:

Výběr aktivní karty v Visual Studio

Výběr aktivní karty

U oken nástrojů je aktivní okno označeno změnou barvy oblasti záhlaví okna nástroje:

Výběr aktivního okna nástroje v Visual Studio

Aktivní okno nástroje zobrazující primární výběr uzlu

Neaktivní výběr okna nástroje v Visual Studio

Neaktivní okno nástroje s latentním výběrem uzlu

Jakmile je okno aktivní, je jeho zaměření označeno podle modelů výběru uvedených v této části pokynů.

Kontext

Visual Studio byl navržen tak, aby si zachoval silný koncept kontextu a sledoval, kde uživatel pracuje. Aktivní je pouze jedno okno bez ohledu na to, jestli se jedná o nástroj nebo okno dokumentu. Nejdélnější okno dokumentu ale vždy zachovává latentní výběr. I když fokus může být v okně nástroje, okno dokumentu, které bylo naposledy aktivní, zobrazí výběr, a to i v neaktivním stavu. To se provádí proto, aby si uživatel uchoval kontext v dokumentu, který upravoval, a ukázal jim, že si Visual Studio zachoval svůj stav, aby se mohl bezproblémově vracet a posunout mezi okny nástrojů a okny dokumentů.

Výběr textu

Visual Studio editory, které jsou striktně textové, například integrovaný textový editor, používají stejný model výběru textu a vzhled, který je popsaný na stránce Myš a ukazatele v pokynech k interakci uživatelského prostředí Windows na webu MSDN. Fokus vstupu v textovém editoru je označen svislým pruhem, který se nazývá bod vložení. Bod vložení je silný jeden pixel a má barvu jako inverzní prvek, který se nachází za ním. Blikne podle rychlosti nastavené nastavením rychlostí blikání kurzoru na kartě Rychlost apletu klávesnice v Ovládací panely.

Souvislý a nesouvislý výběr

Výběr v textovém editoru je pouze souvislé. Nesouvislé výběry textu nejsou povolené, ale měly by být adresovány v editorech grafických objektů. Když je ukazatel myši uživatele nad textovou oblastí, změní se kurzor na I-smyk. Jedním kliknutím umístíte kurzor do textového editoru na umístění kliknutí. Podržení tlačítka myši dolů spustí zvýraznění výběru a uvolněním tlačítka myši se ukončí zvýraznění výběru.

Výběr oblasti (výběr pole)

Visual Studio v textovém editoru podporuje výběr oblastí, který se nazývá výběr pole. Výběr pole umožňuje uživateli vybrat oblast textu, která neodpovídá běžnému textovému streamu. Stejně jako u standardního výběru textu musí být výběr souvislé. Výběr pole se zahájí podržením klávesy Alt při přetažení myší. Výběr pole můžete zahájit také podržením kláves Alt a Shift a použitím kláves se šipkami k označení oblasti výběru. Při výběru pole se používá normální zvýraznění výběru a zobrazuje blikající kurzor kurzoru kurzoru na konci oblasti výběru.

Oblastní () v Visual Studio

Výběr oblasti (pole) v Visual Studio

Vzhled výběru textu

Barvy použité pro aktivní a neaktivní výběr v editoru je možné přizpůsobit. Pokud chcete přizpůsobit vzhled editoru, může uživatel přejít na Nástroje > Možnosti a potom se podívat do části Prostředí > Písma a barvy > Textovém editoru.

Grafický výběr

Interakce

Výběr grafického objektu může být složitý a závisí na řadě faktorů:

  • Primární model výběru editoru. Editory, které obsahují grafické objekty, lze také použít k úpravě textu nebo mřížek. Editor může být například textový editor, který podporuje také umístění grafických objektů, jako je Visual Studio XAML. Podpora více typů objektů může ovlivnit, jak uživatel vybírá skupiny s různými typy objektů.

  • Podpora stavů primárního a sekundárního výběru Editor může poskytovat stavy primárního a sekundárního výběru tak, aby objekty bylo možné upravovat současně, vzájemně zarovnané, se změněnou velikostí atd.

  • Podpora úprav na místě. Editory také umožňují upravovat obsah grafických objektů. Obdélníkový tvar může například obsahovat také uvnitř text, který může uživatel změnit. Kromě toho může být tento text zarovnán na střed nebo podchycený. Úpravy na místě zahrnují podrobnější úroveň interakce uživatele, a proto vyžaduje odpovídající sadu vizuálních návodů pro zobrazení informací o stavu uživateli.

Interakce myši

Vstup Výsledek
Klikněte na nevybraný objekt. Vybere objekt a zobrazí přerušovanou čáru a úchyty výběru, pokud je objekt možné upravit.
Kliknutí na vybraný objekt Aktivuje úpravy na místě, pokud to objekt podporuje. Kliknutím mimo objekt se deaktivuje režim úprav na místě.
Dvakrát klikněte na objekt. Otevře kód objektu pro úpravy a v případě potřeby může vložit výchozí obslužnou rutinu události.
Odkaz na objekt Změní ukazatel na kurzor pro přesunutí. Vzhled objektu, například světelnost nebo barva, se může změnit.
Odkaz na úchyt výběru Změní ukazatel na kurzor pro změnu velikosti. U objektů, které podporují otočení, můžou některé úchyty výběru změnit ukazatel na kurzor otočení, protože ukazatel je umístěn jinak (například posunut vzdáleně) s ohledem na úchyt výběru.
Přetáhněte I v případě, že objekt nebyl dříve vybrán, změní ukazatel na kurzor pro přesunutí a přesune objekt.
Editor ztratí fokus Deaktivuje režim úprav na místě, i když objekt zachová obsah a vzhled, který měl během poslední operace nebo stavu výběru.
Výběr objektu Označeno ohraničením, tečkovanou čárou nebo jiným vizuálně odlišným ošetřením ke zvýraznění hranice objektu.
Změna velikosti vybraného objektu Označeno úchyty výběru.

Objekt s velikostí má osm úchytů, které představují každý směr, ve kterém lze změnit jeho velikost. Pokud lze velikost objektu změnit pouze v určitých směrech, je možné použít méně popisovačů. Když uživatel zvelikosti objektu na velikost, kde by osm popisovačů nebylo interaktivní, je možné použít čtyři popisovače. Velikosti popisovačů by měly být svázány s metrikami ohraničení okna a okrajů pomocí funkce rozhraní API GetSystemMetrics tak, aby velikost byla úměrná rozlišení obrazovky.

Změna velikosti popisovačů
Otočení vybraného objektu Úchyty pro otáčení

Interakce klávesnice

Vstup Výsledek
Karta Přesune ukazatel fokusu mezi logické pořadí objektů v editoru. To může být zleva doprava nebo shora dolů v závislosti na hodnotě vlastnosti TabIndex (nebo ekvivalentní), pořadí vytvoření objektu a celkovém účelu editoru. SHIFT + TAB obrátí směr indikátoru fokusu.
Mezerník Aktivuje režim posouvání, když se zachová klávesová zkratka. K posunu pozice zobrazení je potřeba další vstup myši.
Ctrl + mezerník Aktivuje režim lupy při údržbě klávesových zkratek. K navýšení a snížení měřítka lupy je potřeba další vstup myši.
CTRL + ALT + mínus – symbol Zmenší faktor přiblížení o jednu úroveň.
CTRL + ALT + znaménko plus Zvětší faktor přiblížení o jednu úroveň.
Shift nebo CTRL Přidá objekt do skupiny výběru. CTRL také umožňuje odebrat objekty samostatně ze skupiny výběru.
Enter Provede výchozí příkaz pro objekt (obvykle otevřít nebo upravit).
F2 Aktivuje místní úpravy objektu.
Šipkové klávesy Přesune vybrané objekty ve směru stisknutí klávesy se šipkou, v malých přírůstcích (například po 1 pixelech v daném čase).
CTRL + klávesy se šipkami Přesune vybraný objekt (y) ve směru stisknutí klávesy se šipkou, ve větších přírůstcích (například 10 pixelů najednou).
Shift + klávesy se šipkami Změní velikost vybraných objektů v příslušném směru, a to v malých přírůstcích (například 1 pixel v čase).
CTRL + SHIFT + klávesy se šipkami Změní velikost vybraných objektů v příslušném směru ve větších přírůstcích (například 10 pixelů najednou).

Když uživatelé upravují ovládací prvky, může být vhodné, aby objekty automaticky měnily velikost pomocí vstupu uživatele. Pokud uživatel například upraví ovládací prvek popisek, měl by popisek zvětšit, aby zobrazil text, který uživatel právě zadal. Pokud to není hotové, uživatel musí změnit velikost ovládacího prvku ručně po úpravě textu. Pokud má uživatel spoustu ovládacích prvků, jedná se o Rote a neproduktivní úkol.

Grafické kontejnery

v některých případech grafické editory poskytují kontejnery pro jiné grafické objekty, jako je ovládací prvek panelu model Windows Forms nebo ovládací prvek rozložení mřížky v návrháři HTML. Pokud editor poskytuje kontejnery pro jiné grafické objekty, měl by se použít následující model výběru pro kontejner (objekty v kontejneru se řídí standardním modelem, jak je popsáno výše):

Vstup Výsledek
Jediné kliknutí na kontejner Vybere objekt kontejneru bez přímého výběru některého z obsažených objektů. Kontejner se dá přesunout nebo změnit jeho velikost standardním vstupem myši a klávesnicí (jak je popsáno výše). Obsažené objekty jsou přesunuty ve vztahu ke kontejneru, ale u obsažených objektů se nezmění velikost, pokud nejsou zároveň přímo vybrány.
Najeďte myší na oblast hranice kontejneru Zapne ukazatel myši na kurzor přesunutí, který označuje, že lze kontejner přesunout.
Přetáhněte oblast hranice kontejneru. Změní ukazatel myši na kurzor přesunutí a přesune kontejner (a obsažené objekty v rámci). Kontejner nelze přesunout bez předchozího výběru jediným kliknutím.
Jedním kliknutím na objekt v kontejneru Odškrtne kontejner (Pokud je vybrán) a vybere pouze vybraný objekt.
Shift + kliknutí nebo Ctrl + kliknutí na obsažený objekt a kontejner Přidá vybraný objekt do existující skupiny výběru nebo výběru. Pokud je vybraný objekt již členem skupiny výběru, je odebrán ze skupiny výběru.

Obsažené objekty by měly splňovat základní model výběru, jak je popsáno v předchozí části. z testování použitelnosti návrháře model Windows Forms uživatelé očekávali bezproblémový přístup k objektům, které obsahují, bez nutnosti přecházet k uvedeným krokům (uložené objektem omezení).

Nesouvislé a výběr oblasti

Grafické editory objektů by měly podporovat nesouvislé výběry. Všimněte si, že tento obrázek nezobrazuje vzhled ovládacího prvku pro Visual Studio. Podrobné specifikace vizuálů najdete v tématu vzhled výběru grafického objektu .

Nesouvislé a selektory oblastí

Nesouvislý výběr

Grafické editory by měly také nabízet výběry oblastí s indikátorem výběru typu rámečku. Pokud grafický editor podporuje jiné typy objektů (například text), pak výběry oblastí nemusí být možné v závislosti na omezeních těchto jiných typů objektů.

Výběr běžícího textu

Výběr běžícího textu

Primární a sekundární výběr

Některé editory grafických objektů umožňují uživateli upravovat nebo zarovnávat objekty ve skupinách. V tomto případě je potřeba zavést koncept primárního a sekundárního výběru. Primární výběr je objekt, na který všechny ostatní objekty reagují na operace skupiny. Objekt, který uživatel vybere jako první, se stane primárním ovládacím prvkem a následné výběry se stanou sekundárními výběry. Primární výběr má odlišné vizuální zpracování ze sekundárních výběrů k označení, který objekt je primární:

Primární a sekundární výběr

Primární výběr se dvěma sekundárními výběry

Vzhled výběru grafického objektu

Popisovače výběru jsou čtverce vykreslené v obdélníkovém vzoru kolem ohraničujícího rámečku objektu. Následující graf ukazuje příklady různých stavů, které může grafický objekt mít s popisovačem, velikostí a místním zobrazením úprav. Velikost popisovačů by měla být svázaná s metrikami ohraničení a okraje okna pomocí rozhraní API GetSystemMetrics .

Stav Příznaky Podrobnosti vizuálu
Nevybrané Výchozí Výchozí stav tlačítka
Primární výběr Možností změny velikosti Primární výběr s úchyty pro změnu velikosti
Primární výběr Nelze měnit velikost Primární výběr bez úchytů pro změnu velikosti
Primární výběr Uzamčeno Primární výběr uzamčen
Sekundární výběr Možností změny velikosti Sekundární výběr s úchyty pro změnu velikosti
Sekundární výběr Nelze upravit velikost Sekundární výběr bez úchytů pro změnu velikosti
Sekundární výběr Uzamčeno Uzamčený sekundární výběr
Aktivní uživatelské rozhraní Výchozí Aktivní stav uživatelského rozhraní

Zobrazení modelů výběru

Stromové zobrazení

Výběr ve stromovém zobrazení se zobrazí s jednoduchým zvýrazněním. Pokud uživatel klikne na název uzlu nebo ikonu uzlu, uzel se vybere. Trojúhelníkové piktogramy nalevo od uzlu rozbalí nebo sbalí ovládací prvek stromu, ale neovlivní výběr uživatele, s jednou výjimkou: při sbalení nadřazeného uzlu, když je výběr v podřízeném uzlu, se výběr přesune do nadřazeného uzlu.

Typické stromové zobrazení v Visual Studio

Typické stromové zobrazení v Visual Studio

Stromová zobrazení mohou podporovat souvislé a nesouvislé výběry, a to i na více úrovních stromu. Na viditelných uzlech stromu musí být proveden souvislý nebo nesouvislý více výběrů. Pokud je uzel sbalený, dojde ke ztrátě nesouvislého výběru a sbalený uzel výběr získá. Tímto způsobem může uživatel zobrazit uzly, které budou ovlivněny operací. Když jsou uzly sbalené, není jasné, které uzly by mohly být ovlivněny.

Při výběru nadřazeného uzlu by se operace měla použít na nadřazený uzel, i když v některých případech dává smysl, aby se operace vztahuje na nadřazený uzel a všechny podřízené položky. V takovém případě zadejte během operace další uživatelské rozhraní, například zaškrtávací políčko nebo potvrzovací dialogové okno, které uživateli explicitně umožní použít možnost Použít u všech dětí.

Přejmenování

Pokud uzly ve stromu podporují přejmenování, je třeba provést přejmenování. Operace na místě by měla být ve všech ovládacích prvcích stromové struktury v Visual Studio. Zadejte příkaz pro přejmenování, který okamžitě aktivuje režim úprav na místě. Výběr textu pokryje celý název uzlu a je připravený k přijetí uživatelského vstupu. Pokud uzel představuje soubor, měl by název souboru obsahovat příponu . Zvýraznění výběru by mělo obsahovat pouze text názvu souboru, a ne příponu.

Vstup Výsledek
Enter – klávesa Potvrdí operaci přejmenování.
Esc Zruší operaci přejmenování.
Kliknutí mimo oblast pro úpravy na místě Potvrdí operaci přejmenování.
Zpět Poskytujte snadnou akci zpět pro zrušení operace přejmenování.

Výběr v seznamech a ovládacích prvcích mřížky

Klíčovým konceptem při výběru seznamu je, že je založený na řádku, což znamená, že když se vybere celý řádek, vybere se jako jednotka. Mřížky naopak umožňují vybrat konkrétní buňky, aniž by to mělo vliv na jakýkoli jiný aspekt řádku. Mřížky mohou také obsahovat hierarchii vnořených řádků (například ve stromové struktuře), která umožňuje vybrat a zrušit výběr celých větví hierarchie interakcí s nadřazenými řádky. Výběr v seznamech se zobrazuje jednoduchou barvou zvýraznění na celém řádku dat. Fokus se zobrazuje pomocí tečkovaného ohraničení o pixelů kolem aktuálního upravitelného řádku nebo buňky (řádek, pokud jsou všechny buňky jen pro čtení).

Poznámka

Fokus a výběr jsou různé koncepty. Fokus je ukazatel toho, který prvek uživatelského rozhraní je cílem pro příjem vstupu, který není explicitně zaměřen na jiný objekt, zatímco výběr odkazuje na stav zahrnutí objektu do sady objektů, ve kterých mohou provádět následné operace.

Výběry v seznamech mohou být souvislé, nesouvislé nebo oblasti. Pokud je povolených více výběrů, měl by být vždy podporován souvislý a nesouvislý výběr, zatímco podpora výběrů oblastí (pole) je volitelná. Výběr oblasti se zahájí přetažením prázdného místa textu seznamu.

Objekt Výběr
Seznam Souvislé
Seznam Nesouvislé
Seznam Oblast

Kliknutím na seznam jednou vyberete řádek, ve kterém došlo k kliknutí. Pokud uživatel klikne na buňku seznamu, která podporuje úpravy na místě, aktivuje se buňka také okamžitě pro úpravy na místě. Jinak se okamžitě vybere celý řádek a zobrazí se zvýraznění.

Přetažení textu seznamu má jednu ze tří věcí:

  • Inicializuje výběr oblasti, pokud to seznam podporuje a pokud je ukazatel myši na prázdném místě.

  • Zahájí operaci přetažení, pokud buňka nebo řádek seznamu podporuje jako zdroj přetažení.

  • Vybere aktuální řádek.

Úpravy na místě

Pokud jsou povolené úpravy na místě, existují dva základní modely: jednoduchý ovládací prvek pro úpravy a výběr vlastností. Pomocí jednoduchého ovládacího prvku pro úpravy je obsah zvýrazněný a připravený pro uživatelský vstup, jakmile se aktivují úpravy na místě. Pokud je implementovaný výběr vlastnosti, zobrazí se tlačítko, které vyvolává výběr vlastnosti, po aktivaci režimu úprav na místě a aktuální výběr není zvýrazněný. Tlačítko pro výběr by mělo být v buňce zarovnáno doprava. Příklady úprav na místě najdete v okně Vlastnosti a Seznam úkolů v Visual Studio.

Podpora klávesnice

Podpora klávesnice pro výběr v seznamech a mřížkách se řídí standardními Windows konvencemi:

  • Klávesy se šipkami prochází seznam a při přesunu fokusu výběrem jednotlivých řádků nebo buněk.

  • Shift + šipka provádí souvislé výběry ve směru kláves se šipkami.

  • Ctrl + šipka následovaná mezerníkem přepíná mezi přidáváním a odebíráním položek seznamu z výběru a vytvořením nesouvislého výběru.

  • U mřížek, které obsahují vnořené hierarchie, rozbalí klávesa se šipkou doprava nadřazený řádek a klávesa šipka doleva ho sbalí.

  • Klávesa Tab přesune fokus mezi buňkami na aktuálním řádku, pokud je možné buňky upravovat.

  • Klávesa Enter provede u položky v seznamu výchozí příkaz (často Open (Otevřít).

  • Klávesa F2 aktivuje úpravy aktuálně vybrané buňky na místě.

Nastavení trvalosti a ukládání

Přehled

Přestože každá softwarová komponenta v Visual Studio obvykle zodpovídá za svůj vlastní stav a trvalost, Visual Studio v některých případech automaticky ukládá nastavení, například s velikostmi oken a pozicemi. Následující tabulka obsahuje kombinaci automaticky uložených nastavení a nastavení, která vyžadují explicitní akci uživatele nebo naprogramované akce.

Objekt Co uložit Kdy uložit Kam uložit
Vybratelný objekt (například řádek kódu) Zarážka na řádku kódu

Zástupce uživatele přidružený k řádku kódu
Při uložení projektu Soubor možností uživatele (.suo) pro projekt
Dialogové okno Umístění dialogového okna, pokud bylo přesunuto

Zobrazení, které uživatel naposledy použil v dialogovém okně
Po zavření dialogového okna

Po Visual Studio relace
V paměti

Registr v HKEY_Current_User
Okno Velikost a umístění okna Po zavření okna

při změně režimu Visual Studio

po ukončení relace Visual Studio
Soubor možností uživatele (. suo) pro projekt

Soubor vlastních možností pro nastavení okna
Dokument Aktuální výběr v dokumentu

Zobrazení dokumentu

Posledních několik míst navštívených uživatelem
Při uložení dokumentu Soubor možností uživatele (. suo) pro projekt
Project Odkazy na soubory

Odkazy na adresáře na disku

Odkazy na jiný software

Komponenty

Informace o stavu samotného projektu
Když je projekt uložený Soubor projektu
Řešení Odkazy na projekty

Odkazy na soubory
Při uložení projektu nebo řešení Soubor řešení (. sln)
Nastavení v nabídce nástroje > možnosti Přizpůsobení klávesnice

Přizpůsobení panelu nástrojů

Barevná schémata
Po zavření dialogového okna nástroje > možnosti

po ukončení relace Visual Studio
Registr v HKEY_CURRENT_USER

Co uživatel dělá a kdy to dělá, zjistí, zda je nastavení uloženo v paměti (během relace), uloženo na disk (napříč relacemi jako nastavení registru) jako součást samotného souboru projektu nebo řešení, jako součást souboru možností řešení (. suo) , nebo jako soubor vlastního nastavení, o kterém ví pouze tato softwarová součást. V tabulce výše najdete několik událostí, v nichž lze nastavení uložit. Existují však další časy, ve kterých byste mohli chtít uložit stav:

  • Když uživatel změní umístění v rámci dialogového okna nebo okna

  • Když uživatel přenese fokus do jiného okna

  • Když uživatel přepne z návrhu do režimu ladění

  • Když se uživatel odhlásí z účtu

  • Když počítač přejde do režimu hibernace nebo se vypne.

  • Když se chystá znovu naformátovat a nastavit počítač nebo pevný disk

Konfigurace oken

Konfigurace okna je základní prezentace vývojového prostředí – jedná se o schéma sestávající ze seznamu oken nástrojů a způsobu, jakým jsou uspořádány. V případě systému Windows spravovaného rozhraním IDE (Windows IDE) jsou informace o rozložení trvalé pro jednotlivé uživatele, takže když uživatel spustí integrované vývojové prostředí (IDE), rozložení okna se zobrazí stejně jako při posledním ukončení Visual Studio. Stav a poloha oken IDE jsou trvalé ve vlastním souboru možností ve formátu XML. Okna nástrojů, která jsou vytvořena balíčky načtenými do integrovaného vývojového prostředí, uchovávají informace o stavu v registru a mohou nebo nemusí být vázaná na uživatele.

Rozložení pro konkrétní profil

Každý profil zahrnuje rozložení oken nástrojů uspořádaná způsobem, který je obeznámen se specifickým vývojářům osoby (Visual C++ vývojářům očekávat Průzkumník řešení na levé straně rozhraní IDE, zatímco vývojáři v jazyce C# očekávají, že Průzkumník řešení na pravé straně). Rozložení okna pro konkrétní profil se načítají poté, co uživatel zvolí profil při spuštění. Autor balíčku by měl určit rozložení oken nejvhodnější pro činnost svého zákazníka, a to s vědomím, že změny, které uživatel provede v konfiguraci okna, budou trvalé.

Dotykové zadání

U zařízení s dotykovým ovládáním se uživatelům stále častěji používají vývojové produkty Microsoftu. Existují však bariéry, které usnadňují použití vývojářských nástrojů na dotykové zařízeních. Uživatelé očekávají, že naše produkty budou poskytovat spolehlivé a přesné možnosti dotykového ovládání. účelem těchto pokynů je informovat o rozhodnutích o tom, které dotykové možnosti začlenit a podpořit jednotné možnosti dotykového ovládání napříč Visual Studio a souvisejícími produkty.

Úrovně zkušeností

Následující úrovně zkušeností mají sloužit jako vodítko, které týmům usnadňují rozhodování o tom, které dotykové možnosti nabízí na základě požadované úrovně investičních zájmů.

  • Základní prostředí je určené pro týmy, které chtějí poskytovat dotykové možnosti, takže nedochází k neaktivním koncům v průběhu práce.

  • Optimalizované prostředí je určené pro týmy, které chtějí poskytovat nejběžnější možnosti dotykové ovládání (například ty, které jsou obvykle k dispozici v aplikacích Internet Browser).

  • Prostředí se zvýšenými oprávněními je určené pro týmy, které chtějí přidat funkce, jako jsou gesta nebo jiné volitelné funkce, které jim umožní přizpůsobovat jejich použití.

Základní prostředí Optimalizované prostředí Prostředí se zvýšenými oprávněními
Povoluje uživatelům... Opravit kód a řešení/projekt-úroveň čtení bez mrtvých konců Provádění údržby, refaktorů a navigačních úloh Spolehlivá, intuitivní a plynulé zážitky v provozu
Editor Posouvání dotykem a výběr

Klávesa ScrollBar – dotykové ovládání a stisknutí klávesy Ctrl + přetažení
Gesto roztažení prstů přiblížení

Rychlý posun

Výběr

Snadné použití místní nabídky
Okna hlavních nástrojů Posouvání seznamu

Výběr položky

Klávesa ScrollBar – dotykové ovládání a stisknutí klávesy Ctrl + přetažení
Snadné posouvání a výběr položek
Oken Změnit velikost okna

Rychlý přístup
Dobře zdokumentovat Snadná navigace mezi otevřenými soubory
Gesta Zajištění fungování běžných gest napříč IDE Akce založené na gestech

Podpora přetahování a návrhářů
Další důležité informace Vlastní klávesnice na obrazovce

Gesta

Gesta poskytují uživatelům zástupce pro příkazy, které by jinak vyžadovaly složitější interakci. přečtěte si pokyny Windows pro běžné gesta dotykového ovládání pro desktopové aplikacea postupujte podle těchto pokynů pro většinu gest, včetně jednoduchých gest, jako je například posouvání a přiblížení.