UI Tasarım Kalıpları Nasıl Kullanılır?
Tasarım modelleri, yaygın tasarım problemlerine en uygun çözümlerdir. Bir toplum etrafında ortak sorunlar ortaya atıldığından ve çözüldükçe, ortak çözümler genellikle ortaya çıkar. Sonunda, bunların en iyisi din üzerinde yükselir, kendini tanımlar ve tasarım deseninin durumuna ulaşana kadar arıtılır.
Bir tasarım paternini web tasarımında bir trend olarak adlandırmayacağım, tasarım kalıpları yeni bölgeler oluşturmaktan veya şeylerin nereye gittiğine bakmaktan ziyade, yaygın tasarımların geriye dönük olarak nasıl sınıflandırıldığına bakmakla ilgili daha fazla görünüyor.
Kullanıcı arayüzü tasarım kalıplarına nasıl yaklaşmalısınız?
Tasarım kalıplarını her zaman kullanıyoruz, eğer bunlara aşina değilseniz, muhtemelen sizin etrafınızda olduklarını farketmediniz.
Bir sayfada görüntülenecek çok fazla içeriğe sahip olmanın klasik örneğine ne dersiniz? Dikkatimizi, kullanıcılara bir bağlantı denizinde kaybolmadan, istediğimiz tüm içeriği sunmamızı sağlayan bir tasarım deseni olan "Tabs" a çeviriyoruz.
Bir tasarım desenini kullanmanın tipik faydaları arasında şunlar bulunur:
- yeni başlayanlara web tasarımında en iyi uygulamaları nasıl kullanacaklarını gösteren;
- tasarımcıların kolektif anlayışına uyum sağlamayı öğrenmek;
- daha iyi iletişim için izin vermek, bilinmeyen seçimler ile ilişkili riskleri azaltmak;
- belirli görevleri yerine getirmek için gerekli zamanı azaltmak ve iş akışını azaltmak;
- Daha önce yapılmış bir şeyi inşa etmek için harcanan zamanı önlemek;
- kullanıcıya tanıdık ve deneyimlediği bir deneyim sunmak (tasarım örüntülerinin doğası).
Yukarıdaki örnekte gördüğümüz Clicky Medya Bugün iki çok popüler tasarım deseni kullanarak:
- Navicon - site navigasyonu olarak bilinen menü için evrensel bir sembol, modern web tasarımında giderek daha popüler hale geliyor, ancak zaten mobil cihazlara tam olarak adapte edilmiştir.
- Paralaks Scrolling - kullanımı kolay bir kaydırma mekanizması ile tek bir sayfa web sitesi sağlayan benzersiz bir tasarım deseni, ama aynı zamanda sayfaya canlı bir his veren arka plan sprite bir listesini içerir.
Her iki Navicon menüsü ve sayfanın üst kısmındaki genel menü benzer seçimleri paylaşsa da, aynı bağlantı çubuğundaki tüm bağlantıların dahil edilmesi çok dikkati çeker - küçük seçimlerin büyük bir fark yaratabildiği açıktır.
Bir tasarım desenini değerlendirirken ve kendi ihtiyaçlarınıza göre uyarlarken düşünmeniz gerekenler:
- Sorun özeti: Hangi kullanıcı problemini çözüyorsunuz? Odaklanmaya devam edin ve bir kullanıcı hikayesi gibi ifade edin - yalnızca bir cümlede.
- Çözüm: Başkaları bu sorunu nasıl çözdüler? Ayrıntıya konu olan birkaç şey arasında kullanıcı navigasyonu (kısayollar dahil), kullanıcı girdilerinin alınması, veri ve diğer servisler veya uygulamalarla entegrasyonların yapılması ve bilgi ve içerik (varsayılanlar dahil) gösterilmesi yer alır.
- Örnek: harika, bana gösterebilir misin? Bazen bir ekran görüntüsü veya mockup yeterlidir; Diğer zamanlar, kullanıcı akışları ve / veya ek notlar, paterni açıkça iletmek için gereklidir.
- Kullanımı: Bu desen ne zaman kullanılmamalıdır? Detaylandırılacak bir kaç şey, ürün mimarisi, arayüz düzeni, aygıt (lar), programlama dili, diğer tasarım kalıplarının yokluğu veya varlığı, kullanıcı türü ve birincil kullanım durumlarıdır.
Henüz yapmadıysanız, bu şekilde kalıpları düşünmek için pratik ve disiplin gerektirir. Ürününüzü tasarlarken bu soruları yanıtlamak için zaman ayırın. Çünkü, kullanıcılarınız ve ekibiniz benzer ayrıntıları sorduğunda yolun geri dönüşünü çok fazla zaman kaybetmenize yardımcı olabilir.
UI araç takımlarının yükselişi
Kullanıcı arayüzü tasarım kalıpları, kullanıcının web sitenize, uygulamanıza veya sisteminize gitmesini kolaylaştırmakla ilgilidir. Kullanıcı ilk kez bir yorum göndermeyi öğrenirse, iletişim formunu kullanarak size bir e-posta göndermeyi anında öğrenecekler, aynı tekrarlayan bilgi girdisi kavramıdır.
Son yıllarda, UI araç seti pazarında muazzam bir büyüme gördük. Bir UI araç takımı, tam bir grafik uygulamayı sıfırdan oluşturmanıza izin veren bir dizi widget olarak kolayca anlaşılabilir. Twitter Bootstrap, başarılı bir UI araç setinin mükemmel bir örneğidir. Bu günlerde, web tasarımcılarının büyük bir kısmı kendi iş akışını kolaylaştırmak için Bootstrap özelliklerine güveniyor. Bir anlamda, tekerleği yeniden icat etmeye gerek yok!
Hatırlamak için 3 UI tasarım desenleri
Kısaca, tasarım örüntüleri tekrar eden sorunlara çözümlerdir. Kalıpları kullanarak basit kullanıcı arabirimi sorunlarının üstesinden gelebiliriz. Eğer dikkat edersek, desenlerin etrafımızda olduğunu fark ederiz. Bu özel tasarım hakkında özel bir şey yok, bu sizin için heyecanlandığınız şekilde uygulandı!
Crystal Clear Harekete Geçirici Mesajlar
En basit web formları (ve ayrıca en yaygın olanları) genellikle sadece tek bir işlem yapılabilir düğmeye sahip olacaktır: bu durumda 'Web Sitesi Oluştur'. Oldukça kendini açıklayıcı, konu bu.
Ne kadar kolay olabilir, değil mi? Her zaman kolay seçenek için gidin, sadece kalabalığın arasından sıyrılmak için tekerleği yeniden icat etmeyin.
Ekmek kırıntıları kurtarmak için
Kırıntı noktaları, sitenin ön sayfasından, web sitesinin sayfa hiyerarşisindeki kullanıcının geçerli konumuna doğru olan yolu gösterir. Bunlar, kullanıcıların web sitesinin hiyerarşisini ve yapısını anlamalarına yardımcı olan bir ikincil gezinme şeklidir. Breadcrumbs, ana sayfa ile başlar ve şu anda görüntülenen sayfa ile biter.
Bu örnekte Fares Farhan, İki UI tasarım modelini aynı anda nasıl kullandığını görüyoruz. İlk olarak, üstte sekme deseni ve alt kısımda ekmek kırıntıları gezinme deseni var. Onları bir araya getirerek çok hoş bir göz atma deneyimi sağlar.
Kayıt kolay olmalı
Kayanın altında yaşamıyorsanız, sosyal kaydın farkında olacaksınız. Bir web sitesine kayıt yapmak, yapılması gereken ortak bir şeydir ve bu nedenle mümkün olduğunca kolay ve keyifli yapılmalıdır.
Bu, en sevdiğim kayıt sayfalarından biri. Bu GitHub ana sayfa ve ekran görüntüsünde gördüğünüz gibi şirketin durduğu her şey yüz kelimeden daha az olarak sunulur. Ayrıca, hareket halindeyken kaydolabilirsiniz ve işlemin tamamlanması bir dakikadan az sürer. Hesabınızı doğrulamak için bir e-posta alacaksınız, ancak bu zaten kullandığımız bir şey!
Son sözler
Sekiz yıldan uzun bir süredir web siteleri kurdum ve bu sekiz yıl boyunca basitliğin birçok tasarım probleminin anahtarı olduğunu anladım.
Tasarımda dağınıklığın, gereksiz unsurlar ve formlarla şişirilmiş bir şekilde web üzerinde bulabileceğiniz en sinir bozucu deneyim olduğuna dair bir sonuca vardım. Evet, tasarım tam olarak bir şeyin nasıl çalıştığıdır, bu yüzden neden düzgün çalışmamalı? Kullanıcı arayüzü (UI) işinizin veya girişiminizin başarısı için son derece önemlidir.
Başarılı siteler tasarlamanızı sağlamanın en iyi yolu, mevcut tasarım kalıplarından öğrenmek ve kullanmaktır.