Er zijn verschillende redenen om een afbeelding (pictogram) menu te maken in WordPress. Ten eerste is het goede manier bespaar ruimte door de titel van de startpagina te vervangen door "huis". Ten tweede zeggen sommige symbolen veel meer dan tekst waarden — Facebook-knoppen, Twitter, enz. En ten slotte, ten derde, grafische elementen kan de navigatie intuïtiever maken door bijvoorbeeld afbeeldingen toe te voegen aan een lijst met categorieën. Je kunt alle drie de opties zien in het postvoorbeeld aan de linkerkant. En hieronder vertel ik je hoe je ze kunt implementeren.
Dus in wezen zijn er drie fundamenteel: andere methode pictogrammen invoegen in WordPress-menu:
In het eerste geval moet je een beetje "coderen", wat niet alle beginners kunnen. De tweede is meer gericht op volwaardige afbeeldingen, in plaats van op tekenlettertypen. De derde is over het algemeen universeel.
WP-menupictogrammen met lettertype Awesome
Eerder schreef ik een uitgebreid artikel over het gebruik. Het bevat codevoorbeelden voor het toevoegen van symbolen aan titels, inhoud en navigatie van widgets. Al is de laatste optie daar op een iets andere manier geïmplementeerd dan in de huidige post. Je kunt het bekijken als je geïnteresseerd bent.
1. Dus om een afbeelding in het WordPress-menu in te voegen, gaan we eerst in het admin-paneel naar de sectie " Verschijning"-"Menu ". Creëren nieuw item u kunt door de site navigeren via "Pagina's" of "Willekeurige links".
Welke methode je ook kiest, het belangrijkste is om de code toe te voegen in het veld "Linktekst" Lettertype Geweldig, bijvoorbeeld voor de belangrijkste:
add_action ("wp_enqueue_scripts", "enqueue_font_awesome"); functie enqueue_font_awesome () (wp_enqueue_style ("font-awesome", "//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css");)
Het is niet nodig om het script te downloaden, het wordt rechtstreeks van de officiële website van de service geladen. Daar, in het gedeelte Pictogrammen, kunt u de codes van andere pictogrammen voor het WordPress-menu zien.
In sommige artikelen merkte ik dat ontwikkelaars lijnen in hun stijlen op type opnemen:
| # menu-item-121 a, # menu-item-122 a (font-familie: FontAwesome;) |
# menu-item-121 a, # menu-item-122 a (font-familie: FontAwesome;)
Hier zijn twee elementen met ID-nummers 121 en 122 (zie HTML-code) gespecificeerd om een tekenlettertype te gebruiken. Misschien is het wat oude versie implementatie, aangezien in mijn geval was er niets anders nodig dan het aansluiten van het script. Voor het geval dat, bied ik deze stijlen daarnaast aan.
Een belangrijke nuance/probleem! Aangezien de tekst in dit item in feite afwezig is, is in mobiele versie navigatiebalk "Home" zal niet verschijnen. Daarom, als adaptief menu in het thema automatisch wordt gemaakt, kan het zijn dat u een dergelijke implementatie moet verlaten ten gunste van de optie van. Stel in dit geval de eigenschap text-indent: -99999px in op de tekst in CSS en stel de weergave van het pictogram in het before pseudo-element in.
WordPress afbeeldingsmenu plug-in
2. Deze techniek voegt een nieuw element toe aan de clausules - de stijlklasse. We geven de naam aan in het gewenste object, bijvoorbeeld mijn— menu.
3. Ga vervolgens naar het gedeelte "Media" en download de afbeelding die u wilt weergeven.
4. Open daarna de template-stylesheet (style.css) en plak daar de volgende code:
| .mijn-menu (achtergrondafbeelding: url ( "http: //uw_site/wp-content/uploads/menuimg.png"); achtergrondherhaling: geen herhaling; achtergrondpositie: links; opvulling-links: 20px; ) |
Mijn-menu (achtergrondafbeelding: url ("http://your_site/wp-content/uploads/menuimg.png"); background-repeat: no-repeat; background-position: left; padding-left: 20px;)
Sla op en bekijk het resultaat.
In principe is er, zoals ik hierboven al zei, verschillende nuances... Ten eerste zou het mogelijk zijn om helemaal geen nieuwe klasse aan te maken, maar gewoon naar de HTML-code van de site te kijken en stijlen te schrijven, bijvoorbeeld voor # menu-item-121 enzovoort. - het systeem voegt automatisch een ID toe aan elk navigatiepunt.
Ten tweede, gegeven voorbeeld het gebruik van de CSS-achtergrondeigenschap kan worden vervangen door hetzelfde Font Awesome:
| li # menu-item-2996 a: voor (inhoud: " \ f015 "; font-familie: FontAwesome; opvulling-rechts: 7px; ) |
li # menu-item-2996 a: before (content: "\ f015"; font-family: FontAwesome; padding-right: 7px;)
Het hangt allemaal af van wat voor soort probleem je wilt oplossen. WordPress-plug-in want een menu met afbeeldingen maakt het werk van beginnende gebruikers veel gemakkelijker, hoewel het misschien een beetje overbodig is. De optie Font Awesome is ideaal als uw site dit script al gebruikt. Het verbinden via het WP-beheerpaneel is net zo eenvoudig als het pellen van peren. En tot slot vereist de derde methode dat je een beetje kennis hebt van lay-out of de code uit het artikel zorgvuldig toepast.
Wat doe je om een afbeelding of pictogram in het WordPress-menu in te voegen? Hieronder delen we onze ervaring en technieken.
Maar niet iedereen vroeg zich af of die er waren verborgen kansen en hoeveel handiger het Android-besturingssysteem kan zijn als alle verborgen mogelijkheden bekend zijn.
Geheimen van het mobiele besturingssysteem zullen uw begrip van de functionaliteit en methoden van systeembeheer aanzienlijk vergroten. Hieronder is de meest interessante functie wat van het grootste voordeel is voor nieuwkomers.
Geheim. Toegang tot contacten in de telefoongids of e-book.
Om te voorkomen dat u op zoek gaat naar het contact dat u het meest gebruikt.
acties:
1. Druk lang op vrije ruimte desktop, bel contextmenu(afhankelijk van de versie van Android, ofwel onderaan het scherm of net boven de vinger), waarin we "Snelkoppeling toevoegen" selecteren (snelkoppeling toevoegen - het komt vaak voor dat in de niet-originele versie deze zin in het Engels is ).
V in dit geval er wordt een snelkoppeling gemaakt, wanneer u erop drukt, wordt de abonnee gebeld die u nodig hebt. Met dit schema kunt u snelkoppelingen op het Android-bureaublad instellen naar de abonnees die u vaak nodig hebt.
Als u vaak sms-berichten moet schrijven, voor: een specifieke abonnee, dan moet je "Contact" selecteren of een sms schrijven bij het instellen van een snelkoppeling.
Nu heb je een van de geheimen van het Android-besturingssysteem onder de knie en kun je mobiel de abonnees bellen die je nodig hebt. Standaard manier: nummers toevoegen aan favorieten en 10 nummers gebruiken snel bellen bekend en niet van groot belang voor gebruikers van Android-apparaten, daarom moet u voor toegang tot het toetsenbord nog drie keer op het scherm drukken. En in dit geval heb je op het hoofdscherm direct na het ontgrendelen nummers en applicaties nodig.
En ook wil ik de aandacht trekken van degenen die werken op het gebied van entertainment en het organiseren van feesten en partijen. Omdat de podiumverlichtingsapparatuur die door limeagency.ru wordt aangeboden, al uw vakanties onherkenbaar nieuw leven zal inblazen. Unieke verlichtingsoplossingen ontvangen voor een betaalbare prijs.
Ik denk dat veel mensen de mogelijkheid kennen om een websitepictogram aan het bureaublad toe te voegen. mobiel apparaat... Dit is handig en de redenen kunnen verschillen (nee applicatie voor de mobiele telefoon dezelfde informatie verstrekken, of u wilt onmiddellijk openen een specifieke pagina website, enz.). Het manifestbestand is verantwoordelijk voor enkele eigenschappen van hoe de site wordt weergegeven en hoe het pictogram eruit zal zien na toevoeging.
Manifest voor de site Is een eenvoudig JSON-bestand waarmee u de volgende dingen kunt configureren:
1. Welk pictogram heeft de gebruiker nadat hij uw site aan het bureaublad heeft toegevoegd?
2. Hoe uw site wordt gelanceerd (met adresbalk, zonder of in modus volledig scherm)
3. Opstartscherm
4. Kleurthema
5. Schermoriëntatie
6. Initiële URL
en nog veel meer
Meer details
Om te laten zien hoe manifest de weergave van een site beïnvloedt, heb ik een eenvoudige, testwebtoepassing gemaakt die de regionaam per code retourneert.Laten we eerst de zaken oplossen voordat we het manifestbestand toevoegen.
Nadat de gebruiker het pictogram heeft toegevoegd, ziet het er als volgt uit (op Android 5.0)
De browser haalde de naam uit de tilte-tag. Dus als je geen manifestbestand hebt, moet de titel in ieder geval normaal zijn. Maar het pictogram in de vorm van de letter "G" verscheen vanzelf (het is niet duidelijk waarom precies G).
En de site zelf ziet er zo uit 
Er is hier eigenlijk niets bijzonders, behalve dat we de adresbalk kunnen verwijderen, zodat de applicatie eruitziet als een native.
Maak kennis met manifest.json!
Een voorbeeldmanifest is te vinden via deze link. Laten we de parameters kort doornemen:naam- de naam die onder het pictogram wordt weergegeven, in het algemeen, waar uw "toepassing" ook wordt weergegeven
korte naam- wordt gebruikt in gevallen waarin er niet genoeg ruimte is om de volledige naam weer te geven
pictogrammen- pictogrammenset verschillende maten
start_url- definieert de url die wordt geopend wanneer op het pictogram wordt geklikt (kan worden gebruikt om gebruikers te corrigeren die de site openen via het pictogram op het bureaublad door een parameter toe te voegen, bijvoorbeeld? Src = homescreen naar url)
Scherm- is verantwoordelijk voor hoe uw site wordt weergegeven (met een adresbalk zonder, enz.)
Achtergrond kleur- stelt de kleur van de pagina in voordat deze wordt geladen. Totdat de pagina is geladen, ziet de gebruiker een wit leeg veld voor zich. Om op de een of andere manier zijn grijze dagelijkse leven te versieren, kun je deze kleur veranderen. Stel bijvoorbeeld de achtergrondkleur van de site in.
Genereer en verover.
Natuurlijk kun je het hele manifest met pennen schrijven, maar dit is saai, tijdrovend en je kunt fouten maken. Er zijn al veel ambachtslieden gevonden die dit proces hebben geautomatiseerd. Onderstaand klein overzicht gereedschap voor automatische generatie manifest.brucelawson.github.io/manifest - het enige wat u hoeft te doen is de velden in te vullen (er is korte beschrijving elke parameter, dus het proces is vrij eenvoudig), doet de generator de rest voor u.
www.favicon-generator.org - hoewel het directe doel van deze site is om pictogrammen te genereren, niet om een manifest te maken. Hij maakt het nog steeds en, in tegenstelling tot de vorige, heb je al pictogrammen (voor iOS en Android) en een manifest. Toegegeven, het manifest moet worden gecorrigeerd (wijzig de naam en andere instellingen).
manifest-validator.appspot.com - Deze tool is voor het valideren van uw manifest.
Resultaat
Dus de iconen werden getekend, het manifest werd gemaakt. Vervolgens moet u de browser over het manifest vertellen door toe te voegen aan hoofd tag het volgendeAlles. Laten we eens kijken wat er gebeurd is
Icoon:
Links naar. Rechts erna (het icoon bleek niet indrukwekkend, ik zal het met plezier veranderen als je het beter stuurt). Het valt al op dat Android de naam uit het veld short_name gebruikte, aangezien naam blijkbaar niet past.
Applicatie downloaden: 
Dit zijn de meest aangename veranderingen. Ten eerste, in plaats van wit scherm je ziet een schijn van een opstartscherm, dat zelf door het systeem is gemaakt op basis van het pictogram, de volledige naam en de kleur die in het manifest zijn gespecificeerd (misschien gebeurt dit alleen op Android 5.0 hierboven). Ten tweede vervaagt dit splash-scherm soepel, wat visueel mooi is.
De website zelf: 
Ook hier werd alles laconiek. Zonder een gebruikersinterface van een browser ziet de site er veel beter uit en lijkt hij meer op native applicatie.
Ik heb niet alle eigenschappen vermeld die in het manifestbestand kunnen worden opgegeven. MET complete lijst is te vinden
Artikel van Anna Sebova, bezig met borduren en programmeren. Ze combineert beide in haar blog en vertelt ons onderweg over verschillende interessante trucs.
Ik heb een blog "Madame Storozhenko" over handwerken. Hij is erg jong en ik bezoek hem vaak op mijn mobiel, nadenkend over waar ik over kan schrijven, hoe ik het kan verbeteren. Bewaar het tegelijkertijd in tabbladen openen browser op mobiel is niet erg handig, bladwijzers in mobiele browser ze passen ook niet bij mij. Daarom heb ik besloten om de icoon-link (snelkoppeling) naar de blog op de desktop te pinnen mobiele telefoon.
Het maken van het sitepictogram is eenvoudig: in de mobiele instellingen moet u het item " Toevoeging hoofdscherm “. Maar het gemaakte pictogram deed me helemaal niet aan mijn site denken, maar veroorzaakte verbijstering. Alleen door op het etiket te klikken of de handtekening te lezen, begreep ik waar het over ging. U begrijpt dat dit onhandig is.
Toen vond ik makkelijke manier maak het pictogram (of label, wat het handigst is) herkenbaarder. Het is heel eenvoudig, u hoeft slechts een paar stappen uit te voeren.
Actie één
Neem de originele afbeelding van het sitelogo (of favicon) en snijd deze bij tot de standaardafbeeldingen voor verschillende apparaten maten. In mijn geval zijn het logo en het favicon dezelfde afbeelding.
Ik heb gekozen voor de volgende formaten die handig zijn voor mobiel en tablets:
- voor iOS twee bestanden: apple-touch-icon.png en apple-touch-icon-precomposed.png- 57 bij 57 pixels:
- voor Windows telefoon het dossier windows-icon-70-70.png:
– Android pakt een van de foto's op en vereist geen extra afbeeldingen en koppelingen.
Tweede actie
< link rel = "apple-touch-icon" href = "/mobile-icons/apple-touch-icon.png"/ > < link rel = "apple-touch-icon-precomposed" maten = "57x57" href = "/mobile-icons/apple-touch-icon-precomposed.png"/ > < meta name = "msapplication-square70x70logo" inhoud = "/mobile-icons/windows-icon-70-70.png"/ > |
Geef de link naar de site weer op het bureaublad van de mobiele telefoon. Open hiervoor de gewenste site in de browser: 
Open vervolgens het browsermenu (klik op de drie verticale stippen rechts bovenhoek browser) en selecteer het item dat is gemarkeerd in de schermafbeelding: 
Dit venster verschijnt: 
Selecteer item " Toevoegen“.
Minimaliseer vervolgens het browservenster en ... voila! Een site met een mooi en herkenbaar icoon bevindt zich op de desktop en is zelfs met één aanraking toegankelijk.
Het kan niet handiger zijn. 
PS Een artikel van Anna Sebova over hoe te genezen.
Pictogram, pictogram, pictogram, symbool, afbeelding - zodra deze elementen niet worden genoemd grafische interface... Waarom zijn ze überhaupt nodig, hoe u ze correct gebruikt en wat u moet weten om de gebruiker niet in verwarring te brengen.
Met het ontwerp van iconen begon het leven van onze studio in 2005. Daarom delen we graag alle kennis die we in al die jaren hebben opgebouwd met u.
Waarom kwam iemand zelfs op het idee om pictogrammen te gebruiken in plaats van woorden?
Deze vraag gaat niet alleen over interfaces. V Alledaagse leven iconen omringen ons overal: ze achtervolgen ons op de weg in de vorm van verkeersborden, ontmoeten ons bij de ingang van de winkel en zitten zelfs op de labels van onze kleding.
Zelfs T-shirts zijn al uitgevonden voor toeristen, die helpen bij het vinden wederzijdse taal met aboriginals in welk land dan ook. Men hoeft alleen maar met een vinger naar het gewenste pictogram te porren.
Waarom houden we zo van badges?
Omdat ze een aantal voordelen hebben:
- Ze zijn opvallend;
- Ze geven snel informatie door;
- Ze zijn memorabel;
- Ze besparen ruimte;
- Ze zijn in elke taal te begrijpen.
Interfacepictogrammen hebben nog een aantal andere voordelen:
- Ze zijn een lust voor het oog dan doeken met tekst die misschien op hun plaats hadden gestaan. Hoe kleiner het scherm wordt, hoe meer woorden Ik wil vervangen door speciale pictogrammen.
- Zij kunnen uw applicatie een visuele identiteit geven.
Maar het belangrijkste dat elk pictogram zou moeten hebben, is: HELDERHEID.
Als de gebruiker de betekenis van het pictogram niet begrijpt, zal hij het vermijden of in de war raken.
Met ijs - dat kan niet, met een sigaret - dat kan niet, met een eenhoorn - dat kan wel
Om het probleem met de duidelijkheid van het pictogram op te lossen, zijn er verschillende manieren om te gaan:
1. Leg uit: nieuw icoon tekst, hints geven, de gebruiker leren om het correct te gebruiken
Zo maak je een nieuwe gebruikerservaring... Een persoon moet, net als het alfabet leren, ook de interfacepictogrammen leren. Om deze weg te gaan, moet u vertrouwen hebben in uw product, in de bereidheid van gebruikers om te leren om het te gebruiken.
Neem Instagram als voorbeeld.
Het pictogram van de doos was onduidelijk en weinig mensen realiseerden zich dat het kon worden gebruikt om privéberichten te verzenden.
Pictogram vandaag verzenden Prive berichten veranderd in een duidelijkere.
Daarom zullen we de 2e optie overwegen.
2. Vecht voor duidelijkheid, maak pictogrammen die het meest begrijpelijk zijn voor de gebruiker
En hoe dit precies te doen en geen fout te maken in de keuze zal verder worden besproken.
Waarom zijn interfacepictogrammen niet altijd duidelijk voor gebruikers?
Laten we de redenen begrijpen.
10 fouten in het ontwerp van interfacepictogrammen
1. Onnauwkeurigheid in het ontwerp van de pictogramafbeelding
Laten we beginnen met een kleine test.
Dit is slechts een voorbeeld van een icoon dat niet eenduidig kan worden geïnterpreteerd, waardoor het voor verwarring kan zorgen bij de gebruiker.
Een oud artikel over fouten bij het ontwerpen van pictogrammen citeerde een merkwaardig geval waarin het gegevensfilterpictogram werd gemaakt in de vorm van een trechter.
De reactie van de klant was: "Ik begrijp niet helemaal waarom je het filterpictogram in de vorm van een martiniglas hebt getekend!" 🙂
Om dubbelzinnige interpretatie te voorkomen, moet de ontwerper het beeld duidelijk overbrengen, waarvan de betekenis gemakkelijk kan worden begrepen. Zet de gebruiker niet aan het denken.
2. Dubbelzinnigheid van de vereniging
In tegenstelling tot de eerste reden, wordt in dit geval de afbeelding zelf meestal correct verzonden, maar het is de gebruiker niet duidelijk waarom dit specifieke pictogram wordt gebruikt en wat het betekent.
Kijk nog eens naar het voorbeeld met het oude icoontje voor het versturen van privéberichten naar Instagram. De afbeelding is goed waarneembaar - een doos is afgebeeld. Maar waar associeer je de doos mee? Opslaan? Postvak IN? Toevoegen nieuw bestand? De associatie is te subtiel, de gebruiker moet nadenken, waardoor het beeld niet goed gekozen is.
Hier is er nog een illustratief voorbeeld van hoe verward de interface is.
Zoals later bleek, verschijnt er een tooltip wanneer u de cursor over het pictogram beweegt.
Veel duidelijker voor de gebruiker zou in dit geval het beeld van een prullenbak zijn.
Bovendien kunt u hier in de interface de woorden "Account verwijderen" plaatsen en in dit geval zou het gebruik van tekst in plaats van een pictogram er gerechtvaardigd uitzien.
Hier is nog een voorbeeld wanneer er een dissonantie is tussen de betekenis van een pictogram en zijn afbeelding:
Ik had nooit gedacht dat dit pictogram kon worden gebruikt om een map te verwijderen
Enerzijds moeten de pictogrammen in de interface passen bij de stijl en er holistisch en harmonieus uitzien, zodat het niet zo werkt:
Maar aan de andere kant moeten pictogrammen gemakkelijk van elkaar te onderscheiden zijn.
Wanneer 2 zeer vergelijkbare pictogrammen verantwoordelijk zijn voor: verschillende functies verwarring ontstaat.
Hier is nog een voorbeeld:
4. Er wordt geen rekening gehouden met eerdere gebruikerservaringen
Weet je nog hoe er in Viber, bij het verzenden van een bericht, een pictogram was met een pijl ernaast?
Veel nieuwe gebruikers raakten in de war over de pijl die "Bericht verzenden" betekent. Waarom? Omdat veel nieuwe gebruikers naar Viber kwamen vanuit Skype en andere messengers, waar de pijl precies betekende dat er een bericht werd verzonden en zich op dezelfde plek bevond.
De pijl in de interface van Viber betekende het verzenden van geolocatiegegevens. Geen wonder dat al mijn vrienden destijds wisten waar ik was ;)
Nu ziet de Viber-interface er anders uit:
Bestudeer daarom bij het maken van een interface zorgvuldig de interfaces van de belangrijkste concurrenten om gebruikers niet te verwarren en opnieuw op te leiden.
Het creëren van een nieuwe gebruikerservaring is moeilijke weg en vaak onterecht.
5. Er wordt geen rekening gehouden met de mentale kenmerken van de doelgroep
Sommige pictogrammen kunnen anders worden geïnterpreteerd in verschillende landen.
Net zoals gebaren in verschillende landen dubbelzinnig worden waargenomen, kunnen iconen ook dubbelzinnig worden opgevat.
Als je creëert universele toepassing gericht op veel landen, gebruik meer generieke pictogrammen.
Al moet ik bekennen dat het er niet zo veel zijn. Nu kan onder hen de afbeelding worden genoemd printer(zegel), thuis(terug keren naar Startpagina), vergrootglazen(zoeken) en bijna alles. Icoon dat staat voor hamburgermenu, kan binnenkort ook universeel worden. Sommige tests tonen echter aan dat gebruikers meer gewend zijn aan het zien van een knop met het label "Menu" in plaats van 3 horizontale balken.
Als uw toepassing is gericht op: doelgroep van een bepaald land, rekening houden met de eigenaardigheden van de waarneming.
Dus voor inwoners van de VS zal het pictogram met een supermarktkarretje bijvoorbeeld bekender zijn ( winkelwagen) om een aankoop aan te geven (
).
Voor inwoners van het VK in gebruikersomgeving het is gebruikelijker om de mand te zien ( mand) of tas ( tas).
6. Verkeerd bericht
Pictogramontwerp kan het gedrag van gebruikers beïnvloeden.
Dus bij het kiezen van een pictogram voor de actie "Artikel toevoegen aan winkelwagentje", moet men zich niet alleen concentreren op mentale waarneming, maar ook op de subtekst die ze dragen.
Een supermarktkarretje betekent dat de gebruiker op elk moment een product in de mand kan doen of van gedachten kan veranderen en het naar buiten kan brengen. Die. in dit geval oefent u geen druk uit op de toekomstige koper en neigt u zachtjes tot kopen.
Een pakket of tas heeft veel meer invloed op de geest van de gebruiker en spoort hem aan om te kopen en niet om het product in de mand te leggen. We zijn gewend om dingen in onze tas te doen nadat we ervoor hebben betaald bij het afrekenen, d.w.z. dit icoon roept steeds nadrukkelijker op tot een aankoop.
Beide pictogrammen kunnen worden gebruikt en werken als een plus of min. Je kunt een artikel aan de winkelwagen toevoegen en het vergeten, of je kunt de site verlaten zonder het artikel in je tas te durven stoppen. Denk na over de specifieke kenmerken van uw product en kies de juiste boodschap.
7. Verouderde afbeeldingen
Hier moet je uiterst voorzichtig zijn. Iconen verouderen, net als mensen.
Zal de nieuwe generatie dit icoon begrijpen als ze nog nooit een diskette in hun handen hebben gehad?
Enerzijds zal het vervangen van veel van de populaire iconen binnenkort een noodzaak worden.
Maar aan de andere kant veranderen generaties veel langzamer dan ons begrip van een onderwerp verandert.
Maak bijvoorbeeld een foto van een telefoon.
Het eerste icoon is nog steeds relevant en begrijpelijk, zelfs voor nieuwe generaties. zijn vorm is gemakkelijk te herkennen.
Als u het smartphonepictogram plaatst, kunt u de gebruiker in verwarring brengen. De smartphone wordt niet alleen geassocieerd met de belfunctie, maar ook met een heleboel andere functies.
Bekijk het pictogram dat Twitter gebruikt om een nieuwe tweet te plaatsen eens nader. Het pictogram had de vorm van een ganzenveer om de betekenis van 'Klik hier en je kunt schrijven' over te brengen.
Veel iconen waarvan de afbeeldingen verouderd zijn, zullen hun relevantie voor een lange tijd niet verliezen. Beoordeel daarom de risico's door de afbeelding van een al lang bekend pictogram te veranderen in een nieuwer.
We hebben lange tijd niet naar muziek van cassettes geluisterd, we hebben geen ouderwetse microfoon of een tv met hoorns gebruikt, maar deze beelden zijn veel duidelijker voor de gebruiker dan wanneer we in plaats van zwarte rechthoeken van een smartphone weergeven, die nu al deze objecten kan vervangen.
8. Overbelast ontwerp
Vergeet niet dat het interfacepictogram duidelijk moet zijn, niet alleen in zijn zeer grote maat, maar ook in het klein.
Dat is waarom extra elementen zal vuil in de interface veroorzaken en de gebruiker in verwarring brengen.
Vergelijk jezelf:
Dit probleem is nu minder relevant dan vóór de platte en strakke designtrends. Platte pictogrammen zijn veel gemakkelijker te lezen dan complexe 3D-objecten. en dit is een van de redenen waarom ze zo populair zijn. In de handen van een ervaren ontwerper kan een driedimensionaal icoon echter in elk formaat herkenbaar worden gemaakt.
9. Gebruik van tekst of het ontbreken daarvan
Moet ik tekst in pictogrammen gebruiken of niet? De betekenis van de pictogrammen uitleggen of aan de gebruiker verstrekken? Er is geen definitief antwoord op deze vragen.
Soms moet je zo'n complex concept overbrengen dat je niet zonder tekst in de buurt of een hint kunt.
Tegelijkertijd zullen we, als we helemaal geen pictogrammen meer gebruiken en alleen tekst gebruiken, onze ogen niet snel op de gewenste knop kunnen concentreren.
Als het mogelijk is om tekst toe te voegen die de interface niet verzadigt, is het beter om deze toe te voegen.
Maar wat betreft de tekst in het ontwerp van het pictogram zelf, het is beter om deze niet te gebruiken, omdat in het echt kleine maat het pictogram zal onleesbaar zijn en het ontwerp ziet er overweldigd uit.
10. Pictogrammen schalen
Wanneer u bitmappictogrammen vergroot of verkleint, worden ze wazig en wazig, dus veel ontwerpers geven er de voorkeur aan vectorpictogrammen te maken, zodat ze later geen tijd verspillen aan het handmatig tekenen van kleine details, maar gewoon de afbeelding vergroten of verkleinen.
Maar deze benadering is ook verkeerd.
Hier is een voorbeeld van hoe een kleiner pictogram eruit ziet (in een rode cirkel) en met de hand getekend op een kleiner formaat door de ontwerper (in een groene cirkel).
Vraag de ontwerper daarom altijd om de elementen met de hand te tekenen bij het maken van nieuwe afmetingen.
conclusies
Waarom hebben we deze 10 fouten benadrukt en de rest genegeerd, niet minder belangrijk? Omdat deze fouten van invloed zijn op HELDERHEID pictogrammen zijn verwarrend, verwarrend en kunnen de conversie beïnvloeden.
Zoals u kunt zien aan de hand van de voorbeelden, kan slechts één onjuist geselecteerd pictogram de gebruiker dwingen een account te verwijderen, een aankoop te weigeren of een onhandige toepassing te gebruiken.
Kies dus de juiste pictogrammen en vertrouw er beter op.
