Favikonlar, teginish piktogrammalari, kafel piktogrammalari va boshqalar.

Nima uchun piktogrammalardan foydalanish kerak? Dizayn - bu odamlar o'rtasidagi muloqot bilan bog'liq bo'lgan hamma narsa: siz boshqalarga taqdim etayotgan ma'lumotlaringiz qanchalik qiziqarli va muhim bo'lmasin, agar siz tashrif buyuruvchilarning e'tiborini jalb qila olmasangiz. Veb-saytga birinchi marta tashrif buyurganida, ko'pchilik foydalanuvchilar qiziqarli tarkibni qidirib sahifani skanerlashadi. Biror narsa ularning e'tiborini tortgandan keyingina ular o'qishni boshlaydilar. Belgilar oddiy va samarali usul foydalanuvchini saytingiz tarkibiga kiriting.

Belgilar xatboshi tanaffuslari bilan bir xil psixologik maqsadga ega: ular mazmunni vizual ravishda to'xtatib, o'qishni qo'rqitmaydi. Matnli yaxshi formatlangan sahifani o‘qish oson paragraflar va urg‘uli piktogrammalarga bo‘linib o‘qish oson va tashrif buyuruvchilarning e’tiborini tortadigan darajada qiziqarli. Hech kim o'qimaydigan ulkan matnlarni yozishga vaqt sarflashni to'xtating. Belgilardan foydalanishni boshlang!

Ushbu maqolada biz veb-dizayndagi kontentni qo'llab-quvvatlash uchun piktogrammalardan foydalanishning ajoyib misollari va eng yaxshi amaliyotlarini ko'rsatamiz.

1. Belgilardan qanday foydalanish kerak

Belgilardan foydalanishning asosiy vazifasi foydalanuvchiga yordam berishdir samarali jarayon axborotni qabul qilish va qayta ishlash. Odatda, maqsadlarga bo'sh joy va tarkibdan chalg'itmaydigan piktogrammalar yordamida erishiladi, aksincha, uni to'ldiradi. Piktogrammalardan foydalanish hatto minimal tarkibni boyitadi, unga og'irlik beradi va hech qanday qiyinchiliksiz aloqa samaradorligini oshiradi. Kontentga e'tiborni jalb qilish uchun piktogrammalardan foydalanish kerak, lekin uni hech qachon almashtirmaslik kerak.

Xususiyatlar ro'yxatini mustahkamlash

Listing xizmatlari keng tarqalgan amaliyot va samarali marketingning zaruriy qismidir, ammo ro'yxatning o'zi juda oddiy va zerikarli. Xususiyatlar ro'yxati bilan birgalikda piktogrammalardan foydalanish uni yanada jozibali va ma'lumotli qiladi.

Biz veb-ilovaning yangi xususiyatlariga e'tibor qaratamiz

Belgilar veb-ilovangizning eng so'nggi va eng zo'r xususiyatlarini sinab ko'rish uchun vizual taklifdir. Belgilar tashrif buyuruvchilarning e'tiborini jalb qilishi va ularni yangi xususiyatlarga yo'naltirishi kerak. Va tashrif buyuruvchining e'tiborini jalb qilgandan so'ng, unga qanday katta imkoniyatlar ochilayotgani haqida gapiring.


Turli xil ilovalar va mahsulotlar ro'yxati

IN bu holat logotipning maqsadi mahsulot va tasvir o'rtasida aqliy aloqa o'rnatish ekanligini yodda tutib, ikonaga logotip kabi munosabatda bo'lishingiz kerak. Belgi noyob, ammo oddiy bo'lishi kerak: aksariyat piktogrammalarning o'lchami 128x128 piksel, shuning uchun siz minimalist yondashuvni qo'llashingiz va minimal vositalar bilan ko'p narsalarni ayta olishingiz kerak.

Misol:


Xizmatlaringizni ro'yxatlang va ro'yxatni o'qish qulayligini oshiring

Belgilar mazmunga mos kelishi va oddiy dizaynga ega bo'lishi kerak. Kontent bilan nimani ifodalashni xohlayotganingizni aniqlang va shu asosda belgi yarating. Veb-sayt yoki maqolaning mavzusi nima? Qanday ranglar ishlatiladi? Bu qanday uslub? Zamonaviymi? Klassikmi? Belgilar mazmunda ifodalangan fikrlar bilan vizual tarzda birlashtirilgan bo'lishi kerak.


2. Tayinlash va joylashtirish

Belgilar veb-sayt interfeysini do'stona, jozibali va professional qiladi. Ular sizni hatto g'amxo'rlik qilayotganingizni ko'rsatadi kichik tafsilotlar. Belgilar bilan ishlashda o'z tasavvuringizdan foydalaning: sarlavhalar, yon panellar, altbilgilar va ro'yxatlar piktogrammalarni joylashtirish uchun ajoyib joy.

Sarlavhalarga alohida ko'rinish berish uchun sarlavha va altbilgilarni ta'kidlash

Hatto oddiy piktogramma ham veb-saytga joziba va shaxsiyat qo'shishi mumkin.

Misol:


Mehmonni uzoq sahifani o'qishga jalb qiling

Paragraflarda nuqta sifatida piktogrammalardan foydalaning. Ushbu yondashuv hatto eng uzun matnning o'qish qobiliyatini sezilarli darajada oshiradi.

Misol:


Sarlavhalar va bo'limlarni ajratish

Matnning turli qismlarini ajratib turadigan vizual nuqtani ta'minlash uchun piktogrammalardan foydalaning.

Misol:


Hajmi muhim emas! Hatto kichik piktogramma ham samarali bo'lishi mumkin

Kichik piktogrammalar katta piktogrammalar kabi vizual qiziqish darajasini ta'minlaydi, ammo ularsiz potentsial xavf e'tiborni chalg'itish. Belgilarni tanib olish oson va ular ta'kidlanayotgan matnga yaqin ekanligiga ishonch hosil qiling.


