web-gelistirme-sc.com

Listedeki öğeleri sipariş etmek için UI tasarımı

Bir listedeki öğeleri sipariş etmek için hangi bileşen/UI tasarımını kullanırsınız (yukarı/aşağı taşıma düğmelerine sahip bir tablo)?

6
padis

Sürükleyip bırakma, çoğu kullanıcı arayüzü için muhtemelen en iyisidir. Ne yazık ki, bu özelliği keşfedilebilir yapmak zordur. Her öğeye yakın bir "kapmak" alanı yardımcı olur. Sürükleme sırasında görsel geri bildirim ve bir öğe bir Kenara sürüklendiğinde otomatik kaydırma, iyi bir sürükle ve bırak sıralama arayüzünde gereklidir.

move up ve move down düğmeleri, sürükleyip bırakmanın yanı sıra. Evrensel ve hemen tanınan bir "yakalayıcı" simgesi/stili yoktur. Nadiren kullanılan arayüzler için, biraz hantal düğmeler kullanılarak harcanan zaman, kullanıcının daha verimli sürükle ve bırak işlevselliğini keşfetme süresinden daha az olabilir.

Ayrıca, sürükle ve bırak ile doğru şekilde yapılmazsa kullanıcıya sinir bozucu birçok ince detay vardır (örneğin, otomatik kaydırma). Düğmeler sık ​​kullanımda verimsiz, ancak açık, kullanımı kolay ve kodlanması çok daha kolay.

5
dbkk

Sürükle ve bırak, doğrudan listeye yapılan tıklamaların bir etkisi olduğu 'doğrudan manipülasyon' olarak kabul edilebilir, vs 'ayrı bir düğmenin veya listede etkili olan başka bir işlemin olduğu' dolaylı manipülasyon '.

Listenizde ne olduğuna bağlı olarak, her ikisi de uygun olabilir.

Ne yaparsanız yapın, Jakob Nielsen'in En İyi 10 Uygulama Tasarım Hataları :

Sürükle ve bırak tasarımları, bir şeyin sürüklenebileceği veya bir şeyin düşebileceği açık olmadığında genellikle en kötü suçlulardır. (Ya da sürükle veya bırak yaparsanız ne olur.) Bunun aksine, basit onay kutuları ve komut düğmeleri genellikle tıklayabileceğiniz şeyleri ağrılı bir şekilde belirginleştirir.

Dolayısıyla, bir listede doğrudan bir manipülasyon yeteneği sağlarsanız, aşağıdaki gibi görsel ipuçları sağlayın:

  1. 'tutuşabilme' anlamına gelen görsel 'kapmak' alanı (nokta veya çizgi dizisi)
  2. işaretçi değişimi
  3. hareket ederken geri bildirim. Bakın bu demo noktamın (1) nasıl desteklenmediğine dikkat edin ve bu listelerin sıralanabilir olduğu açık değildir.
4
Julian H

Muhtemelen şimdi elemanların doğrudan manipülasyonunun tercih edildiğini kabul ediyorum.

37 Sinyalin kibirli tarafta olduğu iddialarına rağmen, Basecamp son derece kullanışlı bir uygulamadır. Bu uygulamadaki hemen hemen her liste, sürükle ve bırak yöntemiyle öğelerin yeniden sıralanmasını sağlar.

İlk olarak, üst köşedeki bir metin bağlantısı aracılığıyla yeniden sıralama moduna geçmek için tıklamanız gerekir. Ardından, tıklayıp basılı tuttuğunuz ve ardından öğeyi taşımak için manipüle ettiğiniz 'yakalanabilirliği' açıkça gösteren küçük bir görüntü var. Eke bakınız.

alt text

2
jameswanless

Yukarı/aşağı düğmeleri iyi, ancak eğilim doğrudan veriler üzerinde çalışmaya, yani öğeyi tıklayıp (veya hafifçe vurarak) taşıyabilir. Önemli bir örnek Netflix kuyruğudur. Bu, listeden birden fazla öğe seçerken bile işe yarayabilir.

0
Hisham

Benim tercihim, fareyle üzerine gelindiğinde görünen sürükle ve bırak seçicileriyle sürükle ve bırak özelliğini kullanmak. Bizim uygulamada, öğenin yeniden sipariş verilebileceğini gösteren bir çift yukarı/aşağı ok kullanıyoruz.

İmleci değiştirmek, teknoloji meraklısı bir kalabalık için yeterince iyidir, ancak genel amaçlı uygulamalar için daha açık bir şey istersiniz.

0
Sam