Ikoner og piktogrammer

Ikoner og piktogrammer spiller en vigtig rolle i at hjælpe kunder med at navigere effektivt gennem indhold. Ved at kombinere dem med navne eller stikord kan vi sikre en klar og intuitiv brugeroplevelse.

Download icons Download icons (level 2)Download Icons (level 3)Download pictograms

I vores B2C-brand bruges ikoner primært digitalt. De er funktionelle, enkle og eksisterer for at skabe klarhed. De fungerer godt til at vise vej, både online og i fysiske rum. De er designet til at fungere perfekt i små størrelser og passer sammen med vores piktogramstil. Her bruger vi en kontinuerlig linje og afrundede hjørner

Vores ikoner er opdelt i tre niveauer: UI-ikoner, funktionelle piktogrammer og illustrative piktogrammer.

UI ikoner

UI ikonerne repræsenterer ideer, objekter eller handlinger. De kan kommunikere budskaber med et enkelt blik, muliggøre interaktivitet og tiltrække opmærksomhed. Når de bruges klogt, bliver ikoner en elegant og effektiv måde at kommunikere på.

Alle UI-ikoner skal have ensartet stregtykkelse med andre UI-ikoner af samme størrelse. UI-ikoner skal tegnes på et 32px grundgitter ved hjælp af en 2px streg og derefter skaleres proportionalt, hvis der skal produceres til de andre størrelser.

UI-ikoner findes i fire størrelser.

Farver

UI-ikoner skal vises i en solid, monokromatisk farve og skal matche farven på deres tekstetiket. De skal forblive AA-tilgængelige på samme måde som typografi, med et kontrastforhold på mindst 4,5:1.

Retningslinjer for UI-ikoner

Grid & anchor point

Padding

Key shapes

Ikoner i brug

Her er eksempler på brug af ikoner.

Funktionelle piktogrammer

Ligesom vores UI ikoner repræsenterer vores funktionelle piktogrammer også ideer og objekter, men de er beregnet til brug i større rum. De kan bruges til at understøtte skriftligt indhold og engagere seeren, da de tillader flere detaljer og udtryk. De har ligheder med UI ikonerne i, hvordan de er konstrueret, men de indeholder også flere forskellige og karakteristiske visuelle træk.

Hvordan er de funktionelle piktogrammer bygget

Størrelse

Grid og konstruktion

Padding og fyld

Konsistens

Et andet konsistent element, der skal anvendes, hvor det er relevant, er cirklen. Når den bruges i den positive farve (blå), har cirklen en ensartet størrelse på 18px. Når den bruges i den negative farve (hvid), har cirklen en diameter på 10px.

Andre konsistente elementer er: Linjerne i en negativ farve (hvid) oven på en positiv fyldfarve (blå). Den negative farve (hvid) kontur skal altid være 4px (stregtykkelse); Brug af tekst vil være lejlighedsvis, afhængigt af om ikonets repræsentation ikke umiddelbart er forståelig kun ved brug af det visuelle element.

Functional piktogrammer

Ligesom vores UI ikoner repræsenterer vores funktionelle piktogrammer også ideer og objekter, men de er beregnet til brug i større rum. De kan bruges til at understøtte skriftligt indhold og engagere seeren, da de tillader flere detaljer og udtryk. De har ligheder med UI ikonerne i, hvordan de er konstrueret, men de indeholder også forskellige og karakteristiske visuelle træk.

Containers

Funktionelle piktogrammer kan vises i cirkulære containers for at give dem mere visuel vægt eller hjælpe med at adskille dem fra tekstindhold i visse situationer. Størrelsen på containeren beregnes ud fra piktogrammets padding.

Hvordan de funktionelle piktogrammer bygges

Skalering

Grid & konstruktion

Padding & solid fills

Konsistens

Et andet konsistent element, der skal anvendes, hvor det er relevant, er cirklen. Når den bruges i den positive farve (blå), har cirklen en konsistent størrelse på 18px. Når den bruges i den negative farve (hvid), har cirklen en diameter på 10px.

Andre konsistente elementer er: Linjerne i en negativ farve (hvid) oven på en positiv udfyldningsfarve (blå). Den negative farve (hvid) skal altid have en stregtykkelse på 4px. Brug af tekst vil være lejlighedsvis og afhænger af, om ikonets repræsentation ikke umiddelbart er forståelig ved kun brug af det visuelle element.

Illustrative piktogrammer

Illustrationer er et vigtigt værktøj, der hjælper med at øge kundernes engagement og skaber en følelsesmæssig forbindelse med vores brugere. Brug illustrative piktogrammer, når der er behov for et mere generelt og mere illustrativt ikon. Understøttende tekst skal altid være synlig, hvilket gør det muligt for piktogrammerne at være mere abstrakte end tidligere niveauer. De giver Telenor mere varme og personlighed.

Download

Pictograms

Størrelse

Illustrative piktogrammer bør bruges, når der er mere plads til rådighed, eller hvis emnet er mere komplekst. Minimumsstørrelsen er 120px, mens maksimumsstørrelsen er 320px. Til applikationer, der kræver en større visuel fremstilling, brug illustration eller fotografi. Linjerne skal efterligne deres oprindelige stregstørrelse ved skalering.

Hvordan de er bygget

Base grid

Stroke

Anchor points

Hvordan de er styled

Fluid loops

Gaps

Afrundede hjørner

Afrundede ender

Fylde og outline

Motiver og kompleksitet

Motiver

Illustrative piktogrammer bør have en mere fri brug af abstrakte emner og motiver end funktionelle ikoner. De bør have en visuel relation til niveau 2, men de kan være mere komplekse og mere abstrakte eller følelsesmæssige. Piktogrammer bør ikke tegnes i perspektiv. De bør altid understøttes af tekst og bør aldrig være den eneste kommunikation.

Kompleksitet

Hvert illustrativt piktogram bør have et ensartet niveau af detaljer og kompleksitet. Hvis motivet, du ønsker at formidle, er en simpel telefon, så prøv at tilføje flere oplysninger eller detaljer. Hvis det ikke er muligt, brug ikonerne på niveauet nedenunder.

Piktogrammerne bør ikke være for komplekse. Tegn ikke hele mennesker, fokuser for eksempel på hoveder eller hænder kombineret med andre fortællende objekter.

Her er nogle eksempler på piktogrammer i brug.