Favicon'lar, Dokunmatik Simgeler, Döşeme Simgeleri vb.

Simgeler neden kullanılır? Tasarım, insanlar arasındaki iletişimle ilgili her şeydir: Ziyaretçilerinizin dikkatini çekemediyseniz, başkalarına sunduğunuz bilgiler ne kadar ilginç ve önemli olursa olsun. Bir web sitesini ilk kez ziyaret ederken, çoğu kullanıcı ilginç içerik aramak için sayfayı tarar. Ancak bir şey dikkatlerini çektikten sonra gerçekten okumaya başlarlar. Simgeler basit ve etkili yol kullanıcıyı sitenizin içeriğine enjekte edin.

Simgeler, paragraf sonlarıyla aynı psikolojik amaca sahiptir: içeriği görsel olarak kesintiye uğratarak okumayı daha az göz korkutucu hale getirirler. Okunması kolay paragraflara ve vurgulu simgelere bölünmüş iyi biçimlendirilmiş bir sayfa, okunması kolay ve ziyaretçinin dikkatini çekecek kadar ilgi çekicidir. Kimsenin okumadığı büyük metinler yazarak zaman kaybetmeyi bırakın. Simgeleri kullanmaya başlayın!

Bu yazıda, web tasarımında içeriği desteklemek için simgeleri kullanmanın harika örneklerini ve en iyi uygulamalarını göstereceğiz.

1. Simgeler nasıl kullanılır?

Simgeleri kullanmanın ana görevi, kullanıcıya yardımcı olmaktır. verimli süreç bilginin algılanması ve işlenmesi. Genellikle hedeflere, içerikten rahatsız etmeyen, aksine onu tamamlayan boş alan ve simgeler kullanılarak ulaşılır. Simgelerin kullanımı minimal içeriği bile zenginleştirir, ona ağırlık verir ve daha fazla uzatmadan iletişimin etkinliğini artırır. İçeriğe dikkat çekmek için simgeler kullanılmalıdır, ancak asla onun yerine geçemez.

Özellikler listesinin güçlendirilmesi

Listeleme hizmetleri yaygın bir uygulamadır ve etkili pazarlamanın gerekli bir parçasıdır, ancak listenin kendisi oldukça sıradan ve sıkıcıdır. Özellikler listesiyle birlikte simgelerin kullanılması onu daha çekici ve bilgilendirici hale getirir.

Web uygulamasının yeni özelliklerine dikkat çekiyoruz.

Simgeler, web uygulamanızın en yeni ve en harika özelliklerini denemeniz için görsel bir davettir. Simgeler ziyaretçinizin dikkatini çekmeli ve onları yeni özelliklere yönlendirmelidir. Ve ziyaretçinin dikkati çekildiğinde ona hangi büyük fırsatların açıldığı hakkında konuşun.


Çeşitli uygulama ve ürünlerin listesi

İÇİNDE bu durum Bir logonun amacının, ürün ve görsel arasında zihinsel bir ilişki kurmak olduğunu akılda tutarak, bir simgeye logo gibi davranmanız gerekir. Simge benzersiz ama basit olmalıdır: simgelerin çoğu 128 piksele 128 pikseldir, bu nedenle minimalist bir yaklaşım izlemeniz ve minimum yöntemle çok şey söyleyebilmeniz gerekir.

Örnek:


Hizmetlerinizi listeleyin ve liste okuma kolaylığını artırın

Simgeler içerikle alakalı ve sade bir tasarıma sahip olmalıdır. İçerikle neyi ifade etmek istediğinizi belirleyin ve buna göre bir ikon oluşturun. Web sitesinin veya makalenin teması nedir? Hangi renkler kullanılır? Bu stil nedir? Modern? Klasik? Simgeler, içerikte ifade edilen fikirlerle görsel olarak birleştirilmelidir.


2. Randevu ve yerleştirme

Simgeler, web sitesi arayüzünü samimi, çekici ve profesyonel hale getirir. Umursadığını bile gösteriyorlar küçük detaylar. Simgelerle çalışırken hayal gücünüzü kullanın: üstbilgiler, kenar çubukları, altbilgiler ve listeler simgeleri yerleştirmek için harika yerlerdir.

Başlıklara özel bir görünüm vermek için üst bilgileri ve alt bilgileri vurgulama

Basit bir simge bile bir web sitesine çekicilik ve kişilik katabilir.

Örnek:


Ziyaretçiyi uzun bir sayfa okumaya teşvik edin

Paragraflarda noktalar olarak simgeler kullanın. Bu yaklaşım, en uzun metnin bile okunabilirliğini önemli ölçüde artıracaktır.

Örnek:


Başlıkları ve bölümleri ayırma

Metnin farklı bölümlerini ayıran görsel bir nokta sağlamak için simgeleri kullanın.

Örnek:


Boyut önemli değil! Küçük simgeler bile etkili olabilir

Küçük simgeler, büyük simgelerle aynı düzeyde görsel ilgi sağlar, ancak potansiyel tehlike dikkati başka yöne çekmek Simgelerin kolayca tanındığından ve anlam olarak vurgulanan metne yakın olduklarından emin olun.


Paragrafın sağına simgeler yerleştirerek metni vurgulayın

