Kuinka suunnitella reagoivia ja laitteiden agnostisia muotoja

Sep 11, 2025

Miten tehdään

Olipa kyseessä kirjautumisvirta tai monikanavainen askel, muodot ovat yksi digitaalisen tuotesuunnittelun tärkeimmistä osista - joten sinun on suunniteltava ne, jotta ne toimivat tehokkaasti mobiililaitteissa.

Näin voit suunnitella lomakkeita mobiililaitteille, mukaan lukien nopea tarkastelu Kuinka käyttää Flexboxia .

01. Suunnittelu pystysuuntaiseen vieritykseen

A single column layout works better — Yksittäinen sarake asettelu toimii paremmin

Riippumatta laitteen koosta, helpoin tapa suorittaa lomake on lineaarisessa muotissa. Useita sarakkeita häiritsevät käyttäjän vauhtia (käyttäjät todennäköisesti tulkitsevat kentät epäjohdonmukaisesti, mikä on negatiivinen tekijä käytettävyyden kannalta) ja voi johtaa käyttäjille, jotka tarvitsevat turvautua horisontaaliseen vieritykseen.

Kun muodot, sinun on suunniteltava merkinnät yhdellä sarakkeessa: Jos lomake on yhdellä sarakkeessa, polku päättyy on suora viiva alas sivulle.

02. Aseta etikettejä kenttien yläpuolelle

Place labels above form fields — Aseta etikettejä lomakkeiden kenttien yläpuolella

Etiketit kertovat käyttäjille, mitä vastaavat syöttökentät tarkoittavat. Kun valitset, missä asetat tarrat, sinulla on kaksi vaihtoehtoa: vasemmanpuoleinen tai huippuluokan.

Vasemmanpuoleiset tarrat toimivat hyvin, jos lomake valmistuu työpöydälle tai tablettia. Ne ovat kuitenkin kauhea ratkaisu mobiililaitteisiin, joissa on rajoitettu näytön kiinteistö. Koska vasemmanpuoleiset tarrat on istuttava ennen kentällä, kapea näyttö lähtee hyvin vähän tilaa itse kentälle - varsinkin jos laite on pystytilassa. Tämä luo kaksi vakavaa käytettävyyttä:

Lomake-kenttä ei ole riittävän leveä, jotta käyttäjä voi näyttää käyttäjän koko syötteen, mikä tekee niistä todennäköisemmin vääriä vastauksiaan ja johtavat virheellisempiin muodoihin
Kun käyttäjälle ilmoitetaan, että ne ovat antaneet virheellisiin tietoihin, niillä voi olla vaikea tarkkailu ja korjata ongelma, koska ne eivät pysty näkemään koko virheellistä tuloa

Etiketin asettaminen lomakkeen yläpuolelle, kun käyttäjä selaa mobiililaitteesta, varmista, että käyttäjät voivat nähdä maksimaalisen leveyden syöttää yksityiskohdat, koska sinun ei tarvitse käyttää mitään etikettiä.

Tarrojen kirjoittaminen syöttökenttien yläpuolelle tekee myös paljon helpompaa kirjoittaa selkeitä ja merkityksellisiä kenttätarvikkeita, koska et rajoitu yhteen tai kaksi sanaa.

03. Käytä kosketustavoitteita

Napauta Tavoitteita on helppokäyttöinen riippumatta siitä, mikä koko laite näytetään. Suuremmat tavoitteet (syöttökentät ja painikkeet) ovat helpommin käyttäjille, joilla on alhaisempi kätevä, onko kyseessä pysyvä tila tai tilapäinen ympäristö.

Tällä hetkellä suurin tavoitekoko on kosketuslaitteille, joten sinun täytyy suunnitella kosketus-ensin. Tämä varmistaa, että käyttäjien ei tarvitse zoomata kirjoittamaan tekstiä tai valitse vaihtoehto. Nukattavien alueiden tulisi seurata rasvaa sormen sääntöä eikä ympäröivillä alueilla. Keskimääräinen ihmisen sormenpala on 10 x 14 mm ja keskimääräinen sormenpää on 8-10 mm, jolloin 10 x 10 mm hyvä vähimmäiskoukut.

