Interfețe utilizator bootstrap

Interfețele de utilizator sunt una dintre cele mai importante părți ale aplicațiilor, deoarece este modul în care utilizatorii vor interacționa cu creațiile noastre, dar dincolo de aceasta, o interfață bună face ca experiența cu aplicația noastră să fie pozitivă. Pe de altă parte, o interfață dubioasă înseamnă că o aplicație bună nu mai poate fi utilizată.
Bootstrap Nu ne oferă interfețe construite, este ceva ce trebuie să ne proiectăm singuri, cu toate acestea ne oferă componentele pentru a le putea construi și, deși majoritatea componentelor sale sunt destinate proiectării de aplicații web, are de fapt alte componente îmbunătățiți experiența Utilizatorului.
Aceste componente se bazează pe JavaScript Da jQuery, așa că vom cere ca această ultimă bibliotecă să poată folosi aceste elemente pe care le-am menționat, totuși, odată ce vom vedea unele dintre rezultate, vom justifica această includere.
După cum am indicat în introducere, este necesar să se utilizeze jQuery Pentru a utiliza aceste componente, de aceea primul lucru pe care îl vom defini este modul în care ar trebui să fie eticheta noastră cap dintre toate exemplele pe care le vom vedea. Să vedem codul acestuia:

În primul rând includem bootstrap.css în versiunea sa minimizată și apoi theme.css, până acum totul a fost obișnuit, dar trebuie să includem jQuery și trebuie să includem și bootstrap.js care este modul în care acest cadru ne va oferi posibilitatea de a încorpora componentele pentru interfețele noastre.
Aceste incluziuni se pot face așa cum vedem în codul dintr-un folder de pe mașina noastră în care stocăm proiectul sau putem folosi, de asemenea, un CDN, așa cum vedem în următoarea bucată de cod:

Oricare dintre opțiunile pe care le folosim este în regulă, ceea ce este important este să respectăm ordinea în care includem bibliotecile, altfel componentele noastre nu vor funcționa așa cum ne dorim.
O interfață bună ar trebui să fie întotdeauna de ajutor utilizatorului, ar trebui să le arate întotdeauna ce cale să meargă și la ce funcționează diferitele sale componente, în acest fel este intuitivă și evită presupunerile utilizatorului atunci când încearcă butoane și meniuri pentru a găsi ceva. .
Sfat pentru instrumenteUn instrument care ne permite să evităm acest lucru este Sfat pentru instrumente, care nu sunt altceva decât mici casete pop-up care ne ajută să explicăm secțiunile aplicației noastre, sunt cunoscute și ca casete de ajutor, ideea este că în aceste casete mici adăugăm fraze mici care dau sens acțiunii pe care o putem efectua în interfața noastră.
Să vedem un mic cod în care demonstrăm cum să construim un tooltip cu ajutorul Bootstrap:

 Exemplu Tooltip Save

În codul nostru am inclus bibliotecile menționate și apoi în etichetă scenariu folosim evenimentul document.preparat pentru a ne crea sfat de instrumente care se va aplica la tot ceea ce are clasa instrument1, acest nume de clasă poate fi personalizat de oricine dorim și, în plus, adăugăm ca opțiune că are un aspect în dreapta, adică ajutorul nostru va fi afișat în partea dreaptă. Apoi creăm un stil general pentru corp, astfel încât conținutul nostru să fie mai vizibil pe ecran în scopuri demonstrative.
În cele din urmă în interiorul corp creăm un element buton, are un atribut numit comutare date și indicăm că va fi un sfat de instrumente unde în atribut titlu plasăm textul pe care ar trebui să îl afișeze caseta noastră de ajutor și, desigur, în atribut clasă trebuie să includem instrument1 care a fost clasa pe care am definit-o la început. Odată ce totul este la locul său, când trecem mouse-ul peste butonul nostru, putem vizualiza sfatul de instrumente creat, care atunci când este executat în browserul nostru ar trebui să arate astfel:

După cum putem vedea, această componentă este destul de utilă, deoarece ne oferă posibilitatea de a explica utilizatorului prin casetele de ajutor cum funcționează sau pentru ce sunt utilizate unele elemente în interfața noastră.
Există o altă componentă foarte importantă a interfeței cu utilizatorul și este acordeon, Scopul acestui element este de a putea salva textul sub o componentă a aplicației noastre, cu aceasta obținem o primă impresie atât a ordinii, cât și a curățeniei interfeței noastre, unde utilizatorul atunci când face clic pe el, este afișat conținutul.
Acest lucru este important, deoarece o altă calitate de care are nevoie o interfață bună de utilizator este curățenia, deoarece o interfață curată înseamnă că utilizatorul nu se simte uimit și, prin urmare, va fi mai plăcut să o utilizați.
Constituția acordeonului este simplă, în acest caz nu este nevoie să construim un scenariu ca atare, trebuie doar să facem o structură de divs care ne permit să indicăm că sunt de acest tip panou, titlul acordeonului nostru va fi un div de acest tip titlu de panou iar conținutul nostru va fi o altă divizare de acest tip panou-conținut, pe care trebuie să o repetăm ​​pentru cantitatea de elemente pe care vrem să le arătăm.
Să vedem în exemplul următor unde creăm un acordeon cu două elemente:

 Exemplu de acordeon
Primul element
Acesta este primul element al acordeonului nostru

Al doilea element
Acesta este conținutul celui de-al doilea element al acordeonului nostru

Cel mai important lucru pentru a face ca acordeonul să funcționeze după structură sunt identificatorii, dacă ne uităm la titlul acordeonului avem o ancoră și acest lucru este îndreptat în exemplu către elementul 1 Da element2 unde fiecare dintre aceste ancore corespunde identificatorului conținutului, atunci vedem cum are blocul de conținut al fiecăruia merge aceste două cuvinte, ceea ce înseamnă că atunci când facem clic pe titluri, conținutul este afișat. Să vedem cum arată în browserul nostru când rulăm exemplul nostru:

MARI

După cum putem vedea, elementul 1 își arată conținutul fără probleme, în timp ce elementul 2 nu afișează nicio informație, dacă facem clic pe el, putem vedea cum este ascuns conținutul elementului 1 și se afișează conținutul elementului 2:

MARI

În cele din urmă, o altă componentă excelentă pentru interfețele de utilizator sunt imagini modaleAcestea sunt elemente care sunt invocate atunci când faceți clic pe un buton sau ancoră și funcționalitatea lor este să ne arate un fel de fereastră pop-up.
Această fereastră este foarte utilă deoarece ne permite să afișăm text care, datorită lungimii sale, nu este practic într-un sfat de instrumente, sau poate avem nevoie ca utilizatorul să completeze unele informații și nu vrem să le trimitem pe altă pagină. Acest tip de componentă ne ajută să menținem curățenia aplicației noastre, dar ne ajută și să forțăm utilizatorul să acorde atenție ceva ce poate fi foarte important.
Desigur, regulile de bun simț trebuie să se aplice aici, deoarece, deși este posibil ca un modal să ridice un alt modal, acest lucru este de prost gust și dăunează navigării utilizatorului, de asemenea, dacă trebuie să încorporăm mai mult de patru câmpuri într-o formă, este mai bine să o faci într-o pagină nouă și nu într-un modal pentru a menționa câteva exemple. Să vedem în următorul cod cum putem crea un modal:

 Diagramele modale×
Odată ce treci la faza următoare, toate acțiunile tale vor fi finale.

Nu pot anula răspunsurile tale
Ieșiți Continuă

În acest caz, modalul este configurat în document.preparat pentru a fi afișat direct, acest tip de implementare este utilizat pe scară largă pentru a da avertismente înainte ca utilizatorul să continue. Apoi modalitatea noastră este alcătuită din trei părți; partea de sus (antet), corp (corp) și subsol (subsol).
În mod normal în antet Există un titlu cu o dimensiune care iese în evidență pentru a indica motivul modalului, în corp explicația sau conținutul, cum ar fi un formular sau un mesaj, și în subsol butoane de acțiune precum continuare sau închidere. Deci, să vedem cum arată fereastra noastră modală atunci când o executăm în browser:

Această componentă este destul de simplă de implementat și oferă aplicației noastre un stil profesional, totuși este important să știm cum să ne folosim logica pentru ao plasa într-un loc care nu întrerupe armonia aplicației.
Cu aceasta încheiem acest tutorial, în care am dezvoltat în mod eficient trei componente mari care ne ajută să creăm interfețe utilizator pentru a realiza o mai bună organizare și înțelegere a acțiunilor din aplicația noastră, îmbunătățind astfel experiența de navigare și utilizarea acestuia.