Simgelerin monoton yerleşimine takılmanıza gerek yok. Metnin sağındaki simgelerin konumu daha az kullanılır, bu nedenle görsel olarak daha çekicidir. Ancak dikkatli olun, bazen bu düzenleme özensiz görünebilir.


Simgelerin boyutunu ve yerleşimini değiştirme

Hayal gücünüzü açın! Simgelerin boyutunu ve yerleşimini değiştirmek, içeriği daha dinamik ve ilgi çekici hale getirecektir.


3. Tarzınızı seçin

Stil söz konusu olduğunda, hedefiniz olarak verimliliğe sahip olmanız gerekir. Tasarımınız benzersiz olmakla ilgiliyse, orijinal simgeler bunun için iyidir, ancak verimlilik çok daha önemlidir. Simgelerin içeriği ve tasarımı geliştirmek ve tamamlamak için tasarlandığını unutmayın. Bu nedenle, simgelerinizin web sitesinin geri kalanıyla nasıl uyum sağladığına dikkat etmeniz özellikle önemlidir. iStockPhoto gibi bir siteden havalı görünen simgeler satın almayın. Simgelerin sitenin geri kalan içeriğiyle aynı stilde olması çok daha önemlidir.

Tüm simgelerinizin birbiriyle eşleşmesi de önemlidir. Farklı simgeleri gruplamak, ne kadar havalı görünürlerse görünsünler, göze çarpan bir tasarım hatasıdır ve profesyonellikten uzaklaşmanın bir işaretidir. Aşağıda, simgelerin bir sitenin stiline etkili bir şekilde nasıl entegre edilebileceğine dair birkaç örnek verilmiştir.

Kullanım açık renkler ve mükemmel 3B simge tasarımı, dış görünüş Web sitesi: GoodBarry



2B simgeler için dağınık stil kullanmak derinlik katar: Yürüyüşe Çıkın


Benzersiz ve tutarlı bir stil seçmek, siteye dinamizm ve profesyonellik katar: Squarespace


Tek Renkli Simgeler İçeriği Dikkati Dağıtmadan Vurgulayabilir: Studio 7 Tasarımları


Basit bir degrade ekran görüntüsünü benzersiz bir simgeye dönüştürmenin gücünü kullanın: Gist


Sırf havalı göründüğü için bir simge kullanmayın. Web sitenizin stiline ve markasına en uygun olanı seçin: Treemo


4. Ek örnekler

Aşağıda birkaç örnek verilmiştir etkili kullanım simgeler.

Simgeler yerden tasarruf sağlar ve taze görünür. Simgeler, karmaşık soruların hızlı yanıtlarıdır:

  • Daha güzel nasıl yapılır?
  • Nasıl markalaştırabiliriz?
  • Nasıl daha eğlenceli hale getirilir?

Simgeleri seviyoruz. Kafamız karışmaya başlayana kadar.

Simgeler farklıdır: ürünlerde, mimaride, bilgisayarlarda, listelerde, düğmelerde, web ve uygulamalarda, iOS ve Android'de. Araç çubuğu simgeleri, imzalı ve imzasız, stilize ve standartlaştırılmış, renkli ve tek renkli, simge yazı tiplerinde, PNG veya SVG dosyalarında…

Birçok ücretsiz ve ücretli simge seti, vektör ve bitmap, düz ve 3B vardır ve bunlarla çalışma kurallarını yazarsanız, daha kalın bir deftere ihtiyacınız vardır. O kadar çok lanet olası simge var ki, Şeytan sizi kötü bir tasarımı bile çekeceklerine kolayca ikna edecek.

Ama dikkat et. Herhangi bir soruya cevabınız "ikon" ise, Don Norman bir gün kapınızı çalacak ve açtığınızda gözlerinizin içine bakıp şöyle diyecek:

“Anlaşılmaz simgeler arayüzü dolduruyor, ancak bilimsel topluluk uzun zamandır insanların yalnızca az sayıda simgenin anlamını hatırladığını gösteriyor. Tüm bu simgelerin anlamını hatırlayabiliyor musunuz? Beni değil".

Don Norman, bu sözlerle eski işvereni Apple'ı öğretti. Apple ikonotoxiasis örnekleri iTunes, Mail ve iOS Kontrol Panelinde bulunur.

Twitter'da Baba Yaga gibi iTunes simgeleriyle korkutuyorlar. İşte OS X için Apple Mail'den harika bir örnek: Bu simgelerden kaç tanesini imzasız olarak tanıyorsunuz?

Bu örnekte ne görüyoruz? Sadece simgeler yerden tasarruf sağlar ve taze görünür. Düğmelerin amacı, yalnızca simgeleri bu panele yerleştiren tasarımcının sorularını uyandırmaz. Bin bir simgenin arkasına gizlenebilir farklı kelimeler, ve bu ana problem. Bir kelimenin binlerce anlamı olduğunda, yalnızca bağlamın iyi anlaşılması tutarsızlıkların önlenmesine yardımcı olacaktır. İşte aynı simgeler, ancak altyazılı:

Başlıklar simgeleri açıklar. Onlarla arayüz daha uygun hale gelir. Bu nedenle, bazı kalpsiz insanlar "en iyi ikonun metin" olduğunu iddia ediyor. Mantıken, doğru imzalar sizi kafa karışıklığından kurtarır. Öyleyse neden simgeleri olmayan etiketleri kullanmıyoruz?

