Çizgi ve dolu ikonlar: hangisi ne zaman
Çizgi ikonlar ve dolu ikonlar aynı fikri temsil edebilir, ancak bir arayüz içinde aynı şekilde davranmazlar. Aradaki fark sadece görsel zevk değildir. Çizgi kalınlığı, negatif alan, kontrast ve arka plan koşulları, insanların bir ikonu ne kadar hızlı tanıdığını ve o ikonun durumlar, ekran boyutları ve yoğun düzenler boyunca ne kadar iyi dayandığını etkiler. İkisi arasında seçim yapmak aslında netlik ve ton meselesidir.
Basitçe söylemek gerekirse çizgi ikonlar dış hatlar ve açık formlar kullanır, dolu ikonlar ise katı formlar ve daha güçlü bir görsel kütle kullanır. Çizgi stiller genelde daha hafif ve daha hassas hissettirir. Dolu stiller genelde daha cesur ve daha hızlı taranabilir hissettirir. Hiçbiri kendiliğinden daha iyi değildir. Doğru seçim, ikonun nerede göründüğüne, ne kadar küçüldüğüne ve arayüzün kullanıcıların önce neyi fark etmesini istediğine bağlıdır.
UI alan ve sadelik istediğinde çizgi ikonlar daha iyi çalışır
Bir ürün daha hafif bir dokunuşa ihtiyaç duyduğunda dış hat ikonları çoğu zaman daha iyi seçimdir. Araç çubuklarında, ayar panellerinde, ikincil eylemlerde ve bol boşluk içeren masaüstü arayüzlerinde daha sessiz dururlar. Bu yüzden çizgi ikonlar, temiz hissettirmek isteyip gürültülü görünmek istemeyen üretkenlik ürünlerinde, yönetim araçlarında ve editoryal arayüzlerde yaygındır.
Ayrıca minimalist, teknik ya da premium görsel sistemlere yönelen markalarla da iyi eşleşirler. Tipografiniz ince ve yerleşimleriniz ferahsa çizgi ikonlar genelde daha doğal oturur. ücretsiz çizgi ikon setlerini keşfedin gibi bir kütüphane, tutarlılıktan vazgeçmeden bu daha hafif görünümü istediğinizde kullanışlıdır.
Buradaki taviz okunabilirliktir. Küçük boyutlarda çizgi ikonlar, çizgiler fazla inceyse ya da iç boşluklar fazla açıksa ayrıntıyı hızlıca kaybedebilir. 32 pikselde zarif görünen bir çizgi ikon, 16 pikselde belirsiz hale gelebilir. Arayüzünüz hızlı tarama için minicik ikonlara dayanıyorsa daha dikkatli test etmeniz gerekir.
Dolu ikonlar küçük boyutlarda ve yüksek dikkat anlarında daha güçlüdür
Dolu ikonlar küçük boyutlarda genelde daha kolay okunur çünkü ayrıntı azalsa bile siluetleri görünür kalır. Bu da onları, incelikten çok tanıma hızının önemli olduğu mobil gezinme çubuklarında, kompakt eylem düğmelerinde, durum işaretlerinde ve bildirim yüzeylerinde özellikle etkili kılar. Birinin telefonda Ana Sayfa, Arama ya da Profil'i yarım saniyede bulması gerekiyorsa, dolu bir ikon çoğu zaman narin bir dış hattan daha iyi dayanır.
Dolu ikonlar koyu arka planlarda da daha iyi çalışma eğilimindedir. Güçlü formlar, özellikle arayüz katmanlı yüzeyler ya da parıltı efektleri kullandığında, ince çizgilere göre kontrastı daha güvenilir biçimde korur. Dış hat ikonları karanlık modda rafine görünebilir, ancak daha dikkatli bir renk sistemi ister.
Aynı nedenle dolu stiller, birincil eylemler ve mevcut durum göstergeleri için de çoğu zaman daha güvenli seçimdir. Birçok uygulamada tasarımcılar, pasif gezinme öğeleri için dış hat sürümünü kullanır ve öğe aktif olduğunda dolu sürüme geçer. Bu desen işe yarar çünkü durum değişimi, renk fark edilmeden önce bile anında anlaşılır. Daha güçlü durum geri bildirimi gerekiyorsa UI projeleri için dolu ikonlara göz atın ve ürününüzün kullandığı tam boyutlarda siluet gücünü karşılaştırın.
Durum değişimleri ve karışık stiller ancak net bir kural varsa işe yarar
Tasarımcılar aynı ürün içinde çizgi ve dolu ikonları karıştırır, ancak bu karışım ancak bir sistemi izlediğinde bilinçli görünür. En yaygın kural durum temellidir: pasif için çizgi, aktif için dolu. Bir diğer iyi kural hiyerarşi temellidir: ikincil araçlar için çizgi ikonlar, birincil gezinme ya da uyarılar için dolu ikonlar. Sorunlar karışım rastgele olduğunda başlar.
Burada Gestalt tarzı düşünme önem kazanır. Kullanıcılar benzer şekilleri, ağırlıkları ve davranışları kalıplar halinde gruplar. Bir ikon ailesi tutarlı oranlara ve çizgi mantığına sahipse arayüz bütünlüklü hissettirir. Setin yarısı havadar ve geometrik, diğer yarısı ise yoğun ve hantal ise ürün yama yapılmış gibi görünmeye başlar.
Duotone ikonlar da aynı kurala uyar. Bunları, ek derinliğin gerçekten yardımcı olduğu yerler için ayırmak en iyisidir; örneğin onboarding, özellik öne çıkarmaları, pazarlama panelleri ya da daha zengin boş durumlar. Yoğun ürün UI'sında tek renk ikonlar genelde daha iyidir çünkü taramaları daha kolaydır ve durumlar arasında tutarlı tutmaları daha kolaydır.
Panolar, veri yoğun ürünler ve mobil UI farklı öncelikler ister
Panolar ve veri yoğun arayüzlerde çizgi ikonlar, tabloları, filtreleri ve yoğun içeriğin etrafındaki ikincil eylemleri desteklediklerinde çoğu zaman iyi çalışır. Grafiklerin, sayıların ve etiketlerin baskın kalabilmesi için çerçeveyi daha hafif tutabilirler. Ancak bu yalnızca ikonlar fazla küçük değilse geçerlidir. Kontroller sıkışık hale geldiğinde dolu ikonları tanımak çoğu zaman daha kolay olur.
Bu da pano için evrensel bir kural olmadığı anlamına gelir. İkon bilgiye destek veriyorsa çizgi ikon kullanın. İkon etkileşim yükü taşıyorsa dolu ikon kullanın. Geniş bir araç çubuğundaki filtre ikonu dış hat olarak kalabilir. Dar bir paneldeki küçük uyarı, bildirim zili ya da seçili gezinme öğesi çoğu zaman dolu bir uygulamadan fayda görür.
Mobil arayüzler, kullanılabilir alan daha dar ve ortam daha affetmez olduğu için kararı genelde daha da fazla dolu ikonlara iter. İnsanlar telefonları hareket halinde ve dikkati bölünmüşken kullanır. Daha cesur siluetler yardımcı olur. Bu, her mobil ikonun katı olması gerektiği anlamına gelmez. Temel gezinme, durum ya da aktif durumlara bağlı ikonların genelde daha güçlü tanınabilirliğe ihtiyaç duyduğu anlamına gelir.
Markanıza ve erişilebilirlik tabanınıza uyan stili seçin
En iyi ikon stili, hem görsel tonunuza hem de kullanılabilirlik eşiğinize uyan stildir. Markanız hassas, sakin, editoryal ya da teknik hissediyorsa çizgi ikonlar bu sesi güçlendirebilir. Kendinden emin, sıcak, doğrudan ya da uygulama benzeri hissediyorsa dolu ikonlar daha iyi hizalanabilir. Seçim; tipografi, köşe yarıçapı, illüstrasyon stili ve renk davranışıyla da uyumlu olmalıdır.
Erişilebilirlik de bu kararın parçası olmalıdır. SVG ikonlar temiz biçimde ölçeklenir ve anlamlı arayüz grafikleri olarak kullanıldıklarında doğru şekilde etiketlenebilir. Bir SVG görsel ya da gruplanmış sembol olarak işlev gördüğünde, MDN onun uygun etiketlemeyle tek ve anlamlı bir grafik olarak ele alınmasını önerir. Yalnızca stil netlik yaratmaz. İkonun yine de yeterli kontrasta, yeterli boyuta ve tanınabilir bir forma ihtiyacı vardır.
Pratik kural basittir. Görsel sadelik istediğinizde ve ayrıntıyı koruyacak kadar yeriniz olduğunda çizgi ikon kullanın. Hız, vurgu ve küçük boyutta okunabilirlik daha önemliyse dolu ikon kullanın. Yalnızca sistem bunun nedenini tanımlıyorsa karıştırın. Çoğu ekip için bu çerçeve, hangi stilin soyut olarak daha iyi göründüğünü sormaktan daha yararlıdır.