1.1K Followers
·
Follow

Jak jsme navrhli Dark Mode pro Mobilní banku od KB

Image for post
Image for post
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.

Image for post
Image for post
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.

  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.
Image for post
Image for post

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.

Image for post
Image for post
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

Written by

Naším posláním je pomáhat organizacím pochopit chování lidí. Spojujeme design, byznys a marketing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store