İşlevsel olarak, "saf metin" tasarımı gün gibi açıktır (bilgi mimarları işlerini yaptıysa), ancak arayüzden görüntüleri kaldırdığınızda bir şeyler bozulur. Hayat onu terk eder. Taze ve neşeli olmayı bırakır. Bu tasarım pozitivistini ilgilendirmez. Ama diğer insanları endişelendiriyor. Bu hipotezi, iA Writer'dan simgeleri kaldırarak test ettik. Kullanıcıların tepkisi yankılanan bir "Yapma!"

Belki de metin ve simge arasında seçim yapmak yerine ne zaman yalnızca simgelerin, ne zaman yalnızca metnin ve ne zaman simgelerin altyazılarla kullanılacağını anlamak daha iyidir. Hadi bulalım...

Yalnızca simgeler

Simgeler resimlerdir. Sıradan nesneleri resimlerde göstermek kolaydır. Tanıdık kavramları temsil eden kolayca tanınabilir nesneleri tasvir eden simgeler için etikete gerek yoktur. Örneğin havaalanları için uçaklar, tuvaletler için insan figürleri, yakında çöpe atacağımız belgelerin olduğu yerler için sepetler.

Maddi nesneleri tasvir etmek kolaydır, ancak bir eylem veya eylem gösterme ihtiyacı soyut kavram birçok tasarımcıyı acı çekmeye zorladı. Sorun şu ki, insan-bilgisayar etkileşiminde çoğu simge eylem ve soyutlamadır.

Eylemin gerçek olduğunu gösterin. Animasyonlu simge dikkat dağıtıyor, bir eylem metaforu kullanmak daha iyi. Bir bilgisayar masaüstü bağlamında, yazıcı simgesi "Yazdır", çöp kutusu "Sil", makas ise "Kes" anlamına gelir. Bu nesnelerin her birinin belirli bir amacı vardır, bu nedenle hedef eylemin anlaşılması kolaydır.

Karmaşık eylemler ve soyutlamalarla bu artık işe yaramayacaktır. Ve yakın gelecekte hiçbir şeyin değişeceğine dair bir umut yok. 40 yıllık insan-bilgisayar etkileşiminde, kaydetme, kopyalama ve yapıştırma gibi temel işlevler için evrensel semboller bulamadık.

"Piktografik sistemlerle ilgili yaygın bir sorun, tek sınırlamalarının görüntüde gösterilebilen dış dünyadan nesnelerin sayısı olmasıdır."

İşlevsel arabirim öğeleri üzerindeki çıplak simgeler, kullanılabilirliği kötüleştirir. En iyi yol bir özelliği rapor edin - bir kelime, bir resim değil. Bir fiil ise daha da iyi.

"İnsanlar arasında her zaman kusurlu olan fikir alışverişi söz konusu olduğunda, biz insanların bu konuda sahip olduğu en iyi şey konuşmadır. Yazılı konuşma, düşüncelere uzun ömür ve doğruluk verir (konuşmamızı nadiren düzeltiriz ve bu cümleyi birkaç kez düzelttim).

Görsel olarak, grafik semboller, yoğun sözcüklerden daha basit ve daha çekicidir. Ama yaklaştıkça sirenler canavara dönüşüyor. Onları okumaya ve anlamaya çalıştığınızda bilmediğiniz bir dilden şifreli karakterlere dönüşür, etkileşimi kapar ve kafasını ısırır. Çıplak simgeler arayüzün görünümünü iyileştirerek netliğini azaltır. Açık işlevleri, bir karanlık simgeler katmanıyla maskeleyerek belirsizleştirirler.

“İkon, herhangi bir dilde eşit derecede anlaşılmaz olan bir semboldür. Hangi dilleri bilirseniz bilin, ikonun anlamını öğrenmek zorunda kalacaksınız. İnsanlar sadece düşünmüyor fonetik diller herhangi bir kelime oluşturmak için birden fazla karakteri birleştirebileceğiniz yer. Birçok tasarımcı beni arayüzde simgeler kullanmaya ikna etti. Onlara "Bu gerçekten aklınıza gelebilecek en iyi arayüz mü yoksa alışkanlıktan mı yapılmış?" diye sordum. Tasarımcılar basitçe bu paradigmaya takılıp kalmışlar ve düşüşünü fark etmiyorlar.

Simgeler modaya uygun görünür ve yer olmadığında sorunları çözer. Elbette, çıplak simgelerin kötüye kullanılmasından sorumlu olan tek kişi Apple değil. Google'ın materyal tasarımı, markalaşma tarafından zehirlendi. İşte bir Gmail karşılaştırması:

Burada ne görüyoruz? Gmail simgeleri basit görünür, ancak düğmelerin amacı hakkında düşünmenizi sağlar. Biraz odaklanıp konsantre olursanız tahmin edebilirsiniz. Bir süre sonra kas hafızası size yardımcı olacaktır ama hem kısa süreli hem de uzun süreli hafıza onları aynı zorlukla alacaktır. Bir e-posta uygulamasında, konsantrasyon ve odaklanma, arayüzün şifresini çözmeye değil, metni anlamaya ve yazmaya yönlendirilmelidir.

