Accentsconagua
Share
Wat je gaat creërenEen tijdje terug hebben we een tutorial gepubliceerd over het maken van een aangepast Sketch-bestand met herbruikbare stroomdiagrammen. Het is een geweldige bron voor het maken van uw eigen gebruikersstromen of sitemaps. In deze tutorial gaan we dat Sketch-bestand verbeteren om het bruikbaarder te maken voor anderen.
U hebt misschien collega's die uw bestand willen gebruiken of misschien betalende klanten. Hoe dan ook, de verbeteringen die we in het bestand aanbrengen, zullen betekenen dat anderen het kunnen openen, begrijpen en gebruiken.
Ik raad u aan door te gaan met de originele tutorial. Pak op zijn minst het laatste schetsbestand om te beginnen aan de rechtervoet en volg dit tweede deel. Deze tutorial zit boordevol Sketch-tips en -tricks, hier en daar wat professionele tips en enkele verwante plug-ins die je zelf moet proberen.
Het allereerste wat we zullen doen is een nieuwe pagina opzetten. Ik noem mijn "gebruikershandleiding". Deze pagina dient als een snel overzicht van het gebruik van de stroomdiagramelementen. We zullen het gebruiken om de rol van elk element uit te leggen, hoe ze te gebruiken en hoe ze hun eigenschappen kunnen manipuleren, zoals de startpunten voor pijlen.
We beginnen met een nieuw tekengebied, ik noem de mijne "Hoe pijlen gebruiken". druk op EEN om een nieuw tekengebied te maken en selecteer in de rechterbovenhoek Papiergrootte en Brief. Sketch plaatst automatisch het juiste tekengebied voor u (dit werkt ook met desktop- en mobiele schermafmetingen!).
Papierformaten voor tekengebieden in SketchIk wil dat nieuwe gebruikers een aantal dingen begrijpen, waaronder hoe een lijn kan worden geselecteerd en op een tekengebied kan worden geplaatst, hoe de vorm kan worden gewijzigd en hoe de begin- en eindpunten kunnen worden gewijzigd. Hoe je deze dingen uitlegt, is jouw keuze; de specifieke beschrijvingen en instructies zijn aan jou. Ik heb mijn beschrijvingen verbeterd door een aantal schermafbeeldingen toe te voegen.
Net als bij symbolen of laagstijlen kunnen we ook tekststijlen organiseren. Voor deze handleidingen heb ik drie verschillende tekststijlen, H1, H2, en lichaam.
Mijn H1 is Helvetica Neue, Regular, 24px groot met een regelhoogte van 30px. De H2 is Helvetica Neue, Bold, 14px groot met een lijnhoogte van 20px. De lichaam is Helvetica Neue, Regular, 12px groot met een lijnhoogte van 20px. Alle drie gebruiken ze de kleur # 325372.
We kunnen de organistsyntaxis van Sketch gebruiken om deze stijlen in de vervolgkeuzelijst te organiseren. Ik heb ze als volgt genoemd, wat je kunt zien terug te vinden in de vervolgkeuzelijst hierboven:
Ik ben er dol op - het maakt mijn Sketch-bestanden zoveel overzichtelijker!
De volgende pagina in de gebruikershandleiding gaat annotaties bespreken. Om tijd te besparen, kopieert u de pagina van de pijl en bewerkt u de tekst en afbeeldingen om annotaties weer te geven. Voor annotaties moeten we het volgende bespreken: toevoegen aan een pagina, een andere annotatie selecteren en het formaat wijzigen.
In de eerste zelfstudie hebben we ervoor gezorgd dat de annotaties voor Action en Label handmatig konden worden aangepast met de eigen eigenschappen van Sketch. Als u echter een coole plug-in wilt gebruiken om de grootte voor u aan te passen, mag ik u aanraden om Rebel Button of Paddy te downloaden en te gebruiken?
Ten slotte voeg ik een pagina toe voor "Hoe pagina's te gebruiken". Ik heb de standaardinstructies opgenomen over het toevoegen van een pagina aan het tekengebied en over het wijzigen van de standaardtekst 'startpagina'.
Tip: als u ooit uw elementen nauwkeurig moet plaatsen, selecteert u een element en drukt u op Keuze op je toetsenbord. Terwijl uw muis over de andere elementen op het tekengebied zweeft, geven indicatoren de exacte pixelafstanden tussen beide weer.
Het volgende dat we moeten instellen is de stijlgids. Ik heb een nieuwe pagina gemaakt en je raadt het al, ik heb het 'Stijlgids' genoemd. Zoals elke andere stijlgids, is dit bedoeld om gebruikers kennis te laten maken met de verschillende stijlen die in het bestand worden gebruikt. In de stijlgids ga ik de kleuren, typografie en laagstijlen bespreken, inclusief pijllijnstijlen (effen versus gestreept).
In het oorspronkelijke ontwerp van de stroomdiagrammen heb ik uiteindelijk negen verschillende kleuren gebruikt, dus laten we een nieuw tekengebied voor hen maken. Plaats alle kleuren op de pagina en geef ze een naam. De coole dingen komen daarna!
Ik voeg deze kleuren nu als stijlen toe. Op deze manier, als iemand de kleuren van de verschillende elementen wil aanpassen.
Eerst de syntaxis: Stijlen / Kleur / Kleurnaam. Zo, Stijlen / Kleur / Fout rood of Stijlen / Kleur / Achtergrond blauw. Als je klaar bent met toevoegen, kijk en bewonder je hoe netjes die kleuren in de Laagstijl laten vallen! Bovendien kun je zien dat er nog overblijvende stijlen zijn uit de originele zelfstudie. We zullen die iets later gaan organiseren.
De eerste reden voor alle opgemaakte kleuren is om te laten zien wat er in gebruik is (zoals een stijlgids zou moeten doen). De tweede reden is om gemakkelijk opnieuw te kleuren. Dat is niet van toepassing op alle verschillende elementen die in gebruik zijn (zoals tekst), maar het kan gemakkelijk van invloed zijn op degenen met slechts een achtergrond zoals de Ja en Nee annotaties. We zullen precies dat volgende proberen te doen.
Ga terug naar de symbolenpagina. Pas vervolgens dezelfde stijlen toe die we zojuist hebben gemaakt op de elementen Actie, Label, Ja en Nee. Op deze manier, als u besluit dat u niet langer wilt dat het Ja geel is, maar groen, hoeft u alleen de kleur in de Stijlgids bij te werken en alle Ja's in het hele Sketch-bestand van kleur te veranderen.
Om uw workflow een beetje gemakkelijker te maken, wilt u uw kleuren mogelijk in de documentkleuren opslaan. Dit maakt ze te allen tijde gemakkelijker toegankelijk.
Als je graag georganiseerd bent, raad ik aan de Sort Me-plug-in te downloaden. Het sorteert zowel lagen als tekengebieden, alfabetisch en numeriek (of ook omgekeerd). Hier zijn enkele andere efficiëntiemiddelen voor Sketch:
De volgende stijlgids die we moeten maken, is voor typografie. We willen alle tekststijlen in het document weergeven en ik wil ze verdelen in twee categorieën, documentteksten (zoals in de handleiding en stijlgids hier) en die in de stroomdiagrammen..
Ik wil u nu laten zien hoe u uw huidige tekststijlen kunt reorganiseren en ze kunt hernoemen (indien nodig). Van de Tekststijl drop down, selecteer de allerlaatste optie Tekststijlen organiseren ... Dat zal een nieuw venster tevoorschijn brengen dat gevuld is met elk van uw tekststijlen. Als u dubbelklikt op één, kunt u de naam ervan wijzigen. Ik wil dat je ze als volgt hernoemt:
Ik wil ook dat je alle drie "Handmatige teksten" wijzigt in "Documenttekst". We hebben de eerste namen gemaakt met de bedoeling ze alleen in de gebruikershandleiding te gebruiken, maar sindsdien hebben we de stijlgids toegevoegd waardoor de naamgevingsconventie niet langer correct is. Zoals je kunt zien is het hernoemen van de tekststijlen eenvoudig. Als je een naam verkeerd speldt of je naamgevingsconventie moet worden bijgewerkt, is dat geen probleem!
Tip: het kleine minteken [-] in de linkeronderhoek verwijdert de geselecteerde stijl. Maar wees voorzichtig: er is geen ongedaanmaking en het vraagt niet of je het zeker weet.
Werk de tekststijl bij in de stijlgids om de typografie in het hele bestand bij te werken (net als bij kleuren).
Dit wordt het laatste tekengebied onder de sectie Stijlgids. Hier bespreken we hoe de resterende elementen, het paginasymbool en het symbool voor de beslissingannotatie opnieuw moeten worden ingekleurd en behandeld. We zullen de laatste pijlen bespreken, direct na het voltooien van de sectie Gedeelde stijlen.
Als je terugkijkt naar de kleurensectie, weet je nog dat we een paar extra stijlen hadden waarvan ik zei dat we ze later zullen ordenen. Welnu, nu is het zover! Het idee is precies hetzelfde als bij het organiseren van tekststijlen. Kies om de laagstijl te organiseren; je kunt ze allemaal hernoemen, ordenen en verwijderen, net als bij tekststijlen.
Voor de laagstijlen, wil ik dat u alle stijlen / kleuren / ... die we eerder hebben gemaakt, behoudt. Hernoem de rest dan als volgt:
Tip: als u op de Tab-toets drukt, bladert u niet door de lijst met namen van stijlen die in de lagenlijst staan. In plaats daarvan maakt de Tab-toets in dit venster de naam van de geselecteerde stijl bewerkbaar of niet. Wissel het een of twee keer om precies te zien wat ik bedoel!
Onthoud minus pictogram [-] dat ik eerder heb genoemd? Het is voor het verwijderen van stijlen. Ik wil dat je het verwijdert Achtergrond grijs. Het is een overblijfsel van mijn aanvankelijke ontwerpverkenning en is nergens in gebruik.
Sluit ten slotte het venster, selecteer de achtergrond van de Decision Annotation en selecteer Maak een nieuwe laagstijl, in de vervolgkeuzelijst. Noem de nieuwe stijl "Achtergrond / Besluit". We gaan door en passen de stijlen hiervan nu aan, terug in de stijlgidspagina. Kopieer de achtergronden uit de Annotatie van de beslissing en de pagina-elementen.
Terug in de stijlgids plak je de twee achtergronden in het tekengebied Pijlen en elementen. (Ik ga alleen de pagina en de annotatie van de beslissing kopiëren.)
Om u een echt voorbeeld te geven van het veranderen van de stijl en het universeel bij te werken, wil ik dat we doorgaan en de achtergrondstyling van de Decision Annotation wijzigen. Daarom moest ik er een afzonderlijke laagstijl voor maken, dus het zou de actieannotatie niet beïnvloeden. Verander het in alles wat je maar wilt, het hoeft niet bij het ontwerp te passen. Voeg ook een 1px-rand toe met een kleur naar keuze en een nieuwe achtergrondkleur.
Als je klaar bent, van de Laagstijl drop down select Werk de laagstijl bij. Als u naar de voorbeeldstroomschema-pagina of terug naar de symbolenpagina gaat, ziet u dat de stijlen zijn bijgewerkt. Dat is een goed voorbeeld van de updategestieken in actie. Dat is precies wat u zou moeten verwachten als u het document zou bijwerken voor een nieuwe ontwerpstijl, zoals verschillende merkkleuren.
Tip: als u de stijl van een element met een laagstijl erop wijzigt, kunt u het terugbrengen naar de originele stijl door te selecteren Stel Layer Style opnieuw in.
Oké, we zijn de laatste activa tegengekomen en het gaat allemaal om de pijlen! Ik heb natuurlijk het beste voor het laatst verlaten. Allereerst moeten we pijlen toevoegen aan onze stijlgids. Op dit moment hebben we maar één soort pijl tot onze beschikking. Als je je echter herinnert tijdens het opruimen van de laagstijl, hadden we een ononderbroken lijn en een stippellijn. Laten we de gestippelde pijlen toevoegen aan onze verzameling.
Op de symbolenpagina wil ik dat je de eerste pijl, de Pijl / Standaard / Rechts en de naam Pijl / Gestippeld / Standaard / Rechts wijzigt. Selecteer de regel van de pijl en van de Laagstijlen drop down select Pijl lijn dan stippel. En dat is het! We hebben onze eerste gestippelde pijl.
Nog twee dingen hier. Ten eerste, ga je gang en daar naar de resterende pijlen. Houd je aan de naamconventie Pijl / Gestippeld / ... om een goed overzicht te houden Symbolen laten vallen. Over naamconventies en syntaxes gesproken, het tweede dat u moet doen, is het hernoemen van elk van de originele ononderbroken lijnpijlen. De Symbolen dropdown wordt rommelig als je dat niet doet.
Gebruik de plug-in Rename It Sketch om dit soepeler voor u te maken! kiezen Plug-ins> Naam wijzigen> Lagen / Artboard-namen zoeken en vervangen. Of u kunt op de Control + Option + Command + R om het invoegtoepassingsvenster te laten verschijnen. Typ hier Pijl / standaard of Pijl / S-vorm en vervang deze door Pijl / Effen / Standaard en Pijl / Effen / S-vorm enzovoort. Zorg ervoor dat de huidige zoekbereik is geselecteerd voor Huidige pagina in plaats van Laag.
Het allerlaatste als het gaat om pijlen zijn de begin- en eindpunten. In de eerste zelfstudie heb ik je laten zien hoe je verschillende voorbeelden kunt toevoegen, zoals een omtrek. Voeg zoveel stijlen toe als je wilt, en als je klaar bent vergeet dan niet om alle nieuwe en geweldige begin- en eindpunten in de stijlgids te vermelden.
En daarmee zijn we klaar met het maken van de stijlgids!
Het doel van deze zelfstudie was om de oorspronkelijke versie uit te werken en je meer geweldige manieren te leren om Sketch te gebruiken. Tegelijkertijd zal dit een aantal praktische manieren hebben getoond om al uw Sketch-bestanden te verbeteren en te verpakken om ze bruikbaarder te maken voor teamleden en klanten.
