Op 25 juni 2014 presenteerde Google aan het publiek zijn nieuwe visie op het interface-ontwerp van de toekomst - een hele reeks regels en voorwaarden, volgens welke de interfaces van alle bedrijfsproducten voortaan zullen worden gebouwd. Waarom was dit allemaal nodig? Tot vijf jaar geleden waren alle Google-producten erg verschillend van elkaar, inclusief verschillende versies van dezelfde applicatie op verschillende apparaten. De ontwikkelaars dachten na over het creëren van speciale regels voor de constructie en unificatie van alle ontwikkelde applicaties en diensten, die later werden verenigd onder de algemene naam "The Kennedy Project". Het was dit project dat later uitgroeide tot Materiaal ontwerp (materiaal ontwerp).
Materiaalfilosofie
Dankzij het Kennedy-project kregen alle belangrijke Google-services en -services gemeenschappelijke ontwerp- en interface-bouwfuncties. Dit maakte het mogelijk om benaderingen voor het maken van webinterfaces en later interfaces van mobiele applicaties te verenigen.
Een van de kenmerken van het uniforme ontwerp waren informatiekaarten die overal in de werkruimte konden worden geplaatst. Toen ze ze in de Google Now-applicatie onderzochten, stelden de ontwikkelaars zichzelf de vraag: "Wat zit er onder deze kaarten?" Volgens Google VP of Design Matias Duarte, veroorzaakte deze "onschuldige vraag een krachtige vonk".
Het ontwerpteam begon design niet te zien als een verzameling vlakken en pixels, maar als een echt fysiek object. Ze wilden hetzelfde overbrengen op de gebruiker, zodat hij een idee kreeg van de tastbaarheid van de interface, dat wat er op het scherm gebeurt er zo geloofwaardig en logisch mogelijk uitziet.
Na totale dominantie skeuomorfisme(een exacte imitatie van echte objecten van de fysieke wereld in het ontwerp) alles is scherp in de tegenovergestelde richting bewogen -. Hij was het die Google als basis nam en uitvond " materiaal". Tegelijkertijd een kleine stap terug naar het realisme.
Kwantumpapier
Het belangrijkste element van materiaalontwerp is: metafoor van een fysiek object door zijn eigenschappen vergelijkbaar met papier en met de meeste van zijn eigenschappen - grootte, kleur, dikte. Elke laag van dit metaforische materiaal bevindt zich in een driedimensionale ruimte en gehoorzaamt aan alle fysieke wetten, daarom kan het, in tegenstelling tot de klassieke platte stijl, een schaduw werpen op de lagere lagen. Alle lagen worden op het belangrijkste bodemmateriaal geplaatst.
Vanwege zijn papierachtige eigenschappen werd het materiaal oorspronkelijk "quantumpapier" genoemd. Dit is hetzelfde papier als in de fysieke wereld, maar het heeft een aantal "magische" eigenschappen, het kan bijvoorbeeld van grootte veranderen en soepel in de ruimte bewegen, samengaan met andere "bladeren" of in meerdere breken. Quantumpapier zit net boven de achtergrond, die meestal wit is. De schaduw beweegt afhankelijk van de beweging van het materiaal zelf, neemt af of toe afhankelijk van de hoogte van het materiaal boven de achtergrond.
Digitale inkt
Als "kwantumpapier" bedoeld is om de fysieke eigenschappen van een object weer te geven, dan wordt alles wat zich op het oppervlak van dit papier bevindt - kleuren, afbeeldingen, tekst, pictogrammen - gevormd met " digitale inkt"- nog een uniek object van materiaalontwerp.
Material Design gebruikt alle best practices van printen in interface-ontwerp. Maar ook hier zijn er eigen functies van Google. Het belangrijkste lettertype voor gebruik in Material Design is bijvoorbeeld Roboto. Niets weerhoudt bedrijven er echter van hun merklettertype te gebruiken om hun identiteit te behouden. De richtlijnen voor materiaalontwerp geven voorbeelden voor het gebruik van verschillende gewichten en lettergroottes in interfaces.
Maar het belangrijkste van materiaalontwerpafbeeldingen is: Kleur... Kleur is het primaire uitdrukkingsmiddel op kwantumpapier en speelt daarom een zeer belangrijke rol. Het is gebruikelijk om materiaalontwerp te gebruiken basis en accentkleuren... En ook verschillende tinten ervan voor verschillende situaties.
Gebruikelijk primaire kleuren gebruikt om grote gebieden te schilderen, zoals kopteksten, actiebalken, statusbalken. Om belangrijke elementen te markeren, gebruik accent kleur... Bijvoorbeeld voor een visitekaartje voor materiaalontwerp - zwevende actieknoppen.
De basisprincipes van materiaalontwerp dicteren het gebruik van afbeeldingen. Dit is zo'n belangrijk element dat het wordt aanbevolen om een afbeelding van de maximale grootte zonder randen te gebruiken. Bovendien worden de actiebalken transparant om de weergave van de afbeelding te maximaliseren.
Android onderhoudt een speciale bibliotheek Palet, die in staat is om de hoofd- en accentkleuren uit de afbeelding te extraheren en het ontwerp van de toepassing dynamisch te wijzigen, door zich aan te passen aan de actieve afbeelding (voorbeeld hierboven).
Betekenis van animatie
Als we doorgaan met het trekken van analogieën met de natuurlijke wereld, moet worden opgemerkt dat niets in het niets verdwijnt, net zoals niets uit het niets wordt genomen. Bij materiaalontwerp is het dus noodzakelijk om de bestaande interface soepel te wijzigen als reactie op alle gebruikersacties, zodat alle overgangen logisch en duidelijk zijn. In materiaalontwerp is animatie dus een gevolg van de interactie tussen de gebruiker en de interface.
Actieve beweging trekt de aandacht van de gebruiker, daarom is het noodzakelijk om enkele regels te gebruiken om het effect van realisme te bereiken:
- Asymmetrie
Gewoonlijk wordt de grootte van objecten beperkt door de breedte van het apparaat, dus om het formaat van het kwantumpapier realistisch te maken, moeten de breedte en hoogte van het object onafhankelijk van elkaar asymmetrisch worden gewijzigd, waardoor de illusie van het vergroten of verkleinen van de object. - Antwoord geven
Elke gebruikersactie moet een passend antwoord hebben. Google biedt bijvoorbeeld een rimpeleffect van interface-objecten met het epicentrum op het punt van interactie. - Natuurlijk authentiek uurwerk
In de natuur kunnen objecten, wanneer ze bewegen, niet onmiddellijk snelheid oppikken of stoppen, dus om ze er realistisch uit te laten zien, moeten alle animaties niet lineair zijn, maar met vertragingen en versnellingen.
Conclusie
Materiaal ontwerp Is een volledig nieuwe manier van interactie en het bouwen van interfaces, die nog in ontwikkeling is en op elk moment kan worden toegevoegd. Het is echter al mogelijk om de vooruitzichten te voorspellen. In ieder geval bij de ontwikkeling van applicaties voor Android zal het domineren, aangezien de unificatie van alle interfaces de bruikbaarheid positief zal beïnvloeden.
Binnen Google zelf wordt materiaalontwerp gerangschikt naast belangrijke ontwikkelingen als windowing en cursorbesturing (Xerox PARC) en touchscreens (Apple). Nou, laten we eens kijken wat er gebeurt.
Nieuw Google-logo en -identiteit promoot ideeën voor materiaalontwerp
Gedetailleerde richtlijnen van een ontwikkelaar van materiaalontwerp zijn hier te vinden -
De hoofdregel van Google is om de gebruikersbehoeften goed in de gaten te houden en op basis daarvan je ontwerp (en niet alleen het) aan te passen. Met een trend als Material Design kun je de UX verbeteren, waardoor je keer op keer terug wilt komen naar de bron. En een van de belangrijkste elementen is de mogelijkheid om naadloos te communiceren met verschillende functies op één platform.
Material Design komt voort uit het idee van vrij bewegen in de door de gebruiker gewenste richting en is gebaseerd op de tactiele realiteit. Aanvankelijk werden de ontwikkelaars geïnspireerd door gewone inkt en papier, maar sindsdien is het zeker ver verwijderd van dit fundamentele kenmerk en heeft het de kenmerken van echte magie verworven. Met andere woorden, door het visuele en functionele deel te verbeteren, hebben Google-experts de principes van goed ontwerp gecombineerd met innovatie en de mogelijkheden van nieuwe technologieën.
Wat zijn de kenmerken van Material Design? De oppervlakken en randen van elementen in deze ontwerprichting combineren visuele beelden en aanwijzingen om aanwijzingen te creëren die de gebruiker helpen om intuïtief door de site te navigeren (alsof het allemaal in de echte wereld gebeurt).
Bovendien gebruikt Material Design de principes van printontwerp om effectief te markeren (dat wil zeggen, focus op het gewenste element), navigatie in de interface te vereenvoudigen en intuïtief de betekenis van de elementen over te brengen. Material Design wordt gekenmerkt door rijke, gelijkmatige kleuren, scherpe randen met contouren, grote typografie en aanzienlijke afstand tussen elementen. Samen vormen deze elementen niet alleen een oogstrelend plaatje, maar creëren ze een nieuwe realiteit met conceptuele betekenis en vele functies die de gebruiker een unieke UX geven.
Bij dit soort ontwerpen staat het handelen van de gebruiker centraal. Alle interacties vinden plaats in één omgeving, interactieve objecten verplaatsen zich zonder de reeks te onderbreken van de ene omgeving naar de andere.
Material Design is een verhaal van functionaliteit waar elk element naar streeft. Volgens dit principe is het belangrijk om te focussen op de belangrijkste aandachtspunten van de gebruiker om deze in goede banen te leiden.
Material Design is een verhaal over interactiviteit. De pagina reageert op elke kleinste beweging van de gebruiker, terwijl elke overgang soepel moet verlopen, alsof je in een boot op een kalme rivier vaart en weet waar en waarom je moet afslaan. Material Design is daarom ook een verhaal over bewustwording: naast het feit dat elke handeling prettig (en makkelijk) uit te voeren is, moet de gebruiker duidelijk en helder begrijpen wat en waarom hij doet en waar de volgende aanraking hem heen zal leiden. Feedback moet dus duidelijk, toegankelijk en gemakkelijk herkenbaar zijn.
Zoals eerder vermeld, heeft de structuur van de interface veel "chips" van het printontwerp geleend, maar ze worden allemaal niet in hun oorspronkelijke vorm toegepast, maar in een verbeterde vorm. Material Design voegt aan deze functies een onbeperkt aantal opties toe voor schalen en paginagrootte, waarmee u het ontwerp kunt aanpassen aan elk apparaat, zoals een tablet of smartphone. Al deze functies geven een gevoel van maximaal comfort bij het werken met navigatie en de hele interface (aangezien onbeperkte mogelijkheden gehoorzamen aan de principes van eenvoud) en wekken een gevoel van vertrouwen.
De belangrijkste vraag die een ontwerper moet beantwoorden voordat hij gaat ontwikkelen, is wat de gebruiker precies zal (of wil) doen als hij met de applicatie werkt? Nadat u uw antwoord hebt geformuleerd, kunt u beginnen met het belichamen van de ideeën van Material Design.
Houd er bij het maken van uw app rekening mee dat inhoud hier net zo belangrijk is als beeldmateriaal. Het mag de gebruiker niet in een verdoving brengen, maar integendeel een gevoel van comfort en een duidelijk begrip creëren van waarom hij hier is en wat hij nu zal doen.
Test verschillende opties voor de rangschikking van elementen, de werkbalk kan bijvoorbeeld bovenaan het scherm worden geplaatst en lost zo alle navigatieproblemen op, waardoor het gemakkelijker wordt om tussen verschillende tabbladen te schakelen en te zoeken.
Onthoud de principes van functionaliteit en probeer de gebruiker te begeleiden, "gooi" hem niet op de eerste pagina. Deze aanpak zal voordeliger uitpakken: u kunt de aandacht van de bezoeker richten op belangrijke aspecten van het product/de dienst die u levert. Denk al in de ontwikkelingsfase na over het maken van een navigatiesysteem waarmee u de ondersteunende componenten kunt markeren die elke bezoeker gemakkelijk en snel kan bereiken.
Bij het kiezen van de beste objecten, vormen en kleuren, stop daar niet: begin deze elementen te manipuleren met bewegingen, geef ze flexibiliteit en tastbaar "materieel" gewicht. Deze volledige tactiele controle over elke beweging, zelfs de kleinste beweging, maakt Material Design uniek mooi.
Je doel in dit ontwikkelingsstadium is om een balans te vinden tussen bewegingsvrijheid en de fysieke "fysiek" van elk object, dat voldoet aan de principes van onbelemmerde UX.
Grondig plannen en testen werpen hun vruchten af bij de lancering: als je alles goed hebt gedaan, zal de gebruiker verslaafd zijn aan de informatie die je verstrekt. Als het nodig is om een actie in verschillende stappen uit te voeren, zal een gepland algoritme met heldere objecten en animatie hem bovendien aan het einde van de operatie brengen (hij zal tenslotte duidelijk begrijpen wat er van hem wordt verwacht en hoe hij het moet doen ).
Animatie in Material Design wordt vaak gebruikt om vloeiendere overgangen te maken, maar je moet je niet beperken tot alleen deze frames. Met zijn hulp kunt u veel details van de interface en de navigatiebalk verbeteren. Bovendien kunt u kleine details in het pictogrammenu gebruiken, wat niet alleen duidelijkheid zal scheppen, maar ook nogmaals uw zorg voor de esthetiek van de applicatie zal benadrukken.
Onthoud dat Material Design zich richt op bruikbaarheid, niet alleen op goed ontwerp op zich. De principes kunnen het beste startpunt zijn voor het maken van een applicatie die een enorm publiek zal veroveren met zijn gratie en gemak.
Het is jouw taak als ontwerper om het leven van de gebruiker gemakkelijker te maken en een effectieve oplossing te bieden wanneer deze interactie heeft met de applicatie. Dit is voornamelijk te danken aan het verstrekken van de belangrijkste informatie in de kortst mogelijke tijd en in het meest geschikte formaat.
Houd altijd rekening met de aandachtspunten waar de gebruiker zich door moet laten leiden, en zorg ervoor dat deze bij elke test niet naar de achtergrond verdwijnen terwijl de bezoeker door de bron "dwaalt". Pop-ups, meldingen en andere afleiding kunnen bezoekers irriteren of in het nauw drijven. Wees een soort gids: help ze niet te verdwalen en te vinden wat ze nodig hebben. Instructies en een helpknop moeten ook altijd beschikbaar zijn.
Een ander goed idee is om beschrijvingen in te voegen van de links die u op de bron plaatst. Ze zijn nodig voor een duidelijk en snel begrip van waar de gebruiker uiteindelijk zal komen. Een minder effectieve tool is om de "klik hier"-knop te gebruiken
4. Pictogramsjabloon van Google Design:
5. Icon Grid-systeem voor Android L:
Met Google Afbeeldingen kunt u informatie vinden die visueel wordt gepresenteerd op internet. Nieuwe functies, zoals bijschriften bij afbeeldingen, goed zichtbare pictogrammen en AMP-pagina's in zoekresultaten, helpen gebruikers snel te vinden wat ze nodig hebben.
Door meer informatie aan uw afbeeldingen toe te voegen, kunt u de zoeknauwkeurigheid verbeteren en meer geïnteresseerde gebruikers naar uw site trekken. Optimaliseer uw pagina's en afbeeldingen erop zodat ze eerder gevonden worden in Google Afbeeldingen. Volg hiervoor de onderstaande richtlijnen.
Voorkom klikbare links in zoekresultaten voor afbeeldingen
Als u wilt, kunt u voorkomen dat klikbare links worden weergegeven in de zoekresultaten van Google Afbeeldingen, zodat afbeeldingen op volledige grootte niet op de resultatenpagina worden weergegeven.
instructies:
- Controleer de HTTP Referer-header bij het aanvragen van uw afbeelding.
- Als het verzoek afkomstig is van een Google-domein, stuur dan een reactie met HTTP 200 (OK) of 204 (Geen inhoud).
Google kan de afbeelding nog steeds detecteren wanneer de pagina wordt gecrawld, maar in de zoekresultaten wordt een miniatuurafbeelding weergegeven die tijdens de crawl is gegenereerd. Een dergelijk verbod kan op elk moment worden toegepast en het is niet nodig om de afbeeldingen op de site opnieuw te verwerken. Dit wordt niet als vermomming beschouwd en zal niet leiden tot sancties.
Maak uw site gebruiksvriendelijk
Om de positie van uw inhoud in de zoekresultaten voor afbeeldingen te verbeteren, maak pagina's in de eerste plaats voor gebruikers, niet voor zoekmachines... Hier zijn een paar tips:
- Onthoud dat context belangrijk is. Zorg ervoor dat uw visuele inhoud relevant is voor het onderwerp van de pagina. Het is raadzaam om alleen die afbeeldingen te gebruiken die de betekenis van de rest van de inhoud aanvullen. Het wordt ten zeerste afgeraden om tekst met afbeeldingen op de pagina weer te geven als de inhoud van noch het ene, noch het andere type niet origineel is.
- Gebruik plaatsing verstandig. Plaats waar mogelijk afbeeldingen naast de tekst die ze illustreren. Soms is het zinvol om een sleutelafbeelding bovenaan de pagina te plaatsen.
- Plaats geen belangrijke tekst direct in afbeeldingen. Probeer geen tekst in afbeeldingen te gebruiken, aangezien deze in deze vorm niet voor alle gebruikers beschikbaar is. Dit geldt vooral voor belangrijke tekstelementen als paginatitels en menu-items. De tekst in afbeeldingen wordt onder andere niet herkend door de tools die worden gebruikt om pagina's in andere talen te vertalen. Om ervoor te zorgen dat uw inhoud zo gemakkelijk mogelijk wordt waargenomen en doorzocht, voegt u alleen tekst aan de pagina toe in HTML-opmaak en vergeet u niet om beschrijvingen voor afbeeldingen in de alt-attributen in te voeren.
- Bouw goede, informatieve websites. De inhoud van de pagina als geheel is net zo belangrijk voor Google Afbeeldingen-zoekopdrachten als de daadwerkelijke visuele inhoud, omdat deze efficiënter kan worden verwerkt. Tekstfragmenten van een specifieke pagina kunnen bijvoorbeeld worden gebruikt als beschrijvingen voor dergelijke inhoud. Google houdt ook rekening met de kwaliteit van de informatie die op de site wordt gepresenteerd bij het rangschikken van afbeeldingen.
- Maak websites die zijn geoptimaliseerd voor mobiele apparaten. Gebruikers zoeken vaker op Google Afbeeldingen vanaf mobiele apparaten dan vanaf computers. Daarom is het belangrijk om uw site goed leesbaar te maken op apparaten van alle soorten en maten. Door de bruikbaarheid op mobiele apparaten te controleren, kunt u erachter komen of de pagina's correct worden weergegeven en of er geen fouten op staan.
- Wees voorzichtig met de URL-structuur voor uw afbeeldingen. Naast de bestandsnamen houdt Google bij het weergeven van visuele content rekening met de paden in de URL. Probeer een logisch schema uit te werken voor afbeeldings-URL's.
Let op de titel en beschrijving van de pagina
Google Afbeeldingen genereert automatisch titels en beschrijvingen voor afbeeldingen, zodat de gebruiker begrijpt hoe een bepaald resultaat zich verhoudt tot zijn verzoek. Dit helpt gebruikers om te beslissen of ze op het resultaat willen klikken of niet.
We halen de informatie die we nodig hebben uit verschillende bronnen, waaronder de titel en metatags van elke pagina.
Volg de richtlijnen in het gerelateerde artikel om ervoor te zorgen dat de titels en beschrijvingen die we maken beschrijvend zijn.
Gestructureerde gegevens toevoegen
Als u gestructureerde gegevens toevoegt, worden uw afbeeldingen in Google Afbeeldingen weergegeven als uitgebreide resultaten (ze hebben met name goed zichtbare pictogrammen). Hierdoor krijgen gebruikers een beter begrip van uw site, zodat de meest geïnteresseerden deze zullen bezoeken. Gestructureerde gegevens worden ondersteund voor de volgende inhoudstypen:
In Google Afbeeldingen helpt het AMP-logo gebruikers bij het kiezen welke pagina's sneller worden geladen. Probeer de pagina waarop uw afbeeldingen worden gehost, naar AMP te converteren. Houd er rekening mee dat de bestemmingspagina degene is waarnaar de gebruiker wordt geleid nadat hij op het zoekresultaat heeft geklikt.
Voeg kwaliteitsfoto's toe
Gebruikers houden meer van foto's van goede kwaliteit. Duidelijke miniaturen in zoekresultaten trekken ook meer bezoekers naar uw site.
Plaats afbeeldingen op de juiste manier tussen de tekst en kies betekenisvolle koppen, bestandsnamen en handtekeningen ervoor
Google haalt informatie over het onderwerp van een afbeelding uit andere inhoud op de pagina, inclusief afbeeldingstitels en bijschriften. Plaats afbeeldingen waar mogelijk op gerelateerde pagina's en naast de tekst waarnaar ze verwijzen.
De bestandsnaam kan dezelfde functie hebben als de titelkoppen. Dat is waarom sobaka.jpg als naam heeft de voorkeur boven IMG00023.JPG.
Afbeeldingsbeschrijvingen toevoegen aan alt-attributen
Alt-tekst maakt inhoud beschikbaar voor gebruikers die geen afbeeldingen op pagina's kunnen zien (bijvoorbeeld omdat ze schermlezers gebruiken of vanwege een trage internetverbinding).
Bij het bepalen van het onderwerp van een afbeelding houdt Google rekening met de omschrijvingen in de alt-attributen, evenals met de beeldherkenningsresultaten en pagina-inhoud. Als alternatief kunt u de alt-tekstkoppelingstekst maken als u ervoor kiest om een afbeelding als zodanig te gebruiken.
Probeer een beschrijving te bedenken die zo informatief mogelijk is en past bij de inhoud van de pagina. Gebruik niet te veel zoekwoorden, aangezien dit een negatieve indruk op gebruikers maakt en als spam kan worden beschouwd.
- Slechte optie (alt-attribuut is leeg):
- Slechte optie (sleutelwoordmisbruik):
- Betere optie:
- De beste manier:
Sitemaps met afbeeldingen gebruiken
Afbeeldingen zijn een belangrijke bron van informatie over de inhoud van de site in het algemeen. U kunt aanvullende informatie over afbeeldingen verstrekken en Google URL's verstrekken voor afbeeldingen die anders mogelijk niet in uw sitemap te vinden zijn.
Afbeeldingssitemaps kunnen, in tegenstelling tot gewone sitemaps, URL's van andere domeinen bevatten. Hierdoor kunnen webmasters SDK (Content Delivery Networks) gebruiken voor het hosten van grafische bestanden. We raden u aan uw SDK-domeinnaam in Search Console te controleren, zodat we u op de hoogte kunnen stellen van eventuele gevonden crawlfouten.
Ondersteunde grafische formaten
De volgende formaten worden ondersteund in Google Afbeeldingen: BMP, GIF, JPEG, PNG, WebP, SVG en ingesloten afbeeldingen.
Inline-afbeeldingen zijn een verzameling bytes aan grafische gegevens in een tag ... Voorbeeldcode voor zo'n afbeelding:
De afbeeldingsgegevens moeten worden vervangen door een Base64-gecodeerde tekenreeks.
Hoewel inline-afbeeldingen kunnen helpen het aantal HTTP-verzoeken te verminderen, moeten webmasters hier goed over nadenken, omdat ze een aanzienlijk paginagewicht kunnen ervaren. Voor meer informatie over de voor- en nadelen van inline afbeeldingen, zie de Web Design Basics-site.
Responsieve afbeeldingen
Responsieve webpagina's zijn over het algemeen handiger in gebruik omdat ze op een groot aantal verschillende apparaten kunnen worden bekeken. Voor tips over hoe u met afbeeldingen op een responsieve site kunt werken, raadpleegt u het betreffende gedeelte van onze Web Design Basics-bron.
Afbeeldingen worden met behulp van tags op een responsieve pagina geplaatst of
.
De tag gebruiken 
Met het attribuut srcset kun je een element specificeren meerdere versies van dezelfde afbeelding voor verschillende schermformaten.
Voorbeeld
De tag gebruiken
Element
Afbeeldingen optimaliseren voor Veilig zoeken
Safe Search is een functie die afbeeldingen, video's en sites met seksuele inhoud in de zoekresultaten van Google blokkeert of toestaat. Om deze instellingen correct toe te passen, moet u Google informatie verstrekken over het inhoudstype van uw afbeeldingen.
Dien uw afbeeldingen voor volwassenen in op een apart adres
Als uw site visuele inhoud bevat die uitsluitend bedoeld is om door volwassenen te worden bekeken, zeer aan te bevelen plaats deze apart. Voorbeeld: http // www.example.com / volwassen / image.jpg.
Metadata toevoegen aan pagina's met inhoud voor volwassenen
Als een gebruiker een Safe Search-filter toepast, gebruiken Google-algoritmen verschillende gegevens om te bepalen welke resultaten niet worden weergegeven. Bij afbeeldingen speelt machine learning een rol, maar er wordt rekening gehouden met eerder eenvoudige factoren, bijvoorbeeld waar en in welke context een bepaalde afbeelding eerder is gebruikt.
Speciale opmaak helpt om content voor volwassenen het meest te onderscheiden. Als u dergelijke inhoud publiceert, raden we u aan de volgende metatags aan uw paginacode toe te voegen:
Veel gebruikers willen niet dat inhoud voor volwassenen in zoekresultaten wordt weergegeven, vooral niet als kinderen toegang hebben tot hetzelfde apparaat. Door een van deze metatags te gebruiken, zorgt u dus voor gebruikers, die uiteindelijk geen ongewenste inhoud hoeven te bekijken.
Net als elk ander algoritme kan Safe Search het bij het verkeerde eind hebben. Als u denkt dat uw afbeeldingen of pagina's per ongeluk worden uitgesloten van zoekresultaten,
En tenslotte
Was dit nuttig?
Hoe kun je dit artikel verbeteren?
Material Design is een ontwerpconcept dat is ontwikkeld om services, interfaces en andere producten te verenigen. Het concept is ontwikkeld door Google en op 25 juni 2014 gepresenteerd aan een breed publiek op de Google I/O conventie. De ontwikkeling is gebaseerd op de kleurstelling, eigenschappen en elementen van designobjecten. Material Design wordt regelmatig aangevuld en geactualiseerd door ontwikkelaars. In eenvoudige bewoordingen is het belangrijkste idee om te ontwerpen in de vorm van blokken die openen en instorten in kubussen, zoals kaarten, met behulp van een schaduweffect. De kaarten zelf moeten onderling soepel schakelen.
De strategie van een dergelijk ontwerp is gebaseerd op het creëren van een holistische gebruikerservaring, de mogelijkheid van penetratie van diensten in een breed scala van levensgebieden van een pc-gebruiker.
Bij het maken van objecten gaan we uit van eeuwenlange ervaring en vertrouwen we erop. Maar softwareontwerp is nog een ontluikend en zich systematisch ontwikkelend product. Nadat we het helemaal hadden bekeken, stelden we ons de vraag: waar bestaat het uit?
- John Wiley, Google Search Design Lead
Hoofdprincipes
De belangrijkste principes van Material Design zijn onder meer tactiele oppervlakken, printontwerp, betekenisvolle animatie en responsief ontwerp.
Tactiele oppervlakken. De interface bestaat uit digitaal papier. De lagen van dit "papier" zijn op elkaar gestapeld en werpen schaduwen. Dankzij deze schaduwen hebben pc-gebruikers een beter begrip van de basisprincipes van het werken met de interface.
Ontwerp afdrukken. Digitaal papier geeft digitale inkt weer. Voor afbeeldingen met "digitale inkt" wordt een traditionele benadering voor tijdschrift- of posterontwerp gebruikt. De belangrijkste elementen van een printontwerp zijn schaal, raster, kleur en ruimte. Uit hen ontstaan focus, hiërarchie en betekenis. Dankzij kleur, lettertypen, formaten, achtergrond en andere elementen wordt het ontwerp van de interface zelf gecreëerd. Het gebruik ervan richt zich op de belangrijkste functionaliteit, de belangrijkste punten van product- of servicebeheer.
Betekenisvolle animatie. De duidelijkheid en begrijpelijkheid van de animatie van de applicatie heeft rechtstreeks invloed op de tijd die de gebruiker van de pc besteedt aan het begrijpen van de resultaten van de acties die in dit programma worden gebruikt. Animatie is een soort hint voor het beheren van de Material Design-interface.
Adaptief ontwerp. Een van de kenmerken van Material Design is zijn veelzijdigheid, dat wil zeggen de mogelijkheid om de drie hierboven beschreven componenten toe te passen op verschillende apparaten, zoals een computer, telefoon, tablet, enz.
Tactiele oppervlakken
Tactiele oppervlakken zijn de stukjes "digitaal papier" die, in tegenstelling tot gewoon papier, superkrachten hebben - ze kunnen uitrekken, verbinden en van vorm veranderen.
Oppervlakte
Een oppervlak is het deel van een ontwerpelement dat een schaduw werpt waardoor het ene element zich onderscheidt van het andere. Material Design streeft naar maximale eenvoud en strak design.
"Schoon" ontwerp wordt meestal het vermogen genoemd om de eigenschappen van een object door een verloop of schaduw over te brengen, zonder een structuur te gebruiken. Alle vlakken hebben hun eigen schaduw en een bepaalde hoogte.
Diepte
In "plat ontwerp" proberen ze geen schaduwen te gebruiken die volume tonen. Tegelijkertijd definiëren schaduwen een bepaalde hiërarchie en structuur van interface-elementen. Diepe schaduw brengt het belangrijkste onderwerp naar voren en brengt het op een subtiele en sierlijke manier onder de aandacht.
Diepte is een aanwijzing over de interactie van objecten. Op het moment dat de gebruiker scrolt, wordt de groene plaat vastgemaakt aan de bovenste laag en vormt een schaduw. Dit demonstreert duidelijk niet alleen de beweging van de "inkt", maar ook de beweging van de witte achtergrond eronder.
De onderste laag van diepte is de "bodem".
- Denk aan logistiek. Verschillende dialoogvensters, zwevende vensters, werkbalken hebben een bepaalde hoogte. Om botsingen te voorkomen, moeten ze periodiek langs de Z-as bewegen.
- Forceer de knoppen niet. Het is alleen nodig om een zwevende knop te gebruiken in geval van dringende noodzaak, omdat het gebruik ervan onmiddellijk het Material Design-effect in het ontwerp brengt. Gebruik het niet om acties te bevestigen en vensters te sluiten.
- Niet alles hoeft op de kaart te staan. Het is gepast om een kaart alleen te gebruiken als het object veel vormen en een grote hoeveelheid inhoud bevat. Voor andere opties is het beter om traditionele tekst of lijsten te gebruiken.
- Minimalisme in dialoogvensters. Dialogen dienen uitsluitend te worden gebruikt om gebruikersacties te bevestigen wanneer er vragen rijzen.
Print ontwerp
Alle objecten die zich op het oppervlak van het materiaalontwerp bevinden, zijn aangebracht met "digitale inkt". Deze objecten zijn afbeeldingen, testen, pictogrammen. De locatie van deze objecten is gebaseerd op het principe van printontwerp.
Strakke typografie
Typografie is essentieel in printontwerp. Het bepaalt de structuur van de inhoud en beïnvloedt de vorming van de stijl van een bepaald merk.
Typografie vormt een structuur van elementen die hun eigen grootte, lettertype, hiërarchie hebben.Met hun hulp begrijpen we visueel welke elementen belangrijker zijn en waarom sommige belangrijk zijn, terwijl andere secundair zijn.
Contrast typografie
Een ander belangrijk drukprincipe is typografiecontrast. Het is gemakkelijk in te zien dat een grote kop en een donker lettertype iets belangrijks en basaals betekenen, terwijl kleinere tekst en een lichtere toon secundaire informatie betekenen. Met contrast kunnen de belangrijkste berichten worden benadrukt, waardoor de inhoud een algehele esthetiek krijgt.
Modulair raster en hulplijnen
Terwijl schermontwerp gebruik maakt van basisrasters, maakt printontwerp gebruik van modulaire rasters. Gebruik voor Material Design een 8dp-raster.
Het kenmerk van inhoudsplaatsing in Material Design is de plaatsing van de hoofdgidsen. Dankzij hen worden inspringingen vanaf de randen van het scherm gemaakt, die de structuur van de pagina-inhoud en de controle van de blik van de gebruiker beïnvloeden. Als gevolg hiervan zien we de hoofdtekst in het midden van het scherm en worden extra elementen daarbuiten geplaatst, in de buurt van de randen.
geometrische iconografie
De eenvoudigste iconen worden al lang gebruikt op basis van het Android-systeem. In Material Design zien ze er nog eenvoudiger en visueel aantrekkelijker uit.
De indicatoren en knoppen zijn bijvoorbeeld gemarkeerd in rijke, levendige kleuren. Dankzij dergelijke kleuren worden accenten gelegd op de belangrijkste bedieningselementen (zwevende knoppen, enz.). Als het nodig is om extra kleuren aan het ontwerp toe te voegen, wordt het aanbevolen om eenvoudige, discrete tinten te gebruiken.
Gerelateerde pictogrammen downloaden:
Kleur
Kleur in design is verantwoordelijk voor expressiviteit. Eerder in Android was het kleurenschema secundair, maar nu krijgt het een van de belangrijkste rollen. In Material Design bestaat het basiskleurenpalet uit accent- en basistinten.
De actiebalk is geverfd met de hoofdkleur en de statusbalk is gemarkeerd met een meer verzadigde toon. Accentkleur wordt gebruikt voor strepen, indicatoren, zwevende knoppen. Het vestigt de aandacht op de belangrijkste elementen van de overheid.
Accenten worden puntsgewijs en in kleine hoeveelheden aangebracht. Voor de rest van de interface worden kleuren gebruikt in overeenstemming met de regel: een grote hoeveelheid tekst (een lijst met mailbrieven) wordt op een standaardformaat gelaten en kleur wordt toegevoegd om de aandacht van de pc-gebruiker te trekken; een kleine hoeveelheid tekst (rekenmachine, foto) wordt 2-3 keer vergroot en er worden gekleurde stansen toegevoegd.
In het Android-systeem kunt u de interface dynamisch kleuren, dat wil zeggen, de primaire kleuren van de algemene foto markeren.
Mooie foto's
In Material Design kun en moet je een verscheidenheid aan foto's en illustraties gebruiken. Frames ontbreken vaak op foto's. De statusbalk zelf is kleurloos gemaakt om de aandacht niet van de afbeeldingen af te leiden. "Digitale inkt" wordt altijd niet alleen gebruikt voor schoonheid, maar ook voor ontwerpfunctionaliteit.
- Branding wordt aanbevolen.
- Vergeet opvulling en vrije ruimte niet (voor het basisraster 8dp, voor opvulling - 72 dp).
- Gebruik levendige afbeeldingen.
Betekenisvolle animatie
Material Design gebruikt, net als de rest van de wereld, betekenisvolle animatie om de gebruiker te laten zien wat er op dit moment gebeurt. Dat wil zeggen, de gebruiker moet zien dat geen enkel object uit het niets wordt gehaald en in het niets verdwijnt.
Voorbeeld 1. De animatie laat zien dat deze specifieke kaart, na klikken, naar voren kwam, uitbreidde en meer informatie zichtbaar werd.
Voorbeeld 2. Wanneer je op een datum in de kalender klikt, verschijnt er een evenement, dat soepel als een laag afbreekt van de algemene kalender, verandert in een apart blok en uitbreidt tot een gedetailleerd apart blok met een beschrijving van dit evenement.
Animatie helpt om de aandacht van de gebruiker te richten, zijn blik te richten op de acties van de interface.
Reactie
Een ander belangrijk aspect van animatie in Material Design is de reactie op bepaalde acties van de pc-gebruiker. Wijzigingen in de Android L-interface treden op na het aanraken van uw vingers. Deze veranderingen worden weergegeven in golvende actie.
Microanimatie
Micro-animaties zijn enorm belangrijk. Ze worden gebruikt als reactie op alle gebruikersmanipulaties. Dit geeft de interface details en reactievermogen.
Duidelijkheid en scherpte
Het laatste principe van animatie is helderheid en scherpte van actie. Material Design heeft een interessante animatiecurve. Alle objecten reageren snel op gebruikersacties, komen abrupt terug, maar het duurt iets langer voordat ze vervagen en overgaan naar de laatste kalme staat. Uiteindelijk verspilt de gebruiker geen tijd met wachten, wat betekent dat hij niet geïrriteerd raakt en geen negatieve emoties ontvangt bij interactie met de interface.
- Plan uw animatie van tevoren.
- Gebruik animatie optimaal (overmatig gebruik wordt afgeraden omdat alle animatie zinvol moet zijn).
Adaptief ontwerp
Het laatste belangrijke aspect van Material Design is het concept van responsive design. Dit betekent opties voor het toepassen van de andere drie aspecten op verschillende apparaatschermen (telefoon, pc, tv, enz.).
Van algemeen naar specifiek
De meest populaire methode is om de hoeveelheid informatie samen met de compressie van het scherm zelf te comprimeren. Er kan veel content op de tv worden geplaatst. Er wordt eerst een lijst op de telefoon geplaatst, door erop te klikken kunt u gedetailleerde informatie openen.
inspringen
Op grote schermen wordt content ingedeeld met blokken. Ze vullen de vrije ruimte en kunnen in de breedte worden uitgerekt. Stretching houdt rekening met de leesbaarheid van de inhoud. Op de rest van het scherm worden inspringingen gemaakt waarop je zwevende knoppen of plaatjes kunt plaatsen.
Gidsen
De marges worden ingesteld met behulp van hulplijnen. De opvulbreedte voor smartphones, tablets, computers en tv's zal compleet anders zijn. Dus voor een tablet is het 80 dp en voor een smartphonescherm slechts 72 dp.
Afmetingen (bewerken)
Alle interface-elementen moeten meerdere verhoudingen hebben. De schermformaten van tablets en smartphones verschillen van elkaar, maar toepassingen die elementen met meerdere parameters gebruiken, passen zich aan elk apparaatformaat aan.
Blokken
Het modulaire raster van blokken helpt bij het bepalen van het visuele ritme voor optimale besluitvorming.
Werkbalk
Actie bar- een van de hoofdcomponenten van de interface. Het bevat actieknoppen en titels. In Android L is de actiebalk een aantrekkelijke en functionele bedieningseenheid geworden. Dit werd bereikt door het feit dat je in de Toolbar formulieren, zwevende knoppen en uitschuifbare navigatie kunt plaatsen met handige bediening.
- Gebruik geen navigatielade voor eenvoudig gereedschap. Het wordt aanbevolen om navigatie alleen te gebruiken voor tal van taken in de toepassing.
- Wees brutaler met werkbalken.
- Plaats de zwevende knop op de meest optimale plaats. Bind niet strikt aan de benedenhoek.
- Oefen interface-elementen voor zowel verticale als horizontale apparaatschermen.
Materiaal als metafoor
Google-ontwikkelaars zijn erin geslaagd om een goed aantrekkelijk ontwerp te combineren met de innovatie van moderne technologie en wetenschap.
Dit is niet de eerste keer dat materialisme in de digitale wereld wordt gebruikt. Daarom gebruikte Apple onlangs de filosofie van skeuomorfisme (imitatie van de waarneming van visuele objecten uit de materiële wereld om ons heen) in interface-ontwerp.
De Kiosk-app is hier een goed voorbeeld van. Hier visualiseerden we voorwerpen die ons bekend voorkomen: kranten, tijdschriften die in de schappen liggen. Als we door deze tijdschriften bladeren, imiteren we het echte bladeren van een gewoon boek uit het dagelijks leven. Zo wordt het traditionele echte leven digitaal gedupliceerd.
Ontwikkeling van digitaal ontwerp
De overgrote meerderheid van de gebruikers maakt dagelijks gebruik van de digitale omgeving. Ze vereisen niet langer de exacte gelijkenis van virtuele objecten met de echte wereld. Hoe sneller alle gebruikers aan dit moment wennen, hoe sneller digitaal ontwerp actief naar voren kan treden.
Op basis hiervan wordt Material Design niet langer sterk beïnvloed door skeuomorfisme. Dit is slechts een nieuwe stap in de evolutie van virtuele objecten.
Zichtbaarheid als fundamenteel
De oppervlakken en randen van de verschillende bedieningselementen in Material Design bieden aanwijzingen om te navigeren en door de interface te navigeren, vergelijkbaar met acties in het echte leven.
De tactiele kenmerken van objecten helpen om belangrijke objecten te onderscheiden van andere, om de relatie daartussen te bepalen.
De basis van materiaalontwerp omvat ook de principes van printontwerp. Accenten worden niet alleen geplaatst voor esthetiek, maar ook voor het creëren van een speciale structuur, hiërarchie en het creëren van een eenvoudig besturingssysteem.
De visuals van Material Design zijn gebaseerd op rijke kleuren, scherpe randen, grote typografie en grote afstanden tussen verschillende elementen.
Betekenisvolle dynamiek
De belangrijkste focus ligt op het gedrag (acties) van de gebruiker. Zijn interactie met design is gebaseerd op de verzamelde gebruikerservaring, en niet anders.
Voorbeelden van sites in de stijl van Material Design
Zodra de release van het concept op internet verscheen, verschenen er veel vertegenwoordigers van Material Design op internet.
De voorbeeldsites zijn gemaakt in strikte overeenstemming met de basisprincipes van Material Design. Ze zijn eenvoudig en duidelijk, met zwevende knoppen, schaduwen, levendige kleuren en beelden, en soepele navigatie. Dit alles gecombineerd om een geweldige gebruikerservaring te creëren.
Videos
Material Design trok een enorm publiek. Het laat zien hoe u een gebruikersinterface correct maakt, zodat deze absoluut begrijpelijk en duidelijk is voor de gebruiker, net als een bekend object uit de echte wereld dat met de handen kan worden aangeraakt.
Roman Nurik, een van de ontwerpers van het Google-team, vertelde hoe de I/O 2014-app tijdens het ontwikkelingsproces veranderde om te voldoen aan de Material Design-principes. Speciaal voor jou hebben we zijn video vertaald.
Video van het kanaal "Google Design".
Google Design Evangelist Mustafa Kurtudu over de toepassing van hun technologie bij de ontwikkeling van Keep- en Inbox-apps.
Naar bladwijzers
De vertaling is gemaakt door het team van de Skyeng online school voor Engels.
Material Design biedt een reeks tools en richtlijnen om u te helpen een bewust UX-ontwerp te maken bij het maken van een app-interface.
Maar wat als deze principes niet werken voor een bepaald product? En wat doen Google-ontwerpers als ze een product ontwerpen dat verder gaat dan de klassieke richtlijnen?
Materiaalrichtlijnen zijn responsief. In dit artikel bekijken we twee Google-apps, Keep en Inbox, om te begrijpen hoe ze niet alleen afwijken van bepaalde regels, maar ook nieuwe Material Design-principes vormgeven.
Inbox: modulair raster
Het ontwikkelen van een nieuwe e-mailservice is een zeer ambitieuze taak voor Google, gezien de reeds diepgewortelde Gmail-markt. Het doel van Inbox was om het interface-ontwerp te verdiepen en een unieke gebruikerservaring en huisstijl te creëren, inspelend op de nieuwe Material Design-regels.
Toen het Inbox-team de voorlopige ontwerpen maakte, was het Material Design-concept nog in ontwikkeling. Dit gaf Inbox een geweldige kans om de Material Design-normen vast te stellen en tegelijkertijd het probleem van diepte en volume in de gebruikersinterface aan te pakken.
Diepte
Het oorspronkelijke ontwerp van de Inbox was niet flexibel genoeg - de rasterruimte liet slechts zeven letters toe op een 13-inch scherm. Dat was te weinig, zeker in vergelijking met Gmail, dat 16-20 e-mails kan bevatten.
Als je Gmail en Inbox in aangrenzende vensters opent, zie je een groot verschil in visueel gewicht. En een van de grootste uitdagingen was het vinden van de juiste balans tussen inhoud en witruimte.
Tim Smith
Postvak IN van hoofdontwerper
Door de rasterinstellingen, lijnhoogten en het uiterlijk van het lettertype aan te passen, konden de ontwerpers van Inbox een optimale interfacediepte bereiken terwijl 12-17 e-mails werden weergegeven, elk in een Material Design-kaart. De applicatie-interface past zich aan het apparaat van de gebruiker aan. Het lettertype in de "Onderwerpregel" verandert bijvoorbeeld afhankelijk van de grootte van het scherm.
Kleuren, afbeeldingen en pictogrammen
Het gebruik van contextuele afbeeldingen in lettergroepen is een ander onderscheidend kenmerk van de dienst. Als een gebruiker bijvoorbeeld een reis naar New York plant, ziet hij de Manhattan-hemel op de kaart met de bijbehorende letter.
Er zijn veel pictogrammen in de linkernavigatiebalk, hun kleuren komen overeen met hun functies in de applicatie. Wanneer de gebruiker op de groene knop Gereed klikt, wordt de achtergrond van de bovenste balk ook groen, wat aangeeft dat de context is gewijzigd.
Bovenpaneel
Een andere belangrijke taak voor het team was het ontwerpen van de bovenste balk van de applicatie. Het oorspronkelijke idee was om een transformeerbaar paneel te maken dat zich niet zou uitstrekken tot de breedte van het browservenster, maar zou veranderen afhankelijk van de inhoud.
We hebben ongeveer een dozijn verschillende variaties op dit concept doorgewerkt totdat we uiteindelijk kwamen met de modus voor volledig scherm die je nu ziet. We hebben ook een paar zoekbalkconcepten gemaakt voordat we de beste stijl hebben gekozen.
Tim Smith
Postvak IN van hoofdontwerper
Kaarten in Inbox worden groter en kleiner, wat betekent dat de koptekstindeling verandert afhankelijk van hoe de gebruiker met de e-mail omgaat. De bovenste balk toont ook een zoekbalk en menu's met andere Google-apps. Door deze aanpak blijft Inbox responsief zonder de interface te compliceren.
Bewaar: responsieve navigatievoorbeelden
Keep is een platformonafhankelijke applicatie voor het maken van notities die kaarten op het scherm uit- en samenvouwt, zodat de aandacht van de gebruiker blijft bij het toevoegen van een nieuwe notitie. Met de onderste navigatiebalk kunt u snel een nieuwe notitie maken met één klik.
Betrokkenheid, lege schermen en animatie
Meestal wordt de gebruiker geconfronteerd met een leeg scherm wanneer er geen inhoud op de pagina staat. In Keep ziet het scherm eruit als een leeg canvas waarop de gebruiker snel zijn ideeën kan opschrijven.
Witruimte moedigt de gebruiker aan om de menu-items op het paneel te verkennen, dat zich uitbreidt om verschillende filters weer te geven die als pictogrammen worden gepresenteerd; het opmaakmenu, waarmee u kunt schakelen tussen de lijst en het raster, en de linkernavigatiebalk, waar u de basisinstellingen van de applicatie kunt wijzigen.
We hebben veel gewerkt aan animatie - hoe notities vloeien, hoe ze bewegen wanneer je ze opent en sluit.
Genevieve Cuevas
De juiste materiaalelementen selecteren: navigatie onderaan of zwevende actieknop
Beknoptheid en gebruiksgemak zijn de belangrijkste kenmerken van Keep. Tijdens het herontwerp van de app bestudeerden de ontwikkelaars de Material Design-sjablonen en kozen uiteindelijk voor kaarten die helpen notities van elkaar te onderscheiden, een linkernavigatiebalk die het gemakkelijker maakt om de app aan te passen, en een contextmenu dat verandert afhankelijk van het type notitie - zoals notities met selectievakjes die menu's weergeven om items in de lijst te controleren en te wijzigen.
Samen creëren deze elementen een duidelijke en functionele interface, aangepast aan een specifieke situatie. Tijdens het herwerken van Keep experimenteerden de makers met enkele basiselementen van de navigatie van de app - in het bijzonder probeerden ze de bestaande navigatie te vervangen door een zwevende actieknop.
Met de originele navigatie kon je met één tik een nieuwe notitie maken en voor de zwevende actieknop waren twee klikken nodig: één om opties weer te geven en één om een notitie te maken.
Toen we de zwevende knop introduceerden, klaagden sommige van onze gebruikers dat het maken van een notitie in twee klikken niet zo handig was.
Genevieve Cuevas
Google Keep-software-engineer
Veel gebruikers die de app eerder hebben gebruikt en gewend zijn aan navigatie met één klik, keurden deze wijziging niet goed. Na het testen en uiteindelijk het verlaten van de zwevende knop, konden de ontwikkelaars van Keep de oplossing kiezen die het beste bij hun productbelangen past.
Leiderschap, geen set regels
De Keep- en Inbox-teams gebruikten richtlijnen als basis voor hun toepassingen. Toen ze een aangepast script tegenkwamen dat niet werkte, konden ze hun ontwerp aanpassen aan de behoeften van de gebruikers.
Material Design biedt begeleiding op basis van jarenlange Google-ervaring, maar het is onmogelijk om er absoluut een probleem mee op te lossen. De voorbeelden van Keep en Inbox laten zien dat u de richtlijnen voor materiaalontwerp kunt gebruiken en deze kunt aanpassen aan uw specifieke product.
