Aktualizovaný štýl VC. Nový mobilný VKontakte

Porovnanie rozhrania Vkontakte a Facebook sa už dlho stalo analógom holivarov medzi správcami androidov a jablkovými jablkami: na každej strane môžete prijímať armádu, ktorá bude násilne obhajovať svoj názor. Mnohí ľudia vedia, že súčasná podoba Vkontakte je optimalizovaná a zbavená všetkých nepotrebných vzoriek z roku 2006. A pre mnohých to bola rozhodujúca skutočnosť v prospech vk.com, v porovnaní s večným Facebookom: stabilita rozhrania a jeho jednoduchosť. Preto sa správy April Fools stali viac ako nečakanými: nové rozhranie Vkontakte!

Podľa názoru konštruktérov z Vkontakte, ktorí čakali 10 rokov, sa opäť vydali na Facebook, rozhliadli sa a rozhodli sa: „Cool, musíme urobiť to isté!“ ... A predsa, naozaj, urobili ...
  Riaditeľka operácie oznámila, že tento aprílový blázon „nie je vtip“ nové rozhranie Vkontakte  - výsledok viac ako jedného a pol roka dôkladného štúdia a štúdia každého prvku lokality a hlavným cieľom všetkých týchto činností je „prechod na novú úroveň rozvoja“.
  Vďaka zmenám bude rozhranie Vkontakte vyzerať takmer rovnako na každom zariadení (tablet / PC / smartfón atď.), Nemusíte si zvyknúť na správu sociálnej siete na každom jednotlivom gadgete.

Tiež sa uvádza, že Vk.com bude teraz „ľahšie čitateľné“. Prečo zjednodušiť a tak jednoduché a priamočiare, však nie je uvedené. Bolo oznámené, že písma boli zmenené, šírka obrazovky bola zvýšená a dodatočný priestor bol definovaný ako „nové užitočné funkcie“.

Stĺpec hlavného menu (ten vľavo) bol prepracovaný: názvy sekcií sa skrátili a teraz sú sprevádzané ikonami ikon, sekcie „Správy“ a „Správy“ sa vo všeobecnosti presunuli na začiatok.

Osoba oboznámená s rozhraním Facebook môže byť teraz rozhorčená: „No, nie je to tak trochu!“.

Ako povedať, nie kvapka. Pozrime sa na tento obrázok:

Veľa ďakujem dizajnérom Vkontakte za to, že si požičali ani ľavý stĺpec! Je potrebné, aby ste boli schopní aj plagovať "riedko as chuťou".

Samostatne oznámené. V marci o tom hovorili v kontexte „prelínania“ do starého rozhrania. V aprílovom prehľade o úpravách sociálnej siete sa už uvádza ako neoddeliteľná súčasť nového vzhľadu vk.com. Čo sa zmenilo? Podľa A. Rogozov - všetko. Každý prvok bloku "Novinky" bol "prepracovaný." V sekcii „Novinky“ sa zúčastnili pravého stĺpca, pridali sme rozdelenie „Novinky“ do kategórií (Foto / Video, Priatelia, ...), kde sa nachádzali aj ďalšie prvky „starých správ“ (napríklad „Odporúčania“). Ale najdôležitejšia vec, na ktorú vývojári vk.com zamerali pozornosť aj počas prezentácie „novej stuhy“ - samostatného prepnutia na „algoritmický mechanizmus“. Je jednoducho nemožné, aby ste si ho nevšimli: tu je, prepínač „Zaujímavý prvý“ v spodnej časti pravého stĺpca:

Podľa vývojárov by to malo zjednodušiť prechody medzi konverzáciami, urobiť viac informatívnych signálov o nových správach. Displej je nasledovný: neprečítané správy - bod vpravo od „konverzácie“ - modrý; Ak je zdroj online, v blízkosti mini-avatara bude zelený indikátor. Iii ... tu vyvstáva ďalšia otázka, ktorá je celkom spravodlivá: keď hovoria, že "prepisovanie" časti od nuly je stále hladké, ale Facebook?

