Nilalaman
- Ina-update ang disenyo ng Facebook
- 01. Ang ilusyon ng pagiging hindi nakikita
- 02. Nai-update na mga label
- 03. Pagbawas ng alitan sa pahina-sa-pahina
- 04. Pag-streamline ng typeface
- 05. Malakas na hampas ng kulay
- 06. Pagkuha ng puting puwang
- Pangwakas na pagsasaalang-alang
- Pagpunta sa karagdagang
Pagkalipas ng 10 taon, ang Facebook ay naging isa sa mga pinaka ginagamit na mga site na mayroon ... kaya bakit mukhang 10 taong gulang pa rin ito?
Bukod sa lahat ng iba pang mga kadahilanan, kilalang kilala ang pagpuna para sa hindi napapanahong disenyo ng desktop ng Facebook. Ang ilang mga taga-disenyo ay nagtanong "Bakit napakasama ng disenyo ng desktop site ng Facebook?" at pagtatalo na ang mukhang matalino, Google+ at Flipboard ay mas maaga ang taon sa Facebook - na, sa kasong ito, nangangahulugang 'kasalukuyang'.
Para sa mga kadahilanang ito, nagpasya akong bigyan ang Facebook ng isang facelift. Ang nagsimula bilang isang kasiya-siyang proyekto sa paglaon ay nabago sa libreng extension ng Facebook Flat Chrome na ipinakita ko sa ibaba.
Ang layunin ay upang gawing makabago ang Facebook, at ngayon ang flat na disenyo - o mas tumpak na 'flat 2.0' - ang hitsura ng bahagi. Tulad ng libreng gabay sa Mga Trend sa Disenyo sa Web 2015 & 2016 ng tool na prototyping na ipinapaliwanag ng UXPin, nababagay ang patag na disenyo sa kasalukuyang web landscape para sa maraming mga kadahilanan, praktikal at aesthetic.
Ang Flat ay nagbibigay ng isang gilid sa pagganap. Ang simpleng graphics nito ay ginagawang madali ang oras ng paglo-load sa mobile at desktop, lalo na kung ihahambing sa mas kumplikadong kumpetisyon ng biswal.
Ang mas mabilis na oras ng paglo-load na ito ay pinagsasama sa isa pang bentahe ng flat na disenyo, kadalian sa pag-aayos para sa iba't ibang laki ng screen, upang gawing hindi kapani-paniwalang tumutugon-friendly ang istilo ng disenyo. Mula pa nang magsimula ang mga gumagamit ng mobile nang higit sa bilang ng mga gumagamit ng desktop, ang flat na disenyo ay nakakakuha ng momentum para sa karanasan sa aparatong-agnostiko.
Sa wakas, ang flat na disenyo ay maaaring mabawasan ang kumplikadong nilalaman ng Facebook sa isang pangunahing, madaling maunawaan na layout.
Sa isang site tulad ng Facebook, maraming nangyayari sa screen, kaya ang patag na disenyo ay tila halatang pagpipilian para sa pag-aayos ng nilalamang ito sa isang paraan na tila hindi napakalaki. Hindi lamang isang mapagpipiling pagpipilian, pinapayagan ng flat na disenyo ang mga gumagamit na bigyang kahulugan ang data at hanapin kung ano ang kailangan nila nang mas mabilis, pagdaragdag ng kakayahang magamit.
Hindi na ang mga aesthetics ay bale-wala - alam namin na mas mahusay ang hitsura ng isang produkto, mas mabibigyan ng mas mahusay na mga gumagamit na ito ay gumagana.
Kailangan mong tumingin nang walang malayo sa Apple para sa suporta ng flat na disenyo. Inabandona nila ang kanilang trademark skeuomorphism para sa flat-inspired na hitsura ng pinakabagong mga bersyon ng iOS.
Ina-update ang disenyo ng Facebook
Tulad ng nabanggit ko sa itaas, ang isa sa mga malalaking isyu sa UI ng Facebook ay labis na nilalaman, lahat ay nakikipagkumpitensya sa bawat isa. Nang suriin ko nang kritikal ang site, tila maraming nilalaman na iyon ay hindi kinakailangan, kahit papaano na maging palaging nasa kasalukuyan sa pahina.
Upang mahanap ang isang item na hinahanap mo, kailangan mong i-scan ang isang dagat ng mga katulad na item, sa isang mode na 'Nasaan ang Waldo', na maaaring maging nakakabigo sa pag-access ng iyong sariling nilalaman. Ang mas maraming mga pagpipilian na dapat hanapin ng gumagamit, mas maraming malikhaing pagkarga ang nilikha, na nagdaragdag lamang ng lag sa UX. Ang kanilang sistema sa pag-navigate ay malabo at in-need ng isang trim.
Siguradong maraming nilalaman na iyon - ang timeline, larawan, laro, atbp - ay nauugnay. Ngunit sa kabilang banda, marami hindi. Ngunit paano mo muling idisenyo ang isang interface upang masiyahan ang lahat ng mga gumagamit ng isa sa pinaka-magkakaibang madla ng mga gumagamit sa internet?
01. Ang ilusyon ng pagiging hindi nakikita
Kapag nagdidisenyo ng isang bagong interface, dapat mong isaalang-alang ang mga pagganyak ng gumagamit sa tabi mismo ng anumang mga interes sa pananalapi. Ang isang tanyag, ngunit mapanganib, sanay ng pag-iisip ay upang mapansin ang isang kumpanya, dapat nilang iguhit ang pansin sa sarili nito at mahusay na mga bagong tampok. Ngunit ang gumagamit ay may kaugaliang mas gusto lamang ang kabaligtaran.
Ang pinaka-kapaki-pakinabang na UI ay ang mga nakalimutan mong naroon. Tulad ng isang hindi nakikitang kamay, ginagabayan nila ang gumagamit sa buong kanilang mga layunin nang madali hangga't maaari. Ang 'Slippy UX' na ito ay dinisenyo sa paligid ng gumagamit na naglulutas ng kanilang mga problema. Nang walang mga nakakaabala, ang gumagamit ay malayang mag-concentrate sa gawaing nasa kamay.
Sa tuwing isasaalang-alang mo ang pagdaragdag ng mga bagong elemento sa iyong UI, tanungin ang iyong sarili, kailangan ba talaga ito ng gumagamit?
Para sa Facebook, ang mga pangunahing layunin ng gumagamit ay tungkol sa paghahanap ng nilalamang pinapahalagahan nila. Upang mapadali ito, inalis ko ang mga listahan ng kanang bahagi ng stats tulad ng 'Mga kamakailang post' at 'Trending': ito ang pangalawang mga pagpapaandar na nakakagambala mula sa pangunahing. Bilang isang resulta, ginagawang mas madali ng bagong interface para sa mga gumagamit na magsala sa kanilang feed upang makita kung ano ang pinahahalagahan nila.
02. Nai-update na mga label
Ang isa sa mga pinaka nakakalito na aspeto ng Facebook ay palaging ang kaliwang menu. Para sa ilang kadahilanan, ang mga elemento ay nakalista nang hindi maintindihan. Ihambing lamang ang UI noong 2004 at 2015:
Ang orihinal na disenyo ay talagang isang pagpapabuti sa kasalukuyang isa, kahit na wala silang gaanong mag-alala. Upang mapangasiwaan ang kasalukuyang pag-load ng nilalaman ng Facebook, kailangan ko ng isang mas mahusay na system ng label.
Kinuha ko lang kung ano ang gumana tungkol sa orihinal na menu - kasama ang format na 'my this, my that', na nagdaragdag ng isang magandang personal na ugnayan - at pinalawak ito upang masakop ang mga karagdagan mula sa huling dekada. Ang mga label ng Facebook Flat ay lohikal, maliwanag, at pare-pareho.
03. Pagbawas ng alitan sa pahina-sa-pahina
Ang mabubuting disenyo ay nagbabawas sa dami ng pag-click (alitan) sa isang minimum. Sa Facebook ngayon, ang pag-iwan sa pangunahing pahina ay ginagawang mawala ang menu, pinipilit ang gumagamit sa labis na pag-click. Ang solusyon ay isang simpleng 'malagkit' na menu na hindi umaalis - kahit sa iyong sariling pahina ng profile.
04. Pag-streamline ng typeface
Pagdating sa typography, form ang pagpapaandar. Tulad ng ipinapaliwanag ng Mga Trending sa Web Design 2015 & 2016: "Ang flat typography ay hinihikayat ang mga tagadisenyo na mag-isip nang mas maingat tungkol sa bawat uri ng pagpili. Kahit na ang mga typeface ng serif ay umunlad na may mas simpleng mga form ng titik na nagiging pamantayan, na pinapayagan ang nilalaman mismo na lumiwanag."
Para sa isang site na labis na umaasa sa nilalamang pangkonteksto, ang kasalukuyang typography ng Helvetica ng Facebook ay payat at hindi maganda. Sa kasalukuyan nitong abalang interface, itinutulak nito ang teksto kahit na mas malalim sa background, ngunit ang anumang mas malakas ay magiging isa pang elemento na nakikipagkumpitensya para sa pansin ng gumagamit.
Ang pinasimple na interface ng Facebook Flat, gayunpaman, ay nagbukas ng maraming mga pintuan para sa palalimbagan na may malayang makikita. Pinili ko ang Trebuchet para sa aking typeface sapagkat ito ay nababasa ngunit magiliw pa rin, at ang kurbada ay tumutulong na mapuno ang espasyo.
Marahil ay hindi ito masinop o seksing tulad ng ilan sa mga sikat na flat typeface ngayon, ngunit hindi iyon ang kailangan ng Facebook. Ang isang typeface ng social network ay kailangang maging malinaw at mag-anyaya sa mga gumagamit. Tulad ng kaso sa lahat ng disenyo, hindi ito tungkol sa pinakamahusay na pagpipilian - ito ay tungkol sa tamang pagpipilian.
05. Malakas na hampas ng kulay
Ang mga kulay ay hindi na dekorasyon lamang - lumilikha sila ng isang agad na nauunawaan na emosyonal na wika. Anumang matagumpay na pag-update sa Facebook ay mangangailangan ng isang bagong pintura.
Sa pilosopiya ng disenyo na nakatuon sa nilalaman, ang mga mas kaunting gradient ay humahantong sa mas kaunting visual na ingay, isa pang paraan upang gawing mas madali ang pag-navigate at paghahanap para sa gumagamit. Pagpapatuloy sa pangkalahatang pagpapasimple, gumamit ako ng mga istilo ng CSS upang tuluyang patagin ang color palette.
Walang bevels, walang anino, at walang gradients. Para sa mga background at menu, ang mga naka-bold at maliliwanag na kulay ay lumikha ng isang likas na kaibahan, pagguhit ng manonood patungo sa nilalaman at pag-navigate.
06. Pagkuha ng puting puwang
Kadalasang binabalewala, ang puting espasyo ay nakakaapekto sa mga visual ng isang site tulad ng kulay o palalimbagan. At dahil pinapabuti ng puting espasyo ang pag-unawa, ito ang perpektong gamot para sa isang site tulad ng Facebook na naghihirap mula sa sobrang sikip.
Sa pamamagitan ng pagdaragdag ng puting puwang sa paligid ng bawat elemento - mga menu, mga pindutan, mga bloke na may mga post, mga pribadong mensahe atbp - ang nilalaman ay naging mas nai-scan at nababasa, pinapataas ang UX.
Gayunpaman, may isa pang pag-aalala dito: upang makasabay sa patuloy na pagtaas ng mga resolusyon, kinailangan kong iunat ang bawat kard ng nilalaman upang matanggal ang mahirap na labis na puwang. Sa kabutihang palad, nang walang kanang haligi ng mga istatistika, maraming silid upang makapaglaro.
Pangwakas na pagsasaalang-alang
Ang kasalukuyang istraktura ng disenyo ng Facebook ay hindi ang problema, ang pagtatanghal lamang nito. Hindi tulad ng ilang mas radikal na muling pagdidisenyo (tulad ng muling pag-iisip ng inspirasyon sa Windows na ito), hindi ko nais na baguhin ang interface sa isang paraan na kakailanganin ng mga gumagamit na muling malaman ang Facebook. Ang nasabing isang matinding pagbabago sa tulad ng isang tanyag na sistema ay nanganganib sa pagpapakamatay sa negosyo, gaano man kaganda ang hitsura ng bagong disenyo ng visual.
Ang prinsipyo ng MAYA (Karamihan sa Advanced Ngunit Katanggap-tanggap) ay naisip dito. Ang disenyo ng disenyo ay kinakailangan upang maging mas mahusay, ngunit pamilyar din.
Sa pamamagitan ng Facebook Flat chrome extension, ang aking layunin ay ibalik ang Facebook sa isang mas nakatuon sa nilalaman (at samakatuwid ay nakatuon sa user) na disenyo sa pamamagitan ng paglalapat ng mga prinsipyo ng kakayahang magamit ng flat na disenyo. Ang mga pagpapabuti ng Aesthetic tulad ng malulutong typography, malinaw na kaibahan, at isang minimalist na elemento ay nag-ambag sa isang mas magaan na interface na may mas mabilis na paglo-load, paghahanap, at pag-navigate.
Isinasaalang-alang ang malawak na halaga ng nilalaman na dapat suportahan ng Facebook, ang pinakamagandang disenyo talaga ay walang disenyo.
Pagpunta sa karagdagang
Para sa isang mas malalim na pagsusuri sa mga kamakailang diskarte sa disenyo tulad ng flat na disenyo, modernong typography, puting espasyo, kulay, at higit pa, inirerekumenda kong suriin ang Mga Trend ng Disenyo ng Web UI 2015 & 2016.
Ang kapaki-pakinabang na gabay sa sanggunian na ito ay naglalarawan sa mga pinakamahusay na kasanayan para sa 10 mga diskarte, na may mga halimbawa mula sa 166 matagumpay na mga site.
Salita: Rof Tentik
Ang Rof Tentik ay isang developer at taga-disenyo ng UI na lumikha ng extension ng Facebook Flat Chrome.
Nagustuhan ito? Basahin ang mga ito!
- Tumutugon ang mga taga-disenyo sa bagong logo ng Facebook
- Sa loob ng malikhaing palaruan ng Facebook
- Lumikha ng isang banner sa Facebook na bumabato: 10 mga tip sa eksperto
