Skip to content

Gebruik Adobe Experience Design CC om een ​​Material Design-kaart te maken

15 de augustus de 2021
Image 01 575edf593df78c98dc0c3a62

De Material Design-specificatie van Google was oorspronkelijk gericht op het Android-platform als een manier om een ​​consistent ontwerp op het platform te suggereren. Toen ontwerpers er eenmaal doorheen begonnen te prikken en de gedachte erachter begrepen, is Material Design stilletjes een van de meest invloedrijke visuele filosofieën in web- en mobiel ontwerp geworden. Het enige dat u hoeft te doen om te zien wat we bereiken, is door een Material Design-zoekopdracht op Pinterest uit te voeren en u zult honderden voorbeelden en experimenten zien op apparaten, tablets en zelfs websites. Het fascinerende aspect van Material Design is dat Google denkt over hoe apps moeten verschijnen en werken op mobiele apparaten, maar de concepten worden toegepast op elk scherm van elke grootte op elk platform. Zoals Google in de openingsparagraaf van de specificatie stelt: “We hebben onszelf uitgedaagd om een ​​visuele taal voor onze gebruikers te creëren die de klassieke principes van goed ontwerp combineert met de innovatie en mogelijkheden van technologie en wetenschap. Dit is materiaalontwerp. Deze specificatie is een levend document dat zal worden bijgewerkt naarmate we de principes en specifieke kenmerken van materiaalontwerp blijven ontwikkelen.” Het materiaal waarover wordt gesproken, in zeer algemene termen, is papier en een kenmerk van Material Design is de kaart. Denk aan een indexkaart op een oppervlak en je bent op de goede weg. Een kaart is een element dat foto’s, video’s, tekstlinks, enzovoort bevat, maar waar ze verschillen van de meeste interactieve ontwerpen, is dat ze bedoeld zijn om zich op één enkel onderwerp te concentreren. Kaarten hebben afgeronde hoeken, bevatten vage schaduwen die aangeven dat ze zich boven een oppervlak bevinden en als ze zich allemaal op hetzelfde vlak bevinden, worden ze een “verzameling” genoemd. In deze “How To” gaan we een kaart maken op basis van de specificatie. In plaats van de kaart te maken met een verscheidenheid aan beeld- en tekengereedschappen, gaan we er vanuit een andere richting naar kijken. We gaan de tools gebruiken in Adobe’s Experience Design, dat momenteel in een openbare preview voor Macintosh is en gratis is. Je kunt het hier downloaden. Laten we beginnen.

Het prototype-tekengebied maken in Adobe Experience Design CC

Er is geen duidelijke manier om een ​​Android-scherm te maken vanaf het startscherm in Experience Design CC (XD). Wat we vroeger deden wanneer we XD openen, is de iPhone 6-optie selecteren en, wanneer de interface wordt geopend, selecteren we de Tekengebied-tool onderaan de Werkbalk en selecteer Android mobiel uit de selecties in het deelvenster Eigenschappen aan de rechterkant. Dan schakelen we over naar de selectietool, klik eenmaal op de Naam van iPhone-tekengebied en verwijder het tekengebied. In de huidige versie van XD is er een kleine pijl naast de iPhone 6 die, wanneer erop wordt geklikt, een vervolgkeuzemenu opent. Van daaruit selecteert u de Android mobiele versie en het geselecteerde Android Mobile-tekengebied wordt geopend in de interface. Om ervoor te zorgen dat we de juiste schermruimte voor de kaart hebben, gaan we meestal naar Sketch 3 en kopiëren en plakken we een statusbalk, navigatiebalk en app-balk van de materiaalontwerpsjabloon in het tekengebied. Sketch 3.2 bevat een Material Design-sjabloon (Bestand > Nieuw van sjabloon > Materiaal ontwerp) en een andere echt goede gratis is van Kyle Ledbetter die je hier kunt verkrijgen. Als je Sketch niet hebt, kun je ze kopiëren en plakken vanaf de XD-stickers in Bestand > UI-kit openen > Google-materiaal. Je kunt ze ook downloaden van Google voor gebruik in Photoshop, Illustrator, After Effects en Sketch.

Een materiaalontwerpkaart toevoegen aan een Adobe XD CC-tekengebied

De Material UI Kit wordt weergegeven en de te gebruiken kaart wordt geselecteerd.

