Tantan ve LinkedIn tarafından kullanılan kart tasarımı, size nasıl iyi bir deneyim yaşatır? İlham verici sabah okuması
Kartlar, basit ve kompakt bilgi kutularıdır. Arayüz tasarımında, arayüzün estetiğini ve kullanılabilirliğini dengelemek için kartlar temelde evrensel bir seçimdir. Kart tasarım konsepti ilk olarak Pinterest ve Facebook tarafından kullanıldı ve şimdi kart kullanımı hayatın her alanına nüfuz etti.
Pinterest, bir konuyla ilgili tüm bilgileri temelde bir bilgi kutusuna yerleştirebilen kart kavramını tanıtır.
Düzgün kullanılırsa kartlar, uygulamanın kullanıcı deneyimini geliştirebilir. Bu makale, kartların kullanımına yönelik 5 en iyi uygulamayı tanıtmakta ve ilgili pratik örnekler sunmaktadır. .
1. "Tek kart, tek kavram" ilkesini izleyin
Kartın tüm içeriği yalnızca tek bir konuyla ilişkilendirilebilir. Bir kart birden fazla öğe içerebilir, ancak esas olarak benzer bilgileri veya içeriği yansıtmalıdır. Bu şekilde, kullanıcılar neyi sevdiklerini veya paylaşmak istediklerini daha kolay seçebilirler.
Bir modül (veya kart) bir kullanıcı etkileşimini "içerir".
2. Kartın tamamının tıklanabilir olduğundan emin olun
Fitts Yasasına uyun, Kullanıcıların yalnızca metin bağlantılarını veya resimleri değil, kartın herhangi bir bölümünü tıklamasına veya dokunmasına izin vermek için . İster mobil terminalin dokunmatik ekranında ister fareyi çalıştırmayı gerektiren ana masaüstü terminalinde olsun, nispeten geniş bir dokunma alanı kartın kullanılabilirliğini büyük ölçüde artırabilir.
AppSo (WeChat uygulama çözümü) Not:
Fitz yasası, insan-bilgisayar etkileşimi alanında çok önemli bir yasadır. Temel fikir, bir kişi fare imlecini hareket ettirmek için bir fare kullandığında, ekrandaki hedefin belirli özelliklerinin tıklamayı kolaylaştırması veya zorlaştırmasıdır. Hedef ne kadar uzaksa ulaşmak o kadar zor olur; hedef ne kadar küçükse o kadar zor olur.
ipucu: Derinliği göstermek için biraz gölge kullanmanız önerilir, herkese kartın tıklanabilir olduğunu bildirin .
Görüntü kaynağı: nngroup
3. Kartın görsel zevkini sağlayın
Ne tür bir kartın başarılı olduğunu söylemek istiyorsanız, İyi tasarım ve kullanılabilirlik Kartın. Kartı biraz parlatırsanız ve birkaç estetik özellik eklerseniz, kart tanıdık ve yaratıcı hissedecektir.
Resim kaynağı: Piper Lawson
Kartları tasarlamaya başlarken, aşağıdaki hususlara özellikle dikkat etmelisiniz:
görüntü
Kart tabanlı tasarım genellikle görsel tasarıma dayanırken, Çok sayıda resim kullanmak, kart tasarımının en önemli özelliklerinden biridir . Araştırma bulguları, görüntülerin bir web sayfasının veya uygulamanın genel tasarımını iyileştirebileceğini doğruladı. Bu nedenle, resim eklemek, kart tabanlı tasarımı daha da büyüleyici kılar.
Resim Kredisi: Dave Gamache
Gölgeler ve degradeler
İki gölge ve gradyan öğesinin eklenmesi, kullanıcıların tasarladığınız kartları gerçek hayatta karşılık gelen nesnelerle etkili bir şekilde bağlamasına olanak tanır.
Ancak tasarım yaparken, bu iki unsuru nasıl kullanacağımızı dikkatlice düşünmeliyiz: Kartın etrafı ve köşeleri gölgelenmişse, kullanıcıların onu gerçek hayatta ilgili nesnelerle ilişkilendirmesi biraz zor olacaktır.
Yuvarlatılmış köşeli bir kart görsel olarak oyun kartına benzer. Resim kaynağı: Materyal Tasarımı
dizgi
Elbette, kullanıcıların dikkatini çekmek istiyorsanız dizgiyi de kullanabilirsiniz. Kartın tüm içeriği basit ve anlaşılması kolay olmalıdır. Maksimum okunabilirlik açısından tasarlamaya çalışın:
- Basit bir yazı tipi seçin
- Yazı tipi türlerinin sayısını kontrol etmeye çalışın. Çoğu durumda, tek bir yazı tipi yeterlidir.
İpuçları: Kartın ana içeriği için, sans-serif yazı tipinin normal ağırlığı çok etkilidir.
Resim kaynağı: maconprinting
4. Kart içeriğinin uzunluğunu sınırlayın
Kart genellikle büyük değildir ve kullanıcıların daha fazla ayrıntı öğrenmesi için bir "giriş" işlevi görür, bu nedenle çok fazla ayrıntı taşıması gerekmez. Karta çok fazla içerik eklemeye çalıştığınızda, kartın çok geniş veya çok uzun olmasına neden olursanız, orijinal "yapay" etkisini kaybedecektir.
Aşağıdaki şekil, kart tabanlı tasarım kullanan bir kullanıcı arayüzü örneğidir. Ortadaki karta dikkat edin.Sorun esas olarak okunacak çok fazla içerik olmasından kaynaklanıyor.
Resim kredisi: Piotr Adam Kwiatkowski
5. Animasyon ve hareket efektleri ekleyin
Animasyon iyi kullanılırsa, kullanıcı deneyimini büyük ölçüde geliştirebilir. Kullanıcıların kart tabanlı bir arayüzde kendilerini daha iyi konumlandırmalarına ve farklı kart durumları arasında görsel ilişkiler kurmalarına yardımcı olabilir.
Görsel işaret
Görsel ipuçları, kullanıcıların arayüzle nasıl etkileşim kuracaklarını daha iyi anlamalarına yardımcı olur. Kullanıcılara belirli işlevleri nasıl çalıştıracaklarını göstermeniz gerektiğinde oldukça kullanışlıdır.
Gezinme işlevleriyle ilgili ipuçlarını gösterin. Resim kaynağı: Barthelemy Chalvet
Görsel geri bildirim
Arayüz tasarımında görsel geri bildirim çok önemlidir çünkü kullanıcıların doğal beklentilerini doğrudan karşılayabilir. İlişkili .
Gerçek hayatta, çeşitli nesneler genellikle davranışımıza tepki verir, bu aynı zamanda halkın alışık olduğu geri bildirimdir. Örneğin, bir bilgisayarın anahtar düğmesi, anahtar düğmesine bastığınızda, basılan düğmenin kuvvet geri bildirimini ve sesli geri bildirimi hissedebilirsiniz.
Bilgisayar tarafında, "fareyle üzerine gelme efekti" aracılığıyla ilgili öğelerin etkileşimli davranışını görüntüleyebilirsiniz. Fareyle üzerine gelme animasyonu, işlevlerin keşfedilebilirliğini artırabilir ve aynı zamanda kullanıcı deneyimini daha ilginç hale getirebilir.
Karta fareyle üzerine gelme animasyonu ekleyin. Görüntü kaynağı: uxpin
Daha fazla seçeneği etkinleştirmek için üzerine gelme efektini kullanın. Aşağıdaki şekilde, imleç üzerine geldikten sonra, kullanıcı mevcut bilgileri renkle işaretleyebilir, yanıtlayabilir, iletebilir veya silebilir.
Resim Kredisi: Roman Shkolny
büyütmek
Yakınlaştır, orijinal görüntüden ayrıntılı görünüme geçişi gösterebilir : Kullanıcı kartı seçerek ilgili detaylı bilgileri doğrudan görebilir. Ancak dikkatli olun, kullanıcıların hala aynı arka plan çerçevesinde etkileşimde olduklarını hissettiklerinden emin olun.
Animasyon, küçük resimleri ve ayrıntı görünümlerini ilişkilendirebilir. Resim kaynağı: Charles Patterson
son sözler
Kartlar, arayüz tasarımı alanında yenilikçi yeni unsurlardır. Bu sadece bir kart değil, aynı zamanda yüksek kaliteli içerik oluşturmak ve en iyi kullanıcı deneyimini tasarlamak için en esnek düzen yöntemlerinden biridir.
Teşekkür ederim!
Yazar | Nick Babich
UI ve UX'e odaklanan yazılım mühendisi.
Tercüme | Jorri
Resim Pexels'den
Orijinal bağlantı, çeviri için orijinal yazar tarafından yetkilendirilmiş Kartlar için En İyi Uygulamalar'dır.
Bu makale orijinal olarak, cep telefonlarını daha kullanışlı hale getiren AppSo tarafından üretilmiştir. WeChat hesap uygulama çözümüne dikkat edin ve Taobao kullanmanın 2 duruşunun arkasında hangi üniversitenin sorduğunu söyleyen "Xue Qun" a yanıt verin.
