Snažím se navrhnout část webového rozhraní, které umožňuje uživatelům označovat položky a prohlížet si všechny položky se značkou nebo sadou značek - myslím, že gmail, pokud vám gmail dovolí snadno vybrat více značek pro zobrazení všech zpráv se všemi těchto značek. Jaký je nejlepší způsob, jak ukázat uživateli, jakou sadu značek si právě prohlíží?
Jednoduché zvýraznění funguje pro jednu značku, ale pokud je seznam značek delší než na obrazovce, nebudou moci všechny zobrazit najednou, což povede k tomu, že nebude jasné, které značky uživatel vybral. Kromě tohoto problému mám k dispozici malé množství místa pro práci - celé rozhraní tagů a položek je asi 300x500 pixelů, takže zobrazení vybraných značek v dlouhém horizontálním seznamu není možnost.
Přemýšlel jsem o vytvoření sekundárního seznamu v horní části seznamu značek s vybranými značkami (podobně jako ty rozevírací seznamy, které zdůraznily USA a další země ), ale přemýšlím, jestli existuje lepší alternativa.
Použijte Faceted Navigation pattern . Amazon.com s tím odvádí skvělou práci:
(screenshot z těchto výsledky vyhledávání pro Nintendo DS - mějte na paměti, že pokud máte svislé omezení, můžete své zkrátit)
Některé poznámky:
<
na rozdíl od červeného kříže (x)
jako mnoho jiných webů.Nedělejte si starosti s tím, že neuvidíte každou vybranou věc, pokud je vybráno mnoho věcí - do kterých je třeba spadnout. Uživatelé zjistí, že na stránce je více vybraných možností, pokud provedli mnoho výběrů (představte si výběr jedné z každé fasety v příkladu Amazonu). Chcete-li věci trochu vyrovnat, můžete seskupit vybrané aspekty nahoře, jak navrhuje @onnodb, i když bych je neskryl za kliknutí (jako v ovládacím prvku select
).
Řekl bych, že má smysl vytvořit tento „sekundární seznam“ vybraných značek v horní části seznamu, například: (skvělý nápad, btw)
Selected tag 1 (X)
Selected tag 2 (X)
Selected tag 3 (X)
-------------------
Tag 4
Tag 5
Tag 6
Vybraným značkám přidejte jinou barvu pozadí, přidejte je k odstranění tlačítka „(X)“ a řekl bych, že pro to máte velmi použitelné uživatelské rozhraní.
Protože máte omezenou nemovitost, abyste s vámi mohli spolupracovat, můžete implementovat následující. Umístěte seznam značek do rozevíracího seznamu a tlačítko plus, které přidá další řádek s rozevíracím seznamem značek. Tímto způsobem jsou zobrazeny pouze tagy, které uživatel vybral.
Vím, že je to docela stará otázka, ale podle mého názoru stále platí pro dnešní aplikaci.
K odpovědi jsem dostal inspiraci z vertikálního posuvníku Visual Studio:
Pro otázku OP - pokud máte seznam položek, které přesahují kapacitu obrazovky, musíte použít posuvník. Pomocí posuvníku můžete zobrazit, kde jsou vybrané položky v seznamu.
Jen z temene hlavy ...
Možnost 1: Upravte atribut „title“ tak, aby se vybrané položky zobrazovaly na vznášedle. Možnost 2: Pomocí jQuery přidejte událost se vznášením pro seznam, který prochází prvkem a uvádí vybrané položky.
Existuje několik způsobů, jak toho dosáhnout:
1) Jak jste zmínili, můžete zvýraznit vybrané značky a přitom zachovat jejich pořadí v seznamu. Chcete-li překonat problém uživatelů, kteří si nejsou vědomi toho, že se vybrané stránky nezobrazují na stránce, můžete udělat něco, aby se jim to dostalo do pozornosti - něco jako blikající šipky v dolní části sekce tagů na stránce a informujte je, že něco existuje důležité, pokud posouvají dolů
=Tag1= Tag2 Tag3 vvvv -----------------------Screen End Tag4 =Tag5=
Značky zvýrazněné == a vv jsou blikající šipky
2) Také si můžete vytvořit další seznam nahoře, ale odstranit značky z originálu, abyste měli vždy stejnou výšku v sekci tagů.
3) Vybrané značky můžete nechat zobrazit jako svislý seznam pod nadpisem výsledků vyhledávání.
Tag Section | Search Results: | xTags1 xTag2 xTag3 | | [Search Results Go Here]
Všimněte si malých xs vedle každého názvu značky; to umožní uživateli rychle odebrat značky a výsledky by se měly odpovídajícím způsobem změnit.
Upřednostňoval bych možnosti 2 nebo 3. 3 Mohlo by to být lepší, protože uživatelé by mohli být trochu překvapeni, že seznam značek se mění, protože stále vybírají značky.