"Vkontaktovtsy" sa všeobecne snažil, aby sa nové rozhranie Vkontakte stal čo najviac "zrejmé". Na tento účel bol do „stropu“ vložený ďalší indikátor „Oznámenia“. Aby užívateľ neunikol niečo dôležité: narodeniny priateľa, niekoho "ako", požiadavka na "priateľov" atď.

Ak je na stránke nejaká činnosť, ktorá ovplyvňuje používateľa, „zvonček“ okamžite získa červenú značku.

Časť "Fotografie", tiež veľmi populárna časť sociálnej siete Vkontakte, úprimne povedané, nebola tak pohodlná. A jeho „obeysbuchivanie“ - takmer uhlíková kópia - skvelý príklad toho, čo dobrá imitácia môže byť dobrá pre:

Bolo by veľmi únavné analyzovať všetky zmeny, ktoré čoskoro „padnú na hlavu“ všetkým používateľom Vkontakte - koniec koncov, prevádzkový riaditeľ sociálnej siete sa uistil, že to ovplyvnilo „každé rozhranie stránky“. S cieľom „preniknúť“ do nového rozhrania, v ktorom je Vkontakte oblečený, sa uvažuje o dostatočnom počte sekcií.

Je tu jedna vec: ak teraz prišiel drahý čitateľ skontrolovať svoju stránku vk a vrátil sa sem s rozumným zmätkom ako: „Aký sú tu nezmysly! Všetko ako to bolo. Vysvetlenie pre toto nie je delírium autora, ale skutočnosť, že testovanie nového rozhrania vk.com bolo rozhodnuté pre „obmedzené publikum“. A čitateľ, našťastie (alebo možno bohužiaľ) nedosiahol toto publikum. Pre tých, ktorí majú neodolateľnú túžbu po „novosti“ a ktorí majú „horiacu“ otázku, ako prejsť na nový dizajn Vkontakte  doma nechali vývojári právo dobrovoľne sa zapojiť do zábehu nového dizajnu. Urobili to na stránke

Aktualizovaná aplikácia pre iOS a Android, platforma pre vytváranie longrids a odporúčaní s Prometheus.

Tweet

Obľúbené

V obľúbených

26. septembra VKontakte oznámil rozsiahlu aktualizáciu svojich mobilných aplikácií. Dostali nový dizajn, kde už nie je vedľajšie menu, nová sekcia s páskou odporúčaní av budúcnosti sa spoločnosť chystá spustiť platformu na vytvorenie longridov v rámci sociálnej siete. TJ strávil deň s novou aplikáciou a hovoril so zástupcami spoločnosti o tom, ako bude všetko fungovať.

Vo webovej verzii sociálnej siete už informačný kanál obsahoval sekciu „Odporúčania“, ale jeho obsah nie je synchronizovaný s kartou vyhľadávania v aplikácii, kde nový algoritmus funguje. Okrem toho je obsah v záložke vizuálne zoskupený: fotografie a videá sú usporiadané s dlažbou, záznamy s dlhými textami zaberajú viac miesta a vyniknú.

Približne polovica záznamov môže okamžite povedať, ako sa dostali do odporúčaní - hlavne kvôli tomu, že sa im páčili alebo komentovali priatelia. Druhá polovica spadá do neznámeho spôsobu: algoritmus v hornej časti odporúčaní mi ukázal nezmyselné (aj keď to vyzerá ako humorné) video neznámeho dievčaťa s 43 názormi a jednou pravdepodobnosťou ani od priateľa.

Na páske je veľa krátkych textových poznámok, niekedy existujú publikácie celebrít s overenými profilmi (mali som ich Ruslan Sokolovsky a Ilya Varlamov). Odporúčania vo všeobecnosti zanechávajú dojem nástroja, ktorý je vhodnejší na konzumáciu obsahu ako informačný kanál alebo sekcia videa. Vzhľadom na odstránené prvky rozhrania, ktoré nie sú v tomto prípade povinné, obsah prešiel dopredu a stal sa viac úhľadným. Kliknutím na kartu môžete prejsť na samotný záznam - tu bude k dispozícii celé známe rozhranie a tlačidlo pre rýchle predplatné.

