Accentsconagua
Share
Eerder dit jaar werd Sketch 49 uitgebracht, samen met enkele langverwachte functies voor prototyping. In de walkthrough van vandaag zal ik alles bespreken wat je moet weten over prototyping in Sketch, van must-know snelkoppelingen, helemaal tot het krijgen van feedback en het samenwerken met je team aan ontwerpen en prototypen..
Naast de introductie van functies voor het bewerken van prototypen kwamen er vier nieuwe pictogrammen in de werkbalk van Sketch. Misschien wel het belangrijkst is hotspot die, indien geselecteerd, u in staat stelt om een interactieve hotspot op het tekengebied te laten vallen. Volgende is Link naar een tekengebied waarmee u een hotspot kunt koppelen en verbinden met een doelartboard of doel. De Prototypes laten zien Met dit pictogram kunt u de geel / oranje UI voor prototyping in- en uitschakelen in Sketch. Dit is geweldig als je nog steeds aan het ontwerpen bent en niet alle links en hotspots in de app wilt zien. Ten slotte is de Voorbeeld pictogram waarmee een voorbeeldvenster kan worden geopend, zodat u uw prototype hier in Sketch kunt gebruiken. Daar zullen we later in veel meer details over spreken.
Uiteraard heeft Sketch een aantal sneltoetsen geïmplementeerd met de release van hun prototyping-functies. Persoonlijk gebruik ik snelkoppelingen - ik hoop dat je ze ook nuttig zult vinden!
Om een goed begrip te krijgen van hoe beide hotspots en links werken, laten we hun eigenschappen in de Inspectielijst. Als u op een willekeurig element klikt, ziet u een klein tabblad voor prototyping met een plus-symbool (+) naar rechts (precies hetzelfde als bij Vulling, Randen en Schaduwen). Als u op klikt +, het maakt van het element een hotspot en u kunt ook automatisch een link voor die hotspot toevoegen. Als u weg klikt van de elemnt, verliest u de hotspot. Maar als u een link toevoegt, heeft u toegang tot prototyping-eigenschappen voor die hotspot.
De prototype-eigenschappen zijn relatief eenvoudig, omdat Sketch prototyping nog niet te ingewikkeld of uitgebreid is geworden.
De eerste is de Doelwit laten vallen. Dit is waar de hotspot naar toe linkt en waar het tikken op de hotspot u de volgende zal brengen. De standaardwaarde is wat u al hebt geselecteerd, maar op dit moment kunt u:
Het laatste wat u moet weten over eigenschappen in de Inspector is animaties. Dit dicteert de overgang die plaatsvindt wanneer op de hotspot wordt geklikt. Je hebt hier verschillende opties:
Hotspots kunnen op twee manieren worden gemaakt. U kunt handmatig een rechthoek op een tekengebied maken op dezelfde manier waarop u handmatig een rechthoek of een tekstlaag tekent. Als alternatief kunt u een specifieke laag of element selecteren. Elk ontwerpelement kan worden omgezet in een hotspot, inclusief symbolen!
Een hotspot in actieAls het specifiek om symbolen gaat, kan een hotspot worden geplaatst binnen een symbool, in plaats van één symboolinstantie als een hotspot te gebruiken. Als u een hotspot in een symbool heeft, wordt deze bij elke symboolinstantie herhaald, maar u kunt deze overschrijven net als elke andere symbooleigenschap, zoals het wijzigen van een afbeelding, een pictogram of tekst. Je kunt ook de hotspot volledig overschrijven en deze effectief uit een symbool verwijderen. Op deze manier kunt u symbolen opnieuw gebruiken totdat de koeien thuiskomen zonder u zorgen te maken over onnodige hotspots.
Een klein klein detail dat Sketch bij prototyping bevat, is een pictogram in de Lagen lijst. Dit is hetzelfde concept waar ze mee bezig zijn Symbolen en Exporteerbare segmenten. De aanwezigheid van een Hotspot-pictogram in de lagen maakt de prototypingervaring een beetje meer begrijpelijk.
Deze functie is vooral handig voor langere pagina's voor mobiele ontwerpen! Met Sketch wordt het scrollen automatisch ingeschakeld voor langere tekengebieden. In het videovoorbeeld hieronder zie je de artikelweergave voor de dummy UI die ik gebruik voor deze walkthrough. U hoeft zich geen zorgen te maken over het instellen van iets om pagina's te laten scrollen.
EEN Startpunt is het standaardartboard van waaruit uw prototype begint. Standaard is er niet één, wat betekent dat als u ervoor kiest om een voorbeeld van uw prototype te bekijken, dit wordt geopend op het tekengebied dat was geselecteerd op het moment van het bekijken van de voorbeeldweergave..
Het definiëren van een startpunt is veel nuttiger als u klaar bent om het met iemand te delen. Om er een te selecteren, navigeert u naar het gewenste startende tekengebied en opent u het Voorbeeld. Selecteer de kleine boven aan het voorbeeldvenster Vlag icoon. Telkens wanneer u een voorbeeld van het prototype vanaf nu bekijkt, begint het vanaf dat startpuntartboard.
Deselecteer het vlagicoon (grijs worden opnieuw) zal het als startpunt verwijderen, maar u kunt meer dan één beginpunt hebben. Als u het vlagpictogram op een ander tekengebied selecteert, wordt dit niet uit andere afbeeldingen verwijderd!
"Het is waarschijnlijk dat u een beginpunt helemaal aan het begin van een flow wilt definiëren, maar u kunt ook meerdere startpunten definiëren - een functie die erg handig is wanneer u complexere prototypen bouwt die veel tekengebieden bevatten, of je wilt alleen dat anderen een bepaald deel van je Prototype bekijken. "- Schetsdocumenten
Momenteel kunt u een voorbeeld van uw prototype bekijken in Sketch met behulp van de Voorbeeld voorzien zijn van. We hebben dit al een paar keer besproken. Er verschijnt een venster over je Sketch-app en je kunt rondklikken en ervoor zorgen dat je de dingen correct instelt.
Er is een andere manier om een voorbeeld van uw prototype te bekijken. Als u specifiek met mobiele ontwerpen werkt, kunt u deze gebruiken in Sketch Mirror. Op zowel uw iPhone als iPad kunt u uw apparaat verbinden met Sketch. U kunt het prototype dan meer native en in een juiste setting bekijken. De hotspots zijn er automatisch, interactief en allemaal.
Schetsspiegel noch het voorbeeldvenster maken het eenvoudig om uw prototypen met andere mensen te delen. Dus als u op zoek bent om het naar uw team te sturen of om een snelle gebruikerstest uit te voeren, moet u dit doen via Sketch Cloud. Een prototype kan door Sketch Cloud worden bekeken en gebruikt door iedereen die een link heeft. U kunt een prototype zoals elk ander ontwerp of element vanuit de app niet exporteren.
U uploadt het prototype standaard wanneer u het huidige document uploadt naar Sketch Cloud. Het wordt gewoon geëxporteerd met het document.
Als u een startpunt hebt gedefinieerd, wordt het prototype onder de eigen prototypesectie geplaatst in documenten op Sketch Cloud. Dit is de enige extra stap die u moet nemen om ervoor te zorgen dat uw prototype voor u gemakkelijk toegankelijk is via Sketch Cloud. Zodra u op uw prototype klikt, begint het vanzelfsprekend bij het startpunt en is het interactief, helemaal klaar voor gebruik!
Deel de link naar het prototype zodat iedereen het kan openen en gebruiken.
Om samen te werken, kunt u mensen reacties op uw prototype laten plaatsen (als u opmerkingen hebt ingeschakeld in Sketch Cloud). Ze kunnen opmerkingen over u achterlaten op afzonderlijke tekengebieden binnen het prototype.
Neem voor meer hulp een kijkje in Sketch's vooraf ontworpen prototypesjabloon.
Het is onder Bestand> Nieuw van sjabloon> Prototypesjabloon en heeft een aantal kantnoten die de functies verklaren.
De nieuwe functie Sketch Prototyping is rudimentair (deze heeft bijvoorbeeld slechts vier animatie-eigenschappen). Het zou het maken van snelle prototypes echter veel eenvoudiger moeten maken. U hoeft niet langer uw ontwerpen te exporteren en ze vervolgens in een externe tool zoals UXPin of zelfs Marvel te importeren.
Ik denk dat het de workflow voor ontwerpers die niets bijzonders of krachtig nodig hebben, kan verbeteren. Het zou naadloos moeten passen in hun workflows; vooral als ze Sketch Cloud al gebruiken. Als je snel en snel iets bij elkaar moet zetten om de gebruikersstroom van je ontwerpen te laten zien, dan zal dit zeker de slag slaan. Het zal uw team helpen bij het uitvoeren van een eerste stroom- of bruikbaarheidstest. Op dit moment denk ik niet dat het levensveranderend is, maar ik kan absoluut mezelf zien met behulp van Sketch's prototyping door te delen met de UI-ontwerpen van klanten voor aankomende projecten.
Heeft u de Sketch Prototyping-functie al gebruikt? Wat denk je er van? Hoe past het in uw workflow? Deel ons een link naar een prototype dat u naar Sketch Cloud hebt geëxporteerd, zodat we ook een kijkje kunnen nemen!
