Mobiilialustan kehitys. jquery mobiililomake

Ongelma

Olet ladannut kuluraportin ja haluat näyttää sen johdolle. Tätä varten sinun on järjestettävä kirjanpitoerien tiedot - johdon kirjanpitoerien mukaan. Tiedät kuinka BU- ja CS-kohteet liittyvät toisiinsa, mutta tällaisen raportin manuaalinen laatiminen joka kerta kestää liian kauan.

Ratkaisu

Harkitsemme Tämä tapaus jatkona edelliselle. Kuvittele, että olet luonut seuraavan hakuteoksen Excelissä:

Kuva 2.1. Käsikirja: BU- ja CS-artikkelien kartoitus

Vasemmalla on kustannuserä (BU), oikealla on johdon kirjanpidon erä (MC). Samalla on tärkeää, että ensimmäisen sarakkeen kustannuserä esiintyy vain kerran, muuten kartoitusmekanismi ei toimi oikein.

(Muuten, englanninkielinen sana mapping käännetään kartoitukseksi tai kirjeenvaihdoksi, joten hakuteos sisään tässä tapauksessa- se on jotain yleissääntö miten BU-artikkelit löytävät heijastuksensa CU-artikkelissa).

Kuva 2.2. Tasainen taulukko: kuluraportti (tililtä 20 Liikevaihdot)

Huomioikaa, että 7. sarakkeessa ilmestyi sarake "Artikla UU". Jokaisen kustannuserän kohdalle laitamme johdon kirjanpidon erän. Tämä voidaan tehdä manuaalisesti, mutta on paljon kätevämpää käyttää tätä työkalua:

Kuva 2.3. Tasainen taulukko: kuluraportti (tililtä 20 Liikevaihdot)

Sivujen nimet on merkitty lomakkeen alareunaan: "Main" on litteä taulukko, joka sisältää kustannustiedot (kuva 2.2), "ref" on hakuteos (kuva 2.1).

Sarakkeiden numerot on ilmoitettu lomakkeen yläosassa. Joten tässä tapauksessa, jos hakemiston sarakkeiden 1 ja pääsivun 3 tiedot ovat samat, hakemiston 2. sarakkeen tiedot kopioidaan pääsivun 7. sarakkeeseen.

Tässä muodossa niitä on myös monia lisävaihtoehtoja. Voit esimerkiksi ottaa käyttöön valintaruudut "Attribuutti #2" ja "Attribuutti #3", jolloin tietojen siirtäminen hakemiston sarakkeesta 2 pääsivun sarakkeeseen 7 on mahdollista, jos hakemisto ja pääsivu vastaavat kahta tai jopa kolme yksityiskohtaa kerralla.

Tämän yksinkertaisen toimenpiteen seurauksena pivot-taulukko voidaan rakentaa koko rivi erilaisia ​​analyyttisiä raportteja, joissa yhdessä osiossa on analyytikko "Artikla UU". Esimerkiksi näin:

Kuva 2.4. Venttiililiikkeen kustannusraportti

Kartoitus vs. VLOOKUP()

Monet käyttäjät tuntevat VLOOKUP()-funktion ja käyttävät sitä tällaisissa tilanteissa. VLOOKUP()-funktio toimii kuitenkin vain hyvin pieniä määriä dataa, kun annettua muotoa pärjää hyvin Excel-taulukoiden käsittelyssä, vaikka viitekirjassa olisi vaikkapa 5000 riviä ja pääsivulla 300 000 riviä. Yritä tarkistaa, niin näet, että VLOOKUP () epäonnistuu sellaisilla taltioilla. Lisäksi VLOOKUP()-funktio kuormittaa Exceliä merkittävästi ja pakottaa sen suorittamaan suuria määriä laskelmia. Kartoituslomake välttää tämän haitan: se suoritetaan kerran, kestää muutaman sekunnin (suurilla minuuttimäärillä), ja sen jälkeen ei lisäkuormia Excel-tiedostoa ei enää luoda.

Edellisessä osassa käsiteltiin suhdetyyppejä (yksi yhteen, yksi moneen, monta moneen) sekä yksi luokka Book ja sen kartoitusluokka BookMap. Toisessa osassa päivitämme Kirja-luokan, luomme loput luokat ja niiden väliset suhteet, kuten edellisessä luvussa on esitetty Tietokantakaaviossa, joka sijaitsee alaotsikon 1.3.1 Suhteet yläpuolella.

Luokkien koodit ja kartoitukset (Kommentein)

Luokan kirja