VKontakte volá svoj algoritmus "Prometheus" (v starovekých gréckych mýtoch, to prinieslo oheň ľuďom): keď užívateľ príspevok do odporúčaní, dostane plameň label na svojej stránke. Takže bude možné pochopiť, odkiaľ pochádza prúd nových komentárov a rád.

Ale nielen Prometheus, ktorý hľadá niečo nové a podporuje menej známych bloggerov, pracuje na odporúčacej páske. Existujú ďalšie dva typy vybratého obsahu: prvým je osobné odporúčanie postavené na spoločenskom grafe používateľa a druhé trendy spoločné pre VKontakte.

Zástupcovia "VKontakte" povedal, že "Prometheus" je schopný vyhľadávať užívateľov ako ostatní. Ak sociálna sieť vie, že umelec Durand je populárny medzi užívateľmi, bude používať údaje zhromaždené o ich záujmoch, aby hľadala bloggerov ako on.

Zároveň spoločnosť sľubuje, že bude bojovať s plagiátormi, ktorí neprodukujú ich obsah, ale získavajú si ich popularitu tým, že ho ukradnú iným. Algoritmus bude hľadať originál a pokúsi sa mu presne ukázať, a hovoríme o všetkých médiách - text, obrázky a videá, vysvetľuje Sergej Paranko, ktorý vyvíja platformu sociálnych sietí: „Ak niekto vzal obsah niekoho iného a začal ísť hore, vždy skontrolujeme - a či tento obsah niekto nahral predtým. "

kozmetika

Začiatkom septembra bude popredný dizajnér VKontakte Pavel Knyazev čoskoro redesign mobilných aplikácií. V súčasnej podobe aplikácie sa realizuje len polovica sľubu: zástancovia sa stali červenými (vyzerajú oveľa bohatšie, je príjemnejšie tlačiť), tlačidlá sa stali okrúhlymi, veľa ikon bolo prekreslených a čo je najdôležitejšie, aplikácia už nemá vedľajšie menu - je tu len päť tlačidiel.

Vizuálne je to nezvyčajné: bočné časti menu sú teraz pod piatym tlačidlom a hudba a video sa tam skryli: pri počúvaní hudby sa budete musieť vrátiť na túto kartu a prepnúť skladby. Dizajn audio prehrávača je stále rovnaký av časti videa ešte stále nie sú žiadne odporúčania, ktoré sú na pracovnej ploche v roku 2015 - teraz sú všetky odporúčania iba na karte vyhľadávania.

Informačný kanál je veľmi podobný kombinácii Facebook a Instagram: na jednej strane existuje pestrý "ťažký" obsah, ktorého problém je pod kontrolou algoritmu. Na druhej strane - história a rýchly prístup k ich vytvoreniu posunutím doprava. Ale teraz „VKontakte“ nemá jeden, ale už dva algoritmické pásky na priľahlých kartách: novinky a odporúčania.

Nie je to jednoduché, o to viac, že ​​mobilná verzia nepredpokladá úplnú synchronizáciu s pracovnou plochou, či už v pracovných metódach alebo vo vizuálnom dizajne. VKontakte výkonný riaditeľ Andrei Rogozov vysvetľuje: web je už dávno mimo cesty, mobilné platformy ležia dopredu, a vzory užívateľov na nich sú veľmi odlišné.

Platforma Longride

VKontakte má zatiaľ len staré možnosti pre tvorbu záznamov - písanie textových príspevkov, fotografovanie, videá a príbehy s maskami. Ale pred koncom roka 2017 sociálna sieť sľubuje spustenie platformy na vytváranie Longrides, ktorá bude „správne zobrazená na všetkých zariadeniach“.

