Önyükleme kullanıcı arayüzleri

Kullanıcı arayüzleri, kullanıcıların yaratımlarımızla etkileşim kurma şekli olduğundan, uygulamaların en önemli parçalarından biridir, ancak bunun ötesinde, iyi bir arayüz, uygulamamızla olan deneyimi olumlu kılar.Öte yandan, şüpheli bir arayüz şu anlama gelir: iyi bir uygulamanın artık kullanılamayacağını.
Önyükleme Bize yerleşik arayüzler sağlamaz, kendimiz tasarlamamız gereken bir şeydir, ancak bunları oluşturabilmemiz için bize bileşenleri verir ve bileşenlerinin çoğu web uygulamalarının tasarımına yönelik olmasına rağmen, aslında başka bileşenleri de vardır. Kullanıcı adı deneyimini iyileştirin.
Bu bileşenler dayanmaktadır JavaScript Y jQuery, bu yüzden bahsettiğimiz bu unsurları kullanabilmek için bu son kütüphaneye ihtiyacımız olacak, ancak bazı sonuçları gördüğümüzde bu dahil etmeyi haklı çıkaracağız.
Girişte belirttiğimiz gibi, kullanmak gereklidir jQuery Bu bileşenleri kullanmak için, tanımlayacağımız ilk şey etiketimizin nasıl olması gerektiğidir. kafa göreceğimiz tüm örnekler. Bunun kodunu görelim:

Her şeyden önce şunları dahil ediyoruz: bootstrap.css küçültülmüş versiyonunda ve ardından tema.css, şimdiye kadar her şey olağandı ama sonra eklemeliyiz jQuery ve biz de dahil etmeliyiz bootstrap.js bu çerçevenin bize bileşenleri arayüzlerimiz için birleştirme fırsatı vereceği yol budur.
Bu eklemeler, projeyi depoladığımız makinemizde bir klasörden kodda gördüğümüz gibi yapılabilir veya ayrıca bir CDN, aşağıdaki kod parçasında gördüğümüz gibi:

Kullandığımız seçeneklerden herhangi biri iyidir, önemli olan kitaplıkları dahil ettiğimiz sıraya uymaktır, aksi takdirde bileşenlerimiz istediğimiz gibi çalışmayacaktır.
İyi bir arayüz kullanıcıya her zaman yardımcı olmalıdır, onlara her zaman hangi yöne gidileceğini ve farklı bileşenlerinin ne işe yaradığını göstermelidir, bu şekilde sezgiseldir ve bir şey bulmak için düğmeler ve menüler denerken kullanıcının tahmin yürütmesini önler. .
Araç ipucuBundan kaçınmamızı sağlayan bir araç, Araç ipucu, uygulamamızın bölümlerini açıklamamıza yardımcı olan küçük açılır kutulardan başka bir şey değil, yardım kutuları olarak da bilinirler, fikir şu ki bu küçük kutulara gerçekleştirebileceğimiz eyleme anlam veren küçük ifadeler ekliyoruz. arayüzümüzde.
Yardımıyla bir araç ipucunun nasıl oluşturulacağını gösterdiğimiz küçük bir kod görelim. Önyükleme:

 Örnek İpucu Kaydet

Kodumuzda belirtilen kütüphaneleri ve ardından etikete dahil ettik. senaryo olayı kullanıyoruz belge.hazır bizim yaratmak için ipucu bu, sınıfın sahip olduğu her şeye uygulanacak araç1, bu sınıf adı istediğimiz herhangi biri tarafından özelleştirilebilir ve ayrıca sağ tarafta bir düzeninin olduğunu, yani yardımımızın sağ tarafta görüntülenmesini bir seçenek olarak ekledik. Ardından, içeriğimizin gösterim amacıyla ekranda daha görünür olması için gövde için genel bir stil oluşturuyoruz.
Sonunda içinde vücut bir eleman yaratıyoruz buton, adında bir özelliği var veri geçişi ve bunun bir olacağını belirtiyoruz ipucu özelliğin neresinde Başlık yardım kutumuzun göstermesi gereken metni ve tabii ki özniteliğe yerleştiririz sınıf dahil etmeliyiz araç1 başlangıçta tanımladığımız sınıf buydu. Her şey hazır olduğunda, fareyi düğmemizin üzerine getirdiğimizde, tarayıcımızda çalıştırıldığında aşağıdaki gibi görünmesi gereken oluşturulan araç ipucunu görselleştirebiliriz:

