Hvordan ny skitse stjæler dit job

Hey design folkens! Du skulle være klar til jul. Julemanden kommer tidligt i år. Og vurderet efter, hvad Sketchapp-teamet forberedte os, var vi meget gode drenge og piger og fortjente en særlig behandling. Nok ord, lad os se ...

Så lad os gennemgå en mere detaljeret ...

Stil tilsidesætter

Et problem med gamle symboler

Tidligere, da du prøvede at lave et designsystem til dit nye projekt eller forsøge at bruge og vedligeholde et eksisterende, var der et stort problem - tekstoverskridelser. Grundlæggende kunne vi gøre det ved at oprette separate tekstsymboler, der ikke fungerede med et automatisk element, der erstatter den almindelige tekst.

Dette var ikke det eneste problem med tekstsymboler. De fik netop hele projektet til at virke rodet. De var svære at skabe, ændre og vedligeholde. Og de blev gemt med alle de andre symboler, hvilket gjorde det vanskeligere at navigere inde i dem. Se bare på Material Design Theme leveret af Google, de har hundreder af tekstsymboler, men du kan ikke rigtig bruge dem med knapper eller noget andet, fordi det andet element ikke tilpassede sig til tekstsymbolets indhold.

Formformaterne kan også tilsidesættes i den nye opdatering. Det betyder, at det endelig er muligt at slippe af med den konstante brug af masker. Se på hvor stor indsats det brugte for at føje et ikon til det eksisterende designsystem.

Før (skitse 51):
1. Kopier tegnebrættet med et ikon (Cmd + D);
2. Kopier det nye ikon (Cmd + C);
3. Indsæt det på det duplikerede tegnebræt (Cmd + V);
4. Flyt det nye ikon til baggrunden på tegnebrættet (Control + Option + Cmd + ↓);
5. Sørg for, at ikonet ikke har nogen fyld eller grænser;
6. Anvend maske på det nye ikon (Control + Cmd + M);
7. Slet det gamle ikon i det øverste lag (Slet).
Tillykke, du har tilføjet et ikon! Åh, men kontrollerede du, om du har det rigtige farvesymbol til at bruge det i det egentlige design? Og i øvrigt involverer et gennemsnitsprojekt mere end 50 ikoner. Siger det bare'.

Tilføjelse af ikonet - Skitse 51

Nu (Sketch 52):
1. Kopier tegnebrættet med et ikon (Cmd + D);
2. Slet det gamle ikon (Slet);
3. Kopier det nye ikon (Cmd + C);
4. Indsæt det på det duplikerede tegnebræt (Cmd + V);
5. Anvend en stil.
Jepp, så simpelt som det.

Tilføjelse af ikonet - Sketch 52

Data

Ja, du har sandsynligvis set denne ting i Craft eller List eller et andet lignende plugin. Dette er det, der forhindrer jer i at bruge tid på tekstforfatter i lav kvalitet og fra at placere dumme “Lorem Ipsum” -tekster. Som en bonus giver det dig mulighed for at teste dit design på etiketten med forskellige længder og alle slags billeder.

Men der var et stort problem med håndværksrealisering - det fungerede ikke korrekt med symboler. Du kunne ikke vælge, hvilke data du vil ændre i flere forekomster af et symbol. Bare lad mig vise dig ...

Nu har alle tilsidesættelser et lille ikon ved siden af ​​etiketten, der giver dig mulighed for at vælge, hvilken type data du vil have der. Og til sidst tilsidesætter Sketch-højdepunkter, når du holder musepekeren inde i det højre panel.

UI-redesign

Årsagen til at vi elsker Sketch er, at det giver dig mulighed for at udføre jobbet. Skitse er enkel. Tænk på Sketch som Tesla i designværktøjets univers, mens Photoshop er Decepticon (virkelig forfærdelig Transformer-reference), der var designet til at ødelægge planeten. Sketch udskrev alle unødvendige ting fra Photoshop og skabte en ikonisk minimalistisk grænseflade, der magisk lavede et como i Adobe XD, Invision Studio og en masse andre værktøjer.

Med version 52 går Sketch endnu dybere ind i at gøre vores liv lettere. Alle ikoner blev forenklet, og ikonerne i den mørke tilstand ser (forbandede) godt ud. Det mindre rektangel findes ikke længere i justeringsikonerne, hvilket gjorde det enklere. Og søgeforstørrelsesglas blev fjernet.

Til venstre kan du til sidst let finde tegnebræt, der nu vises med et lærredsikon og er skrevet med fed skrift. Nu er ikonet for delte stilarter lilla ligesom symbolet. Derudover er der helt nye filtre, der lader dig se og kigge efter en bestemt gruppe, billede eller tekst.

Det højre panel består af de sammenklappede faner. Ved første øjekast ser det ud til, at det bringer unødvendig kompleksitet, men det giver dig faktisk mulighed for at justere grænsefladen til dit behov. Når du laver dit vigtigste job - design (og ikke skriver mellemstore artikler om design) behøver du kun fanen Stil. Men, lad os sige, du arbejder på en prototype, hvilket betyder, at der ikke er behov for at tilpasse stilarter endnu. i dette tilfælde kan du bare skjule de andre søjler.

Tilpasningsfanen viser også en forhåndsvisning af, hvordan det fastgjorte objekt vil opføre sig. Jeg synes, det er super nyttigt, og forhåbentlig opfordres flere mennesker til at bruge det i deres design.

Men hvis du ønsker noget nyt, skal du være klar til at ofre noget i stedet. Glatte hjørner og blandingstilstande er nu skjult. Ekstra par bindestreger blev udskåret helt fra den nye version. Meh ... Jeg har aldrig brugt dem alligevel.

