Jak jsme navrhli Dark Mode pro Mobilní banku od KB

Android verze KB Mobilní banka v Dark Mode.

3. září spatřil světlo světa operační systém Android 10 a celý svět netrpělivě očekává spuštění systému iOS 13. Co mají společného? Spolu s nimi na mobilní zařízení přijde i nativní podpora Dark Mode. Právě ten je uživatelsky velmi populární. Mezi jeho hlavní benefity patří kromě atraktivního vzhledu také fakt, že šetří vaše oči i baterii.

Nejdříve jsme začali s Androidem, po něm následoval iOS, který se aktuálně kompletně redesignuje pod taktovkou agentury Blueberry a čeká ho velký update v listopadu.

Nejprve odlaďte všechny klíčové funkce aplikace

Jak?

Vytipovali jsme si klíčové obrazovky a komponenty aplikace. Ty jsme přebarvili a následně vyladili jejich správnou barevnost a kontrast. Snažili jsme se, aby všechny velikosti písma a jejich barevnost dosahovaly minimální úrovně kontrastu AA.

Jak na to

1. Odlaďte barevnost klíčových elementů—dejte si pozor na dobrou čitelnost a kontrast.
2. Navrhněte všechny důležité stavy a funkce v tmavé podobě.
3. Popište svým vývojářům změnové požadavky.
4. Připravte ve své knihovně elementy ve stavech Light/Dark.

V čem?

Pro design Mobilní banky od KB jsme použili Sketch a jako hlavní verzovací a handoff nástroj Abstract. Vznikl tak jen jeden grafický soubor — master, který obsahuje aktuální podobu všech stavů aplikace. Do něj je napojena globální knihovna, která definuje jak vypadají jednotlivé styly, atomy, komponenty a obrazovky celé aplikace — Design systém.

Používáme Sketch+plugin Anima a jako verzovací nástroj Abstract

Každý designer si nejprve navrhne svou část ve vlastní “designové větvi”, která se po schválení propíše do master souborů, které jsou společné pro všechny.

Důležitým nástrojem je pro nás Sketch plugin Anima, která umožňuje vytváření a stackování dynamických elementů podobně jako v HTML.

Zdroje a inspirace

Tady je seznam odkazů a materiálů, které by vám mohly pomoci s přípravou tmavé varianty vaší aplikace:

Google Material dokumentace pro Dark Theme
Android Dark Theme template pro Sketch
iOS Dark Mode Guidelines
iOS Dark Mode Implementace
iOS Design Resources
Contrast Checker

Mobilní banku od Komerční banky si můžete vyzkoušet na svém telefonu.
Stačí si ji stáhnout a spustit demo verzi.

Google Play
App Store

Jarin Němeček
Lead Designer 2FRESH
www.2fresh.cz/ui