Neden tüm favori uygulamalarınız kart tasarımını kullanıyor? | İlham Erken Okuma
Bir Jun'un kılavuzu: AppSo (WeChat appsolution) 5 tasarım ilkesini ve pratik vakaları geçti
Bugünün makalesi "kart tasarımı" nı tam olarak tanıtacak. Okuduktan sonra, sevdiğiniz tüm uygulamaların neden bu tasarımı kullandığını öğreneceksiniz.
Web sayfaları ve mobil uygulamalar, geleneksel tek sayfa tasarımını kademeli olarak terk eder ve tamamen kişiselleştirilmiş bir kullanıcı deneyimine doğru gelişir. Bu gelişme aynı zamanda çok sayıda bağımsız içerik modülünün popülerliğine de dayanmaktadır. onların arasında, Kart, en son benzersiz ve yenilikçi konsepttir .
Nasıl bakarsanız bakın, kart kısa vadede güncelliğini yitirmeyecektir.
1. Kart nedir
Kart, resim ve metin içeren küçük dikdörtgen bir modüldür ve kullanıcıların daha fazla ayrıntı öğrenmesi için "giriş" dir. Arayüzün estetiğini ve kullanılabilirliğini dengelemek için kartlar temelde varsayılan bir seçimdir. Kartların kullanımı çok kolay olduğundan, farklı öğeler içeren içeriği de görüntüleyebilirler.
Örnek kart. Resim kaynağı: Materyal Tasarımı
1. Mükemmel taklit
Kullanıcı arayüzüne kart tasarımları eklemek mükemmel bir benzetmedir çünkü günlük hayatta gerçek kartlar gibi görünürler. Aslında kartlar, kartvizitler, beyzbol kartları ve poker kartları gibi mobil cihazların ortaya çıkışından çok önce vardı. Günümüzde kartların yaygın olarak kullanılan bir tür etkileşim modeli olduğu söylenebilir. Bu nedenle, kullanıcılar için bu kartların gerçek hayatta bir şeyi temsil ettiğini daha sezgisel olarak anlayabilirler.
Ayrıca kartlar kısa öykülerin tanıtımı için de harika bir seçimdir Beyzbol kartları klasik bir örnektir. Bilmeniz gereken bir sporcunun temel bilgileri küçük kartın önünde ve arkasında görüntülenir.
Her kart bir beyzbol oyuncusunu temsil eder. Görüntü kaynağı: liveauctiongroup
2. İçerik yapısı
Kart, içeriği birden çok anlamlı parçaya böler ve bu da belirli miktarda ekran alanı tasarrufu sağlar. "Sözcüklerin, cümlelerin, paragrafların" kompozisyon biçimine benzer şekilde, kartlar da tutarlı bir genel içerik oluşturmak için özetlenen minimum bilgi birimlerinden oluşur.
Kart kompozisyonuna örnekler. Resim kaynağı: Materyal Tasarımı
Facebook gibi büyük şirketler masaüstü masaüstü bilgisayarlar, mobil web sayfaları ve uygulama istemcileri için kartla çalışan arayüzler kullandığında, kart düzeni tasarım sürecinin özü olarak kabul edilir. Facebook, en alta kayamayan sayfalarda bile bilgileri kategorize etmek için kutu tarzı tasarımdan (yani kartlar-Çevirmenin Notu) tam olarak yararlanır.
3. Görsel zevk
Kart tabanlı tasarım genellikle görsel tasarıma dayanır ve çok sayıda resmin kullanılması, kart tasarımının en önemli özelliklerinden biridir. Araştırma bulguları, resimlerin bir web sayfasının veya uygulamanın genel tasarımını iyileştirebileceğini doğruladı, çünkü resimler hızlı ve etkili bir şekilde kullanıcıların dikkatini çekebilir. Bu nedenle, resim eklemek, kart tabanlı tasarımı daha da büyüleyici kılar.
Örneğin, tasarımcılar için çevrimiçi hizmetler ve netizenlerin görüntülemesi için diğer yaratıcı çalışmalar sunan bir iletişim sitesi olan Dribble. Bu tür içeriği görüntülemek için kart tabanlı tasarım en uygun seçimdir.
2. Bir kart nasıl tasarlanır
Aynı sayfa düzeninde kart genişliği aynı kalmalıdır, ancak yükseklik buna göre ayarlanabilir. Kartın maksimum yüksekliği, platformdaki mevcut alanın yüksekliğiyle sınırlıdır, ancak geçici olarak da uzatılabilir. Örneğin, bir yorum kutusu görüntülerken.
Kartın yüksekliği sabit ve ayarlanabilir. Resim kaynağı: İnterkom
Tasarım açısından, kartın köşeleri yuvarlatılmalı ve biraz gölgeli olmalıdır. Yuvarlatılmış köşeler, kartın daha çok bir içerik bloğu gibi görünmesini sağlar ve gölge derinliği yansıtır.
Yuvarlak köşeler ve gölgeler. Resim kaynağı: Materyal Tasarımı
Bu öğeler, kullanıcıların dikkatini dağıtmadan tasarıma bazı görsel vurgular getirebilir. Ek olarak şunları yapabilirsiniz: Kartın sayfadan dışarı çıkmak üzere olduğu hissini verir .
Ayrıca animasyon ve hareket efektleri de eklenebilir.
Resim kaynağı: Behance
Üç, kartların avantajları
Uygun tasarımla kartlar, uygulamanın kullanıcı deneyimini geliştirebilir. İşlevsellikleri ve görünümleri nedeniyle, kullanıcı arayüzünün katma değerli bir öğesi haline geldiler ve kullanıcılar için daha sezgisel olarak etkileşime girebilirler.
1. Anlaşılması kolay form
Daha önce, AppSo (WeChat appsolution) ilham verici sabah okuma sütununda "İçerik İlk İlkesini" paylaşıyordu. Kart, herhangi bir içerikle yüklenebilen bir tasarım kutusudur. Karta farklı içerik koymak, kullanıcıların anlamasını kolaylaştırır.
Bu şekilde kullanıcılar en çok neye önem verdiklerini kolayca anlayabilirler. Bu aynı zamanda kullanıcıların çeşitli şekillerde etkileşimde bulunmasına da olanak tanır.
Farklı içerik biçimleri içeren bir kart koleksiyonu. Resim kaynağı: Materyal Tasarımı
2. Duyarlı tasarım ve mobil arayüz tasarımı
Kartla ilgili olarak, En önemli şey, temelde kontrol etmenin son derece kolay olmasıdır. . İster masaüstü ister mobil istemci olsun, kart tasarımı eklemenin etkisi çok iyidir çünkü içerik kullanıcılara daha anlaşılır kartlar aracılığıyla sunulabilir. Duyarlı tasarım açısından iyi bir seçimdir çünkü içerik kutusunda sunulan kartlar kolaylıkla genişletilebilir veya daraltılabilir.
Sonunda, Kartlar ekleyerek, platformlar arası cihazlarda birleşik bir estetik tasarlamak zor olmayacak. . Bu nedenle aynı kullanıcı deneyimi, kartlar aracılığıyla farklı cihazlarda kolaylıkla tasarlanabilir.
3. Tasarım yaparken "kalbinizdeki başparmağı" unutmayın
Kartlar, başparmak için tasarlanmıştır. Bu cümle, kartın uygulamalar için tasarlanmış olduğu anlaşılıyor. Mobil uygulama tasarımı, kartın yaygınlaşmasının temel bir parçası olarak kullanılabilir. Aslında dijital kartlar fiziksel kartlarla aynıdır ve kullanıcılara rahat bir deneyim de sağlayabilir.
Kullanıcıların bunların nasıl yapıldığına çok fazla dikkat etmeleri gerekmez. Kartın basitliğinden hoşlanırlar ve daha fazla bilgi almak için kartı nasıl çevirecekleri veya diğer kart bilgilerini almak için sola ve sağa kaydıracakları gibi ilgili fiziği sezgisel olarak anlayabilirler.
Tasarım yaparken, kullanıcının arayüzde etkileşime girmek için başparmağını nasıl kullanacağını düşünmelisiniz. Bu nedenle, arayüz içeriğinin boyutu, kullanıcıları etkileşimde bulunurken rahatsız hissettirmemelidir. Çevirmenin Notu
Sola ve sağa kaydırın. Resim kaynağı: Dribble
Kart hareketleri de dikkate alınmalı ve kart setine yerleştirilmelidir. Çakışma olasılığını azaltmak için aynı sayfadaki kaydırma hareketlerinin sayısını en aza indirin.
Örneğin, kaydırılabilir bir kart kaydırılabilir bir kayan resim içermemelidir, böylece kart kaydırıldığında yalnızca bir etkileşim olmasını sağlayabilir.
Aşagı kaydır. Resim kaynağı: Dribble
4. Kartlar ne zaman kullanılmalı
1. Bilgi akışı
Kartlar, olayların doğal bir zaman çizelgesi oluşturarak bilgi akışları biçiminde sunulur. Facebook'un, kullanıcıların haberlerdeki en son olayları hızlıca taramasını ve konuyu kaçırmasını önlemek için kartları nasıl kullandığını düşünün.
Facebook'un Haber Akışı sonsuz bir bilgi akışıdır, kartlar ise bağımsız bilgi akışlarının bir koleksiyonudur. Kartların işlevi bilgi akışını dağıtmaktır, sonsuz bilgi akışından olayları ayırır, paketler ve sonra paylaşır.
2. Keşif
Kartlar, alakalı içeriğin doğal bir şekilde görünmesini sağlayarak kullanıcıların kendi ilgi alanlarını keşfetmesine olanak tanır. Aşağıdaki resimdeki Tinder kartında sola veya sağa kaydırın ve sistem otomatik olarak dikkatinizi çekebilecek kişileri önerecektir.
İçerik yapısı açısından, Pinterest, kullanıcıları daha fazla göz atmaya çekmek için duvarcılığa benzer dinamik bir düzen içinde sayfayı tasarlamak için raptiyeler kullanır.
AppSo (WeChat appsolution) Not: Masonry, NSLayoutConstraint sistemini kapsayan ve zincir programlama kullanan geliştiricilere API'ler sağlayan üçüncü taraf bir otomatik düzen çerçevesidir.
Yukarıdaki iki örneğin ortak bir yönü var mı? Bilgileri işlevden ayırır ve mevcut durumla alakalı hale getirir.
3. Diyalog
Kartlar içerik kutuları olduğu için harekete geçirici mesajlar için mükemmeldir. Bir kartın en önemli davranışı aslında kartın kendisidir. Örneğin, Apple cihazlarındaki AirDrop işlevi, veri aktarımı için bir istek alırken, bir bildirim içeren kart otomatik olarak açılır ve kullanıcının veri iletimini almayı veya reddetmeyi seçmesine izin verir.
Hangi seçenek olursa olsun, bunu yalnızca bir kez yapmanız gerekir. Resim kaynağı: Apple
4. İş Akışı
Kartları kullanarak bir grup görevi de kolayca kategorize edebilirsiniz. İyi bir vakanın Trello'dan söz edilmesi gerektiğini söylemek için. Trello pano arayüzüne birçok kart eklenebilir ve her kart bağımsız bir görevi temsil eder.
5. Kartların geçerli olmadığı senaryolar
1. Benzer içerik
Çok fazla kullanıcı etkileşimi gerektirmeyen benzer içerikler için kartlar önerilmez. Hızlı bir şekilde taranabilen bir liste (veya ızgara) daha uygun bir seçimdir.
Soldaki resimde, kart kullanıcının dikkatini dağıtacak ve kullanıcının hızlıca taramasını engelleyecektir. Resim kaynağı: Materyal Tasarımı
Kartların fotoğraf koleksiyonlarında veya albümlerde kullanılması da önerilmez. Izgara, resim koleksiyonunu görüntülemek için basit ve kullanışlı bir seçimdir. Aşağıdaki şekil bir örnektir.
Sol: Resme bir kart ekleyin. Sağ: Doğrudan ızgara görünümünü kullanın. Resim kaynağı: Materyal Tasarımı
2. Büyük ekran
Kart tabanlı bilgi tasarımı, küçük bir ekranda çok uygun olabilir, ancak büyük bir ekranda, tanınmayan sınırları olan dağınık bir kombinasyon gibi hissedecektir. Görsel açıdan oldukça iyi görünüyor. Bununla birlikte, okuma hızı veya okuduğunu anlama gibi bazı nesnel göstergeler çok zayıftır. Aşağıdaki resim büyük ekranda Pinterest sayfasıdır.
3. Mevcut uygulamayı yeniden tasarlayın
Bir uygulamanın kullanımının kolay olduğunu bilen ve düşünen kullanıcılar, bir süre yeni görsel mantığı kabul etmekte isteksiz olabilirler. Kullanıcının bakış açısından başlamalı ve ihtiyaçlarını anlamalıyız. İhtiyaçlarını öğrendikten sonra, tasarım testi yoluyla mevcut uygulamayı kademeli olarak yeniden tasarlayabilir ve ardından değişiklikleri görebilirsiniz.
son sözler
Bu makale sayesinde okuyucuların kart tasarımının neden giderek daha popüler hale geldiğini anlayabileceklerini umuyorum. Kısa vadede kart tasarımının da ortadan kalkmayacağına inanıyorum. Sonuçta kartlar, sürekli kullanıcı deneyimi tasarlamak için en esnek düzenlerden biridir. .
Günümüzde kullanıcılar, hangi cihazda olurlarsa olsunlar hızlı bir şekilde yararlı bilgiler bulmak istiyorlar, karttan gelen geri bildirim her zaman iyidir. Ve daha iyi bir kullanıcı deneyimi her zaman "insan odaklıdır".
Yazar | Nick Babich Yazılım mühendisi, UI ve UX'e odaklanıyor.
Tercüme | Jorri
Resim Teambition'dan
UX'i Geliştirmek İçin Kart Tabanlı Tasarım Kullanan orijinal bağlantı, orijinal yazar tarafından çeviri yetkisine sahiptir.
Bu makale, cep telefonlarının kullanımını kolaylaştıran AppSo tarafından hazırlanmıştır. WeChat hesap uygulama çözümüne dikkat edin ve size Taobao'nun iki duruşunu anlatmak için "Taobao" ya yanıt verin. Arkasındaki tasarım bilgisi nedir?