Paranko vysvetlil, že platforma pre dlhé nájazdy je v podstate dlhodobý editor s rôznymi prílohami, ktorý umožní publikovanie komplexných formátov v rámci sociálnej siete. Predtým VKontakte publikum používalo wiki markup na to, ale s najväčšou pravdepodobnosťou zmizne do minulosti - nevypnú ju, ale nebudú ju rozvíjať. Podľa popisu sa platforma bude podobať tomu, čo už existuje v prostredí Medium, Facebook a Telegram.

Médium má katalóg zaujímavých článkov, Facebook má bohatší nástroj na rozloženie textu a Telegram má primitívny editor na publikovanie akýchkoľvek skvelých materiálov s podporou rýchleho načítania prostredníctvom funkcie Okamžité zobrazenie. VKontakte uvádza, že budú podporovať iniciatívu AMP (Google a Twitter používajú tento štandard) na rýchlejšie načítanie svojich materiálov, vrátane tých, ktoré sú zabudované do externých webových stránok.

Čítanie externých materiálov a publikovanie cez platformu by nemalo byť iné, ako si to spoločnosť predstavila, a „inteligentná“ páska umiestni takéto záznamy na vyššiu úroveň ako bežné odkazy, pretože obsah pre používateľa sa načíta rýchlejšie. Podľa štatistík z VKontakte, počas roka fungovania „inteligentnej“ pásky, na ňu prešlo 85% používateľov.

Ako správne je zobrazenie na všetkých zariadeniach - až do otázky. Pred niekoľkými rokmi, ako súčasť podobnej mediálnej iniciatívy na VKontakte, sa objavili veľké karty s odkazmi na mediálne materiály a iné externé stránky - aplikácia iPad pre sociálne médiá však stále nevie, ako ich správne zobraziť.

Vstavaný posol

V auguste 2014 zástupcovia VKontakte počas špeciálneho podujatia o plánoch na vydanie samostatného instant messengeru pre zasielanie správ. Tieto plány sa viackrát opakovali v médiách až do konca roka 2016, až kým sa otázka „Kedy“ VKontakte „nevypustí posla“ konečne nestane mémou.

Neformálne zástupcovia sociálnych sietí už dlho uznávajú, že potreba samostatného posla zmizla. Teraz je to stanovené v oficiálnych tlačových správach spoločnosti: začalo sa samostatne počítať publikum "vstavaný VK messenger" - podľa najnovších údajov, to je 82 miliónov ľudí mesačne. Každý mesiac využíva sociálnu sieť 97 miliónov ľudí.

VKontakte je sada rozhraní pre rôzne platformy. Dnes sa dozviete, ako pracujeme na týchto rozhraniach a vytvárame dizajn našich produktov.

  Trochu o nás. Tím dizajnérov zamestnáva šesť nadšených kreatívnych chlapcov vo veku 22-24 rokov. Sme univerzálni: dizajnér nie je po stáročia pripútaný k jednému smeru a dnes sa môže angažovať v mobilnej verzii av zajtrajšku - nejaký desktopový servis.

Nástroje a prístupy

Napríklad s ikonami. Je ich naozaj veľa. Jeden usilovný návrhár nedávno prerobil viac ako sto kusov:

Predtým sa na každej obrazovke aplikácie používali ikony v rôznych farbách a veľkostiach. Napríklad newsfeed_search, wall_search_gray atď. Teraz sme urobili ikony univerzálne a môžeme ich znova použiť. Iba jedna ikona vyhľadávania namiesto piatich rôznych.

Vďaka tomuto prístupu sa uľahčuje vytváranie nových obrazoviek: nemusíte vždy strihať ikony, developer jednoducho vezme hotové v požadovanej veľkosti a použije farbu z rozloženia. Ikony v kolekcii majú intuitívne názvy, takže si môžete nájsť tú správnu aj bez pomoci dizajnéra, ktorý niekedy šetrí čas.

Všetky hlavné komponenty pre každú platformu sú zhromažďované v kolekcii - UI Kit. Ako to vyzerá:

