web-gelistirme-sc.com

Sayfalandırma İyi Uygulama

Potansiyel olarak çok büyük (5.000 satır artı) olabilecek bir tablo üzerinde gerçekleştirmem gereken bazı sayfalandırmalarla başa çıkmanın en iyi yolundan emin değilim.

İlk sorum, sayfa başına gösterilen satır miktarının yalnızca mizanpaj tarafından dikilmesi veya sayfaların miktarının da dikkate alınması gerektiğidir. Örneğin, <1000 göster 20 satırı,> = 1000 göster 30 satırı mı demeliyim?

Bir sonraki soru, kullanıcının tabloyu olabildiğince filtrelediği ve 50 sayfalık bilgi ile kaldığı varsayılarak, sayfa 45'e atlamak için bir giriş kutusu almaları gerekir mi? Yoksa atlama (1) atlama (5) düğmeleri yeterli mi? Şu anda son kullanıcı tabloları nasıl kullanacağını bilmiyorum, bu yüzden ilk önce onları denemek için hangi seçenek konusunda emin değilim.

Son olarak, paylaşabildikleri doğru sayfalandırma örnekleri var mı? Her zaman iyi bir referans malzemesi arıyorum!

25
Toby

Bu sayfalandırma doğru şekilde yapılmış olabilir veya olmayabilir, ancak web uygulamamda sayfalandırmayı nasıl yapacağım:

|< First, << Previous, Page [5] of 12, Next >>, Last >|

Dış dört seçenek bağlantılardır, Page [5] of 12, [5] giriş alanı olan bir formdur. JavaScript'in etkin olduğu kullanıcılar için, gönder düğmesini gizlerim ve formu unfocus olayında gönderir veya tuşa basarım. Kullanıcı, bir açılır menüden seçebilecekleri kaç satır görüntülemek istediğiniz seçeneğine sahiptir: 10, 20, 50, 100, Tümü. Ayrıca, sayfalara ek olarak sonuçların sıralanmasını ve filtrelenmesini de sağlıyorum, ancak bu her durumda mantıklı olmayabilir.

Düzenle:

Size daha iyi bir fikir vermek için web uygulamamızın maketinden bir pasaj. Bu sürümde, kelimeler düğmelerden çıkarılmıştır, ancak hafif bir gecikmeden sonra fareyle üzerine gelindiğinde bir araç ipucu olarak görünür. Ancak, kelimeleri tutmanın daha yüksek düzeyde kullanılabilirliğe neden olacağını görebilirsiniz.

Virtuosi Media's Pagination Example

Dikkat edilmesi gereken birkaç nokta:

  • İlk sayfa olduğu için "İlk" ve "Önceki" düğmeleri devre dışı bırakıldı.
  • Mavi, etkin düğmeleri gösterir (renk körü kullanıcıların bir fark söyleyebilmesini sağlamak için bu temayı bir renk denetleyicisi aracılığıyla çalıştırmam gerekecek).
  • Düğmeler devre dışı olsa bile daima kalır. Bu arayüz tutarlılığı sağlar.
  • Ölçek nedeniyle açılan bir seçim kutusu yerine bir giriş alanı seçtim. 3000 sayfanız varsa sayfayı bulmak için aşağı kaydırmak istemezsiniz
  • Sayfalama, amaçtaki benzerliği göstermek için tek bir görsel bileşen içinde gruplandırılmıştır.
27
Virtuosi Media

Böyle bir cevap için özür dilerim, ancak duruma göre değişir . Ne tür içeriğiniz var ve kullanıcı ne arıyor? Kullanıcının hedefleri nelerdir? Bir web sitesi veya bir uygulama mı?

Çoğu durumda, örneğin sonsuz kaydırmayı kullanarak sayfalandırmayı önleyebilirsiniz ( Google resim arama arama sonuçlarına bakın).

Sayfalandırmayla ilgili sorun, sayfaların kendisinin bir anlamı olmamasıdır. Neden 45. sayfaya gitmeliyim? Neden 38 değil? İçerik sıralanırsa, sayfalara anlamlı adlar vermeye çalışabilirsiniz (bir alfabenin harfleri veya tarih aralığı veya anlamlı olan herhangi bir şey gibi). Sayfa başına satır sayısı mümkün olduğunca büyük olmalıdır, çünkü kaydırma genellikle sayfalarda gezinmekten çok daha iyi bir deneyim sağlar (ancak genel bir kural değildir ve bazı istisnalar vardır).

Örnekler ve iyi uygulamalar için burada bir harika makale .

12
Kostya

Genel olarak, sayfa başına öğe sayısı aşağıdaki ölçütlere göre belirlediğiniz bir şeydir:

  • Ne tür veriler görüntülüyorum ve belirli sayıda öğe sayfayı ne kadar sürede oluşturur?
  • Sayfadaki X öğenin uygulamanın performansı için sonuçları nelerdir?
  • Kullanıcıların sayfa başına görüntülenen öğe sayısını özelleştirmesine izin vermek ister miyim?
  • Sayfalar arasında gezinmeyi önemsiyorsam (örneğin, bir kullanıcı 512 numaralı belirli sayfaya gitmeyi umursar mı?), Sayfa başına öğe sayısı sayfa numarasının gezilebilirliğini nasıl etkiler?
  • Hangi sayfalandırma denetimlerini kullanabilirim?

Yukarıdaki soruları cevaplarsanız, ikinci sorunuzun cevaplarına hoş bir şekilde yönlendirilirler. Sayfalandırma, sahip olduğunuz verilerin ve görüntülediğiniz öğe sayısının bir ürünüdür. Tavsiyem, kullanıcılarınızın hangi sayfayı görüntülemek istediklerini belirtmek isteyip istemediklerini belirlemektir. Bunu, kullanıcı testi yaparak ve ne tür bilgilerin listelendiğini düşünerek anlayabilirsiniz. Örneğin, arama sonuçları nadiren "sayfa 47'ye gitmek istiyorum" diyebilecek kadar spesifiktir, çünkü bunlar genellikle şifreli, opak bir algoritmaya göre sıralanır. Ancak, isimleri alfabetik sırayla listeliyorsanız, sayfa 47'ye gitmek çok sezgisel olabilir.

Benzer şekilde, görüntülemekte olduğunuz veri türü de gezinmeyi etkileyebilir ve işleri basitleştirmek için yönlü gezinti tasarım modelini düşünmek isteyebilirsiniz. Alfabetik isimler hakkında az önce verdiğim örnekte, çok fazla veri varsa, harfleri (A | B | C | D vb.) Ve her harfin içindeki sayfaları kullanarak sayfalandırmayı düşünebilirsiniz.

Somut olarak:

  • Ne istediklerini bilmiyorsanız, kullanıcılara çok fazla kontrol vermenizi önermiyorum
  • Bunun yerine, geçerli sayfanın etrafında dolgu sunun (1 .. 7 8 [9] 10 11 .. 28)
  • Performans nedenleriyle yapamıyorsanız, algoritmik olarak sıralıyorsanız ilk ve son sayfaları ekleyin.
  • Algoritmik olarak sıralama yapıyorsanız, çeşitli sıralama seçeneklerini (sıralama düzenini ters çevirme gibi) düşünün - veri türüne

Doğru yapılan sayfalama örnekleri:

  • Flickr - seçilen, etkin olmayan ve bağlantı durumu arasındaki açık fark; erişilebilir renkler; iyi tıklama hedeflerine sahip yastıklı bağlantılar; geçerli sayfa çevresinde iyi dolgu; aşırı karmaşık değil. Kişisel bir favori.
  • Funda.nl - Büyük, basit, okunması kolay tasarıma sahip, aynı zamanda sayfalandırmaya da yansıyan Hollanda gayrimenkul sitesi
  • Bing - BS yok, minimalist tipografi tasarımı, sayfalamanın çok ince ama aynı zamanda kullanımı kolay olduğu anlamına geliyor
  • Google (açıkçası) - bir çeşit hile, ancak birçok seçeneğe sahip olmasına rağmen, hala basit hissediyor ve hatta yüzünüze bir gülümseme getiriyor
  • Chris Messina, Flickr'daki tasarım desenleri albümünde birkaç iyi sayfa çekimi içeriyor.
6
Rahul

Sayfalandırma kalıpları:

İlk soruya gelince - Ben tutarlılık hayranıyım (ve çoğu kullanıcı da). Kullanıcıyı karıştırmayın ve bu sefer neden daha fazla satır gördüklerini düşünmelerini sağlayın ... Çok yaygın ve kullanışlı bir uygulama olan "sayfa başına öğe" yi seçmelerine bile izin verebilirsiniz.

3
Dan Barak

Kullanıcılar kaydırmayı ve sonra sayfalamayı tercih eder. Kaydırma tekerleğini çalıştırmak, küçük gezinme bağlantılarını hedeflemekten çok daha kolaydır.

Çağrı ve Kaydırma ile ilgili Morea

1
Miki