Etkili navigasyon tasarımı ile 13 divi web sitesi
İyi tasarlanmış navigasyon yapısı, web sitesinin hedeflerini karşılamada çok önemlidir. Navigasyon basit veya karmaşık olabilir, ancak etkili olmalıdır. Tabii ki etkili her zaman güzel anlamına gelmez. Yani, sitenin sahip olduğu içerik miktarı için, aradığınızı bulmak kolaydır. Bu makalede, etkili navigasyon tasarımlarına sahip 13 DIVI web sitesi göreceğiz. Bu yazıyı yaparken amacım web sitesinin amacını belirlemek ve daha sonra navigasyon tasarımının bu hedefe göre etkili olup olmadığını ölçmektir. Birincil ve ikincil menüleri düşünüyorum, ancak sadece menüyü görmekle kalmıyorum. Ayrıca navigasyon yapısını yapan kahramanların içinde veya altındaki bağlantıyı da gördüm.
Aşağıdaki web sitelerinin bazıları, endüstri tarafından anlaşılan dilleri içeren belirli endüstrilere yönelik bilgiler sağlayacaktır. Diğerleri navigasyon yapmak için simgeler sağlar bir bakışta anlaşılabilir. Diğerleri potansiyel kitlelerine ulaşmayı kolaylaştırmak için bağlantılar sağlar. Resimde navigasyona odaklanıyorum, bu yüzden bazen sitenin beklediğinizden çok farklı görünmesini sağlayan açık bir menü göreceksiniz. Şimdi, web sitesine … 1. Oynamak için hasat
Bkz. Web Sitesi 2. Wesleyan Kilisesi Kilise, daha fazla bilgi edinmek için kilise, etkinlikler, hizmetler, kaynaklar, konum ve bağış bağlantıları hakkında bilgiye ihtiyaç duyar. Bu, tüm bu öğeleri ana veya ikincil menüdeki kapsar. Ana menü, bu kategoriye grafik ve basit bir bağlantıya sahip mega menüdür. Bağış yapma daveti mavidir, bu yüzden çok belirgin olmadan göze çarpıyor. Renk site tasarımı için mükemmel çalışır. Bkz. Web Sitesi 3. WarnerSekolah Üniversitesi, öğretmenler, öğrenciler, potansiyel öğrenciler, ebeveynler ve kampüsler, kurslar, çevrimiçi kurslar, kabul ve daha fazlası hakkında bilgi, öğrenciler, potansiyel öğrenciler, veliler gibi birkaç farklı amaç ve izleyici için çok fazla bilgi sağlamalıdır. Bulunması kolay bir şekilde bu kadar bilgi sağlamak zordur. Bu, hedefi ana konuyu alt konulara ayıran ve sütunda görüntüleyen bir mega menüyle tamamlar. İkincil menü bir dizi başka bağlantı sağlar, ancak konunun ana menüde olmadığını anlamak kolaydır, böylece yanlış yerde arama yapmazsınız. Bkz. Web Sitesi 4. Olivet Koleji
Bu okul farklı bir yaklaşım benimser, ancak aynı miktarda bilgi sağlar. Ana menü, simgelerle ana bağlantıyı sağlar ve etkili arama araçları kullanır. Mega menü, kaplı büyük görüntüler kullanır. Açıldığında, mega menü bağlantılar ve resimler içeren bir sekme sağlar. Bahçenin altına daha fazla bağlantı yerleştirilir ve piyasaya sürüldüğünde yerinde kalır. Bkz. Web Sitesi 5. Skyfox Design Çevrimiçi portföylerin içerikte kaybolmayan bazı temel bilgiler sağlaması gerekir. Bu site bunu bir dosya dolabı tasarımı yaparak sayfanın kendisini gezinme olarak kullanarak yapar. Her sayfa iyi etiketlenmiştir ve sayfa yüklendikten hemen sonra tam olarak ne aradığınızı görebilirsiniz. Herhangi bir sayfaya tıklayın ve gerisini saklayarak öne doğru eğilin. Her sayfa, köşede, ayrıldığınızda sayfanın sayfasını gösteren verandayı görüntülemek için arka sayfayı eğen bir menü bağlantısı içerir. Sizi doğrudan her sayfaya götüren sayfanın altında başka bir menü kalır. Web Sitesi 6’ya bakın. Ev onarım web siteleri genellikle kategorize edilecek ve anlaşılması kolay bir şekilde sunulacak çok sayıda ürüne sahiptir. Bu site, ürün türleri simgelerini içeren ana menü altında yeni bir menü oluşturarak bu ürünlerde gezinmeyi basitleştirir. Bir bakışta hangi bağlantının yalnızca simgeden tıklanması gerektiğini öğrenebilirsiniz. Tıklamak sizi ürün listesine götürecektir. Bkz. Web Sitesi 7. Ryan Welch
Fotoğrafçıların genellikle kendileri ve yaptıkları iş hakkında diğer iyi portföyler gibi bilgi vermeleri gerekir, ancak potansiyel müşterilere süreç boyunca yardımcı olmaları gerekir. Bu navigasyon navigasyon tasarımı kullanır ve navigasyonu kahramanla eğimli bir kutuya yerleştirir. Yuvarlanırken, ana menünün altına NAVIC navigasyonu eklenir ve bu işlemden geçmeyi kolaylaştırır. Her bölüme uyacak bir sayı verilir. Bkz. Web Sitesi 8. Gruissan Mediterranee Turizm web sitesinin, bölgede görülecek şeyleri, yemek yerleri, otelleri, eğlence vb. Bu, site tasarımı ile mükemmel çalışan ve iki navigasyon alanı sağlayan yazı tipleri kullanır. Birincisi, hızlı bir şekilde anlayabilmeniz için bir simge içeren ana menüdür. İkincisi, yayınlandığında açık olan kahraman alanı altında menü. Bu alan, bölgenin benzersizliği hakkında daha ayrıntılı bilgi sağlar. Web sitesini ziyaret edin 9. DJ Charlie Villasdj genellikle kitleleriyle bağlantı kurmak için şık grafikler kullanır. Bu, ana menü ve metin bağlantısını sağlar, ancak basit bir veranın altında web sitesinin stiline uygun çizimler gösteren başka bir menü vardır. Bu menü, çeşitli sayfalara ve hizmetlere hareket etmek için bir davet görevlisi olarak hizmet eder. İllüstrasyon, bağlantının ne olduğunu görsel olarak gösterir. Grafikte yüzmek, ana menüye uygun metin görüntülenir. Buna Hover Animation dahildir.
Bkz. Web Sitesi 10. Sleeknote
İşletmelerin müşterilerin sizden ihtiyaç duydukları şeyi bulmalarına yardımcı olmalarının en iyi yollarından biri, onlara soru sormaktır. Bu web sitesi Mega menüsündeki ilk soruları sorar. Ürün bağlantısı menüyü açar ve sorular sorar, bu da sonraki birkaç sütunda birkaç çözüme yol açar. Çözüm, simgelerle görsel bilgiler sağlamaktır ve kısa bir başlık ve açıklama içerir. En altta basit davranma daveti, müşterileri mevcut tüm özellikleri görmeye davet eder. Mega menü temiz ve takip edilmesi kolay. Bkz. Web Sitesi 11. Film OkuluAşağıda etkili navigasyon navigasyonunun kullanılmasıdır. Film okulu gibi alışılmadık bir konunun potansiyel öğrencileri süreç boyunca yönlendirmesi gerekir. Navigasyon numaralandırılmış bunu yapar. Menü dikey olarak sağlanır ve herhangi bir zamanda ekranda kalır. İmleci menüye yönlendirdiğinizde, bağlantı bağlantıyı tepki verir ve vurgular. Ekranda yüzen menüde nerede olduğunuzu gösterir. Her bölüme navigasyona uyacak bir sayı verilir. Bkz. Web Sitesi 12. Mambo MediaYang, portföyler için benzersiz navigasyon oluşturur. Menü yapısını doğrudan kahraman alanına ekledi ve bir arka plan videosu aracılığıyla portföye animasyonlu bağlantılar sergiledi. Video yalnızca imleci işaret ederken çalınır, yani doğrudan bağlantı görünüşünüzde olduğu için onu aramanız gerekmez. Bu, görsel bir portföy yapmanın ilginç bir yoludur, böylece müdahale etmez. Bağlantı videonun üzerine yerleştirilmiş olsa da, kahraman alanı hala temiz görünüyor. Bkz. Web Sitesi 13. Willow Creek Şelalesi
Belirli olay türlerine hizmet veren yerler, etkinlik ve çevre hakkında çok fazla bilgi sağlamalıdır. Bu web sitesinin ana menüsündeki bağlantının anlaşılması ve takip edilmesi kolaydır, ancak kullandığım ikincil menüdür. Bu, tıklanan telefon numaraları, gelin bilgileri, kabin kiralama web siteleri, şirket Facebook sayfaları ve Google Haritalar gibi bağlantılar sağlar. Her bağlantı bir simge içerir, böylece bağlantının ne olduğunu bir bakışta bilebilirsiniz. Bir sonraki divi web siteniz için size ilham vermeye yardımcı olacak etkili navigasyon tasarımı ile 13 divi web sitesinde görünüşümüz olan zihnini sona erdiren web sitesine bakın. Özellikle mega ikonların ve menülerin kullanımını seviyorum. Bazılarının menüde çok fazla içeriği olmasına rağmen, iyi ve kolayca takip edilir. İyi tasarlanmış navigasyon, web sitenizi hedeflerine ulaşmada daha etkili hale getirebilir. Divi ile navigasyon tasarımı ve stili hakkında daha fazla bilgi için bkz. Makale: 10 yıllık boş zamanın düzenine etiketlenen gezinme noktaları nasıl eklenir Divi ile Navigasyon Ana Sayfası Nasıl Yapılır
Divi Dikey Navigasyon Aktif Bağlantınızı Organize Etmenin 3 Yaratıcı Yolu İşi teşvik eden divi ile dikey navigasyon nasıl yapılır
Divi web sitenizde üst üste binen standart ve dikey navigasyon nasıl yapılır
3 Dikey Alt Menü Gezinme Düzenlemenin Yaratıcı Yolu
Divi web sitenizin çakışan şeffaf dikey navigasyon nasıl yapılır
Divi navigasyonunuzu alttan nasıl başlatırsınız, sonra kaydırma yaparken yukarıda kalın
Divi kaydırıcı modülü ile navigasyon mozaiği nasıl yapılır
