Adobe Experience Design Trucs, tips en technieken
Toen Adobe Experience Design introduceerde als een publieke preview, bereikte het bedrijf twee nogal verbazingwekkende prestaties op hetzelfde moment. Eerst hebben ze een ruimte uitgezet in de opkomende markt voor prototyping-software. Ten tweede creëerden ze een mogelijkheid voor gebruikers om te spelen met een "work-in-progress" en laten ze de gebruikers die vooruitgang beïnvloeden. Nu de applicatie een paar maanden beschikbaar is geweest, leek het me een goed moment om wat trucs, tips en technieken van Experience Design te delen.
Maar eerst vraag je je misschien af wat wordt bedoeld met prototyping-software. Tot de grote spelers in deze ruimte behoren Proto.io, Principle, UXPin, Atomic.io, Experience Design en InVision. In tegenstelling tot toepassingen zoals Sketch 3, Photoshop en Illustrator waar statische ontwerpen worden geproduceerd, introduceren deze grafische editors interactiviteit, beweging en andere functies die veel voorkomen in de mobiele en webontwerpruimte van vandaag.
Met de opkomst van mobiel en de onvermijdelijke, laserachtige focus op de gebruiker, is het niet langer voldoende voor een ontwerper om een paar schetsen op te rollen, een aantal composities bij elkaar te zoeken en vervolgens het project vrij te geven of te uploaden naar een webserver. De UI / UX-workflow heeft de dingen fundamenteel veranderd. Elke stap van het proces, van het identificeren van de gebruiker, schetsen, wireframes, mockups en prototyping, wordt nu onderworpen aan uitgebreide gebruikerstests.
Het is die laatste fase - prototyping - waarbij de pijnpunten worden ontdekt en verholpen voordat het project de eindproductie bereikt. Dit is waar interactiviteit, beweging, schermovergangen en plaatsing van alles op het scherm zo kritisch zijn. Problemen en problemen kunnen niet eenvoudig worden weergegeven als een statische afbeelding of mondeling worden uitgelegd. Deze producten zijn immers voor echte mensen. In plaats van alles naar code te verplaatsen, wordt het prototypeproces in toenemende mate uitgevoerd door grafische software die speciaal voor dat doel is ontworpen. Het is gemakkelijker om een fout te herstellen, een afbeelding te vervangen, een stukje tekst te herschrijven, een knop te verplaatsen enzovoort met een visuele editor dan constant herschrijven en code debuggen.
In feite is deze software een belangrijk onderdeel geworden in de huidige "Rapid Prototyping" ontwerp- en ontwikkelomgeving.
Dat gezegd hebbende, laten we plezier maken met Experience Design.
02 van 07Maak een bestemmingspeld met een eenvoudige cirkel in Adobe Experience Design
Een leuk aspect van XD is het gebruik van vectortekenprogramma's. Kunt u geen pictogram vinden? Geen probleem. Rol die van jezelf. Hier is hoe:
- kiezen De Ellipse Tool en teken met de Option / Alt-Shift-toetsen ingedrukt een cirkel.
- Stel de cirkel in met de geselecteerde cirkel Vul de kleuren in op FF0000 en de rand om "geen" in de eigenschappen.
- Dubbelklik op de cirkel om de ankerpunten te tonen. Sleep het onderste anker naar beneden.
- Dubbelklik op het geselecteerde ankerpunt en de curven worden vervangen door lijnen.
- Teken nog een kleine cirkel met een witte vulling en geen stook. Verplaats hem in positie en selecteer de pin en de cirkel. Klik in het uitlijnpaneel boven aan de eigenschappen op de knop Horizontaal midden en de pin is gemaakt.
Maak een achtergrondvervaging in Adobe Experience Design
Het is gebruikelijk om tekst of andere inhoud op een achtergrondafbeelding te plaatsen. Het probleem hier is dat het beeld vaker de bestaande inhoud overtreft. Een manier om dit probleem op te lossen is het vervagen van de achtergrondafbeelding. U kunt de afbeelding vervagen in Photoshop of andere beeldbewerkingssoftware, maar dit is enigszins inefficiënt, vooral omdat XD deze taak nu voor u kan uitvoeren. Hier is hoe:
- Maak een nieuw tekengebied en voeg uw achtergrondafbeelding toe.
- Selecteer de Rechthoek-tool aen teken een rechthoek over de afbeelding. Met de rechthoek geselecteerd, stelt u de vulling in op wit en de lijn op geen.
- Met de rechthoek geselecteerd, selecteer Achtergrond Vervaging in het eigenschappenvenster. De drie schuifregelaars zijn Blur Bedrag, Helderheid en Dekking. Dit is wat ze doen:
- Hoeveelheid vervagen: Past de wazigheid van het beeld onder de vorm aan. De maximale waarde is +50.
- Helderheid: Past de hooglichten en schaduwen in de afbeelding aan. De minimumwaarde is -50 en de maximumwaarde is +50.
- ondoorzichtigheid: Beïnvloedt de transparantie van de vorm en de zichtbaarheid van de afbeelding onder de vorm. De waarden lopen van 0% tot 100%.
Als je echt "dingen wilt veranderen", verander dan de kleur van de vorm en speel met de waarde opaciteit om de "look" van de afbeelding te veranderen.
04 van 07Maak een Scrim in Adobe Experience Design
Een algemeen ontwerpprobleem is dat elementen van een interface-elementen een gemeenschappelijke kleur moeten zijn, maar verloren gaan wanneer ze over een achtergrondafbeelding of een effen kleur worden geplaatst. De oplossing is een gaas. Een scrim is een enigszins ondoorzichtige gradiënt die tussen het interface-element en de achtergrond wordt geplaatst. Dit is eenvoudig te bereiken in XD. Hier is hoe:
- Maak uw tekengebied in XD, voeg een afbeelding toe en kopieer en plak een interface-elementen uit de betreffende UI-kit - Bestand> Open UI-kit … - in het tekengebied. In de bovenstaande afbeelding maakt de foto de statusbalk en de appbalk moeilijk te zien.
- Selecteer de Rechthoek-tool en teken een rechthoek uit. Selecteer in het eigenschappenvenster Vulling en selecteer Verloop in de keuzelijst in de Kleurkiezer. Stel de verloopkleuren in op zwart en wit. Stel de A-waarde - dekking - in op 60% en de Wit Een waarde tot 0%.
- Met de rechthoek geselecteerd, selecteer Object> Ordenen> Achteruit sturen. De interface-elementen zijn nu zichtbaar over de afbeelding.
Maak een afbeeldingsavatar in Adobe Experience Design
Een gemeenschappelijk ontwerppatroon is te vinden in chat-apps waar mensen met elkaar praten en de afbeelding van de spreker op het scherm verschijnt. Deze avatars zijn meestal afbeeldingen die zijn gemaskeerd. Het is doodeenvoudig om dit in XD te bereiken. Hier is hoe:
- U begint met een afbeelding en een cirkel of een andere vorm op het tekengebied. Je kunt de cirkel vullen met elke kleur. Wat u niet hoeft te doen, is een streekkleur toevoegen. Het zal verdwijnen als je het effect creëert, dus waarom zou je je zorgen maken. Als je de cirkel wel moet opblazen, kopieer deze dan naar het klembord.
- Verplaats de cirkel naar de afbeelding en selecteer zowel de afbeelding als de cirkel. Met bot-objecten geselecteerd, selecteer Object> Masker met vorm. Wanneer u de muis loslaat, wordt de Avatar gemaakt. Vanaf daar kunt u het formaat wijzigen.
- Als u een lijn wilt toevoegen, plakt u de cirkel die op uw klembord zit op het tekengebied. Met de geselecteerde kopie schakelt u de vulling in Eigenschappen uit en voegt u een lijnkleur en -breedte toe. Als u ze wilt uitlijnen, selecteert u beide objecten en klikt u op de knoppen Centreren uitlijnen in de opties Uitlijnen boven in het eigenschappenvenster.
- Als je de foto in het masker wilt verplaatsen, dubbelklik op het masker. Dit toont de afbeelding en de maskervorm. Klik op de afbeelding en sleep deze naar de gewenste positie. Wanneer u de muis loslaat, bevindt de afbeelding zich op de nieuwe positie in het masker.
Speel met Adobe Experience Design Artboards
De artboards van Experience Design zijn er niet alleen om inhoud te plaatsen. Ook zij kunnen worden gemanipuleerd. Hier zijn een paar dingen die u kunt doen:
- Als u Liggende en staande versies van een tekengebied nodig hebt, dupliceert u het tekengebied en klikt u met het duplicaat geselecteerd op de knop Landschap in het paneel Eigenschappen. Het tekengebied wordt gewijzigd in de afdrukstand Liggend. Als het artboard inhoud bevat, klikt u op de naam van het tekenbord en de eigenschappen van het tekenboard verschijnen in het venster Eigenschappen.
- Als u een aangepaste kleur aan het tekengebied en het project wilt toevoegen, selecteert u het tekengebied en klikt u op de opvulkleurchip in het gedeelte Vormgeving van het venster Eigenschappen. Voer de hexadecimale waarde voor de kleur in en klik op het plusteken. De kleur wordt toegevoegd als een aangepaste kleur. Als u die kleur elders wilt toepassen, selecteert u een object en klikt u op de aangepaste kleurchip om de kleur toe te passen.
- Tekenborden kunnen verticaal scrolbaar worden gemaakt. Hiertoe selecteert u het tekengebied en wijzigt u de hoogte in de eigenschappenpanelen of sleept u de onderkant van het tekengebied naar beneden. Selecteer in het gedeelte Scrollable van het eigenschappenvenster verticaal in het vervolgkeuzemenu en voer de kijkvensterhoogte voor het scherm in. De gestippelde blauwe lijn toont de onderkant van de viewport. Om het te testen, klikt u op de knop Afspelen en schuift u weg. Als u het scrollen wilt uitschakelen, selecteert u Geen in de schuifbalk Bladeren.
Bewerk een mobiele gebruikersinterface-set in Adobe Experience Design
Experience Design bevat een UI-kit voor het ontwikkelen van iOS-, Android- en Windows-gebruikersinterfaces. Wanneer je ze voor het eerst opent, denk je misschien dat ze behoorlijk goed op hun plaats zitten. Niet helemaal - alle stukjes en beetjes in die sets zijn volledig bewerkbaar. Laten we dat uitzoeken door een Android-draadframe te bouwen.
- U begint met het selecteren van de Artboard-tool en selecteert Android Mobile in het gedeelte Google van het deelvenster Eigenschappen.
- Selecteer Bestand> Open UI-kit> Google-materiaal. Hiermee wordt de Material Design UI Kit geopend. Selecteer het vergrootglas en selectiekader thet scherm met schermgidsen. Ik vind het leuk om hiermee te beginnen omdat het me de richtlijnen geeft voor een juiste plaatsing op het scherm van de interface-elementen. Als u op een van de blauwe balken klikt, ziet u dat deze vergrendeld is. Klik op het slot dat aan elk ervan is bevestigd om het te ontgrendelen. Markeer het tekengebied en kopieer de selectie naar het klembord. Keer terug naar uw document en plak het scherm in uw tekengebied.
- Klik één keer op de App-balk bovenaan het tekengebied. Merk op hoe je het kunt selecteren.Selecteer Object> Schikken> Naar voorgrond brengen. Uw selectie bevindt zich nu boven de schermgidsen. Dit zou u moeten vertellen dat elk element op het scherm kan worden bewerkt.
- Dubbelklik op de statusbalk aan de bovenkant en, in het Properties Panel set de vulkleur naar 455A64. Dubbelklik op de App-balk en stel de vulling in op 607D8B. Dit zou u moeten vertellen dat elk element in een UI-kit kan worden bewerkt om te voldoen aan de kleurspecificaties van het project.
- Hoe zit het met de pictogrammen? Hier ziet u hoe u hun kleur kunt wijzigen. Dubbelklik op het hart om het te selecteren. Als u naar het eigenschappenvenster kijkt, kunt u ervan uitgaan dat u de selectie niet kunt bewerken. Niet helemaal. Dubbelklik nog een keer op het hart. De eigenschappen worden geopend en u wijzigt de vulkleur in FF0000. Herhaal deze dubbel dubbelklik-truc voor de overige pictogrammen en de tekst.
