Beyaz alanlar, içeriği açıkça ayırdıklarında, bilgiye öncelik verdiklerinde ve her eylemin nefes almasına izin verdiklerinde bir siteyi geliştirir. Bunlar mutlaka beyaz alanlar değildir: terim, renginden bağımsız olarak herhangi bir boş alanı ifade eder. İyi dozlanmış, okumayı kolaylaştırır ve göze rehberlik eder. Kötü dozlanmış, tam tersine boşluk izlenimi verebilir veya sizi gereksiz yere kaydırmaya zorlayabilir.
Doğru yöntem içeriğin önceliğinden başlamak ve daha sonra metinler, haritalar, resimler, bölümler ve düğmeler arasında tutarlı bir aralık ölçeği uygulamaktır.Amaç "boşluk eklemek" değil, sayfanın anlaşılmasını kolaylaştırmaktır.
Siteniz yoğun veya gezinmesi zor görünüyor mu?
Dışarıdan görünüm, yararlı bilgileri kaldırmadan havalandırılacak alanları belirlemenize olanak tanır.
Web tasarımında "beyaz alan" dediğimiz şey nedir?
Beyaz boşluk ya da negatif boşluk, bir elementin etrafında serbest bırakılan alandır.Beyaz, lacivert, bej olabilir veya sitenin arka plan rengini alabilir.Tamamlayıcı iki formda bulunur.
Mikrouzay
Bir metnin çizgilerini, ifadesinin bir simgesini, bir haritanın kenarlarının içeriğini veya bir formun iki alanını ayırır.Bu küçük sapmalar okunabilirliği doğrudan etkiler.
Makrouzay
Büyük grupları ayırır: bir banner ve bir ürün seçkisi, iki bölüm veya bir argüman ve eylem çağrısı Sayfanın genel ritmini yapılandırır.
Beyaz alanlar neden bir siteyi geliştirir?
Ziyaretçi kriterlerini veriyorlar.Önceki bölümden izole edilmiş ancak tanıttığı paragrafa yakın bir başlık, hemen yeni bir bloğun başlangıcı olarak anlaşılıyor.Uzayla çevrili bir düğme, onu devasa hale getirmeye gerek kalmadan çıkıyor.
- Okuma: satırlarda, paragraflarda ve listelerde gezinmek daha kolaydır.
- Hiyerarşi: önemli içerik ikincil bilgilerden ayrılır.
- Anlamak: bağlantılı öğeler yakın görünür, farklı konular ayrılır.
- Mobil konfor: dokunma bölgeleri daha az sıkıdır ve tıklama hataları azalır.
- Algı: düzenli bir kompozisyon genellikle daha kontrollü ve profesyonel görünür.
Beyaz alan kullanımına ilişkin üç somut örnek
Bu şematik gösterimler, aralık bırakmanın bir sayfanın algısını nasıl değiştirdiğini, içeriğini değiştirmeden gösterir. Gerçek müşteri projelerini temsil etmezler.
Örnek 1: Gezinmesi daha kolay bir ürün sayfası
Başlık, fiyat, haberler ve hisse senedi birbiriyle yarışıyor.
İlgili unsurlar yakın dururken düğme temiz nefes alma avantajından yararlanır.
Örnek 2: Bir sayfanın daha iyi ayrı bölümleri
Gruplar aynı bloğa ait gibi görünüyor ve hiyerarşi bulanıklaşıyor.
Bölümler arasındaki boşluk iç boşluktan daha büyüktür: yapı hemen anlaşılabilir.
Örnek 3: Mobil cihazlarda konforu artırın
İçerik neredeyse kenarlara dokunuyor ve eylem metinle harmanlanıyor.
Yan kenarlar, aralıklar ve düğme alanı rotayı daha belirgin hale getirir.
7 adımda beyaz alan nasıl kullanılır?
- Bilgileri sınıflandırın. Ziyaretçinin ne görmesi, anlaması ve sonra yapması gerektiğine karar verin.
- Birlikte gidenleri gruplayın. Fiyat ve satın alma düğmesi aynı sete ait gibi görünmelidir; iade koşulları ikincil bir blok oluşturabilir.
- Farklı grupları ayırın. İki bölüm arasında, başlık ile metni arasında olduğundan daha geniş bir alan kullanın.
- Basit bir ölçek seçin. Örneğin temaya ve tipografiye uyum sağlamak için başlangıç noktası olarak 8, 16, 24, 32, 48 ve 64 piksel.
- Bileşenlerin iç kısmına dikkat edin. Bir kartın kenarları, başlığı, görüntüsü ve düğmesi arasında düzenli bir kenar boşluğu bulunmalıdır.
- Dikey ritmi kontrol edin. Her yere aynı geniş alanı uygulamak yerine alternatif kompakt diziler ve keskin nefesler.
- Gerçek ekranlarda test edin. Bilgisayar ve telefondaki tüm sayfayı kontrol edin, sadece editördeki izole bir bölümü değil.
Sayfanın türüne bağlı olarak hangi alanlar sağlanmalıdır?
| Sayfa | Öncelikli olarak havalandırılmak | Dikkat noktası |
|---|---|---|
| Ev | Söz, görsel, faydalar ve seçimler | Çok yüksek olan bölümlerden kaçının ve ürünlere erişimi geciktirin |
| Koleksiyon | Başlık, filtreler, ızgara ve ürün kartları | Kartları paketlemeden yeterince görünür ürün bulundurun |
| Ürün sayfası | Galeri, fiyatlar, çeşitler, satın alma ve reasürans | Belirleyici bilgileri düğmeye yakın tutun |
| Sepet | Ürünler, toplam, teslimat ve doğrulama | Ana düğmeyi ikincil bloklarla uzaklaştırmayın |
| Makale | Paragraflar, başlıklar, listeler ve görseller | Uzun metin satırlarının genişliğini sınırlayın |
Mobil cihazlarda beyaz alan nasıl yönetilir?
Mobil bilgisayarın basit bir sıkıştırılmış versiyonu olmamalıdır.genişlik eksik, ancak yükseklik kullanılabilir durumda kalıyor: bloklar genellikle bir sütunun üzerinden geçiyor ve dikey aralıkları zorunlu hale geliyor.
- Ekranın kenarlarına metin yapıştırmadan yan kenar boşluklarını azaltın.
- Sayfayı gereksiz yere uzatan çok büyük dekoratif alanları azaltın.
- Düğmeler, alanlar ve dokunmatik bağlantılar arasında net bir ayrım sağlayın.
- Büyük masaları okunması kolay dikey kartlara dönüştürün.
- Hızlı bir şekilde birkaç satır kapladıkları için uzun başlıkları kontrol edin.
Öncelik rotanın devamlılığıdır. 'a adanmış rehberimiz shopify'daki mobil deneyim ayrıntılar diğer yararlı kontroller.
En yaygın aralık hataları
Çok az yer
- Kenarlara yapıştırılmış yazılar
- Kartları ve düğmeleri ayırt etmek zordur
- Görünür kırılma olmayan bölümler
- Reasürans bilgileri birikti
Fazla yer
- Niyeti olmayan geniş boş alanlar
- Uzaktan ilgili bilgiler
- Aşırı kaydırma
- Bitmemiş sayfa baskısı
Aralıkları iyileştirmek için hangi hizmeti seçmelisiniz?
Hızlı bir teşhis
Onu seç ücretsiz mini denetim öncelikle görünür ana sorunları tespit etmek ve önceliği belirlemek istiyorsanız.
İncelenecek mevcut bir mağaza
La shopify yeniden tasarla aralık daha büyük bir yapı, görüntü veya yol sorununun parçası olduğunda uygundur.
Yeni bir proje
La shopify mağaza oluşturma hiyerarşi ve aralık sisteminin tasarımla entegre edilmesini sağlar.
Shopify dışında bir site
Bir vitrin veya başka bir web projesi için servisine danışın profesyonel web sitesinin oluşturulması.
Kapsam, son tarih ve fiyat hizmete ve ilgili sayfalara bağlıdır SiteQuiVend, hizmet sayfalarında yayınlanan formülleri sunar ve başlamadan önce uygun çerçeveyi onaylar.
Daha net bir düzene mi ihtiyacınız var?
Sitenizi ve geliştirilecek sayfaları uygun hizmete yönlendirilecek şekilde sunun.
Beyaz boşlukları kontrol etmek için kontrol listesi
- Her bölümün tanımlanabilir bir amacı vardır.
- İlgili öğeler görsel olarak birlikte gruplandırılmıştır.
- Ayrı bölümler daha güçlü bir ayrılığa sahiptir.
- Kartların iç kenar boşlukları düzenlidir.
- Paragraflar çok yoğun bloklar oluşturmaz.
- Ana düğmenin nefes alma bölgesi vardır.
- Yan kenarlar mobil cihazlarda rahat kalır.
- Hiçbir büyük boşluk, eyleminden bilgi kesmez.
- Sayfa tüm uzunluğu boyunca ritmik kalır.
- Rendering 375 piksel genişliğinde kontrol edildi.
Web sitesi beyaz alanı SSS
Beyaz bir boşluk beyaz olmak zorunda mı?
Hayır. Bu içeriğin etrafında veya arasında boş bir alandır.Görsel kimlikle tutarlı herhangi bir arka plan rengi kullanabilir.
Beyaz alanlar yer mi harcıyor?
Yüzey alanını kullanırlar, ancak kıyaslama sağlarlar.Sadece ilgili öğelerden uzaklaştıklarında veya fayda sağlamadan sayfayı uzattıklarında sorunlu hale gelirler.
İki bölüm arasında hangi marjı kullanmalıyım?
Evrensel bir değer yoktur.Tipografiye ve temaya uyarlanmış tutarlı bir ölçek, izole edilmiş bir sayıdan daha önemlidir.Bölümler arasındaki boşluk, bir başlığı metnine bağlayan boşluktan daha büyük olmalıdır.
Mobilde az mı çok yer mi açmalıyız?
Yan kenarlar genellikle daha küçüktür, dikey aralık ise içeriği ayırmak ve dokunsal etkileşimleri kolaylaştırmak için yeterli kalmalıdır.
Bir sayfanın çok havadar olduğunu nasıl anlarsınız?
Ziyaretçinin bilgileri düğmelerine bağlamak için çok fazla kaydırma yapması gerekiyorsa, ilişkili bloklar bağımsız görünüyorsa veya boş alanların hiçbir işlevi yoksa, aralık muhtemelen aşırıdır.
İçeriği silmeden bir sayfa nasıl yayınlanır?
Bilgileri temaya göre gruplandırın, paragrafları kısaltın, listeleri kullanın, tutarlı kartlar oluşturun ve doğal kaldığında akordeonlardaki ikincil bilgileri ortaya çıkarın.
Beyaz alanlar satışları otomatik olarak iyileştirir mi?
Hayır. Yolculuğu daha net hale getirebilirler, ancak satışlar aynı zamanda arz, trafik, fiyatlar, güven, içerik ve alışveriş deneyimine de bağlıdır.
Sadece bir Shopify temasının aralığını geliştirebilir miyiz?
Hedeflenen ayarlamalar için evet, ancak yapı, sayfa şablonları veya yol da sorunluysa daha geniş bir revizyon tercih edilir.
Daha iyi rehberlik etmek için alan yaratın
İyi aralık, kendine dikkat çekmeden yapıyı belirgin hale getirir.İlgili içeriği gruplayarak başlayın, yol boyunca adımları açıkça ayırın ve düzenli bir ölçek uygulayın. Ardından bilgisayarda ve mobil cihazlarda her şeyi kontrol edin.
Sayfa bu ayarlamalara rağmen yüklü kalırsa, sorun hiyerarşide veya bilgi hacminde olabilir SiteQuiVend, hedeflenen düzeltmenin, Shopify'ın yeniden tasarlanmasının veya yeniden tasarlanmasının gerekli olup olmadığını belirlemenize yardımcı olabilir.
