Formular mobil Jquery. Antet în partea de sus sau antet receptiv. Oferă posibilitatea de a salva date

Acest articol este un anunț despre noi funcționalități.
Nu este recomandat să folosiți conținutul acestui articol pentru a afla funcționalități noi.
Descriere completa o nouă funcționalitate va fi furnizată în documentația pentru versiunea corespunzătoare.
Lista plina schimbari in versiune noua este furnizat în fișierul v8Update.htm.

Implementat în versiunea 8.3.11.2867.

Continuăm să dezvoltăm platforma mobilă, adăugând funcționalități care sunt deja disponibile în platformă pentru calculatoare personale. În plus, dezvoltăm capabilități specifice ale platformei care sunt relevante doar pentru dispozitivele mobile. Vă vom spune acum despre unele dintre cele mai importante îmbunătățiri.

Programator

Modelul obiect al programatorului „mobil” nu s-a schimbat, dar s-a schimbat modul în care utilizatorul interacționează cu planificatorul, deoarece metodele de introducere a informațiilor pe dispozitivele mobile diferă de cele folosite pe computerele desktop.

De exemplu, editare rapidă elementul se realizează printr-un singur clic pe element. Apeluri de apăsare lungă meniul contextual, și la apariția unor markere care vă permit să întindeți elementul. Tragerea se face prin apăsare lungă și apoi mișcarea degetului.

Derularea întregului planificator se face prin defilarea cu un deget, mărirea cu două degete și așa mai departe.

O caracteristică a implementării actuale a programatorului „mobil” este că nu acceptă încă imprimarea.

Document formatat

Un alt obiect „nou” pe care l-am adăugat pe platforma mobilă este FormattedDocument. Din punctul de vedere al utilizatorului, un document formatat „mobil” diferă doar prin faptul că panoul său de editare este încorporat în controlul însuși și este o parte logică tastatura virtuala. Voi, în calitate de dezvoltatori, nu sunteți obligat să faceți acest lucru adăugare separată la configurație. Panoul de editare are tip diferitîn funcție de tipul dispozitivului mobil (telefon sau tabletă).

Previzualizarea formularului „mobil” în configurator

În configurator, la dezvoltarea unui formular, am adăugat posibilitatea de a vedea cum va arăta formularul dvs dispozitiv mobil.

În panoul de comandă puteți selecta o opțiune de interfață Dispozitiv mobil, și vedeți cum va arăta formularul în orientare standard.

Aici vă puteți roti dispozitivul mobil.


În plus, ți-am oferit posibilitatea de a alege un numar mare dispozitive comune.


În plus, puteți vizualiza formularele mobile în trei scări diferite:

  • Pixel la pixel- când un pixel al ecranului unui dispozitiv mobil corespunde unui pixel al ecranului ferestrei previzualizare;
  • Dimensiunea reală - când dimensiunea dispozitivului mobil de pe ecran se potrivește dimensiuni geometrice dispozitive;
  • După dimensiunea ferestrei- când scara de afișare este selectată în așa fel încât zona de afișare „mobilă” să se încadreze în fereastra de previzualizare fără derulare.

Procesarea în lot a documentelor din foile de calcul

Am adăugat o serie de noi obiecte pe platforma mobilă care vă permit să creați pachete de documente afișate. Această funcționalitate este similară cu cea găsită în platforma PC. Astfel, acum puteți, de exemplu, să trimiteți mai multe documente pentru tipărire simultan.

Dezvoltarea notificărilor livrabile

Am implementat suport pentru serviciul de notificare push Windows (WNS, Windows Notification Services). Acum puteți utiliza funcționalitatea notificărilor livrate atunci când rulați o aplicație mobilă pe platforme din familia Windows.

De asemenea, am reelaborat sistemul de gestionare a erorilor pentru trimiterea notificărilor livrate. În situațiile în care o eroare a fost aruncată anterior ca o excepție, acum este aruncată ca o valoare pe care o puteți gestiona în limbajul încorporat.

Accelerarea hardware în sistemul de operare Android

Pe versiuni sistem de operare Platforma mobilă Android 4.4.2 și o versiune ulterioară utilizează acum accelerare hardware. Acest lucru ne-a permis să creștem viteza de redare a interfeței de 1,5 – 3 ori.

Designer UX de la IBM Zoltan Collin.

La marcaje

Zoltan Collin

Formularele dropdown par a fi o alegere evidentă de design: sunt ușor și ieftin de creat, nu ocupă prea mult spațiu, confirmă automat informațiile introduse, sunt acceptate pe toate browserele și platformele și utilizatorii sunt deja utilizați lor.

Listele drop-down sunt cea mai obișnuită utilizare a meniurilor drop-down de către designeri și, potrivit directorului de produs Google, Luke Wroblewski, acest model ar trebui folosit doar ca ultimă soluție.

Să ne uităm la câteva restricții:

  • Opțiunile drop-down sunt invizibile până când utilizatorul face clic sau atinge formularul. În plus, la prima vedere, este imposibil de prezis câte linii vor fi în listă - două sau cincizeci.
  • Selectarea unei opțiuni dintr-o listă derulantă este un proces în mai mulți pași, în special pe dispozitivele mobile: utilizatorul trebuie mai întâi să atingă formularul și să deschidă opțiunile, să deruleze în jos și să o găsească pe cea dorită, să o selecteze și să închidă lista.
  • Listele drop-down îi fac pe designeri leneși, deoarece este atât de ușor să adăugați totul opțiuni posibileîntr-o singură listă fără prioritizare. Din acest motiv, lista drop-down este foarte asemănătoare cu un alt șablon - meniul „hamburger”.
  • Derularea listelor lungi, precum selectarea unei țări este un coșmar. În special pe dispozitivele mobile, unde căutarea de la tastatură nu este de obicei disponibilă.
  • Pe unele dispozitive, câmpul pentru afișarea opțiunilor este foarte mic, așa că glisarea poate fi un coșmar.

Cantitate opțiuni vizibile lista pe iOS poate părea extrem de nesemnificativă

Vestea bună este că există un numar mare de elemente alternative pentru introducerea datelor, care în multe cazuri vor funcționa mai bine decât listele derulante.

Estimați numărul de opțiuni

Nu ar trebui să utilizați liste derulante pentru decizii în care trebuie să alegeți una dintre cele două opțiuni. Încercați o casetă de selectare sau un buton radio.

Pentru cantitate mica Pentru opțiuni care se exclud reciproc, este potrivită o formă sub formă de butoane radio sau butoane de control segmentat. Utilizatorul va vedea imediat toate opțiunile disponibile și nu va trebui să extindă lista.

Exemplu de utilizare a butoanelor de control segmentat

Numărul de opțiuni vizibile depinde de lățimea ecranului și lungimea textului. Cu toate acestea, nu ar trebui să utilizați mai mult de cinci opțiuni

Utilizați un formular de introducere cu o listă derulantă filtrată pentru un număr mare de opțiuni bine definite în care utilizatorul știe exact ce trebuie să găsească.

În loc să defileze prin întreaga listă, utilizatorii pot introduce primele litere și pot selecta opțiunile filtrate

Pentru liste mari și diverse, este mai bine să utilizați datele existente ale utilizatorilor pentru a vă asigura că opțiunile populare de răspuns sunt incluse în listă. În acest caz, 90% dintre utilizatori vor putea selecta imediat opțiunea necesară, iar restul de 10% vor face clic pe opțiunea „Altele”, care va fi clarificată în următoarea întrebare.

Și în timp ce „Altele” nu este cea mai elegantă soluție, prioritizarea poate îmbunătăți UX pentru majoritatea utilizatorilor.

Evaluați formularul de introducere preferat

Unul dintre avantajele unei liste derulante este că utilizatorii nu trebuie să tastați atât de mult. Cu toate acestea, dacă trebuie să tastați puțin, iar datele sunt solicitate destul de des (de exemplu, Informații personale), atunci este mai convenabil să le introduceți decât să le selectați dintr-o listă.

Pe dispozitivele mobile, cel mai simplu mod de a vă introduce anul nașterii este utilizarea tastatură numerică, nu o listă derulantă

În general, tastatura numerică este cea mai mare metoda eficienta introduceți o valoare numerică.

Chiar dacă valorile listei sunt sortate în ordine, poate fi mai ușor pentru utilizatori să le introducă manual în loc să le deruleze.

Dacă este important pentru dvs. să confirmați datele pe care le introduce o persoană, utilizați un formular de introducere cu o listă derulantă filtrată.

De exemplu, atunci când utilizatorul trebuie să specifice o stare, filtrați lista Optiuni Disponibile poate doar o scrisoare

Acest lucru este deosebit de important dacă ordinea de sortare a elementelor listei nu este complet clară.

De exemplu, utilizatorii nu înțeleg după ce principiu sunt sortate monedele. Faceți-o astfel încât să poată căuta atât după numele, cât și după abreviere

Același lucru este valabil și pentru lista de țări.

Pentru numere întregi - cum ar fi numărul de pasageri sau articole dintr-un cărucior - cel mai bine este să folosiți un stepper. Acesta va permite utilizatorilor să crească sau să scadă valoarea cu un singur clic.

Pentru numere fracționare sau variabile situate pe o scară, cel mai bine este să utilizați un glisor.

JQuery Mobile adaugă automat un stil formularelor HTML, făcându-le mai atractive, mai ușor de utilizat la atingere.

Structura formularului mobil JQuery

JQuery Mobile pentru a utiliza CSS pentru a stila elemente formular HTML pentru a le face mai atractive și mai ușor de utilizat.

În jQuery Mobile, puteți utiliza următoarele elemente forme:

  • câmp de introducere a textului
  • Căutați un câmp de introducere
  • buton de radio
  • Caseta de bifat
  • Selectați Meniu
  • glisor
  • Flip comutator

La folosind JQuery Formularul mobil ar trebui să știți:

  • <Форма>elementul trebuie să aibă o metodă și un atribut de acțiune
  • Fiecare element de formular trebuie să aibă un atribut unic „ID”. ID-ul trebuie să fie unic pe toate paginile de pe site. Acest lucru se datorează faptului că mecanismul de navigare pe o pagină Jquery Mobile este prezentat în așa fel încât mulți diverse pagini simultan
  • Fiecare element de formular trebuie să aibă o etichetă. fila Setări Pentru proprietăți pentru a se potrivi cu id-ul elementului

exemple

method="post" action="demoform.html" >




Incearca-l "

Pentru a ascunde o etichetă, utilizați clasa UI-hidden-accessible. Acesta este adesea folosit atunci când atribuiți un element ca etichetă de substituent:

exemple






Incearca-l "

Sfat: Putem folosi atributul data-net-BTN="true" pentru a adăuga un buton pentru a șterge conținutul câmpului de introducere (pictograma X din dreapta câmpului de intrare):

exemple

<Ярлык = "имя_файла">Nume:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">


Incearca-l "

Pictograma jQuery Mobile Forms

Formular cod de buton HTML standard <вход>element (buton, resetare, trimitere). Ei vor reda automat stilurile, adaptând automat dispozitivele mobile la desktop:

exemple


<Тип входного = "Сброс" значение = "кнопка сброса">


Incearca-l "

Dacă trebuie să adăugați stiluri suplimentare V<вход>butonul, puteți utiliza următorul tabel de date-*atribute:

Buton pentru a adăuga o pictogramă:


<Тип входного = "Сброс" значение = "кнопка сброса">


Incearca-l "

Câmp container

Pentru a face etichetele și elementele de formular să pară mai potrivite pentru ecrane late, vă rugăm sau

elementul care înconjoară elementul etichetă/formular este utilizat cu clasa „UI-fields contain”.
:

exemple










Incearca-l "

Sfat: Pentru a împiedica jQuery Mobile să adauge automat stil elementelor interactive, utilizați atributul data role="none".

Oameni care vă folosesc aplicatie mobila sau site-ul web, urmărește un obiectiv specific. De obicei, ceea ce sta între utilizator și scopul său este forma. De fapt, formele sunt luate în considerare pasul finalîn procesul de realizare a obiectivelor utilizatorului. De aceea este atât de important ca utilizatorul să completeze formularul cât mai repede posibil și fără obstacole.

Urmați aceste șapte reguli pentru a crea forme simple și clare:

Regula #1: Formularele trebuie să fie compatibile cu modul în care utilizatorul își introduce datele

Asigurați-vă că câmpurile de formular nu sunt ascunse de elementele interfeței (cum ar fi tastatura). Pe măsură ce utilizatorul completează câmpurile din formular, mutați automat câmpurile în sus.

Regula #2: Minimizați numărul de câmpuri de introducere și nevoia utilizatorului de a introduce text

Cu cât este mai lung și mai complex formularul, cu atât este mai puțin probabil ca utilizatorii să dorească să completeze locuri goale, mai ales pe ecrane mici. Reducerea numărului de câmpuri de introducere va face formularul mai puțin aglomerat, mai ales atunci când cereți utilizatorului o mulțime de informații.

Faceți formularul cât mai simplu și scurt posibil

Dar reducerea numărului de câmpuri nu este suficientă. De asemenea, ar trebui să acordați atenție efortului pe care utilizatorul îl depune atunci când introduce date. Este necesară imprimarea grad înalt interacțiuni; există o probabilitate mare de erori, chiar și atunci când intră de la o tastatură de dimensiune completă (în special pe un ecran tactil).

Prin urmare, încercați să minimizați necesitatea erorilor de tastare și a utilizatorului.

Setări implicite inteligente

Setările implicite inteligente ajută utilizatorii să completeze toate câmpurile formularului mai rapid și mai precis. De exemplu, puteți preselecta țara de reședință a unui utilizator pe baza datelor de localizare geografică a acestuia.

Detectare automată locația va economisi utilizatorului timp în căutarea unei camere de hotel

Butoane radio pentru alegeri similare, dar care se exclud reciproc

Când utilizatorul se confruntă cu alegerea dintr-o listă de opțiuni, luați în considerare utilizarea unei liste orizontale de etichete. Acest lucru vă permite să utilizați mai eficient spațiul disponibil pe ecran.

Glisoare pentru preț min/max sau interval de buget

Luați în considerare utilizarea glisoarelor pentru câmpurile care conțin prețuri sau buget. În acest fel, utilizatorul poate muta glisorul la valoarea minimă/maximă. Glisorul este ușor de mutat pe orizontală și puteți personaliza cu ușurință această acțiune folosind indicii vizuale. Dar rețineți că numerele nu trebuie ascunse atunci când interacționați cu glisorul (mai ales când folosiți degetele mari).

Glisor AirBnB pentru a selecta prețul

Regula nr. 3: titlurile formularelor trebuie să fie fie deasupra câmpurilor în sine, fie flotante

Titlurile îi spun utilizatorului scopul principal al câmpului, iar textul clar este una dintre modalitățile principale de a face o interfață mai accesibilă.

De ce nu ar trebui să utilizați niciodată titluri de text în interiorul unui câmp

Antetele din câmp (sau substituenți) sunt text care se află în interiorul unui câmp de formular care dispare de îndată ce utilizatorul începe să-și introducă datele.

Titluri în interiorul câmpului
În timp ce titlurile din cutie arată bine din punct de vedere estetic, acest beneficiu este adesea supraevaluat. Principala greșeală este pierderea contextului. După ce utilizatorul face clic pe câmp, inscripția dispare. Și, în consecință, nu poate verifica că a scris exact ceea ce este necesar.

Textul din interiorul câmpului nu este cel mai mult cel mai bun înlocuitor antet vizual

De asemenea, unii utilizatori care văd că ceva este deja scris într-un câmp pot crede că câmpul este deja pre-completat și nu trebuie să introducă nimic altceva și pot ignora completarea.

De ce anteturile câmpurilor aliniate la stânga sunt dăunătoare pentru dispozitivele mobile

Principalul lucru de luat în considerare atunci când utilizați titluri aliniate la stânga pe un dispozitiv mobil este dimensiunea ecranului și raportul de aspect. Dacă titlul din stânga este opus câmpului, atunci cu o orientare verticală a ecranului, veți avea foarte puțin spațiu rămas pentru câmpul în sine. Acest lucru creează unele dificultăți în utilizare, deoarece nu mai există suficient spațiu pentru a afișa ceea ce introduce utilizatorul. Neputința de a vedea textul introdus creează o problemă pentru utilizatori, deoarece îi împiedică să observe rapid o eroare de introducere înainte de a trimite formularul.

Este foarte greu de observat o eroare dacă datele nu sunt complet vizibile

Antet de sus sau Antet receptiv

