Sdílet prostřednictvím


Textová

Poznámka

Tento průvodce návrhem byl vytvořen pro Windows 7 a nebyl aktualizován pro novější verze Windows. Většina pokynů se stále používá v zásadě, ale prezentace a příklady neodráží naše aktuální pokyny k návrhu.

Pomocí textového pole můžou uživatelé zobrazovat, zadávat nebo upravovat text nebo číselnou hodnotu.

snímek obrazovky typického textového pole a popisku

Typické textové pole.

Poznámka

Pokyny týkající se rozložení, písmaa bubliny jsou uvedeny v samostatných článcích.

Je to správná kontrola?

Při rozhodování zvažte tyto otázky:

  • Je praktické vytvořit výčet všech platných hodnot efektivně? Pokud ano, zvažte seznamu s jedním výběrem , zobrazení seznamu, rozevírací seznam, upravitelný rozevírací seznam nebo posuvník.
  • Jsou platná data zcela nezatrénovaná? Nebo jsou platná data omezena pouze formátem (omezenou délkou nebo typy znaků)? Pokud ano, použijte textové pole.
  • Představuje hodnota datový typ, který má specializovaný společný ovládací prvek? Mezi příklady patří datum, čas nebo adresa IPv4 nebo IPv6. Pokud ano, použijte příslušný ovládací prvek, například ovládací prvek kalendářního data, nikoli textové pole.
  • Pokud jsou data číselná:
    • Vnímají uživatelé nastavení jako relativní množství? Pokud ano, použijte posuvník.
    • Těží by uživatel z okamžité zpětné vazby na vliv změn nastavení? Pokud ano, použijte posuvník, případně spolu s textovým polem. Uživatelé si například můžou pomocí posuvníku snadno vybrat barvu, protože okamžitě uvidí vliv změn na hodnoty odstínu, sytosti nebo světelnosti.

Koncepty návrhu

I když textová pole mají výhodu, že jsou velmi flexibilní, mají nevýhodu minimálních omezení. Jedinými omezeními upravitelného textového pole jsou:

  • Volitelně můžete nastavit maximální počet znaků.
  • Volitelně můžete vstup omezit jenom na číselné znaky (0 9).
  • Pokud používáte číselník, můžete omezit možnosti číselníku na platné hodnoty.

Kromě jejich délky a volitelné přítomnosti číselníku textová pole nemají žádné vizuální vodítka, která navrhují platné hodnoty nebo jejich formát. To znamená, že se spoléháte na popisky, aby tyto informace předali uživatelům. Pokud uživatelé zadají text, který není platný, musíte chybu zpracovat chybovou zprávou.

Obecně platí, že byste měli použít nejvíce omezený ovládací prvek, který můžete. Používejte nekontrénované ovládací prvky, jako jsou textová pole jako poslední možnost. To znamená, že při zvažování omezení mějte na paměti potřeby globálních uživatelů. Například ovládací prvek, který je omezen na AMERICKÉ PSČ není globalizován, ale unconstrained text box, který přijímá jakýkoli formát PSČ je.

Vzory použití

Textové pole je flexibilní ovládací prvek s několika možnými způsoby použití.

