Proč jsme po dobu pěti let neaktualizovali aplikaci VKontakte pro iPad, ale nyní jsme ji aktualizovali

Ano, dnes je 1. dubna. Ne, nejde o vtip. Ani iPad není vtip. A uvnitř – rozvržení ve Figmě.

Od tohoto dne (a navždy) se aplikace VKontakte pro iOS stane univerzální – všechny aktualizace budou k dispozici současně pro iPhone a iPad.

I Matvey Pravosudov, senior produktový designér společnosti VKontakte. Řeknu vám o designu univerzální aplikace: od konceptů a problémů, s nimiž se setkáváte, až po přijatá rozhodnutí a konečný výsledek. Bonus – tipy (v případě, že se ocitnete v podobné situaci) a veřejné rozložení ve Figmě pro každého.

Pozadí

Za posledních několik let jsme v App Store měli dvě aplikace: VKontakte (pro iPhone) a VKontakte pro iPad.

V roce 2015 jsme navrhli každou hlavní funkci zvlášť pro iOS (pro iPhone), Android, web, m.vk.com a iPad. Vytvořili jsme nezávislou a velmi odlišnou verzi pro tablety, ačkoli publikum iPadu bylo (a stále je) výrazně menší než na jiných platformách.

Postupem času počet nových funkcí a produktů (a tedy i aktualizací) rostl. Bylo stále obtížnější přizpůsobit je pro každou platformu. Zaměřili jsme se na verzi s největším publikem – mobilní aplikaci VKontakte: pokud jde o počet uživatelů, předběhla nejen iPad, ale také vk.com s m.vk.com. Předchozí přístup se samostatnou verzí pro tablety byl neúčinný – a ukázalo se, že je potřeba nové řešení.

Náš jednotný návrhový systém mu pomohl přijít. Už nějakou dobu na tom pracujeme, abychom urychlili vývoj a usnadnili procesy. Například jsme již mluvili o práci s barvami v tmavém tématu a sdílených knihovnách komponent, které každý den používáme sami. Dalším logickým krokem je univerzální aplikace pro iPhone a iPad.

Nový proces návrhu

Abychom s každou aktualizací neodkládali spuštění a nevyvíjeli možnosti pro různá zařízení, rozhodli jsme se, aby byla aplikace pro iPhone a iPad univerzální. To umožňuje jeho téměř úplné přizpůsobení různým velikostem obrazovky najednou. A v budoucích funkcích začne přizpůsobivost téměř sama.

A zkusili jsme několik nápadů.

< p>Rozložení je odvážné a efektivně využívá prostor na obrazovce, ale nefungovalo to pro nás. Znamená to další vývoj pro iPad – a my jsme se ho jen chtěli vzdát, abychom nezpomalili spouštění nových funkcí. Proto byla nutná konstrukční omezení. Jistě, milujeme skvělé koncepty, ale tento úkol vyžaduje jednoduchou navigaci a systém mřížky. A mělo by to dobře fungovat na iPhonu i iPadu.

Co jsme tedy udělali dál? Vzali jsme aplikaci pro iPhone a natáhli ji.

Tato myšlenka fungovala. Díky tomu nemusí vývojáři přepisovat každou obrazovku – stačí upravit pravidla pro přizpůsobení klíčových obrazovek na širokou velikost.

Díky omezením je snadné vytvořit rychle se rozvíjející, ale nepříjemnou aplikaci. Abychom nespadli do této pasti, našli jsme rovnováhu: přizpůsobujeme globální komponenty, ale lokálně využíváme výhody iPadu.

A co je rozdíl mezi iPadem a notebookem nebo telefonem, kromě velikosti obrazovky?

Především kontext použití. Je vhodné sedět u notebooku, když nejste v pohybu, a tam je stůl, kam můžete zařízení umístit. K dispozici máte klávesnici pro vstup a také touchpad nebo myš. V tak pohodlném pracovním prostředí mohou uživatelé na počítači rozšířit pozornost na více oken a stavů. Samotné aplikace mohou být v případě potřeby složitější.

Mobilní telefon je malý. Žádná další vstupní zařízení, jen prsty. Díky těmto a dalším omezením se ukázalo kompaktní zařízení, které je vhodné používat na cestách, v autobuse, v tělocvičně. Za takových podmínek však lidé nemohou uchopit několik oken najednou. Mobilní aplikace se proto otevírají na celou obrazovku a každá stránka je přizpůsobena konkrétnímu úkolu.

Tablet je někde mezi notebookem a telefonem. Ve výchozím nastavení žádná klávesnice a myš, ale s velkou obrazovkou. Tablet lze používat na cestách, ale už to není tak pohodlné. Jak již bylo řečeno, návrháři očekávají, že se majitelé zařízení vyrovnají s více zaostřovacími body nebo aplikacemi. Proto existovala rozdělení do sloupců, Split View, Slide Over a další možnosti.