Titlurile formularelor ar trebui să fie în partea de sus a câmpurilor formularului, astfel încât utilizatorii să poată vedea ce completează și cum. Principalul avantaj al plasării antetelor formularului deasupra formularului este că puteți întinde formularul pe toată lățimea ecranului și îl puteți face suficient de mare pentru introducerea datelor (de exemplu, cu o dimensiune a fontului de 16 pixeli). Beneficiu suplimentar Va fi posibil să scrieți titluri clare și ușor de înțeles (nu se limitează la 1-2 cuvinte).

Principalul dezavantaj al plasării titlurilor deasupra câmpurilor este că întregul formular ocupă mai mult spatiu vertical, ceea ce înseamnă că utilizatorul trebuie să deruleze ecranul. Cu toate acestea, acest lucru nu este foarte problema serioasa– astăzi, toată lumea este obișnuită să defileze.

Alternativ, puteți utiliza antete receptive pentru a vă asigura că utilizatorii au completat corect câmpul. Textul substituent este afișat în mod implicit, dar după ce atingeți câmpul și introduceți text, textul substituentului se mută în partea de sus a câmpului, așa cum se arată mai jos.

Regula #4: validarea câmpului formularului trebuie să aibă loc în timp real

Într-o lume ideală, utilizatorii ar completa formularul informatie necesarași va finaliza cu succes această sarcină. În lumea reală, utilizatorii fac adesea greșeli. În același timp, utilizatorilor nu le place faptul că, după întregul proces de completare a câmpurilor, ajung la butonul „trimite” și descoperă că au făcut o greșeală. Este corect să informați utilizatorul despre succesul/eroarea în câmp imediat după completarea acestuia. Mesajul de validare informează imediat utilizatorul că informațiile introduse sunt corecte. Această abordare permite utilizatorilor să repare greșelile mai rapid și fără a fi nevoie să aștepte ca erorile să fie afișate după ce au făcut clic pe butonul de trimitere.

Dacă vă așteptați la răspunsuri specifice la întrebări, trebuie să arătați imediat ce trebuie introdus și sub ce formă.

Validarea șirurilor poate fi, de asemenea, o soluție. În exemplul de mai jos, puteți vedea bun exemplu, cum puteți corecta o potențială eroare.

Regula #5: Afișează aspectul tastaturii în funcție de datele de intrare

Utilizatorii preferă configurația corespunzătoare a tastaturii în aplicație. De exemplu, atunci când utilizatorul trebuie să introducă un număr Card de credit, afișați doar introducerea numerelor, astfel încât utilizatorul să introducă numere și nu simboluri. Acest lucru va crește viteza de umplere și va reduce cantitatea posibile erori intrare.

Trebuie să te asiguri că această ocazie implementat pe întreaga aplicație, și nu pe părțile sale individuale.

Regula #6: Furnizează informații utile în context

Uneori, este nevoie de a oferi relevante și Informatii utile pentru a simplifica procesul pentru ca utilizatorul să completeze formularul. Dar un astfel de text însoțitor ar trebui folosit numai acolo unde este cu adevărat necesar:

  • Atunci când planifică datele, utilizatorii apreciază contextul, cum ar fi un calendar încorporat pentru determinarea zilelor săptămânii. Acest lucru reduce nevoia de a ieși din aplicație pentru a vizualiza calendarul, reducând riscul ca utilizatorul să fie distras de la sarcina sa principală.

  • Oamenii pot fi îngrijorați de securitatea datelor lor, așa că trebuie să le arătați că datele lor nu vor fi partajate cu terțe părți.

Ca o regula bune maniere, nu trebuie să extindeți explicația la 100 de caractere.

Regula #7: Folosiți un format flexibil

Unele sarcini necesită informații foarte precise de la utilizator. Dar, în același timp, solicitarea utilizatorului să furnizeze informații într-o formă specifică poate fi împotriva principiilor bunei utilizări. Dacă îi cereți utilizatorului să introducă informații digitale (cum ar fi un număr de telefon) într-un formular, fiți flexibil și creați ecrane care să accepte diferite formate introduceți și afișați informații în forma cea mai ușor de utilizat pentru a preveni erorile.

Nu utilizați un format fix de introducere a datelor

Concluzie

Utilizatorul poate experimenta diferite feluriîndoieli atunci când completați formularul, așa că ar trebui să încercați să faceți procesul cât mai ușor posibil. Toate sfaturile descrise în acest articol pot îmbunătăți în mod semnificativ gradul de utilizare a formularelor.

  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă ne-am grăbi pe undeva