Belgilarni paragrafning o'ng tomoniga qo'yish orqali matnni ajratib ko'rsatish

Piktogrammalarning monoton joylashuviga yopishib olishning hojati yo'q. Matnning o'ng tomonidagi piktogrammalarning joylashuvi kamroq qo'llaniladi, shuning uchun u ko'proq jozibador bo'ladi. Ammo ehtiyot bo'ling, ba'zida bu tartib beparvo ko'rinadi.


Belgilarning o'lchamini va joylashishini o'zgartiring

Tasavvuringizni yoqing! Belgilarning o'lchami va joylashishini o'zgartirish kontentni yanada dinamik va qiziqarli qiladi.


3. O'z uslubingizni tanlang

Uslub haqida gap ketganda, maqsad sifatida samaradorlikka ega bo'lishingiz kerak. Agar sizning dizayningiz noyob bo'lsa, unda original piktogrammalar buning uchun yaxshi, lekin samaradorlik muhimroqdir. Yodda tutingki, piktogrammalar tarkib va ​​dizaynni yaxshilash va to'ldirish uchun mo'ljallangan. Shuning uchun piktogrammalaringiz veb-saytning qolgan qismiga qanday mos kelishiga e'tibor berish ayniqsa muhimdir. iStockPhoto kabi saytlardan ajoyib ko'rinadigan piktogramma sotib olmang. Belgilar saytning qolgan qismi bilan bir xil uslubda bo'lishi muhimroqdir.

Barcha piktogrammalaringiz bir-biriga mos kelishi ham muhim. Turli xil piktogrammalarni guruhlash, ular qanchalik ajoyib ko'rinishidan qat'i nazar, asosiy dizayn xatosi va professionallik belgisidir. Quyida piktogrammalarni sayt uslubiga qanday qilib samarali integratsiyalash mumkinligiga bir nechta misollar keltirilgan.

Foydalanish ochiq ranglar va ajoyib 3D piktogramma dizayni mukammal tarzda to'ldiradi tashqi ko'rinish Veb-sayt: GoodBarry



2D piktogramma uchun jirkanch uslubdan foydalanish chuqurlikni oshiradi: Piyoda yuring


Noyob va izchil uslubni tanlash saytga dinamizm va professionallikni qo'shadi: Squarespace


Monoxromatik piktogrammalar kontentni chalg'itmasdan ta'kidlashi mumkin: Studio 7 dizaynlari


Oddiy gradient skrinshotini noyob belgiga aylantirish kuchidan foydalaning: Gist


Belgini shunchaki ajoyib ko'rinishi uchun ishlatmang. Veb-saytingiz uslubi va brendingizga eng mos keladiganini tanlang: Treemo


4. Qo'shimcha misollar

Quyida bir nechta misollar keltirilgan samarali foydalanish piktogramma.

Belgilar joyni tejaydi va yangi ko'rinadi. Belgilar murakkab savollarga tezkor javobdir:

  • Qanday qilib yanada chiroyli qilish kerak?
  • Qanday qilib uni brendlashimiz mumkin?
  • Qanday qilib uni yanada qiziqarli qilish mumkin?

Biz piktogrammalarni yaxshi ko'ramiz. Biz chalkashishni boshlamagunimizcha.

Belgilar har xil: mahsulotlarda, arxitekturada, kompyuterlarda, roʻyxatlarda, tugmalarda, veb va ilovalar uchun, iOS va Android uchun. Uskunalar paneli piktogrammalari, imzolangan va imzolanmagan, stilize qilingan va standartlashtirilgan, rangli va monoxrom, piktogramma shriftlari, PNG yoki SVG fayllari…

Ko'plab bepul va pullik piktogramma to'plamlari, vektor va bitmap, tekis va 3D mavjud va agar siz ular bilan ishlash qoidalarini yozsangiz, sizga qalinroq daftar kerak bo'ladi. La'nati piktogrammalar shunchalik ko'pki, Iblis sizni hatto yomon dizaynni ham tortib olishiga ishontiradi.

Lekin ehtiyot bo'ling. Agar "belgi" sizning har qanday savolingizga javobingiz bo'lsa, bir kun Don Norman sizning eshigingizni taqillatadi va siz uni ochsangiz, u ko'zlaringizga tikilib aytadi:

"Tushunib bo'lmaydigan piktogrammalar interfeysni buzadi, garchi ilmiy hamjamiyat uzoq vaqtdan beri odamlar oz sonli piktogrammalarning ma'nolarini eslab qolishlarini isbotlagan. Ushbu piktogrammalarning ma'nosini eslay olasizmi? Men emas".

Bu so'zlar bilan Don Norman o'zining sobiq ish beruvchisi - Apple kompaniyasini o'rgatdi. Apple ikonotoksiaziga misollar iTunes, Mail va iOS boshqaruv panelida mavjud.

Twitterda ular Baba Yaga kabi iTunes piktogrammalari bilan qo'rqitishadi. OS X uchun Apple Mail-dan ajoyib misol: Ushbu piktogrammalarning nechtasini imzosiz taniysiz?

Ushbu misolda biz nimani ko'rmoqdamiz? Shunchaki piktogramma joyni tejaydi va yangi ko'rinadi. Tugmalarning maqsadi faqat ushbu paneldagi piktogrammalarni joylashtirgan dizaynerdan savollar tug'dirmaydi. Mingni belgi orqasida yashirish mumkin turli xil so'zlar, va bu asosiy muammo. Agar so'z ming ma'noga ega bo'lsa, kontekstni yaxshi tushunishgina nomuvofiqliklardan qochishga yordam beradi. Mana bir xil piktogrammalar, lekin taglavhalar bilan:

Sarlavhalar piktogrammalarni tushuntiradi. Ular bilan interfeys qulayroq bo'ladi. Shu sababli, ba'zi yuraksiz odamlar "eng yaxshi belgi - bu matn" deb da'vo qilishadi. Mantiqan, to'g'ri imzolar sizni chalkashlikdan qutqaradi. Xo'sh, nega biz piktogrammasiz teglardan foydalanmaymiz?

