Noul design al VKontakte. Noul design al VKontakte - coperta orizontală a grupului Reproiectarea VKontakte

Subiectul acestui articol este design nou VKontakte. Schimbat din nou, acum puteți seta o acoperire orizontală într-un grup. Proiectarea comunității tale VK cu un astfel de antet este mult mai interesantă. Sincer, nu sunt necesare cunoștințe Photoshop aici. Poți să o faci fără abilități speciale? frumoasa poza chiar și în PowerPoint, Fotor, Canva, Pixlr Editor.

Mergând la grup, veți observa că în acele grupuri au devenit vizibile butoanele „Postare fixată”, „Informații” și „Meniu clic”. Și înainte de a fi ascunși. Desigur, toate înscrierile grupurilor au început imediat.

Se încarcă o nouă copertă

Acum să ne dăm seama cum să activăm capacitatea de a instala un antet orizontal. Să facem clic pe butonul „Gestionează”.

Apoi faceți clic pe ultimul și descărcați noua coperta a grupului VKontakte. Aici puteți înțelege că fișierul descărcat poate fi de orice dimensiune! Dar nu mai puțin de dimensiunea 1590x400 px. Creăm un prototip de copertă în orice editor. Apoi, putem selecta și salva zona care îndeplinește cerințele VK. Iată un sfat despre unde să găsești o imagine de copertă și cu ce editor să folosești

Ce este interesant despre noul design VKontakte?

Principalul lucru: există mai mult spațiu pentru informații. Acum aici puteți scrie numele grupului, scopul creării acestuia, un îndemn la acțiune și așa mai departe. Un astfel de design va fi logic complet și mai funcțional. Dar o poți lăsa design vechi, este o chestiune de gustul fiecaruia.

Când proiectați o copertă orizontală, veți observa că acum meniul intern iese cumva din contextul general. Cred că ar fi mai bine să fixați imaginea pentru a merge la meniu. Și folosiți-l pentru a găzdui pagini wiki în grup.

În același timp, aș dori ca dezvoltatorii să adauge o altă opțiune pentru a configura o tranziție frumoasă la paginile Wiki.

Aș dori să menționez că din 2016 dezvoltatorii retea sociala VKontakte încearcă în mod activ să creeze această rețea pentru a promova afacerile. Fă-l mai convenabil pentru afaceri sau așa ceva. Din punctul meu de vedere, acest lucru este foarte bun și este la mare căutare în rândul multor antreprenori de pe internet.

Dar cel mai important, în opinia mea, trebuie să ia în considerare cu atenție sistemul „Interdicții”, astfel încât antreprenorii să poată lucra în liniște fără a interfera cu acei utilizatori care au venit să se distreze pe rețeaua de socializare.

Cum să faci o acoperire de grup VKontakte online

Folosiți-vă creativitatea și alegeți ceea ce preferați: o copertă orizontală sau designul deja familiar VKontakte. Crearea online și instalarea unei noi coperți sunt prezentate clar pas cu pas în videoclipul de mai jos articol.

P.S. Sper că aceste informații vă sunt utile.

P.S.S. Folosește-ți creativitatea și noroc în toate eforturile tale!

Astăzi, la conferința Dribbble Meetup, Pavel Shumakov, designer principal al VKontakte, a prezentat noul design al site-ului web VKontakte, clienții mobili ai companiei pe iOS și Android, precum și o aplicație foto complet nouă.

VKontakte a ales să prelungească intriga despre noul design al site-ului și chiar a estompat captura de ecran la prezentări. Dar acest exemplu este suficient pentru a forma o impresie generală a reproiectării. Site-ul este împărțit în așa-numitele „insule” - fiecare post sau orice alt bloc este separat vizual unul de celălalt. Lățimea și fontul site-ului vor fi mărite.

Termen limită: până la sfârșitul anului 2015.

Aplicația foto VKontakte


