Nejlepší uživatelské rozhraní pro tabulku HTML.
Často potřebuji ukázat tabulková data a chci veškerou magii. . . třídění sloupců, stránkování atd. Raději používám sloupce, kde kliknete na název sloupce a třídění se provádí pro uživatele (obvykle pomocí javascriptu, i když je to také obtížnější, pokud máte stránkování, protože třídíte pouze data na na obrazovce nebo se vám uchýlí podle tohoto sloupce a poté je umístíte zpět na první stránku?) Jak ale mohu označit, že byl roztříděn? Co je pro to dobrý tip na uživatelské rozhraní? Jak by měly vypadat názvy sloupců? Také ráda obarvím každý další výsledek šedou barvou, ale pak vidím někoho, kdo má obrazovku s příliš vysokým jasem a není dost šedá, aby dokázala rozlišit řádky, ale pokud zvýším množství šedé, není dostatečný kontrast pro pohodlné čtení černého textu.
Jaké jsou příklady hotových tabulek?
Tradičně je "Seřadit podle" označeno pomocí šipek nahoru/dolů, které představují třídění vzestupně nebo sestupně. Názvy sloupců by měly mít vyšší úroveň kontrastu než hodnoty, například odvážnější text nebo stínované pozadí.
Osobně při obarvení střídavých řádků obvykle přecházím na světlejší než na tmavší, protože efekt se zvyšuje tím výrazněji, čím déle vaši uživatelé interagují s tabulkou.
Zde je několik skvělých příkladů možností rozvržení tabulky: http://patterntap.com/tap/collection/tables
- Seřadit data v celé tabulce, nejen data na obrazovce. Ano, budou muset začít od jedné stránky nového pořadí řazení, ale to je v pořádku - očekávali byste, že budou mít smysl, kdybyste třídili podle ID, a pak na stránce 10 se rozhodli třídit podle příjmení?
- Označte, že byl tříděn zvýrazněním pozadí buňky záhlaví tabulky ve sloupci, který je tříděn. Mohli byste jít ještě dále a zvýraznit celý sloupec. Použijte šipky, aby bylo ještě jasnější (a přístupnější) - například šipky směřující doprava pro netříděné a šipka směřující dolů pro seřazené.
- Názvy sloupců by měly být pouze rozlišitelné jako názvy sloupců. Mám sklon je vyrábět o něco větší a odvážnější než obsah buněk v tabulce.
- Vybarvujte každý další výsledek šedou barvou, pouze pokud to potřebujete, abyste zvýšili skenovatelnost jednotlivých řádků. Pokud pro to navrhujete, pak je kompromis v mírném snížení celkové čitelnosti v pořádku, protože uživatel skenuje, ne čte. A nakonec není možné navrhnout pro každý jas obrazovky, takže se ujistěte, že si vyberete šťastné médium a držte se ho.
Momentálně pro vás nemám žádné okamžité příklady, ale zde je příklad tabulky, kterou jsem navrhl pro moji webovou aplikaci a která následuje mé výše uvedené rady/preference:
Z čistě vizuálního hlediska se podívejte na http://www.datatables.net/ (plugin pro jQuery). Ukázková tabulka na domovské stránce obsahuje funkce, které zmiňujete, již implementované.
Tech-moudrý, záleží na tom, co vaše back-end technologie používá. Pokud používáte server .Net, ovládací prvky obsažené v ASP 3.5 a 4 jsou velmi snadné pracovat, jak jste popsali, bez závislosti na jQuery a plug-inu).
Podívejte se na mřížky ExtJS. http://dev.sencha.com/deploy/dev/examples/#sample-
Nejlepší uživatelská interakce jakéhokoli rámce JS, který jsem viděl. Spoléháme se na to značně pro naši aplikaci v Marketu.
Pokud potřebujete datovou mřížku s „veškerou magií“, zkuste dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml
Je to jedna z nejsilnějších mřížek JavaScriptu, které jsem kdy viděl.
Pokud chcete třídit oběma směry, existuje klasická šipka nahoru/dolů, jako u oken Průzkumník/gnome nautilus, obvykle jsou tmavší barvy než buňka.
