Jak zaprojektować responsywne i agnostyczne formy

Sep 11, 2025

Jak

Niezależnie od tego, czy jest to przepływ rejestracyjny, czy wielostronne stepper, formularze są jednym z najważniejszych elementów projektu produktu cyfrowego - więc musisz je zaprojektować, więc działają skutecznie na urządzeniach mobilnych.

Oto jak zaprojektować formularze do urządzeń mobilnych, w tym szybkiego spojrzenia Jak korzystać z flexbox .

01. Projektowanie pionowego przewijania

A single column layout works better — Układ pojedynczego kolumny działa lepiej

Niezależnie od wielkości urządzenia, najłatwiejszym sposobem wykonania formularza jest w sposób liniowy. Wiele kolumn zakłóca tempo użytkownika (użytkownicy mogą interpretować pola niespójnie, co jest ujemnym czynnikiem pod względem użyteczności) i może spowodować użytkownikom, aby uciekać się do przewijania poziomego.

Jeśli chodzi o ustanowienie formularzy, powinieneś zaprojektować wpisy w jednej kolumnie: Jeśli formularz znajduje się w jednej kolumnie, ścieżka do zakończenia jest prostą linią w dół strony.

02. Umieść etykiety nad polami

Place labels above form fields — Umieść etykiety powyżej pól formularza

Etykiety mówią użytkownikom, co oznacza odpowiednie pola wejściowe. Przy wyborze, gdzie umieścić swoje etykiety, masz dwie opcje: wyrównane przez lewy lub wyrównany do góry.

Etykiety lewej wyrównane działają dobrze, jeśli formularz jest ukończony na pulpicie lub tablecie. Jednak są one okropnym rozwiązaniem dla urządzeń mobilnych, w których istnieje ograniczona nieruchomość. Ponieważ etykiety wyrównane z lewej strony muszą siedzieć przed polem, wąski ekran pozostawia bardzo małą przestrzeń dla samego pola - zwłaszcza jeśli urządzenie jest w trybie portretowym. Stwarza to dwie poważne problemy z użytecznością:

Pole formularza nie będzie wystarczająco szerokie, aby wyświetlić całe wejście użytkownika, czyniąc je bardziej narażającymi na ich reakcje i prowadzą do bardziej błędnych formularzy
Gdy użytkownik jest powiadamiany, że wprowadzili one błędne informacje, mogą mieć trudności ze spotkań i naprawiając problem, ponieważ nie będą mogły zobaczyć całego nieprawidłowego wejścia

Umieszczenie etykiety powyżej pola formularza, gdy użytkownik przegląda się z urządzenia mobilnego, zapewnia użytkownikom widać maksymalną szerokość, aby wprowadzić swoje dane, ponieważ nie musisz używać żadnych dla etykiety.

Pisanie etykiet powyżej pól wejściowych ułatwia również pisanie jasnych i znaczących etykiet terenowych, ponieważ nie będzie ograniczony do jednego lub dwóch słów.

03. Użyj celów Tap

Tap Cele powinny być łatwe w użyciu bez względu na rozmiar urządzenia, na którym są wyświetlane. Większe cele (pola wejściowe i przyciski) są łatwiejsze dla użytkowników o niższej zręczności, niezależnie od tego, czy jest to stały stan lub tymczasowy wywołany przez środowisko.

W tej chwili największy rozmiar docelowy jest dla urządzeń dotykowych, więc trzeba zaprojektować touch-First. Zapewnia to, że użytkownicy nie będą musieli powiększyć, aby wprowadzić tekst lub wybrać opcję. Obligowe obszary powinny podążać za rządy palec tłuszczu, a nie wrażenia na obszarach okolicznych: średnia ludzka padka palec wynosi 10 x 14 mm, a średnia palca wynosi 8-10 mm, tworzenie 10 x 10 mm jest dobrym minimalnym rozmiarem docelowym dotykowym.

