7 Bilmeniz Gereken WordPress Düğme Tasarım Kılavuzları
Düğme Tasarım Yönergeleri Yapma Aşırı Görünebilir. Ayrıca, web sitesi düğmesinin nasıl olduğunu zaten biliyorsunuz, değil mi? Peki, bunu yapmak için gerçekten yardıma ihtiyacınız var mı? Her zamanki gibi düğme, önemli işlevlere sahip web tasarımının merkezi kısmı oldukları unutulmamalıdır:
Düğme genellikle ana oyunculuk davetiyedir
Satın Al düğmesi geliri büyük ölçüde etkiler
E -posta Kayıt Düğmesi, listenizi oluşturmaya yardımcı olur
Potansiyel müşteriler üretmek için önemli form teslimat düğmesi
Sosyal düğme içeriğinizi paylaşmaya yardımcı olur
Bu nedenle, bu yazıda size bir dizi düğme tasarımı kılavuzu ve en iyi uygulamalar vereceğiz. Amaç, bir dönüştürme düğmesi yapmanıza ve web sitenizin hedeflerine ulaşmak için sizi yaklaştırmanıza yardımcı olmaktır.
Yalnızca kısa bir uyarı: Aşağıdaki en iyi uygulama, daha iyi bir düğme yapmanıza yardımcı olsa da, dönüşüm oranınızı neyin artıracağını gerçekten bilmek için ayrı bir A/B testi kullanmanız gerekir. Yalnızca çeşitli alternatifleri deneyerek, sitenizi hangi tür düğmelerin geliştireceğini bileceksiniz. Aşağıdaki daha iyi bir düğme kılavuzu yapmanıza yardımcı olacak Düğme Tasarım Kılavuzu, kullanıcının tıklamalarını ve dikkatini çekecek bir düğme oluşturmanıza yardımcı olacaktır. 1. Web sitesiyle eşleştiklerinden ve markalaşma düğmelerinizin öne çıkması gerektiğinden emin olun (kullanıcının üzerine tıklaması için), ancak olumlu bir şekilde.
Bu nedenle, Düğme Tasarım Kılavuzu’nu takip ederken, sonuçların görünen bağlamda iyi entegre edildiğinden de emin olun. Mevcut markanızı ve tasarımınızı düşünün ve düğmenizin sitenizin renk paleti ve stili ile uyumlu olduğunu görün. Aynı zamanda, denemekten kaçınmayın. Kalın renk sıçraması, sitenizin dönüşümü artırmak için ihtiyaç duyduğu şey olabilir. 2. Bu nokta zaten var olan bir tasarım sözleşmesi ile kalın, ancak çoğu zaman olmamalıdır. Kullanıcıların düğmeyi tıklaması için seçeneğin orada olduğunu fark etmesi gerekir. Tasarımınız olağan sözleşmenin çok dışındaysa, kullanıcıların düğmeleri tanımasını engelleyebilir. Peki, sözleşmeler nelerdir? Birincisi bir şekil. Bilgisayarın uzun evrimi sayesinde, en bilinen şekil dikdörtgendir (yuvarlak açı olsun veya olmadan). Sadece WordPress’e bak.
Kullanıcılar uzun zamandır stillere maruz kalmıştır, böylece onları kolayca tanırlar. Tabii ki, şimdi diğerleri de kuruldu ve başlamak için başka bir iyi yer.
Buradaki önemli kısım, a) kullanılabilmesi ve b) kullanıcıların yanlışlıkla yanlış şeyi çalmasını önleyecek şekilde bir düğme yapmaktır. Boyut açısından, insan parmağının ortalama ucu 16-20 mm’dir. Bu yaklaşık 45-57 pikseldir. Bunu karşılamak için Apple, minimum 44 x 44 piksel düğme boyutu önerir (retina ekranı için bu noktayı oluşturun). Bağlantı ayrıca diğer üreticilerin önerilerini de belirtti, çoğu yaklaşık 10 mm dedi. Görünüşe göre boşluklar için somut bir kural yok. Düğmenizin yanlış düğmeye basmanız mümkün olmayacak şekilde düzenlendiğinden emin olun. Yeterli alan sağlamak, harekete geçirme daveti gibi daha önemli düğmelerin ayrılmasına da yardımcı olabilir. Bir düğmeyi kullanıcıların net bir şekilde tanımlayabilecek şekilde tasarladıktan sonra geri bildirim uygulayın, çalışma durmayacaktır. Bir sonraki soru: Düğmeyi kullandıklarında ne olur? Görünüşe göre, bu tasarım öğesinin birden fazla durumu var: Normal – Bunun bir düğme olduğunu açıkça görebilirsiniz, öğe etkileşimi davet eder
Odaklanmış – Genellikle fare imlecinin etkisi, elementlerle etkileşimin mümkün olduğunu doğrulayın
Basıldı – Kullanıcıya harekete geçme, bir şey olduğunu doğrulayan saygı duyduğunuz için saygı gösterin
Meşgul – arka planda gerçekleşen faaliyetleri sergilemek
Devre dışı bırakıldı – diğer eylemlerin mümkün olduğunu açıklıyor, şu anda değil
Kaynak: Tutsplus Geri bildirim vererek, etkileşimleri daha net ve daha ilginç hale getirebilirsiniz. Bu, kullanıcıların eylemlerinin bir etkisi olduğunu görmeleri için görsel bir hediye.
6. Elbette aradıkları konum, düğmenizi tasarladığınızda, son adım kullanıcının bulabildiğinden emin olmaktır. Değilse, nasıl tıklayacaklar? Bu nedenle, doğru düğme konumunu seçmek de önemlidir. Burada da yerleşik kongreyi takip etmek mantıklı. Örneğin, çoğu insan ana davetiyenin en iyi paroda hareket etmesini bekler, bu yüzden bunu koymak için iyi bir yerdir. Diğer bombardıman uçaklarının, altbilgideki sosyal medya düğmeleri gibi böyle bir kongre olabilir.
Kaynak: Medya Yörüngesi Bazen Sözleşmeyi ihlal etmek mantıklı olsa da, her zaman kullanıcıları karıştırma riski altındasınız. Bu da, sitenizi algılamalarını büyük ölçüde etkiler. En başarılı olanlardan birini seçmek için farklı bir olasılığı test edin. 7. Diğer tasarımlardan gelen kontrast, düğmenizi düzgün bir şekilde konumlandırır, ayrıca yeterli kontrast sağlamak anlamına gelir. Diğer tasarımlardan çıkıntılı bir düğme yaparak, etkileşimin mümkün ve istendiğini açıklarsınız. Ayrıca düğmelerinizin kurtulmasını önler. İşte kontrast yapmak için ortak aracınız:
Renk – Düğme etiketi dahil olmak üzere kontrast renkleri kullanın
Boyutlar – Daha büyük unsurlar daha belirgindir Tipografi – Kalın metin veya farklı yazı tipleri kullanmak dikkat çekebilirUzay – elementin etrafındaki daha fazla nefes alan daha fazla odaklanma anlamına gelir
Kontrastın yeterince yüksek olup olmadığını öğrenmenin iyi bir yolu, şaşı testini kullanmaktır. Bunun için, ekranınızdan uzak durun, gözlerinizi çalıştırın ve düğmenin hala öne çıkıp çıkmadığını görün.
Kaynak: MailChimp kulağa garip geliyor, ancak web tasarımcıları arasında denenmiş ve doğru bir tekniktir. Bir düğmenin nasıl iyi görünmesini sağlayacağınızı bildikten sonra WordPress’te nasıl bir düğme yapılır, soru şu ki, sitenizde nasıl elde edersiniz? Neyse ki, yeni Gutenberg editörü bunu çok kolaylaştırıyor. 1. Bir blok öğesi oluşturun Gutenberg’de diğer blok öğeleri gibi bir düğme yapabilirsiniz. Soldaki artı sembolü tıklayın. Menü açık olduğunda, düğmeyi bulmak için düzen öğelerine gidin. Sayfanıza eklemek için tıklayın. 2. Düğme metnini ve hedefini yapılandırın Kığ aştıktan sonra WordPress bu menüyü açar.
Burada aşağıdaki seçenekler var:
Oryantasyon Değiştir – Düğmeyi sayfanızın soluna, ortasına veya sağına hizalamak için üstteki sembolü kullanın
Düğme Metnini Düzenle – Metni istediğiniz her şeye değiştirmek için düğmeyi tıklayın, metni kalın, eğik veya çapraz olarak ayarlayacak şekilde ayarlayın. Hedefe girin – bir URL veya tip olduğu söylendiğinde, tıklatırken düğmenin ziyaretçileri nereye getireceğini belirleyebilirsiniz 3. Tasarımı tamamladıktan sonra düzenleyin, stil zamanı. Bunun için, sağ tarafta sadece birkaç tıklama ile düğmeyi ve metin rengini değiştirme seçeneğini bulursunuz. Mevcut seçeneklerden birini seçin veya yeni gölgeler üretmek için renk seçmenlerini kullanın. İstediğiniz tondan hex kodunu da girebilirsiniz. Editör, okunması zor olacak bir renk kombinasyonu seçerseniz bile sizi uyarır. Ayrıca, devamı altında düğmeye özel bir CSS sınıfı ekleme yeteneğine sahipsiniz. Bu şekilde, Hover efektleri ve daha fazlası dahil olmak üzere birkaç CSS işaretlemesine sahip özel tasarımlar oluşturabilirsiniz. Ve sadece bu – WordPress’e düğmeler eklemenin en basit yolu. Kısa Düğme Tasarım Kılavuzu Can düğmesi bir web tasarımında biraz dışlanabilir, çünkü birçoğu bunu genel bir unsur olarak görür. Ancak, oynadıkları rol hafife alınmamalıdır. Düğme, dönüşüm ve satışlardan e -posta kaydına kadar her şeyi etkiler. Yukarıda, mülkünüzü daha etkili hale getirmek için kullanabileceğiniz bir düğme tasarım kılavuzu verdik. Onları çok hızlı bir şekilde özetleyelim: Düğmenizin sitenizin geri kalanıyla eşleştiğinden emin olun
Onları açıkça bir düğme olarak tanımlamasını sağlayın
Net ve farklı etiketleme ekleyin
Yeterli boyut ve mesafe ekleyin
Kullanıcıya görsel bir geri bildirim verin Düğmeyi sayfanıza açıkça yerleştirin
Diğer sayfalardan yeterince kontrast oluşturun
