Kompletní průvodce tvorbou wireframů mobilních aplikací

Krok druhý: Low-fidelity digital wireframes

Odhadovaná doba: 2-3 dny, v závislosti na rozsahu MVP.

Jakmile máte vymyšlený wireflow MVP, dalším krokem je vytvoření o něco podrobnějších wireframů. Můžete vytvořit papírový prototyp nebo rovnou přejít k digitálním wireframům (pokud záleží na rychlosti, obvykle přecházím k digitálním wireframům).

Poznámka: Pokud pracujete se zavedenou značkou, může být možné použít komponenty ze stávajícího návrhového systému a můžete rovnou přejít k vysoké věrnosti, kroku 3 níže.

Doporučuji vytvořit artboardy pro klíčové obrazovky, které jste odhalili při skicování. Počet obrazovek, které budete potřebovat, se bude zvyšovat s tím, jak budete postupovat v procesu tvorby drátěného rámce od skicování, přes drátěné rámce nízké věrnosti až po drátěné rámce vysoké věrnosti.

Pro digitální wireframy s nízkou věrností použijte vybraný nástroj pro navrhování a vytvořte jednoduché tvary a použijte základní písma pro vytvoření wireframů. Existuje také mnoho sad uživatelského rozhraní, které mohou tento proces urychlit a vytvořit návrhy s nízkou věrností, které jsou o něco vizuálně přitažlivější. Doporučuji také používat střední velikost artboardu, která by mohla fungovat na většině velikostí obrazovky telefonu. Pokud máte k dispozici údaje o své cílové skupině a o tom, jakou velikost telefonu převážně používají, zvolte tuto velikost obrazovky.

Při použití Adobe XD (nebo jakéhokoli návrhového nástroje, protože většina z nich má zabudované přednastavené velikosti) používám artboard o velikosti 875 x 667px, protože je to „střední cesta“ velikostí obrazovek (zejména pro iPhone). Zjistil jsem, že tato velikost funguje dobře pro iPhone 8 a iPhone X, a zjistil jsem, že to funguje dobře i pro Android.

Tady je příklad obrazovek s nízkou věrností v akci:

Po vytvoření obrazovek nízké věrnosti, otestování návrhů s uživateli a získání souhlasu od zúčastněných stran jste nyní připraveni vytvořit obrazovky vysoké věrnosti.

Třetí krok: Digitální wireframy vysoké věrnosti

Odhadovaná doba: 1+ týdnů. To bude záviset na tom, zda máte vytvořený systém návrhu, nebo zda jej vytváříte od nuly za pochodu. Tento krok také trvá déle, protože bude pravděpodobně přidáno více obrazovek než ve fázi low-fidelity.

V tomto kroku vaše návrhy ožívají! Je to také fáze, kdy vaše návrhy začínají skutečně vypadat jako funkční mobilní aplikace, kterou můžete prototypovat, testovat, iterovat, nechat si ji schválit a nakonec ji předat vývojovému týmu.

Podmínky:

• Pokud má produkt, na kterém pracujete, již zavedenou značku, budete s největší pravděpodobností čerpat barvy, ikony a písma ze směrnic značky.
• Pokud produkt, na kterém pracujete, nemá zcela zavedený vzhled značky, můžete pro urychlení procesu návrhu použít nalezení a použití sady uživatelského rozhraní.

Další úvaha zní: S jakými obrazovkami začnete? Můžete začít s:

• Klíčovými obrazovkami pro každou sekci hlavní navigace, nebo;
• Klíčovými uživatelskými toky pro uživatele, nebo;
• Prioritizujte obrazovky, které navrhujete, na základě pořadí harmonogramu vývoje (tím obvykle začínám, abych mohl pracovat agilní metodou a ujistil se, že mám obrazovky připravené k předání, jak je vývojový tým potřebuje).

V tomto příkladu ukážu postup použití zavedené sady uživatelského rozhraní v aplikaci Adobe XD. A začnu přihlášením/registrací uživatele a vytvořením profilu, protože vývojové týmy, se kterými jsem pracoval, obvykle začínají v procesu vývoje aplikace správou uživatelů.

Sada uživatelského rozhraní, kterou jsem si vybral, má již zavedenou paletu barev, styly znaků a běžné prvky uživatelského rozhraní (tzv. komponenty), které lze kopírovat a vkládat do všech drátěných modelů.

Poznámka: Na začátku doporučuji přeměnit všechny prvky, které plánujete znovu použít, na komponenty (nebo symboly). Pokud tak budete potřebovat změnit šipku zpět ze šipky “ ← “ na mrkev „<„, můžete ji změnit prostřednictvím hlavní komponenty a nechat ji aktualizovat ve všech wireframech oproti nutnosti kopírovat a vkládat úpravy na každou obrazovku, kterou je třeba aktualizovat.

Příklad barev, stylů znaků a komponent:

Na začátku procesu bych začal vytvářet obrazovky onboardingu, přihlášení a profilu uživatele:

Dále bych začal budovat globální navigační prvky:

Poté bych začal vytvářet high-fidelity dráty pro všechny uživatelské toky aplikace, přičemž bych začal s prioritními toky na základě dodání do vývoje (nebo pro všechny položky, které ještě potřebují uživatelské testování).