Forbedret ydelse

Det er svært at spore, men det er sandt - store filer tager så lang tid at gengive, at det nogle gange var nødvendigt at opdele et stort projekt i et par mindre, bare fordi Sketch ikke kunne håndtere det. Gæt hvad nu, endelig behøver jeg ikke at slagte mine projekter. Efter at have testet en betydeligt stor fil (3,3 GB - mange billeder med høj opløsning) i begge Sketch-versioner, fungerer den nye glattere.

Mørk tilstand

Jeg kan huske den dag, hvor Invision Studio først blev annonceret. Alle var så begejstrede og ærligt, det var jeg også i årevis. Sketchs interface har haft det samme tema; ikke underligt, at vi alle kede os af det. Det var bare ikke godt egnet til designerens natlige livsstil.

Bummer - det mørke tema fungerer kun, hvis du skifter hele OS til det mørke tema.

Nested Boolean Operations

Det er en sej ting at have omkring, men det kræver masser af fantasi for at udnytte det godt. Grundlæggende giver det dig mulighed for at kombinere / subtrahere / osv. Alt med / fra alt. Tidligere kunne du ikke bare trække et tekstfelt fra symbolet med farvet form. I den gamle version havde du brug for at konvertere din tekst til konturer, derefter løsne dit symbol og derefter trække en fra en anden. Alt for meget indsats

Forbedringer og fejlrettelser

Sketch annoncerede 20 forbedringer og fik endnu flere fejl rettet. Jeg nævnte et par af dem tidligere, men de fleste af dem er relateret til snapping af objekter, symboloverskridelser. Og også de nye forhåndsindstillinger for iPhone og Apple Watch-artboard venter på dig.

Skjulte bonusser

Nyt udfyldningsværktøj til billeder

Først oprettede Gud Photoshop til UX Design. Derefter skar han næsten alt fra det og kaldte det Sketch. Og hvis du gik glip af de gode gamle dage, hvor der var masser af fotoredigeringsfunktioner, kan du lide denne.

Nyt udfyldningsværktøj til billeder

Vælg sti-punktikon

“Jeg brugte denne funktion før”. Jeg ved, jeg ved ... du kan stoppe med at skrive din kommentar. Denne funktion var tilgængelig før, men tilsyneladende vidste ikke mange brugere om dens eksistens. Dette er den mest sjove knap, jeg nogensinde har set. Grundlæggende gør det ikke noget. Det eneste formål med det er bare at vise dig, at du kan vælge flere stipunkt.

Vælg sti-punkter

Kombiner værktøj

Det skulle sandsynligvis være i afsnittet "Forbedringer og fejlrettelser", men det var en sådan dejlig ting at opdage, at jeg troede, at det fortjener at være her eller måske endda i dets eget afsnit. En af mine kolleger (Hej, Olia) har for nylig arbejdet med det store projekt, hvor hun arbejdede med at redesigne ikoner, og hun måtte manuelt kombinere mere end 300 komplekse ikoner. Og nu kan det gøres med et enkelt klik.

Kombiner værktøj nu arbejde, hvordan det skal

Resumé

Den dag, hvor robotter stjæler vores kreative job, er langt nok, så vi kan bare fortsætte med at drikke smoothies og tale om underlige hipster-ting uden bekymringer. Og nu kan vi være endnu mere kreative, fordi computere gør generelle pixelbevægelsesprocesser hurtigere, så vi kan fokusere på det, der virkelig betyder noget - skabe den bedste oplevelse for vores brugere.

Hvad vil vi næste?

Nu formede Sketch-teamet endelig symbolerne på den måde, det skulle fungere, men vi har stadig mange problemer i vores liv. Her er min venteliste for funktionerne i de næste versioner:
1.Real tidssamarbejde med andre designere. At arbejde som et team giver os mulighed for at gøre et bedre job hurtigere, generere flere ideer og kontrollere det samlede projektkvalitet. Men selv Biblioteker kan ikke redde dig fra konstant at spørge, om din kollega arbejder på masterfilen, og om de kunne lukke den "bare for et sekund".
2. Hurtig og nem måde at dele og tjekke dit arbejde med klienter på. Jeg kan ikke huske en dag, hvor jeg ikke havde et synkroniseringsproblem med You-Know-What-Design-Tool: konstante logouts; tegnebræt synkroniseres til de forkerte steder, hotspots fra filen synkroniseres ikke til skyen, bare når klienten skal ringe; ingen måde at blot kopiere-indsætte hotspot, og du kan sandsynligvis navngive endnu mere.
3. Indfødte autolayout-funktioner. Jeg ved ikke hvorfor, men når jeg bruger Autolayout-plugin i min fil, kan ingen fra mit team arbejde med dem. Elementerne bevæger sig tilfældigt over hele tegnebrættet. Og nu, når Sketch lavede en separat fane til ændring af størrelse, er det kun logisk at vente på stakegrupper og indholdsbaseret størrelse til polstring og marginer.

P. S. Tak, fordi du læste dette, og jeg håber, du har fundet nogle nyttige oplysninger her. Beklager, hvis det ser ud som Sketch betalte mig for denne artikel (de gjorde det ikke, men jeg er åben for nye tilbud ), jeg er bare en stor fan af appen og bad om symbolopdateringen i lang tid.

Venligst, tryk på "bifald" -knappen, hvis du nød denne artikel så meget, som jeg nød den nye Sketch. Skriv en kommentar, hvis jeg gik glip af noget. Skriv en kommentar, hvis du ikke er enig med noget, eller bare skriv "Hej", så jeg ville vide, at mindst et rigtigt menneske læste det ...

Følg mig på Twitter
Følg mig på Dribbble