7.6 KiB

Raw Permalink Blame History

Zadání: Přestylizujte svůj rozšíření prohlížeče

Přehled

Nyní, když jste vytvořili HTML strukturu pro své rozšíření prohlížeče zaměřené na uhlíkovou stopu, je čas udělat ho vizuálně atraktivním a uživatelsky přívětivým. Skvělý design zlepšuje uživatelskou zkušenost a činí vaše rozšíření profesionálním a poutavým.

Vaše rozšíření má základní CSS stylování, ale toto zadání vás vyzývá k vytvoření jedinečné vizuální identity, která odráží váš osobní styl a zároveň zachovává vynikající použitelnost.

Pokyny

Část 1: Analyzujte aktuální design

Než provedete změny, prozkoumejte existující strukturu CSS:

Najděte CSS soubory ve svém projektu rozšíření
Projděte si aktuální přístup ke stylování a barevné schéma
Identifikujte oblasti, které je třeba zlepšit v rozvržení, typografii a vizuální hierarchii
Zvažte, jak design podporuje cíle uživatele (snadné vyplnění formuláře a jasné zobrazení dat)

Část 2: Navrhněte vlastní stylování

Vytvořte soudržný vizuální design, který zahrnuje:

Barevné schéma:

Vyberte primární barevnou paletu, která odráží environmentální témata
Zajistěte dostatečný kontrast pro přístupnost (použijte nástroje jako WebAIM's contrast checker)
Zvažte, jak budou barvy vypadat v různých tématech prohlížeče

Typografie:

Vyberte čitelné fonty, které dobře fungují na malých rozměrech rozšíření
Vytvořte jasnou hierarchii s vhodnými velikostmi a váhami písma
Zajistěte, aby text zůstal čitelný jak ve světlých, tak tmavých tématech prohlížeče

Rozvržení a rozestupy:

Zlepšete vizuální organizaci prvků formuláře a zobrazení dat
Přidejte vhodné odsazení a okraje pro lepší čitelnost
Zvažte principy responzivního designu pro různé velikosti obrazovek

Část 3: Implementujte svůj design

Upravte CSS soubory, abyste implementovali svůj design:

/* Example starting points for customization */

.form-data {
    /* Style the configuration form */
    background: /* your choice */;
    padding: /* your spacing */;
    border-radius: /* your preference */;
}

.result-container {
    /* Style the data display area */
    background: /* complementary color */;
    border: /* your border style */;
    margin: /* your spacing */;
}

/* Add your custom styles here */

Klíčové oblasti pro stylování:

Prvky formuláře: Vstupní pole, popisky a tlačítko pro odeslání
Zobrazení výsledků: Kontejner pro data, stylování textu a stavy načítání
Interaktivní prvky: Efekty při najetí myší, stavy tlačítek a přechody
Celkové rozvržení: Rozestupy kontejnerů, barvy pozadí a vizuální hierarchie

Část 4: Testování a doladění

Sestavte své rozšíření pomocí npm run build
Nahrajte aktualizované rozšíření do svého prohlížeče
Otestujte všechny vizuální stavy (vyplnění formuláře, načítání, zobrazení výsledků, chyby)
Ověřte přístupnost pomocí nástrojů pro vývojáře v prohlížeči
Doladěte své styly na základě skutečného použití

Kreativní výzvy

Základní úroveň

Aktualizujte barvy a fonty, abyste vytvořili soudržné téma
Zlepšete rozestupy a zarovnání v celém rozhraní
Přidejte jemné efekty při najetí myší na interaktivní prvky

Střední úroveň

Navrhněte vlastní ikony nebo grafiku pro své rozšíření
Implementujte plynulé přechody mezi různými stavy
Vytvořte jedinečnou animaci načítání pro API volání

Pokročilá úroveň

Navrhněte více možností témat (světlé/tmavé/vysoký kontrast)
Implementujte responzivní design pro různé velikosti oken prohlížeče
Přidejte mikrointerakce, které zlepší uživatelskou zkušenost

Pokyny k odevzdání

Vaše dokončené zadání by mělo obsahovat:

Upravené CSS soubory s vaším vlastním stylováním
Snímky obrazovky, které ukazují vaše rozšíření v různých stavech (formulář, načítání, výsledky)
Krátký popis (2-3 věty), který vysvětluje vaše designové volby a jak zlepšují uživatelskou zkušenost

Hodnotící kritéria

Kritéria	Vynikající (4)	Dobré (3)	Rozvíjející se (2)	Začínající (1)
Vizuální design	Kreativní, soudržný design, který zlepšuje použitelnost a odráží silné designové principy	Dobré designové volby s konzistentním stylováním a jasnou vizuální hierarchií	Základní zlepšení designu s některými problémy s konzistencí	Minimální změny stylování nebo nekonzistentní design
Funkčnost	Všechny styly perfektně fungují ve všech stavech a prostředích prohlížeče	Styly fungují dobře s drobnými problémy v okrajových případech	Většina stylů je funkční s některými problémy zobrazení	Významné problémy se stylováním, které ovlivňují použitelnost
Kvalita kódu	Čistý, dobře organizovaný CSS s smysluplnými názvy tříd a efektivními selektory	Dobrá struktura CSS s vhodným použitím selektorů a vlastností	Přijatelný CSS s některými problémy v organizaci	Špatná struktura CSS nebo příliš složité stylování
Přístupnost	Vynikající kontrast barev, čitelné fonty a zohlednění uživatelů s postižením	Dobré praktiky přístupnosti s drobnými oblastmi pro zlepšení	Základní zohlednění přístupnosti s některými problémy	Omezená pozornost věnovaná požadavkům na přístupnost

Tipy pro úspěch

💡 Tip pro design: Začněte s jemnými změnami a postupně přecházejte k výraznějším úpravám. Malá zlepšení v typografii a rozestupech často mají velký dopad na vnímanou kvalitu.

Osvědčené postupy:

Testujte své rozšíření ve světlých i tmavých tématech prohlížeče
Používejte relativní jednotky (em, rem) pro lepší škálovatelnost
Udržujte konzistentní rozestupy pomocí vlastností CSS
Zvažte, jak bude váš design vypadat pro uživatele s různými vizuálními potřebami
Validujte svůj CSS, aby splňoval správnou syntaxi

⚠️ Častá chyba: Neobětujte použitelnost kvůli vizuální atraktivitě. Vaše rozšíření by mělo být jak krásné, tak funkční.

Nezapomeňte:

Udržujte důležité informace snadno čitelné
Zajistěte, aby tlačítka a interaktivní prvky byly snadno klikatelné
Udržujte jasnou vizuální zpětnou vazbu pro akce uživatele
Testujte svůj design s reálnými daty, nejen s textem zástupce

Hodně štěstí při tvorbě rozšíření prohlížeče, které bude jak funkční, tak vizuálně ohromující!

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlad Co-op Translator. I když 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 původní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.

7.6 KiB Raw Permalink Blame History