Share
În această serie voi fi în căutarea din spatele UI-ul Facebook și, în acest proces, vă va arăta cum să vă creați propria aplicație blog integrată Facebook printr-un feed RSS.
Dragoste sau ură Facebook a devenit o parte integrantă a vieții oamenilor. Pentru mulți este un instrument care ne permite să ne prindem cu vechi prieteni, să împărtășim fotografii sau să ne planificăm nopțile cu prietenii noștri. Cu toate acestea, în spatele interacțiunii sociale se află o structură complexă de planificare atentă a UI, care a fost optimizată și reefectuată.
În primele zile de Facebook nu am fost niciodată un fan al "aspectului plictisitor" și am simțit mereu că a avut potențialul mult mai mult în ceea ce privește designul. Cu toate acestea, este doar ca cunoștințele mele și experiența de a fi un designer UI a progresat pe care am realizat acum este simplitatea Facebook și ușurința de utilizare, care a permis să devină atât de succes. Designul său este cu siguranță ceva care ar trebui admirat.
În această serie de tutoriale, voi evalua UI-ul Facebook printr-o serie de studii de caz, cercetare, implementare și analiză, astfel încât să înțelegeți cum unele dintre principiile sale de proiectare vă pot ajuta să creați un aspect nativ și să simțiți aplicația Facebook . Am vrut să creez ceva care, sperăm, să vină la îndemână cititorilor Webdesigntuts + și să creadă că "nu ar fi minunat să vă arăt cum să transformați blogul dvs. Web într-o aplicație Facebook nativă". Ei bine, ai noroc, pentru că asta este exact ceea ce intenționez să fac în următoarele 3 articole. Deci, stai cu mine, fă-ți o ceașcă de ceai și proiectează-te fericit!
De la începuturi, simplitatea a fost în centrul Facebook
În februarie 2004 thefacebook.com și-a deschis porțile studenților din Harvard, înainte de ao deschide mai târziu publicului, pe 26 septembrie 2006. Conceptul general al site-ului rămâne similar cu cel inițial. Încă are antetul albastru, fundalul alb curat, anteturile coloanelor albastre și același font pe care îl utilizează astăzi, Lucida Grande. Bineînțeles, multe lucruri s-au schimbat încă din primele zile. Mark Zuckenberg a crescut și site-ul a crescut împreună cu el. Este greu să înțelegi pe deplin exact ce a fost procesul de gândire al lui Zuckenberg în primele zile ale lui Facebook, dar se pare că principalul său focus a fost să se concentreze asupra funcționalității asupra UI. Zuckenberg dă o oarecare perspectivă asupra considerentelor sale de proiectare timpurii:
Mai mult decât simțul a fost aruncat la Facebook de la încarnarea sa. Cu aceasta au venit îmbunătățiri în design-ul Facebook; puțin câte puțin, puțin câte puțin. Facebook își actualizează periodic interfața cu utilizatorul în mod obișnuit în etape și adesea este întâmpinată cu critici înainte de a fi apreciată de majoritate.
Deci, de ce doriți să proiectați aplicația dvs. ca Facebook? Depinde în întregime de dvs. cum vă proiectați aplicația Facebook. Unii dintre dvs. vor opta pentru nativ, iar alții vor proiecta ceva complet nou, care sperăm să-l complimenteze pe Facebook. Nu există nici o modalitate corectă sau greșită de a vă proiecta aplicația, dar, sperăm, înțelegând logica din spatele design-ului Facebook, va oferi design-ului dvs. cea mai bună șansă de succes.
Poate că cel mai mare avantaj al proiectării native este că va fi familiarizat cu utilizatorii dvs. Nu va trebui să învețe un nou concept de UI de la zero, deoarece vor fi deja familiarizați cu modul în care funcționează Facebook.
Alături de familiaritate stă securitatea. Utilizatorii noștri se vor simți, fără îndoială, siguri și confortabili într-un mediu pe care îl cunosc deja, spre deosebire de un design străin care stă pe Facebook. Dacă aveți în vedere vânzarea de elemente prin aplicația dvs., atunci acest sentiment de securitate de la utilizatorii dvs. ar putea duce la rate de conversie mai mari.
În calitate de designeri avem o dorință naturală de a dori să creați ceva nou și interesant, așa că respectarea liniilor directoare Facebook nu poate face apel direct la dumneavoastră, dar ce-ar fi dacă vă propuneți o provocare și proiectați ceva în stilul Facebook pe care Facebook nu Nu ai un stil direct? V-ați întrebat vreodată cum ar putea arăta o masă în stilul Facebook? Setați-vă o provocare și creați ceva care nu există încă. Vă pot asigura că această provocare poate fi la fel de distractivă ca și găsirea unui nou concept de la zero.
Multe organizații mari au un ghid de stil sau de stil. Facebook aspectul lor liniile directoare în principiile de design Facebook. Deși sunt vagi și pot fi interpretate într-o varietate de moduri, acestea vă ajută să înțelegeți ceea ce Facebook încearcă să realizeze prin designul site-ului. După cum spune Facebook:
Există anumite credințe pe care le deținem la Facebook, anumite calități pe care noi le străduim în munca noastră. Este ceea ce ne permite să dezbatem dacă ceva "Facebook" sau "Nu este Facebook", este ceea ce ne permite să evaluăm dacă orice lucru pe care îl proiectăm ar putea fi îmbunătățit.
Declarația misiunii Facebook este de a face lumea mai deschisă și aceasta are o influență puternică asupra designului. UI-ul Facebook trebuie să lucreze în toate culturile, pe toate continentele globului în fiecare limbă. Acest lucru nu înseamnă că trebuie să traduceți aplicația în orice limbă de pe planetă, dar trebuie să aveți în vedere anumite lucruri când creați aplicația.
Asigurați-vă că ați citit documentația API grafic și asigurați-vă că ceea ce intenționați să faceți este posibil. De exemplu, când am venit pentru prima dată cu conceptul de a crea această aplicație blog, am crezut că ar fi o idee bună să includeți imaginile de previzualizare de lângă postările mele de blog. Cu toate acestea, (din păcate) feed-ul Feedburner RSS (că vom aduce feed-ul de la) nu aduce în url imaginile de previzualizare. Acest lucru impune doar faptul că trebuie să planificați cu atenție aplicația. Cu cât planificați mai mult, cu atât mai ușor veți reuși. Nu este nimic mai rău decât să vă proiectați și să codificați aplicația în HTML / CSS numai pentru a afla ce ați planificat să faceți nu este disponibil sau posibil.
Un alt punct de făcut este să nu induceți în eroare persoanele cu elemente fals Facebook UI, cum ar fi butonul similar - Facebook vă va penaliza pentru acest lucru, ceea ce ar putea duce la suspendarea aplicației dvs..
Asigurați-vă că proiectați în limitele a 760 pixeli pentru aplicații sau dacă intenționați să puneți aplicația într-o pagină, nu mai mare de 520 pixeli.
Ca și în cazul oricărui site bun, este important să planificați. Au trecut mult timp zilele în care este acceptabil să sarăți direct într-un editor de cod și să codificați site-ul. În zilele noastre, vă puteți salva o mulțime de dureri de cap și de timp, prin schițarea unui wireframe. Această reprezentare grafică limitată a aplicației dvs. vă poate ajuta să planificați navigarea, căile și informațiile actuale care vor fi cele mai benefice pentru utilizatorii dvs. Vă oferă șansa de a analiza și de a evalua deciziile dvs. fără a fi influențată de design. Din fericire pentru noi astăzi există o mulțime de software și resurse pentru a ne ajuta să batem wireframes într-o chestiune de minute.
Dacă ne uităm la scheletul aplicației Facebook, puteți vedea cum am planificat:
Până de curând nu mi-a plăcut niciodată navigarea aplicațiilor Facebook. Întotdeauna am simțit că aplicațiile noastre sunt ascunse și că nu există o direcție sau o organizare clară a acestora. Din fericire, lucrurile s-au îmbunătățit în ultima vreme și au simplificat navigarea pe pagina de pornire. Acest lucru oferă un mare avantaj dezvoltatorilor noștri de aplicații, deoarece facilitează accesarea aplicațiilor noastre și mai mult în prim plan pe pagina de pornire.
Facebook spune:
Îți facem mai ușor utilizatorii să acceseze cu ușurință și să se reangajeze cu aplicațiile pe care le utilizează cel mai des. Aplicațiile platforme au acum oportunități egale pentru proprietățile imobiliare pe pagina de pornire. Pot ocupa pozițiile deținute în prezent de Tabloul de bord pentru aplicații, Tabloul de bord pentru jocuri și Fotografii, în funcție de aplicațiile pe care utilizatorul le interacționează cel mai mult.
Deci, primul lucru pe care l-ați observat este că Facebook folosește albastru ca una dintre culorile sale primare de bază. Este o alegere sensibilă de la Facebook. V-ați întrebat vreodată de ce atât de multe site-uri web (Twitter, Facebook, LinkedIn, Paypal etc.) utilizează culoarea albastră drept culoarea lor primară? Este pentru că albastrul este considerat a fi culoarea cea mai acceptabilă pe plan universal. În multe culturi diferite, albastrul este asociat cu convingerile religioase, aducerea păcii sau se consideră că păstrează spiritele rele. Albastrul este o culoare pe care majoritatea dintre noi o cunosc subconstient; este culoarea cerului și a mării. În mod universal am ajuns să asociem acest lucru cu calm. Facebook pare să aibă echilibrul doar despre dreapta, cu antet albastru și fundal alb curat, deoarece prea mult albastru poate evoca sentimente de răceală, tristețe și depresie.
Aruncați o privire mai sus și puteți vedea unele din celelalte culori pe care Facebook le folosește printre site-urile sale.
Facebook încă păstrează același font primar pe care l-a folosit în ziua de deschidere, fontul sans-serif Lucida Grande. Aceasta este apoi urmată de o serie de fonturi alternative. Dacă aruncăm o privire la CSS din Facebook, putem vedea direct familia de fonturi complete ca:
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
Fontul creat de Charles Bigelow și Kris Holmes este considerat de unii ca reflectând minimalismul, formalitatea și calitatea. Toate calitățile care îl fac alegerea perfectă a fontului pentru cea mai mare rețea socială din lume.
Textul paragrafului de pe Facebook este de 11 pixeli cu o înălțime de linie de 16 pixeli. Acest lucru îi oferă un raport bun de aproximativ 1,5, permițându-l să fie ușor de citit și uniform repartizat. Înălțimea liniei este extrem de importantă pentru text atunci când lucrați la modele curate și minime. Dacă obțineți înălțimea liniei greșite pe textul dvs., atunci acest lucru ar putea face cu ușurință un design bun într-un singur OK. Acestea sunt atributele de fonturi pe care am decis să le folosim pentru aplicația noastră de blog.
Prin ruperea câmpurilor de introducere a utilizatorilor Facebook, putem afla care dintre acestea ar fi cele mai potrivite tipului de aplicație pe care o facem. Facebook are, în general, cinci tipuri de câmpuri pentru utilizatori. Acestea sunt:
Dacă utilizatorul dvs. a trebuit să înregistreze unele detalii cu aplicația dvs., poate o adresă de e-mail pentru o competiție, atunci cea mai evidentă alegere ar fi să utilizați tipul de introducere pentru înscriere pentru ca utilizatorii să introducă detaliile acestora. Acestea sunt o alegere bună pentru acest tip de lucru, deoarece aceste câmpuri mari atrage utilizatorul și vă vor ajuta cu conversia prin înscriere. Dacă aplicația dvs. include o căutare, atunci de ce încercați și inventați roata? De ce nu folosiți căutarea în stilul Facebook? Utilizatorii dvs. vor putea deja să se refere la căutarea locală și să știe instantaneu că îi vor ajuta să găsească ceea ce caută. Este un fel de detaliu atunci când vă proiectați aplicația, care o va face să fie cea mai bună prietenie cu utilizatorul și, eventual, să îi dea cea mai bună șansă de succes!
O altă opțiune ar fi să facem ceea ce am făcut cu aplicația noastră pe blogul Facebook și să creăm o ușoară modificare care nu este pe Facebook. Observați în diagrama de mai sus modul în care comentariile și intrările de conectare au ambele plăcuțe de 3px, bine am luat acest lucru și am folosit cursa de frontieră din intrarea de actualizare a stării. Utilizarea acestui tip de combinație va rămâne în continuare în cadrul designului și va da totuși sentimentul de a fi nativ în timp ce extindem foaia de stil Facebook, respectând totodată regulile.
Ambiția Facebook în cadrul designului lor este ca aceasta să acționeze ca o pânză neagră de la care pot trăi utilizatorii lor. Acest lucru are sens, deoarece designul nu trebuie să interfereze cu ceea ce încearcă utilizatorii să realizeze atunci când sunt în aplicația dvs. Facebook crede că:
Un spațiu minim, bine luminat, încurajează participarea și o comunicare transparentă onestă.
Ca designeri uneori este greu să facem un pas înapoi. Suntem atat de obisnuiti sa stratificam desenele noastre cu gradienti, picaturi de umbre si raza de granita "ca, uneori, uitam ca cele mai simple modele pot fi cele mai eficiente. Fiind capabil să realizeze acest lucru poate fi adesea o sarcină dificilă, dar este ceva pe care fiecare designer UI ar trebui să-l stăpânească și să-l poată face. Peter Soyer a scris un articol interesant despre designul minimal. Dacă aveți nevoie de câteva idei sau de inspirație pentru astfel de lucruri, atunci ar trebui să verificați cu siguranță acest post 60 site-uri web curate și minime pentru inspirație.
Sau, desigur, puteți avea întotdeauna o privire la Facebook și puteți vedea ce elemente puteți trage din stilurile lor curente curat.
Ceva pe care probabil că nu l-ați observat înainte când navigați pe Facebook este cât de mult utilizează Facebook modelele în designul său de interfață. Acest lucru este de a încuraja utilizatorii să se familiarizeze cu aspectul lor. Facebook explică cum funcționează aceasta
Prin îmbrățișarea modelelor putem recunoaște că utilizarea noastră este mult îmbunătățită atunci când părți similare sunt exprimate în moduri similare. Interacțiunile noastre vorbesc cu utilizatorii cu o singură voce, construind încredere. Reduceți, reutilizați, nu reproiectați.
În aplicația noastră pe blog puteți vedea că am adoptat idealurile Facebook prin reutilizarea pieselor, cum ar fi anteturile tab-urilor din bara laterală. Acest lucru îl rupe ușor pentru utilizatorii noștri și le permite să scaneze rapid conținutul pentru a găsi ceea ce caută.
În prim-planul Facebook este interacțiunea socială. Utilizatorii nu mai pun doar pe calculatoare; interacționează și se conectează cu oamenii pe care îi cunosc. Ei vin pe Facebook pentru că vor să fie înconjurați de prietenii lor. Tehnologia și designul ar trebui să rămână în fundal și să nu diminueze acest aspect. Este adesea o idee bună să încercați să faceți ca aplicația să fie mai umană și mai interactivă. Din fericire pentru noi Facebook oferă graficul Facebook API, care ne permite să facem aplicația mai interactivă și să ne conectăm cu graficul lor social puternic.
Vom vorbi mai mult despre API-ul graficului în viitoarele tutoriale ca parte a acestei serii. Facebook oferă, de asemenea, modalități mai simple pentru ca aceste tipuri de interacțiuni să fie încorporate prin utilizarea oricăror pluginuri sociale, cum ar fi butonul, butonul de trimitere, comentariile și altele.
Sunt sigur că voi toți ați observat că Facebook își actualizează aspectul și caracteristicile destul de frecvent. Acest lucru nu este doar un lucru care îi deranjează pe utilizatori, dar poate, de asemenea, să-i deranjeze pe designerii și dezvoltatorii noștri. Acest lucru se datorează faptului că are capacitatea de a distruge toată munca grea pe care am pus-o. De ce să nu vă pregătiți pentru cel mai rău, astfel încât, dacă Facebook face o actualizare neașteptată, atunci suntem gata să le luăm. Din propria mea experiență cheia la acest lucru este prin a face elemente reutilizabile și pur și simplu stil.
Bineînțeles că nu știm niciodată când sau cum Facebook se va actualiza - poate veni și te mușcă în fund când nu te aștepți cel mai puțin. De fapt, atat de mult incat, pe masura ce scriam tutorialul insotitor al acestei serii, Facebook a mers si a actualizat pagina de panza a aplicatiei, facandu-mi sa redau cateva din design-ul meu. Multumesc Facebook!
Dacă vă uitați la .PSD care însoțește acest tutorial, atunci veți putea să aruncați o privire și să vedeți cum unele aspecte pe care le-am atins astăzi se referă la designul nostru. Designul nostru este stilizat în mod similar cu Facebook, în timp ce în același timp este încă unic pentru aplicația noastră. Am împrumutat și am urmărit principiile de proiectare ale Facebook, astfel încât aplicația noastră să aibă un aspect nativ și să se simtă la Facebook. Unele elemente pe care le-am adoptat pentru aplicația noastră sunt:
La începutul anului 2011 am organizat trei grupuri de discuții cu utilizatorii obișnuiți de pe Facebook pentru a afla despre obiceiurile lor de utilizare pe Facebook. Unele rezultate mi-au surprins, chiar dacă acestea erau relevante pentru aplicația în care am fost implicat. Este important să înțelegeți că Facebook are o bază de utilizatori extrem de mare și că nu ar trebui să vă bazați foarte mult pe informațiile pe care le-am adunat - propria cercetare pentru propriile criterii și demografice.
Utilizatorii pe care i-am intervievat toți au spus că au petrecut cel puțin 30 de minute până la o oră pe Facebook în fiecare zi. Mi-a surprins faptul că majoritatea oamenilor au dorit ca aplicația noastră să arate ca fiind nativă la Facebook și că fiecare utilizator a spus că se va simți mai sigur cumpără articole dintr-o aplicație prin Paypal decât să plătească cu cardul de credit. Deci, ar putea fi ceva ce trebuie avut în vedere dacă intenționați să vândați ceva prin intermediul aplicației dvs..
Stilul de interfață Facebook și psihologia din spatele ei sunt cu siguranță ceva care ar trebui admirat. Este printre cele mai de succes site-uri web ale tuturor timpurilor și o parte din motivul pentru care se datorează faptului că fac deciziile corecte atunci când vine vorba de designul lor. Gândiți-vă la asta, ar fi Facebook la fel de reușit dacă culoarea primară a pânzei a fost neagră? Este greu de a judeca cât de mult din succesul lor este până la deciziile lor UI, dar cu siguranță cred că merită un credit pentru succesul său.
Prin adoptarea și împrumutarea ideilor din principiile simple și eficiente ale designului Facebook și încorporarea acestora în propria aplicație, sunt convins că aplicația dvs. are cea mai bună șansă posibilă de a deveni un succes.
În următoarea parte a tutorialului vom analiza cum să codificăm aplicația blogului .PSD în HTML / CSS. Așa că, până atunci, curajos proiectarea peeps!
Accentsconagua