Her Tasarımcı, Whitespace Hakkında Bilmeniz Gereken 4 Şey
Boşluk (veya “negatif alan”), bir sayfanın nesnelerinin arasında ve çevresinde boş bir boşluktur. Grafiksel kullanıcı arayüzlerinde boşluk karakterleri:
- Kenar boşlukları, dolgu malzemeleri ve oluklar
- Görüntü ve grafik nesneleri etrafında boşluk
- Metin içeriğinde satır aralığı ve harf aralığı
Bazı insanlar beyaz boşlukları değerli bir ekran mülkünü boşa harcayabilirlerse de, bu tasarımda vazgeçilmez bir unsurdur. Aslında, boşluk, içerik kadar önemlidir. Jan Tschichold'un dediği gibi:
Boşluk aktif bir unsur olarak görülmeli, pasif bir arka plan değil
Tüm iyi kullanıcı arayüzleri, tüm sayfa öğelerine yukarıdan aşağıya doğru boşluk değerlerini dahil eder. Bir sayfadaki beyaz boşluklar, UI öğeleri tarafından işgal edilen alan kadar önemli olabilir, çünkü metin, düğmeler, logolar ve diğer nesneler solumaya ihtiyaç duyar.
Bu yazıda, tasarımlarınızdaki boşlukları temiz, düzenli bir his vermek için nasıl kullanacağınızı bulacaksınız:
1. Metin Okunabilirliğini Geliştirin
Whitespace, ziyaretçilerin gördüğü metin miktarını bir kerede azaltarak daha kolay okumayı başarabiliyor. Boş alan eksikliği (karmaşık sayfa), kullanıcıların içeriği okumasını istemiyor. Öte yandan, düzgün bir şekilde kullanılan beyaz boşluk, metin algısını% 20'ye kadar artırdığı kanıtlanmıştır. Dmitry Fadeyev .
Metin içeriğinizi optimize ederken akılda tutulması gereken iki önemli nokta, paragraf kenar boşlukları ve satır aralığıdır (metninizdeki her satır arasındaki boşluk). İkincisi, bir metin gövdesinin okunabilirliğini önemli ölçüde artırabilir. Genel olarak, boşluk ne kadar büyük olursa, kullanıcının okuma sırasında sahip olacağı daha iyi deneyim (çok fazla satır aralığı çizginin kesilmesine neden olabilir).
2. İlişkilerin Netleştirilmesi
Tüm düzen, parçalarının toplamından kaynaklanır ve içerik ilişkileri çevreleyen boşluklarla tanımlanır. Yakınlık Yasası birbirine yakın nesnelerin benzer göründüğünü belirtir. Beyaz boşluk, bu durumda görsel bir işaret olarak hareket eder. Aşağıdaki resme bir göz atın:
Gestalt yasaları, yakın mesafedeki nesnelerin bir “birim” olarak görüneceğini dikte eder; beyaz alan görsel bir işaret olarak davranır.
Bu resmi gören hemen hemen herkes, sadece 12 daireden ziyade iki daire grubunu fark eder. Daireler hepsi aynıdır ve aralarındaki tek fark, onları ayıran boşluk miktarıdır.
Öğeleri, aralarındaki boşluğu azaltarak ve bunlar ile sayfadaki diğer öğeler arasındaki boşluğu artırarak birlikte gruplandırmak mümkündür.
Kullanıcı arayüzleri için bu, yakın mesafedeki nesnelerin bir “birim” olarak görüneceği anlamına gelir. Örneğin, web formları bağlamında, bir nesne oluşturmak için etiketleri ilgili alanlara yakın yerleştirmek iyi bir fikirdir. Etiketler alanlara daha yakın yerleştirildiğinde, aralarındaki ilişki kullanıcılar için çok açık hale gelir.
Etiketler, ilgili oldukları alanlara daha yakın yerleştirildiğinde, bilgi çok daha açık bir şekilde iletilir.
3. Dikkat Çekmek
Tasarımcılar bir bakışta en önemli olanı iletmek için boşlukları kullanabilirler. Uzaklık ve dikkat arasında bir ilişki var; Daha büyük mesafe dikkat çekiyor. Diğer unsurların eksikliği sadece mevcut unsurları daha fazla öne çıkaracaktır. Avantajlarınız için bir boşluk kullanmak mümkündür - belli sayfa öğeleri üzerinde gezinen gözler çizmek. Belirli bir içerik segmentinin etrafındaki ekstra dolgu, kullanıcıların dikkatini ekrana çekmekten başka bir şey olmadığı için bu alana dikkat çeker. Böylece, bir nesnenin etrafındaki daha fazla boşluk, göze daha çok çekilir.
4. Görsel Hiyerarşi Oluşturun
Beyaz boşluk uygun şekilde kullanıldığında, bir sayfanın genel bir akış ve denge oluşturmasına olanak tanır, bu da tasarımın amacını iletmeye yardımcı olur. Boşluk, genel hiyerarşiyi destekleyebilir. Simetri veya asimetri üretir.
Simetri hafıza ve uyum oluşturur:
Mailchimp, gördüğünüz gibi, tasarımlarında beyaz alanın büyük bir savunucusu. Ziyaretçiler ana sayfayı tararken, “Ücretsiz Kaydolun” butonu hemen dikkat çekiyor. Simetri kullanarak, eşit derecede önemli sağ ve sol kısımlarla dengeli bir düzen oluşturmak mümkündür.
Asimetri dikkat çekerken:
Asimetri, sayfanın belirli bir alanına dikkat çekmek için mükemmeldir.
Bir eleman asimetrik boşluk kullandığında, diğer çevre unsurlara karşı göze çarpar.
Sonuç
Boşluk boşa harcanan bir alan değil, güçlü bir tasarım aracı. Görüntü, metin veya diğer kullanıcı arabirimleri nesnesi tarafından işgal edilen alan kadar önemli olabilir, çünkü boş alan bile bir amaca hizmet eder ve bir düzenin görsel bütünlüğünü destekler.
Her ne kadar basit bir konu gibi görünse de, boşlukların uygulanmasının hem sanat hem de bilim olduğu için, beyazın ustalaşması zor olabilir. İyi bir düzen oluşturmak için ne kadar boş alanın kullanılması gerektiğini anlamak gerçekten pratik gerektirir.