Sabit Konum Web Öğeleri
Sabit konum elemanlarının kullanımı popülerlik kazanmıştır ve web üzerinde ortak bir unsur haline gelmiştir.
Bu teknik, sayfanın geri kalanı kaydırılırken tarayıcıdaki bazı öğelerin sabitlenmesini içerir. Çoğu zaman bunu bir sitenin ana navigasyonu dahil olmak üzere başlık öğeleri üzerinde yaptığımızı görürüz. Bu aynı zamanda, sayfa navigasyonunun her zaman mevcut olması gereken tek sayfa sitelerinde popüler bir yaklaşımdır. Ayrıca, bu tür teknikleri kullanarak yerinde kilitlenmiş çeşitli web sayfalarını da buluyoruz.
Sayfadaki bir öğeyi düzeltmenin iyi bir şey olduğunu bulabileceğimiz birçok durum var, ama hepsi tek bir amaç için geri geliyor. Hemen hemen tüm bu durumlarda, sabit öğe sayfanın önemli bir bölümünü kullanıcıların önünde her zaman korur.
Bu öğelerin önemi değişmektedir, ancak bir dereceye kadar temel amaç, sayfanın bir kısmını sürekli olarak görünüm limanında tutmaktır.
Bu tekniği kullanmayı düşündüğünüz gibi, neden ve nasıl yaptığınızı dikkatlice incelemenizi şiddetle tavsiye ederim. Sayfanızın hiçbir bölümü hareket etmiyorsa, otomatik olarak çok fazla ilgi çekeceğini unutmayın. Bu yüzden işe koyduğunuzdan emin olun. Hadi içeri girelim!
Sabit başlıklar
Sabit başlıklar, en yaygın sabit konum elemanıdır, o kadar ki çok fazla örneklemeden kaçınmak için bu koleksiyona eklemem gerekiyordu. Çoğu zaman, site gezintilerinin mevcut olduğundan emin olmak için başlık sabittir. Daha önce de belirttiğim gibi, bu tek bir sayfa web sitesi ile uğraşırken özellikle doğrudur.
Sabit başlıklarla nasıl başa çıkabileceğiniz konusunda çok ince farklılıklar vardır, bu nedenle bu yaklaşımla ilgili çeşitli fikirler için bazı örnekleri inceleyeceğiz.
Çiller ve yakışıklı
Bu tekniğin klasik bir örneğini düşünürdüm. Sitede gezinirken başlık sabitlenir. Bu, logo ve ana gezinme öğelerini içerir. Ayrıca, tek bir sayfa web sitesidir. Ana gezintiye tıkladığınızda sayfanın uygun bölümüne kaydırılır.
Böyle bir durumda, yapışkan başlık, tek sayfa sitesini doğrudan doğruya taramaya yarar. Ayrıca, birçok tek sayfalık sitenin daha can sıkıcı yönlerinden birini de önler: Gezinme yalnızca sayfanın en üstünde olduğunda, ancak çağlar boyunca kaydırılır. Bu şekilde, sabit başlık sadece güzel görünmekle kalmaz, aynı zamanda sitenin ana marka ve ön cephesini de korur, aynı zamanda sitenin kullanımı kolay olmasını sağlar.
Mapalong
Bu örnek, sabit bir başlık kullanır, ancak kendi küçük twist'i kullanır. Bu site aynı zamanda tek bir sayfa düzenidir, ancak sayfa navigasyonunda yoksundur. Bu durumda, sabit başlık ana logoyu ve her ikisi de çok önemli unsurları içeren bir düğmeyi içerir. Ancak, bundan daha da iyisi, sayfayı aşağıya kaydırdığınızda, ana harekete geçirici mesaj, görünümden dışarı çıktıkça başlığa gider. Sonuç olarak, sitenin birincil dönüşüm noktası her zaman görünür. Ve yine de, bundan daha da iyisi, görüşmeye bırakılan harekete geçirme eyleminin eylemi, kullanıcının dikkatini ona çekerek, tasarımdaki dönüşüm noktasını daha da vurgulamaktadır! Benim düşünceme göre yaklaşımın parlak bir kullanımı.
Kisko Labs
Sabit pozisyon başlığına bir başka akıllıca bir yaklaşım, slayt ve sopa dediğim bir tekniktir. Kisko Labs sitesinde sadece başlıkların bir kısmı yapışıyor. Siz sayfayı aşağı kaydırırken, ana gezinme de kaydırır. Bu, ekranın üst kısmına çarpana kadar, sonra oraya yapışıyor. Böylece, gezinme normal olarak kayar (veya kaydırır), sonra üstüne yapışır.
Burada gerçekten güzel olan ekstra bir ayrıntı, gezinmenin sayfanın şu anda görüntülediğiniz bölümünün altını çizmesidir. Bu, tek bir sayfa tasarımı olduğundan, sayfanın o anki bölümünün herhangi bir navigasyonun normal “geçerli sayfa” durumu ile yaptığınız gibi tanımlanmış olması yararlı olacaktır.
Kıyameti koparmak
Bu tarzın yaygın bir uzantısı, yapışkan tabakaya bir miktar saydamlık katmaktır. Burada bulacağınız örneklerin çoğunda, bu sadece yapışkan öğeye eşit olmayan bir kenarın olmasıyla yapılır. Bazen bu, sabit bir çubuktan dışarı çıkmış bir elemanın, diğer zamanlarda da pürüzlü bir kenara sahip olmasıyla yapılır. Çatı Alanını Yükseltme üzerine, çok organik ve neredeyse rastgele bir sınırla gerçekleştirilmiştir.
Bu örnekte ilginç bir görsel sonuç buluyoruz. Üst üste binen öğelerin kullanımıyla site, içeriğin başlığın arkasında kayarken görsel derinlik oluşturur. Bu durum ayrıca ayın arka planında da sabitlenerek vurgulanmaktadır. Sonuç, üç görsel katmandır. Bu derinlik, büyük bir görsel ilgi düzeyi ekler ve görsel olarak çarpıcı bir tasarım yaratabilir.
Suya Hoş Geldiniz
Suya Hoş Geldiniz oldukça sıradışı bir yaratılıştır. Bu site hakkında çok az web düzeni ve tasarım normlarına uyar. Bu yazının konusu için özellikle ilgi çekici olan başlıktır. Bu sitede sabit eleman siteye seyir aracı olarak hizmet eder. Ancak birçok yönden daha çok bir araç çubuğu hissi var.
Sabit başlıkların ek örnekleri
İşte bazı sabit başlık örnekleri. Burada çok çeşitli stilleri ve ince varyasyonları bulacaksınız.
Tam Cai
Marlon Messam
Büyük Göz Yaratıcı
Balencic Yaratıcı Grubu
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Daha İyi Uygulamalar Yapın
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb Gitarlar
Trussystem
Sabit Altbilgiler
Sabit başlığa belki de en belirgin olanı sabit altbilgidir. Bu gibi durumlarda, sayfanın altbilgisi ekranın altına yapışır. Kullanıcı kayarken, eleman yerinde kalır.
Diğer herhangi bir sabit öğe gibi, bir odak noktası oluşturmak hala birincil hedeftir. İlginçtir ki, bunlar gibi altbilgilerle olsa da, çoğunlukla birincil hedef olan ikincil bir işlevle ilgilidir.
Kurşunsuz Grup
Kurşunsuz Grup sitesi bunun en iyi örneğidir. Burada sabit altbilgi, sitenin ana amacına göre eylem odaklı ve grev içeren öğeler içerir. İlk olarak, bu çubuktaki tüm öğelerin kullanıcının yapabileceği şeyler olduğunu unutmayın: bunları sosyal medyada tanıtın, bir telefon görüşmesi yapın veya e-postayla gönderin. İkincisi, ajansın büyük ihtimalle sizin almanızı istediği birincil eylem öğeleridir. Ya onları tanıtmanı ya da onlarla iletişime geçmeni istiyorlar. Bunlar, böyle bir siteye sahip olmanın başlıca nedenleridir. Bu yüzden onları yerinde sabitlemek çok mantıklı olacak.
Envato
Envato sitesi ayrıca sabit bir altbilgiye sahiptir. Burada bar, sitenin ana sol tarafındaki ilginç bir şekilde buraya taşınan birincil logosunu içeriyor. Açıkçası, Envato gibi bir marka için bu bir sorun değil. Ayrıca, sizi çeşitli web özelliklerine başlatan bir dizi açılır menüyü bulacaksınız. Bu basit işlev onların gerçek amacıdır. Aslında, bu işletme profili sayfasının gerçekten insanların nerede bitmesini istemediklerini söyleyemeyebilirsiniz. Bu nedenle, sizi içerik sitelerine geri götürme konusuna odaklanmak önemli ve kaçınılmazdır.
Kiyuco
Bunun gibi birçok site için e-posta pazarlama programları kritik öneme sahiptir. Bu şekilde, kayıt formunu belirgin bir şekilde vurgulayan sabit bir altbilgiye sahip olmak, bu tür posta listelerini büyütmenin uzun bir yolunu bulabilir. E-postayla pazarlama, sitenizi daha uzun bir süre boyunca tanıtmanıza ve daha etkili bir şekilde müşterilerinizi takip etmenize yardımcı olabilir mi? Eğer öyleyse, belki bu gibi sabit bir altbilgi, harika bir araç olacaktır.
Sabit konumlu kenar çubukları
Bir web sayfasının kilitleme öğeleri, en popüler olsalar bile, üstbilgiler ve altbilgilerle sınırlı değildir. Sabit bir konum kenar çubuğunun yakın bir saniyedir.
Sabit yer kenar çubukları genellikle bir başlıkta bulacağınız şeylere çok benzer bilgiler içerir. Buna logolar, navigasyon ve sosyal medya araçları gibi şeyler dahildir. Bu yaklaşımı kullanmak istiyorsanız göz önünde bulundurmanız gereken bazı örnekler.
Jorge Rigabert
Bu muhteşem site, işteki stilin mükemmel bir örneğidir. Burada yan bar, birincil markalama ve gezinme seçenekleri sitelerini içerir. Bu kenar çubuğu yaklaşımı harika çünkü sayfa gezinirken gezinmeyi de görüntülemeye devam ediyor, ancak içerik hareket ederken kesişmiyor. Bu ince bir ayrım olsa da, inanılmaz derecede düzgün bir arayüz oluşturur. Bu gibi siteler basit görünen, ancak bir araya getirilmesi inanılmaz derecede zarafet gösterir.
Daha Tehlikeler Daha Kahramanlar
Bu sitenin çalışma şeklini gerçekten çok seviyorum. Kenar çubuğundaki sabit elemanlar site sahiplerinin almanızı istediği temel işlevlerdir. Müziği duymanızı istedikleri her şeyden çok daha fazlası! Bu nedenle, ekranın önde gelen ve kalıcı olarak “oynat” özelliği hazır ve beklemede. Sitede daha kritik bir öğe hayal bile edemiyorum ve göze çarpan şekilde görüntülenmesi sadece iyi bir anlam ifade ediyor. Ve bunu sevindirici bir şekilde sunulmadığı için sevmeniz gerekir; otomatik oynatmaz bile. Bu cazibeyi kontrol eden tasarımcıya Kudos.
Vay canına
Bazen belirli bir işlevi destekleyen tek bir yapışkan eleman yaratmak arzu edilir. Bunu sitenize ekleyebileceğiniz çeşitli geri bildirim ve destek hizmetleriyle gördük. Bu durumda, sitenin yanına bir Facebook benzeri düğme yapıştırılmıştır. Sayfayı kaydırırken yerinde kalır. Bu, elbette, kullanıcının dikkatini unsura çeker ve bunları kullanmaya teşvik eder. Bunun, sosyal yönlendirmelerin bu gibi bir web tabanlı işteki gücünü ve önemini gösterdiğini söyleyebilirim.
Bir yan not olarak, sitenin çok popüler hale gelen 10 piksel üst sınırındaki bükülmesini seviyorum. Burada öğe sadece tarafından kaydırılır. Değil dramatik bir animasyon, ama bu konuda bir şey eğlenceli ve siteye bir ilgi ve yaşam katmanı ekler.
Şişman Adam Kolektifi
Bu site, önceki örneklemlerimizde bulduğumuz tüm kalıpları takip ediyor. Ancak basit bir animasyon nedeniyle büyük bir şekilde öne çıkıyor. Sayfayı aşağı kaydırırken, yan çubuktaki karakter hareket eder ve yürür. Bu eleman, siteyi benzersiz ve unutulmaz bir kategoride tek başına yükseltir. Nasıl bu kadar önemsiz bir şey böyle bir etkiye sahip olabilir. Bu basit siteyi alır ve muhteşem bir şekilde doludur. Arkasındaki ajansın, işlerini herhangi bir müşterinin öleceği son rötuşları ile parlatmayı sevdiğini gösteriyor.
Daha sabit kenar çubuğu öğeleri
İşte işte sabit kenar çubuklarının bazı ek örnekleri.
Aptal Şiirler
Colin McKinney
muhbir
Bu Marcela.
Janette D. Konseyi
Sadece logo
Sık sık bulamadığımız bir yaklaşım sabit bir konum logosudur. Bu örnekte, sayfa kaydırıldığında bile logo kilitliydi. Bu atipik yaklaşım, sitenin adını ve merkezini tutar. Bunun gibi tasarımlar göz önünde bulundurulması ilginç olabilir. Bunu neden yaptığını tahmin etmek gerçekten zor, ancak sadece ana markanın kritik öneme sahip olduğunu varsayabiliriz. Belki de birçok benzer rekabet var? Belki de sadece isimlerini hatırladığından emin olmak isterler? Ne olursa olsun, projeniz için geçerli ise akılda tutulması gereken ilginç bir tekniktir.
"Başa dönüş"
Gerçekten uzun sayfalar söz konusu olduğunda, eklenecek hoş bir özellik sayfanın üst kısmına götüren bir bağlantıdır. Ve yapışkan öğelerle, sayfayı kaydırırken aynı yerde duran böyle bir bağlantı oluşturabilirsiniz. Bu, burada verilen örneklerin tam olarak ne yaptığıdır.
Çoğu zaman böyle bir eleman yerleşimin hemen dışına yerleştirilir. Bu şekilde, tasarımdaki başka bir şeyle etkileşime girmez ve sayfa geçiş yapar. Ayrıca, bu öğelerin genellikle yukarıyı gösteren bir ok olduğunu fark edeceksiniz - belki de dahil edilmesi gereken açık bir unsurdur, ancak kullanıcıları amaçlarına göre hızlı bir şekilde bilgilendirirken akılda tutulması çok önemlidir.
Bu yaklaşım, yapışkan bir başlık kavramını biraz tersine çevirir. Bu durumda navigasyon çoğunlukla sadece sayfanın en üstünde olur. Bu nedenle, kullanıcıların sitenin içeriğinde hızla gezinmesine olanak tanıdığı için geri dönüş önemlidir. Tek sayfa siteleri durumunda bu biraz can sıkıcı bir ekstra adım olabilir.
Overlapps
Bu örnek, sayfanın en üstünde olmadıkça üst öğeye dönüşü göstermediğinden hoş bir ekstra dokunuş gösterir. Belki de içerecek açık bir ayrıntıdır, ancak bulacağınız gibi her zaman böyle değildir. Bu yaklaşımdaki iktidarın bir kısmı, ortaya çıktığı gerçeğin, bir kullanıcının bunu fark etmesini sağlamak için ona dikkat çekmesidir.
İki örnek daha
Aşağıdaki iki örnek, her zaman görülebilir olsalar da, üst düğmelere geri dönerler. Bu elemanın ekranın sağ alt köşesine en sık yerleştirildiği ilginç. Tasarımın en göze çarpan kısmı değildir, bu yüzden ikincil doğası böyle daha az önemli bir öğe için iyidir. Elbette, elemanın kenarları kırarak ve cesur renkler ile vurgulanmasına rağmen dikkatinizi çekeceksiniz. Hikayenin moralinin tasarımın kullanımındaki önemini düşünmek olduğunu düşünüyorum. Tüm farkı yaparsa, göründüğünden emin olun.
Joker Düşünme
Dusanka ve David
Çoklu sabit elemanları
Bu son örnekte, sayfada birçok sabit öğeye sahip bir siteye göz atacağız. Birçok açıdan bu site, web tasarımı ve düzeni normlarının çoğunu kırar. Sol üst köşedeki logo haricinde, neredeyse hiçbir yerde olağan bir yer yoktur.
Bu makaleye dayanarak, sabit kenar çubuğu gibi aşina olduğumuz bazı öğeler buluyoruz. Ancak, diğer iki kişinin tipik olmaktan uzak olduğunu fark edeceksiniz. Örneğin, bazı site bağlantıları içeren sabit altbilgi. Gizlilik politikaları ve şartlar ve koşullar gibi şeyler nadiren bir sayfada önemli bir yer tutmaktadır. Ancak burada, diğer bazı oldukça önemli gezinme bağlantıları ile sayfaya yapıştırılmış bulabilirsiniz.
Kullanıcı hesabı bağlantılarını sağ üst köşeye nasıl yerleştirdiklerini gerçekten çok seviyorum. Sıklıkla yerleştirildikleri yer burasıdır, ancak bu durumda olduğu gibi kaydırmadan bağımsız olarak orada nadiren sabittirler. Bunu beğendim çünkü sitenin üye özelliklerine her zaman hızlı bir şekilde erişebilmenizi sağlar; belki de başka uygulamalar ve web sitelerinin faydalanabileceği bir şey.
Tüm bu sitenin hepsi normal olmaktan uzak, ama bu konuda bir şey inanılmaz iyi çalışır ve sevmek kolaydır. Sıra dışı düzeni, kullanımı zorlaştırmaz ve sonuç, farklı ve zevkli bir deneyimdir.
kaynaklar
Son olarak, bu turda bazı kullanışlı bilgiler eklemek istiyorum. jQuery Bir sayfada belirli bir yere sabitleme elemanlarının ihtiyacını karşılayan eklentiler. Sahip olabileceğiniz çeşitli ihtiyaçlara uyacak farklı özellikler sunuyorlar, bu yüzden doğru uyumu bulmak için hepsini araştırdığınızdan emin olun.
Büyük bir şey, hepsi jQuery eklentileri ve uygulamak için süper basit olmasıdır. Bu stili üretmek istiyorsanız, bunlar en azından kolay bir iş çıkaracaktır.
Mirket
Mirket Bu iş için en sevdiğim araçlardan biridir. Gizlenebilme özelliği, tanıtım içeriğini veya e-posta kayıt formları gibi önemli özellikleri görüntülemek için mükemmel bir araç haline getirir.
Stickyscroll
Stickyscroll sayfanın üst kısmına gelinceye kadar ilerleyen öğelerin oluşturulmasını sağlayan bir eklentidir ve sonra yerine yapışır. Bu eklenti ayrıca, öğelerin alt sınırı vererek altbilgi bölgesine kaydırılmamasına yardımcı olur; emin olmak için güzel bir ekstra özellik.
Ara noktalar
Ara noktalar Bir kullanıcı bir sayfadaki belirli noktalara kaydırdığında jQuery olaylarını tetiklemenizi sağlar. Bu, navigasyonun sayfada kullanıcının konumuna uygun olarak vurgulamak veya değiştirmek istediğinizde kullanışlıdır. Ancak eğlence, bir sayfada yapabileceğiniz sayısız şey olduğu veya kullanıcı tarafından kaydırılıp etkileşime girdiği için tasarlanmadığı için bitmiyor.
Sonuç
Sabit elemanlar artık tasarımcıların çalışabileceği ortak bir unsur. Bu özellikleri ve tam tarayıcı desteğini gerçekleştirecek araçlar artık bir sorun değildir.
Bu şekilde, alet kemerinizde kalması ve zaman doğru olduğunda çizilmesi harika bir tekniktir. Bu tür yaklaşımlar elbette, her gün kullandığınız türden değil, etkili bir şekilde kullanıldığında inanılmaz derecede güçlü olabilir.