Jak navrhnout citlivé a zařízení-agnostické formy

Sep 14, 2025

jak

Ať už se jedná o přihlašovací tok nebo více pohledu kroký, formuláře jsou jedním z nejdůležitějších složek digitálního designu produktu - takže je třeba je navrhnout, takže fungují efektivně na mobilních zařízeních.

Zde je návod, jak navrhnout formuláře pro mobilní zařízení, včetně rychlého pohledu Jak používat FlexBox .

01. Design pro vertikální svitek

A single column layout works better — Uspořádání jediného sloupce funguje lépe

Bez ohledu na velikost zařízení je nejjednodušší způsob dokončení formuláře, je lineární móda. Více sloupců narušuje hybnost uživatele (uživatelé pravděpodobně interpretují pole nekonzistentně, což je negativní faktor z hlediska použitelnosti) a může mít za následek uživatelům, kteří se musí uchýlit k horizontálnímu rolování.

Pokud jde o pokládání formulářů, měli byste navrhnout záznamy v jednom sloupci: Pokud je formulář v jediném sloupci, cesta k dokončení je přímka sestupná stránka.

02. Umístěte štítky nad polem

Place labels above form fields — Umístěte popisky výše formulářů

Štítky říkají uživatele, co znamenají odpovídající vstupní pole. Při výběru Kde umístit štítky máte dvě možnosti: levostranné nebo nahoře.

Pokud je formulář dokončen na pracovní ploše nebo tabletu, fungují štítky vlevo. Jsou však hrozné řešení pro mobilní zařízení, kde je omezená síta. Vzhledem k tomu, že štítky zarovnané vlevo musí sedět před polem, úzká obrazovka opustí velmi málo prostor pro samotné pole - zejména pokud je zařízení v režimu na výšku. To vytváří dvě závažné problémy použitelnosti:

Formulář pole nebude dostatečně široko pro zobrazení celého vstupu uživatele, což je činí pravděpodobnějším, že je pravděpodobnější, že by mistypy jejich reakce a vedly k předložení chybných forem
Když je uživatel upozorněn, že zadali chybné informace, mohou mít tvrdý čas spotting a opravit problém, protože nebudou moci vidět celý neplatný vstup

Umístění štítku nad pole formuláře Pokud je uživatel procházení z mobilního zařízení, zajistí, že uživatelé mohou vidět maximální šířku pro zadání jejich detailů, protože nemusíte používat žádnou pro štítek.

Psaní štítků nad vstupními poli také usnadňuje psát jasné a smysluplné pole pole, protože nebudete omezeni na jednu nebo dvě slova.

03. Použijte cíle klepněte

Klepové cíle by měly být snadno použitelné bez ohledu na velikost zařízení, na které se zobrazují. Větší cíle (vstupní pole a tlačítka) jsou snazší pro uživatele s nižší obratností, ať už je to trvalý stav nebo dočasný způsobený životním prostředím.

V tuto chvíli je největší cílová velikost pro dotykové zařízení, takže je třeba navrhnout dotek-první. To zajišťuje, že uživatelé nebudou muset přiblížit, aby zadali text nebo vyberte možnost. Klikací oblasti by měly následovat pravidlo FAT Finger a ne zasahovat do okolních oblastí: Průměrná polštářka pro člověka je 10 x 14 mm a průměrný prstový prsten je 8-10 mm, tvorba 10 x 10 mm dobrý minimální cílová velikost dotyku.

Ale nejen, že by měl být řádně dimenzován cílový cíl, měli byste také ujistit, že je dostatek místa mezi více cíli klepání. Ve skutečnosti, pokud dostáváte chybu "Klepněte na cíl velikost" na mobilních seo nástrojů, je často proto, že vaše cíle klepnutí jsou příliš blízko u sebe, spíše než skutečný cíl klepnutí příliš malý.

To může být těžké číst obsah na mobilních zařízeních, takže zpřístupnění 100% a zajištění textu je nastaveno na nejméně 16px (1em), bude velký rozdíl. Tímto způsobem nebude vyžadováno žádné štípací zoom nebo další svitek pro čtení požadovaných informací.

04. Použijte pole formuláře HTML5

Mobilní zařízení nabízejí vlastní softwarové klávesnice pro různé typy vstupů a pole formuláře HTML5 jsou jediné nejjednodušší způsob, jak zlepšit uživatelské zkušenosti vašich formulářů. Tyto typy vstupů poskytují rady do prohlížeče o tom, jaký typ rozložení klávesnice pro zobrazení klávesnicích na obrazovce.

Zahrnout vstupní typy číslo , e-mailem , tel , url a datum a vstup klávesnice na vašich mobilních zařízeních bude aktualizována, aby usnadnila uživateli k vyplnění formuláře. Nevyžaduje, abyste přidali další třídy na vstupy stylu, vše, co musíte udělat, je použít platné typy vstupu HTML5:

<input type="email" id="input-email">

05. Použijte FlexBox.

