Promyšlené rozvržení nebo jak předvídat dotazy kolegů (+ kontrolní seznam)

Návrhář e-Legion

Dali jste skvělá rozvržení pro vývoj, už spíte a vidíte je v prodeji, ale vývojáři a QA vám nepřestávají psát, aby objasnili všechny nové podrobnosti. Známá situace? V tomto článku budu hovořit o tom, jak přistupovat k designu promyšleněji a uzavřít většinu otázek kolegů z jiných oddělení, než se objeví. A také sdílím kontrolní seznam, který bude užitečný pro návrháře mobilních aplikací, aby zkontrolovali své výtvory před jejich odesláním do vývoje.

Stavy obrazovky

Často při přípravě konceptů děláme nemysli na to, že V aplikaci může být něco špatně – uživatel se nacházel v zóně příliš slabého signálu Wi-Fi, server havaroval … Například pokud je internet špatný, data se nemusí zobrazit po dlouhou dobu, což bude otravovat uživatele.

Chyby se stávají. Nebojte se jich. Musíte se jen pokusit předvídat očekávání uživatelů a nasměrovat je požadovaným směrem.

K tomu, kromě pozitivního stavu, když jsou přijata všechna data, stojí za to přemýšlet o tom, jak bude obrazovka aplikace vypadat, pokud dojde k chybě. Bude skvělé, když bude práce s chybami ve vaší aplikaci uspořádána. Pak v případě standardních poruch (žádný internet, selhání serveru) budete moci zobrazovat stejné chybové zprávy a nebudete znovu objevovat kolo. U dalších problémů (nelze přijímat ani odesílat data) byste měli také poskytnout jediný mechanismus a pokusit se jej použít všude.

Může se také stát, že jednoduše nemáte data – například máte nepřidali do košíku jeden produkt nebo do chatu nenapsali jedinou zprávu. To je normální. To také stojí za zvážení.

Ve většině případů se načtou data pro obrazovku. Pokud se to však nestane na pozadí, stojí za to přemýšlet o tom, jak to zobrazit v rozhraní, například zobrazit kostru. Stejně jako v případě chyb můžete vytvořit systém, který zjednodušuje rozhodování.

Zjistili jsme, že globálně může mít obrazovka následující stavy:

  • data přijato
  • nejsou k dispozici žádná data
  • načítání dat
  • chyba při přijímání dat

Data obrazovky

Pokud máte stejně jako já dlouhé křestní jméno a příjmení, pravděpodobně jste se často setkali se skutečností, že se vaše data ne vždy hodí na obrazovku a jsou oříznuta na těch nejneočekávanějších místech.

Podívejte se, jak bude vaše rozložení vypadat pro „Ivan Ivanov“ i „Constantine of Constantinople“. Každý by se měl cítit pohodlně.

To platí také pro obsazení obsahu obrazovky. Co když uživatel napíše na kontrolní řádek „Cool“? Ale co když je velmi rozrušený a chce vylévat svou duši v tomto malém vstupu?

Vždy přemýšlejte o „malém“ a „velkém“.

prvky rozhraní

V rozhraní pravděpodobně budou prvky, se kterými bude uživatel interagovat – na tlačítko klikne , a něco se zadá. pak se představí. I když váš návrhový systém nebo knihovna obsahuje všechny stavy těchto prvků, zobrazte na rozložení různé možnosti. Možná při pohledu na připravené obrazovky byste chtěli zlepšit uživatelský komfort a například vyvolat klávesnici ihned po otevření obrazovky.

Pokud má vaše rozhraní schopnost něco odesílat, nezapomeňte na 3 hlavní stavy: proces nahrávání, úspěch a chyba. V takovém případě se nejedná o závažnou chybu a je nutné ponechat uživateli možnost opakovat provedenou akci.

Pokud aplikace stáhne nějaký obsah (obrázky, video …), stojí za to poskytnout útržek. Tím se vyhnete vzniku bílých děr v rozhraní.

Zařízení

V počátcích mé práce designéra byla tato položka jen mou bolestí. Mohl jsem připravit všechna rozvržení pro obě platformy, koordinovat, vyložit pro vývoj a uvolnit role a pak mě najednou oslovili s otázkou: „A jak to bude na tabletu?“ Pokud vaše aplikace funguje nejen na smartphonech se systémem iOS a Android, ale také na tabletech, nezapomeňte zahrnout takovou položku do kontrolního seznamu pro ověření.

Je tu ještě jedna věc, kterou bych nenazval pravidlem, ale speciální případ, na který je třeba pamatovat. S kolegy vždy připravujeme rozvržení pro každou platformu v jedné velikosti. Například aktuálně používáme iPhone 11 Pro pro iOS. Mnoho uživatelů může mít menší zařízení. Při přípravě rozložení si proto představte, co člověk uvidí s iPhone 8 nebo SE. Ve „zvláště těžkých případech“ připravte další rozvržení. Není to pro vás těžké, ale pro vývojáře to bude mnohem jednodušší.

Výše ​​jsem uvedl hlavní body, které při přípravě rozvržení byste měli věnovat pozornost. Absence kteréhokoli z výše uvedeného nejčastěji vyvolává otázky kolegů.

Navrhuji také seznámit se s kontrolním seznamem, upravit jej pro svůj mobilní projekt a použít jej jak při přípravě rozvržení (pokud jste designéři), tak při jejich přijímání (pokud jste vývojář nebo analytik) ).

Kontrolní seznam se nyní úspěšně používá v jednom z projektů e-Legion při práci s designéry od společnosti třetí strany.

#design # užitečné tipy # layouts # mobile kontrolní seznamy aplikací

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.