Durmak! Google her şeyi ölçmüyor mu? Ne yaptıklarını kesinlikle biliyorlar, değil mi? Bilim adamları orada çalışıyor. Simgesiz yaklaşımı benimsediler ve asla yanılmıyorlar. Yani simgeler doğru! Belki, ama Google veya Facebook'a uyan bize uymayabilir. Aşağıda tartışılacağı gibi Google, nedeni doğa bilimlerinin dışında bulmuş olabilir. Öyle olsa bile, Google ayrıca çıplak metin seçeneği sunar.

Sadece yazı

Görüntüler farklı şekillerde yorumlanabilir. Bağlama bağlı olarak, her yerde bulunan büyüteç bile hem "ara" hem de "büyüt" okur. Kelimenin anlamı da bağlama bağlıdır, ancak her zaman aynı şekilde okunur. Simgeler metinle değiştirilirse ne olur? Böyle bir arayüzün ikonik bir arayüzden daha iyi çalışması mantıklı. Gmail ayarlarında, simge çubuğunu bir metin sürümüyle değiştirebilirsiniz:

Ne oldu? Düğmelerin anlamı artık açıktır. Ancak arayüz daha az insan, daha az eğlenceli hale geldi. Çalışan bir alete benziyor, soğudu ve şaşırtıcı bir şekilde daha karmaşık görünüyor. Bu nasıl mümkün olabilir? Metin arayüzü nesnel olarak daha uygundur, ancak estetik nüanslar nedeniyle bu şekilde algılanmaz.

Metin rasyonel bir seçimdir. Düzgün yapılandırılmış ve adlandırılmış işlevler, insan-bilgisayar etkileşiminin temelidir.

Simgeler duygusal seçim. Doğru simgeler pozitif ekler. Duygusal etki ölçülemez, ancak bu onu daha az gerçek yapmaz.

“İşe yarayan, anlaşılır ve kullanımı kolay ürünler yaratmak yeterli değil. Zevk ve heyecan, neşe ve eğlence ve tabii ki güzellik katan ürünler yaratmak gerekiyor. insan hayatı- Gündelik Şeylerin Tasarımı'nda Don Norman.

İnsanlar hem rasyonel hem de duygusal yaratıklardır: “Beyin bilgiyi işlemez, bilgiyi çıkarmaz ve anıları depolamaz. Kısacası beyin bir bilgisayar değildir. Simge kullanılabilirliği konusunda kanıtlanmış bir şey varsa, o da "Altyazılı simgeler, salt simgelerden veya salt metinden daha iyi çalışır."

imza simgesi

İmzalı simge hem duygusal hem de anlaşılır. Altyazılı simgeler her zaman çalışır. Simge net değilse, başlık açıklayacaktır. Öyleyse neden bu kazanan çifti kullanmıyorsunuz?

Sorun şu ki, bu bir uzlaşma. Simgelerin duygusal mesajını ve temiz metnin sadeliğini azaltır. Yerden tasarruf etmez ve görünümü süslemez. Salt simgelerden veya salt metinden daha fazla dikey alan kaplar ve daha fazla görsel parazit oluşturur.

Duygusal olarak simgeleri tercih ederiz. Simgeleri metinle değiştirmek bizim için mantıklı. Teorik olarak, imzalı bir simge bir kazan-kazandır. Uygulamada, tasarımda sihirli değnek yoktur.

Kazan-kazan seçeneği yoktur, ancak daha iyi ve daha kötü tavizler vardır. İnsanlar için çalışıyoruz. İnsan hisseder ve düşünür. Göreliliği araştırmamak daha iyi olsa da.

Teori ve pratik

Herhangi bir teknoloji gibi, rasyonel, işlevsel bir yapının üzerine arabirimler oluşturmaya yardımcı olur. Tasarım bir doğa bilimi değildir. Bilim ve ölçümden yararlanan bir uygulamadır, ancak bir tasarımın kalitesi tek başına objektif ölçümle değerlendirilemez. Kullanıcı testi ve analitiği, tasarımcıların yerine geçmez, tasarım varsayımlarını test eder. Bir üründe bir tasarımcının düşünebileceğinden daha fazlası vardır ve tasarımda ölçebileceğimizden daha fazlası vardır. Bu "daha fazlası" ancak ürünü kullanan kişilerle konuşularak ele alınabilir.

Bir bilgisayar ile insan etkileşimi rasyonel bir temel üzerine kuruludur. Biz canlılarız, davranışlarımız hesaplanamaz ama bizimle konuşulabilir. Simgeler, renkler, ritim, hava, tipografi ve diğer güzel şeyler arayüzü daha keyifli hale getirir ve böylece etkileşimi geliştirir. Pek mantıklı görünmüyor. İnsan görünüyor.

Basit kurallar

Tasarımda bir sorun varsa, size planlandığı gibi çalışmıyor gibi görünüyorsa, simge eklemek için acele etmeyin. Simgeler, kötü bir site yapısını düzeltmez. En sona onları ekleyin. Tel kafes üzerinde çalışırken simgelerle oynamayın. Bir resim bin kelimeyi gizleyebilir. İyi bilgi mimarisi, doğru kelimeleri doğru bağlama yerleştirir. Duygusal kısma geçmeden önce rasyonel kısım üzerinde çalışın.

