care este dimensiunea ideală a ecranului pentru design receptiv?
Posted on
începând cu 2020, există 3, 5 miliarde de utilizatori de smartphone-uri în lume. Aceasta este de 45% din populația globală. Începând cu 2019, oamenii au accesat Internetul cu peste 9000 de dispozitive distincte. Fiecare utilizator se așteaptă ca fiecare site pe care îl accesează să se redea perfect pe dispozitivul mobil. Aceasta înseamnă că dezvoltatorii de site-uri web trebuie să proiecteze site-uri web care sunt afișate pe o multitudine de dimensiuni de ecran din întreaga lume.cu alte cuvinte, au nevoie de un design receptiv.,
dar, după cum știe fiecare designer, Executarea designului receptiv trebuie să înceapă cu a ști ce dimensiuni de ecran să proiecteze. Acest articol explorează această întrebare și discută cele mai bune dimensiuni de țipăt pentru un design receptiv.
ce este designul responsiv?designul web Responsive se referă la o strategie de design care creează site-uri web care funcționează bine pentru Dispozitive mobile, tablete și desktop. Site – urile web fără design receptiv riscă să înstrăineze un număr semnificativ de utilizatori-80% dintre utilizatori au susținut că vor respinge site-urile web care nu funcționează bine pe dispozitivul lor.,în plus, Google se uită la” Mobile-Friendly ” ca un parametru pentru clasament. Pentru a cita blogul Central Google Webmaster,
” începând cu 21 aprilie (2015), vom extinde utilizarea noastră de prietenie mobilă ca semnal de clasare. Această modificare va afecta căutările mobile în toate limbile din întreaga lume și va avea un impact semnificativ în rezultatele căutării noastre. În consecință, utilizatorii vor găsi mai ușor să obțină rezultate de căutare relevante, de înaltă calitate, optimizate pentru dispozitivele lor.”
Deci, cum se găsește dimensiunile ideale ale ecranului receptiv?,Notă: Pentru a înțelege de ce designul responsiv este parte integrantă a succesului site-ului web, trebuie să înțelegem natura vastă și în continuă creștere a fragmentării dispozitivului. Descărcați cartea noastră electronică despre fragmentarea dispozitivului pentru a obține cele mai recente informații despre acest fenomen.,
Sursa Imaginii
Potrivit întreaga Lume Rezoluția Ecranului Stats (Nov 2018 – Nov 2019), cele mai frecvent utilizate rezoluții sunt:
Gratuit Receptiv Test Frecvent Utilizat Rezoluții
Încercați testarea capacității de reacție site-ul dvs. pe dispozitive reale.desigur, accentul pe prietenia mobilă nu înseamnă că cineva abandonează dispozitivele desktop. După cum va demonstra graficul de mai jos, dispozitivele desktop reprezintă încă o parte considerabilă a utilizării internetului.,
Sursa Imaginii
Mobil – 52.03%
Desktop – 45.17%
Comprimat – 2.,8%
Potrivit Microsoft documentare,
Cu un număr foarte mare de dispozitiv obiective și dimensiuni de ecran din Windows 10 ecosistem, mai degrabă decât optimizarea UI pentru fiecare dispozitiv, vă recomandăm proiectarea pentru câteva categorii de lățime (de asemenea, numit „puncte critice”):
mic (mai Mic decât 640px)
Mediu (641px să 1007px)
Mare (1008px și mai mare)
în Ciuda acestor informații, amintiți-vă că nu există nici un standard dimensiune ecran pentru web design., În funcție de natura site-ului, utilizatorii pot utiliza anumite dispozitive care nu oferă dimensiunile și rezoluțiile ecranului menționate mai sus. Pentru a identifica dimensiunile potrivite ale ecranului pentru designul web, investiți în analiză. Aflați ce este cel mai probabil să utilizeze publicul dvs. țintă. Dacă aceste dispozitive nu respectă rezoluția menționată mai sus, atunci includeți-le în amestec.,
1-Click, Accesul la Receptiv Checker Tool
cele mai Bune Practici pentru punerea în Aplicare a Design Receptiv
Acesta devine mult mai ușor pentru a proiecta un site web pentru mai multe dimensiuni de ecran cu următoarele indicații:
Cunoaște-ți valorile critice: În design receptiv, un punct de întrerupere este „punctul” la care conținutul site-ului web și design va adapta într-un anumit mod, în scopul de a oferi cea mai bună experiență de utilizator. Pentru a face un site web receptiv, designerii trebuie să adauge un punct de întrerupere atunci când conținutul pare nealiniat., În funcție de numărul de dispozitive la care este aliniat site-ul, trebuie setate mai multe puncte de întrerupere pentru a asigura capacitatea de reacție. Consultați acest articol despre punctele de întrerupere receptive pentru a afla mai multe despre ele și despre eficacitatea lor în detaliu.
creați modele fluide: designul Fluid se referă la un aspect de design care se poate schimba (extinde și contracta) pentru a se potrivi cu portul de vizualizare al dispozitivului pe care rulează. Un aspect de design fix va denatura în mod nedorit pe fiecare port de vizualizare la care nu sunt aliniate., Munca pe machete de design prin utilizarea % unități, precum și max-latimi pentru a se asigura că layout-ul se potrivește dispozitivul mobil ferestre, fără a deveni prea larg pe desktop dispozitiv de vizualizare.
reduce frecarea: aceasta înseamnă practic că designul trebuie să fie ușor de utilizat pe mai multe dispozitive. Designul Responsive nu include doar aspectul unui site web, ci și performanța acestuia în ceea ce privește accesibilitatea și gradul de utilizare. Concentrați-vă în special pe frecarea ecranului mic, deoarece, pe măsură ce dimensiunile ecranului scad, elementele web au mai puțin spațiu de redat și devin mai susceptibile de a se amesteca și denatura.,
Design Mobile-Primul: deoarece frecarea este mai probabil să apară pe ecrane mai mici, design cu o abordare mobile-Primul. Este mai greu pentru a restrânge un aspect desktop pentru un viewport mobil în timp ce face invers este mai ușor. Când proiectați mobile-first, designerul include ceea ce este absolut necesar pentru a oferi o experiență optimă utilizatorului.,
Aici sunt câteva modalități de a merge cu mobil-primul design:
Priorități importante opțiuni de meniu
a Elimina toate distrageri vizuale
Optimizarea design pentru tapability – face totul ușor să atingeți
Eliminarea inutile forme și câmpurile de informații
de a Evidenția principalele CTA
Vizibil oferă funcții de căutare și filtrare
Mai multe funcționalități, mai puțin dactilografiere: Evident, tastarea este mai greu de pe dispozitive mobile decât de pe dispozitive desktop. Deci, este logic să minimalizați nevoia de tastare pe versiunile mobile ale site-urilor web., Înlocuiți tastarea cu funcții ale dispozitivului, cum ar fi GPS, citirea codului QR, ID-ul biometric și altele asemenea. Faceți mai ușor pentru utilizatori să partajeze, să trimită prin e-mail sau să apeleze numere relevante prin plasarea de link-uri care lansează funcțiile necesare. Rețineți că cel mai bun design receptiv implică simplificarea și eliminarea interacțiunilor Mobile incomode.
Test, test, test: odată ce un dezvoltator sau designer cunoaște cele mai bune dimensiuni de ecran pentru design receptiv, ei fac munca și creează un site web receptiv., Cu toate acestea, pentru a vă asigura că site-ul web redă de fapt modul în care este destinat pe dispozitivele pentru care a fost construit, trebuie să fie testat exact pentru asta. O modalitate ușoară de a face acest lucru este să utilizați un verificator de design receptiv. În loc să rulați site-ul web prin dispozitive individuale cu diferite viewports, introduceți adresa URL în Verificator și vedeți cum apare pe o varietate de cele mai recente dispozitive la diferite rezoluții ale dispozitivului utilizate frecvent. Verificatorul legat mai sus oferă verificare receptivă pe cele mai recente dispozitive mobile, cum ar fi iPhone X, Galaxy Note 10, iPhone 8 Plus și multe altele.,deși designul receptiv poate părea dificil de executat, informațiile din acest articol încearcă să simplifice acest proces pentru dezvoltatori și designeri. Făcând ceea ce este prezentat mai sus, devine mult mai ușor să creezi site-uri web care să fie pe placul publicului său, indiferent de dispozitivul pe care îl folosesc pentru a accesa site-ul respectiv.