Označit Hodnota
vstupních dat
Jednořádkové textové pole, které se používá k zadání nebo úpravě krátkých řetězců.
Snímek obrazovky textového pole s popiskem zobrazovaného názvu
Jednořádkové textové pole bez konzistence.
naformátovaných dat
Sada krátkých jednořádkových textových polí s pevnou velikostí, která slouží k zadávání dat s určitým formátem.
Snímek obrazovky textového pole kód Product Key
Textové pole použité pro formátovaný vstup dat.
Poznámka: funkce automatického ukončení automaticky posune vstupní fokus z jednoho textového pole na další. Nevýhodou tohoto přístupu je, že data nelze kopírovat ani vkládat jako jednu jednotku.
data s asistencí
Jednořádkové textové pole, které se používá k zadávání nebo úpravě řetězců v kombinaci s příkazovým tlačítkem, které uživatelům pomáhá vybrat platné hodnoty.
Snímek obrazovky s textovým polem s tlačítkem Procházet
V tomto příkladu příkaz Procházet pomáhá uživatelům vybrat platné hodnoty.
textového vstupu
Víceřádkové textové pole, které se používá k zadání nebo úpravě dlouhých řetězců.
snímek obrazovky textového pole Adresa
Víceřádkové textové pole bez konzistence
číselného vstupu
Jednořádkový textový pole, které slouží k zadávání nebo úpravě čísel, s volitelným ovládacím číselným ovládacím pro usnadnění vstupu založeného na myši.
snímek obrazovky textového pole pro zadání doby čekání
Textové pole použité pro číselný vstup.
Kombinace textového pole a jeho přidruženého číselníku se nazývá číselník.
zadání hesla a PIN kódu
Jednořádkové textové pole bez omezení, které slouží k bezpečnému zadávání hesel a PIN kódů.
snímek obrazovky textového pole Heslo
Textové pole použité k zadání hesel.
výstup dat
Jednořádkové textové pole jen pro čtení, které se vždy zobrazuje bez ohraničení, slouží k zobrazení krátkých řetězců.
Na rozdíl od statického textu se data zobrazená pomocí textového pole dají posunout (užitečné, pokud jsou data širší než ovládací prvek), vybraná a zkopírovaná.
Snímek obrazovky textového pole s cestou ke složce
Jednořádkové textové pole určené jen pro čtení, které slouží k zobrazení dat.
textového výstupu
Víceřádkové textové pole určené jen pro čtení, které slouží k zobrazení dlouhých řetězců.
Snímek obrazovky textového pole s informacemi o ochraně osobních údajů
Textové pole určené jen pro čtení sloužící k zobrazení dat.

Pokyny

Obecné

  • Při zakázání textového pole zakažte také všechny přidružené popisky, popisky instrukcí, ovládací prvky číselníku a příkazová tlačítka.

  • Použití automatického dokončování k tomu, aby uživatelé mohli zadávat data, která budou pravděpodobně použita opakovaně. Mezi příklady patří uživatelská jména, adresy a názvy souborů. Nepoužívejte automatické dokončování pro textová pole, která můžou obsahovat citlivé informace, jako jsou hesla, PIN kódy, čísla platebních karet nebo lékařské informace.

  • Nenechávejte uživatele zbytečně posouvat. Pokud očekáváte, že data budou větší než textové pole a textové pole můžete snadno zvětšit bez poškození rozložení, zvětšíte pole tak, aby se nemuselo posouvat.

    nesprávná odpověď:

    snímek obrazovky textového pole s názvem počítače

    V tomto příkladu by mělo být textové pole pro zpracování dat mnohem delší.

  • Posuvníky:

    • Nevkládejte vodorovné posuvníky do víceřádkových textových polí. Místo toho použijte svislé posouvání a obtékání čáry.
    • Nevkládejte žádné posuvníky do jednořádkového textového pole.
  • Pro číselný vstup můžete použít číselný ovládací prvek. Pro textové zadání použijte místo toho rozevírací seznam nebo upravitelný rozevírací seznam.

  • Nepoužívejte funkci automatického ukončení s výjimkou formátovaného vstupu dat. Automatický přesun fokusu může překvapit uživatele.

Upravitelná textová pole

  • Omezte délku vstupního textu, pokud je to možné. Pokud je například platným vstupem číslo od 0 do 999, použijte číselné textové pole, které je omezeno na tři znaky. Všechny části textových polí, které používají formátovaný vstup dat, musí mít krátkou pevnou délku.

  • Buďte flexibilní díky datovým formátům. Pokud uživatelé budou pravděpodobně zadávat text pomocí široké škály formátů, zkuste zpracovat všechny nejběžnější formáty. Například mnoho názvů, čísel a identifikátorů se dá zadat pomocí volitelných mezer a interpunkce a velká písmena často nezáleží.

  • Pokud nemůžete zpracovat pravděpodobné formáty, vyžadovat konkrétní formát pomocí formátovaného vstupu dat nebo označit platné formáty v popisku.

    přijatelné :

    snímek obrazovky textového pole pro číselný vstup

    V tomto příkladu textové pole vyžaduje zadání v určitém formátu.

    lepší:

    snímek obrazovky s textovým polem pro zadání formátovaných dat

    V tomto příkladu se formátovaný vzor vstupu dat používá k vyžadování určitého formátu.

    nejlepší:

    snímek obrazovky s nezatrénovaným textovým polem

    V tomto příkladu textové pole zpracovává všechny pravděpodobné formáty.

  • Při výběru maximální délky vstupu zvažte flexibilitu formátu. Platné číslo platební karty může například používat až 19 znaků, takže omezení délky na cokoli kratšího by ztěžovalo zadávání čísel pomocí delších formátů.

  • Nepoužívejte formátovaný vzor zadávání dat, pokud uživatelé budou pravděpodobně vkládat dlouhá a složitá data. Místo toho si zarezervujte formátovaný vzor zadávání dat pro situace, kdy uživatelé budou data pravděpodobně zadávat.

    snímek obrazovky textového pole s popiskem: adresa ipv6

    V tomto příkladu se formátovaný vzor vstupu dat nepoužívá, aby uživatelé mohli vložit adresy IPv6.

  • Pokud uživatelé budou pravděpodobně znovu zadat celou hodnotu, vyberte veškerý text na vstupním fokusu. Pokud je pravděpodobné, že uživatelé budou upravovat, umístěte stříšku na konec textu.

    snímek obrazovky textového pole s heslem

    V tomto příkladu budou uživatelé pravděpodobně nahrazeni než upravovat, takže celá hodnota je vybrána na vstupním fokusu.

    snímek obrazovky textového pole pro zadávání klíčových slov

    V tomto příkladu budou uživatelé pravděpodobně přidávat klíčová slova než nahradit text, takže stříšku se umístí na konec textu.

  • Vždy používejte víceřádkové textové pole, pokud jsou platné znaky nového řádku.

  • Pokud je textové pole pro soubor nebo cestu, vždy zadejte tlačítko Procházet.

Číselná textová pole

  • Vyberte nejpohodlnější jednotku a označte jednotky. Zvažte například použití mililitrů místo literů (nebo naopak), procent místo přímých hodnot (nebo naopak) atd.

    správně:

    snímek obrazovky textového pole s litery jako jednotkovou

    V tomto příkladu je jednotka označená, ale vyžaduje, aby uživatelé zadali desetinná čísla.

    lepší:

    snímek obrazovky textového pole s mililitery jako jednotkovou

    V tomto příkladu textové pole používá pohodlnější jednotku.

  • Ovládací prvek otáčení používejte vždy, když je to užitečné. Někdy ale ovládací prvky otáčení nejsou praktické, například když uživatelé potřebují zadat mnoho velkých čísel. Ovládací prvky číselníku použijte, když:

    • Vstup bude pravděpodobně malé číslo, obvykle pod 100.
    • Uživatelé budou pravděpodobně provádět malou změnu existujícího čísla.
    • Uživatelé budou pravděpodobně používat myš než klávesnici.
  • číselný text zarovnat doprava, kdykoli:

    • Existuje více než jedno číselné textové pole.
    • Textová pole jsou svisle zarovnaná.
    • Uživatelé budou pravděpodobně přidávat nebo porovnávat hodnoty.

    správně:

    snímek obrazovky s textovými poli výdajů (hotel atd.)

    V tomto příkladu je číselný text zarovnaný doprava, aby bylo možné snadno porovnávat hodnoty.

    nesprávná odpověď:

    snímek obrazovky textových polí pro hodnoty rgb

    V tomto příkladu je číselný text nesprávně zarovnaný doleva.

  • Vždy zarovnávat peněžní hodnoty doprava.

  • Nepřiřazovat speciální významy ke konkrétním číselným hodnotám, i když je vaše aplikace používá interně. Místo toho použijte zaškrtávací políčka nebo přepínače pro explicitní výběr uživatele.

    nesprávná odpověď:

    snímek obrazovky s popiskem: Použití -1 k zakázání ukládání do mezipaměti

    V tomto příkladu má hodnota -1 zvláštní význam.

    správně:

    snímek obrazovky s popiskem zaškrtávacího políčka: ukládání do mezipaměti

    V tomto příkladu zaškrtávací políčko nastaví možnost explicitně.

Zadání hesla a PIN kódu

  • Místo vytvoření vlastního vlastního ovládacího prvku vždy používejte běžný ovládací prvek hesla. Hesla a PIN kódy vyžadují bezpečné zpracování speciálního zacházení.

Další pokyny a příklady najdete v tématu Bubliny.

Textový výstup

  • Zvažte použití bílé barvy systému pozadí pro velký text jen pro čtení s více řádky. Bílé pozadí usnadňuje čtení textu. Hodně textu na šedém pozadí nedoporučuje čtení.

Další informace o barvách pozadí najdete v tématu Písma.

Výstup dat

  • Nepoužívejte ohraničení pro jednořádková textová pole jen pro čtení. Ohraničení je vizuální vodítko, že text je možné upravit.
  • Nezakažujte jednořádková textová pole jen pro čtení. Tím zabráníte uživatelům v výběru a zkopírování textu do schránky. Zabrání také uživatelům v posouvání dat, pokud překročí velikost jeho hranic.
  • Nenastavujte zarážku tabulátoru na jednořádkovém textovém poli jen pro čtení, pokud uživatel pravděpodobně nebude muset text posunout nebo zkopírovat.

Ověřování vstupu a zpracování chyb

Vzhledem k tomu, že textová pole nejsou obvykle omezena tak, aby přijímala pouze platný vstup, je možné, že budete muset ověřit vstup a zpracovat všechny problémy. Ověřte různé typy vstupních problémů následujícím způsobem:

  • Pokud uživatel zadá neplatný znak, ignorujte ho a zobrazte bublinu problému vstupu, která vysvětluje platné znaky.

    snímek obrazovky textového pole s kódem Product Key

    V tomto příkladu bublina hlásí nesprávný vstupní znak.

  • Pokud vstupní data mají hodnotu nebo formát, který není platný, zobrazte bublinu s vstupním problémem, když textové pole ztratí fokus vstupu.

  • Pokud jsou vstupní data nekonzistentní s jinými ovládacími prvky v okně, po dokončení celého vstupu zadejte chybovou zprávu, například když uživatelé kliknou na TLAČÍTKO OK pro modální dialogové okno.

Nezaškrtávejte neplatná vstupní data, pokud uživatelé nebudou moct chyby snadno opravit. Díky tomu můžou uživatelé opravovat chyby, aniž by museli začít znovu. Měli byste například vymazat nesprávná hesla a PIN kódy, protože je uživatelé nemůžou snadno opravit.

Další pokyny a příklady najdete v tématu Chybové zprávy a Bubliny.

Pobídky

Výzva je popisek nebo krátká instrukce umístěná v textovém poli jako výchozí hodnota. Na rozdíl od statického textu zmizí výzva z obrazovky, jakmile uživatelé něco zadávají do textového pole nebo dostanou fokus vstupu.

snímek obrazovky s textovým polem výzvy s popiskem: hledání

Typická výzva.