Ale nie tylko należy docelowy cel kranu, należy również zapewnić, że istnieje wystarczająco dużo miejsca między wielokrotnymi celami Dotknij. W rzeczywistości, jeśli otrzymasz błąd "Stuknij docelowy" na narzędziach mobilnych SEO, często dlatego, że cele kranu są zbyt blisko siebie, a nie rzeczywisty cel kranu jest zbyt mały.

Może być trudny do odczytania treści na urządzeniach mobilnych, dzięki czemu wejścia 100% i zapewnienie, że tekst jest ustawiony na co najmniej 16px (1em), będzie miał dużą różnicę. W ten sposób nie będzie wymagany nie będzie wymagany powiększanie szczypta ani dodatkowego przewijania.

04. Użyj pola formularza HTML5

Urządzenia mobilne oferują niestandardowe klawiatury oprogramowania do różnych typów wejść, a pola formularza HTML5 są najłatwiejszym sposobem na poprawę doświadczenia użytkownika formularzy. Te typy wejść dają wskazówki do przeglądarki o tym, jaki rodzaj układu klawiatury do wyświetlania klawiatur na ekranie.

Dołącz typy wejściowe numer , e-mail , tel , URL. i data , a wejście klawiatury na urządzeniach mobilnych zaktualizuje, aby ułatwić użytkownikowi wypełnienie formularza. Nie wymaga dodania dodatkowych klas do wejść formularzy stylu, wszystko, co musisz zrobić, to użyć poprawnych typów wejściowych HTML5:

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

05. Użyj Flexbox.

Spójrzmy na to - trudno jest stworzyć responsywny układ w HTML. Większość z nas walczyła z tym w pewnym momencie. Chociaż zawsze można udostępnić układy zgodnie z oczekiwaniami przy użyciu specjalistycznych technologii, proces nigdy nie był łatwy.

Technologie radzenia sobie z ustrukturyzowanymi układami przybyły i przeszły przez lata: Deweloperzy korzystali z ramek HTML, tabele HTML, układy oparte na pływakach, a ostatnio, w różnych systemach sieci spopularyzowanych przez CSS ramy, takie jak Bootstrap. .

Ale wraz z pojawieniem się modelu pola elastycznego HTML (lub Flexbox. ) HTML w końcu uzyskał bogaty silnik formatowania skrzynek, który odnosi się do złożonych układów, w tym formularzy HTML.

Flexbox daje nam dużą elastyczność szybkiego budowania pięknych form. Kluczem do zrozumienia o flexbox jest to, że jest to narzędzie do manipulacji kontenerów: ma na celu zapewnienie bardziej skutecznego sposobu ustalenia, wyrównania i rozpowszechniania przestrzeni wśród przedmiotów w pojemniku, nawet jeśli ich rozmiar jest nieznany i / lub dynamiczny (stąd słowo "flex").

Co ciekawe jest to, że Flexbox daje nam dużą elastyczność szybkiego budowania naszego formularza bez korzystania z żadnych zapytań multimedialnych. Dodatkowo wszystkie obecne przeglądarki to obsługują.

Nasz Przewodnik po projektantów internetowych do flexbox Artykuł mówi ci więcej, ale na razie róbmy trochę praktyki i dowiedz się, jak skorzystać z flexbox, aby stworzyć formularz responsywny. Najpierw pierwsze rzeczy, zdefiniujmy strukturę HTML dla naszego formularza:

 Formularz;
& lt; ul Class = "FLEX" & GT;
& LT; LI & GT; & LT; & LT; & LT; Imię i LT; / Label & GT; & LT; Typ wejścia = "Tekst" Id = "Pierwsze nazwisko" Placeholder = "Wpisz swoje imię tutaj" & GT; / LI & GT;
& LT; LI & LT; & LT; & LT; Name Name & LT; / LI & GT;
& LT; LI & GT; & LT; & LT; Email & LT;
& LT; LI & GT; & LT; & LT; Telefon i LT; / Label & GT; & LT; Typ wejścia = "Tel" ID = "Telefon" Placeholder = "Wpisz telefon tutaj" & GT;
& LT; LI & LT; & LT; & LT; Message & LT; / Label & GT; & LT; rzadki tekstowe = "6" ID = "Message" Settholder = "Wpisz swoją wiadomość tutaj" & GT; LI & GT;
& LT; LI & GT; & LT; Przycisk Typ = "Prześlij" & GT; Wyślij / Przycisk & GT; & LT; / LI & GT;
& lt; / ul & gt;
& LT; / Form & GT;