Při návrhu navigace v nové aplikaci jsme vzali v úvahu hlavní rysy podmínek, ve kterých se iPad používá. Zatím nepodporujeme multitaskingové technologie iPadOS v plné síle, ale uděláme to v budoucnu.

Po vypracování hlavních konceptů a diskusi s vývojáři jsme přistoupili k důležité fázi – návrhu adaptačního systému.

Univerzální aplikace

Příprava

Trochu vám povím o nástrojích a pracovním plánu. Ve Figmě pracujeme od loňského roku a je na čase využít hlavní rys editora – multiplayer.

Shromáždili jsme téměř všechny designéry a distribuovali je týmům. Hned jsem začal a připravil systém, zatímco ostatní návrháři produktů vyzvedli nově popsané komponenty a přetáhli je do svých rozvržení. Každý z nás byl zodpovědný za svůj produkt: hudbu, video, messenger, klipy, služby, novinky, příběhy, příspěvky, hovory, nálepky a dárky, komunity, trh, infrastrukturu. Když byla připravena rozvržení dalšího produktu, přetáhli jsme je z konceptů na hlavní stránku týmu. Vývojáři nezůstali pozadu a rychle použili nová rozvržení.

Plánovali jsme použít nativní komponenty iOS. Proto design pro iPad vyžadoval dobrou znalost modálů a navigace. Hodila se také aplikace Adaptivity (A). Bylo to zaplaceno, ale pomohlo to zjistit, jaké jsou standardní velikosti pro modály a tabulky a jak se mění s různými orientacemi zařízení.

To je místo, kde jsme hotovi.

Reagovat. Návrh navigace

Nejvyšším designem jakéhokoli produktu je informační architektura a navigace. Strukturu jsme ponechali stejnou jako na iPhone, ale museli jsme přemýšlet o navigaci.

Neustále na tom pracujeme v aplikaci. Testovali jsme různé možnosti a jedna byla s levým menu, ve kterém jsou soustředěny nejčastěji používané sekce. Rozhodli jsme se jej použít jako základ pro verzi pro iPad.

Nejprve rozdělíme celou obrazovku na dva sloupce: postranní panel s navigací vlevo a hlavní obsah vpravo. Myšlenkou navigace bylo převzít postranní panel z mobilní verze a přidat položky tabbar na samý vrchol. Uživatel má rychlý přístup k celé hlavní navigaci a můžete také rychle přejít na položky sekundární nabídky. Doporučuje tedy přizpůsobit aplikace a Apple.

Ale pro každý případ jsme se rozhodli vyzkoušet různé koncepty – takže bylo z čeho vybírat. Načrtl tři možnosti pro navigaci v aplikaci. První bylo vhodnější: v orientaci na šířku je navigace vždy k dispozici, je zde dostatek místa pro obsah a v nabídce na výšku se kompaktně sbalí.

Pak jsme smíchali přístupy a nechali navigaci vždy otevřenou v krajině a vysouvací nabídku na výšku, jako na iPhonu (ve výchozím nastavení je skrytá, aby nezajímala šířku) .

Konečná verze byla nejjednodušší: zůstane panel karet a v záhlaví obrazovky se otevře boční nabídka.

O možnostech jsme diskutovali s vývojáři a rozhodli jsme se pro třetí možnost. Přizpůsobení rozhraní tabletu je již docela obtížné a přináší spoustu chyb – a nechtěli jsme ještě více komplikovat naši práci. Postranní panel by navíc zpomalil rozložení obrazovky aplikace Messenger, kde jsme plánovali použít Split View. Stále však myslíme na první možnost navigace na postranním panelu – pro budoucnost.

Reagovat. Drátový model a globální komponenty

Abychom urychlili design a vývoj, použili jsme systematický přístup: identifikovali jsme struktury obrazovky (wireframes) a velké komponenty a poté jsme popsali pravidla pro jejich přizpůsobení iPadu. Návrháři se řídili pravidly – a vývojáři spustili například jednou snack bar, který ve všech případech fungoval správně.

Průvodci. Globální pravidla a příklady komponent jsme přesunuli na samostatnou stránku v příručce Figma – Guide. Návrháři odtamtud vzali hotové objekty a vývojáři se zaměřili na příklady a implementovali je do kódu.

Rámečky obrazovky . Odvodili jsme několik typických struktur stránek, které se v aplikaci nejčastěji nacházejí.

  • Mainland. Vyplněné pozadí, jeden dlouhý bílý sloupec s obsahem. Vhodné pro téměř všechny stránky.
  • Široká pevnina. Potřebné pro stránky s velkým množstvím, například fotografie nebo videa. Ruka nevstala, aby vytlačila jasný mediální obsah do úzkého sloupu pevniny, a dovolili jsme, aby byl široký.
  • Ostrovy. Několik kontinentů, které žijí na šedé stránce. Ostrovy se objevují v designu stránek „pásu karet“: zprávy, uživatelské stěny, záložky, lajky.
  • Hrdina. A máme také stránky o jedné entitě: autor klipů, masek, efektů, flashmobů. Nebo obrazovky nastavení, které nemají mnoho obsahu, ale chtějí se zaměřit na název. K tomu jsme jednoduše natáhli záhlaví přechodu na celou šířku.