Funktsional jihatdan "sof matn" dizayni kundek ravshan (agar axborot arxitektorlari o'z ishini bajargan bo'lsa), lekin interfeysdan tasvirlarni olib tashlaganingizda nimadir buziladi. Hayot uni tark etadi. U yangi va quvnoq bo'lishni to'xtatadi. Bu dizayn pozitivistiga taalluqli emas. Ammo bu boshqa odamlarni tashvishga soladi. Biz ushbu farazni iA Writer-dan piktogrammalarni olib tashlash orqali sinab ko'rdik. Foydalanuvchilarning reaktsiyasi "Qilmasin!"

Balki matn va piktogramma o'rtasida tanlov qilmaslik, lekin qachon faqat piktogramma, qachon faqat matn va qachon sarlavhali piktogrammalardan foydalanishni tushunish yaxshiroqdir. Keling, bilib olaylik...

Faqat piktogramma

Belgilar - bu rasmlar. Rasmlarda oddiy narsalarni ko'rsatish oson. Tanish tushunchalarni ifodalovchi osongina tanib olinadigan ob'ektlarni tasvirlaydigan piktogramma uchun yorliq kerak emas. Masalan, aeroportlar uchun samolyotlar, hojatxonalar uchun inson figuralari, biz tez orada tashlab yuboradigan hujjatlar bor joylar uchun savat.

Moddiy ob'ektlarni tasvirlash oson, lekin harakatni ko'rsatish zarurati yoki mavhum tushuncha ko'plab dizaynerlarni azob chekishga majbur qildi. Muammo shundaki, inson va kompyuter o'zaro ta'sirida aksariyat piktogrammalar harakatlar va mavhumlikdir.

Harakat haqiqiy ekanligini ko'rsating. Animatsiyalangan belgi chalg'itadi, harakat metaforasini qo'llash yaxshiroqdir. Kompyuter ish stoli kontekstida printer belgisi "Chop etish", axlat qutisi "O'chirish", qaychi "Kesish" degan ma'noni anglatadi. Ushbu ob'ektlarning har biri o'ziga xos maqsadga ega, shuning uchun maqsadli harakatni tushunish oson.

Murakkab harakatlar va abstraktsiyalar bilan bu endi ishlamaydi. Va yaqin kelajakda biror narsa o'zgarishiga umid yo'q. Inson va kompyuterning 40 yillik oʻzaro taʼsiri davomida biz saqlash, nusxalash va joylashtirish kabi asosiy funksiyalar uchun universal belgilarni topa olmadik.

"Piktografik tizimlarning umumiy muammosi shundaki, ularning yagona cheklovi tasvirda ko'rsatilishi mumkin bo'lgan tashqi dunyo ob'ektlari sonidir".

Funktsional interfeys elementlaridagi yalang'och piktogrammalar foydalanish qulayligini yomonlashtiradi. Eng yaxshi yo'l xususiyat haqida xabar bering - rasm emas, balki so'z. Agar bu fe'l bo'lsa, undan ham yaxshi.

"Odamlar o'rtasida doimo nomukammal fikr almashish haqida gap ketganda, biz odamlar uchun eng yaxshi narsa bu nutqdir. Yozma nutq fikrlarga uzoq umr va aniqlik beradi (biz nutqimizni kamdan-kam tuzatamiz va men bu jumlani bir necha marta tuzatdim).

Vizual ravishda grafik belgilar zich so'zlarga qaraganda sodda va jozibali. Ammo qanchalik yaqinlashsangiz, sirenalar yirtqich hayvonlarga o'xshaydi. Ularni o‘qishga va tushunishga harakat qilganingizda, ular siz bilmagan tildagi sirli belgilarga aylanadi, o‘zaro ta’sirni ushlaydi va uning boshini tishlaydi. Yalang'och piktogrammalar interfeysning ko'rinishini yaxshilaydi va uning ravshanligini pasaytiradi. Ular qorong'u belgilar qatlami bilan niqoblash orqali aniq funktsiyalarni yashirishadi.

“Ikonka – bu har qanday tilda birdek tushunib bo‘lmaydigan ramz. Qaysi tillarni bilmasligingizdan qat'iy nazar, ikonaning ma'nosini o'rganishingiz kerak bo'ladi. Odamlar shunchaki o'ylamaydilar fonetik tillar, bu erda har qanday so'zni yaratish uchun bir nechta belgilarni birlashtira olasiz. Ko'pgina dizaynerlar meni interfeysda piktogrammalardan foydalanishga ishontirishdi. Men ulardan so'radim: "Bu haqiqatan ham siz o'ylashingiz mumkin bo'lgan eng yaxshi interfeysmi yoki bu odat tufaylimi?" Dizaynerlar shunchaki ushbu paradigmaga yopishib olishadi va uning pasayishini sezmaydilar.

Belgilar moda ko'rinadi va bo'sh joy etishmasligi bilan bog'liq muammolarni hal qiladi. Albatta, yalang'och piktogrammalarni suiiste'mol qilishda yagona Apple aybdor emas. Googlening moddiy dizayni brending bilan zaharlangan. Mana Gmail taqqoslash:

Bu erda nimani ko'rmoqdamiz? Gmail piktogrammalari oddiy ko'rinadi, lekin ular sizni tugmalarning maqsadi haqida o'ylashga majbur qiladi. Agar siz diqqatni jamlab, bir oz konsentratsiya qilsangiz, taxmin qilishingiz mumkin. Biroz vaqt o'tgach, mushak xotirasi sizga yordam beradi, ammo qisqa muddatli va uzoq muddatli xotira ularni bir xil qiyinchilik bilan qabul qiladi. Elektron pochta ilovasida konsentratsiya va diqqatni interfeysni ochishga emas, balki matnni tushunish va yozishga qaratish kerak.

