web-gelistirme-sc.com

Uzun bir listedeki hangi öğelerin seçildiğini netleştirmek

Kullanıcıların öğeleri etiketlemesine ve üzerlerinde bir etiket veya etiket kümesiyle tüm öğeleri görüntülemesine olanak tanıyan bir web arabiriminin bir bölümünü tasarlamaya çalışıyorum - gmail, tüm iletileri görüntülemek için birden fazla etiketi seçmenize izin veriyorsa gmail'i düşünün bu etiketlerin. Şu anda hangi etiket kümesini görüntülediklerini kullanıcıya göstermenin en iyi yolu nedir?

Basit vurgulama bir etiket için işe yarar, ancak etiket listesi ekrandan daha uzunsa, hepsini aynı anda göremezler, bu da kullanıcının hangi etiketleri seçtiğinin net olmamasına neden olur. Bu soruna ek olarak, çalışmak için az miktarda alanım var - tüm etiket ve öğe arayüzü yaklaşık 300x500 piksel, bu yüzden seçilen etiketleri uzun yatay bir listede görüntülemek bir seçenek değil.

Seçilen etiketlerle etiket listesinin üstünde ikincil bir liste oluşturmayı düşünüyordum (bunun gibi ABD ve diğer ülkelerin vurgulandığı açılır listeler ), ancak merak ediyorum daha iyi bir alternatif var.

13
sslepian

Faceted Navigation pattern kullanın. Amazon.com onunla harika bir iş çıkarıyor:

Amazon faceted navigation

(bunlardan ekran görüntüsü Nintendo DS için arama sonuçları - dikey bir kısıtlamanız varsa kendinizinkini daha kısa tutabileceğinizi unutmayın)

Dikkat edilmesi gereken bazı noktalar:

  • Her modelde seçili olan öğenin ne olduğu konusunda çok net iletişim (bu durumda, bağlantılar için siyah kalın ve mavi)
  • Her biri birer köprü olsa bile her öğeyi bir köprü haline getirerek mükemmel okunabilirlik - bu durumda, köprü alt çizgisi desenine göre okunabilirliğe öncelik vermek daha yararlıdır
  • Her model, üzerlerine tıklayacak olmanız durumunda kaç sonuç olduğunu gösterir. Arama arka ucunuza bağlı olarak bazen uygulanması biraz karmaşıktır.
  • Doğru kontroller, ne tür bir fasetle uğraştığınıza, harika metin yazımına ve doğru ifadelere (bu durumda belirli tarihleri ​​umursamadığınız için tarihler için "Son 30 gün") bağlı olarak değişir.
  • Her faset ile bir seviye yukarı çıkma yeteneği, aslında bu faset seçiminizi "geri alır". < kırmızı çarpı işaretinin aksine (x) gibi birçok site var.
  • Amazon'un insanların yukarıdan aşağıya tarama yapması ve sol/sağ sütuna bakmaması durumunda ek bir kullanışlılık boyutu için yaptığı gibi bunu ekmek kırıntısı navigasyon modeliyle birleştirin

Eğer birçoğu seçilmişse, seçilen her şeyi görememe konusunda çok fazla endişelenmeyin - bu, içine düşmek için yaygın bir navigasyon tuzağıdır. Kullanıcılar, çok sayıda seçim yaptıklarında sayfanın altında daha fazla seçenek olduğunu görürler (Amazon örneğindeki her bir fasetten birini seçtiğinizi düşünün). Biraz telafi etmek için @onodb'un önerdiği gibi üst kısımda seçilen yönleri gruplandırabilirsiniz, ancak bunları bir tıklamanın arkasına gizlemezdim (select kontrolünde olduğu gibi).

7
Rahul

Listenin en üstünde, seçilen etiketlerin bu 'ikincil listesini' oluşturmanın mükemmel bir mantıklı olduğunu söyleyebilirim, (harika bir fikir, btw)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

Seçilen etiketlere farklı bir arka plan rengi verin, bunları kaldırmak için bir "(X)" düğmesi ekleyin ve bunun için çok kullanışlı bir kullanıcı arayüzünüz olduğunu söyleyebilirim.

5
onnodb

Sınırlı bir gayrimenkulünüz olduğundan, aşağıdakileri uygulayabilirsiniz. Etiket listesini bir açılır listeye yerleştirin ve açılır bir etiket içeren başka bir satır ekleyen bir artı düğmesine sahip olun. Bu şekilde görüntülenen tek etiketler kullanıcının seçtiği etiketlerdir.

enter image description here

3
Denzo

Oldukça eski bir soru olduğunu biliyorum, ama bugünlerde uygulama için hala geçerli.

Cevap için Visual Studio dikey kaydırma çubuğundan ilham aldım:

MS Visual Studio scroll bar

  • kaydırıcı yüksekliği, içeriğin toplam uzunluğuna kıyasla ekran alanının boyutuna karşılık gelir
  • ince yatay mavi çizgi, imlecin o anda yerleştirildiği yeri gösterir
  • koyu sarı çubuklar, arama teriminin bulunduğu satırları işaretler

OP sorusu için - ekran kapasitesini aşan bir öğe listeniz varsa, kaydırıcıyı kullanmanız gerekir. Seçilen öğelerin listede nerede olduğunu göstermek için kaydırıcıyı kullanabilirsiniz.

0
Mike

Sadece kafamın üstünden ...

Seçenek 1: Fareyle seçili öğeleri göstermek için 'başlık' özelliğini değiştirin. Seçenek 2: Öğeyi dolaşan ve seçilen öğeleri listeleyen bir fareyle üzerine gelme olayı eklemek için jquery kullanın.

0
Babak Naffas

Bunu yapmanın birkaç yolu var:

1) Daha önce de belirttiğiniz gibi, seçili etiketleri listede vurgulamaya devam ederken vurgulayabilirsiniz. Kullanıcıların sayfada gösterilmeyen etiketlerin farkında olmama sorununun üstesinden gelmek için, dikkatlerini çekmek için bir şeyler yapabilirsiniz - sayfanın etiket bölümünün altındaki yanıp sönen oklar gibi bir şey olduğunu bildirmek için aşağı kaydırırlarsa önemli

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

== işaretli etiketleri işaretleyin ve vv yanıp sönen oklardır

2) Ayrıca bu ek listeyi en üstte yapabilir, ancak etiketleri orijinalinden kaldırabilirsiniz, böylece etiketler bölümüne her zaman tutarlı bir yükseklik elde edersiniz

3) Seçilen etiketlerin, arama sonuçlarının başlığı altında dikey bir liste olarak gösterilmesini sağlayabilirsiniz.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

Her Etiket adının yanındaki küçük x'lere dikkat edin; bunlar kullanıcının etiketleri hızla kaldırmasına olanak tanır ve sonuçlar buna göre değişmelidir.

2 ya da 3 numaralı seçenekleri tercih ederim.

0