Zauważ, że każda z elementów listy w naszym formularzu ma klasę zgiąć . Ta klasa identyfikuje pojemnik Flex w naszym formularzu. Jednym z dużych korzyści płynących z flexbox jest jego zdolnością do używania dowolnego elementu HTML do zdefiniowania jego pojemników i elementów.

Możesz zastosować flexbox stylizacji do dowolnego elementu HTML, co oznacza, że można łatwo wygenerować i odpłynąć elementy niezależnie od siebie. Należy mieć na uwadze, że Flexbox jest tylko mechanizmem stylizacji, co oznacza, że możesz dodać i usunąć go woli.

Zidentyfikujmy pojemniki Flex w naszych CSS. Dodatkowo, chcemy pionowo środkować elementy flex w poprzek osi. Jest dość łatwo określić, że po prostu musimy skonfigurować prostą zasadę CSS:

 .Flex li {
Wyświetlacz: Flex;
Flex-Wrap: Wrap;
Wyrównuj przedmioty: Centrum;
}

Następnym krokiem jest określenie szerokości dla elementów Flex. Główne wymagania:

Etykiety powinny być co najmniej 100px i najwyżej 200px
Tworzą elementy, które przychodzą po etykietach powinny być co najmniej 200px

Co nam daje? Każda etykieta i powiązany element formularza zostanie wyświetlony na jednym poziomym wierszu, gdy szerokość formularza wynosi co najmniej 300px (pamiętaj, używamy tutaj etykiet prawnych).

 .flex & gt; LI & GT; etykieta {
FLEX: 1 0 100PX;
Max-szerokość: 200px;
}
.flex & gt; LI & GT; Etykieta + * {
FLEX: 1 0 200PX;
}

Wreszcie, dla przycisku Prześlij, który jest również elementem Flex, definiujemy kilka podstawowych stylów:


Marża: Auto;
Wyściółka: 22px 46px;
}

Jak widać, z minimalnym znacznikiem i mocą flexbox zbudowaliśmy responsywny formularz.

Z większymi użytkownikami przewożących urządzeń mobilnych, ważne jest, aby dostarczyć przyjazne dla użytkownika doświadczenie na dowolnym urządzeniu. Kluczowym punktem jest dostosowanie do potrzeb użytkownika i możliwości urządzenia.

Ten artykuł został pierwotnie opublikowany w wydaniu 287 z magazyn netto. , Magazyn dla profesjonalnych projektantów stron internetowych i programistów - oferujących najnowsze nowe trendy internetowe, technologie i techniki. Subskrybuj netto tutaj.

Powiązane artykuły:

Twórz responsywne formy i stoły
Zacznij od dostępności internetowej
7 Świetne narzędzia do testowania reagujących projektów stron internetowych

Jak zaprojektować responsywne i agnostyczne formy

01. Projektowanie pionowego przewijania

02. Umieść etykiety nad polami

03. Użyj celów Tap

04. Użyj pola formularza HTML5

05. Użyj Flexbox.

Jak - Najpopularniejsze artykuły

Zbuduj szybki reaktywny blog z svelte i sapper

8 Cechy CSS State-the-art (i jak ich używać)

Zbuduj układy adaptacyjne bez zapytań multimedialnych

Dodaj wsparcie wielojęzyczne do kątowej

Zacznij od Express.js

Wyostrzyć modelowanie twardego powierzchni w 3DS max

Jak narysować refleksje metalowe

Utwórz postać z silną pozą w Photoshopie

Kategorie