Bir simge, bir bölümü veya işlevi belirtir. Basit ve anlaşılır bir anlam taşıyan bir kelime türüdür. Mesajın anlamı bağlama bağlıdır. Kelime anlaşılmaz bir şekilde seçilirse veya bağlama uymuyorsa, en güzel simge bile işe yaramaz. Bir simge seçmeden önce kendinize sorun: Hangi kelimenin yerine geçecek? Bu doğru kelime? Anlaşılır mı? Bu bağlamda çalışacak mı? Bir simge birçok farklı kavramı gizleyebilir. Bağlamdaki kelimeler o kadar esnek değildir. Simgelerin aksine, birçok kurala uyarlar.

Yapınız hazır olduğunda ve simgelerin, eğlencenin ve diğerlerinin devreye girme zamanı geldiğinde, basit bir kuralı izleyin: gerekli minimum simgeyi ekleyin, ancak daha azını değil.

Simgelere son derece dikkatli davranın. Onları geliştirmek tüm zamanınızı alabilir. Kendi başlarına tanınabilir olmalı, temsil ettikleri kavramı açıkça göstermeli ve diğer simgeler ve kavramlarla bağlam içinde çalışmalıdırlar.

Simgeler, normal metindeki sıfatlar ve zarflardır. Bunları kaldırmak, metninizi edebi bir başyapıta dönüştürmez. Gereksiz olanı silin, doğru olanı arayın, belirsiz ve iddialı formülasyonları kesin ve özlü olanlarla değiştirin.

Deneme, iA uzmanları tarafından yazılmıştır.


Bilgisayar kullanırken her gün simgelerle karşılaşıyoruz çünkü. modern için kullanılan grafik arayüzlerin temelini oluştururlar. yazılım. Bu küçük resimler, dosyaları (web sayfaları dahil) ve programları temsil etmek ve komutları yürütmek için kullanılır.

Simgeleri nasıl kullanırız?

Simgeler, masaüstümüzde veya programların içinde uygun bir şekilde bulunur ve tıklanmayı bekler (bir veya iki kez). Tanınmaları kolaydır, temsil ederler uygun yol komutlar ve menüler yığını arasında gezinmeden istenen işlevselliğe doğrudan erişin.

Kural olarak, bir resim, simgenin ilişkilendirildiği programın veya dosyanın amacı ile ilişkilendirilir. Örneğin, bir e-posta programı simgesi bir zarfı temsil ederken, bir medya oynatıcı simgesi bir müzik notasını veya yaygın olarak kullanılan sağı gösteren üçgen oku temsil edebilir.

Simgeler nasıl geliştirilir?

Simgelerin yapıları gereği, genellikle oldukça küçük olan standart boyutları vardır - 16x16'dan 48x48 piksele (Mac'lerde - 128x128'e kadar, Windows Vista'da - 256x256'ya kadar). Bir simge genellikle, içinden masaüstü arka planının görülebilmesi için şeffaf alanlar da dahil olmak üzere birkaç grafik içerir. Bu nedenle, simgenin bulunduğu masaüstünün veya araç çubuğunun üzerinde olduğu görülüyor.

Simge, Windows veya Mac OS'nin belirli bir durum için en uygun olanı kullanmasına izin vermek için farklı boyutlarda ve renklerde birkaç resim içerir. Bu seçim, bilgisayar monitörünün bulunduğu moda ve simgenin görünmesi gereken konuma bağlıdır. Örneğin, Windows görev çubuğunda görüntülenen simgeler tipik olarak 16x16 iken masaüstündeki simgeler 48x48'dir.

Simgeler için hangi biçimler kullanılır?

Windows simgeleri "ICO" uzantısına sahipken, Mac simgeleri "ICNS", "RSC", "RSRC" veya "BIN" uzantısına sahiptir. Bir simge (tüm varyasyonları dahil) tek bir dosyada bulunurken, simge grupları kitaplıklarda birleştirilir.

Windows XP simgeleri arasındaki fark nedir?

Windows XP simgeleri, Windows XP stilini tamamlayan zengin renklere ve pürüzsüz kenarlara sahiptir. Kenarları genellikle hafifçe yuvarlatılmıştır ve ışık kaynağı sol üst köşede bulunurken dağınık ışık resmin diğer kısımlarını aydınlatır.

Degradeler, ana hatlar ve gölgeler, simgeye boyut ve kontrast eklemek için kullanılır. XP'deki bazı simgeler panoramik bir görünüme sahipken, belgeler için kullanılan veya sembolleri veya tek nesneleri tasvir eden simgeler "yüz yüze" döndürülür. Genel olarak modern ve kaliteli olarak nitelendirilebilirler.

XP'de başlat menüsünün sağındaki simgeler 24x24, araç çubuklarında kullanılanlar ise 24x24 veya 16x16'dır. Sistem, simgelerin kenarlarının pürüzsüz görünmesini ve arka planla karışmasını sağlayan 8 bit alfa kanalına sahip 24 bit grafikler olan 32 bit simgeleri destekler.

