Üç düğme için renk kombinasyonu

Bu üç düğme için en iyi hangi renk kombinasyonu işe yarar:

Hepsi aynı renkte kalmalı mı?

Bunlar benim seçeneklerim:

Tüm sayfanın görüntüsü

Git düğmesi olmalıdır büyük ve en yüksek kontrast birincil biri beri.

Temizle bir çünkü düğme tamamdır ikincil eylem ve nötr olmalıdır .

Benim için Switch düğmesinin boyutu ve kontrastı çok fazla . Onu, "tek başına" daha anlamlı olduğu Origin-Destination açılır menüleri arasına yerleştirirdim.

İşte benim için çok daha temiz ve bu özel amaç için daha iyi kullanılabilirlik sunan iki benzer çözüm (Ben şahsen ilkini seçerim ):

Sadece FYI: Font-Awesom e simgelerini kullandım, ilk görüntüdeki simge (sürümünüze bağlı olarak) icon-exchange / fa-exchange ve oklar icon- ok-sol / sağ ve fa-ok-sol / sağ

EDIT - Yığılmayı kaldırma ( DA01'in açıklamasına göre ):

Eğer Temizle düğmesi (başlangıç / bitiş) sadece bu iki alanı temizleyecektir yine çünkü gerekli görünmüyor kullanıcıların her açılır listesini tıklayın ve seçim yapmak zorunda kalacaktır ve bir Temizle düğmesini eklerseniz bu değişmez .
Bu durumda, kaldırmanızı öneririm, böylece daha temiz bir arayüz elde edersiniz ve kullanıcıların kendileri için herhangi bir değer katmayan bir eylem gerçekleştirmesini önlersiniz (ve ayrıca seçtiklerini yanlışlıkla kaldırırsınız).

Bir çözüm, düğmenizi öncelikli olarak görsel olarak ayırmaktır.

Genellikle birincil düğmeler, ikincil düğmeler ve bazen üçüncül düğmeler ve / veya tercih edilmeyen işlem düğmeleriniz olur.

Birincil ve İkincil için, genellikle tercih ettiğiniz markalama rengini (tamamen öznel) iki kontrast düzeyinde öneririm. Birincil için yüksek kontrast, ikincil için biraz daha az kontrast.

Üçüncül düğmeler Genellikle bir bağlantı gibi tamamen farklı bir görselden kaçınmaya çalışırım.

Yani, örneğiniz göz önüne alındığında ve bağlamı bahis olarak yorumlayabildiğimde, şöyle bir şey öneririm:

Bu sadece çok hızlı bir örnek ve kontrastın erişilebilirlik yönergelerine uygun olduğunu ve devre dışı görünmediğini (benimki gibi, bu yüzden ayar gerektiriyor) onaylamanız gerekir, ancak umarım bu noktaya değinir.

GÜNCELLEME: Ben sadece bu StackExchange yeni bir yazı oluştururken kullandığı desen olduğunu gönderirken fark ettim. KAYDET düğmesi birincil, İPTAL üçüncül ve bir düğme yerine bir bağlantı olarak gösteriliyor.

Yüksek kontrastlı (örn. Siyah-beyaz) renkler her zaman en iyisidir, bu da turuncu seçeneği ortadan kaldırır. Ve sonra, karışıma biraz pazarlama ekleyerek, sayfanızın geri kalanı için düğmeler, uygulama açısından kullanılan renk şeması nedir? Ama eğer seçmem gerekirse: Go: green; Anahtar ...: deniz mavisi; Açık: siyah-beyaz. Unutmayın ki renk de tercih ile ilgilidir.

(Konu dışı: İki alan arasında simge etiketli bir düğmeyle geçiş yapmak için uzun etiketi kaldırabilirsiniz)

Vurgulamak için benzer bir renk tonunun kontrastını değiştiririm diyebilirim . Neden? ( 12 erkekten 1'i renk körlüğü ve 200 kadından 1'i renk körlüğüdür

Ayrıca , Git düğmesini daha karanlık hale getirebilmem için kullanıcıları sistem üzerinden istenen yola doğru yönlendirmek de istersiniz . Tüm düğmeleri tarayabilir ve işleyebilirler veya daha koyu bir renk veya daha büyük bir boyut gibi bir şeye sahip olabilirler, onları ilk önce görünecekleri şekilde tasarlanan veya% 80 en yaygın seçeneğe çekebilirler ve evet, onlara zaman kazandırır.

Bu makale, en önemli düğmenin böyle görünmesi gerektiğini söylüyor

Aşağıdaki örneklerine bakın

Aşağıdaki görüntü kadar iyi görünmüyor (Bence)

Bu makalede ayrıca düğmeleri makul bir sıraya koymak için bahsediliyor . Bence İngilizce konuşan kullanıcılar sağdan sola gittikleri için sağa git düğmesine basarım (böylece doğal olarak bitiş işaretlerini bulmak için sağa bakarlar). Arap kullanıcılar için sola koyardım. Bu nasıl bir İngiliz pazarı için düzenlemek istiyorum.

Bu makaledeki son konu, yıkıcı düğmeler bulmayı zorlaştırmak Senaryoda, gittiğinizde tıklamanız ve yanlışlıkla sola kaçırırsanız, siparişi değiştirmek yerine eylem yerini değiştirmek yerine nakliye yerini değiştirirsiniz. Ayrıca, gerekli olduğunu düşünüyorsanız (yani emin misiniz?) Yıkıcı görevi onaylayabilirsiniz.