Tip✨: Nové automatické rozvržení 2.0 společnosti Figma dramaticky zrychluje adaptaci obrazovky pro iPad. Zejména nastavení pevné šířky na nadřazeném kontejneru a výplně na všech vnitřních rámcích.

Modály. U modálů jsme vzali velikosti systému Formulář a Stránka List a přilepili se k nim. Modální karta získala šířku formulářového listu a modální stránka získala dvě šířky: 416 a 640 bodů.

Zvláštním případem modálního okna byly panely pohybující se ven ze záhlaví. Například ve zdroji zpráv můžete přepínat mezi různými typy obsahu. V mobilní verzi nabídka právě opustila záhlaví. Na iPadu jsme omezili nabídku na 416 bodů, zaoblili jsme rohy a přidali jsme dělič. Výsledkem je nová součást – „kravata“.

Samozřejmě to mohlo být provedeno ve formě kontextového menu. To by ale vyžadovalo více vývoje než pouhé nastavení maximální šířky a zaoblení rohů.

Hlavní sekce

Použitím drátových modelů a principů jsme dostali design kořenových obrazovek na iPadu:

  • feed – typické ostrovy;
  • služby – originální, s vlastním rozložením;
  • messenger – s Master & amp; Podrobnosti;
  • klipy – celá obrazovka, ale při zachování poměru stran videa.

Na iPadu na panelu je také spousta volného místa a do nabídky jsme přidali hudbu a oznámení. Aplikace VK pro iPad je nyní ještě o něco funkčnější než pro iPhone.

Zbavili jsme se starého přístupu se dvěma aplikacemi pro iPhone a iPad – a vytvořili jsme jednu univerzální. Již není důvod odkládat podporu tabletu – všechny hlavní komponenty jsou již přizpůsobeny pro velkou obrazovku a některé se snadno vejdou do popsaných rámečků.

Další plus – temné téma přišlo na iPad iPad The používání tabletu v noci bylo pohodlné: obrazovka neoslepuje ani neodvádí pozornost od obsahu.

Zábavný fakt: protože jsme vytvořili univerzální aplikaci, není cesty zpět. Bez podpory iPadu budou novější verze Apple odmítat vydání, takže verze pro tablety je nyní vždy pod kontrolou 🤠

To je jen začátek! Do konečného rozhraní nebyly zahrnuty všechny nápady. Nechtěli jsme vydání odložit jen kvůli koncepčním a odvážným rozhodnutím – uživatelé čekají. Ale do budoucna plánujeme využít všechny možnosti iPadu a ještě více zpříjemnit důležité funkce. Mluvíme o Split View, pohodlnějším hudebním přehrávači, podpoře technologie Picture in Picture, kontextových nabídkách a mnohem více. A v hlubinách VKontakte stále existují obrazovky, které jsme dosud nedosáhli. Také se o ně postaráme a přizpůsobíme je.

Kde si mohu aplikaci stáhnout?

Je to jednoduché: Nainstalujte si VKontakte na svůj iPad z App Store, nebo pokud je tato aplikace již ve vašem tabletu, proveďte aktualizaci na nejnovější verzi. Zatím ten starý nevypneme, takže je čas jít dál.

Poděkování

Na aplikaci pracoval obrovský tým. Díky manažerům, vývojářům, testerům, marketingu a výzkumu a všem, všem, všem.

Bonusy

Tipy pro designéry, kteří navrhnou univerzální aplikaci

< p> 1. Počkejte 5 let (přeškrtnuto) .

2. Najděte iPad a používejte aplikace. Systémové i třetí strany. To usnadní hledání dobrých technik a porozumění obecným principům.

3. Přemýšlejte o kontextu a pozornosti. iPad je kříženec mezi notebookem a telefonem. Není to tak mobilní, takže se uživatelé mohou soustředit na více částí obrazovky.

4. Oddělte síť a hlavní součásti do samostatných pravidel, abyste zjednodušili vývoj. Čím více automatických úprav, tím jednodušší.

5. Zvažte doporučení společnosti Apple. Podívejte se na přednášku Designed for iPad a vyzkoušejte tipy z ní.

6. Vytvořte efektivní proces. Pokud máte ve svém týmu více návrhářů, přiřaďte oblasti odpovědnosti. Je to také ideální čas na synchronizaci s vývojáři po každém rozložení, pokud tak ještě neučiníte.

Rozložení iPadu
Teorie je skvělá, ale je lepší konsolidovat vše v praxi a příklady. Proto jsme v komunitě @vk připravili veřejný soubor Figma. Existuje více než 200 obrazovek!

Podívejte se na rozvržení, duplikujte ho a experimentujte! Skvělé koncepty lze nahrát do VK Designers – zveřejníme to nejlepší v komunitě. Klidně & lt; 3

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.