Share
Wat je gaat creërenDankzij Material Design, een visuele taal ontwikkeld door Google, is het ontwerpen van gebruikersinterfaces voor het Android-platform eenvoudiger dan ooit. Als je eenmaal een paar minuten hebt besteed aan skimmen door zijn specificaties, die zo nu en dan worden bijgewerkt, kun je beginnen met het ontwerpen van Android-apps die overeenkomen met de oorspronkelijke look and feel van recente Android-releases, waaronder Marshmallow en Nougat. Bovendien heeft Google een stickervel voor Material Design gepubliceerd om u te helpen tijd en moeite te besparen.
Sticker velIn deze zelfstudie laat ik u zien hoe u met het stickervel voor Adobe Photoshop snel de gebruikersinterface van een Android-app kunt ontwerpen.
Gebruikersinterfaces die voldoen aan de Material Design-specificaties, bestaan voor het grootste deel uit eenvoudige vormen, effen kleuren en een paar schaduwen. In tegenstelling tot skeuomorfe gebruikersinterfaces variëren ze dus niet veel. In feite zien UI-widgets er, met uitzondering van hun kleuren, groottes en verhogingen, hetzelfde uit in vrijwel alle Material Design-apps. Het stickervel Materiaalontwerp bevat afbeeldingen van die widgets en, door het te gebruiken, kunt u effectief een drag-and-drop benadering volgen voor het ontwerp van de gebruikersinterface.
UI-ontwerp met slepen en neerzettenHoewel we Adobe Photoshop in deze zelfstudie zullen gebruiken, is het de moeite waard om op te merken dat het stickervel ook beschikbaar is voor Sketch, Adobe Illustrator en After Effects.
Om dit te kunnen volgen, heb je nodig:
Start Adobe Photoshop en ga naar Bestand> Openen ... om het stickervel dat je hebt gedownload te openen. Tenzij u de Roboto lettertype dat al op uw computer is geïnstalleerd, zult u een dialoogvenster zien waarin u wordt gevraagd om het te synchroniseren met Adobe Typekit of het te downloaden van een andere bron (zoals Google Fonts).
Als u Typekit gebruikt, drukt u op Lettertypen oplossen knop om door te gaan. U moet natuurlijk zijn aangemeld bij uw Creative Cloud-account om de synchronisatie te voltooien.
Zodra het stickervel wordt geopend, ziet u dat het een zeer groot document is - de afmetingen zijn 5688 × 6790 px-met verschillende lagen en laaggroepen. Ik stel voor dat je een paar minuten besteedt aan het bekijken van alles wat het te bieden heeft.
De statusbalk, de navigatiebalk en de app-balk worden samen vaak de 'globale elementen' van een app genoemd. Door deze eerst te maken, definiëren we het gebied waarbinnen de rest van de UI-widgets worden geplaatst.
In het stickervel zijn alle globale elementen aanwezig in de laaggroep die wordt genoemd Globale elementen. Het bevat ook wereldwijde elementen voor gebruikersinterfaces voor mobiel, tablet en desktop. Laten we ons voorlopig echter alleen concentreren op de MOBILE laaggroep door deze te selecteren en Alt-klikken het oogpictogram.
Zoals je ziet, bevat de lagengroep alle elementen die we nodig hebben, samen met een paar handleidingen die ons helpen om andere UI-widgets nauwkeurig te positioneren. Ga naar Laag> Dubbele groep ... om een kopie ervan te maken in een nieuw document genaamd MyMaterialApp.
In deze zelfstudie maken we de gebruikersinterface van een Android-app die als calorieteller zal dienen. Breid daarom in het nieuw gemaakte document het App-balk laaggroep en gebruik de Horizontaal tekstgereedschap (T) om de titel van de app in "Calorieën" te veranderen.
Bovendien heeft ons ontwerp een grafiek in de regio van de app-balk. Om er ruimte voor te maken, selecteert u beide sleutel schaduw en omringende schaduw lagen, druk op Ctrl + T, en maak ze allebei 250px lang. Vergeet niet om de transformatie te plegen door te slaan invoeren.
Ga terug naar het stickervel tabblad en zoek naar de LIJST laaggroep. Er zijn acht verschillende soorten lijsten beschikbaar. We zullen echter alleen het zevende type gebruiken. Selecteer daarom de laaggroep die wordt genoemd List7 en ga naar Laag> Dubbele groep ... om het duplicaat te maken in de MyMaterialApp document.
Terug in de MyMaterialApp tab, zorg ervoor dat u de List7 laag rechts onder de App-balk laag. Zodra u dit doet, ziet u dat de handleidingen en de inhoud van de lijst perfect op elkaar aansluiten.
Het is altijd een goed idee om betekenisvolle namen te geven aan uw lagengroepen. Daarom hernoem de laaggroep van de lijst naar "Voedingsmiddelenlijst".
Laten we nu de lijst zodanig wijzigen dat deze voedselitems samen met hun portiegroottes weergeeft. Dat is eenvoudig. Selecteer de juiste type lagen en gebruik de Horizontaal tekstgereedschap (T) om hun inhoud te veranderen. Ik stel voor dat u ook het lettertypegewicht van de voedselitems wijzigt in "Vetgedrukt".
Een calorieënteller-app zou niet erg handig zijn als er geen calorieën werden weergegeven. Onze lijst heeft momenteel echter geen ruimte voor meer tekst. Verwijder daarom de lagen met de naam "square" uit de genoemde lagengroepen list_01, list_02, en list_03.
U kunt nu de Horizontaal tekstgereedschap (T) om nieuwe typen lagen toe te voegen die de calorieën weergeven. Verander de lettergrootte van de lagen in 24px, hun naam voor het lettertype Roboto Normaal, en hun kleur aan # 333333.
We kunnen onze gebruikersinterface een stuk aantrekkelijker maken door er Material Design-pictogrammen aan toe te voegen. Laten we voor nu drie verschillende pictogrammen downloaden voor de drie lijstitems van onze interface.
Ga naar de pagina Materialen-pictogrammen en kies eerst het pictogram met de naam lokale pizza. In het onderste blad dat verschijnt, wijzigt u de grootte in 36dp en klik op de PNG om een ZIP-bestand met het pictogram te downloaden.
Pak het ZIP-bestand uit en ga naar de map android / betekenbare-mdpi om het daadwerkelijke afbeeldingsbestand te vinden. Sleep het en laat het in de MyMaterialApp tabblad van het Adobe Photoshop-venster.
Herhaal dezelfde stappen voor gelabelde pictogrammen lokaal café en lokaal eten.
We kunnen nu de cirkels in de lijstitems vervangen door de pictogrammen. Laten we beginnen met de lokale pizza icoon. Selecteer de laag en de laag genaamd cirkel, degene die in de list_01 laaggroep. Ga naar Laag> Uitlijnen> Verticale centra om hun centra verticaal uit te lijnen. Evenzo, ga naar Laag> Uitlijnen> Horizontale centra om hun centra horizontaal uit te lijnen.
Op dit punt kunt u de laag 'Cirkel' verwijderen list_01.
Herhaal dezelfde stappen voor de andere twee pictogrammen.
Laten we nu een aantal kleuren toevoegen, omdat de gebruikersinterfaces van Material Design meestal helder en kleurrijk zijn.
Selecteer de laag met de naam "ic_local_pizza_black_36dp", klik er met de rechtermuisknop op en selecteer Meng opties… . Ga in het dialoogvenster dat verschijnt naar de Kleurbedekking sectie en kies de kleur # ffc107, wat wordt aangeduid als Amber 500 in het kleurenpalet Material Design.
Herhaal dezelfde stappen voor de lagen met de naam "ic_local_cafe_black_36dp" en "ic_local_dining_black_36dp". Zorg ervoor dat u elke keer een andere kleur kiest.
Laten we nu de globale elementen inkleuren. Als u de kleur van de achtergrond wilt wijzigen, selecteert u de laag met de naam "Achtergrond" en drukt u op EEN om de rechthoek erin te selecteren en de Vullen kleur naar wit.
Als u de kleur van de statusbalk wilt wijzigen, opent u de lagengroep "Statusbalk", selecteert u de laag met de naam "balk" en drukt u op EEN, en verander de Vullen kleur naar Rode 900, waarvan de hex-waarde is # b71c1c.
Op dezelfde manier, om de kleur van de app-balk te wijzigen, open je de "App-bar" -laaggroep, selecteer je de laag met de naam "sleutelschaduw", druk je op EEN, en stel de Vullen kleur naar Rood 500, of # f44336.
Een zwevende actieknop is een van de meest prominente widgets in een gebruikersinterface van Material Design. Je kunt het krijgen door de laaggroep "Drijvende actieknop" van het stickervel te dupliceren. Als u problemen ondervindt om het te vinden, zoekt u dit in de lagengroep 'METRICS EN KEYLINES'.
Plaats de laaggroep "Actieknop" boven de lagengroep "Voedingsmiddellijst" in uw document.
Gebruik vervolgens de Verplaatsingsgereedschap (V) en plaats de zwevende actieknop in de rechterbenedenhoek van de gebruikersinterface.
De zwevende actieknop moet een accentkleur hebben. Selecteer daarom de "sleutelschaduw" -laag binnen de groep van de lagengroep en druk op EEN om de cirkel erin te selecteren en de Vullen kleur naar Rood Accent 700, of # D50000.
Verander ook de kleur van de "ic_add" -laag, die het plussymbool bevat, in wit. Open bovendien zijn Meng opties… en verander de waarde ervan ondoorzichtigheid naar 100%.
U hebt misschien gemerkt dat ons document erg groot is en dat het ontwerp slechts een kleine regio inneemt. Als u de grootte van het document zodanig wilt wijzigen dat het overeenkomt met de grootte van het ontwerp, gaat u naar Afbeelding> Trimmen. In het dialoogvenster dat verschijnt, gaat u verder met de standaardwaarden en drukt u op OK.
Zoals ik eerder al zei, zal de regio van de app-balk in onze gebruikersinterface een grafiek hebben. Omdat het stickervel geen stickers voor diagrammen heeft, moeten we het handmatig maken.
Begin door het rooster aan te zetten. Ga hiervoor naar Beeld> Tonen> Raster.
druk op Shift + Ctrl + N om een nieuwe laag te maken in de App-balk laaggroep en gebruik de Pencil Tool (B) om vier horizontale lijnen te tekenen, die wit zijn en 1 px dik, onder de titel van de app.
Gebruik de Horizontaal tekstgereedschap (T) om drie datums onder de laatste horizontale lijn toe te voegen. De lettergrootte van de datums kan zijn 13px.
U kunt het raster nu uitschakelen door naar Beeld> Tonen> Raster nog een keer.
Selecteer alle lagen die u in deze stap hebt gemaakt en druk op Ctrl + G om een nieuwe lagengroep voor hen te maken. Geef de laaggroep "Grafiek" een naam.
Maak vervolgens in de lagengroep "Diagram" een nieuwe laag en noem deze "Gegevens". Teken in de laag een gesloten pad met behulp van de Pen gereedschap (P). De vorm van het pad is niet erg belangrijk, zolang het er maar als een vloeiende curve uitziet.
Als u het pad met de voorgrondkleur wilt vullen, gaat u naar Paths paneel, klik met de rechtermuisknop op Werkpad en kies Pad vullen ... . Selecteer de standaardinstellingen in het dialoogvenster dat verschijnt en druk op OK.
Om de grafiek minder aanmatigend te maken, vermindert u de ondoorzichtigheid van de "Chart" -laaggroep tot 75%.
Gebruik ten slotte de Horizontaal tekstgereedschap (T) om het totale aantal calorieën dat onder het diagram wordt verbruikt weer te geven. Laat de lettergrootte van het nummer zijn 24px, en die van het label zijn 14px.
Ons ontwerp is nu voltooid. Ga je gang en verberg de laag "Gidsen", want we hebben het niet meer nodig.
Als je je ontwerp in het frame van een echt apparaat verpakt en er een schermglans aan toevoegt, heeft dit de neiging om het er gepolijst en realistischer uit te laten zien. Hoewel u Adobe Photoshop hiervoor kunt gebruiken, is het veel eenvoudiger om de Device Art Generator van Google te gebruiken.
Exporteer eerst uw ontwerp als een PNG-bestand door naar Bestand> Opslaan als ... .
U kunt het PNG-bestand nu naar een van de apparaten slepen die u in de apparaatart-generator ziet. Merk op dat je je afbeelding tot minimaal 1080 × 1920 px moet schalen om de frames van de nieuwste apparaten te gebruiken.
Nadat de apparaatillustratie is gegenereerd, kunt u deze naar een map op uw computer slepen om deze op te slaan.
In deze zelfstudie hebt u geleerd hoe u het stickervel Materiaalontwerp en Adobe Photoshop kunt gebruiken om de gebruikersinterface van een Android-app te ontwerpen. Voeg gerust meer widgets toe, verander de kleuren en experimenteer met de lay-out.
Ik wil u er ook aan herinneren dat de Material Design-specificatie slechts een verzameling aanbevolen richtlijnen is. U houdt zich er niet altijd aan, zolang u ervoor zorgt dat het eindresultaat consistent en intuïtief is.
Voor meer informatie over het ontwerpen van apps voor Android en meer ontwerpresources, kunt u Google Design bezoeken.
Accentsconagua