De Material Design-specificatie van Google was oorspronkelijk bedoeld voor het Android-platform als een manier om consistentie van ontwerp op het platform te suggereren.
01 van 06Een Material Design Card maken in Adobe Experience Design CC
Toen ontwerpers er eenmaal doorheen begonnen te porren en de onderliggende ideeën begrepen, is Material Design stilletjes een van de meest invloedrijke visuele filosofieën geworden op het gebied van web- en mobiel ontwerp. Het enige wat u hoeft te doen om te zien wat we bereiken, is om een Material Design-zoekopdracht op Pinterest te doen en u zult honderden voorbeelden en experimenten zien op apparaten, tablets en zelfs websites.
Het fascinerende aspect van Material Design is dat Google nadenkt 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 zegt: "We hebben ons uitgedaagd om een visuele taal voor onze gebruikers te creëren die de klassieke principes van goed ontwerp combineert met de innovatie en de mogelijkheid van technologie en wetenschap. Dit is een materieel ontwerp. Deze specificatie is een levend document dat zal worden bijgewerkt terwijl we doorgaan met het ontwikkelen van de principes en details van het materiaalontwerp. "
Het materiaal waarover gesproken werd, is in het algemeen 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 met foto's, video's, tekstlinks enzovoort, maar waar ze verschillen van de meeste interactieve ontwerpen, is het de bedoeling dat ze zich op één onderwerp concentreren. Kaarten hebben afgeronde hoeken, bevatten vage schaduwen die aangeven dat ze boven een oppervlak zijn en als ze allemaal op hetzelfde vlak staan, worden ze een "verzameling" genoemd.
In deze "How To" gaan we een kaart maken op basis van de spec. In plaats van de kaart te maken met een verscheidenheid aan imaging- en tekengereedschappen, gaan we er vanuit een andere richting naartoe. We gaan de hulpprogramma's gebruiken in Adobe's Experience Design, dat momenteel deel uitmaakt van een openbare preview van de Macintosh en gratis is. Je kunt het hier downloaden.
Laten we beginnen.
02 van 06Het 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 gewoonlijk deden bij het openen van XD, is het selecteren van de iPhone 6-optie en, wanneer de interface wordt geopend, selecteren we het hulpprogramma Artboard onder aan de werkbalk en selecteren Android Mobile uit de selecties in het deelvenster Eigenschappen aan de rechterkant. Daarna schakelen we over naar de selectietool, klik eenmaal op de naam van het iPhone-kunstbord en verwijder het tekengebied. Niet meer.
In de huidige versie van XD is er een kleine pijl naast de iPhone 6 die, wanneer erop wordt geklikt, een vervolgkeuzemenu opent. Hier selecteert u de Android Mobile-versie en wordt het geselecteerde Android Mobile-artboard geopend in de interface.
Om ervoor te zorgen dat we de juiste schermruimte voor de kaart hebben, gaan we meestal naar schets 3 en kopiëren en plakken een statusbalk, navigatiebalk en app-balk van de sjabloon voor materiaalontwerp in het tekengebied. Schets 3.2 bevat een sjabloon voor materiaalontwerp (Bestand> Nieuw van sjabloon> Materiaalontwerp) en nog een hele goede gratis is van Kyle Ledbetter die je hier kunt krijgen. Als je geen Sketch hebt, kun je deze kopiëren en plakken vanuit de XD-stickers die je vindt in Bestand> Open UI-kit> Google-materiaal. Je kunt ze ook downloaden van Google voor gebruik in Photoshop, Illustrator, After Effects en Sketch.
03 van 06Een materiaalontwerpkaart toevoegen aan een Adobe XD CC Artboard
Een van de meest handige 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", en maken ze het werk van de ontwerper gemakkelijker omdat gemeenschappelijke UI-elementen niet voortdurend opnieuw moeten worden gemaakt in een ontwerptoepassing zoals Photoshop, Illustrator of Schetsen.
Het UI-element dat we nodig hadden, was een kaart. Om erbij te komen hebben we gekozen Bestand> Open UI-kit> Google-materiaal en de kit is geopend als een nieuw document. Het element dat we nodig hadden, was te vinden in de categorie Kaarten.
Waar we zo dol op zijn, is dat ze voldoen aan de Material Design-specificatie zoals uiteengezet in de Inhoudsblokken-specificaties en de specificaties voor tekstopmaak en spatiëring die zijn uiteengezet in de Typography-specificatie.
De kaartstijl die we wilden was die linksonder. We plaatsen het eenvoudig met onze muis en hebben het naar het klembord gekopieerd. Helaas bevat XD geen interface met tabbladen voor geopende documenten. Wat we doen is het open documentvenster een beetje naar beneden verplaatsen om de persoon te onthullen waaraan we werken, selecteer het en plak het. Een andere manier om snel te schakelen tussen open XD-documenten is om druk op Command- '.
04 van 06Een materiaalontwerpelement bewerken in Adobe Experience Design CC
Als de kaart in XD van het klembord komt, ga je er niet vrolijk mee werken. Het eerste dat je moet doen is om de kaart uit te splitsen omdat je toegang nodig hebt tot het bit en de stukjes waaruit de kaart bestaat. Hiertoe selecteert u de kaart en selecteer Object> Groep opheffen of druk op Shift-Command-G.
Je kaart is nu samengesteld uit drie stukken:
- Lichtgrijs kader voor de afbeelding.
- Medium grijs vak voor de tekst
- Het achterste vak dat als achtergrond wordt gebruikt.
De eerste stap is om het lichtgrijze vak te verwijderen. Het enige doel is om op te treden als een tijdelijke aanduiding voor de afbeelding waardoor het, als je dat kiest, optioneel is.
De doos met de tekst is eigenlijk een donkergrijs met een dekking van 50%. Dit vak kan worden gebruikt als de tekstachtergrond en u kunt de dekking van de kleur en het vak wijzigen.
Hoewel het niet meteen duidelijk is, volgt de lichtgrijze doos de Material Design-specificatie doordat de bovenste hoeken worden 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 imaging-toepassing of in XD.
Aangezien dit de rusttoestand van de kaart is, heeft het ook een schaduw nodig. De specificatie maakt het duidelijk dat er een rusthoogte van de kaart van 2 pixels is. Om dit toe te voegen, selecteer de zwarte achtergrondvorm en stel de Y- en B (vervaging) -waarden in op 2 in het eigenschappenvenster.
05 van 06Een afbeelding toevoegen aan de Material Design Card in Adobe XD CC
Wetende dat de kaart 344 pixels breed is en het beeldoppervlak 150 pixels hoog is ( de helft van de hoogte van de lichtgrijze doos ) We hebben de afbeelding geopend in Photoshop, bijgesneden tot de grootte en opgeslagen met de optie @ 2x in Photoshop Exporteren als dialoog venster. De afbeelding is geïmporteerd in Adobe XD.
Vervolgens sleepten we het lichtgrijze vak over het beeld op het plakbord en selecteerden het Object> Masker met vorm. Het resultaat was dat het beeld de afgeronde hoeken van de vorm oppikte. Vervolgens hebben we de afbeelding naar de uiteindelijke positie verplaatst.
Met de afbeelding op zijn plaats, hebben we vervolgens de achtergrondkleur van het vakje Middelmatig grijs gewijzigd, de tekst en de kleur van de linktekst gewijzigd.
06 van 06Gebruik van de Adobe XD CC Grid Feature
Als de kaart is voltooid, moet deze nu correct worden geplaatst volgens de Material Design-specificatie. Dit betekent dat er 8 pixels aan elke kant van de kaart staan en dat de kaart 8 pixels onder de app-balk moet staan. Hiertoe klikt u eenmaal op de naam van het tekengebied en selecteert u in het venster Eigenschappen Raster. Het raster verschijnt boven het tekengebied.
De standaard rastergrootte is 8 pixels, wat dezelfde rastergrootte is voor materiaalontwerp. 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 kiest u een kleur uit de resulterende kleurkiezer.
Terwijl het raster zichtbaar is, klikt u op de kaart en verplaatst u deze naar de uiteindelijke positie.
Als afsluiter hebben we de kaart geselecteerd, op de knop Herhalen raster geklikt en ook de afstand tussen de kaarten gewijzigd in 8 pixels.
