web-gelistirme-sc.com

Gezinme simgelerini göstermenin "Kullanıcı Arayüzü'nu karıştırmaması" için "Güzel" bir yol var mı?

Müzik klasörlerini tarayan ve çalmak için rastgele bir albüm seçen küçük bir masaüstü uygulamam var. İlk sürüm WinForms'dur ve aynı sanatçının daha fazla albümü olduğunda albüm kapağının her iki tarafında "önceki" ve "sonraki" düğmelerine sahiptir.

enter image description here

Düğmeler çok fazla yer kapladığından bu kullanıcı arayüzünden memnun değilim.

WPF kullanarak uygulamayı yeniden yazıyorum ve aynı sanatçının başka albümleri olduğunu belirtmenin daha iyi bir yolunu arıyorum. Kapak resminin üstündeki düğmeleri göstermeyi ve sadece fare konumlarının üzerine geldiğinde bunları göstermeyi denedim, ancak öncelikle sonuçtan memnun değilim çünkü seçeneklerin orada olduğuna dair bir gösterge yok.

Gezinmeyi göstermek için görüntünün her yarısında imlecin "+" ve "-" olarak değiştiği Brian Stevens Photography sitesinde düzgün bir numara buldum, ancak oynatmak için resmin üzerine bir tıklama da kullanıyorum Bu albümü kendim kullanmak istersem bu yaklaşımı benim uyarlamam gerekirdi.

Daha iyi bir yol var mı ya da bir atlıkarınca ya da kapak akışı bununla devam etmenin yolunu mu kontrol ediyor?

Biraz daha arka plan için bunu okuyun blog yazısı benim.

10
ChrisF

Temelde burada 2 fikir, birincisi küçük daireler gösteriyor, ortada vurgulanan biri gösterilen sayfa/albüm, okları tıkladığınızda bir sonraki/bir öncekini vurgulayacaktır. Bu, kullanıcılara belirli bir sanatçı için kaç albümün olduğu hakkında bir fikir verir.

(Matt Lutze'nin yeniden tasarlanması mükemmel ASCII çizim)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

Bir sonraki, bir sanatçı için toplam albümlerin 1. albümünü gösteren 6'dan fazla albüm olduğunda gösterilebilir.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

Bu şekilde öğeler hala mevcut olur ve daha çok görüntülenecek/dinlenecek görsel (veya gerçek) bir kuyruk gösterir.

Rastgele Fikir: Tabii ki Kapak Sanatına tıklayıp içeriye bakabilme fikrini gerçekten seviyorum, bu durumda bu albümdeki şarkıların bir listesini gösterecektir. Bu, belirli bir şarkıyı çalma seçeneği olacaktır.

[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

Gezinme düğmeleri görsel uyumsuzluk nedeniyle kötü görünüyor

  • Onlar yuvarlak ve görüntü kare.
  • Parlak bir şekilde 3D'dir ve görüntü düzdür

ve

  • Üstte ve altta boşa oldukları alan, düğmelere benzer bir dekorasyon kullanmadan düz gri kullanılmaz, bu nedenle düğmelerle de uyumlu değildir.

Dar dikdörtgen düz albüm kapağının tam yüksekliğini düğmeleri, ortada yığılmış ">" veya "<" 'leri kullanmak bu üç sorunu çözecektir, ancak kapak resmi hala gezinme denetimlerinizi ayırma. Gezinme denetimlerinin bir görsel yığın halinde olması daha iyi çalışacaktır.


İşte bir eski moda çözüm (sol) ve bir daha modern bir çözüm (sağ).

Düğmelerin stili (eğim/yuvarlama/gölge/ne var) stil ile eşleşmelidir kapak resmi çerçevesi için.

enter image description here

Sol olanın avantajı, onlara ne kadar gayrimenkul vermek istediğinize ve ne kadar kolay vurulmasını istediğinize bağlı olarak sol/sağ düğmelerin boyutunu kolayca artırabilmenizdir.

Doğru olanın altında balık gözü mini bir atlıkarınca var. Kapak resminden rahatsız olmamak için etkinleştirilmediğinde küçük resimleri eski fotoğraflamanız gerekir ve boyutlar üzerinde çok az seçeneğiniz vardır.

Sol basit ve etkilidir, sağda daha fazla göz şekeri kudosu vardır. Solu tercih ederim. Muhtemelen müzik zevkimin hangi döneme ait olduğunu tahmin edebilirsiniz.

5
James Crook

Başka bir öneri olarak, Apple'ın CoverFlow'u, kullanıcının kapaklardan geçmesini sağlamak için kapak resminin altında yatay bir kaydırma çubuğu kullanır.

Avantajları:

  • Sanatı hızla ovabilir. Uygulamanız için bir gereklilik olmayabilir.
  • Ölçekler çok sayıda sanat ile Tamam.
  • İleri geri fırçalayarak iyi rastgele aramayı sağlar.

Dezavantajları:

  • Kaç tane öğe olduğu belli değil.
3
ICR

Bir UI öğesi hemen belli olmadığı için, bunun kötü bir seçim olduğu anlamına gelmez. Kesinlikle kapağın sağ tarafına tıklamanın bir adım ilerlediği ve sol tarafa tıklamanın geri döndüğü bir şeyle giderdim. (Bunun yalnızca soldan sağa dillerle kullanılacağını varsayarsak?)

Fotoğraf web sitesinin + ve - işaretleri yerine, sadece <ve> 'yi öneririm. Ve imleci dönüştürmelerini veya takip etmelerini sağlamazdım, onları sadece sağ orta ve sol ortaya yerleştirirdim.

Albümü oynatmak/duraklatmak için ortada tıklamayı deneyebilirsiniz.

Bu tür neredeyse görünmez kullanıcı arabirimini bulduktan sonra kullanmak kolaydır ve (her zamanki gibi) düğmelere benzeyen ayrı düğmelere sahip olmaktan çok daha güzel görünür. Bunun estetik uç noktası, tüm kullanıcı arabirimi öğelerini kapak önizlemesinde görünmez öğelere dahil etmek olacaktır. Böylece farenin üzerine gelmediğinde kapağı (ve belki de şarkı başlığını) görürsünüz. Belki de uygulamanız için işe yarar, belki de işe yaramaz.

3
Scott Newson

İlginç bir soru ve her iki mevcut cevapla bazı iyi noktalar.

Her yerde görünür ve gizli kontrollerle ilgili: Her zaman görünür ancak görsel olarak dikkat dağıtıcı olmayan kontrollere yaslanmanızı tavsiye ederim. Yeşil, mavi, desenli; hepsinin en azından biraz dikkat dağıtıcı olma potansiyeli var. Burada Nir ile basit oklar veya "büyüktür" sembolleri kullanma konusunda genel olarak anlaşıyorum.

<< {Görüntü} >>

simgeler/düğmeler.

Öneriyi en iyi simgelerinize de genişletirim ve belki de kavramın masaüstü uygulaması/web uygulaması sınırını görsel olarak köprülemesini öneriyorum:

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

Genelde kapak sanatını arayüzdeki baskın nesne yapmaya yönelirim. Üstteki metin bağlantı düğmelerinin ince-ish sırası, başlığı, daha sonra kapağın büyük bir görüntüsü, her iki tarafta da dar ileri-geri çubukları. Ya da böyle bir şey.

Ne kadar sallarsanız yapın, en azından değişen fare işaretçisi simgesi gibi yeni dinamik göstergeler kullanmamanızı öneririm. Birçok insan işaretçileri değiştiğinde korkacak veya gergin olacak; Deneyimlerime göre, kullanıcı işaretçilerinin tahmin edilebilir eylemlerden sonra tahmin edilebilir şeyler yapmasını ve onları şaşırtmamasını bekler.

Düzgün bir proje ve tartışma için teşekkürler. Başkalarının ne düşündüğünü duymak meraklıyım.

2
Matt

Yanıt veren biri e-postaları desteklediğinden, size bir kullanıcı arabirimi öğesi hemen belli değilse kullanıcı tabanınızın iyi bir yüzdesinin asla bulamayacağını söyleyebilirim.

Ayrıca hiçbir zaman dokümanları veya herhangi bir açılır mesajı okumazlar.

Bir özellik ya açık olmalı (ve genellikle bir düğmeye sahip olmak bile yeterince açık değildir) ya da sadece kullanıcıyı rahatsız etmeden çalışmalıdır (kırmızı dalgalı alt çizgi yazım denetleyicisi iyi bir örnektir, bulmak zorunda değilsiniz - sadece orada ).

Düğmeleri çok büyük olmayacak şekilde yeniden şekillendirebilirsiniz ve böylece arka plana daha fazla karışırlar, örneğin düğmeleri o ağır düğme çerçevesine sahip olmayan iki küçük okla değiştirirseniz, hala kullanıcıya sinyal verirken daha kullanılabilir bir şey var.

2
Nir

Yardım için Web'e bakın. Çoğu kullanıcının yaşadığı yer ve kullanıcı arayüzü beklentilerini yönlendiriyor. Hedef demografiniz için popüler sitelere bakın ve navigasyonu nasıl yönettiklerini görün. Müzikte gezinmek fotoğraflarda gezinmeye benzer, bu nedenle rehberlik için gazete ve dergi sitelerine bakın.

Bu tür gezinme çoğunlukla grafiğin üzerindeki küçük düğmeler veya fareyle üzerine gelindiğinde görünen saydam düğmelerle gerçekleştirilir. Kullanıcı arayüzünüz, kullanıcı dinlemek için bir albüm kapağını tıklayacak şekilde tasarlanmışsa, şeffaf düğmeleri yeterince hızlı bir şekilde keşfeder.

1
David Veeneman