Vytvorili sme vlastný návrhový systém, ktorý používa rovnaké ikony, tlačidlá a farby v aplikáciách pre Android a iOS. Snažíme sa dodržiavať jeden štýl na všetkých platformách, až na malé detaily - nezabudneme však na ich špecifické vlastnosti, ako sú konkrétne ovládacie prvky, tiene na kartách alebo prítomnosť oddeľovačov.

V roku 2015 sme kompletne prešli z Photoshopu na Sketch a navrhli naše rozhrania. Na distribúciu úloh používame Trello a pracovné súbory sú synchronizované s Dropboxom. Vytvárame prototypy v Princípe, Framer a Origami, vyskúšame nové nástroje a pluginy.

Nastavte ciele

To si vyžaduje spoločnú prácu viacerých tímov: študujeme spätnú väzbu, analyzujeme scenáre interakcie s produktom a na základe toho sa rozhodujeme, čo by bolo dobré implementovať.

Keď úloha spadá na návrhárov, funkčnosť produktu je už definovaná. Musíme sa rozhodnúť, ako tento výrobok používať, byť pohodlný a - v konečnom dôsledku - lepšie pre používateľa. Vizuálna estetika rozhrania nie je rozhodujúca, napriek všeobecnej viere, že dizajn je len o kráse. Pohodlie pre nás na prvom mieste.

Pomocou prípadových štúdií z mobilných aplikácií VKontakte sa budeme rozprávať o výzvach a cieľoch, ktorým čelia dizajnérske tímy každý deň.

navigácia

Musíte zjednodušiť navigáciu v aplikáciách bez obetovania funkčnosti. Urobili sme to pomocou tabbary v dolnej časti obrazovky.

Tabbar sám o sebe nie je nikdy nový. Teraz je to štandardný prístup k navigácii na Android a iOS. Raz sme to tiež mali:

Dávajte pozor na rok 2011 - všetko je veľmi jednoduché, ak sa funkcia aplikácie zmestí do piatich kariet.

Potom všetky funkcie boli v prvom rade implementované na webe av najlepšom prípade boli stelesnené v API oveľa neskôr, a to ani vo všeobecnosti. Ale časy sa zmenili: čoraz viac používateľov získalo smartfóny, paradigma Mobile First získala hybnosť a aplikácie začali byť schopné robiť oveľa viac. Na tomto prístupe boli nové zábavné sekcie a služby a jeden spodný panel bol veľmi chýbajúci.

Tu sa naše cesty s tabbarom líšili. Vo všetkých nasledujúcich verziách bolo použité iba bočné menu, ktoré obsahovalo všetky časti. Zmiešali sme položky, prekreslili ikony a hrali s farbami, ale nič radikálne sa nezmenilo. Je načase toto ukončiť.

A zdá sa, že tabbar je ideálny. Vo dvore MMXVII, karty pevne stanovené v pokynoch Apple a Google. Vyriešime teda našu úlohu - na vzdialenosť jedného tapa vyberieme najpotrebnejšie a uložíme všetky možnosti v obvyklom menu.

No, skvelé. Zostáva pochopiť, čo bude v záložkách. Je potrebné poznamenať, že ideologicky takmer nikdy nevykonávame A / B testovanie UX na veľkých vzorkách živých ľudí. Dokonca aj globálny redizajn plnej verzie stránky po rozbalení niektorých používateľov len dopoval niektoré drobné detaily. Základné otázky ako prioritu sekcií riešime retrospektívne, plánujeme budúcnosť na základe rozsiahlych skúseností z minulosti.

Po analýze mnohých rôznych štatistík sme si (bez veľkého množstva intríg) vybrali štyri hlavné sekcie: Správy, Vyhľadávanie a Odporúčania, Správy a Oznámenia. V piatej záložke opustite menu, kde bude všetko ostatné.

A čo dobré staré menu? Tu sme si dali vôľu vytvárať koncepty:

Ale bez ohľadu na to, aké je to lákavé vziať všetko a zmeniť všetko, nesmieme vás vystrašiť a nestratiť v pohodlí. Klasický zoznam zaberá menej miesta, je známy a ľahko použiteľný pre každého. Na tom a rozhodol.