Doporučuji vytvořit samostatné návrhové soubory pro každý z klíčových uživatelských toků, abyste mohli snadno vytvářet prototypy a sdílet je s vývojem při práci agilní metodou (tj. jeden soubor pro registraci uživatele a vytvoření účtu, jeden soubor pro zasílání zpráv, jeden soubor pro vyhledávací prostředí atd.

Když budou návrhy schváleny a předány vývoji, doporučuji vytvořit jeden hlavní soubor se všemi obrazovkami a hlavními komponentami. Při práci v týmech obvykle doporučuji, aby hlavní soubor měl na starosti jeden člověk, aby se omezil zmatek. Každý člen týmu tak ví, že při práci na vytváření nových funkcí a toků aplikace čerpá ze schváleného hlavního souboru.

Například zde je pohled na hlavní soubor jednoho z mých projektů z ptačí perspektivy. Všimněte si, že jsem obrazovky seskupil a seřadil podle uživatelského toku a priority vývoje. Tento hlavní soubor budu nadále doplňovat, jak budu vytvářet další posloupnost uživatelských toků.

Několik hlavních zásad pro tvorbu lepších mobilních aplikací

Teď, když víte, jak začít vytvářet wireframy svých digitálních zkušeností, je čas, abyste svůj přístup k návrhu posunuli na vyšší úroveň. Pokud vytváříte zážitek pro mobilní zařízení, v operačních systémech jako iOS a Android, je třeba mít na paměti několik klíčových zásad. Zde je několik obecných tipů (a několik osobních názorů) o navrhování mobilních aplikací a o tom, jak strávit méně času navrhováním pro jednotlivé typy zařízení na trhu. Pokud hledáte další inspiraci, můžete se podívat také na tyto příklady drátěných rámů pro webové stránky a mobilní aplikace.

Jsem pevně přesvědčen, že design by měl být co nejvšudypřítomnější. Proto kdykoli je to možné, podporuji design agnostický vůči operačnímu systému. Zde je důvod:

• Pokud uživatel přejde z telefonu s Androidem na iPhone, neměl by se učit dva různé způsoby používání aplikace, která řeší stejnou potřebu. Řešení by mělo být stále stejné. Nyní vím, že mohou existovat rozdíly v gestech a možnostech specifických pro dané zařízení, ale domnívám se, že aplikace by měla nabízet stejné uživatelské rozhraní a uživatelský tok bez ohledu na operační systém. A důležité funkce by neměly být schované příliš hluboko v kontextových nabídkách; to je prostě špatné UX.
• Navrhovat, vyvíjet a udržovat dvě (nebo více) zcela odlišné zkušenosti (zejména když by zkušenost mohla být stejná bez ohledu na platformu) je drahé.
• Při navrhování a udržování různých zkušeností se zkušenosti mohou začít velmi lišit. To může poškodit značku a ztížit sledování a implementaci zpětné vazby a funkcí.

Jak tedy vytvořit všudypřítomný design a být agnostický vůči zařízením? Já to dělám takto:

1. K mobilním návrhům přistupuji, jako bych je navrhoval pro mobilní web. Moje návrhy jsou responzivní, protože existuje nekonečné množství velikostí obrazovek a hustot pixelů (ty se mění tak rychle, jak je společnosti dokáží navrhnout). Jako designéři nemáme čas navrhovat pro každou hustotu pixelů a myslím, že moji klienti za tento čas stejně nechtějí platit. Proto používám šířku artboardu 375, která funguje pro většinu moderních modelů iPhonu a Androidu.
2. S podivným tvarem obrazovky iPhonu X a iPhonu 11 se vypořádávám tak, že vývojovému týmu řeknu, aby barvu pozadí záhlaví jen prodloužil nahoru.
3. Mám to štěstí, že mám v dosahu několik různých typů telefonů, takže pak mohu své návrhy testovat přes mobilní aplikaci XD pomocí USB. Je to užitečné, protože mohu testovat velikosti písma, dotykové body uživatelského rozhraní a viditelnost obsahu obrazovky při zvednuté klávesnici. Mohu také otestovat linii „fold“ a ujistit se, že důležitý obsah, jako jsou CTA a důležitý obsah, zůstane viditelný a nezmizí ze spodní části obrazovky.
4. Snažím se používat pouze gesta, která jsou univerzální, např. klepnutí, přejetí prstem, stisknutí a podržení. Myslím, že bychom se měli soustředit na co nejlepší uživatelský zážitek bez ohledu na operační systém.
5. Pro všechny ikony a loga používám SVG, aby vypadaly skvěle na jakémkoli rozlišení obrazovky.
6. Používám navigační struktury a nabídky, které jsou univerzální a nejsou příliš specifické pro operační systém.

Jediný případ, kdy musím navrhovat wireframy, které jsou specifické pro zařízení, je, když vytvářím prototyp a volám nativní funkci zařízení, např. fotoaparát. I ta se ale může v jednotlivých telefonech a operačních systémech lišit.

Většina mých klientů začíná s iOS. Otestujeme a ověříme návrh, a když je na správné cestě, pak vyvíjíme pro Android. A víte co? Snažíme se vůbec neměnit uživatelské rozhraní ani uživatelské toky. Místo toho se soustředíme na branding, vzhled, funkce a vlastnosti a uživatelské toky. Vše se vrací k tomu nejdůležitějšímu: k hlavnímu uživatelskému zážitku.