it-swarm-eu.dev

Existuje „pěkný“ způsob, jak ukázat navigační ikony, aby neovlivňovaly uživatelské rozhraní?

Mám malou stolní aplikaci, která prohledává hudební složky a náhodně vybere album, které se má přehrát. První verze je WinForms a má tlačítka „předchozí“ a „další“ na obou stranách grafiky alba, která se aktivují, pokud existuje více alb stejného umělce.

enter image description here

Nejsem spokojený s tímto uživatelským rozhraním, protože tlačítka zabírají příliš mnoho místa.

Přepisuji aplikaci pomocí WPF a hledám lepší způsob, jak naznačit, že existují jiná alba stejného umělce. Experimentoval jsem se zobrazením tlačítek v horní části obálky a zobrazoval jsem je pouze tehdy, když se myš převrátila nad svou pozicí, ale nejsem spokojená s výsledkem především proto, že neexistují žádné náznaky, že by možnosti existovaly.

Našel jsem úhledný trik na stránce Brian Stevens Photography , kde se kurzor změní na "+" a "-" v každé polovině obrázku, abych naznačil navigaci, ale také přehrávám kliknutím na obrázek toto album, takže kdybych ho chtěl použít sám, musel bych tento přístup přizpůsobit.

Existuje lepší způsob, nebo je kolotoč nebo krycí tok ovládán tak, jak s tím jít?

Pro trochu více pozadí si přečtěte tento blogový příspěvek můj.

10
ChrisF

V zásadě 2 nápady, první ukazuje malé kruhy, jeden zvýrazněný uprostřed je aktuální zobrazená stránka/album, když kliknete na šipky, zvýrazní se následující/předchozí. To dává uživatelům představu o tom, kolik alb je pro daného umělce k dispozici.

(nové zaměření Matt Lutze vynikající ASCII kresba)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

Toto další by se mohlo zobrazit, když existuje více než 6 alb pro interpreta, který právě zobrazuje album 1 z celkových alb.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

Tímto způsobem jsou prvky stále přítomny a ukazuje vizuální (nebo doslovnou) frontu, kterou je více k prohlížení/poslechu.

Náhodný nápad: Samozřejmě se mi líbí myšlenka kliknout na Cover Art a být schopen nahlédnout dovnitř, což by v tomto případě jednoduše ukazovalo seznam skladeb dostupných v tomto albu. To by jim byla možnost hrát konkrétní píseň.

[Settings]  [Random album]  [Info]

 {   1. Song Names here       ^ }
 {   2. Song Names here         }
 {   3. Song Names here         }
 {   4. Song Names here         }
 {   5. Song Names here       v }

 <<           1 of 10          >>
9
Drofnas

Navigační tlačítka vypadají špatně, protože vizuální disonance

  • Jsou kulaté a obraz je čtvercový.
  • Jsou silně světelné 3D a obraz je plochý

a

  • Prostor, který plýtvají nad a pod, je nevyužitý, šedý a nevyužívá podobnou výzdobu jako tlačítka, takže neharmonizuje ani s tlačítky.

Úzký obdélníkový byt zapíná celou výšku alba alba, pomocí skládaných ">" (nebo "<") ve středu by se tyto tři problémy vyřešily, ale obal by stále byl oddělení navigačních ovládacích prvků. Bude fungovat lépe, když budou mít ovládací prvky navigace jeden vizuální blok.


Zde je staromódní řešení (vlevo) a modernější (vpravo).

Styl tlačítek (zkosení/zaoblení/vržený stín/co máte) - mělo by se shodovat se stylem pro rámeček obálky.

enter image description here

Levý má tu výhodu, že můžete snadno zvětšit velikost levého/pravého tlačítka v závislosti na tom, kolik nemovitosti jim chcete dát a jak snadno chcete, aby byly zasaženy.

Ten pravý má pod sebou mini karusel typu rybí oko. Pokud by se aktivovaly miniatury, museli byste staré fotografie vyfotografovat, abyste se neodváděli od obálky a máte jen malou možnost výběru velikosti.

Levá je jednoduchá a efektivní, pravá má více očních bonbónů. Dávám přednost levici. Pravděpodobně můžete hádat, z čeho pochází můj vkus v hudbě.

5
James Crook

Jako další návrh používá Apple CoverFlow vodorovný posuvník pod obrázkem obalu, který uživateli umožňuje procházet kryty.

Výhody:

  • Může rychle procházet uměním. Nemusí to být požadavek na vaši aplikaci.
  • Měří okish s velkým počtem umění.
  • Umožňuje dobré náhodné vyhledávání procházením sem a tam.

Nevýhody:

  • Není zřejmé, kolik položek existuje.
3
ICR

Jen proto, že prvek uživatelského rozhraní není okamžitě zřejmý, neznamená to, že je to špatná volba. Rozhodně bych šel s něčím, kde kliknutí na pravé straně krytu postupuje o jeden krok a kliknutí na levé straně se vrací zpět. (Za předpokladu, že to bude použito pouze u jazyků zleva doprava?)

Místo znaménka + a - na webové stránce s fotografiemi bych jen navrhl <a>. A já bych je nechal transformovat nebo následovat kurzor, jen bych je umístil do středu vpravo a uprostřed vlevo.

Jako způsob přehrávání/pozastavení alba můžete experimentovat s kliknutím uprostřed.

Tento druh téměř neviditelného uživatelského rozhraní je stejně snadno použitelný, jakmile jej najdete, a vypadá to mnohem hezčí, než mít samostatná tlačítka, která visí kolem (jako obvykle), vypadají jako tlačítka. Estetickým extrémem by bylo začlenit všechny prvky uživatelského rozhraní do neviditelných prvků v náhledu obálky. Tak, že vidíte pouze obal (a možná i název skladby), když se na něj myš nevznáší. Možná by to fungovalo pro vaši aplikaci a možná ne.

3
Scott Newson

Zajímavá otázka a některé dobré body s oběma stávajícími odpověďmi.

Pokud jde o všudypřítomné vs. skryté ovládací prvky: Doporučil bych se naklonit k ovládacím prvkům, které jsou vždy viditelné, ale nejsou vizuálně rušivé. Zelená, modrá, vzorovaná; všechny mají potenciál být alespoň trochu rušivé. Obecně s Nir souhlasím s použitím jednoduchých šipek nebo „větších než“ symbolů

<< {Image} >>

vs. ikony/tlačítka.

Tento návrh bych rozšířil také na vaše hlavní ikony a možná navrhuji nechat koncept vizuálně překlenout hranici aplikace pro stolní počítač/webovou aplikaci:

[Settings]  [Random album]  [Info]
              Title
   {                          }
   {                          }
<< {          Cover           } >>
   {                          }
   {                          }

Obecně bych inklinoval k tomu, aby se obálka stala dominantním objektem v rozhraní. Tenká řada textových odkazů nahoře, nadpis, potom velký obrázek obálky, na obou stranách úzké pruhy dozadu. Nebo něco takového.

Nicméně, houpáte se, alespoň navrhuji nepoužívat nové dynamické ukazatele, jako je měnící se ikona ukazatele myši. Mnoho lidí bude mít strach nebo nervozitu, když se změní jejich ukazatel; z mé zkušenosti uživatel očekává, že jejich ukazatel bude dělat předvídatelné věci po předvídatelných akcích a nepřekvapí je.

Úhledný projekt a díky za diskusi. Jsem zvědavý, co slyší ostatní.

2
Matt

Jako někdo, kdo odpovídá na podporu e-mailů, vám mohu říci, že pokud prvek uživatelského rozhraní není okamžitě zřejmý, dobré procento vaší uživatelské základny jej nikdy nenajde.

Nikdy také nebudou číst dokumenty ani žádnou vyskakovací zprávu.

Funkce by měla být buď zřejmá (a často ani s tlačítkem není dostatečně zřejmá), nebo by měla fungovat, aniž by obtěžovala uživatele (kontrola pravopisu pod čarou červeného křídel je dobrým příkladem, nemusíte jej najít - je to prostě tam ).

Můžete přepracovat tlačítka tak, aby nebyla tak velká, a tak se více prolínají do pozadí, například pokud nahradíte tlačítka dvěma malými šipkami, které nemají tak těžký rámeček tlačítek, že by to nevystrčily, mnohem více signalizuje uživateli, že je něco dostupnějšího.

2
Nir

Pokyny naleznete na webu. Je to místo, kde žije většina uživatelů, a to odpovídá jejich očekáváním uživatelského rozhraní. Podívejte se na populární weby s cílem cílové demografické skupiny a podívejte se, jak spravují navigaci. Navigace s hudbou je podobná navigaci s fotografiemi, proto se podívejte na stránky novin a časopisů.

Navigace tohoto druhu je nejčastěji prováděna malými tlačítky nad grafikou nebo průhlednými tlačítky, která se objevují při přejetí myší. Pokud je vaše uživatelské rozhraní navrženo tak, aby uživatel klikl na obal alba, aby si ho mohl poslechnout, objeví dostatečně rychlá tlačítka tranporentních tlačítek.

1
David Veeneman