Windows XP simgeleri, farklı monitör ayarlarını desteklemek için üç renk içerir: 8 bit alfa ile 24 bit, 1 bit saydamlıkla 8 bit (256 renk) ve 1 bit saydamlıkla 4 bit (16 renk).

  • Tercüme

Bir tercümandan.
Bu, css-tricks.com'dan Philip Bernard tarafından yazılan bir makalenin çevirisidir. Makalenin, yarattığı hizmetle çalışmanın açıklamasını içeren bölümünü atlamama izin verdim. Hata bulursanız, lütfen bunları özel bir mesajla bildirin.

Makale, çeşitli durumlarda iyi görüntülenmesi için bir favicon'un ne olması gerektiği (ve onun yerine ne konulacağı) konusundaki araştırmasının sonuçlarını içermektedir.

Favicon, 1999'da Internet Explorer 5'te () tanıtıldı ve birkaç ay sonra W3C tarafından standartlaştırıldı. Siteyi temsil eden küçük bir simgeydi.

O zamandan beri, çoğu masaüstü tarayıcısı trendi takip etti ve favicon'u şu ya da bu şekilde kullandı. Çok basit, değil mi? Küçük bir resim oluşturun ve onu "tamamlamak" için herhangi bir internet projesine ekleyin. Karmaşık bir şey yok. Ya da değil?

Hadi bir sınav yapalım!

Ana favicon dosyası nedir?

Cevap: favicon.ico Emin olmak için, adı favicon.ico olarak değiştirilen bir PNG değil. Bazı tarayıcılar bu hatayı mazur görse de ICO, bir görüntünün birden çok sürümünü destekleyen farklı bir biçimdir.

Soru: favicon.ico ne kadar büyük olmalı?

C: 16x16. Standart.
B: 32x32. Favicon bir süre önce güncellenmedi mi?
B: 64x64.
D: Yukarıdakilerin hiçbiri.

Cevap: D.

Favicon.ico formatı ilk olarak Microsoft tarafından tasarlandı ve birkaç başka satıcı tarafından desteklendi. Microsoft, 16x16, 32x32 ve 48x48 boyutlarını önerir. Evet, bir ICO birden fazla resim içerebilir.

Tarayıcılar genellikle favicon'u sekmelerde görüntüler ve normal çözünürlüklerde 16x16 sürümü iyi görünür:

Chrome sekmesinde 16x16. Şimdiye kadar, çok iyi.

Ancak 16x16 simgesi diğer yerler için çok küçük: görev çubuğu ve masaüstü.

Görev çubuğunda 16x16.


Masaüstünde 16x16. İyi değil.

Bir simge birden fazla resim içerdiğinde sonuç çok daha iyidir.

Görev çubuğunda 16x16, 32x32 ve 48x48 favicon.ico. Normal bir programa benziyor.


Masaüstünde 16x16, 32x32 ve 48x48 favicon.ico. Mükemmel.

Soru: favicon.png'nin amacı nedir?

Aslında, başka bir dosya olan favicon.png daha yaygındır. İnsanlar genellikle bunu soruyor.
Gerçekten nedir?

A: favicon.ico'yu desteklemeyen tarayıcılar için simge. Belki de Firefox gibi?
B: Yüksek çözünürlüklü simge. Bilirsiniz, tüm bu yeni yüksek piksel yoğunluklu ekranlarla.
C: Geçmişten bir eser.Şimdi bunlar yeni simgeler, örneğin Apple Touch simgesi.
D: Hep birlikte.

Cevap: D.
HTML5'in benimsenmesinden bu yana favicon.ico pek kullanışlı değil. Öznitelik tanıtıldı boyutlar, birden çok bildirimde bulunmanıza izin verir çeşitli versiyonlar aynı simgenin ve bunlar PNG dosyaları olabilir:

Peki ne duyurmalıyız?

Kabul edelim. Neredeyse tüm masaüstü tarayıcıları favicon.ico'yu desteklerken, bu dosya güncelliğini yitirmiştir. Evet, bu dosyayı kullanmaya devam edebilirsiniz ve her şey olması gerektiği gibi çalışacaktır. Ama cidden, bu modası geçmiş bir format. Web dışında hiçbir yerde kullanılmaz. PNG çok daha iyi desteklenir.

Favicon.ico - IE'nin eski sürümleri için. Diğer tarayıcılar için ve son sürümler IE, PNG simgelerini kullanır. Ne olmuş boyutlar belirlenmeli mi? Yakında öğreneceğiz.

S: Mobil platformları desteklemek için hangi biçim gereklidir?

SmartInsights'a göre, web trafiğinin %26'sından fazlası akıllı telefonlar ve tabletler tarafından oluşturuluyor. Bu gelecek. Bu dünyayı sürdürmek için ne gerekiyor?

A: favicon.ico. 15 yıl önce çalıştı ve bugün hala çalışıyor.
B: PNG simgeleri. Bunun hakkında konuşacağını söylemiştin.
C: Apple Touch simgesi. Yüzbaşı
D: Burada hala doğru bir cevap yok.

Cevap: D. PNG simgelerine ihtiyacınız var. Ve Apple Touch simgesi. Ve Windows 8 için kutucuklar. Ve browserconfig.xml adlı bir dosya.

