Arayüz Düğme Tasarımında Kullanılan Ortak Elemanlar
Düğmeler ve gezinme öğeleri, muhtemelen hem masaüstü hem de mobil tasarımda en yaygın kullanılan arayüz nesneleridir. Bir arayüzü bir araya getirerek kullanıcıların A'dan B'ye tek bir tıklama ile ulaşmasını sağlıyorlar.
En önemlisi, bir düğme iyi görünmek zorunda. “Tıkla beni!” Diye bağırmalı ya da olması gerektiği kadar etkili olmayacak. Düğmeler genellikle "" Arama, "Gönder", "Gönder", "Satın Al" ve "Yükle" olarak kullanılır.
Bu yazıda, modern arayüz tasarımında yedi ortak düğme elemanına bakacağız: dokular, desenler, 3-D, piksel mükemmel vuruşlar, girintili arka planlar, parlaklık ve parlak noktalar.
Bu tekniklerin 35 harika örneğini ve Photoshop için bir avuç küçük öğreticiyi bulacaksınız.
1. dokular
Doku kullanmak, düğmelere biraz derinlik katmanın ve onları arayüzün geri kalanından biraz daha fazla öne çıkarmanın harika bir yoludur (ve sonuçta onları daha tıklanabilir hale getirir). Aşağıda, düğmelerdeki dokuların bazı harika örnekleri verilmiştir.
ShelfLuv, özellikle düğme ve metin alanı alanlarında arayüzüne boyut eklemek için doku kullanır.
Bu arayüzün her yerinde doku kullanılıyor, ancak “Yükle” buton alanında daha ağır ve odak noktası oluyor.
Buradaki doku, eğimli düğmeyle iyi harmanlanarak, gerçek görünmesini sağlar.
Doku, bu UI düğmesinde aslında kullanılmaz, ancak arka planda görünerek düğmenin öne çıkmasına izin verir.
Dokulu Düğme Oluşturma
Şekil aracını kullanarak ve gürültü ekleyerek basit bir arka plan oluşturun (Filtre → Gürültü → Gürültü Ekle).
Şekil aracını yeniden seçin ve üst kenarının tuvalin kenarından gizlendiğinden emin olarak bir dikdörtgen çizin.
Şeklin rengini maviye değiştirin. # 00A3D9 kullandım.
Şekil katmanını çoğaltın ve aynı konumda yeniden boyutlandırın. Rengi biraz koyu maviye değiştirin.
Katmanı bir kez daha çoğaltın. Son iki Şekil katmanının altındaki katmanı yerleştirin ve rengi açık griye değiştirin.
Bir kağıt doku fotoğraflayın veya indirin ( Kayıp ve Alınan ). Dosya → Yerleştir'e gidin ve dosyayı belgeye yerleştirmek için bulun. Yeniden boyutlandırın ve mavi şekillerinizin üzerine yerleştirin.
Seçim Çerçevesi aracını kullanarak fazla dokuları temizleyin ve dokunun karışım modunu değiştirin. Farklı modlarla deneyler çünkü farklı dokular farklı sonuçlar üretir. Ayrıca opaklık seviyelerini biraz düşürmek isteyebilirsiniz.
Koyu mavi şekliniz için Katman Stili penceresini açın ve ince bir beyaz gölge eklemek için aşağıdaki Alt Gölge stilini uygulayın.
Şimdi aşağıdaki ayarları kullanarak şeklinize bir Kontur uygulayın.
Son olarak, daha fazla boyut vermek için şekle bir İç Gölge ekleyin.
Düğmeye bir miktar metin ekleyin ve işiniz bitti!
2. Desenler
Kalıplar, arayüz butonlarına biraz ilgi ve derinlik eklemenin bir başka harika yoludur. Aşağıda, ince ancak etkili olan düğmelerdeki desenlerin birkaç örneği verilmiştir.
Simgeyi türden ayırmak için düğmenin sol tarafında çapraz bir yansıma kullanılmıştır.
Bu düğmede, tasarıma boyut eklerken vintage görünümü birleştiren çapraz bir çizgi kullanılır.
Bu örneklerde en sevdiğim modeldir. Düğmelerinde kullanılmamasına rağmen, gri başlıktaki desen tüm tasarıma boyut ekler ve sonuçta turuncu düğmelerin öne çıkmasına yardımcı olur.
Desenli Şerit Düğmesi Oluşturma
Önceki mini-öğretici tekniğini kullanarak dokulu bir arka plan oluşturduktan sonra Şekil aracını kullanarak bir dikdörtgen çizin ve mavi-yeşil ile doldurun. # 008B8D rengini kullandım.
Aynı yükseklik ve renkte başka bir şekil çizin.
Kement aracını kullanarak, aşağıda görüldüğü gibi bir üçgen oluşturun. Yeni şeklin kenarı üzerine yerleştirin ve ihtiyacımız olmayan alanı kaldırmak için “Sil” tuşuna basın.
Şekli çoğaltın ve ters yöne bakacak şekilde Düzen → Dönüştür → Yatay Çevir öğesine gidin.
Aşağıda gösterildiği gibi iki şekli daha büyük şeklin altına yerleştirin.
Şekillerinden birine sağ tıklayın ve Karıştırma Seçenekleri / Katman Stili penceresini açın. Aşağıda görülene benzer bir Degrade Yerleşimi uygulayın. Ayrıca ince bir Drop Shadow ekleyebilirsiniz. Tamamlandığında, katmana sağ tıklayın ve “Katman Stilini Kopyala” yı seçin. Diğer banner şeklini seçin. Sağ tıklayın ve “Katman Stilini Yapıştır” ı seçin. Katman Stili penceresini açın ve Degrade Kaplama öğenizin açısını 180 ° ila 0 ° arasında değiştirin.
Kement aracını kullanarak, şekillerimizin iki köşesini eşleştirmek için aşağıdakine benzer bir seçim oluşturun. Daha koyu bir renkle doldurun.
Katmanı çoğaltın, yatay olarak çevirin ve diğer tarafa yerleştirin.
Çizgi deseni oluştur. Alternatif olarak, aşağıda yaptığım şeyi kullanabilirsiniz.
Deseni tüm şeridin üzerine yapıştırın. Command + Shift tuşunu basılı tutarken, tüm banner katmanlarınızın katman küçük resimlerini tıklayın. Bu hepsini seçecektir. Sağ tıklayın ve “Ters Seç” i seçin. Çizgi deseni katmanınız seçildiğinde, ihtiyaç duymadığınız desen alanlarını kaldırmak için “Sil” tuşuna basın.
Katmandaki beyazı gizlemek için desen katmanının Karıştırma Modunu “Çarptır” olarak değiştirin. Şimdi opaklığı% 25 ile% 75 arasında bir yere bırakın. En iyi sonuç için deney yapın.
Şekil aracını kullanarak, aşağıdakilere benzer bazı çizgiler oluşturun.
Görüntünün arka planında bulunan alanları kaldırın.
Her bir hattınızın Karıştırma Modu ile deney yapın. İşte sonuç:
3. 3-D
Üç boyutlu düğmeler harika çünkü düğmelerin çok daha gerçekçi görünmesini sağlıyor. Tıklamamak neredeyse imkansız! Tek dezavantaj, etkinin oldukça oynak olmasıdır ve bu nedenle tüm web siteleri (kurumsal olanlar gibi) uygun değildir. Aşağıda bazı güzel 3-D tuşlarının bir seçim.
Gölgeler ve 1 piksel çizgileri, belirli alanları işaretler ve düğmenin 3-D şeklinde görünmesini sağlar. Bu ve bazı iyi CSS efektleri süper etkileşimli bir düğme için yapardı.
İkinci elemanımız (desenler), bu tasarımda zaten çoktan bir 3-D düğmesine boyut eklemek için de kullanılıyor.
Bu düğme, 3 boyutlu görünümüyle yalnızca gradyanlara dayanan biraz farklı bir yaklaşım gerektirir.
Bu set, düğmenin normal, hover veya aktif durumda olup olmadığını belirtmek için farklı yükseklikler gösterir. Çizgiler ve doku, düğmelere daha canlı bir görünüm kazandırır.
Bu bölümdeki diğer birkaç örnek gibi, degradeler ve konturların bir kombinasyonu bu düğmelerin 3 boyutlu görünmesini sağlar.
Bu düğme, UI'nin etrafına sarılmış “kutunun dışında” tasarımı nedeniyle 3-D görünüyor.
3 D Düğme Oluşturma
Dikdörtgen aracıyla 7 piksellik bir köşe yarıçapına sahip bir şekil çizerek başlayın. Katman Stili penceresini açın ve koyu kırmızıdan açık kırmızıya doğru bir Degrade Kaplama uygulayın. 3-D düğmemizin ne olacağını vurgulamak için degrade çubuğun en ucunda daha açık bir kırmızı kullanın.
Şimdi düğmeye bir vuruş uygulayın. Doldurma türünü “Degrade” olarak değiştirin, böylece konturun üst ve altının rengini değiştirebilirsiniz. Bir ışıktan koyu kırmızıya (Gradient Overlay'in tersi) gidin.
Şimdiye kadar böyle bir şeye benzemeli:
Şekil katmanını çoğaltın. Orijinal katmanı yaklaşık 10 piksel aşağı doğru sürükleyin.
Aşağıdaki ekran görüntüsünde görülen ayarları kullanarak Orijinal katmana bir Alt Gölge uygulayın.
Ayrıca, Degrade Bindirmesini degrade çubuğunda her bir rengi biraz daha koyu yaparak koyulaştırın.
Şuna benzeyen bir şeye sahip olmalısın:
Metin aracını seçin ve tuşa bir şey yazın. Katman Stili penceresini açın ve aşağıdakine benzer bir Degrade Kaplama uygulayın.
Bu ayarları kullanarak bir İç Gölge uygulayın:
Bu ayarları kullanarak bir Alt Gölge uygulayın:
Ve işimiz bitti! Bunun gibi bir şeyle sonuçlanmalı:
4. Piksel Mükemmel Konturlar
Piksellerin mükemmelleştirilmesi sanatı, sadece düğmeler için değil, kullanıcı arayüzü tasarımının tüm yönleriyle bütünleşmiş hale gelmiştir. Tek pikselli çizgiler (veya vuruşlar) düğmeler derinliği ve biraz da 3 boyutlu bir görünüm verir. Ayrıca düğmelerin girintili görünmesini sağlarlar. İşte bunun bazı parlak örnekleri.
Kırmızı düğmenin üstünde vurgu olarak beyaz (üst üste binmiş) 1 piksel çizgisinin altta daha koyu bir çizgi ile kullanıldığını açıkça görebilirsiniz. Bu biraz 3-D görünmesini sağlar ve sayfaya çok fazla ayrıntı ekler.
Bu düğmedeki tipografi, bir iç gölgeye sahiptir ve düğmenin, arabirimin üzerinde oturuyormuş gibi görünmesini sağlar.
Bu sadece CSS3 düğmeleri (kesinlikle Photoshop yok) arka plandan öne çıkmasını sağlayan ve tıklandığında girintili görünen 1 pikselli vuruşlara sahiptir.
Bir vurgu olarak hareket etmek için düğmenin üstünde bulunan 1 piksellik bir ışık vuruşunun başka bir örneği.
Bu yeşil düğme, düğmenin üstünde bir vurgu olarak hareket eden bir iç ışıma ile biraz farklı bir yaklaşım gösterir. Dışarıdaki inme çok ince bir gölge oluşturur.
Daha önce sözü edilen teknikleri birleştiren bir başka düğme.
Bu temel düğme, basit tasarımdan öne çıkması için ince bir kontur ve hassas bir alt gölgeye sahiptir.
Bu düğmenin arka plandan öne çıkması için ince bir iç ışıma vardır. Aktif durumu, aldatıcı olan azaltılmış bir opaklığa sahiptir.
Düğmeyi unutun: Bu tasarım, modern bir tipografi ve güzel bir kullanıcı arabirimi oluşturan çizgilerle piksel mükemmelliğidir.
Piksel Mükemmel Düğmesi Oluşturma
Dikdörtgen Şekil aracını seçin (Şekil aracı seçildiğinde Photoshop'un üstündeki araç çubuğunda bulunur) ve 5 piksellik bir köşe yarıçapı verin. Aşağıdakine benzer bir siyah dikdörtgen çizin.
Katman Stili penceresini açın ve şekle bir Degrade Yerleşimi uygulayın. Biraz daha açık bir yeşil için koyu yeşil kullandım.
Şeklini bir yeşilden sonsuza kadar koyu yeşil bir renge dönüşen bir gradyan vuruşunu verin.
Şimdi şekle, aşağıda görülen ayarları kullanarak beyaz bir İç Gölge stilini verin.
Ve şimdi 0 piksel büyüklüğünde bir Drop Shadow ve sadece% 5 opaklığa sahip.
İnternette bir simge bulun (ya da kendinizinkini yaratın) ve Dosya → Yerleştir'e giderek doğru bir şekilde konumlandırarak belgenize yerleştirin. Bir Degrade Yerleşimi uygulayın.
Simgenizin İç Gölge'sini 1 piksellik bir mesafeye ve beyaz Damla Gölge'ye 1 piksellik bir mesafe verin. Bu, simgenin düğme içine işlenmiş gibi görünmesini sağlar.
Düğmeye bir miktar metin ekleyin ve Katman Stili penceresini kullanarak düşük opacity Drop Shadow efekti uygulayın. İşte sonuç:
5. Girintili Arka Planlar
Girintili bir arka plan, düğmenin gömülü gibi görünmesini sağlar, düğme derinliğini ve görsel ilgiyi gösterir. Aşağıda bunun bazı harika örnekleri vardır.
Bu düğme arka planı girintili görünmesini sağlamak için ince bir iç gölgeye sahiptir.
Bu arka planda ters çevrilmiş degradeler, düğmelerin girintili görünmesini sağlar.
Darbelerin ve alt gölgelerin bir kombinasyonu, bu girintili düğmeleri daha derinlemesine verir.
Bu düğme arka planı, bir degrade, iç gölge ve alt gölge içeren çeşitli stillere sahiptir.
Bu girintili buton arka planı, gördüğümüzden çok daha küçük ama yine de aynı teknikleri takip ediyor.
Yine, bir girinti oluşturmak için bir alt gölge ve iç gölge kullanılır.
6. Parlıyor
Glow, arayüz tasarımında çekilmesi oldukça zor bir tekniktir ve genellikle yalnızca karanlık arayüzlerde görülür (aşağıda hafif bir örnek göreceğiz). Bu örnekler ışığın farklı şekillerde nasıl kullanılabileceğini gösterir.
Bu düğmenin iç kısmında, parıltılı bir parlaklık veren bir parıltı kullanılır.
Bu tuştaki tipografi, koyu arka plandan öne çıkmak için akıllıca kullanılır. Ve parıltılar yükleme çubuklarının gerçeğe yakın görünmesini sağlıyor.
Parlamalar, iPhone için karanlık arayüzlerde yaygın olarak kullanılır. Düğme aktif durumdayken tipografi etrafında bir parıltı görüyoruz.
Hafif ve oldukça ince parlaklık bu düğmeyi güzel hale gelmesi için ihtiyaç duyduğu ekstra destek sağlar.
Işık Parlayan Düğme Oluşturma
Dikdörtgen Şekil aracını bir kez daha kullanarak, bu kez 3 piksellik köşe yarıçapıyla bir dikdörtgen çizin. Aşağıdakine benzer bir Degrade Yerleşimi uygulayın. Merkez renklerine “49” ve “50” konumunu verin.
Aşağıdaki İç Gölge'yi uygulayın.
Aşağıdaki Alt Gölge'yi uygulayın.
Aşağıdaki Dış Işığı uygulayın.
Düğmeye bazı tipografi ekleyin. Bunun gibi güzel, temiz ve inanılmaz derecede kolay üretilebilir sonuçlarla sonuçlanmalı:
7. Önemli Noktalar
Öne çıkanlar düğmeler derinliği, görsel ilgi ve tıklanabilirlik sağlar. Aşağıdaki örnekler bunu kanıtlamaktadır.
Bu düğmenin üst yarısında, biraz derinlik vermek ve genel olarak kırmızı ve gri arabirime uymasına yardımcı olmak için basit bir düşük opaklık beyaz şekli kullanılır.
Bu yazıdaki diğer birçok düğmede olduğu gibi, 1 piksellik bir vuruş da bunu vurgulamaktadır.
Işıktan koyuya ışık geçişleri, bu düğmeler için parlaklık ve gölge görevi görür.
Bu yazı sadece WDD için yazılmıştır. Callum Chapman , arkasındaki adam Picmix Mağazası ve Çember Kutusu Blogu .
En çok hangi buton tasarımlarını kullanıyorsunuz ve neden? Bazı tasarımlar için daha yüksek tıklama oranı buldunuz mu? Lütfen aşağıdan paylaşın…