Temizliği göstermek ve 'iyi tasarlanmış' görünmek için temiz düz tasarım düğmeleri tasarlayın

Son zamanlarda küçük bir CSS çerçevesine başladım. ( http://mincss.com ilgilenen varsa) Bazı düğmeler için hızlı bir şekilde ilk tasarımı çıkardım. UX StackExchange (ve çok sayıda iyi geri bildirim) hakkında geri bildirim istedikten sonra, bunları iyileştirmek için buraya ek tavsiye almak için geldim.

UXStackExchange'in geri bildirimlerinden sonra şu anda böyle görünüyorlar. Siyah kenarlığı kaldırdım, 3 piksel "gölge" ekledim ve 1 piksel eğimi kaldırdım:

Düz tasarımlı bir görünüm elde edeceğim.

Kalan 3 sorum var:

• Bu düğmeler yeterince uygunluk gösteriyor mu? (Bu düz tasarımla ilgili bir sorun gibi görünüyor)
• Küçük bir degrade eklemenizi önerir misiniz?
• İyi tasarlanmış görünüyorlar mı? (sübjektif biliyorum, ama bunu sormanın daha iyi bir yolunu düşünemiyorum)

Bu düğmelerle ilgili herhangi bir geri bildirimi memnuniyetle karşılarım (ve muhtemelen kullanacağım).

Bence çok ince bir gradyan, düğmelerin estetiğini kesinlikle geliştirecek. Windows 8 "Metro" stili bu stilin büyük bir destekçisi olduğundan, bunu örnek olarak kullanacağım:

İlk bakışta "fayans" düz bir renk gibi görünür, ancak yakından bakarsanız soldan sağa doğru giden çok hafif bir gradyan vardır. Bazılarında diğerlerinden daha belirgindir, ancak hepsinde vardır. Yisela'nın dediği gibi, bu gradyanın zar zor farkedilir, neredeyse bilinçaltı olmasını istiyorsunuz.

Bahsettiğiniz gibi, düz düğmeler tasarlarken birkaç şeye dikkat etmelisiniz. İlk olarak şunu söyleyebilirim: Düğme gibi mi görünüyor?

Bu, yalnızca düğmeye değil, kullanıcı arayüzünüzün geri kalanına da bağlı olan bir şeydir. Düz düğmeler kullanıyorsanız, başka her yerde benzer şekillerden / stillerden kaçınmanızı öneririm. Görsel bir kelime dağarcığı sağlamanız gerekir, böylece insanlar bu öğeleri anında başka bir şey olarak değil, düğme olarak tanıyabilir.

Gölgeler bunun için iyidir, çünkü hacim izlenimi verirler. Bu nedenle, görmek daha kolaydır. Ayrıca, bu etkiye sahip düğmelere alışkınız. Ancak düğmenin rengine benzer bir renk kullanmayı düşünürüm. Örneğin, kırmızı düğme için siyah kullanmak yerine% 50 opaklığa sahip bir kırmızı kullanın. Düğmeleri daha belirgin hale getirmek için başka bir seçenek bir simge (beyaz, düz) eklemektir .

Degradelere çok dikkat ediyorum . Kötü oldukları için değil, mevcut süper basit düz trendde, o kadar iyi uymuyorlar. Özellikle kullandığınız renkler veya gölgeler çok farklıysa. Küçük bir gradyan gerçekten güzel görünebilir, ancak küçük, zar zor farkedilmelidir.

Kısacası, görünüşlerini seviyorum. Gölge rengini yalnızca daha açık bir şeye değiştirirdim ve belki de ön plan metnini de daha açık hale getirdim, muhtemelen beyaz. Yazı tipi güzel ve iyi dolgu, çok güzel bir iş kullanıyorsunuz! Onları sitede kullandığınızı görüyorum, ancak altında pastel renklerle biraz benzer görünen bir dizi bildirim var. Biraz kafa karıştırıcı olabildikleri için stillerini yeniden düşünürdüm ve site boyunca aynı renkleri (tüm pastel veya kontrast) kullanmaya çalışacağım.

Bu kadar minimal düğmeler yapmaya saygı duyabilirken, bir çerçeve oluştururken, web üzerinde farklı web sitelerinde uygulanıp uygulanamayacağını / nasıl uygulanabileceğini düşünmeniz gerekir. Düğmeler sağlıyorsanız, birisinin tablolar, formlar vb. Gibi kullanabileceği hemen hemen her şeyi sağladığınızdan emin olmanız gerekir.

Henüz yapmadıysanız Bootstrap'a bir göz atın . Bootstrap, başka bir web sitesine kolayca uyarlanabilen veya entegre edilebilen ve size bazı fikirler verebilecek harika basit ve temiz bir CSS çerçevesidir.

Şimdi bu gerçek düğmeler gittikçe, bir kenarlıkla oynayacağım, çünkü bu bileşeni kapsüllemeye yardımcı oluyor ve bir kenarlık birçok düğme için oldukça yaygın. Web sitesine baktım ve vurgulu / tıklama durumlarını seviyorum ve bunlarla iyi yaptığını düşünüyorum.

Degradeleri tanıtmak, tutarlı olmak ve bunları diğer öğeler üzerinde de kullandığınızdan emin olmak istiyorsanız, aksi takdirde dikkat dağıtıcı olacak derinlikleriniz olacaktır.

Düğmeler iyi görünüyor, ancak genel düz stilde uygunluk ve his gösteren düğmeler, bir zamanlar gölge parçanın yerleştirildiği yerdir, ana elemanın (düğmenin) altındaki küçük bir şerittir ve çoğunlukla düğme rengi.