Editor: průvodce vizuálními úpravami aplikací

Publikováno 2026-10-11 · Aktualizováno 2026-10-11

Editor je pracovní prostor, ve kterém po vytvoření první verze aplikaci kontrolujete a dále upravujete. Dobrý vizuální editor jasně ukazuje vybraný prvek a umožňuje měnit rozložení, obsah, komponenty, responzivní chování i akce propojené s daty před zveřejněním nové verze.

Nejprve pochopte uspořádání pracovního prostoru

Začněte orientací v hlavních částech editoru. Obvykle jde o aktuální stránku nebo plátno, navigaci mezi obrazovkami, strom komponent, panel vlastností a režim náhledu. Před změnou vždy ověřte, která stránka je otevřená a který prvek je skutečně vybraný.

Rozlišujte lokální a sdílené komponenty. Úprava jednoho tlačítka na jedné stránce má jiný dopad než změna společné komponenty používané na více obrazovkách. Změna nadřazeného kontejneru může také ovlivnit několik podřízených prvků najednou.

Před větší úpravou si proto prohlédněte hierarchii, nadřazený prvek a sousední komponenty. Později snadněji poznáte, zda problém vzniká v samotné komponentě, okolním rozložení nebo nastavení konkrétní stránky.

• Ověřte aktivní stránku
• Rozlišujte lokální a sdílené prvky
• Sledujte hierarchii
• Používejte náhled

Upravujte rozložení a mezery s jasným cílem

Nepřesouvejte prvky náhodně, dokud stránka nepůsobí dobře. Určete, co má uživatel vidět jako první, která akce je nejdůležitější a jak má obsah stránkou pokračovat. Mezery mají pomáhat s vytvářením skupin a vizuální hierarchie.

Při změně šířky, výšky, okrajů, vnitřních mezer, zarovnání nebo mřížky testujte i delší obsah. Krátký nadpis může vypadat správně, ale tři řádky textu mohou rozložení poškodit. Pevná výška může oříznout překlad nebo dynamická data.

U podobných komponent zachovávejte konzistenci. Hlavní tlačítka, karty, formuláře a nadpisy by měly používat společné principy. Sdílené komponenty pomáhají, pokud zároveň neomezují stránky, které potřebují odlišné uspořádání.

• Zdůrazněte hlavní akci
• Používejte mezery pro seskupení
• Testujte dlouhý text
• Udržujte komponenty jednotné

Upravujte obsah a vybírejte komponenty podle úkolu

Editor by měl umožňovat měnit i skutečný obsah. Zkontrolujte názvy stránek, popisky, nápovědu, prázdné stavy, potvrzení a chybové zprávy. Uživatel musí rozumět tomu, co se stalo a co může udělat dál.

Komponentu vybírejte podle úkolu. Tabulka se hodí pro porovnání strukturovaných záznamů, karty pro rychlé procházení a dialogové okno pro krátké rozhodnutí. Důležitý postup s více kroky je často přehlednější na samostatné stránce.

Pokud Infera Agent vytvoří úpravu z běžného jazykového požadavku, výsledek následně zkontrolujte v editoru. Ověřte správná data, soulad se stávajícím vzhledem a skutečné chování při kliknutí, zadávání a odesílání.

• Zpřesněte popisky
• Volte komponentu podle úkolu
• Ověřte připojená data
• Testujte interakce

Otestujte responzivní chování na různých zařízeních

Responzivní návrh není jen zmenšená verze desktopu. Dva sloupce se mohou na telefonu změnit na jeden, vodorovná navigace na menu a široká tabulka může vyžadovat jinou prezentaci.

Hledejte překrývající se tlačítka, oříznutý text, příliš úzká pole, pevné prvky překrývající obsah a nechtěné vodorovné posouvání. Ověřte také velikost dotykových oblastí a použitelnost formulářů s otevřenou mobilní klávesnicí.

U vícejazyčné aplikace testujte překlady společně s responzivním rozložením. Délka slov se liší, takže struktura fungující v jednom jazyce může být v jiném příliš těsná.

• Testujte více šířek
• Sloupce skládejte záměrně
• Kontrolujte dotykové oblasti
• Testujte překlady

Po vizuální změně ověřte data a logiku

Prvky rozhraní často zobrazují data, spouštějí proces, mění záznam nebo volají externí službu. Po úpravě vždy ověřte, které informace prvek čte či zapisuje a jaká akce má následovat.

Po změně formulářového pole znovu zkontrolujte validaci, výchozí hodnotu, povinnost, ukládání a navázané automatizace. U filtrů prověřte skutečné výsledky. Po přesunutí akce otestujte oprávnění a zpracování chyb.

U každého důležitého ovládacího prvku znáte spouštěcí událost, použitá data a očekávaný výsledek při úspěchu i chybě. Tím zabráníte tomu, aby vizuálně správná stránka skrývala funkční problém.

• Kontrolujte čtení a zápis dat
• Znovu testujte validaci
• Ověřujte oprávnění
• Testujte úspěch i chybu

Před zveřejněním používejte náhled, testy a verze

Před zveřejněním otevřete náhled a projděte aplikaci bez editačních panelů. Otestujte navigaci, posouvání, zadávání dat, validaci, načítání, úspěšné zprávy a chyby. Pokud existuje více rolí, prověřte jejich klíčová oprávnění.

Před zásadní změnou sdílené komponenty, přihlášení, dat nebo hlavního postupu vytvořte bod obnovení. Poté provádějte jednu související změnu po druhé, aby bylo možné případnou regresi snadno přiřadit.

Po zveřejnění zkontrolujte také živou verzi. Produkční data, doména, mezipaměť, konfigurace nebo externí služby se mohou chovat jinak než interní náhled. Kontrola živé verze proto uzavírá správný pracovní postup.

• Testujte kritické cesty
• Vytvářejte body obnovení
• Ověřujte role
• Kontrolujte živou verzi

Otázky

Začít zdarma Šablony