STOP! Google hamma narsani o'lchamaydimi? Ular nima qilayotganlarini aniq bilishadi, to'g'rimi? U erda olimlar ishlaydi. Ular ikonsiz yondashuvni tanladilar va ular hech qachon xato qilishmaydi. Shunday qilib, piktogrammalar to'g'ri! Ehtimol, lekin Google yoki Facebook-ga mos keladigan narsa bizga mos kelmasligi mumkin. Quyida muhokama qilinganidek, Google sababni tabiiy fanlardan tashqarida topgan bo'lishi mumkin. Qanday bo'lmasin, Google ochiq matnli variantni ham taklif qiladi.

Faqat matn

Rasmlar turli yo'llar bilan talqin qilinishi mumkin. Kontekstga qarab, hatto hamma joyda joylashgan kattalashtiruvchi oyna ham "qidirish" va "kattalashtirish" ni o'qiydi. So'zning ma'nosi ham kontekstga bog'liq, lekin u doimo bir xil o'qiladi. Belgilar matn bilan almashtirilsa-chi? Bunday interfeys ikonikdan ko'ra yaxshiroq ishlashi mantiqan to'g'ri. Gmail sozlamalarida siz piktogramma satrini matnli versiya bilan almashtirishingiz mumkin:

Nima sodir bo `LDI? Endi tugmalarning ma'nosi aniq. Ammo interfeys kamroq odamga aylandi, kamroq qiziqarli. U ishlaydigan asbobga o'xshaydi, sovuqroq bo'lib qoldi va ajablanarli darajada murakkabroq ko'rinadi. Bu qanday bo'lishi mumkin? Matn interfeysi ob'ektiv ravishda qulayroq, ammo estetik nuanslar tufayli u shunday qabul qilinmaydi.

Matn oqilona tanlovdir. To'g'ri tuzilgan va nomlangan funktsiyalar inson va kompyuter o'zaro ta'sirining asosidir.

Belgilar hissiy tanlov. To'g'ri piktogramma ijobiy qo'shiladi. Hissiy ta'sirni o'lchash mumkin emas, lekin bu uni haqiqiyroq qilmaydi.

“Ishlaydigan, tushunarli va ishlatish uchun qulay mahsulotlar yaratishning o‘zi yetarli emas. Quvonch va hayajon, quvonch va o'yin-kulgi va, albatta, go'zallik keltiradigan mahsulotlarni yaratish kerak inson hayoti- Don Norman "Kundalik narsalar dizayni" filmida.

Insonlar ham aqlli, ham hissiy mavjudotlardir: “Miya axborotni qayta ishlamaydi, bilimlarni ajratmaydi va xotiralarni saqlamaydi. Qisqasi: miya kompyuter emas. Agar piktogrammaning qulayligi mavzusida biror narsa isbotlangan bo'lsa, bu "taglavhali piktogrammalar sof piktogramma yoki sof matndan ko'ra yaxshiroq ishlaydi".

Imzo belgisi

Imzoli belgi ham hissiy, ham tushunarli. Sarlavhali piktogramma har doim ishlaydi. Agar belgi tushunarsiz bo'lsa, sarlavha tushuntiradi. Xo'sh, nega bu juftlik g'oliblaridan foydalanmaslik kerak?

Muammo shundaki, bu murosa. Bu piktogrammalarning hissiy xabarini va toza matnning soddaligini pasaytiradi. Bu joyni saqlamaydi va tashqi ko'rinishni bezatmaydi. U ko'proq vertikal joy egallaydi va sof piktogramma yoki sof matnga qaraganda ko'proq vizual shovqin yaratadi.

Hissiy jihatdan biz piktogrammalarni afzal ko'ramiz. Belgilarni matn bilan almashtirish biz uchun oqilona. Nazariy jihatdan, imzosi bo'lgan belgi g'alaba qozonadi. Amalda, dizayndagi kumush o'qlar yo'q.

G'alaba qozonish variantlari yo'q, lekin yaxshiroq va yomonroq murosalar mavjud. Biz odamlar uchun ishlaymiz. Odamlar his qiladi va o'ylaydi. Garchi relativizmga kirmaslik yaxshiroqdir.

Nazariya va amaliyot

Har qanday texnologiya singari, u ratsional, funktsional tuzilma ustiga interfeyslarni yaratishga yordam beradi. Dizayn tabiiy fan emas. Bu ilm-fan va o'lchovdan foyda keltiradigan amaliyotdir, lekin dizayn sifatini faqat ob'ektiv o'lchov bilan baholab bo'lmaydi. Foydalanuvchi testlari va tahlillari dizaynerlarni almashtirmaydi, balki dizayn taxminlarini sinab ko'radi. Mahsulotda dizayner o'ylashdan ko'ra ko'proq narsa bor va dizaynda biz o'lchashimiz mumkin bo'lgan narsadan ham ko'proq narsa bor. Bu "ko'proq" faqat mahsulotni ishlatadigan odamlar bilan gaplashish orqali qoplanishi mumkin.

Insonning kompyuter bilan aloqasi oqilona asosga qurilgan. Biz tirik mavjudotmiz, xatti-harakatlarimizni hisoblab bo'lmaydi, lekin biz bilan gaplashish mumkin. Belgilar, ranglar, ritm, havo, tipografiya va boshqa chiroyli narsalar interfeysni yanada yoqimli qiladi va shu bilan o'zaro ta'sirni yaxshilaydi. U unchalik mantiqiy emasga o'xshaydi. U odamga o'xshaydi.

Oddiy Qoidalar

Agar dizaynda biror narsa noto'g'ri bo'lsa, piktogramma qo'shishga shoshilmang, agar u rejalashtirilganidek ishlamayapti deb o'ylasangiz. Belgilar yomon sayt tuzilishini tuzatmaydi. Ularni eng oxirida qo'shing. Ramka ustida ishlayotganda piktogramma bilan o'ynamang. Bitta rasm minglab so'zlarni yashirishi mumkin. Yaxshi axborot arxitekturasi to'g'ri so'zlarni to'g'ri kontekstga qo'yadi. Hissiy qismga o'tishdan oldin ratsional qism bilan ishlang.

Belgi bo'lim yoki funktsiyani bildiradi. Bu oddiy va tushunarli ma'noni bildiruvchi so'zning bir turi. Xabarning ma'nosi kontekstga bog'liq. Agar so'z tushunarsiz tanlangan bo'lsa yoki kontekstga mos kelmasa, hatto eng chiroyli piktogramma ham foydasiz bo'ladi. Belgini tanlashdan oldin, o'zingizdan so'rang: u qaysi so'zni anglatadi? Bu to'g'ri so'z? Tushunarlimi? Bu kontekstda ishlaydimi? Belgi juda ko'p turli tushunchalarni yashirishi mumkin. Kontekstdagi so'zlar unchalik plastik emas. Piktogrammalardan farqli o'laroq, ular ko'plab qoidalarga amal qilishadi.

Sizning tuzilmangiz tayyor bo'lganda va piktogramma, qiziqarli va hamma narsa o'ynash vaqti kelganida, oddiy qoidaga amal qiling: kerakli minimal piktogramma qo'shing, lekin kam emas.

Belgilarga juda ehtiyotkorlik bilan munosabatda bo'ling. Ularni yaxshilash barcha vaqtingizni oladi. Ular o'zlari tanib olishlari, o'zlari ifodalagan kontseptsiyani aniq tasvirlashlari va boshqa piktogramma va tushunchalar bilan kontekstda ishlashi kerak.

Belgilar oddiy matndagi sifatlar va qo'shimchalardir. Ularni olib tashlash sizning matningizni adabiy asarga aylantirmaydi. Ortiqcha narsalarni o'chiring, to'g'risini qidiring, noaniq va da'vogar formulalarni aniq va ixcham shakllar bilan almashtiring.

Insho iA mutaxassislari tomonidan yozilgan.


Biz har kuni kompyuterdan foydalanganda piktogrammalarga duch kelamiz, chunki. ular zamonaviy uchun ishlatiladigan grafik interfeyslarning asosini tashkil qiladi dasturiy ta'minot. Bu kichik rasmlar fayllar (jumladan, veb-sahifalar) va dasturlarni tasvirlash va buyruqlarni bajarish uchun ishlatiladi.

Biz piktogrammalardan qanday foydalanamiz?

Belgilar ish stolida yoki dasturlar ichida qulay tarzda joylashgan va bosishni kuting (bir yoki ikki marta). Ularni tanib olish oson, ular ifodalaydi qulay usul buyruqlar va menyular vayronalarini aylanib o'tmasdan to'g'ridan-to'g'ri kerakli funksionallikka kiring.

Qoida tariqasida, rasm piktogramma bog'langan dastur yoki faylning maqsadi bilan bog'lanadi. Misol uchun, elektron pochta dasturining belgisi konvertni, media pleer belgisi esa musiqa notasini yoki o'ngga ishora qiluvchi keng tarqalgan uchburchak o'qni ko'rsatishi mumkin.

Ikonkalar qanday ishlab chiqilgan?

Tuzilishi bo'yicha piktogrammalar standart o'lchamlarga ega, odatda juda kichik - 16x16 dan 48x48 pikselgacha (Mac-da - 128x128 gacha, Windows Vista-da - 256x256 gacha). Bitta piktogramma odatda bir nechta grafiklarni, shu jumladan shaffof maydonlarni o'z ichiga oladi, shunda ish stoli fonini u orqali ko'rish mumkin. Shu sababli, belgi o'zi joylashgan ish stoli yoki asboblar paneli ustida joylashganga o'xshaydi.

Belgida Windows yoki Mac OS ga ma'lum bir vaziyat uchun eng mosini ishlatishga imkon berish uchun turli o'lchamdagi va rangdagi bir nechta rasmlar mavjud. Ushbu tanlov kompyuter monitorining rejimiga va belgi paydo bo'lishi kerak bo'lgan joyga bog'liq. Masalan, Windows vazifalar panelida ko'rsatiladigan piktogrammalar odatda 16x16, ish stolidagi piktogrammalar esa 48x48.

Belgilar uchun qanday formatlar qo'llaniladi?

Windows piktogrammalarida "ICO" kengaytmasi, Mac piktogrammalarida esa "ICNS", "RSC", "RSRC" yoki "BIN" kengaytmalari mavjud. Bitta piktogramma (barcha o'zgarishlarni o'z ichiga olgan holda) bitta faylda joylashgan, piktogramma guruhlari kutubxonalarga birlashtirilgan.

Windows XP piktogrammalarining farqi nimada?

Windows XP uchun piktogrammalar Windows XP uslubini to'ldiradigan boy ranglar va silliq qirralarga ega. Ularning qirralari odatda biroz yumaloq bo'lib, yorug'lik manbai yuqori chap burchakda joylashgan bo'lib, tarqalgan yorug'lik rasmning boshqa qismlarini yoritadi.

Gradientlar, konturlar va soyalar belgiga o'lcham va kontrast qo'shish uchun ishlatiladi. XP-dagi ba'zi piktogrammalar panoramali ko'rinishga ega, hujjatlar uchun ishlatiladigan yoki belgilar yoki bitta ob'ektni tasvirlaydigan piktogrammalar "yuzga" aylantiriladi. Umuman olganda, ularni zamonaviy va sifatli deb ta'riflash mumkin.

XP da, boshlash menyusining o'ng tomonidagi piktogrammalar 24x24, asboblar panelida ishlatiladiganlar esa 24x24 yoki 16x16. Tizim 32-bitli piktogrammalarni qoʻllab-quvvatlaydi, ular aslida 8-bitli alfa-kanalga ega 24-bitli grafiklar boʻlib, piktogrammalarning chetlarini silliq koʻrinishga olib keladi va fon bilan uygʻunlashadi.

Windows XP piktogrammalarida turli xil monitor sozlamalarini qo'llab-quvvatlash uchun uchta rang mavjud: 8 bitli alfa bilan 24 bitli, 1 bitli shaffofligi bilan 8 bitli (256 rang) va 1 bitli shaffoflik bilan 4 bitli (16 rang).

  • Tarjima

Tarjimondan.
Bu Filipp Bernardning css-tricks.com saytidan tarjimasi. Men maqolaning u yaratgan xizmat bilan ishlash tavsifini o'z ichiga olgan qismini o'tkazib yuborishga ruxsat berdim. Xatolarni topsangiz, ularni shaxsiy xabar orqali xabar qiling.

Maqolada uning turli holatlarda yaxshi namoyon bo'lishi uchun favikon nima bo'lishi kerakligi (va uning o'rnini bosadigan narsa) haqidagi tadqiqot natijalari mavjud.

Favikon 1999 yilda Internet Explorer 5 () da taqdim etilgan va bir necha oydan keyin W3C tomonidan standartlashtirilgan. Bu saytni ifodalovchi kichik belgi edi.

O'shandan beri ko'pchilik ish stoli brauzerlari bu tendentsiyaga ergashdilar va favikonni u yoki bu tarzda ishlatdilar. Bu juda oddiy, shunday emasmi? Kichik rasm yarating va uni "to'liq" qilish uchun har qanday internet loyihasiga qo'shing. Hech narsa murakkab emas. Yoki yo'q?

Keling, viktorina qilaylik!

Asosiy favikon fayli nima?

Javob: favicon.ico Ishonch hosil qilish uchun, bu favicon.ico deb o'zgartirilgan PNG emas. Ba'zi brauzerlar bu xatoni kechirsa-da, ICO tasvirning bir nechta versiyasini qo'llab-quvvatlaydigan boshqa formatdir.

Savol: favicon.ico qanchalik katta bo'lishi kerak?

Javob: 16x16. Standart.
B: 32x32. Favikon biroz oldin yangilanmaganmi?
C: 64x64.
D: Yuqoridagilarning hech biri.

Javob: D.

Favicon.ico formati dastlab Microsoft tomonidan ishlab chiqilgan va bir qancha boshqa ishlab chiqaruvchilar tomonidan qo'llab-quvvatlangan. Microsoft 16x16, 32x32 va 48x48 o'lchamlarini tavsiya qiladi. Ha, bitta ICO bir nechta tasvirni o'z ichiga olishi mumkin.

Brauzerlar odatda favikonni yorliqlarda ko'rsatadi va oddiy ruxsatlarda 16x16 versiyasi yaxshi ko'rinadi:

Chrome yorlig'ida 16x16. Hozirgacha juda yaxshi.

Ammo 16x16 belgisi boshqa joylar uchun juda kichik: vazifalar paneli va ish stoli.

Vazifalar panelida 16x16.


Ish stolida 16x16. Yaxshi emas.

Belgida bir nechta rasm bo'lsa, natija ancha yaxshi bo'ladi.

Vazifalar panelidagi 16x16, 32x32 va 48x48 favicon.ico. Oddiy dasturga o'xshaydi.


Ish stolida 16x16, 32x32 va 48x48 favicon.ico. Mukammal.

Savol: favicon.png nima maqsadda?

Aslida, boshqa fayl favicon.png ko'proq tarqalgan. Odamlar bu haqda tez-tez so'rashadi.
Bu aslida nima?

Javob: favicon.ico-ni qo'llab-quvvatlamaydigan brauzerlar uchun belgi. Firefox kabi, ehtimol?
B: Yuqori aniqlik belgisi. Bilasizmi, bu yangi yuqori pikselli zichlikdagi ekranlar bilan.
C: O'tmishdagi artefakt. Endi bu yangi piktogrammalar, masalan, Apple Touch belgisi.
D: Hammasi birga.

Javob: D.
HTML5 qabul qilinganidan beri favicon.ico unchalik foydali emas. Atribut kiritildi o'lchamlari, bir nechta e'lon qilish imkonini beradi turli versiyalar bir xil belgi va bu PNG fayllari bo'lishi mumkin:

Xo'sh, biz nimani e'lon qilishimiz kerak?

Keling, tan olaylik. Deyarli barcha ish stoli brauzerlari favicon.ico-ni qo'llab-quvvatlasa-da, bu fayl eskirgan. Ha, siz hali ham ushbu fayldan foydalanishingiz mumkin va hamma narsa mo'ljallanganidek ishlaydi. Ammo jiddiy tarzda, bu eskirgan format. U internetdan boshqa joyda ishlatilmaydi. PNG yaxshi qo'llab-quvvatlanadi.

Favicon.ico - IE ning eski versiyalari uchun. Boshqa brauzerlar uchun va oxirgi versiyalari IE PNG piktogrammalaridan foydalanadi. Xo'sh o'lchamlari aniqlash kerakmi? Tez orada bilib olamiz.

Savol: Mobil platformalarni qo'llab-quvvatlash uchun qanday format kerak?

SmartInsights ma'lumotlariga ko'ra, veb-trafikning 26% dan ortig'i smartfon va planshetlar tomonidan yaratilgan. Bu kelajak. Bu dunyoni saqlab qolish uchun nima kerak?

Javob: favicon.ico. U 15 yil oldin ishlagan va hozir ham ishlaydi.
B: PNG piktogrammalari. Bu haqda gaplashaman dedingiz.
C: Apple Touch belgisi. Qopqoq.
D: Bu erda hali ham to'g'ri javob yo'q.

Javob: D. PNG piktogrammalari kerak. Va Apple Touch belgisi. Va Windows 8 uchun plitkalar. Va browserconfig.xml deb nomlangan fayl.

Mobil platformalar oddiy ish stoli brauzerlariga qaraganda ancha heterojendir. Ekran o'lchamlari va o'lchamlari juda farq qiladi va hech qanday ustunlik yo'q operatsion tizim, masalan, Windows, Internet davrida bo'lgani kabi.
Xulosa: Mobil favikon bitta umumiy tasvir yoki umumiy HTML deklaratsiyasiga ega bo'lishi mumkin deb o'ylamang.

Savol: PNG piktogrammalarining o'lchami qanday bo'lishi kerak?

Javob: Google TV uchun 96x96
B: Android Chrome uchun 196x196
C: Opera Coast uchun 228x228
D: Yuqoridagilarning barchasi

Javob: D, va undan ham ko'proq. Masalan, 160x160 uchun eski versiya Opera tez terish (uzoq o'tib ketgan) yoki Chrome internet-do'koni uchun 128x128, barchasi siz qo'llab-quvvatlamoqchi bo'lgan platformaga bog'liq.

Savol: Apple Touch belgisining o'lchami qanday?

Apple Touch belgisi iOS tomonidan xatcho'plar va "uy ekran" saytlari uchun ishlatiladi. 57x57 xayolimga keladi bravo. Bu to'g'ri. Faqat 7 yil oldin birinchi iPhone chiqarilgan.

Javob: 180x180 gacha.

Birinchi iPhone paydo bo'lganidan keyin 3 ta muhim relizlar paydo bo'ldi:

  • iPad. Kattaroq ekran bilan.
  • Retina ekranlari. Ikki marta piksel zichligi bilan.
  • iOS7. Yassi dizayn iPhone/iPad da boshqacha.
Hammasi bo'lib 9 ta kombinatsiya mavjud.
Qurilma Ekran iOS versiyasi Belgi o'lchami
iPhone Klassik 6 va undan past 57x57
7 60x60
to'r pardasi 6 va undan past 114x114
7 120x120
6 Plus 8 va undan yuqori 180x180
iPad Klassik 6 va undan past 72x72
7 76x76
to'r pardasi 6 va undan past 144x144
7 152x152



Yaltiroq Retina iPad-dagi 57x57 eski Apple Touch belgisi. Bulutli.


Retina iPad-dagi katta 152x152 Apple Touch belgisi. Ehtiyotkorlik bilan.

Agar siz noto'g'ri javob bergan bo'lsangiz, tushkunlikka tushmang. Apple-touch-icon.png taqdim etuvchi 5000 ta mashhur saytlarning 4% dan kamrog‘i buni to‘g‘ri bajaradi.

Ba'zilar, 9 ta rasmning barchasi haqiqatan ham kerak emas deb ta'kidlashi mumkin. Biroq, hech bo'lmaganda asosiy Apple Touch belgisi 152x152 bo'lishi kerak. iOS 7 ostidagi Retina iPad kerakli narsani topadi va yoshroq qurilmalar tasvirni qisqartirishi mumkin.

Savol: HTML-da Apple Touch belgisini e'lon qilish kerakmi?

Javob: Bilmayman. Javob bo'lishi kerak!
B: Ha. Aks holda, iOS ularni qanday topadi?
C: Yo'q. Apple tavsiyalar beradi, shuning uchun har kim iOS qurilmasi hali ham ularni kiygan.
D: Yo'q, lekin ...

Javob: D… lekin ba'zi boshqa platformalar ham Apple Touch belgisidan foydalanadi, ularni e'lon qilish yaxshiroqdir.

Qanchalik g‘alati tuyulmasin, iOS qurilmalari Apple Touch belgisini izlayotgan yagona qurilmalar emas. Ular boshqa yuqori aniqlikdagi PNG piktogrammalariga qaraganda mashhurroq va keng tarqalganligi sababli, Android Chrome kabi ba'zi brauzerlar ulardan foydalanadi. Shunday qilib, ularni e'lon qilish yaxshiroqdir, bu mos keluvchi qurilma yoki brauzerga ega bo'lgan tashrifchiga ulardan birini ishlatish imkonini beradi.

Savol: Windows 8 da planshetlar uchun plitkani qanday e'lon qilishim mumkin?

Javob: Windows 8 da planshetmi? Bu nima?
B: favicon.ico Stiv Ballmerning merosi.
C: Meta teglar. Ikki msapplication-TileColor Va msapplication-TileImage.
D:browserconfig.xml.

Javob: Windows 8 va IE 10 uchun C, Windows 8.1 va IE 11 uchun D. A javob ham biroz to'g'ri.

Windows 8.0 uchun e'lon quyidagicha ko'rinadi:

Windows 8.1 va IE 11 brauzerconfig.xml da e'lon qilingan tasvirning bir nechta versiyalarini kutadi. Masalan:
#2b5797
Yangi Metro interfeysi bir nechta yangi dizayn tamoyillarini taqdim etadi, masalan, oldindan o'rnatilgan dasturlarning ko'pchiligi tomonidan ishlatiladigan "oq siluetlar".


Windows 8 da sayt plitkalari.

Savol: Kvadrat 150x150 logotipli kafelning o'lchami qanday?

Javob: 150x150. O'qiy olmaysizmi?
B: Boshqa.

Javob: B, 270x270.

“GetGoodRank blogining bosh muharriri, veb-tahlilchi, blogger.
Saytda piktogrammalarni qanday loyihalash va qo'llash kerak? haqida gaplashamiz oddiy qoidalar piktogrammalarning qulayligi, shuningdek, tekshirish uchun oddiy nazorat ro'yxati.

Belgi - bu dasturni, funksiyani yoki sayt/ilovaning tematik qismini bildiruvchi grafik interfeysning sxematik elementi. Belgilar oddiy, qisqa va samarali. Ular ilova yoki veb-saytning grafik interfeysini soddalashtirish, shuningdek, foydalanuvchi bilan aloqani soddalashtirish va tezlashtirish uchun ishlatiladi ( inson ongi grafiklarni matndan ko'p marta tezroq qayta ishlaydi va "tushunadi"). Belgilar vazifalariga ko'ra tasniflanadi:

  • Navigatsiya piktogrammalari- funksiyani ko'rsatish uchun ishlatiladi: uzun sahifa bo'ylab harakatlanish uchun yuqoriga va pastga navigatsiya strelkalari, savatga o'tish uchun savat, qidiruv panelini faollashtirish uchun kattalashtiruvchi oyna.
  • Ma'lumot piktogrammalari- bo'lim mavzusini ko'rsating. Masalan, kesishgan asboblar ko'pincha texnik ma'lumotlarga ega bo'limni, vites sozlamalari bo'lgan bo'limni, mashina etkazib berish ma'lumotlarini, 24/7 raqamlari 24 soatlik ish jadvalini va boshqalarni ko'rsatadi.
  • Harakatga chaqiruv piktogrammalari- ko'pincha aniq harakatlarni ko'rsatish uchun ishlatiladi. Misol uchun, ilovani yuklab olish sahifasida qalin pastga o'q dasturiy ta'minotni yuklab olish uchun qo'ng'iroqni bildiradi, mahsulot sahifasida plyus mahsulotni savatga qo'shish uchun qo'ng'iroqni bildiradi va hokazo.

Belgilar uchun foydalanish qoidalari

Barcha piktogrammalar foydalanuvchilar uchun bir xil darajada tushunarli emas, ayniqsa sayt individual uslubdan foydalansa va umumiy qabul qilingan standartlardan chetga chiqsa. Belgilar to'g'ridan-to'g'ri dizayn va foydalanuvchi bilan aloqani soddalashtirish funktsiyasini bajarishi uchun quyidagi qoidalarga rioya qiling:

1. Murojaat qiluvchi matn- turli saytlar hatto turli maqsadlar uchun standart piktogrammalardan foydalanadilar. Shunday qilib, standart kattalashtiruvchi oyna saytni qidirishni yoki tasvirni kattalashtirish / kattalashtirishni anglatishi mumkin. Grafik belgilar ikki shaklda talqin qilinishi mumkin. Foydalanuvchining vazifasini soddalashtirish uchun siz piktogramma matn bilan birga bo'lishingiz kerak. Bu asosan navigatsiya piktogrammalariga tegishli. Matn va grafik ikkalasiga qaraganda ancha yaxshi ishlaydi.

2. Bir xil uslub- Belgilar bir xil uslubda tayyorlanishi kerak. Minimal miqdordagi tafsilotlar bilan sxematik tasvirlardan foydalanish yaxshiroqdir. Belgi umumiy dizayn kontseptsiyasida osongina ajralib turishi va foydalanuvchi uchun tushunarli bo'lishi kerak. Saytda turli xil vazifalarni bajaradigan piktogrammalar turli tushunchalarda amalga oshirilishi mumkin. Biroq, turli xil grafik uslublarni qo'llashda ortiqcha rang-baranglikdan qochish kerak. Esda tutingki, belgi foydalanuvchining sayt bilan o'zaro aloqasini soddalashtirish uchun mo'ljallangan, aksincha emas, balki uni belgilarda yashiringan funktsiyalarni o'rganishga majbur qilish uchun.

3. Bosish qobiliyati- harakat mavjud bo'lgan piktogrammalar bosish qobiliyatini vizual ravishda ko'rsatishi kerak: kursorni ustiga olib borishda, rangni o'zgartirishda, kattalashtirishda ta'kidlash. Bu foydalanuvchiga ikonka nafaqat GUI elementi emas, balki funktsional ekanligini aniq ko'rsatadi. Animatsiyani minimal darajada saqlang.

4. 5 soniyani sinab ko'ring- individual piktogramma kontseptsiyasini ishlab chiqishda (nostandart piktogrammalardan foydalangan holda) 5 soniya davomida sinab ko'ring. Agar 5 soniya ichida siz ikonkani aniqlay olmasangiz va u saytda nimani anglatishini tushuna olmasangiz, dizaynda ushbu grafik belgiga ruxsat berilmaydi. Bu foydalanuvchining maqsadga erishish yo'lida qo'shimcha to'siqlarni keltirib chiqaradi: saytdagi ma'lumotlarni o'rganish, mahsulot / xizmatni tanlash.

5. Hajmi muhim- juda kichik bo'lgan belgilar dizaynda e'tibordan chetda qolish xavfini tug'diradi, juda katta piktogrammalar esa chalkashtirib yuborishi, boshqa elementlarga ustunlik qilishi va e'tiborni o'ziga jalb qilishi mumkin (ayniqsa, katta piktogrammalar rang bilan ajratilgan bo'lsa).

Belgilarning yaroqliligini qanday tekshirish mumkin

Saytdagi piktogrammalarning yaroqliligini tekshirish uchun quyidagi savollar roʻyxatidan foydalaning:

  • Sayt yoki dastur interfeysida belgini topish osonmi?
  • Belgi interfeysda qanchalik uyg'un ko'rinadi? Bu umumiy dizayn kontseptsiyasini buzadimi?
  • Belgisi foydalanuvchi uchun kutilgan joydami?
  • Belgi sahifaning asosiy mazmunini buzadimi?
  • Belgining ma'nosi foydalanuvchi uchun tushunarlimi?
  • Saytning mobil versiyasida belgi qanday ko'rinishga ega? Sensorli ekrandan u bilan muloqot qilish osonmi?
  • Bu belgi boshqa, qoʻshni boʻlmagan harakatlar bilan bogʻlanganmi? Bu saytdan foydalanishda qo'shimcha qiyinchiliklar tug'diradimi? Belgi noto'g'ri harakatlarga olib keladimi?
  • Ushbu kontekstda belgi nimaga biriktirilganligini ko'rsatish uchun kerakmi? Busiz qilish mumkinmi?

 

O'qish foydali bo'lishi mumkin: