7 cele mai bune practici Divi UX pe care ar trebui să le rețineți

Cred că toți putem fi de acord cu faptul că Divi este extrem de versatil. Există atât de multe posibilități de a personaliza și personaliza orice site web pe care îl creați. Dacă doriți să oferiți un plus de productivitate muncii dvs., acesta ar putea fi postul ideal pentru dvs. Vom acoperi cele mai bune 7 practici Divi UX cu care s-ar putea sau nu să fiți familiarizați. Cele 7 sfaturi pe care le voi împărtăși sunt câteva pe care personal le folosesc foarte mult și de care beneficiez în timp ce lucrez zilnic cu Divi.

Să ajungem la asta!

1. Utilizarea micro animațiilor

Prima practică optimă Divi UX pe care ar trebui să o rețineți este utilizarea micro-animațiilor în loc de cele excesive. A existat o perioadă în care cu cât mai multe animații aveau un site web, cu atât „personalizate” sau „mai avansate” păreau publicului. Cu toate acestea, acele vremuri s-au încheiat. Pe lângă faptul că arată foarte elegant, animațiile excesive nu contribuie la experiența generală a utilizatorilor pe care o au oamenii pe site-ul dvs. web. De fapt, ei pot distrage adesea vizitatorii de la ceea ce este cu adevărat important. Optarea pentru micro animații este calea de urmat. Opțiunile de animație Divi vă permit să personalizați viteza și intensitatea oricărei animații pe care o adăugați. Cheia creării micro-animațiilor este utilizarea unei intensități scăzute a animației cu o durată de animație puțin mai mare.

Accesați fila Proiectare a unui element de proiectare

Deschideți orice element de design la alegere și accesați fila avansată. Acolo veți găsi opțiunile de animație.

Utilizați cantități mici de intensitate a animației

Puteți alege orice tip de animație și puteți reduce intensitatea animației. Cu cât mergeți mai jos, cu atât animația devine mai subtilă. Prin creșterea duratei animației, vă veți asigura că animația nu trece neobservată.

2. Optimizarea manuală a receptivității

Unul dintre cele mai mari avantaje ale lui Divi este faptul că este ușor să faci și orice aspect pe care îl creezi receptiv. De fapt, Divi face deja cea mai mare parte a muncii pentru dvs. Tot ceea ce creați devine receptiv din momentul în care îl adăugați. Din acel moment înainte, singurul lucru rămas de făcut este să faceți manual modificări ale elementelor de proiectare. Aceasta include modificarea dimensiunii textului copiei pe care o distribuiți în funcție de dimensiunea ecranului, de exemplu.

Acum, rândurile și coloanele au încorporată o valoare de marjă predefinită care se modifică în funcție de dimensiunea ecranului. Dar nu trebuie neapărat să mergeți cu aceste valori implicite. De exemplu, am constatat că multe site-uri web populare folosesc mai puține margini stânga și dreapta pe dimensiuni mai mici de ecran. În acest fel, puteți adăuga mai mult conținut pe orizontală, ceea ce înseamnă că este necesară o defilare mai mică pe verticală.

Marja implicită la stânga și la dreapta care este utilizată pe dimensiuni mai mici de ecran este de 40 px. Pentru a profita de întreaga lățime a dimensiunilor mai mici ale ecranului, vă recomand să înlocuiți această valoare cu 25 px.

Să parcurgem procesul pas cu pas.

Schimbați dimensiunea rândului

Primul lucru pe care trebuie să-l faci este să elimini tot spațiul dintre secțiuni, rânduri și module, activând următoarele opțiuni în setările de dimensionare ale rândului:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Adăugați o secțiune SAU o căptușeală de rând

Acum, dorim în continuare să avem suficient spațiu între secțiune și rând. Puteți alege dacă doriți să adăugați umplutură personalizată la stânga și la dreapta la rândul sau secțiunea la care lucrați. Adăugarea la rând nu va afecta alte rânduri din secțiune. Dar, pe de altă parte, aplicarea acestuia la secțiuni se va asigura că aceste margini rămân aceleași pe întreaga secțiune, indiferent de câte rânduri adăugați.

• Căptușire stângă: 23vw (desktop), 30 px (tabletă), 25 px (telefon)
• Căptușeală dreaptă: 23vw (desktop), 30 px (tabletă), 25 px (telefon)

Adăugați umplerea coloanei

Spațiul dintre coloane și module este, de asemenea, important. Puteți personaliza aceste valori în funcție de dimensiunile diferite ale ecranului.

• Coloana 1 Căptușeala dreaptă: 1vw (desktop), 0vw (tabletă și telefon)
• Coloana 2 Căptușeală stângă: 1vw (Desktop), 0vw (Tabletă și telefon)
• Coloana 2 Căptușeala dreaptă: 1vw (desktop), 0vw (tabletă și telefon)
• Coloana 3 Padding stânga: 1vw (Desktop), 0vw (Tabletă și telefon)

Reduceți dimensiunile textului

Doriți să utilizați 100% lățimea orizontală pe care o obțineți pe dimensiuni mai mici de ecran? Deși 13 px pentru dimensiunea textului corpului ar putea părea mic din perspectiva laptopului, de obicei este mai mult decât suficient pentru un dispozitiv mobil. Încercați să vizualizați o dimensiune a corpului de 13 px de pe telefonul dvs. mobil, în combinație cu pașii de mai sus, și veți vedea despre ce vorbesc!

3. Utilizarea unităților Viewport în locul pixelilor

Acesta este unul dintre lucrurile pe care le-am făcut și în pasul anterior. Pentru a vă asigura că site-ul dvs. web rămâne receptiv la toate dimensiunile ecranului desktopului, este recomandat să utilizați unități de vizualizare în loc de pixeli. Acest lucru vă va asigura că site-ul dvs. web arată excelent și exact așa cum ați proiectat-o, chiar și pe monitoarele desktop de 27 ″.

Pe de altă parte, dimensiunile mai mici ale ecranului nu tind să difere la fel de mult ca un ecran de 15 ″ față de un ecran de 27 ″. S-ar putea să folosiți unitățile de vizualizare atunci când creați suprapuneri verticale, dar lipirea cu pixeli pentru umplerea / marginea stânga și dreapta nu va face niciun rău.

4. Extinderea stilului pentru orientarea textului

Unul dintre lucrurile pe care oamenii le vor observa rapid pe site-ul dvs. web, chiar și subconștient, este cât de consecvent sunteți în designul pe care l-ați construit. Aceasta include, dar nu se limitează la, orientarea textului pe care o utilizați în paginile dvs. Una dintre cele mai bune practici UX ale lui Divi este finalizarea unui design prin verificarea orientării textului. Puteți combina cu siguranță diferite orientări de text într-o pagină, dacă sunt bine gândite și redate. Dar, devine mai dificil atunci când combinați diferite orientări de text într-o anumită secțiune. Cel mai bun scenariu; păstrați o orientare text pe toată pagina. Dar dacă aveți chef să experimentați mai mult, încercați să păstrați cel puțin un fel de orientare a textului pe secțiune. Puteți face acest lucru doar aruncând o privire asupra diferitelor elemente de design sau puteți utiliza una dintre caracteristicile de eficiență Divi care vă vor face treaba.

În doar câțiva pași, vă puteți asigura că utilizați aceeași orientare și consistență a textului pe întreaga pagină sau secțiune.

Să parcurgem acei pași.

Deschideți orice modul care conține text

Deschideți orice modul de pe pagina dvs. care conține text și accesați setările pentru text.

Faceți clic dreapta pe opțiunea de orientare a textului

Faceți clic dreapta pe opțiunea Orientare text pe care o puteți găsi în setările de text și selectați opțiunea „Extinde stiluri”.

Extindeți orientarea textului la alegere în întreaga secțiune sau întreaga pagină

Acum, în funcție de cât de consecvent doriți ca orientarea textului să fie pe toată pagina dvs., puteți alege să extindeți orientarea textului la alegere pe întregul aspect sau într-o anumită secțiune.

5. Comutarea înapoi și înainte între modul Visual Builder și modul Wireframe

Unul dintre lucrurile minunate despre Visual Builder al lui Divi este că nici măcar nu trebuie să alegeți între editarea ceva în backend sau frontend. Schimbarea între ambele durează literalmente mai puțin de o secundă. Sunt de părere că puteți obține cel mai bun nivel de productivitate și prezentare generală dacă le combinați pe ambele. Mai ales dacă aveți de-a face cu mai multe suprapuneri în aspect, trecerea la modul wireframe vă poate ajuta să faceți modificări rapid. Sau, dacă doriți să glisați și să fixați un anumit element de design în altă parte a paginii, îl puteți face mai ușor trecând la modul wireframe și trăgând respectivul element fără a fi nevoie să derulați la nesfârșit.

Și știați că puteți deschide modalitatea unui element de design și puteți comuta între Visual Builder și modul Wireframe în timp ce aveți în continuare modul deschis? Acest lucru vă permite să faceți modificări în backend-ul designului dvs. și să urmăriți noile setări de design care se află la locul lor ori de câte ori doriți.

6. Importați / Exportați aspectul direct pe pagină

Până acum, toți ne-am obișnuit cu aspectele premade, cu aspectele salvate și cu Biblioteca Divi în general. Dar spuneți-vă că lucrați la o anumită pagină pe o gazdă locală și doriți să o încărcați pe un site web live odată ce ați terminat, fără a trece prin dificultatea:

• Salvarea aspectului în biblioteca Divi
• Accesați biblioteca Divi și exportați fișierul JSON
• Accesați biblioteca Divi a site-ului dvs. web live
• Încărcarea fișierului JSON
• Accesați pagina site-ului dvs. live
• Încărcarea fișierului JSON din aspectele salvate

Apoi, puteți utiliza pur și simplu opțiunea de import / export care este chiar acolo pe pagina dvs. Acest lucru vă va permite să creați un fișier JSON fără a fi nevoie să accesați deloc biblioteca Divi.

În același mod în care ați exportat aspectul, veți putea importa aspectul în noua dvs. pagină. Dar să știți că odată ce alegeți această abordare, nu veți putea importa aspectul în biblioteca Divi de pe site-ul dvs. live. Numai direct pe o pagină.

7. Utilizarea regulată a opțiunii „Micșorare” pentru a păstra perspectiva

Aceasta este probabil una dintre caracteristicile mele preferate Divi UX. Sunt sigur că am făcut totul înainte; deschideți o nouă filă obișnuită sau o fereastră incognito pentru a vedea rezultatul unei pagini pe care am creat-o. Apoi, ați făcut un ecran de imprimare a întregii pagini utilizând o extensie Chrome sau un supliment Firefox. Toate acestea pentru a vă oferi o imagine nouă asupra aspectului la care lucrați și pentru a vedea dacă totul se potrivește în structura generală a paginii.

Deși încă vă recomand să faceți asta ocazional, nu va trebui să o faceți de mai multe ori într-un interval scurt de timp. În schimb, utilizați opțiunea de micșorare care este chiar acolo, în Visual Builder. Acest lucru nu vă va oferi doar perspectiva pe care o căutați, ci vă va ajuta și să faceți modificări rapide fără a fi nevoie să părăsiți pagina.

Gânduri finale

În această postare, v-am arătat 7 bune practici Divi diferite, care vă vor ajuta să creșteți productivitatea atunci când creați site-uri web cu Divi. Aceste sfaturi vor fi cu siguranță utile la crearea oricărui tip de site web! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Imagine prezentată de aurielaki / shutterstock.com