Julkinen luokkakirja ( //Ainutlaatuinen tunniste public virtual int Id ( get; set; ) //Nimi julkinen virtuaalinen merkkijono Nimi ( get; set; ) //Kuvaus julkinen virtuaalinen merkkijono Kuvaus ( get; set; ) //Science Fiction Score public virtual int MfRaiting ( get; set; ) //Sivunumerot public virtual int PageNumber ( get; set; ) //Kuvalinkki julkinen virtuaalinen merkkijono Kuva ( get; set; ) //Kirjan saapumispäivämäärä (uutissuodatin!) julkinen virtuaalinen DateTime Tulot silloin on parempi muuntaa ne julkiseksi virtuaaliseksi ISet-kokoelmaksi Tyylilajit ( get; set; ) //Sarja (Monet yhteen) julkinen virtuaalisarja ( get; set; ) //Mieli ja muut (yksi-yhdelle) yksityinen Mind _mind; public virtual Mind Mind ( get ( return _mind ?? (_mind = new Mind()); ) set ( _mind = arvo; ) ) //Kirjoittaja (Monesta moneen) julkinen virtuaalinen ISet Tekijät ( get; set; ) //Alustamme etukäteen, jotta tyhjää poikkeusta ei tapahdu. public Book() ( //Järjestämätön joukko (kaksi täsmälleen samaa riviä ei voi olla samassa taulukossa, muuten se valitsee toisen ja jättää toisen huomioimatta) Genres = new HashSet (); Tekijät = uusi HashSet (); ) ) // Kirja-luokan kartoitus julkinen luokka BookMap: ClassMap ( julkinen Kirjakartta() ( Id(x => x.Id); Kartta(x => x.Name); Kartta(x => x.Description); Kartta(x => x.MfRaiting); Kartta(x = > x.Sivunumero);Kartta(x => x.Kuva);Kartta(x => x.TuottoPäivä); //Monesta moneen -suhde HasManyToMony(x => x.Genres) //Cascading Rules All - When objekti tallennetaan, päivitetään tai poistetaan, tarkistetaan ja //kaikki riippuvat objektit luodaan/päivitetään/lisätään.Cascade.SaveUpdate() //Välitaulukon nimen PITÄÄ olla sama kuin Genre-luokan! > x.Authors) .Cascade.SaveUpdate() .Table("Book_Author"); //Monet yhteen -suhde Viitteet(x => x.Series); //Yksi yhteen -suhde. Pääluokka. HasOne(x => x .Mieli).Cascade.All().Rajoitettu(); ) )

Julkinen luokka Tekijä ( public virtual int Id ( get; set; ) //Etunimi public virtual string Nimi ( get; set; ) //Biografia public virtual string Biografia ( get; set; ) //Kirjat julkinen virtuaalinen ISet Kirjat ( get; set; ) //Alusta tekijät public Author() ( Books=new HashSet (); ) ) // Tekijä Mapping public class TekijäMap: ClassMap ( julkinen Tekijäkartta() ( Id(x => x.Id); Kartta(x => x.Name); Map(x => x.Biography); //Monesta moneen -suhde HasManyToMany(x => x .Books) //Kaskadisäännöt Kaikki - Kun objekti tallennetaan, päivitetään tai poistetaan, kaikki riippuvat objektit tarkistetaan ja luodaan/päivitetään/lisätään.Cascade.All() //Kokoelman omistaa suhteen toinen pää (Kirja) ja tallennetaan ensin. .Inverse() //Välitaulukon nimen TÄYTYY olla sama kuin Book-luokan! .Table("Kirjan_tekijä"); ) )

Luokan genre

Public class Genre ( public virtual int Id ( get; set; ) //Genren nimi public virtual string Nimi ( get; set; ) // Englanninkielinen otsikko genre julkinen virtuaalinen merkkijono EngName ( get; set; ) //Kirjaa julkinen virtuaalinen ISet Kirjat ( get; set; ) //Alusta kirjat public Genre() ( Kirjat=new HashSet (); ) ) //Genre Mapping julkinen luokka GenreMap: ClassMap ( public GenreMap() ( Id(x => x.Id); Map(x => x.Name); Map(x => x.EngName); //Mone-moneen-suhde HasManyToMany(x => x .Books) //Kaskadisäännöt Kaikki - Kun objekti tallennetaan, päivitetään tai poistetaan, kaikki riippuvat objektit tarkistetaan ja luodaan/päivitetään/lisätään.Cascade.All() //Kokoelman omistaa suhteen toinen pää (Kirja) ja tallennetaan ensin ..Inverse() //Välitaulukon nimen PITÄÄ olla sama kuin Book-luokan!.Table("Kirjan_laji"); ) )

Luokan mielipide:

Julkinen luokka Mind ( public virtual int Id ( get; set; ) //Minun mielipiteeni julkinen virtuaalinen merkkijono MyMind ( get; set; ) //Fantlabin mielipide julkinen virtuaalinen merkkijono MindFantLab ( get; set; ) //Varaa julkinen virtuaalinen kirjakirja ( get; set; ) ) //Mapping Mind julkinen luokka MindMap:ClassMap ( julkinen MindMap() ( Id(x => x.Id); Kartta(x => x.MyMind); Map(x => x.MindFantLab); //Yksi yhteen suhde HasOne(x => x.Book ) ) )

Luokkasykli (sarja):

Public class Series ( public virtual int Id ( get; set; ) public virtual string Name ( get; set; ) //Loin IListin, en ISetin, koska kirjan lisäksi Series ei liity mihinkään muuhun, vaikka voit tehdä sen ja ISet julkinen virtuaalinen IList Kirjat ( get; set; ) //Alusta kirjat. public Series() ( Kirjat = uusi lista (); ) ) julkinen luokka SeriesMap: ClassMap ( public SeriesMap() ( Id(x => x.Id); Map(x => x.Name); //Yksi moneen suhde HasMany(x => x.Books) ////Omistaja kokoelma on .relaation toinen pää (Kirja) ja se tallennetaan ensin..Käänteinen() ) )

Pieni selitys
julkinen virtuaalinen ISet Genret ( get; set; )
julkinen virtuaalinen ISet Tekijät ( saada; asettaa; )

Miksi ISet , eikä esimerkiksi monille IListille tuttu ? Jos käytämme IListiä ISetin sijaan ja yritämme ajaa projektia, emme huomaa paljon eroa (taulukoita ja luokkia luodaan). Mutta kun kirjaluokkaan LeftLiitymme samaan aikaan Genre- ja Authors -taulukkoon ja jopa yritämme näyttää ei-toistuvia tietueita Book-taulukosta (Distinct Book.Id) näkymään (View), Nhibernate heittää poikkeuksen ja virhe.
Useita laukkuja ei voi noutaa samanaikaisesti.
Tällaisissa tapauksissa käytämme ISetiä, varsinkin kun joukot on tarkoitettu tähän (ne huomioivat päällekkäiset tietueet).

Monelta moneen -suhde.

NHibernatessa on "master"-taulukon käsite. Vaikka "Kirja"- ja "Tekijä"-taulukoiden monista moneen -suhde on samanlainen (kirjailijalla voi olla useita kirjoja, kirjalla voi olla useita kirjoittajia), Nhibernate vaatii ohjelmoijalta määrittämään taulukon, joka tallennetaan toiseksi (on a . inverse()), eli ensin luodaan/päivitetään/poistetaan tietue Kirja-taulukkoon ja vasta sitten Tekijä-taulukkoon.
Cascade.All tarkoittaa kaskaditoimintojen tallentamista, päivittämistä ja poistamista. Eli kun objekti tallennetaan, päivitetään tai poistetaan, kaikki riippuvat objektit tarkistetaan ja luodaan/päivitetään/lisätään (Ps. Voidaan kirjoittaa Cascade.All -> .Cascade.SaveUpdate().Cascade.Delete() sijaan.
Method.Table("Kirjan_tekijä"); luo "väli" taulukon "Book_Author" tietokantaan.

Monien välinen suhde, yksi moneen.

.Constrained()-metodi kertoo NHibernatelle, että Book-taulukon tietueen on vastattava Mind-taulukon tietuetta (Mind-taulukon id:n on oltava sama kuin Book-taulukon id).

Jos aloitat projektin nyt ja katsot Bibilioteca-tietokantaa, näkyviin tulee uusia taulukoita jo muodostetuilla linkeillä.

Täytä seuraavaksi luodut taulukot tiedoilla...
Tätä varten luomme testisovelluksen, joka tallentaa tiedot tietokantaan, päivittää ja poistaa ne muuttamalla HomeControlleria seuraavasti (Kommentoimme tarpeettomia koodiosia):
public ActionResult Index() ( using (ISession session = NHibernateHelper.OpenSession()) ( using (ITransaction event = session.BeginTransaction())) ( //Luo, lisää var createBook = new Book(); createBook.Name = "Metro2033" LuoKirja.Description = "Post-apokalyptinen mystiikka"; createBook.Authors.Add(new Author ( Nimi = "Glukhovsky" )); createBook.Genres.Add(new Genre ( Nimi = "Post-apokalyptinen mystiikka" )); luoKirja .Series = uusi sarja ( nimi = "Metro" ); createBook.Mind = uusi mieli ( MyMind = "Post Apocalyptic Mystery" ); session.SaveOrUpdate(createBook); //Päivitä(ID) //var series = istunto. Saada (yksi); //var updateBook = session.Get (yksi); //updateBook.Name = "Metro2034"; //updateBook.Description = "Dystooppinen"; //updateBook.Authors.ElementAt(0).Name = "Glukhovsky"; //updateBook.Genres.ElementAt(0).Name = "Dystopia"; //updateBook.Series = sarja; //updateBook.Mind.MyMind = "11111"; //session.SaveOrUpdate(päivityskirja); //Poista (tunnuksen mukaan) //var deleteBook = session.Get (yksi); //session.Delete(deleteBook); tapahtuma.Sitou(); ) Genre genreAl = null; AuthorauthorAl = null; Sarja seriesAl = null; MindmindAl = nolla; var books = session.QueryOver () //JoinAlias(p => p.Genres, () => .JoinAlias(p => p.Tekijät, () => authorAl, JoinType.LeftOuterJoin) .JoinAlias(p => p .Series, () => seriesAl, JoinType.LeftOuterJoin) .JoinAlias(p => p.Mind, () => mindAl, JoinType.LeftOuterJoin) //Poistaa taulukon kirjan kaksoisnumeron. .TransformUsing(Transformers.Transformers. . Lista(); palauta Näytä(kirjat); ) )

Pieni selitys

1. var books = session.QueryOver () Valitse* Kirjasta;
2. .JoinAlias(p => p.Genres, () => genreAl, JoinType.LeftOuterJoin)- samanlainen kuin SQL-skriptin suorittaminen:
   VALITSE *KIRJASTA
   inner JOIN Book_Genre ON book.id = Kirja_Genre.Kirjan_id
   LEFT JOIN Genre PÄÄLLÄ Book_Genre.Genre_id = Genre.id
3. .TransformUsing(Transformers.DistinctRootEntity)- Samanlainen kuin SQL-komentosarjan suorittaminen: VALITSE erillinen Book.Id..., (poistaa päällekkäiset merkinnät samalla tunnuksella)

Yhdistysten tyypit
.JoinAlias(p => p.Genres, () => genreAl, JoinType.LeftOuterJoin)

1. LeftOuterJoin - valitsee kaikki tietueet vasemmasta taulukosta ( Kirja), ja liittää niihin sitten oikean taulukon tietueet ( Genre). Jos oikeanpuoleisesta taulukosta ei löydy vastaavaa merkintää, se näyttää tyhjänä
2. RightOuterJoin on LEFT JOINin vastakohta - valitsee kaikki tietueet oikeasta taulukosta ( Genre), ja sitten yhdistää vasemman taulukon tietueet ( Kirja)
3. InnerJoin - valitsee vain ne tietueet vasemmasta taulukosta ( Kirja), jolla on vastaava merkintä oikeasta taulukosta ( Genre) ja liittää niihin sitten tietueita oikeasta taulukosta

Muutetaan näkymä seuraavasti:

hakemistonäkymä

@malli IEnumerable @( Asettelu = tyhjä; )

@Html.ActionLink("Luo uusi", "Luo")

• Luonti- ja päivitystoiminnot päivittävät kaikki Kirja-taulukkoon liittyvät tiedot (poista Cascade="save-update" tai cascade="all" ja niihin liittyviä tietoja ei tallenneta)
• Poistettaessa tiedot poistetaan Book, Mind, Book_Author-taulukoista, eikä muuta dataa poisteta, koska niissä on Cascade="save-update"

Kartoitus luokille, joilla on perintöä.
Ja miten kartoittaa luokat, joilla on perintöä? Oletetaan, että meillä on tämä esimerkki:
//Kaksiulotteisten muotojen luokka public class TwoDShape ( //Width public virtual int Width ( get; set; ) //Height public virtual int Height ( get; set; ) ) //Class Triangle public class Kolmio: TwoDShape ( / / Tunnusnumero public virtual int Id ( get; set; ) //Kolmion tyyppi julkinen virtuaalinen merkkijono Tyyli ( get; set; ) )

Periaatteessa tässä kuvauksessa ei ole mitään monimutkaista, luomme johdetulle luokalle yksinkertaisesti yhden kuvauksen, eli kolmiotaulukon.
//Triangle Mapping julkinen luokka TriangleMap: ClassMap ( julkinen kolmiokartta() ( Id(x => x.Id); kartta(x => x.tyyli); kartta(x => x.korkeus); kartta(x => x.leveys); ) )
Sovelluksen käynnistämisen jälkeen seuraava (tyhjä) taulukko ilmestyy Biblioteca-tietokantaan

Tunnisteet: Lisää tunnisteita

Tämä artikkeli on ilmoitus uusista toiminnoista.
Ei ole suositeltavaa käyttää tämän artikkelin sisältöä uusien toimintojen oppimiseen.
Täysi kuvaus uusia toimintoja tarjotaan vastaavan version dokumentaatiossa.
Täydellinen luettelo muutoksista uusi versio löytyy v8Update.htm-tiedostosta.

Toteutettu versiossa 8.3.11.2867.

Jatkamme mobiilialustan kehittämistä lisäämällä siihen toiminnallisuutta, joka on jo saatavilla alustassa henkilökohtaiset tietokoneet. Lisäksi kehitämme erityisiä alustaominaisuuksia, jotka koskevat vain mobiililaitteita. Puhumme nyt joistakin tärkeimmistä parannuksista.

Ajastin

"Mobiili" ajastimen objektimalli ei ole muuttunut, mutta tapa, jolla käyttäjä on vuorovaikutuksessa ajastimen kanssa, on muuttunut, koska menetelmät tietojen syöttämiseksi mobiililaitteet erilaisia ​​kuin pöytätietokoneissa käytetyt.

Esimerkiksi, nopea muokkaus elementti suoritetaan yhdellä napsautuksella elementtiä. Pitkä painallus tuo esiin kontekstivalikon ja merkit, joiden avulla voit venyttää elementtiä. Vetäminen suoritetaan painamalla pitkään ja sitten liikuttamalla sormea.

Koko suunnittelijan vieritys tapahtuu vierittämällä yhdellä sormella, zoomaus vetämällä kahdella sormella ja niin edelleen.

"Mobiili" ajastimen nykyisen toteutuksen ominaisuus on, että se ei vielä tue tulostusta.

muotoiltu asiakirja

Toinen "uusi" objekti, jonka olemme lisänneet mobiilialustalle, on Muotoiltu asiakirja. Käyttäjän näkökulmasta "mobiili" muotoiltu dokumentti eroaa vain siinä, että sen muokkauspaneeli on upotettu itse säätimeen ja se on virtuaalisen näppäimistön looginen osa. Kehittäjänä sinun ei tarvitse lisätä sitä erikseen kokoonpanoon. Muokkauspaneeli näyttää erilaiselta mobiililaitteen tyypistä (puhelin tai tabletti) riippuen.

"Mobiili"-lomakkeen esikatselu konfiguraattorissa

Lisäsimme konfiguraattoriin lomaketta kehitettäessä mahdollisuuden nähdä, miltä lomake näyttää mobiililaitteella.

Komentopaneelista voit valita käyttöliittymävaihtoehdon Mobiililaite, ja katso, miltä lomake näyttää vakiosuunnassa.

Voit myös kääntää mobiililaitettasi täällä.

Lisäksi olemme antaneet sinulle mahdollisuuden valita suuri numero yleisiä laitteita.

Lisäksi voit tarkastella "mobiililomakkeita" kolmessa eri mittakaavassa:

• Pikselista pikseliin- kun mobiililaitteen näytön pikseli vastaa ikkunan näytön pikseliä esikatselu;
• Todellinen koko - kun mobiililaitteen mitat näytöllä vastaavat laitteen geometrisia mittoja;
• Ikkunan koon mukaan- kun näytön asteikko on valittu siten, että "mobiili"-näyttöalue mahtuu esikatseluikkunaan ilman vieritystä.

Laskentataulukkoasiakirjojen eräkäsittely

Olemme lisänneet mobiilialustalle useita uusia objekteja, joiden avulla voit luoda paketteja näytetyistä asiakirjoista. Tämä toiminto on samanlainen kuin henkilökohtaisten tietokoneiden alustassa. Näin voit nyt esimerkiksi lähettää useita asiakirjoja tulostettavaksi kerralla.

Toimitettujen ilmoitusten kehitys

Olemme ottaneet käyttöön tuen Windows Push Notification Service -palvelulle (WNS, Windows Notification Services). Nyt voit käyttää toimitettujen ilmoitusten toimintoja ajaessasi mobiilisovellusta Windows-perheen alustoilla.

Suunnittelimme uudelleen myös toimitetun ilmoituksen lähettämisen virheenkäsittelyjärjestelmän. Tilanteissa, joissa poikkeus on aiemmin aiheuttanut virheen, se heitetään nyt arvona, jonka voit käsitellä sisäänrakennetulla kielellä.

Laitteistokiihdytys Android-käyttöjärjestelmässä

Android-käyttöjärjestelmän versioissa 4.4.2 ja uudemmissa mobiilialustassa käytetään nyt laitteistokiihdytystä. Tämä mahdollisti käyttöliittymän renderöintinopeuden lisäämisen 1,5 - 3 kertaa.

Kysy keneltä tahansa aikuiselta, mitä ilman hän ei voi poistua kotoa, niin he vastaavat sinulle: avaimet, lompakko, matkapuhelin. Mobiililaitteiden valmistajien kasvun ja uusien ja parannettujen mallien julkaisun myötä on yksinkertaisesti mahdotonta olla antautumatta tälle kasvavalle trendille.

Vuoden 2014 tiedot osoittavat, että pelkästään Yhdysvalloissa 90 %:lla aikuisista on matkapuhelin, joista 58 % on älypuhelinten omistajia. 42 % amerikkalaisista omistaa tabletteja. Raportissaan eMarketer ennusti, että vuoden 2014 loppuun mennessä ihmiset käyttävät maailmanlaajuisesti noin 1,75 miljardia älypuhelinta.

Nämä luvut vain vahvistavat sen, että mobiililaitteet ovat nykyään muuttuneet luksustuotteista päivittäisiksi tarpeiksimme. Jos ennen puhelimet olivat vain kommunikaatioväline, niin nyt luotamme niihin töissä, rentoutuessamme tai ostoksilla käydessämme.

Lomakkeiden optimointi mobiililaitteille

Älypuhelimien yleistyminen ei vain tee ostosten tekemisestä helpompaa ostajille. Siitä on tullut tervetullut lisä jo kasvavalle verkkokaupan alalle. Ajan myötä online- ja offline-yritykset alkoivat ymmärtää tärkeyden matkapuhelimet, muiden myynninedistämiskanavien kanssa asiakkaiden hankkimisessa.

Lomakkeet palautetta niillä on valtava rooli verkkokaupoissa, ne ovat myös olennainen osa mobiilialustalla. Tavallisesti kohtaamme ne, kun teemme ostoksia ja sivusto kysyy meiltä tarkkoja tietoja, kuten nimeä, osoitetta, puhelinnumeroa ja tietoja luottokortti. Monien ostajien mielestä lomakkeiden täyttäminen on kuitenkin työlästä, mikä voi vähentää heidän kiinnostuksensa nollaan. Lisäksi verkko-ostajat kohtaavat yleensä ongelmia, kuten ajanpuutetta tai huonoa internetyhteyttä, mikä voi vaikuttaa negatiivisesti mobiilisivustosi tulosprosenttiin.

Alla on listattu 10 tapaa nopeuttaa asiakkaidesi mobiilitapahtumia ja tehdä heidän verkko-ostoskokemuksestaan ​​nautinnollinen.

1. Sisällytä lomakkeeseen vain tärkeimmät tiedot

Jos sinulla ei ole kärsivällisyyttä täyttää valtavaa määrää lomakkeita verkkosivulla, kun teet ostoksia verkossa, asiakkaasi kokevat todennäköisesti saman. Täydellisen lomakkeen ja yksinkertaisen lomakkeen täyttämisen välillä on ero ostaaksesi jotain verkkokaupasta. Jälkimmäiseen verrattuna lomakkeen ensimmäinen versio voi olla melko ärsyttävä, ja voit menettää asiakkaan, kun hän kyllästyy lomakkeen täyttämiseen, varsinkin jos hän näkee, että sinun on annettava kolme eri puhelinta.

Tee mobiiliverkkokaupankäynnistä kätevää tarjoamalla asiakkaillesi yksinkertainen mutta täydellinen tilauslomake. Pyydä käyttäjiltä vain todella tärkeitä tietoja, kuten koko nimeä, sähköpostiosoitetta, puhelinnumeroa, toimitustietoja ja luottokorttitietoja. Voit myös ottaa käyttöön avattavan luettelon osavaltioista tai maista, joihin lähetät, tai vielä parempaa, antaa sinun mobiilisovellus pyytää asiakkailta maantieteellistä sijaintia. Siten on mahdollista saada heidän osoitteensa nopeasti ja tarkasti.

2. Käytä tarrojen ja syöttökenttien korkeuden tasausta.

Älypuhelimissa on rajoitettu katselualue verrattuna tietokoneisiin, joten on tärkeää, että suunnittelet muodon, joka maksimoi kyseisen alueen. Yksi tapa tehdä tämä on käyttää pystysuora kohdistus lomakekenttiäsi varten. Näet, kun lomaketta käytetään vaakasuora kohdistaminen, on mahdollista, että kaikki tiedot eivät mahdu älypuhelimen näytölle ja tarra tai syöttökenttä voi kadota. Tällaiset tilauslomakkeet voivat näyttää ostajien silmissä hankalia, mikä voi vähentää heidän kiinnostuksensa.

Toisaalta, jos tarrat ja syöttökentät on järjestetty pystysuoraan, asiakkaiden on helpompi nähdä heti pyydetyt tiedot, mukaan lukien täytettävä. Tämä auttaa heitä olemaan varmoja kaupan turvallisuudesta. Tämän paikannustavan ansiosta ostajat eivät myöskään menetä yhtään syöttökenttää tai, mikä vielä pahempaa, täyttävät lomakkeen uudelleen.

Lisäksi se minimoi lomakkeiden visuaalisen sotkun. Painikkeet "Mikä se on" ja "Tiedot" voidaan sijoittaa sivustosi mobiiliversioon. Jos nämä painikkeet on asetettava lomakkeeseen, sijoita ne siten, että asiakkaat eivät häiritse ostosten tekemistä.

3. Käytä avattavia valikoita ja avattavia luetteloita

Toinen mobiililaitteen rajoitetun näkymän aiheuttama rajoitus on loputon vieritys, joka meidän on tehtävä nähdäksemme koko sivun tai täyttääksemme lomakkeen. Vaikka näytön vieritys on yleistä, älypuhelinten käyttäjät haluavat mieluummin nopeamman tavan tehdä ostoksia verkossa.

Avattavien valikoiden ja luetteloiden käyttäminen voi auttaa sinua vähentämään aikaa, jonka asiakkaat käyttävät lomakkeiden täyttämiseen. Sen sijaan, että pakottaisit ostajat valitsemaan valtavan määrän vaihtoehtoja, voit ryhmitellä yksittäisiä tuotteita luokkiin. Avattavat valikot ovat hyödyllisiä myös linkittäessäsi kuvauksia tärkeistä tuotteista, jotka haluat laittaa samalle sivulle. Muista, ettet aloita niiden kuvausta, kun valikkoa laajennetaan.

4. Käytä Adequate Choice Lists -luetteloita

Tapauksissa, joissa avattavat valikot tai valikot eivät toimi lomakkeissasi mobiilisivustolla, sinulla on kaksi loistavaa mobiililomakevaihtoehtoa: ennakoivan haun syöttökentät ja suljetut avattavat valikot.

Ennakoivan haun syöttökenttien avulla asiakkaasi voivat etsiä haluamaasi tuotetta tai palvelua avainsanoja ja luettelee myös kaikki samanlaiset tulokset. Tällainen muoto on ihanteellinen tapauksiin, joissa haun odotetaan olevan pitkä tai kun on useita tuotteita, jotka eivät sovi tiettyihin kategorioihin. Suljetut avattavat luettelot sen sijaan toimivat hyvin valikoiden tiettyjen kohteiden luetteloissa tietty järjestys, kuten aakkosjärjestyksessä tai kronologisessa järjestyksessä.

5. Helppo syöttö

Olet luultavasti törmännyt lomakkeiden syöttökenttiin sekä verkko- että mobiilisivustoilla. Joskus ne on jaettu 2-3 osaan, kuten nimi, osoite, puhelinnumero. Ja vaikka se toimii sivustoilla, heidän mobiiliversiot samanlaista käyttöä lomakkeet eivät aina ole sopivia.

Useimmiten syötteiden jakaminen edellyttää, että mobiiliasiakkaat täyttävät kaikki kolme (tai kaksi) syöttökenttää, jotta he voivat vastata vain yhteen tarraan. Jos aiot liioitella sen samassa muodossa, asiakkaasi voivat menettää kiinnostuksensa prosessia kohtaan. Lisäksi asiakkaat voivat nähdä syöttötietojen erottelun epäselvästi tai jopa hämmentää heitä. Kun suunnittelet lomakkeita mobiilialustoille, käytä yksinkertaisempia syöttökenttiä niiden erottamisen sijaan. Esimerkiksi sen sijaan, että sinulla olisi kaksi erillistä kenttää etu- ja sukunimelle, käytä yhtä. Tämä auttaa asiakkaitasi täyttämään lomakkeen nopeammin.

6. Muotoile lomakepainikkeet

"Vahvista"-painike on viimeinen askel verkkokaupoissa sekä lomakkeen tärkein painike. Jos on, sinun tulee järjestää se siten, että asiakkaasi pysyvät mukana lomakkeen täyttöprosessissa.

Tee lähetyspainikkeesta houkutteleva asettamalla sen leveydeksi 1/3 lomakkeesta tai maalaamalla se kirkkaalla värillä. Ja sen sijaan, että käyttäisit vain sanoja "Vahvista" tai "Lähetä", käytä kaunopuheisempia toimintakehotuksia, kuten "Rekisteröidy nyt" tai "Lähetä hakemus".

Älä kuitenkaan käytä liikaa kirkkaita värejä tai tehdä painikkeista liian liikuteltavia, koska se häiritsee asiakkaitasi napsauttamasta. Voit käyttää hienovaraista värinmuutosta tai osoitinta napin painalluksella, jotta asiakkaasi tietävät, että he ovat tehneet tapahtuman.

7. Aseta zoomaus kuvaportin sisällönkuvauskentillä

Mobiililaitteella selaaminen voi joko sopia asiakkaille tai he saattavat joutua jatkuvasti lähentämään sivua, mutta jos he tekevät niin vahingossa, he voivat eksyä sivulle. Voit hallita tätä lomakkeiden näkymän sisällönkuvauskentillä. Näin ostajasi voivat välttää sivun skaalaamisen vahingossa tai, mikä pahempaa, lomakkeen kokonaan unohtamisen.

8. Tarjoa mahdollisuus tallentaa tietoja

Ostokset matkapuhelimilla voi olla haastava tehtävä joillekin asiakkaille, koska on olemassa riski napsauttaa "Takaisin"-painiketta tai ladata sivu vahingossa uudelleen, ja jos kaikki täytetyt tiedot katoavat, ostajasi todennäköisesti kieltäytyy tapahtumasta. Voit välttää tämän mahdollisuuden antamalla asiakkaillesi vaihtoehdon "Avaa uudessa välilehdessä", kun he napsauttavat mitä tahansa linkkiä lomakkeen ulkopuolella.

Jos käyttäjät eivät voi enää palata edellisille sivuille, tee varoitusruutu, jossa on painikkeita, kuten "Hyväksyn", "OK" tai "Peruuta". Näin toimimalla voit kertoa asiakkaillesi, onko heidän tietojaan tallennettu sivustolle vai selaimeen, ja näin auttaa heitä päättämään kassalle siirtymisestä.

9. Auta asiakkaita seuraamaan edistymistään

Kaikki ostajat eivät ole kiinnostuneita täyttämään palautelomakkeita. Tässä tapauksessa sinun on hyödyllistä keksiä tapa näyttää asiakkaille, että he ovat melkein lopussa täyttäessään sen. Voit tehdä tämän asettamalla latauspalkin lomakkeen yläosaan tai käyttämällä yksinkertaista aikajanaa ja prosenttiosuuksia näyttääksesi missä ne ovat juuri nyt. Älä unohda rajoittaa näiden vaiheiden määrää säästääksesi asiakkaidesi aikaa.

10. Lataa lomake nopeasti

Toinen tekijä, jota sinun ei pidä unohtaa, on matkapuhelimen lomakkeen latausnopeus. Jos sivun latautuminen kestää hetken, asiakkaasi saattaa olla kiinni. Jo se tosiasia, että käyttäjäsi ovat saavuttaneet lomakkeen täyttämisen, osoittaa, että he ovat valmiita tekemään tilauksen. Älä petä heitä huonosti latautuvilla sivuilla. Lomakkeiden latausnopeus riippuu myös sivulle lisättävien elementtien määrästä, joten ole varovainen käyttäessäsi suuria kuvia.

Ja kuten aina, testaa lomakkeitasi kaikissa järjestelmissä ja laitteissa

Mobiililaitteiden ja niiden rajapintojen monimuotoisuus velvoittaa nykyään suunnittelemaan lomakkeita jokaiselle niistä. Varmista siis, että testaat lomakkeitasi vastaan eri tyyppejä mobiililaitteet, ottaen huomioon erot käyttöjärjestelmät, koot ja selaimet. Testauksen avulla voit paitsi parantaa lomakettasi, myös varmistaa, että se toimii kaikilla saatavilla olevilla laitteilla.

Tässä artikkelissa tarkastellaan joitain uusia HTML5-lomakeparannuksia ja analysoidaan, kuinka ne edistävät parannusta. käyttöliittymä kännykällä. Erityisesti näemme, kuinka lomakkeita voidaan laajentaa HTML5:n tarjoamilla lisäsyöttötyypeillä ja näyttää, mitä voit odottaa eri mobiiliselaimilla.

HTML-tyypit 5 Tulo

HTML5:ssä on joukko uusia syöttötyyppejä lomakkeille. Tämäntyyppiset syötteet mahdollistavat syötteiden paremman hallinnan ja validoinnin. Jotkut niistä ovat erityisen hyödyllisiä mobiilikäyttäjille joiden kanssa on usein vaikeuksia HTML-työtä syöttö. Täydellinen luettelo syöttötietotyypeistä on alla:

• väri - värivalinta
• päivämäärä - päivämäärän valitsin
• datetime - päivämäärän ja ajan valitsin
• sähköposti - sähköpostimaskin vahvistus
• numero - syötä numero
• alue - alueen liukusäädin
• haku — hakukenttä
• puhelinmaskin validointi
• aika — ajan valinta
• url - URL-osoitteen vahvistus

Tämä luettelo ei tietenkään ole täydellinen. Tämä ei sisällä standardin hyväksymiä tyyppejä, mutta niiden olemus ei ole vielä selvä. Tarkastelemme tässä artikkelissa suosituimpia ja tärkeimpiä yllä olevista tyypeistä esimerkkien kanssa.

1. Syöttötyypin väri

Jos tämän tyyppistä syöttöä tuetaan, käyttäjän selain käynnistää asiakaslaitteen sisäänrakennetun värinvalitsimen. Valittu väri esitetään vastaavassa RGB-heksadesimaaliarvossa.

Esimerkki työstä:

Ponnahdusikkunan tyyli riippuu selaimesta. Napsauta painiketta nähdäksesi kuinka se toimii.

Valitse värisi:

Valitettavasti, tuki tämän tyyppistä mobiiliselaimet jättää paljon toivomisen varaa. Kaikista olemassa olevista oikea näyttö löytyy vain Opera Mobilesta ja Chrome Androidista. Kaikki muut selaimet näyttävät tyhjän tekstikentän. Tämä kannattaa pitää mielessä. Vaihtoehtoisesti voit luonnostella paletin JS:ssä tai käyttää laajennuksia.

2. Syötä tyyppi päivämäärä

Tarjoaa kätevän päivämäärävalitsimen, jos selain tukee sitä.

Esimerkki työstä:

Päivämäärän valinta:

Huomaa, että syöttötyyppi on Date , samoin kuin valinnat päivämäärä-aika tyyppi ja datetime-local tarjoavat hyödyllisiä attribuutteja, arvoja, kuten min ja max , jotka voivat rajoittaa ja vahvistaa käyttäjän syötteitä. Osoitamme tämän alla.

Melkein kaikki selaimet tukevat HTML-syöttöpäivämäärää. Poikkeuksia ovat Opera Mini ja Android-oletusselain.

3. Syöttötyyppi datetime ja datetime-local

Tämä Syötteen tyyppi antaa käyttäjän määrittää päivämäärän ja kellonajan kätevä muoto. Jos tuettu, se hahmonnetaan laitteen alkuperäisenä päivämäärä/aika-widgettinä. Näiden syöttötyyppien ero on siinä, että ensimmäinen on sidottu maailmanaikaan, kun taas toinen ei sisällä mitään tietoa aikavyöhykkeestä.

Esimerkki työstä:

Päivämäärän ja kellonajan valinta:

Ei tueta IE Mobilessa ja Opera Minissä. Muissa suosituissa selaimissa (mobiili) tyyppi toimii enemmän tai vähemmän oikein, mutta virheet ja häiriöt eivät ole harvinaisia. Pidä myös tämä mielessä, äläkä unohda JavaScriptin varaosia.

4. Syötä tyyppi sähköposti

Tämä tyyppi ei vaadi esitystä. Monet ihmiset käyttävät sitä jo, ja lähes kaikki selaimet tukevat sitä.

Esimerkki työstä:

Syötä sähköpostiosoitteesi:

Ennen lähettämistä selain tarkistaa täytettyjen kenttien oikeellisuuden ja ilmoittaa virheellisestä syöttömuodosta. Laskenta perustuu seuraavaan lausekkeeseen (teksti)@(domain)

5. Syötä tyypin numero ja puh

Tämä on toinen tyyppi, joka ei vaadi paljon keskustelua. Mobiiliympäristössä se on kuitenkin erittäin hyödyllinen työkalu. Käytä sitä tapauksissa, joissa käyttäjälle esitetään vain numerosarja. Tässä tilanteessa hänelle tarjotaan käyttäjäystävällinen käyttöliittymä numeronäppäimistö.

Esimerkki työstä:

Arvon valinta:

Useimmissa selaimissa oletusalue on 0–100. Eli liukusäätimen vasemmanpuoleisin asento on 0 ja oikeanpuoleisin 100. Voit muuttaa aluetta min- ja max-määritteillä. Voimme myös asettaa askelarvon step-attribuutilla. Joten, jos haluat määrittää alueen 5–50, 5:n välein, käytämme:

Kaikkien tuki suositut selaimet paitsi Opera Mini.

7. Lomakkeen validointi

On erittäin kätevää asettaa erityisiä HTML-syöttömääritteitä syötteen vahvistamiseksi. Haluamme esimerkiksi luoda kentän, joka on täytettävä: