Share
Proaspăt pe tocuri de achiziție Yahoo! de la Tumblr, Yahoo! a implementat o reproiectare completă a Flickr.com. Acest lucru a fost întâmpinat cu unele critici puternice, precum și cu o laudă puternică, multe dintre ele fiind atribuite noii lideri Yahoo!, Marissa Mayer. În acest articol, vom vorbi despre deciziile de proiectare și despre unele detalii de implementare în redesign și vom deschide o conversație despre achiziționarea de către Yahoo! a lui Tumblr.
Rolul Flickr este adesea pus la îndoială de criticii Yahoo !, deoarece Facebook a depășit-o ca fiind cel mai popular serviciu online de încărcare a fotografiilor. În această reproiectare a Flickr, vedem un set interesant de priorități reflectat, pe care îl vom discuta în această secțiune.
Aceste priorități reflectă faptul că Flickr vizează o audiență de pasionați de fotografie.
Privind la o selecție aleatorie de fotografii de pe Facebook, veți vedea cel mai probabil o colecție de fotografii prietenoase la plajă sau fotografii "selfie". Chiar și în reclamele Facebook, vedem imagini care sunt conduse de un singur factor: captarea momentelor conduse de societate.
Scriitorul Justin Rocket Silverman învață arta "selfie" Cu toate acestea, privind pagina de pornire Flickr, nu vedem o singură imagine care ar fi considerată în primul rând "socială". În schimb, vedem o selecție de imagini în natură sau animale de companie, cu câteva alte fotografii fotografiate. Aceste imagini sunt cel mai bine înțelese ca fiind extrem de intenționate, luate de fotografi entuziaști.
Pagina de pornire a Flickr împinge câteva mesaje și o singură chemare la acțiune. Mesajul principal este spațiul liber de terabyte al spațiului pentru imagini și videoclipuri de la Flickr. Acestea subliniază acest lucru în mesajul principal de aterizare: "Smile, toată lumea primește un terabyte liber" și mai departe în cel de-al doilea slide "Biggr" de sub fold, ceea ce permite utilizatorului să vadă câte imagini dintr-o rezoluție dată le-ar putea încărca pe Flickr.
Glisorul megapixel trece de la 0 la 16 megapixeli. Al treilea diapozitiv explică faptul că utilizatorii își pot încărca imaginile la rezoluția lor originală și nu se pot aștepta la nici o pierdere de calitate.
Aceste mesaje vorbesc puternic cu entuziaștii de fotografie; având destul spațiu liber pentru a încărca imagini de înaltă calitate este important pentru fotografi. În schimb, Facebook nu comunică implicații de calitate sau spațiu pentru încărcarea imaginilor.
Noul Flickr este hiper-concentrat pe experiențe foto-centrice. În general, acest lucru plasează conturile de utilizator ca element secundar de conținut. De exemplu, atunci când un utilizator se conectează, pagina "acasă" prezintă un flux de imagini și interacțiunile asociate de la alți utilizatori. Grupurile de utilizatori conectate pot fi văzute la dreapta. Dacă faceți clic pe o fotografie, se deschide o casetă de lumină navigabilă.
De asemenea, Flickr a creat o nouă experiență de prezentare. Bara de căutare se concentrează în mod prestabilit pe încărcările utilizatorilor (mai degrabă decât pe "profilele" utilizatorului). Următoarele două opțiuni sunt fotografiile tale personale, apoi fotografiile "de contact". În cele din urmă, tipul de căutare poate fi schimbat în grupuri și, în sfârșit, pentru membri.
Ca efect secundar al hiperfocalizării lui Flickr asupra fotografiei și a oamenilor care îi interesează, putem vedea rapid că scopul lui Flickr nu este acela de a concura cu Facebook. În schimb, trebuie să devină serviciul cloud de fotografie pentru entuziastul mediu de fotografiere și fotograful profesionist de carieră pentru a stoca și a discuta fotografii.
Acest lucru nu trebuie să diminueze interacțiunile activate de noua reproiectare. De fapt, interacțiunea și conversația sunt încurajate mai mult decât precedentul Flickr, care a fost în primul rând orientat spre afișarea fiecărui utilizator individual cu cele mai recente fotografii încărcate. Dar interacțiunile sociale ale Flickr se învârt în întregime fotografiile; de fapt, pe pagina de profil a unui singur utilizator, nu există nici un "perete". În schimb, există un flux de fotografii încărcate de utilizator, care pot fi ușor lansate într-o prezentare de diapozitive. Dacă vă place un anumit utilizator, puteți să le "urmați" (Tumblr, anyone?), Care va aduce fotografiile acelui utilizator și comentariile asociate feed-ului dvs. de acasă conectat.
Utilizatorii pot accesa FlickrMail, dar numai dacă au adăugat persoane la Contacte; în plus, accesul la FlickrMail este oarecum îngropat.
Grupurile pot posta "discuții" foarte simple, care sunt ca și posturile pe forum; cu toate acestea, comunicarea ulterioară este relativ limitată la comentariile pe fotografii.
Flickr nu este confuz sau nefocalizat; în schimb, se concentrează în mod clar pe crearea unui loc unde să vorbească și să stocheze fotografii.
Așa cum este obiceiul cu seria "Cum au făcut-o", vom petrece ceva timp vorbind despre aspectele tehnice ale noii implementări. Această secțiune nu se referă la strategia globală sau nu este eficientă sau nu; în schimb, această secțiune este împachetată cu sfaturi și trucuri bazate pe implementarea Flickr.
Designul lui Flickr nu a înregistrat o actualizare semnificativă de aproximativ șapte ani. În acel moment s-au înregistrat progrese importante în domeniul calculului, inclusiv accesul mult mai larg la bandă largă, o creștere generală a vitezei în bandă largă și o schimbare masivă către mobilitate și accesibilitate pe mai multe dispozitive. Din acest motiv, Flickr din 2012 părea destul de datat, bazat în primul rând pe o focalizare a miniaturilor cu lățime de bandă redusă, prezentând în general o imagine de rezoluție mai mare la un moment dat. Mai mult, Flickr înainte de reproiectare nu a profitat de multe din avantajele noilor tehnologii ale browserului.
Flickr din trecut Am postat despre parallax pe Tuts + de multe ori înainte. La deschiderea unei conversații despre tehnicile de parallax, una dintre primele probleme abordate este performanța. Prea des, paralaxa este implementată în moduri naive, cum ar fi o variație a următoarelor (sau mai rău).
Notă: acest lucru presupune că site-ul utilizează jQuery ...
$ (this)) .css (marginTop: $ (fereastra) .scrollTop () * ($) .5);););
Pentru un exemplu, verificați acest pix!
Ce e în neregulă cu această abordare? Mai întâi, fiecare eveniment de derulare execută funcția apelată. Nu există nici o cache a obiectelor JavaScript, nici o deplasare de defilare și tot atât de importantă, aceasta nu face uz de transformările CSS3 sau de accelerarea hardware.
Efectuarea unor modificări simple poate contribui la o creștere drastică a performanței interacțiunii cu evenimentele de tip scroll, iar Flickr a făcut exact acest lucru. Iată funcțiile JavaScript primare utilizate în tehnica de parallax. (Am luat libertatea de a adăuga câteva comentarii pentru înțelegere.)
Accentsconagua
(funcția () // setarea variabilelor care urmează să fie utilizate în timpul var useTransform = true; var useParallax = true; var ua = navigator.userAgent; var winLoc = window.location.toString (); // potrivire useragent pentru îmbunătățiri progresive var / var = \ var \ / newer \ _ie = ua.match (/ msie (9 | [1-9] [0- 9])) / i); var este \ _older \ _ie = ua.match (/ msie / i) &&! Este \ _newer \ _ie; var este \ _ancient \ _ie = ua.match (/ msie 6 / i); var is_mobile = ua.match (/ mobile / i); // pentru a vedea performanța paginii cu transformări 2d (în loc de 3d), vizitați http://www.flickr.com/#transform=2d var use2DTransform = (ua. (/ msie 9 / i) || winLoc.match (/ transform \ = 2d / i)); var requestAnimationFrame = null; var prefixes; var; = noua data (); // Urmatoarele doua verificari potential folosite pentru depanare sau pentru dispozitive sau link-uri specifice. // Pentru a vedea performanta paginii fara transformari (margin-top implementati pe), vizitați http://www.flickr.com/#notransform dacă (winLoc.match (/ notransform / i)) useTransform = false; // pentru a vedea pagina fără parallax, vizitați http://www.flickr.com/#noparallax dacă (winLoc.match (/ noparallax / i)) useParallax = false; // Verificați variabilele de agent utilizator pentru a decide dacă să utilizați parallaxul sau nu. dacă (is_mobile || este \ _ancient \ _ie) useParallax = false; // Dacă url-ul are "useraf" în acesta, utilizați cadrul de animație a cererii dacă (winLoc.match (/ useraf / i)) requestAnimationFrame = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame); // configurarea prefixelor de transformare prefixes = webkit: 'webkitTransform', firefox: 'MozTransform', adică: 'msTransform', w3c: 'transform'; dacă (useTransform) if (is_webkit) transform = prefixes.webkit; altfel dacă (is_firefox) transform = prefixes.firefox; altfel dacă (este \ _newer \ _ie) transform = prefixes.ie; // Funcția principală pentru elementele parallaxului // ia un containerNode param, care este poziționarea relativă // a părintelui parallax absolut poziționat. funcția ParallaxItem (containerNode) // configurați unele vars pentru valorile cache în întregul container var, bgElements, offset, bgHeight, containerHeight, maxScrolls, înălțime; // cache o instanță înfășurată YUI a containerului, similar cu $ (containerNode) în jQuery container = Y.one (containerNode); // a obține elementele cu o clasă de "parallax-fundal" în interiorul containerului. // Pagina de pornire are doar un element pentru fiecare container, dar aceasta poate să scadă pentru a avea mai multe elemente bgElements = container.all ('. parallax-background'); // funcția de a actualiza variabilele pentru fiecare funcție de element parallax refreshCoords () offset = container.getY (); containerHeight = container.get ("offsetHeight"); bgHeights = []; maxScrolls = []; bgElements.each (funcție (element) height = item.get ('offsetHeight'); bgHeights.push (înălțime); // parcurgerea maximă a fiecărui container este înălțimea offsetHeight - parallax a containerului + 2 maxScrolls.push (containerHeight - înălțimea + 2);); // funcția actuală parallax funcția de mișcare refresh (docScrollY) var i, j, defilați, transformParam; i = 0; bgElements.each (funcția (bgElement) // derulați este setată la maximul maxscroll al elementului și poziția de defilare // a documentului minus decalajul containerului curent // împărțit la înălțimea containerului înmulțită cu scroll-ul maxim scroll = -Math.round (((docScrollY - offset) / containerHeight) * maxScrolls [i]); scroll = Math.max (scroll, maxScrolls [i]); var transformParam; , '+ scroll +' px, 0px) '; altceva transformParam =' translateY ('+ scroll +' px) '; if (transform && transformParam) bgElement.setStyle (transform, transformParam); prefixes.w3c, transformParam); altceva bgElement.setStyle ('marginTop', derulați + 'px'); i ++;); refreshCoords (); return refresh ': refresh,' refreshCoords ': refreshCoords // aceasta rulează funcția "refresh" pentru parcurgerea parallaxului dacă există elemente parallax, // trecând în poziția curentă de defilare a funcției document refreshParallaxItems () var docScrollY = Y.DOM.docScrollY (); dacă (! parallaxItems ||! parallaxItems.length) return false; pentru (var i = 0, j = parallaxItems.length; i < j; i++) parallaxItems[i].refresh(docScrollY); function scrollWatcher() if (requestAnimationFrame) requestAnimationFrame(refreshParallaxItems); else refreshParallaxItems(); function addParallaxItem(containerNode) parallaxItems.push(new ParallaxItem(containerNode)); if (!scrollHandler) scrollHandler = Y.on('scroll', scrollWatcher); // finally, this actually goes through the parallax items and adds them to memory, // which sets up all of the event watching, etc if (useParallax) nodes = Y.all('#flickr-frames .parallax-item'); nodes.each(function (item) addParallaxItem(item); ); // Whenever a PhotoListView is rendered, // refresh the coordinates of the parallax pieces Y.on('PhotoListView:render', function () var now = new Date(); if (now - lastExec > 250) pentru (var i = 0, j = parallaxItems.length; i < j; i++) parallaxItems[i].refreshCoords(); lastExec = now; ); // Load in the coordinates of the parallax pieces when the document loads refreshParallaxItems(); ()); Consultați comentariile pe care le-am adăugat pentru a înțelege mai bine ce se întâmplă aici. Acest lucru poate părea un pic cam descurajant, mai ales dacă nu sunteți familiarizați cu utilitățile YS nodului YS al Yahoo !. În loc să vă prindeți toate detaliile acestui cod, să examinăm câteva piese importante care contează.
Mai întâi vedem utilizarea extensivă a cache-ului variabil. Aceasta include setarea înălțimilor maxime, offseturilor etc. într-o reîmprospătare. Apoi, vom vedea folosirea îmbunătățirii progresive pentru a defini când să folosim transformări 3D, 2D sau nu. Acest lucru îmbunătățește foarte mult performanța pentru browserele mai noi. În plus, transformările 3D sunt acceptate în toate browserele majore actuale (cu excepția Opera și Opera Mini), ceea ce înseamnă o îmbunătățire semnificativă a performanței prin accelerarea hardware, care apare atunci când se utilizează transformări 3D pe un element dat. (Consultați acest articol pentru mai multe informații). Acest lucru ajută pagina de pornire să realizeze framerate mult mai mari - de obicei la sau peste 60fps.
Este interesant faptul că echipa Flickr dev a lăsat niște bucăți aparent neutilizate în codul sursă, cum ar fi switch-uri de funcționalitate bazate pe url care permit sau dezactivează lucruri precum paralaxă și transformă. Poate că acesta este folosit pentru anumite redirecționări ale dispozitivului; aceasta ar fi fost o tehnică de depanare pe care echipa de jucători dev a uitat să o scoată. De asemenea, ar putea fi un indiciu pentru a juca în jurul valorii de cu aplicația și a vedea avantajele de performanță de a folosi aceste tehnici diferite. Oricare ar fi, este o explozie de a juca cu o dată ce o găsiți și nu are practic impact de performanță.
O altă notă despre implementarea parallaxului: Flickr a evitat complet utilizarea dimensiunii de fundal pentru containerele de imagini și a evitat și dimensiunea ecranului pe tot ecranul, optând în schimb pentru elementele containerului parallax în general. De ce? Performanța background-size: capac este teribil, provocând framerate scăzute și, în general, o experiență de utilizator degradată. În schimb, Flickr a ales să încarce imagini de fundal mai mari; 2048x850, pentru a fi exact. Aceasta acoperă lățimea aproape a oricărui ecran și oferă suficientă înălțime pentru a realiza o implementare eficientă a paralaxelor. Refacerea browser-ului este redusă semnificativ.
Într-o funcție de vizionare a derulării scroll-ului, apelul final de la partea de jos a paginii de pornire Flickr trece în timp ce utilizatorul scroll pe un perete de fotografii justificate orizontal de la utilizatori. Animația este alimentată de tranzițiile CSS3, incluzând un filtru de blur webkit de 12px, opacitate și scalare. Apelul la acțiune include o tipografie mare (pentru a fi exactă 10 sau 144 de pixeli) și un buton cu stil CSS3 foarte potrivit.
Aici este CSS pentru buton.
/ * Webdesigntuts + notă: prefixele specifice browserului au fost șterse * / display: inline-block; umplutura: 0px 2m 5px 2im; font-size: 2m; Înălțimea liniei: 1.75cm; greutatea fontului: 400; text-decoration: nici unul; fundal: # ff0084; culoare: #fff; box-shadow: 0px 2px 8px rgba (0,0,0,0,5); raza de graniță: 5px; fundal-imagine: gradient linear (fund, rgb (215,0,104) 35%, rgb (243,0,111) 84%); fundal-clip: padding-box;
Destul de simplu, dar eficient. Site-ul intern, odată ce un utilizator sa înscris, are în mod similar elemente mari, cum ar fi formularul de încărcare.
Îmbunătățirile mici de pe pagina de pornire funcționează, de asemenea, pentru a îmbunătăți experiența utilizatorului. De exemplu, glisorul megapixel utilizează un element de date inline pentru mâner, în timp ce glisorul utilizează numai gradienți CSS și alte definiții. Nu sunt solicitate cereri http pentru nici o parte a cursorului, altul decât JavaScript asociat.
Umbrele foarte ușoare de text sunt folosite pe anteturi pentru a le ridica puțin din imaginile de fundal asociate. Culorile de fundal semi-transparente (RGBa) sunt utilizate pentru bara de navigare de sus, precum și pentru titlurile imaginilor de perete. Flickr utilizează, de asemenea, șabloane Mustache pentru peretele imaginii. Toate aceste elemente fac aluzie la faptul că Flickr se străduiește să mențină un design mult mai important în front-end.
Iată câteva gânduri despre lucruri care ar putea fi mai bune cu noul Flickr sau despre care să vă gândiți în practicile de dezvoltare.
În acest moment, strategia mobilă adoptată de Flickr se bazează pe două puncte principale: aplicații native și un site specific pentru dispozitive mobile. Site-ul mobil specific este mult mai puțin atractiv decât versiunea desktop. Având în vedere simplul fapt că mobilitatea crește mai repede decât oricând, această reproiectare ar putea și ar trebui reconsiderată ca o oportunitate de a adopta strategii responsabile. Versiunea desktop a site-ului este mai puțin decât ideală la ceva mai mic decât 960 de pixeli. Aceasta aruncă mai multe tablete mai mici și aproape orice telefon.
Cele mai bune practici ne indică faptul că paginile de pornire cu chemare la acțiune și paginile de tip splash nu sunt cel mai bun loc pentru încărcarea conținutului aplicației. Cu toate acestea, Unele dintre script-urile încărcate pe noua pagină de pornire Flickr.com sunt folosite în restul aplicației. Ar fi benefic să creăm în schimb un singur fișier JavaScript mai mic, care să se bazeze mai puțin pe biblioteca YUI, și mai mult pe ascultători de evenimente simple, selectori și funcții AJAX.
Acest fișier JavaScript trebuie să fie minimizat, de asemenea; cu toate acestea, este posibil ca acesta să nu fie minificat de dragul dezvoltatorilor care doresc să privească la sursă. (Consultați descrierea dezvoltatorului la sfârșitul acestui articol.)
User-Sniffing agent este o veste proastă dacă nu verificați cu atenție fiecare șir cu fiecare dispozitiv (mai puțin practic decât este util). Din nefericire, folosirea unui șir simplu ca "mobil", așa cum face Flickr aici, nu este suficient pentru a spune definitiv dacă suntem sau nu pe un dispozitiv mobil. Sigur, acest lucru poate acoperi un procent semnificativ de dispozitive, să zicem chiar 99%, dar când 99% din cei 200 de milioane de oameni, ieșiți din 2 000 000 de dispozitive.
De asemenea, este puțin probabil ca utilizarea unui element care îmbunătățește drastic performanța, cum ar fi transformările, ar trebui să fie limitat prin simpla mișcare a UA. În schimb, utilizarea unei suite de detectare a caracteristicilor, cum ar fi Modernizr, ar fi mai benefică și mai definitivă a abilităților utilizatorului de browser. Văzând că Modernizr este susținut de unii dintre cei de la Google, nu este surprinzător faptul că nu îl vedem pe Flickr, însă conceptul care stau la baza este simplu și testele sunt ușor de replicat.
Etichetele OpenGraph sunt esențiale pentru partajarea unui site pe Facebook. Partajarea unui site pe Facebook este o funcție de bază a web-ului pentru mulți utilizatori. Din păcate, dacă un site nu implementează în mod specific meta-tagurile OpenGraph, elementul de legătură partajată pare destul de gol într-un feed de știri Facebook.
Dacă Flickr se află într-adevăr în concurență cu Facebook, acesta ar putea fi un pariu pe care îl va ajuta să-i transforme pe oameni împotriva Facebook sau să disocieze pe deplin Flickr de pe Facebook. Sau ar putea fi doar o supraveghere. În orice caz, mă face (și probabil și alți utilizatori) să evite partajarea Flickr.com cu prietenii mei din Facebook.
Bine, înțelegem că Flickr (și Tumblr) nu-i plac pe er. Dar, vine un punct în care îndepărtează scrisorile din cuvinte enervant și brânzos, și chiar dificil de citit. Flickr se marchează pe acea linie. Folosind lucruri precum "Biggr", "Spectaculr" și "Wherevr", probabil, nu îmbunătățiți branding-ul sau experiența utilizatorului. Flickr este numele serviciului; "mai mare" descrie o nouă caracteristică a acelui serviciu. În caz contrar, de ce nu schimbați, de asemenea, "follower" la "follower" sau "developer" la "developer"? Pentru că nu are sens și sună ciudat de ciudat. Considerați copywriting-ul publicitar incredibil de eficient al Apple; "iPad" nu se traduce în copie ca "Ia-ți iMac-ul cu tine, iAnywhere".
O piesă interesantă Yahoo! inclus în sursa pentru Flickr este un apel pentru dev-uri de capăt, cu știri pe care Flickr le angajează. Acest logo cool ascii poate fi găsit în eticheta capului.
ad88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 "8a, aa 88" "Yba, 88 88 88 88" "Ybbd8" '88' Y8a 88 Citiți. Angajam. http://flickr.com/jobs/
Cunoscut pentru audiența sa mai tânără, cu o tendință de a fi mai agresivă decât, să zicem, utilizatorii Blogger, dar mai puțin brutale decât Redditors, Tumblr se află într-o poziție unică dobândită de un gigant ca Yahoo!.
Va fi Yahoo! ucide natura liberă a creației de conținut a lui Tumblr? Vor fi integrate Flickr și Tumblr, astfel încât utilizatorii să poată publica automat fotografiile Flickr în Tumblr? Sau va continua să existe Tumblr în mod transparent, pur și simplu cu un nou termen de serviciu care permite Yahoo! să colecteze și să utilizeze date din 109 de milioane de bloguri ale lui Tumblr și 51,2 miliarde de posturi? Ar putea fi o sursă incredibilă de date către Yahoo !, care par a fi în modul de achiziție, achiziționând PlayerScale zile după achiziționarea Tumblr.
Spuneți-ne ce credeți despre noul Flickr și ce credeți despre viitorul lui Tumblr sub îndrumarea Yahoo !, în comentariile!