Použijte výzvu, když:

  • Prostor obrazovky je v takové úrovni premium, že použití popisku nebo instrukce je nežádoucí, například na panelu nástrojů.
  • Výzva je primárně určena k identifikaci účelu textového pole kompaktním způsobem. Nesmí to být důležité informace, které uživatel potřebuje při používání textového pole vidět.

Nepoužívejte výzvy jenom k nasměrování uživatelů, aby něco zadali nebo klikli na tlačítka. Například nezapisujte text výzvy s textem Zadejte název souboru a klikněte na Odeslat.

Při použití výzev:

  • Nakreslete text výzvy v šedé kurzívě a skutečný vstupní text v normální černé barvě. Text výzvy nesmí být zaměňován se skutečným textem.
  • Ponechte text výzvy stručný. Místo celých vět můžete použít fragmenty.
  • Použijte velká písmena ve stylu věty.
  • Nepoužívejte koncovou interpunkci ani tři tečky.
  • Text výzvy by neměl být upravitelný a měl by zmizet, jakmile uživatelé kliknou do textového pole nebo na kartu.
    • Výjimka: Pokud má textové pole výchozí vstupní fokus, zobrazí se výzva a zmizí, jakmile uživatel začne psát.
  • Text výzvy se obnoví, pokud je textové pole stále prázdné, když ztratí fokus vstupu.

obrázek jednořádkových a dvouřádkových textových polí

Doporučená velikost a mezery pro textová pole

Šířka textového pole představuje vizuální vodítko očekávané velikosti vstupu. Při nastavování velikosti textových polí:

  • Zvolte šířku odpovídající nejdelším platným datům. Ve většině situací by uživatelé neměli muset posouvat nejpravděpodobnější řetězec, který zadají nebo zobrazí.
  • zahrnout dalších 30 % (až 200 procent pro kratší text) pro libovolný text (ale ne čísla), který bude lokalizován.
  • Pokud očekávaný vstup nemá žádnou konkrétní velikost, zvolte šířku, která je konzistentní s ostatními textovými poli nebo ovládacími prvky v okně.
  • Velikost víceřádkových textových polí pro zobrazení celočíselného počtu řádků textu.

Popisky

Popisky textových polí

  • Všechna textová pole potřebují popisky. Napište popisek jako slovo nebo frázi, ne jako větu, končící dvojtečkam a pomocí statického textu.

    výjimky :

    • Textová pole s výzvami umístěnými v místě, kde je mezera na úrovni Premium.

    • Pro popisky by měla být skupina textových polí používaná pro formátovaný vstup dat považována za jedno textové pole.

    • Pokud je textové pole podřízené přepínači nebo zaškrtávacímu políčku a jeho popisek končí dvojtečku, nevkládejte do textového pole další popisek.

    • Vynecháte popisky ovládacích prvků, které přestavují hlavní instrukce. V tomto případě hlavní instrukce přebírá dvojtečku (pokud se nejedná o otázku) a přístupový klíč.

      přijatelné :

      snímek obrazovky textového pole s opakovaným popiskem

      V tomto příkladu je popisek textového pole jen výrazem hlavní instrukce.

      lepší:

      snímek obrazovky s textovým polem s hlavními instrukcemi pouze

      V tomto příkladu se odebere redundantní popisek, takže hlavní instrukce převezme dvojtečku a přístupový klíč.

  • Přiřaďte jedinečný přístupový klíč. Pokyny pro přiřazení přístupových kláves najdete v tématu Klávesnice.

  • Použijte velká písmena ve stylu věty.

  • Umístěte popisek nalevo od textového pole nebo nad textové pole a zarovnejte popisek s levým okrajem textového pole. Pokud je popisek vlevo, svisle zarovnejte text popisku s textem textového pole.

    správně:

    snímek obrazovky s popiskem zarovnaným doleva nad textovým polem

    snímek obrazovky s popiskem zarovnaným textem doleva od textového pole

    V těchto příkladech se popisek nahoře zarovná s levým okrajem textového pole a popisek vlevo zarovná s textem v textovém poli.

    nesprávná odpověď:

    snímek obrazovky s popiskem zarovnaným nad textovým polem

    snímek obrazovky s popiskem zarovnaným nahoře nalevo od textového pole

    V těchto nesprávných příkladech se popisek nahoře zarovná s textem v textovém poli a popisek vlevo zarovná s horní částí textového pole.

  • Jednotky (například sekundy nebo připojení) můžete za popiskem zadat v závorkách.

  • Pokud textové pole přijímá libovolný malý maximální počet znaků, můžete zadat maximální vstup v popisku. Šířka textového pole by měla také navrhnout maximální velikost.

    snímek obrazovky textového pole s heslem

    V tomto příkladu má popisek maximální počet znaků.

  • Nevytvávejte obsah textového pole (nebo jeho popisek jednotek) jako součást věty, protože to není lokalizovatelné.

  • Pokud je možné textové pole použít k zadání několika položek, zrušte zaškrtnutí políčka oddělit položky v popisku.

    snímek obrazovky s názvy oddělenými středníkem

    V tomto příkladu je v popisku uveden oddělovač položek.

  • Pokyny k označení požadovaného vstupu naleznete v části Požadovaný vstup v dialogových oknech.