Mutta paitsi jos napaustavoite on oikein koko, sinun on myös varmistettava, että useiden TAP-tavoitteiden välillä on riittävästi tilaa. Itse asiassa, jos saat "Tap Tavokoko" -virheen Mobile SEO -työkaluilla, se on usein siksi, että TAP-tavoitteet ovat liian lähellä toisiaan, eikä varsinaista napauta kohde on liian pieni.

Se voi olla vaikeaa lukea sisältöä mobiililaitteilla, joten panosten 100% ja tekstin varmistaminen on vähintään 16px (1em), tekee suuren eron. Tällä tavoin vaadittujen tietojen lukeminen ei vaadita purppuran zoomausta tai ylimääräistä vieritystä.

04. Käytä HTML5-lomakkeita

Mobiililaitteet tarjoavat mukautettuja ohjelmiston näppäimistöjä eri syöttötyypeille ja HTML5-lomakkeiden kentät ovat yksinkertaisin tapa parantaa lomakkeiden käyttökokemusta. Nämä syöttötyypit antavat vinkkejä selaimeen siitä, millaista näppäimistöasettelua näytetään näytön näppäimistöihin.

Sisällytä syötetyypit määrä , sähköposti , puh , url ja Päivämäärä ja mobiililaitteiden näppäimistön syöttö päivittää, jotta käyttäjä voi täyttää lomakkeen. Se ei vaadi sinua lisäämään ylimääräisiä luokkia tyyliin lomakkeisiin, sinun tarvitsee vain käyttää voimassa olevia HTML5-syöttötyyppejä:

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

05. Käytä Flexboxia

Katsotaanpa se - on vaikea luoda reagoiva asettelu HTML: ssä. Useimmat meistä ovat kamppaille tämän kanssa toisessa vaiheessa tai toisessa. Vaikka se on aina ollut mahdollista tehdä ulkoasuja käyttäytyä odotetusti erikoistuneiden teknologioiden avulla, prosessi ei ole koskaan ollut helppoa.

Teknologiat, joilla käsitellään strukturoituja asetteluja, ovat tulleet ja menneet vuosien varrella: kehittäjät ovat käyttäneet HTML-kehyksiä, HTML-taulukoita, float-pohjaisia asetteluja ja viime aikoina CSS-kehyksiä, kuten CSS-kehyksiä Bootstrap .

Mutta Advent of the HTML-joustava laatikkomalli (tai Flexbox ), HTML on vihdoin saanut runsaan laatikon muotoilun moottorin, joka käsittelee monimutkaisia asetteluja, mukaan lukien HTML-lomakkeet.

Flexbox antaa meille suurta joustavuutta nopeasti kauniiden lomakkeiden rakentamiseen. Tärkein asia ymmärtää Flexboxista on se, että se on kontin manipulointityökalu: sen tavoitteena on tarjota tehokkaampi tapa määrittää, kohdistaa ja jakaa tilaa konttikuljetuksiin, vaikka niiden koko on tuntematon ja / tai dynaaminen (siis dynaaminen) Word 'Flex').

Mielenkiintoista on, että Flexbox antaa meille suurta joustavuutta muotoa nopeasti käyttämättä mediakyselyjä. Lisäksi kaikki nykyiset selaimet tukevat sitä.

Meidän Web Designerin opas Flexboxiin Artikkeli kertoo sinulle enemmän, mutta nyt tehdä joitakin käytäntöjä ja oppia hyödyntämään Flexboxia reagoivan muodon luomiseksi. Ensimmäiset asiat ensin määritellään HTML-rakenne lomakkeellemme:

 & lt; muoto & gt;
& lt; ul class = "flex" & gt;
& lt; li & gt; & lt; etiketti = "etunimi" & gt; etunimi & lt; / etiketti & gt; & lt; syöttötyyppi = "Teksti" ID = "First-name" Placeholder = "Anna etunimi tänne" & gt; / li & gt;
& lt; li & gt; & lt; etiketti = "Viimeinen nimi" & gt; sukunimi & lt; / etiketti & gt; & lt; syöttötyyppi = "Teksti" ID = "Viimeinen nimi" Placeholder = "Anna sukunimi tähän" & gt; & lt; / li & gt;
& lt; li & gt; & lt; etiketti = "email" & gt; sähköposti & lt; / etiketti & gt; & lt; syöttötyyppi = "email" id = "Sähköposti" Placeholder = "Anna sähköpostiosoitteesi tähän" & gt; & lt; / li & gt;
& lt; li & gt; & lt; etiketti = "Puhelin" & gt; puhelin & lt; / etiketti & gt; & lt; syötetyyppi = "TEL" ID = "Puhelin" Placeholder = "Anna puhelimesi täällä" & gt; & lt; li & gt;
& lt; li & gt; & lt; etiketti = "viesti" & gt; viesti & lt; / etiketti ja gt; Li & Gt;
& lt; li & gt; & lt; button tyyppi = "Lähetä" & gt; Lähetä & lt; / button & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / form & gt;

