Uygulama düğmesinin ardında, bu bilgileri bilmiyorsunuz | İlham Erken Okuma
A. Giriş: Her uygulama "düğmelerle" karşılaşır. Geliştirme sürecinde düğmeler nasıl değişir? Makul olacak bir düğme nasıl tasarlanır? AppSo (WeChat appsolution) bu makaleyi sizin için cevaplayacaktır.
Düğmeler, etkileşim tasarımında ortak bir temel unsurdur. Düğme çok basit bir kullanıcı arayüzü (UI) öğesi gibi görünse de, tasarımı son birkaç on yılda birçok geliştirme ve evrim geçirdi. Ancak bu her zaman aynıdır. Düğmelerin kullanıcı deneyimi (UX) tasarımı hala çözüm ile Netlik .
Bu makale, düğme tasarımının gelişimini kısaca özetler ve iyi bir kullanıcı deneyimi ile düğme tasarımı için en iyi uygulamaları önerir.
1. Düğme tasarımının gelişimi
1. 3D düğmesi
Başından beri, işletim sistemi düğmeleri, çevresel arka planı ayırt etmek için kabartmalı ve gölgelendirilmiştir. Bu tasarım şeması basit bir prensibe dayanmaktadır - düğmeyi sınır, eğim ve gölge yoluyla arka plan içeriğine karşı öne çıkarmak, böylece kolayca tıklanabilir bir öğe olarak tanınmasını sağlamak.
Düğmelerin nasıl vurgulandığına dikkat edin
Windows 95 iletişim kutuları, kullanıcılara görsel düzeyleri tanımlamada ve hangi öğelerin etkileşimli öğeler olduğunu anlamada yardımcı olmak üzere 3B efektler oluşturmak için yoğun gölgeler ve vurgular kullanır.
2. Sahte düğme
Dijital tasarım açısından, Sözde materyalizasyon, UI öğelerinin tasarımının gerçek nesnelere benzediği bir yolu ifade eder.Gerçek nesnelerin malzeme görünümünün bir kopyası olabilir veya gerçek düğmeler gibi görünmelerini sağlamak için gerçek düğmeleri simüle edebilir. . Yarı-somutlaştırılmış tasarım, yeni etkileşimli arayüzün nasıl kullanılacağını anlamak için kullanıcının bir şey hakkındaki önceki bilgisini kullanır.
Aşağıdaki şekilde yer alan hesap makinesinin sözde fiziksel tasarımı, kullanıcının hesap makinesine ilişkin önceden bilgisi ile kullanıcıların onu dijital ortamda daha iyi anlamasına ve kullanmasına yardımcı olmak içindir.
3. Düz düğme
Günümüzde UI tasarımında önemli bir değişiklik, yarı-somutlaştırılmış tasarımdan düz tasarıma kademeli geçiş ve tasarım efektinin artık bir 3D etkisine sahip olmamasıdır.
Yarı-somutlaştırılmış tasarımdan farklı olarak, düz tasarım, dijital medyayı keşfetmenin bir yolu olarak görülüyor ve artık fiziksel nesnelerin maddi görünümünü "eski haline getirmeye" çalışmıyor. Bu nedenle, kullanıcılara hangi öğelerin tıklanabilir / çalıştırılabilir olduğunu söylemek için orijinal olarak kullanılan ağır görsel ipuçlarını atar.
Tüm kullanıcı arayüzü düz olduğunda, kullanıcılar düğmelerin nerede olduğunu nasıl bilebilirler?
Kullanıcıların, sayfadaki tıklanabilir / çalıştırılabilir yerleri bilmek için görsel rehberliği (kullanıcıların arayüzü nasıl kullanacaklarını anlamalarına yardımcı olan algılanabilir ipuçları) kullanmaya devam etmeleri gerekir. bu nedenle Düz tasarımda renk çok önemlidir, çünkü düz düğmeler kullanılırsa, bu renkler kullanıcıların düğmeyi tanımlamasına yardımcı olacak ana tanımlayıcılardan biri olacaktır. .
4. Neredeyse düz tasarım ve yüzer işlem düğmesi (FAB)
Neredeyse düz tasarım, orijinal düz tasarıma (veya ultra düz tasarıma) dayalı bir evrimdir. Bu tasarım neredeyse düzdür, ancak tasarımda, kullanıcı arayüzünde üç boyutlu bir efekt oluşturmak için ince gölgeler, vurgular ve kaplamalar kullanılır. .
Google'ın Materyal Tasarım dili, bu üç boyutlu efektleri doğru sırada kullanan neredeyse düz bir tasarım durumudur. Yeni bir düğme geliştirir: Kayan İşlem Düğmesi (FAB).
Bu düğmeler, kullanıcı arayüzünün üst kısmına yerleştirilir ve kullanıcıları gelişmiş eylemler (Tanıtılan Eylemler) veya birincil eylemler (Birincil Eylemler) gerçekleştirmeye çeker. Harekete geçirici mesaj düğmeleri olarak hizmet ederler (gelişmiş işlemleri kolaylaştırmak için) ve kullanıcıların belirli bir ekranda kullandıkları en yaygın tek işlemdir.
Google Haritalar, FAB'ın doğru kullanımının klasik bir örneğidir. Kullanıcıların haritadaki ana çalışma davranışı yönü bulmaktır, bu nedenle Google FAB'ın tasarımı mantıklıdır.
UI tasarımında FAB kullanmanın bir başka örneği Evernote'dur. Evernote'un kullanıcı arayüzü neredeyse düz olmasına rağmen, gezinme çubuğuna ince bir gölge ekler ve ayrıca FAB (Yeni Not) kullanır.
5. Sanal düğme
2014 yılında UI tasarım alanındaki baskın trendlerden biri sanal düğmelerin uygulanması oldu. Sanal düğmeler, temel şekillere sahip şeffaf veya içi boş düğmelerdir. Düğme şekli genellikle dikdörtgen veya karedir. .
Sanal düğmeler aynı zamanda "boş düğmeler", "çıplak düğmeler" veya "boş düğmeler" olarak da adlandırılır. Sanal bir düğmenin kenarlığı genellikle içinde düz metin bulunan çok ince bir çizgidir.
Normal tasarım (solda) ve odaklanmış tasarım (sağda)
Sanal düğmeler düz tasarımın evrimiyle başladı ve Apple iOS 7'yi piyasaya sürdüğünde çok popüler oldu. Apple'ın iOS arayüzünde birçok sanal düğme uygulaması bulunur.
Basit dikdörtgen kutu ve kutudaki temiz yazı tipleri, düz arayüzün mükemmel görünmesini sağlar.
Sanal düğmeler, canlandırıcı görünümlerini gösterirken genellikle Harekete Geçirici Mesaj (CTA) düğmelerine benzer. Specular web sitesi, bu tür düğmelerin kullanımına iyi bir örnektir.
İkincisi, düğme tasarımının temel en iyi uygulamaları
Düğmeleri tasarlamaya başlamadan önce tasarımınızın kullanıcılarla nasıl iletişim kurduğunu düşünün Kullanılabilirlik (Buna göre, tasarım söz konusu olduğunda, nesne ile kullanıcı arasındaki ilişkiye ve aynı zamanda elde ettiği etkiye ve yönlendirmeye odaklanır). Peki, kullanıcılar etkileşimli arayüz öğelerini düğmeler olarak nasıl anlar? Bunun ışığında, tasarımda şunları yapmalısınız:
- Düğmelerin düğme gibi görünmesini sağlayın (bkz. " şekil "Bölüm)
- Kullanıcıların düğmelerle etkileşim kurmasını kolaylaştırın (bkz. " Boyutlar ve dolgu "Bölüm)
- Düğmenin etiketi işlevini yansıtır (bkz. " etiket "Bölüm)
- Kullanıcı davranışını yönlendirmek için renk kontrastını kullanın (bkz. " renk "Bölüm)
Ayrıca, bakımını yaptığınızdan emin olun. tutarlılık Böylece kullanıcılar şunları yapabilir: Uygulamanın veya web sitesinin her sayfasındaki UI öğelerinden düğmeleri tanımlayın .
1. Görünüm
Güvenli yol, web sitesinin veya uygulamanın stiline göre kare düğmeler veya yuvarlak kare düğmeler tasarlamaktır. Dijital dünyanın tasarımında uzun zaman önce dikdörtgen düğmeler kullanılmış ve kullanıcılar buna çok aşinadır.
Araştırmaya göre, Yuvarlatılmış köşeler bilgi işlemeyi teşvik edebilir ve kullanıcıları öğenin merkezine odaklanmaya çekebilir .
Elbette, daireler, üçgenler ve hatta özel şekiller gibi diğer şekilleri kullanarak daha yaratıcı öğeler de ekleyebilirsiniz, ancak bu şekilleri kullanmanın daha riskli olabileceğini unutmayın.
2. Boyutlar ve dolgu
Kullanıcıların düğme öğelerini tanımlamasına yardımcı olurken, düğmenin boyutu da çok önemlidir. Düğme öğelerinin boyutunu ve tıklanabilir öğeler arasındaki iç kenar boşluklarını göz önünde bulundurmanız gerekir.
boyut . Uygulamalar veya web siteleri için ana giriş etkileşim yöntemi olarak dokunmayı kullandığınızda, düğme tasarımınız için doğru boyutu seçmek için MIT Touch Lab araştırmasına başvurabilirsiniz.
MIT'nin araştırmasına göre parmak pedinin ortalama genişliği 10-14 mm, parmak ucunun ortalama genişliği ise 8-10 mm arasındadır. Bu nedenle, en küçük dokunmatik ekran düğmesi boyutu için 10 × 10 mm iyi bir seçimdir.
Bu öneri, yanlış basılması kolay düğmeleri daha mükemmel hale getirmeyi değil, diğer önemli özellikleri (ekran bilgi yoğunluğu gibi) dengelerken yanlış basma sayısını mümkün olduğunca pratik bir düzeye indirmeyi amaçlamaktadır.
Fare ve klavye, ana giriş etkileşim yöntemleri olarak kullanıldığında, yoğun kullanıcı arayüzlerine uyum sağlamak için düğme boyutu gereksinimleri biraz azaltılabilir.
İç kenar boşluğu . Düğmeler arasındaki iç kenar boşluğu, kullanıcı arayüzüne yeterli alan sağlarken etkileşimli kontrol düğmelerini daha iyi ayırt etmek için tasarlanmıştır.
3. Etiket
Düğme için uygun bir etiket seçmelisiniz. Etiket seçme yöntemi temel alınmalıdır En az sürpriz ilkesi (En az şaşkınlık ilkesi): Gerekli bir düğmenin yüksek sürpriz faktörlü bir etiketi varsa, bu etiketi değiştirmeyi düşünün.
Temel kural - düğmenin etiketi işlevini yansıtmalıdır. Kullanıcıya tıkladıktan / dokunduktan sonra ne olacağını bildirmek için açık bir mesaj ekleyin veya kullanıcıyı bir davranış fiili aracılığıyla bir arayüz öğesinin işlevi hakkında bilgilendirin.
Aşağıdaki örnek, Dropbox web sürümüne dosya yüklemek için bir iletişim kutusudur. İletişim kutusunda "Harika!" Etiketli ayrı bir düğme vardır. Bu etiket sıradan kullanıcılar için kafa karıştırıcı olabilir, çünkü düğmeyi tıklamanın ne işe yaradığını söylemiyor.
4. Renk
Paletteki renkleri seçerken, renklerin kullanıcıların davranışta gezinmesine ve onu anlamasına nasıl yardımcı olabileceğini düşünün.
Kullanıcıların uygulamanın içeriğini görüntülemesine ve anlamasına, doğru öğelerle etkileşime girmesine ve ilgili davranışları anlamasına yardımcı olmak için renk ve kontrast kullanın.
Aşağıdaki örnekte, potansiyel olarak yıkıcı bir davranışı tanımlamak için kırmızı düğmeyi kullandık ("UNINSTALL" düğme etiketi "kaldır" anlamına gelir).
En önemli düğmelerin (özellikle harekete geçirici mesaj düğmesi) en önemli görünmesini sağlayın. Örneğin Amazon, kullanıcıları düzeltici önlemler almaya çekmek için kontrast oluşturan sarı düğmeler kullanır.
son sözler
Tüm düğmeler (klasik düğmeler veya sanal düğmeler veya yüzen eylem düğmeleri gibi modern düğmeler gibi), kullanıcılara, gerçekleştirmelerini istediğiniz eylemleri uygulamalarına rehberlik etmek için kullanılır.
Bir web sayfasını veya uygulamayı meşgul bir kullanıcı tarafından başlatılan bir konuşma olarak düşünün, bu durumda düğme bu konuşma için çok önemlidir - sorunsuz etkileşim, konuşmanın normal ilerlemesini sağlayabilir ve küçük hatalar (doğru düğmeyi bulamama gibi) kesintiye neden olur. Hatta bir arıza.
Teşekkür ederim!
Yazar | Nick Babich
UI ve UX'e odaklanan yazılım mühendisi.
Tercüman | Jorri
Bu makale, orijinal yazarın yetkilendirdiği UI Tasarımında Düğmeler: Stilin Evrimi ve En İyi Uygulamalar'dan çevrilmiştir.
Başlığın resmi, istasyonun harika kahraman kreatifinden geliyor
Bu makale, cep telefonlarını daha kullanışlı hale getiren AppSo tarafından çevrilmiş ve üretilmiştir. WeChat hesap uygulama çözümüne dikkat edin ve başarılı bir şekilde dikkatinizi çeken web sitesi başlığını görmek için "başlığa" yanıt verin.
