Dikey Gezinti Sağlayan 10 Site
Web gezinme menülerinin çoğunluğu, sayfa boyunca yatay olarak akar. Bu, geleneksel monitörlerin daha uzun olmaktan ziyade daha geniş bir tarihçesinden geliyor.
Ancak, çok fazla ekran alanıyla, artık web sitelerinin dikey gezinme menüleri kullanması mümkün. Ve bunların çoğu harika görünüyor.
Bu 10 dikey menü örneği, benzersiz tasarım stili ve farklı kullanılabilirlik için çalışmak için mükemmeldir.
1. Petersham Fidanları
Üzerinde Petersham Fidanları Web sitesi iç içe dikey gezinme bulacaksınız. Bu teknik, çok sık bulacağınız bir şey değil ama bu sitede iyi çalışıyor.
Her ana bağlantı, bağlantıları görsel olarak iletmek için arka planda bir simge kullanır. Ve ilk iki bağlantı, ana menünün yanında hizalanmış alt menüler açar. Bunlar genellikle yatay menülerde gördüğünüz açılan yerlerin yerini alır.
Bu site yanıt veriyor, bu yüzden daha küçük boyutlarda bu bağlantılar bir hamburger menünün ardında kayboluyor. Bu, masaüstü kullanıcıları arasında dikey bağlantılar için yeterli alan ve yatay bir navbar ile daha iyi olan mobil kullanıcılar arasında makul bir ayrım yaratır.
2. Arbor Restaurant
Bir başka çok özel örnek Arbor Restaurant Bağlantılar arasında bol miktarda boşluk bulunan temiz bir dikey nav vardır. İçerik, gezinmenin yanında dikey olarak hizalanan kayan bir kapta görünür.
Bu içerik stili oldukça eşsiz. Çoğu dikey nav sitesi, içeriklerini ana sayfa ile aynı hizada tutar, ancak bu durumda içeriği kolayca gösterebilir / gizleyebilirsiniz. Bu, sayfanın momentumunu içerikle akıtarak tutan dikey gezinmeye belirli bir yetenek katıyor.
3. Smokey Kemikler
Smokey Bones Bunun için iki şey var: harika yiyecek ve katil bir web sitesi.
Her sayfa sol tarafa sabitlenmiş uzun dikey navigasyonu kullanır. Bu, çoğu web sitesi için bir temeldir, çünkü batı okuyucularının çoğunluğu içeriği soldan sağa kullanır ve sol üst köşede site logosu için geleneksel yer bulunur.
Sevdiğim bir özellik, tüm restoranın yemeklerini listeleyen menü açılır. “Menü” bağlantısını tıklarsanız, bunun dikey olarak eklenen bir alt menü gibi nasıl çalıştığını göreceksiniz. Küçük bir restoran sitesi için iyi çalışan harika bir fikir.
4. Mamut Medya
Daha az içeriğiniz olduğunda, daha sıradışı gezinme seçenekleri ile uzaklaşabilirsiniz. Mamut Medyası sitelerinde yalnızca bir beş ana sayfaya ve bir bloga sahip olan iyi bir örnektir.
Bu navigasyonun belirli bir yönü, gizli açılan özelliktir. “Çalış” bağlantısını tıklarsanız tıklayabileceğiniz 2 alternatif bağlantı elde edersiniz. Ana bağlantının altında görünürler, böylece daha küçük bir açılır kapanışın rolünü alırlar.
Mobil cihazlarda bile bu navigasyon benzer bir stil izler. Çok fazla bağlantınız olmadığında, yaratıcılığı gerçekten zorlayabileceğinizi kanıtlıyor.
5. Amazon
Herkes ve büyükanneleri Amazon hakkında biliyor. Çevrimiçi perakendeci inanılmaz bir seçim var, ancak aynı zamanda harika bir UI tasarımına sahipler. dikey nav linkleri ürün arama sayfalarında.
Amazon'un her arama terimi için düzinelerce kategorisi var. Bu, sayfanın aşırı kalabalıklaşmadan rafine arama özelliklerini sunmanın bir yoluna ihtiyaç duydukları anlamına gelir. Dikey navigasyonlar sadece anlamlıdır, çünkü hala tamamen erişilebilirken yanlara yapışabilirler.
Benzer tipte bir filtreleme şablonu tasarlıyorsanız Amazon'un stratejisini kesinlikle incelemenizi öneririz. Sitelerini hiç bitmeden optimize ettiler, bu yüzden dikey sıralama bağlantılarının iyi çalıştığına inanmak için birçok sebep var.
6. Çorum
Çorum en Web sitesi çok basit özelliklere sahip başka bir temiz dikey navigasyona sahiptir. Tüm-büyük harfli bağlantılar, koyu metin, net vurgulu stilleri ve ana sayfaya karşı güçlü bir kontrast.
Dikey gezinmeyi tasarlarken bu en büyük özelliklerden biridir. Genellikle dikey gezinme çubuğu ve sayfa içeriği arasında güçlü bir ayrım oluşturmak istersiniz. Bu durumda, üst taraftaki Çorum logolu daha açık bir arka plan rengi kullanılarak yapılır.
Ve mobil yanıt veren kullanıcılar bunun yerine, daha geniş olan ekranlar için bir alternatif olarak iyi çalışan bir açılır menü alırlar.
7. Nua Bisikletleri
Dikey gezinmeyi kullanmanın en iyi yollarından biri, tek bir sayfa düzenidir. Gibi bilgilendirme siteleri Nua Bisikletleri Her zaman içerikle dolu düzinelerce sayfaya gerek yok.
Dolayısıyla, bir dikey nav menüyle, animasyonlar ve özel sayfa alanları kullanarak bir kapriste içeriğe göz atmak çok daha kolay. Bu durumda, Nua Bikes nav, bu sayfadaki tüm içeriğe doğrudan bağlı olduğu için sayfaya karışıyor.
8. Michael Ngo
Tek sayfa dikey gezinme trendini takip eden başka bir site Michael Ngo'nın portföyü .
Hemen dikkatinizi çeken ve sizi içine çeken büyüleyici bir başlık imgesine sahiptir. Ancak, içerik, her biri üç farklı bağlantıdan (ev, iş ve iletişim) geçtiği için en ilgi çekici bölümdür.
Nav linkleri de kendi altyazılarına sahiptir, böylece bir bakışta bile neler yaptığını görebilirsiniz.
Unutulmaması gereken bir şey, sayfanın aşağı doğru kaydırılması sırasında nav'un sabit kalmasıdır. Bu, tüm bağlantıları daha küçük dikey menüde önemli olan herhangi bir noktadan erişilebilir tutar.
9. Medienstadt.koeln
Alman sitesi Medienstadt.koeln dikey navigasyon üzerinde oldukça farklı bir şey var. Onların nav, her zaman bir hamburger menünün arkasında gizli kalır, ancak hala ekranın tüm yüksekliğini kapsamaktadır.
Ayrıca, tipik en üst yatay nav'dan daha fazla bağlantı içerir. Bu mantıklı ancak bazı ziyaretçiler için kafa karıştırıcı olabilir.
Dikey stil hakkında en çok sevdiğim şey, ihtiyaç duyulana kadar masaüstlerinde bile sıkışmış halde kalması.
Verilen tartışmalar var keşfedilebilirlik sorunları Hamburger menüleri ile. Ancak bu ikonun hızla tanındığını düşünüyorum ve bu tasarım, hareket halindeki gizli dikey gezinmenin mükemmel bir örneğidir.
10. Metrick Sistemi
Reklam ajansı Metrick Sistemi navigasyonlarını basit ve noktaya tutar. Dikey stili takip ediyor ama bu yazıdaki diğerlerinden de çok farklı.
Birincil bağlantı tıklandığında sadece ek bağlantılar gösteren gizli açılır menüyü severim. Onların “dergi” linki iyi bir örnek. Yeni bağlantılar yan tarafa görünür ve tek bir tıklamayla görünmez.
Mobil kullanıcılar, ana bağlantının altında bu alt menü bağlantıları dışında benzer bir deneyim elde ederler. Ama bu nav çok küçük ve her ekran boyutu için çalışabiliyor.
Sarın
Dikey gezinme, ekstra ekran alanına dayanan sitelerde en iyi şekilde çalışır. Bunlar genellikle portföy siteleri, restoranlar, küçük işletmeler ve e-ticaret mağazaları içerir.
Ancak siteden bağımsız olarak, her zaman tasarımınıza dikey bir gezinme eklemeyi deneyebilirsiniz. Ve umarım bu örnekler sizi tel örgü ve mockup tasarımı için bazı harika fikirlerle başlatabilir.