Huomaa, että jokaisella lomakkeellamme olevasta luettelosta on luokka taivuttaa . Tämä luokka tunnistaa Flex Containerin lomakkeellamme. Yksi Flexboxin suurista eduista on sen kyky käyttää minkä tahansa HTML-elementin määrittämään säiliöt ja elementit.

Voit käyttää Flexbox-muotoilua mihin tahansa HTML-elementtiin, mikä tarkoittaa, että voit helposti vapauttaa ja reflow elementtejä toisistaan riippumatta. Muista, että Flexbox on vain muotoilumekanismi, mikä tarkoittaa, että voit lisätä ja poistaa sen Will.

Tunnista Flex-kontit CSS: ssä. Lisäksi haluamme pystyy keskittää Flex-kohteet ylittäjän yli. On melko helppoa täsmentää, että meidän on vain perustettava yksinkertainen CSS-sääntö:

 .flex li {
Näyttö: Flex;
Flex-Wrap: Kääri;
Kohdista: Keski;
}

Seuraava vaihe on määrittää leveydet Flex-kohteille. Tärkeimmät vaatimukset:

Tarrojen tulisi olla vähintään 100px ja enintään 200px
Muodostavat elementit, jotka tulevat, kun tarrojen pitäisi olla vähintään 200px

Mitä tämä antaa meille? Jokainen etiketti ja siihen liittyvä lomake-elementti näkyy yhdellä vaakasuoralla rivillä, kun muodon leveys on vähintään 300px (muistaa, käytämme oikeanpuoleisia tarroja täällä).

 .Flex & GT; Li & Gt; etiketti {
Flex: 1 0 100px;
Max-leveys: 200px;
}
.Flex & GT; Li & Gt; etiketti + * {
Flex: 1 0 200px;
}

Lopuksi, sillä Lähetä-painike, joka on myös Flex-kohde, määrittelemme muutaman perustyyliin:

 .flex li painike {
Marginaali: auto;
Pehmuste: 22PX 46PX;
}

Kuten näet, minimaalinen merkintä ja Flexboxin voima, olemme rakentaneet reagoivan muodon.

Lisää käyttäjiä kuljettaa mobiililaitteita, on tärkeää toimittaa käyttäjäystävällinen kokemus kaikista laitteista. Keskeinen kohta on sopeutua sekä käyttäjän tarpeisiin että laitteen ominaisuuksiin.

Tämä artikkeli julkaistiin alun perin asiassa 287 Net-aikakauslehti ,Lehdenammatillinen web-suunnittelijatja kehittäjät-tarjoaa uusimmatuusi websuuntauksia,teknologioista ja tekniikoista. Tilaa Net täältä.

Aiheeseen liittyvät artikkelit:

Luo reagoivia muotoja ja taulukoita
Aloita Web Accessibility
7 Suuret työkalut reagoivien web-mallien testaamiseen

Kuinka suunnitella reagoivia ja laitteiden agnostisia muotoja

01. Suunnittelu pystysuuntaiseen vieritykseen

02. Aseta etikettejä kenttien yläpuolelle

03. Käytä kosketustavoitteita

04. Käytä HTML5-lomakkeita

05. Käytä Flexboxia

Miten tehdään - Suosituimmat artikkelit

Kuinka ladata Instagram-kuvat: Kaikki mitä tarvitset tietää

Perspectionin tekeminen

Affinity Designer: Kuinka käyttää vaikutuksia ja tyylit

Step-by-Step: Miten Mimic öljymaali Corel Painterissa

Affinity Designer: Kuinka käyttää pikselin persoona

Kuinka perustaa sivuston teeman CSS-muuttujien kanssa

Metallien heijastusten tekeminen

Kuinka tehdä herkullisia kuvioita lyijykynällä

Luokat