Odporúčania sú aktualizovanou sekciou s veľkými ambíciami. Teraz nie je ukrytý v hlbinách spravodajského spravodajstva, ale je umiestnený na poprednom mieste v novej navigácii. Tu ponúkame obsah talentovaných autorov s témami, ktoré vás zaujímajú. V skutočnosti je to taká lepkavá vec, kde môžete nájsť niečo kvalitatívne a neznáme, berúc do úvahy osobné preferencie.

Z hľadiska dizajnu nebola úloha triviálna. Musíte byť schopní krásne zobraziť rôzne typy obsahu a zapnúť globálne vyhľadávanie tam pre všetky sekcie, natoľko, že jeden nezasahuje do druhého. Zastavili sme na kartách:

A tu je dôvod. Je vhodné preklopiť pásku kariet - zvyčajne je už z prehľadu jasné, či chcete čítať úplne alebo nie. Nemusíte tráviť čas a posúvať obrovské príspevky na dlhú dobu, než nájdete ten, ktorý by ste chceli zostať na. Kliknutím na kartu sa publikácia otvorí ako celok, a ak chcete, môžete pokračovať v prechádzaní páskou v režime plnej veľkosti alebo návratu do režimu náhľadu.

S výberom ikon pre túto sekciu nebolo ľahké. Nakoniec, priateľstvo lupy vyhralo: koniec koncov, odporúčania sú tiež vyhľadávaním, jednoducho bez konkrétnej požiadavky.

Informačný kanál správ

Ale nemôžete len vziať a pridať pult. Toto je nová statická ikona a je dôležité, aby ste si používateľa nepreplienili. Zmenili sme štýl akčných ikon: stali sa kontúrami, pretože boli vyplnené. Takéto ikony môžu byť viac kontrastné a väčšie, pri zachovaní svetlosti rozhrania - ikony kontúr nebudú vizuálne „ťažké“. Vyzerajú esteticky príjemne, nie sú vnímané ako neaktívne a predstavujú prvok hry: chcem vyplniť „prázdnu“ ikonu mojou činnosťou. Vďaka rôznym štýlom môžete ľahko pochopiť, čo čaká na vašu tapu a čo vás jednoducho informuje.

A čo je najdôležitejšie - maľovali sme ako. Áno, teraz je červená (dobre, skoro, # FF3347), šťavnatá a zreteľná. Už žiadne pochybnosti, páči sa vám tento luxusný článok alebo stále idete. Už sme na to dávno prešli. Začali sme prvé experimenty s farbou srdca v roku 2014, v procese tvorby nového dizajnu webovej verzie VKontakte.

Audio prehrávač

Ak pridáte na obrazovku všetky ovládacie prvky, ktoré užívateľ môže potrebovať, bude to ako vesmírna loď. Ale nechcem nič vyhodiť.

Bolo potrebné prísť s pohodlným spôsobom zobrazenia veľkého množstva obsahu v prehrávači. A to sa stalo s nami:

Urobili sme obrazovku s aktuálnou kompozíciou, ktorá poskytuje možnosť prejsť na text skladby a zoznam skladieb. Vďaka tomu nie sú obrazovky preťažené ovládacími prvkami a užívateľ sa teraz môže sústrediť na presne to, čo potrebuje. Samostatná ikona zoznamu vám nedovolí zmiasť sa na obrazovkách - vždy viete, kde hľadať zoznam skladieb.

Story editor

Rozhodli sme sa vyskúšať iný spoločný prístup na rýchle prepínanie medzi maskami:

Zhrnutie

Čoskoro budú oficiálne spustené aplikácie VKontakte Android a iOS VKontakte, kde sú implementované niektoré z popísaných konceptov.

„Okamžite si všimnite tých najlepších Tianov, napíšte jej„ ahoj, ako sa máš “a okamžite sa vráťte k memom na páske - viac ako inokedy.“

Murtol Lazvachev, aktívny užívateľ VKontakte