Mobil platformlar, normal masaüstü tarayıcılardan çok daha heterojendir. Ekran boyutları ve çözünürlükleri büyük ölçüde değişir ve hakim olan yoktur. işletim sistemiİnternet günlerinde olduğu gibi Windows gibi.
Sonuç: Bir mobil site simgesinin tek bir genel resim olabileceğini veya genel bir HTML bildirimine sahip olabileceğini düşünmeyin.

Soru: PNG simgelerinin boyutu ne olmalıdır?

A: Google TV için 96x96
B: Android Chrome için 196x196
C: Opera Sahili için 228x228
D. Yukarıdakilerin hepsi

Cevap: D ve hatta daha fazlası.Örneğin, 160x160 için eski versiyon Opera'nın hızlı araması (çoktan gitti) veya Chrome Web Mağazası için 128x128, büyük ölçüde desteklemeyi düşündüğünüz platforma bağlıdır.

S: Apple Touch simgesinin boyutu nedir?

Apple Touch simgesi, iOS tarafından yer imleri ve "ana ekran" siteleri için kullanılır. Aklıma 57x57 geldi bravo. Bu doğru. İlk iPhone piyasaya çıktığında sadece 7 yıl önceydi.

Cevap: 180x180'e kadar.

İlk iPhone'un ortaya çıkmasından sonra 3 önemli sürüm vardı:

  • iPad. Çok daha büyük bir ekranla.
  • Retina ekranları. İki kat piksel yoğunluğu ile.
  • iOS7. Düz tasarım iPhone/iPad'de farklıdır.
Toplam 9 kombinasyon vardır.
Cihaz Ekran iOS sürümü Simge boyutu
iPhone klasik 6 ve altı 57x57
7 60x60
retina 6 ve altı 114x114
7 120x120
6 artı 8 ve üstü 180x180
ipad klasik 6 ve altı 72x72
7 76x76
retina 6 ve altı 144x144
7 152x152



Parlak bir Retina iPad'de eski bir 57x57 Apple Touch simgesi. Bulutlu.


Retina iPad'de büyük 152x152 Apple Touch simgesi. Dikkatlice.

Yanlış cevap verdiyseniz, cesaretiniz kırılmasın. apple-touch-icon.png sağlayan 5.000 popüler sitenin %4'ünden azı bunu doğru yapıyor.

Bazıları, 9 görüntünün hepsinin gerçekten gerekli olmadığını iddia edebilir. Ancak, en azından ana Apple Touch simgesi 152x152 olmalıdır. iOS 7 altındaki Retina iPad ihtiyacınız olanı bulacaktır ve daha genç cihazlar görüntüyü azaltabilir.

S: Apple Touch simgesini HTML'de bildirmek gerekli midir?

C: Bilmiyorum. Bir cevap olmalı!
B: Evet. Aksi takdirde, iOS onları nasıl bulacak?
Hayır. Apple öneriler sunar, böylece herkes iOS cihazı hala onları giyiyor.
D: Hayır ama...

Cevap: D… ancak diğer bazı platformlar da Apple Touch simgesini kullanıyor, bunları duyurmak daha iyi.

Kulağa ne kadar garip gelse de, Apple Touch simgesini arayanlar yalnızca iOS cihazları değil. Diğer yüksek çözünürlüklü PNG simgelerinden daha popüler ve yaygın olduklarından, Android Chrome gibi bazı tarayıcılar bunları kullanır. Bu nedenle, bunları beyan etmek daha iyidir, bu, uyumlu bir cihaza veya tarayıcıya sahip bir ziyaretçinin bunlardan birini kullanmasına izin verecektir.

S: Windows 8'de tabletler için kutucuğu nasıl bildiririm?

C: Windows 8'de tablet mi? Ne olduğunu?
B: favicon.ico Steve Ballmer'ın mirası.
C: Meta etiketler. İki msapplication-TileColor Ve msapplication-TileImage.
D:tarayıcı yapılandırması.xml.

Yanıt: Windows 8 ve IE 10 için C, Windows 8.1 ve IE 11 için D. Yanıt A da biraz doğrudur.

Windows 8.0 duyurusu şuna benzer:

Windows 8.1 ve IE 11, browserconfig.xml'de bildirilen görüntünün birden çok sürümünü bekler. Örneğin:
#2b5797
Yeni Metro arayüzü, önceden yüklenmiş çoğu program tarafından kullanılan "beyaz silüetler" gibi birkaç yeni tasarım ilkesi sunar.


Windows 8'de Site Kutucukları.

Soru: 150x150 kare logo döşemesinin boyutu nedir?

C: 150x150. okuyamıyor musun
Rahatsız etmek.

Cevap: B, 270x270.

“GetGoodRank blogunun baş editörü, web analisti, blog yazarı.
Sitede simgeler nasıl tasarlanır ve uygulanır? Hakkında konuşuruz Basit kurallar simgelerin kullanılabilirliği ve kontrol için basit bir kontrol listesi.