Personal, am fost mai interesați să ne uităm la un produs complet nou de la VKontakte - aplicație foto. Acesta este un fel de analog al Instagramului. A fost anunțat la evenimentul nostru LIVE 2014, dar noi, ca și tine, l-am văzut pentru prima dată doar astăzi și am fost impresionați. Noua aplicație este dezvoltată împreună cu fotografi profesioniști. În acesta, pe lângă caracteristicile evidente, cum ar fi corecția culorii, puteți crea propriile filtre și le puteți partaja prietenilor. Aplicația este complet sincronizată cu VKontakte.


Cronologie: sperăm să lansăm aplicația în această vară, pentru că în acest moment va fi mai relevantă ca niciodată.

Mult așteptatul Material Design în clientul VKontakte pentru Android. Reproiectarea completă a întregii aplicații. Până și colegii noștri Yabloko, privindu-l, au început să fie puțin geloși. De asemenea, este posibil să comandați producția de genți cu logo. Acum acest proces va deveni convenabil și rapid.

Termen limită: în curând.

Catalog video și înregistrări noi pentru iPhone


Dar posesorii de iPhone au și de ce să se bucure. Au primit reproiectarea cu mult timp în urmă, ceea ce rămâne încă relevant, așa că la prezentare ni s-au arătat noi înregistrări și, bineînțeles, catalogul video introdus. Evident, acestea nu sunt singurele schimbări care urmează.

Reproiectare rapidă aplicații mobileși iOS. Prima actualizare a conceptelor aspect publicat în blogul oficial„VKontakte”, în care, printre altele, Knyazev a vorbit și despre munca designerilor din companie.
Tabbar va apărea din nou în clienți și iOS - o singură bara de navigare cu file în partea de jos a ecranului, acoperind funcționalitatea principală. Apropo, designerii rețelei sociale au abandonat-o în 2012. În noua viziune de design, bara de file include secțiunile principale ale VKontakte: „Știri”, „Căutare și recomandări”, „Mesaje”, „Notificări” și meniul utilizatorului. Meniu lateral, judecând după capturile de ecran publicate, aplicațiile vor fi complet eliminate în reproiectare.




Pe lângă radical nou interfata utilizator, designerii VKontakte vor adăuga mai multe inovații funcționale odată cu actualizarea viitoare a aspectului. În secțiunea „Căutare și recomandări”, vor apărea povești dreptunghiulare de la utilizatorii din apropiere, precum și un flux de postări potențial interesante de la noi autori. Designerul principal al VKontakte descrie noua sectiune ca „un lucru atât de lipicios în care poți găsi ceva de înaltă calitate și nefamiliar, ținând cont de preferințele personale”. Un contor de vizionări va fi adăugat în fluxul de știri (în prezent este afișat doar la deschiderea unei postări), iar aprecierile vor deveni roșii.

Când vor apărea cele actualizate?

Runet este slab în recenzii ale reproiectărilor site-urilor și serviciilor binecunoscute. Acest articol nu este despre remedierea asta. Scopul meu este să discut cu comunitatea o soluție la una dintre problemele versiunii web VKontakte.

În competiția de anul trecut pentru reproiectarea VK, autorii competiției au menționat problemele versiunii web. Ei au numit lățimea îngustă a site-ului drept problema numărul unu. Sunt de acord cu echipa VKontakte și am decis să-mi construiesc propria soluție pentru a combate această problemă.

Durere

Problema #1 - Ecran îngust


Pe lângă lățimea ecranului, am identificat încă 2 probleme.

Problema #2 - Stil diferit al versiunii web și al aplicațiilor



Problema #3 - Messenger

Messenger a apărut pe VK relativ recent. Prima sa versiune a fost vizibil demodată și, în timp, acest lucru a fost rezolvat. Principala problemă a messengerului, după părerea mea, este că trăiește în paralel cu site-ul. Fereastra de corespondență este mică. Și, deși este scalabil, este legat de coordonate absolute - nu este convenabil să utilizați serviciul. Pe Facebook, messengerul locuiește și separat de site, creând multe ferestre mici de corespondență.



Teorie – moduri de a deveni mai largi

Să decidem mai întâi ce este un ecran îngust. Lățimea actuală a VC este de 791 buc. Sarcina de competiție a spus să adaptăm site-ul la o rezoluție de 1024pk. După cum văd eu, soluția la problema unui ecran îngust va fi o interfață care funcționează la o rezoluție de 1024-1600 buc. Adică, interfața este capabilă să funcționeze atât la o rezoluție îngustă (1024pk), cât și la una largă (1440+pk).

1. Întindere fizică

Soluția este simplă - facem cauciucul site-ului.

Pro:
+ Ușor de implementat

Contra:
− Conținutul devine ilizibil
− Este necesară revizuirea completă a unor secțiuni ale site-ului (de exemplu, prietenii)

2. Prezentare paralelă

Tehnica a fost văzută în conceptul de reproiectare Facebook al iA din 2006 - comentariile sunt situate în dreapta postărilor. Acum 5 ani l-am încercat pe unul dintre proiectele mele.

Pro:
+ Postările sunt aranjate liniar, fără a fi întrerupte de comentarii
+ Comentariile la postări sunt vizibile imediat, fără tranziții suplimentare

Contra:
− Densitatea neuniformă a informațiilor pe ecran
− O versiune pentru 1024 buc poate fi creată cu mare dificultate sau este forțată să difere de cea largă
− Este necesară revizuirea completă a unor secțiuni ale site-ului

3. Panouri glisante

O abordare care a devenit populară în serviciile web: sisteme SRM, manageri de activități. Ecranul este format din panouri dependente. Panourile apar unul în dreapta celuilalt, dacă ecranul nu conține totul, atunci panourile din stânga sunt ascunse pe măsură ce apar cele din dreapta.

Pro:
+ La rezoluții mici poți schimba panourile, la rezoluții mari poți afișa totul deodată
+ Asemănarea interfeței cu versiunea pentru tablete

Contra:
− O opțiune necunoscută utilizatorilor web
− Site-ul nu este situat în centrul ecranului, ci în stânga
− Volum mare de lucrări de arhitectură
− Fără vizionare liniară, trebuie să dați clic pe știri pentru a citi comentariile

4. Două ferestre

Interfață cu două secțiuni active de lucru pe ecran.

Pro:
+ Necesită câteva modificări la interfața actuală

Contra:
− Nu este clar cum să lucrezi cu 2 moduri în același timp și de ce

5. Două coloane

Modul de afișare a informațiilor este similar cu cronologia de pe Facebook. Conceptul bazat pe această opțiune este wonîn competiția de reproiectare VK.

Pro:
+ Informații ușor de organizat
+ Densitate uniformă a datelor pe ecran

Contra:
− Atenție divizată la citirea știrilor
− Facebook

6. Carduri

Trecerea de la povestirea verticală la o grilă. Exemplu - Pinterest.

Pro:
+ Scalează cu ușurință la orice rezoluție

Contra:
− Conținut dificil de perceput (dificil de reînvățat)
− Este necesară revizuirea completă a tuturor secțiunilor site-ului

Practica este soluția mea

Mi-am bazat soluția pe a patra abordare: un ecran cu două ferestre active. A doua fereastră este mesagerul. Acest lucru vă permite să discutați în timp ce citiți știrile. Fără a utiliza 2 file de browser.

Pe mic (<1440пк) экранах окно чата сворачивается.

Dacă doriți, se deschide deasupra conținutului principal. Scenariul conversației în timp ce citiți știrile funcționează în același mod.

Panoul utilizatorului însuși cu cea mai recentă corespondență rămâne pe ecran în toate secțiunile site-ului:

Detalii din culise

Dacă te uiți cu atenție la capturile de ecran, poți vedea alte modificări în interfață:

1. Context. A fost adăugat un fundal pentru a crește contrastul blocurilor.


2. Împărțirea în blocuri. Posturile au fost separate în blocuri independente.


3. Like-urile au crescut. Poate cea mai controversată schimbare și, probabil, merită o discuție separată.

4. Meniul de sus anterior a dispărut. Toate funcțiile sale au fost deja duplicate în secțiuni ale site-ului. În locul lui era nivelul filei. Astfel, a fost posibilă reducerea unui etaj de navigație. Filtrele (un element rar folosit) s-au mutat în lista derulantă. Un alt etaj de navigație lipsește.

5. Două moduri de vizualizare a prietenilor. Unul este împrumutat din versiunea web, celălalt de pe tabletă. Este dificil de evaluat care este mai popular și mai convenabil.


6. Note personale. A apărut un bloc de note personale despre fiecare prieten. Dacă vă place, obțineți-l aici - VK Memos.

7. Apeluri web. Erau deja în VK înainte, dar au fost făcute ca un mod separat de operare. Acum, aceasta este o funcție invizibilă care nu interferează cu navigarea și comunicarea de bază.


În loc de un postscript

Este posibil să reproiectezi o rețea socială fără un prototip al paginii de utilizator?
Versiunea actuală este supraîncărcată cu informații: muzică, videoclipuri, grupuri, pagini publice, fotografii, fotografii de pe o hartă, albume foto, prieteni, prieteni comuni, prieteni online, abonați... Am hotărât să întrerup toate lucrurile inutile:


Asta e tot, mulțumesc pentru atenție.

Scrieți despre noul design? Ei bine, în sfârșit!

!!! Atenţie!!! În general, vă avertizez imediat că evaluez designul nu doar ca utilizator, ci și ca designer (inclusiv pe cei care țin de web) și voi scrie multe nu numai despre designul în sine, ci și despre motivul pentru care există atât de multe nemulţumit. Și vor fi multe scrisori!

Cât despre motivul pentru care totul este atât de neobișnuit:

De îndată ce la 1 aprilie (ceea ce a făcut pe toată lumea să se îndoiască foarte mult cu privire la gravitatea actualizării) a devenit disponibil un nou design cu testare beta limitată, am intrat imediat pe blogul VK și m-am conectat. După aceea, am început să sar prin toate secțiunile și să văd ce se întâmplă. Chiar în prima zi am găsit vreo cinci bug-uri, pe care le-am trimis imediat la administrație pentru corectare. Singurul lucru care nu a fost reparat este că ei îl consideră logic (faptul că nu poți trimite o imagine unui prieten, de exemplu dintr-o comunitate sau feed, și apoi să o salvezi într-un album. Logica este că se spune că ai trimis-o singur, deci de ce să-l salvezi), dar chestia asta a fost în designul trecut.

După aceea, am postat în comunitatea mea cu un rezumat al reproiectării și un vot. A devenit interesant cum vor reacționa primii utilizatori. Cei mai mulți s-au plâns că nu au putut găsi anumite funcționalități, de exemplu, un comutator de comutare în mesaje (care este ușor de găsit dacă treci cu mouse-ul peste marginea casetei de dialog). Da, astfel de elemente de interfață sunt foarte neobișnuite în comparație cu tot ce s-a întâmplat recent în RuNet. Dar aceasta nu este o problemă cu noul design. Aceasta este o problemă cu gândirea de design care a apărut în RuNet în ultimii ani. Foarte rar facem designuri progresive și bune (!) care devin mai convenabile și evoluează lin și uniform, permițând utilizatorului să se obișnuiască cu elemente noi care sunt mai intuitive și mai corecte din punct de vedere UX (experienta utilizatorului este acea parte a interfeței). design care este responsabil pentru accesibilitate utilizator și comoditate). În schimb, avem vârfuri ascuțite la cei mai progresiști ​​dezvoltatori, care provoacă un val de neînțelegeri din partea utilizatorilor. Și toate acestea pe fundalul unui număr mare de site-uri cu un design teribil, care este incomod, dar pur și simplu familiar. Și totul pentru că site-urile web sunt de obicei realizate fie ieftin, fie conform principiului „așa procedează”. Cei care au potențial și pot face progrese pur și simplu nu lucrează pentru banii care sunt oferiți pe RuNet și merg să facă o muncă bună și costisitoare pentru băieții străini. Totul este foarte trist și de aceea introducerea noului design VK seamănă cu botezul lui Rus. Dar după un timp, utilizatorii se vor obișnui, își vor aminti unde s-au schimbat lucrurile și vor înțelege că totul nu este atât de rău.

Despre faptul că „tuns pentru Facebook, măcar ai un feed fără like-urile altora!”

Cert este că designul evoluează și până acum este considerat optim, ceea ce se mai numește și designul formelor și al conținutului. A fost dezvoltat nu cu mult timp în urmă de Google și mulți oameni l-au luat.

Totul din el se bazează pe elemente și accente proporționale, ceea ce îl face foarte simplu și ușor de înțeles în mâinile pricepute ale dezvoltatorului. Toate aceste panouri cu un profil care alunecă în stânga în aplicații, de exemplu, asta este tot.

Să ne amintim cum arătau aceleași telefoane acum 10-15 ani. Fiecare model Nokia era ceva complet nou: toate aceste panouri glisante, ecrane pliabile în toate direcțiile, cele mai nebunești dispoziții de tastatură - totul a fost foarte mișto. În același timp, nu îmi amintesc nicio plângere cu privire la lipsa de înțelegere a noilor produse, totul a fost atât de nou, interesant și cool!

Dar odată cu progresul, totul s-a redus la o simplă farfurie cu un nasture deasupra și doi în lateral (sau trei pe spate ca LGE). Acum produsul este fie ca al altcuiva, fie nou și de neînțeles. Acum nu mai are rost să reinventăm roata, mai ales dacă va fi mai puțin convenabilă decât cea care există deja. Doar că acum designul dispozitivelor și interfețelor, designul web au ajuns la optim și devine din ce în ce mai dificil să faci mai bine. Marii producători nu sunt atât de proști încât să se copieze între ei, sunt atât de deștepți încât acceptă regulile care determină comoditatea și au ajuns în sfârșit la un concept comun.

Același lucru este valabil și pentru designul rețelelor sociale. Ultimul lucru pe care îl doresc dezvoltatorii este să li se spună că au furat designul. Nu. Nimeni nu te va judeca dacă faci un scaun asemănător cu mii de alte scaune. Ikea face exact asta: fac lucruri dureros de banale, dar simple și bune. Atunci care este problema cu designul web?

Acum, iată „gândirea” mea subiectivă despre cel mai nou VK:

A devenit mai bine. Acesta este adevărul. Versiunea veche s-a schimbat atât de puțin încât seamănă mai mult cu vechile forumuri tematice din anii 2000 decât cu o rețea socială modernă. Acum versiunea mobilă și aplicațiile au multe în comun cu site-ul. Acest lucru este minunat. Între ei a apărut o legătură logică. Aceste avatare urâte cu mai multe etaje pe o jumătate de pagină cu „Abonare” și așa mai departe au dispărut din comunități. Acum puteți verifica notificările făcând clic fără a părăsi pagina, acestea sunt doar aprecieri și răspunsuri, și nu o coloană pentru contemplare separată. Fotografiile cu răspunsuri se completează acum una pe cealaltă atunci când sunt deschise, în loc să coboare la nesfârșit.

Despre mesaje: Comunic foarte mult pe VK (5-20 de dialoguri pe zi) și acest nou format mă face foarte fericit. Cei care nu sunt mulțumiți pot trece cu ușurință la vechiul format făcând clic pe roata din partea de jos a ecranului și modificând setările. Toată lumea ar trebui să fie fericită, nu?

În același timp sunt de acord