Pojďme se k němu - je těžké vytvořit citlivý rozložení v HTML. Většina z nás se s tím snažila v jednom místě nebo jiném. Ačkoli je vždy bylo možné, aby se rozložení, které se chovají podle očekávání pomocí specializovaných technologií, proces nebyl nikdy snadný.

Technologie, které se zabývají strukturovaným uspořádáním přišly a odešli v průběhu let: vývojáři používali HTML rámce, HTML tabulky, plovák-založené rozložení, a nedávno, různé mřížkové systémy popularizované CSS rámcové, jako je Bootstrap .

Ale s příchodem modelu flexibilního boxu HTML (nebo FlexBox. ), HTML konečně získal bohaté pole formátování motoru, který řeší komplexní rozložení, včetně formulářů HTML.

FlexBox nám dává velkou flexibilitu pro rychlé stavby krásných forem. Klíčová věc, kterou chcete pochopit o flexboxu je, že je to nástroj pro manipulaci s kontejnerem: cílem je poskytnout efektivnější způsob, jak rozložit, zarovnat a distribuovat prostor mezi položkami v kontejneru, i když jejich velikost je neznámá a / nebo dynamická slovo 'flex').

Zajímavostí je, že FlexBox nám dává velkou flexibilitu pro rychlé vybudování náš formulář bez použití libovolných mediálních dotazů. Plus, všechny aktuální prohlížeče ji podporují.

Náš Průvodce webovým návrhářem pro flexibox Článek vám řekne více, ale teď se udělejme nějakou praxi a naučíme se, jak využít FlexBox vytvořit citlivý formulář. Nejdříve první věci, pojďme definovat strukturu HTML pro náš formulář:

 & lt; forma & gt;
& lt; ul třídy = "flex" & gt;
& lt, li & gt;

Všimněte si, že každý ze položek seznamu v naší podobě má třídu ohebný . Tato třída identifikuje kontejner FLEX v naší podobě. Jedním z největších výhod FlexBoxu je jeho schopnost používat libovolný HTML prvek pro definování kontejnerů a prvků.

Styl flexibře můžete použít k libovolnému HTML prvku, což znamená, že můžete snadno restyleovat a reflow prvky nezávisle na sobě. Mějte na paměti, že flexbox je jen stylingový mechanismus, což znamená, že jej můžete přidat a odstranit.

Uvidíme kontejnery FLEX v našich CSS. Kromě toho chceme vertikálně zaměřit položky Flex přes křížovou osu. Je to docela snadné specifikovat, že prostě musíme nastavit jednoduché pravidlo CSS:

 .flex Li {
Displej: Flex;
Flex-Wrap: Wrap;
Zarovnat předměty: Centrum;
}

Dalším krokem je zadat šířky pro položky FLEX. Hlavní požadavky:

Štítky by měly být nejméně 100px a maximálně 200px
Formové prvky, které přicházejí poté, co štítky by měly být nejméně 200px

Co nám to dává? Každý štítek a jeho přidružený formulářový prvek se zobrazí na jednom horizontálním řádku, když šířka formuláře součtuje alespoň 300px (nezapomeňte, používáme správné štítky zde).

 .Flex & gt; Li & gt; štítek {
Flex: 1 0 100px;
Max-šířka: 200px;
}
.flex & gt; Li & gt; Štítek + * {
Flex: 1 0 200px;
}

Konečně, pro tlačítko Odeslat, což je také položka flex, definujeme několik základních stylů:

 .flex li tlačítko {
Marže: Auto;
Polstrování: 22px 46px;
}

Jak vidíte, s minimálním značením a výkonem FlexBoxu, vybudovali jsme citlivou formu.

S více uživateli nesoucími mobilními zařízeními je nezbytné dodat uživatelsky přívětivý zážitek na libovolném zařízení. Klíčovým bodem je přizpůsobit se potřebám uživatele a možnostem zařízení.

Tento článek byl původně publikován v čísle 287 z Čistý časopis , Časopis pro profesionální web designéry a vývojáři - nabízet nejnovější nové webové trendy, technologie a techniky. Přihlásit se k odběru netto.

Související články:

Vytvořit citlivé formuláře a tabulky
Začněte s webovou dostupností
7 Skvělé nástroje pro testování reagujících návrhů webu

Jak navrhnout citlivé a zařízení-agnostické formy

01. Design pro vertikální svitek

02. Umístěte štítky nad polem

03. Použijte cíle klepněte

04. Použijte pole formuláře HTML5

05. Použijte FlexBox.

jak - Nejoblíbenější články

Služoky Google: Jak navrhnout dokument

Jak nakreslit růže: začátečník a pokročilé tipy

Jak implementovat světelné nebo tmavé režimy v CSS

Řízení kmenové verze pro vzdálené týmy

Vytvoření menu Slide-out

5 věcí, které potřebujete pro olejomalbu

Age fotografie ve Photoshopu CC

Jak vytvořit živou pohádku Queen

Kategorie