Bir simge, bir uygulamayı, işlevi veya bir sitenin/uygulamanın tematik bir bölümünü gösteren bir grafik arayüzün şematik bir öğesidir. Simgeler basit, özlü ve etkilidir. Bir uygulamanın veya web sitesinin grafik arayüzünü basitleştirmek ve kullanıcıyla iletişimi basitleştirmek ve hızlandırmak için kullanılırlar ( insan bilinci grafikleri metinden çok daha hızlı işler ve “anlar”). Simgeler işlevlerine göre sınıflandırılır:

  • Gezinme simgeleri- bir işlevi belirtmek için kullanılır: uzun bir sayfada gezinmek için yukarı ve aşağı gezinme okları, sepete gitmek için sepet, arama çubuğunu etkinleştirmek için büyüteç.
  • Bilgi simgeleri- bölümün konusunu belirtin. Örneğin, çarpı işaretli araçlar genellikle teknik bilgilerin olduğu bir bölümü, vites ayarların olduğu bir bölümü, araba teslimat bilgilerini, 7/24 sayıları 24 saatlik bir çalışma programını vb. gösterir.
  • Harekete geçirici mesaj simgeleri- genellikle bariz eylemleri belirtmek için kullanılır. Örneğin, uygulama indirme sayfasında, kalın bir aşağı ok, yazılımı indirmek için bir çağrıyı, bir ürün sayfasında artı, ürünü sepete eklemek için bir çağrıyı vb. gösterir.

Simgeler için kullanılabilirlik kuralları

Özellikle site bireysel bir stil kullanıyorsa ve genel kabul görmüş standartlardan ayrılıyorsa, tüm simgeler kullanıcılar tarafından eşit derecede anlaşılmaz. Simgelerin tasarımı ve kullanıcıyla iletişimi basitleştirme gibi doğrudan bir işlevi yerine getirmesi için aşağıdaki kurallara uyun:

1. Eşlik eden metin- farklı siteler, farklı amaçlar için standart simgeleri bile kullanır. Bu nedenle, standart bir büyüteç, siteyi aramak veya bir görüntüyü yakınlaştırmak / yakınlaştırmak anlamına gelebilir. Grafik semboller iki şekilde yorumlanabilir. Kullanıcının görevini basitleştirmek için simgelere metinle eşlik etmelisiniz. Bu çoğunlukla navigasyon simgeleri için geçerlidir. Metin ve grafikler birlikte her ikisinden de çok daha iyi çalışır.

2. Üniforma stili- Simgeler aynı tarzda yapılmalıdır. Minimum miktarda ayrıntıyla şematik görüntüler kullanmak daha iyidir. Simge, genel tasarım konseptinde kolayca ayırt edilebilir ve kullanıcı için kolay anlaşılır olmalıdır. Sitede farklı görevleri yerine getiren ikonlar farklı konseptlerde yapılabilmektedir. Ancak, farklı grafik stilleri uygulanırken aşırı çeşitlilikten kaçınılmalıdır. Simgenin, kullanıcının siteyle etkileşimini basitleştirmek için tasarlandığını ve bunun tersinin, onu simgelerde gizli olan işlevleri öğrenmeye zorlamak için tasarlandığını unutmayın.

3. Tıklanabilirlik- bir eylemin mevcut olduğu simgeler tıklanabilirliği görsel olarak göstermelidir: üzerine gelindiğinde vurgulama, renk değiştirme, yakınlaştırma. Bu, kullanıcıya simgenin işlevsel olduğunu ve yalnızca bir GUI öğesi olmadığını açıkça gösterecektir. Animasyonu minimumda tutun.

4. 5 saniye test edin- bireysel bir simge konsepti geliştirirken (standart olmayan simgeler kullanarak), 5 saniye boyunca test edin. 5 saniye içinde simgeyi tanımlayamaz ve sitede ne anlama geldiğini anlayamazsanız, tasarımda bu grafik simgeye izin verilmez. Kullanıcının hedefine giden yolda ek engeller yaratacaktır: sitedeki bilgileri incelemek, bir ürün / hizmet seçmek.

5. Boyut önemlidir- çok küçük simgeler tasarımda fark edilmeme riski taşırken, çok büyük simgeler kafa karıştırabilir, diğer öğelere hükmedebilir ve dikkatleri kendilerine çekebilir (özellikle büyük simgeler renkli olarak vurgulanmışsa).

Simgelerin kullanılabilirliği nasıl test edilir

Sitedeki simgelerin kullanılabilirliğini kontrol etmek için aşağıdaki soru kontrol listesini kullanın:

  • Bir site veya uygulamanın arayüzünde ikon bulmak kolay mı?
  • Simge arayüzde ne kadar uyumlu görünüyor? Genel tasarım konseptini ihlal ediyor mu?
  • Simge, kullanıcı için beklenen konumda mı?
  • Simge, sayfanın ana içeriğinden uzaklaşıyor mu?
  • Simgenin anlamı kullanıcı için açık mı?
  • Simge, sitenin mobil sürümünde nasıl görünür? Onunla dokunmatik ekrandan etkileşim kurmak kolay mı?
  • Bu simge, bitişik olmayan diğer eylemlerle ilişkili mi? Siteyi kullanırken ek zorluklar yaratıyor mu? Simge hatalı işlemlere yol açacak mı?
  • Bu bağlamda, neye eklendiğini belirtmek için bir simge gerekli midir? Onsuz yapmak mümkün mü?

 

Şunları okumak faydalı olabilir: