Ovládací prvky systému Android

Transkript

1 Ovládací prvky systému Android Fixní záložky (Fixed Tabs) všechna tlačítka jsou stejně široká, šířka tlačítka se odvozuje od nejdelšího textu tlačítka. Tento systém je většinou využíván pro zobrazení tří nebo čtyř tlačítek (Obr. 1). Při větším počtu tlačítek se menu rozšíří mimo obrazovku a změní se na Posuvné záložky (Scrollable Tabs). Obr. 1: Záložky ve tmavém a světlém designu. Aktivní záložka je zvýrazněna modrým pruhem Seznamy (Lists) Seznamy seskupují více položek ve vertikálním směru. Pro usnadnění orientace mezi položkami se používají dva typy oddělovačů odlišených různým stupněm šedi. Položky seznamu mohou obsahovat různé typy dat a uspořádání dat, jednořádkový text, víceřádkový text, ikony, zaškrtávací políčka, obrázky a tlačítka (Obr. 2). Obr. 2: Dva příklady využití seznamu. Vlevo jednořádkový, vpravo dvouřádkový s obrázkem. Indikátor posunu (Scroll indicator) Posuvník se zobrazuje během posouvání seznamu a indikuje poměr počtu právě viděných položek seznamu k celkovému počtu položek v seznamu. Mřížkové seznamy (Grid Lists) Tyto seznamy jsou alternativou obyčejných seznamů. Jsou nejlépe využitelné pro data reprezentovatelná obrázky nebo ikonami. Mohou být posouvány horizontálně nebo vertikálně, vždy je nutné vybrat směr posuvu. Možnost vertikálního posuvu symbolizují ikony na spodní hraně obrazovky useknuté v polovině. Uživatel tak zjistí, že je dole ještě něco, co nevidí a pochopí, že může posunovat seznam směrem dolů. K horizontální posouvání navádí částečně useknuté ikony na pravé straně obrazovky (Obr. 3). Pro vysouvání navigačního panelu se používá gesto vertikálního posunutí. Pokud je možné listovat v seznamu a také vysunout navigační panel, používá se horizontální posun seznamu, aby nemohlo být použito stejné gesto na dně odlišné činnosti. 1

2 Obr. 3: Vertikální mřížkový seznam se posouvá ve vertikálním směru, možnost posunu tímto směrem naznačují useknuté obrázky na horní nebo spodní straně obrazovky. Toto useknutí je vhodným vodítkem, protože uživatel vidí, že se něco skrývá pod obrazovkou a chápe, že se na to může podívat. Rejstříkový posun (Index Scrolling) Rejstříkový posun je cestou jak rychle navigovat, například v seznamu kontaktů, mezi položkami začínajícími na konkrétní písmeno. Při táhnutí posuvníku se vedle něj zobrazuje ikona s právě nalistovaným počátečním písmenem. Rozbalovací seznam (Spinners) Rozbalovací seznamy poskytují možnost rychlého výběru hodnoty z výsuvné nabídky. Toto řešení je velmi podobné rozbalovacímu seznamu ve Windows. Často se využívají ve formulářích pro výběr předdefinovaných hodnot (Obr. 4). Pro výběr vhodného zobrazení se používají rozbalovací seznamy v action barech, pokud není používaná frekventovaně. Pokud je přepínání v aplikaci časté, je vhodnější použít záložky. Obr. 4: V tomto případě byl rozbalovací seznam použit na výběr zobrazení formátu data. Použití je vhodné, jelikož se tato změna zobrazení neprovádí často. Tlačítka (Buttons) Tlačítko může obsahovat text, obrázek nebo obojí. Android podporuje dva různé typy tlačítek běžná tlačítka a tlačítka bez ohraničení (Obr. 5). Běžná tlačítka mají stejně jako u ostatních systémů hranici a jsou vyplněná barvou. Dva základní typy jsou tlačítka s normální velikostí a tlačítka malá. Odlišná je velikost použitého písma i velikost plochy tlačítka. Malá tlačítka se používají, když mají být zarovnaná s ostatními prvky uživatelského rozhraní. 2

3 Tlačítka bez ohraničení nemají hranici a nejsou ani vyplněná. Podle guidelines Androidu působí tlačítka lehčím dojmem. Ohraničení tlačítek se dá docílit například použitím oddělovačů. Neohraničená tlačítka se vlastně vymykají definici a běžnému pojetí tlačítka, protože není přesně vidět dotykovou plochu a uživatel si může myslet, že se jedná jen o ikonu, která není interaktivní. Obr. 5: Jednotlivé příklady tlačítek, vlevo tlačítka ohraničená, vpravo neohraničená. Tlačítka vpravo podléhají trendu flat designu a bylo u nic odstraněno jakékoli vodítko, jestli se jedná jen o informační obrázek nebo o interaktivní objekt. Textové pole (Text Fields) Textové pole je oblast, kam uživatel může zadat textová data. Textové pole se aktivuje dotykem, v poli se zobrazí kurzor a automaticky se zobrazí klávesnice. Text se dá vpisovat, označovat a je možné provádět operace vyjmout, kopírovat a vložit text. Při zadání příliš dlouhého vstupu do jednořádkového textového pole se text posunuje doleva a kurzor zůstává na pravé hranici textového pole. Víceřádkové textové pole se přizpůsobuje délce obsahu, kurzor přeskočí na další řádek a pole se vertikálně posouvá vzhůru. Textová pole mohou mít předdefinovaný validní typ vstupu, například telefonní číslo nebo ová adresa. Pokud je možné vepisovat jen čísla, mohou se na klávesnici dokonce zviditelnit pouze čísla, což předchází chybnému zadání vstupu do textového pole. Některá textová pole podporují i možnost automatického doplnění, které zrychluje práci. Tato možnost je hojně využívaná u internetových vyhledávačů. Slovo je možné označit dlouhým dotykem (Obr. 6). Tento dotyk spustí mód výběru textu, v němž je možné rozšířit vybranou oblast nebo vybrat z kontextové nabídky (Contextual Action Bar) jednu z možností obecných možností vyjmout, kopírovat nebo vložit text. Do kontextové nabídky je možné v různých aplikacích přidat další volby. Při výběru textu se zobrazí uchopitelná značka na začátku a konci vybrané oblasti textu, se značkami se dá pohybovat a vybírat tak jinou část textu. Obr. 6: Jednotlivá textová pole jsou ohraničena zespodu a na bocích jsou ukončena malou zarážkou. Na obrázku je také ukázáno zvýraznění při označení textu 3

4 Posuvník (Slider) Posuvníky umožňují vybrat hodnotu ze spojitých nebo diskrétních hodnot. Nejmenší hodnota se umisťuje vlevo, největší vpravo. Posuvníky jsou vhodnou volbou například pro výběr hlasitosti (Obr. 7). Obr. 7: Zde jsou znázorněny jednotlivé stavy posuvníku, které poskytují uživateli zpětnou vazbu. Ukazatel průběhu (Progress Bar) Ukazatele průběhu se používají v situacích, kde je možné určit stupeň dokončení procesu v procentech. Tyto ukazatele dávají uživateli důležitou zpětnou vazbu o tom, jak dlouho bude proces trvat. Pokud trvá akce déle než pár sekund, je vhodné zobrazovat ukazatele průběhu, aby uživatel viděl odezvu a akci omylem nepřerušil. Výplň ukazatele by měla vždy stoupat od 0 % do 100 % a nikdy by hodnota neměla klesat. Procenta ukazatele by se měla odvíjet od celkového času nebo celkového množství přenesených dat (např. minuty, kb), neměla by se odvíjet od počtu přenesených souborů, protože soubory mohou mít různé velikosti a 1 soubor může ve skutečnosti zabírat 80 % celkového přenášeného množství dat. Pokud se provádí více operací v sekvenci, je vhodné zobrazit dva ukazatele průběhu, jeden na celkovou dobu provádění a druhý na provádění dílčích akcí. Indikátor aktivity (Activity Indicator) Indikátor aktivity se používá v případech, kdy není přesně známa doba čekání (není možné ji odvodit). Indikátor upozorňuje uživatele, že je třeba chvíli počkat, ale nemusí být přesně specifikováno co se děje. Indikátor aktivity má dvě odlišné verze proužek a kruh. Obě verze je možné použít v různých velikostech. Kruhový indikátor se používá většinou u velkých prázdných ploch a pruh v menších dialogových oknech. Každá operace by měly být reprezentována pouze jedním indikátorem a indikátory by měly být použity stejným stylem v celé aplikaci. Při zobrazování indikátoru ve tvaru kruhu by se v aplikaci neměl objevovat doplňující text co se právě děje (Loading...). Pohybující se kruh sám o sobě je známým symbolem a ze symbolu samotného lze odvodit, že se něco načítá. 4

5 Další indikátory (Custom Indicators) Používají se ve výjimečných případech, kdy nestačí využít indikátor aktivity, je například nutné zobrazit stavy jako: nestažený, dočasně stažený (uložený v cache) a trvale stažený (cíleně stažený uživatelem) a zároveň zobrazit i procento stahování (Obr. 8). Tento problém se vyskytl u Google Play apps. Cílem designu bylo vyhnout se umístění informace do horní části obrazovky nebo překrýt obsah příliš velkou ikonou. Vznikl malý indikátor, který obsahuje piktogram a indikátor, který je možné zobrazovat u jednotlivých položek. Obr. 8: Indikátor aktivity z Google Play. Barva pozadí indikuje procento stahování a viditelnost špendlíku rozlišuje zda je stahování trvalé nebo dočasné. Zaškrtávácí políčko (Checkbox) Zaškrtávací políčka dovolují uživateli vybrat více možností z jedné sady (Obr. 9). Je nevhodné používat jedno zaškrtávací políčko samostatně, v tomto případě se dá políčko nahradit přepínačem. Obr. 9: Stavy zaškrtávacího políčka Přepínač (Radio Button) Tento typ přepínače umožňuje uživateli vybrat právě jednu možnost ze sady (Obr. 10). Používá se v případě, že se jednotlivé možnosti vzájemně vylučují. V základním nastavení by přepínač měl mít označené první políčko a toto políčko by mělo být logickou výchozí hodnotou (neutrální, základní). Obr. 10: Stavy přepínače Vypínač (On/off Switcher) Tento přepínač rozlišuje jen dva stavy vypnuto nebo zapnuto. Tvar vypínače je odvozen od klasického vypínače na spotřebičích. Vždy by mělo být zřejmé, kdy je vypínač zapnutý a kdy je vypnutý (Obr. 11). Obr. 11: Přepínač zachovává tvar odvozený od klasického přepínače a jsou na něm zřetelné stavy vypnuty/zapnuto 5

6 Dialogy (Dialogs) Dialogová okna směřují uživatele k dokončení úlohy. Nutí ho rozhodnout se změnit nějaké hodnoty nebo potvrdit hodnoty stávající. Dialog obsahuje titulek, oblast pro obsah a spodní panel tlačítek. Titulek uvádí obsah dialogu. V titulku může být název nastavované hodnoty nebo výzvu k rozhodnutí se. Oblast pro obsah dialogu se může v jednotlivých dialozích velmi lišit. Tato oblast může obsahovat téměř všechny ostatní zmíněné aktivní prvky a vybízet tak ke změně jejich hodnot, nebo může zobrazovat jen prosté textové sdělení či výzvu, na kterou uživatel reaguje pomocí tlačítek (Obr. 12). Dialogová tlačítka bývají typicky Cancel a OK. Tlačítko nalevo obvykle vrací aplikaci do stavu před vyvoláním dialogového okna. Tlačítka, která potvrzují změny v dialogu bývají umisťovány vpravo. Obr. 12: Příklady dialogových oken: výběr jedné položky pomocí přepínače, výběr číselné hodnoty a psaní textu. Vyskakovací dialogy (Popups) Verze dialogových oken, která neobsahuje potvrzovací tlačítka a vybízí k výběru jedné položky ze seznamu nabízených položek (Obr. 13). Obr. 13: Příklady vyskakovacích dialogových oken. 6

7 Potvzení akce (Toast) Vyskakovací zpráva poskytující slabou odezvu, která automaticky zmizí. Tato slabá odezva je pro uživatele důležitá, proto by se měla na obrazovce objevit. Není však nutné, aby se roztáhla přes celé okno a zdržovala další činnost. Výběr (Picker) Tento prvek umožňuje výběr konkrétní hodnoty z velké sady hodnot posouváním prstem nahoru nebo dolů. Neumožňuje zadání vstupu pomocí klávesnice. Nevýhodou je velká spotřeba prostoru. Perfektně se hodí pro výběr data a času nebo číselných hodnot (Obr. 14). Obr. 14: Jak je vidět, nejvhodnější využití Pickeru je při výběru času a data. Tento způsob zadávání číselných hodnot je příjemnější než zadávání pomocí klávesnice. 7