8.4 KiB

Raw Blame History

Vylepšete vzhled své bankovní aplikace pomocí moderního CSS

Přehled projektu

Proměňte svou funkční bankovní aplikaci na vizuálně atraktivní, profesionálně vypadající webovou aplikaci pomocí moderních technik CSS. Vytvoříte jednotný designový systém, který zlepší uživatelskou zkušenost, přičemž zachováte principy přístupnosti a responzivního designu.

Tento úkol vás vyzývá k aplikaci současných vzorů webového designu, implementaci konzistentní vizuální identity a vytvoření rozhraní, které bude pro uživatele atraktivní a intuitivní.

Pokyny

Krok 1: Nastavení stylového souboru

Vytvořte základ pro svůj CSS:

Vytvořte nový soubor s názvem styles.css v kořenovém adresáři projektu.
Propojte stylový soubor ve svém souboru index.html:
```
<link rel="stylesheet" href="styles.css">
```

Začněte s resetem CSS a moderními výchozími hodnotami:

/* Modern CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

Krok 2: Požadavky na designový systém

Implementujte tyto základní designové prvky:

Barevná paleta

Primární barva: Zvolte profesionální barvu pro tlačítka a zvýraznění.
Sekundární barva: Doplňková barva pro akcenty a sekundární akce.
Neutrální barvy: Odstíny šedé pro text, okraje a pozadí.
Barvy úspěchu/chyby: Zelená pro úspěšné stavy, červená pro chyby.

Typografie

Hierarchie nadpisů: Jasné rozlišení mezi prvky H1, H2 a H3.
Text těla: Čitelná velikost písma (minimálně 16px) a vhodná výška řádku.
Popisky formulářů: Jasné, přístupné stylování textu.

Rozvržení a rozestupy

Konzistentní rozestupy: Použijte škálu rozestupů (8px, 16px, 24px, 32px).
Grid systém: Organizované rozvržení pro formuláře a obsahové sekce.
Responzivní design: Přístup zaměřený na mobilní zařízení s použitím breakpointů.

Krok 3: Stylování komponent

Upravte styl těchto konkrétních komponent:

Formuláře

Vstupní pole: Profesionální okraje, stavy zaostření a stylování validace.
Tlačítka: Efekty při najetí myší, stavy deaktivace a indikátory načítání.
Popisky: Jasné umístění a indikátory povinných polí.
Chybové zprávy: Viditelné stylování chyb a užitečné zprávy.

Navigace

Záhlaví: Čistá, značková navigační oblast.
Odkazy: Jasné stavy při najetí myší a aktivní indikátory.
Logo/Název: Výrazný prvek značky.

Obsahové oblasti

Sekce: Jasné vizuální oddělení mezi různými oblastmi.
Karty: Pokud používáte rozvržení založené na kartách, zahrňte stíny a okraje.
Pozadí: Vhodné použití bílého prostoru a jemných pozadí.

Krok 4: Rozšířené funkce (volitelné)

Zvažte implementaci těchto pokročilých funkcí:

Tmavý režim: Přepínání mezi světlým a tmavým tématem.
Animace: Jemné přechody a mikrointerakce.
Stavy načítání: Vizuální zpětná vazba během odesílání formulářů.
Responzivní obrázky: Optimalizované obrázky pro různé velikosti obrazovek.

Inspirace pro design

Charakteristiky moderní bankovní aplikace:

Čistý, minimalistický design s dostatkem bílého prostoru.
Profesionální barevné schéma (modré, zelené nebo sofistikované neutrální barvy).
Jasná vizuální hierarchie s výraznými tlačítky pro výzvu k akci.
Přístupné kontrastní poměry splňující pokyny WCAG.
Responzivní rozvržení fungující na všech zařízeních.

Technické požadavky

Organizace CSS

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

Požadavky na přístupnost

Kontrast barev: Zajistěte poměr alespoň 4,5:1 pro běžný text.
Indikátory zaostření: Viditelné stavy zaostření pro navigaci pomocí klávesnice.
Popisky formulářů: Správně propojené s vstupními poli.
Responzivní design: Použitelné na obrazovkách od 320px do 1920px šířky.

Hodnotící kritéria

Kritéria	Výborné (A)	Dobré (B)	Rozvíjející se (C)	Potřebuje zlepšení (F)
Designový systém	Implementuje komplexní designový systém s konzistentními barvami, typografií a rozestupy	Používá konzistentní stylizaci s jasnými designovými vzory a dobrou vizuální hierarchií	Základní stylizace s některými problémy konzistence nebo chybějícími prvky designu	Minimální stylizace s nekonzistentními nebo konfliktními designovými volbami
Uživatelská zkušenost	Vytváří intuitivní, profesionální rozhraní s vynikající použitelností a vizuální přitažlivostí	Poskytuje dobrou uživatelskou zkušenost s jasnou navigací a čitelným obsahem	Základní použitelnost s potřebou některých vylepšení UX	Špatná použitelnost, obtížná navigace nebo čtení
Technická implementace	Používá moderní techniky CSS, organizovanou strukturu kódu a dodržuje nejlepší praktiky	Efektivně implementuje CSS s dobrou organizací a vhodnými technikami	CSS funguje správně, ale může postrádat organizaci nebo moderní přístupy	Špatná implementace CSS s technickými problémy nebo problémy kompatibility prohlížeče
Responzivní design	Plně responzivní design, který funguje skvěle na všech velikostech zařízení	Dobré responzivní chování s drobnými problémy na některých obrazovkách	Základní responzivní implementace s některými problémy rozvržení	Není responzivní nebo významné problémy na mobilních zařízeních
Přístupnost	Splňuje pokyny WCAG s vynikající navigací pomocí klávesnice a podporou čteček obrazovky	Dobré praktiky přístupnosti s vhodným kontrastem a indikátory zaostření	Základní úvahy o přístupnosti s některými chybějícími prvky	Špatná přístupnost, obtížné pro uživatele s postižením

Pokyny k odevzdání

Do svého odevzdání zahrňte:

styles.css: Kompletní stylový soubor.
Aktualizovaný HTML: Jakékoliv úpravy HTML, které jste provedli.
Snímky obrazovky: Obrázky zobrazující váš design na desktopu a mobilu.
README: Stručný popis vašich designových voleb a barevné palety.

Bonusové body za:

CSS vlastní vlastnosti pro udržitelné tématizování.
Pokročilé funkce CSS jako Grid, Flexbox nebo CSS animace.
Úvahy o výkonu jako optimalizované CSS a minimální velikost souboru.
Testování napříč prohlížeči zajišťující kompatibilitu mezi různými prohlížeči.

💡 Tip: Začněte nejprve s designem pro mobilní zařízení a poté jej vylepšete pro větší obrazovky. Tento přístup zaměřený na mobilní zařízení zajistí, že vaše aplikace bude dobře fungovat na všech zařízeních a bude odpovídat moderním praktikám webového vývoje.

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlad Co-op Translator. Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.

8.4 KiB Raw Blame History