Design principy

Dotyková rozhraní — design bez myši

Dotyk funguje jinak než myš. Větší cílové oblasti, jasné stavy, bez hover efektů. Jak navrhnout zkušenost, která skutečně funguje na prstech.

8 min čtení Začátečník Únor 2026

Uživatel s prstem na obrazovce telefonu, interakce s dotykovým rozhraním

Proč se dotyk liší od myši

Myš je přesná. Lze najet na pixel. Ale prst? To je úplně jiná věc. Prst je širší, má plochu, a přesnost se pohybuje někde kolem 44 pixelů. Tímto rozdílem se řídí všechno — od velikosti tlačítek přes spacing až po to, jak signalizujeme, že se něco stane.

Když navrhujete pro dotyk, už nemůžete spoléhat na hover stavy. Nemáte tam kurzor, který by ukazoval “sem se můžeš podívat”. Místo toho potřebujete jasné vizuální hierarchie, přesné feedback a dostatečný prostor. Málo toho změní uživatelský zážitek rychleji než příliš malé tlačítko na mobilu.

Srovnání přesnosti myši a prstu na obrazovce, vizualizace dotykových oblastí

Pět principů dotykového designu

Tyto pravidla fungují, ať navrhujete aplikaci, web nebo interface v autě.

Cílové oblasti minimálně 4444 pixelů

Není to pouhá čísla — 44 pixelů je zhruba velikost dospělého prstu v průměru. Menší tlačítka jsou frustrace. Když máte tři ikonky vedle sebe, který si vybere uživatel? Ten, který se jí podaří trefit. Malá tlačítka = vysoká chyba.

Rozestupy mezi prvky — minimálně 8 pixelů

Pokud jsou tlačítka těsně vedle sebe, uživatel trefí to špatné. Rozestup mezi interaktivními prvky není luxus — je to povinnost. Osm pixelů je realné minimum, 12-16 je lepší. Prostora se nebojte.

Bez hover stavů — všechno se ukazuje jinak

Hover existuje jen s myší. Na dotyk se nepoužívá. Místo toho musíte signalizovat možnost interakce přes barvu, tvar nebo ikon. Když něco vypadá klikatelně, mělo by to vypadat bez nutnosti najet si na to prstem.

Jasné stavy — co se právě děje?

Zatímco se data načítávají, uživatel má vědět, že se něco děje. Spinner, progress bar, nebo prostě zakázané tlačítko. Neexistuje horší pocit než nejistota. Pokud se nic neděje viditelně, uživatel si myslí, že nic nefunguje.

Feedback musí být okamžitý

Když uživatel něco klikne, měl by to cítit. Barva se změní, prvek se posune, něco se změní. Bez feedbacku se neví, jestli tlačítko zaregistrovalo jejich dotyk. Okamžitá vizuální odpověď znamená rozdíl mezi “Funguje!” a “Je to mrtvé?”

Demonstrace pěti principů dotykového designu — velikosti tlačítek, rozestavů a stavů

Praktický příklad správně navrženého dotyového formuláře se správnými mezerami a velikostmi

Praktický příklad: Formulář

Vezměte si jednoduchý přihlašovací formulář. Vstupní pole — jaké bude velké? Typicky 44-48 pixelů výšky. Ne proto, že bychom to chtěli, ale proto, že menší pole se hůř používají. Tlačítko “Přihlásit”? To samé — minimálně 48 pixelů.

Mezi polem a tlačítkem? 16 pixelů. To není nic. Ale když se tím opakovadluje procento chybných kliknutí, ty 16 pixelů jsou ty rozdíl. Navíc — jakmile uživatel klikne, tlačítko se změní (jiná barva, text se změní na “Přihlašuji…”). Ví, že se něco děje.

Tohle je design bez myši. Není to ošklivé, není to nudné. Je to jen — funkční. A funkčnost na dotyku je všechno.

Konkrétní techniky pro dotykový design

Jak to implementovat v CSS a HTML.

Zvětšení cílové plochy pomocí padding

Tlačítko nemusí být velkého textu, aby mělo velkou cílovou plochu. Padding řeší všechno. Máte malou ikonku? Obklopte ji padding: 12px. Cílová plocha je nyní 4444 pixelů, i když samotná ikona je 2020.

Active stav místo hover

Místo :hover{} použijte :active{}. To se aktivuje při dotyku. Barva se změní na mikrosekund, ale uživatel to cítí. Je to srozumitelné bez nutnosti visí někde.

Sufficient color contrast

Barvy musí mít dostatečný kontrast. Ne proto, že to vypadá lépe, ale proto, že na slunečnici jsou barvy těžko vidět. 4.5:1 poměr kontrastu není krásný povinný — je to nutnost.

Touch-action CSS vlastnost

touch-action: manipulation; zabraňuje zdvojnásobení kliknutí na desktopech. To je detail, ale důležitý. Zbavuje to uživatele zpoždění.

Viewport meta tag

viewport-fit=cover a initial-scale=1 jsou základy. Bez toho se displej chová divně a text se zvětšuje při rotaci. S tím je všechno pod kontrolou.

Focus stavy jsou viditelné

Když uživatel přejde na prvek klávesnicí (nebo se dotýká), musí vidět, kde je focus. Nikdy neprovádějte outline: none; bez náhrady. Viditelné focus stavy jsou přístupnost.

Nejčastější chyby v dotykovém designu

Tyhle chyby vidíme pořád. Málokdo je dělá schválně — spíš se zapomene, že dotyk není myš.

Příliš malá tlačítka

Ikona 2020 pixelů, bez padding. Uživatel to nemůže trefit. Vidí ji, ale nemůže ji kliknout. Pak to vypadá, že aplikace nefunguje. Prostě — přidejte padding.

Spoléhání na hover

“Najeď myší, aby se zobrazilo menu.” Na mobilu? Neexistuje “najetí”. Menu se nikdy neobjeví. Všechno musí být vidět nebo dostupné bez hoveru.

Bez viditelného feedbacku

Uživatel klikne, nic se neděje viditelně. Neví, jestli to zaregistrovalo. Vždycky dajte feedback — barvě, pohybu, čemukoli.

Malé rozestupy mezi prvky

Dvě tlačítka vedle sebe bez rozestupu. Uživatel chce kliknout na jedno, klikne na druhé. Prostě — rozestup. Osm pixelů minimum.

Srovnání špatného a dobrého dotyového designu — příklady běžných chyb

Zapamatujte si toto

44px

Minimální velikost cílové plochy

8px

Minimální rozestup mezi prvky

0ms

Čekací doba pro feedback

4.5:1

Minimální poměr kontrastu

Připraveni na dotyk?

Dotykový design se zdá složitý, ale ve skutečnosti jde jen o to dát uživatelům dost místa a jasný feedback. Zkuste tyto principy na svém příštím projektu — rozdíl budete vidět okamžitě.

Zjistit více o mobilním designu

Poznámka k informacím

Tento článek poskytuje vzdělávací informace o principech dotyového designu. Specifické hodnoty (44px, 8px) jsou doporučení na základě průmyslových standardů a WCAG pokynů, nikoliv absolutní pravidla. Vždy testujte svůj design s reálnými uživateli a na skutečných zařízeních. Různé platformy (iOS, Android, web) mohou mít mírně odlišné požadavky na velikosti a chování. Pokud vyvíjíte pro specifickou platformu, zkonsultujte její oficiální design guidelines.