Popisky instrukcí

  • Pokud potřebujete přidat instrukční text o textovém poli, přidejte ho nad popisek. Používejte úplné věty s koncovou interpunkcí.

  • Použijte velká písmena ve stylu věty.

  • Další informace, které jsou užitečné, ale není nutné, by měly být krátké. Tyto informace umístěte buď do závorek mezi popiskem a dvojtečku, nebo bez závorek pod textové pole.

    snímek obrazovky s přidanou informací pod textovým polem

    V tomto příkladu se pod textové pole umístí další informace.

Popisky výzvy

  • Ponechte text výzvy stručný. Místo celých vět můžete použít fragmenty.
  • Použijte velká písmena ve stylu věty.
  • Nepoužívejte koncovou interpunkci ani tři tečky.
  • Pokud výzva nasměruje uživatele, aby zadali informace, na které se bude reagovat tlačítkem vedle textového pole, jednoduše umístěte tlačítko vedle textového pole. Nepoužívejte výzvu k nasměrování uživatelů, aby klikli na tlačítko (například nezapisujte text výzvy, který říká, Přetáhněte soubor a klikněte na tlačítko Odeslat).

Dokumentace

Při odkazech na textová pole:

  • Použití typu k odkazování na interakce uživatele, které vyžadují psaní nebo vkládání; v opačném případě použijte enter, pokud uživatelé mohou do textového pole vložit informace pomocí jiných prostředků, například vybrat hodnotu ze seznamu nebo pomocí tlačítka Procházet.

  • Výběr slouží k odkazování na položku v textovém poli jen pro čtení.

  • Použijte přesný text popisku, včetně jeho velká písmena, a zadejte textové pole. Nezahrnujte podtržítko nebo dvojtečku přístupového klíče. Neodkazujte na textové pole jako na textové pole nebo pole.

  • Pokud je to možné, naformátujte popisek tučným písmem. V opačném případě vložte popisek do uvozovek, pouze pokud je to nutné, aby se zabránilo nejasnostem.

    Příklad: Zadejte heslo do pole Heslo a klepněte na tlačítko OK.

  • Pokud textové pole vyžaduje určitý formát, dokument má pouze nejčastěji používaný přijatelný formát. Umožňuje uživatelům zjistit vlastní formáty. Chcete být flexibilní s datovými formáty, ale nemělo by to mít za následek složitou dokumentaci.

    správně:

    Zadejte sériové číslo části ve formátu 1234-56-7890.

    nesprávná odpověď:

    Sériové číslo části zadejte pomocí některého z následujících formátů:

    1234567890

    1234-56-7890

    1234 56 7890