Een van de handigste functies van XD is de opname van UI Kits voor Apple iOS, Google Material en Microsoft Windows. In veel opzichten voegen ze het woord “Rapid” toe aan de term “Rapid Prototyping”. of Sketch. Het UI-element dat we nodig hadden, was een kaart. Om erbij te komen, hebben we geselecteerd Bestand > UI-kit openen > Google-materiaal en de kit werd geopend als een nieuw document. Het element dat we nodig hadden, werd gevonden in de Kaarten categorie. Wat we zo leuk vinden, is dat ze zich houden aan de Material Design-specificatie zoals uiteengezet in de specificaties van Content Blocks, evenals de specificaties voor tekstopmaak en spatiëring die zijn vastgelegd in de Typography-specificatie. De kaartstijl die we wilden was die linksonder. We markeren het gewoon met onze muis en kopieerden het naar het klembord. Helaas bevat XD geen interface met tabbladen voor open documenten. Wat we doen, is het geopende documentvenster een beetje naar beneden verplaatsen om degene te onthullen waaraan we werken, het selecteren en plakken. Een andere manier om snel te schakelen tussen geopende XD-documenten is door op te drukken Opdracht+.

Een materiaalontwerpelement bewerken in Adobe Experience Design CC

De drie elementen van de kaart zijn gescheiden op het tekengebied.

Als de kaart in XD van het klembord komt, ga er dan niet vrolijk mee aan de slag. Het eerste wat je moet doen is om de kaart te degroeperen omdat u toegang nodig hebt tot de stukjes en beetjes waaruit de kaart bestaat. Selecteer hiervoor de kaart en selecteer Object > Groepering opheffen of druk op Verschuiving+Opdracht+G.

Je kaart bestaat nu uit drie delen:

  • Lichtgrijze doos voor de afbeelding.
  • Middelgrijs vak voor de tekst.
  • De achterdoos die als achtergrond wordt gebruikt.

De eerste stap is om het lichtgrijze vak te verwijderen. Het enige doel is om te fungeren als een tijdelijke aanduiding voor de afbeelding, waardoor deze, als u ervoor kiest, optioneel is. Het vak met de tekst is eigenlijk donkergrijs met 50% dekking. Dit vak kan worden gebruikt als tekstachtergrond en u kunt de kleur en de dekking van het vak wijzigen. Hoewel het niet meteen duidelijk is, volgt de lichtgrijze doos de Material Design-specificatie in die zin dat de bovenhoeken zijn afgerond met 2 pixels. Houd hier rekening mee als u een afbeelding toevoegt. Het heeft ook de afgeronde hoeken nodig die kunnen worden toegevoegd aan een beeldbewerkingstoepassing of in XD. Aangezien dit de rusttoestand van de kaart is, heeft deze ook een schaduw nodig. De specificatie maakt duidelijk dat er een rusthoogte van de kaart is van 2 pixels. Om dit toe te voegen, selecteer de zwarte achtergrondvorm en stel de Y- en B-waarden (Vervagen) in op 2 in het eigenschappenvenster.

Een afbeelding toevoegen aan de Material Design-kaart in Adobe XD CC

De afbeelding bevindt zich aan de linkerkant van het scherm en het grijze vak is gebruikt om de afbeelding te maskeren.

Wetende dat de kaart 344 pixels breed is en het afbeeldingsgebied 150 pixels hoog (halve hoogte van de lichtgrijze doos) We hebben de afbeelding in Photoshop geopend, bijgesneden tot het formaat en opgeslagen met de optie @2x in het dialoogvenster Exporteren als van Photoshop. De afbeelding is geïmporteerd in Adobe XD. Vervolgens sleepten we het lichtgrijze vak over de afbeelding op het plakbord en selecteerden Object > Masker met vorm. Het resultaat was dat het beeld de afgeronde hoeken van de vorm oppikte. Vervolgens hebben we de afbeelding naar zijn definitieve positie verplaatst. Met de afbeelding op zijn plaats, hebben we vervolgens de achtergrondkleur van het medium grijze vak gewijzigd, de tekst en de kleur van de linktekst gewijzigd.

De Adobe XD CC-rasterfunctie gebruiken

De rasteroverlay wordt over het tekengebied weergegeven.

Als de kaart compleet is, moet deze nu correct worden geplaatst volgens de Material Design-specificatie. Dit betekent dat er 8 pixels aan weerszijden van de kaart zijn en dat de kaart 8 pixels onder de app-balk moet zijn. Om dit te doen, klikt u eenmaal op de naam tekengebied en in de Paneel Eigenschappen, selecteer Rooster. Het raster verschijnt over het tekengebied. De standaardrastergrootte is 8 pixels, wat toevallig dezelfde rastergrootte is voor Material Design. Als u een ander formaat nodig heeft, wijzigt u de waarde in het rastergebied. Als u de kleur van het raster wilt wijzigen, klikt u op de kleurenchip en kies een kleur uit de resulterende Kleur kiezer. Klik met het raster zichtbaar op de kaart en verplaats het naar zijn definitieve positie. Om af te ronden, selecteerden we de kaart, klikten op de Herhaal raster knop en veranderde ook de afstand tussen de kaarten in 8 pixels.