Gördüğümüz gibi, bu bileşen bize yardım kutuları aracılığıyla kullanıcıya nasıl çalıştıklarını veya arayüzümüzdeki bazı öğelerin ne için kullanıldığını açıklama fırsatı verdiği için oldukça kullanışlıdır.
Kullanıcı arayüzünün çok önemli bir bileşeni daha vardır ve o da akordeon, Bu öğenin amacı, metni uygulamamızın bir bileşeninin altına kaydedebilmektir, bununla, kullanıcının tıkladığında içeriğin görüntülendiği arayüzümüzün hem düzeni hem de temizliği hakkında bir ilk izlenim elde ederiz.
Bu önemlidir, çünkü iyi bir kullanıcı arayüzünün ihtiyaç duyduğu bir diğer kalite de temizliktir, çünkü temiz bir arayüz, kullanıcının şaşkınlık hissetmeyeceği ve bu nedenle onu kullanmak daha keyifli olacağı anlamına gelir.
Akordeonun yapısı basittir, bu durumda böyle bir senaryo oluşturmamız gerekmiyor, sadece bir yapı yapmamız gerekiyor. div'ler türden olduklarını belirtmemize izin veren panel, akordeonumuzun başlığı div tipinde olacaktır. panel başlığı ve içeriğimiz türün başka bir div'i olacak panel içeriği, göstermek istediğimiz öğe miktarı için tekrarlamamız gerekir.
Aşağıdaki örnekte iki elemanlı bir akordeon oluşturduğumuzu görelim:

 akordeon örneği
İlk Eleman
Bu akordeonumuzun ilk elemanı
İkinci Eleman
Bu, akordeondaki ikinci elementimizin içeriğidir.

Akordeonun yapıdan sonra çalışmasını sağlayacak en önemli şey tanımlayıcılardır, akordeonun başlığına bakarsak bir çapamız var ve bu örnekte yönlendiriliyor. madde 1 Y eleman2 bu bağlantıların her birinin içeriğin tanımlayıcısına karşılık geldiği yerde, her birinin içerik bloğunun nasıl olduğunu görürüz. Git bu iki kelime, yani başlıklara tıkladığımızda içerikleri görüntüleniyor. Örneğimizi çalıştırdığımızda tarayıcımızda nasıl göründüğüne bakalım:

BÜYÜT

Gördüğümüz gibi element1 içeriğini sorunsuz gösteriyor, element2 ise herhangi bir bilgi göstermiyor, üzerine tıklarsak element1'in içeriğinin nasıl gizlendiğini ve element2'nin içeriğinin nasıl görüntülendiğini görebiliriz:

BÜYÜT

Son olarak, kullanıcı arayüzleri için harika bileşenlerden bir diğeri, mod resimleriBunlar, bir düğmeye veya bağlantıya tıklandığında çağrılan öğelerdir ve işlevleri bize bir tür açılır pencere göstermektir.
Bu pencere çok kullanışlıdır, çünkü uzunluğu nedeniyle pratik olmayan bir metin görüntülememize izin verir. ipucuveya belki de kullanıcının bazı bilgileri doldurmasına ihtiyacımız var ve bunu başka bir sayfaya göndermek istemiyoruz. Bu tür bileşen, uygulamamızın temizliğini korumamıza yardımcı olur, ancak aynı zamanda kullanıcıyı çok önemli olabilecek bir şeye dikkat etmeye zorlamamıza da yardımcı olur.
Tabii ki, burada sağduyu kuralları geçerli olmalıdır, çünkü bir kipin başka bir kipi yükseltmesi mümkün olsa da, bu kötü bir tattır ve kullanıcının navigasyonuna zarar verir, ayrıca bir formda dörtten fazla alanı dahil etmemiz gerekirse daha iyidir. birkaç örnekten bahsetmek için modal değil yeni bir sayfada yapmak. Aşağıdaki kodda nasıl bir modal oluşturabileceğimizi görelim:

 Modal Grafikler×
Bir sonraki aşamaya geçtiğinizde, tüm eylemleriniz nihai olacaktır.

cevaplarını geri alamam
Çıkış Devam

Bu durumda modal şurada yapılandırılır: belge.hazır doğrudan görüntülenmesi için, bu tür bir uygulama, kullanıcı devam etmeden önce uyarı vermek için yaygın olarak kullanılır. Daha sonra kipimiz üç kısımdan oluşuyor; üst parça (başlık), vücut (vücut) ve altbilgi (altbilgi).
Normalde başlık Modelin içinde, modalın nedenini belirtmek için öne çıkan bir boyuta sahip bir başlık var. vücut bir form veya mesaj gibi açıklama veya içerik ve altbilgi devam etme veya kapatma gibi işlem düğmeleri. Öyleyse, tarayıcıda çalıştırdığımızda modal penceremizin nasıl göründüğünü görelim:

Bu bileşenin uygulanması oldukça basittir ve uygulamamıza profesyonel bir tarz kazandırır, ancak uygulamanın uyumunu kesintiye uğratmayacak bir yere yerleştirmek için mantığımızı nasıl kullanacağımızı bilmemiz önemlidir.
Bununla, daha iyi bir organizasyon ve uygulamamızdaki eylemleri anlamak için kullanıcı arayüzleri oluşturmamıza yardımcı olan ve böylece tarama deneyimini ve kullanımını iyileştiren üç büyük bileşeni etkili bir şekilde geliştirdiğimiz bu öğreticiyi sonlandırıyoruz.