Skitsevejledninger

Materialedesignsystem med skissesymboler

Lær hvordan du designer smartere og hurtigere ved hjælp af materielle retningslinjer indbygget i indlejrede symboler

Jeg vil præsentere dig Puds et mobilt designsystem lavet til at forenkle arbejdet med materielle retningslinjer ved at implementere grundlæggende principper og Sketch app bedste praksis i indlejrede symboler, hvilket giver brugeren en hurtig og pålidelig komponentbaseret designtilgang.

Vejledningens indhold:

  1. Introduktion - Baghistorie og idé bag skabelsen.
  2. Oversigt - Et hurtigt kig på hovedafsnittene.
  3. 🎛 Opsætning - Kontrolpanel til enhver detalje.
  4. Komponenter - Materielle komponenter med symboler.
  5. Resume - Brug sager og ofte stillede spørgsmål

1. Intro

Hvorfor har verden brug for et andet Sketch-designsystem?

Mest fordi jeg finder det klassiske Materiale look var forældet, og efter at have foretaget en lille undersøgelse, var jeg overbevist om dette. De fleste af mennesker (* Designere) ville synes, det er slidt eller "for skyggefuldt" at bare blinde bruge det i deres produkter, da det kan føre til en ikke-unik app-brugergrænseflade, der let kan gå tabt blandt alle andre applikationer, der allerede er på markedet.

Men hele Material.io-designsystemet er smukt. Det er ikke kun visuals, men det er også præcise designbeslutninger og menneskedrevne mønstre, der arbejder med viste komponenter. Grundlaget for alle er en solid struktur, primært bestående af den komponentbaserede designtilgang, guld 8-punkts gitter, ren typografi og eksisterende målinger for brugerens mobile oplevelse.

Derfor tror jeg det er muligt at implementere disse universelle ingredienser i et enkelt UI-bibliotek, der vil give det en master med enorme fordele i retning af tilpasning af mobilappdesign ved at bruge kraften i symboler, f.eks.

https: //dribbble.com/shots/Material-Design-System-with-Sketch-Symbols

2. Oversigt

Puds er et Mobile-first Toolkit designet til at hjælpe med at validere og generere ideer hurtigere ved hjælp af skudsikker retningslinjer pakket i Sketch økosystem. Master-filen er opdelt i 5 separate sider, der hver har sit formål og masser af forudindrettede indhold for at gøre den til en perfekt legeplads eller kontrolpunkt for et nyt projekt.

Indhold:

  • Kom i gang - Startpunktet og et kontrolpanel for et nyt projekt. Juster dine farver, stilarter og skrifttyper her for hurtigt at udbrede ændringerne gennem hele systemet.
  • Stilguide - Farveskemaer, typografiark, ikoner og skrifttype, alt sammen tjener dig som den ultimative kilde til sandhed for dit brand eller et projekt.
  • Komponenter - Systemets byggesten er lavet i 3 forskellige farvetemaer, der viser enorme tilpasningsmuligheder mod hvert element og komponent.
  • Skærme - Denne side indeholder en altid voksende samling af foruddesignede skærmmønstre bygget med systemkomponenter, der frit kan tilpasses og bruges som arbejdsmateriale.
  • Symboler - Systemets hjerte, stedet for alle symboler, der er kategoriseret og manuelt sorteret efter dets type. ♥ ️

Alle sider kombineres til et kraftfuldt værktøjssæt til at dække en enorm mængde brugs-sager ved design af mobile applikationer ved at give alle, der er bekendt med Sketch, muligheden for at oprette UI-sæt, designsystemer, wireframes og prototyper meget hurtigere og lettere.

3. Opsætning

Hvis du vil opsætte Puds og have din unikke version af systemet, kræver det kun at overskrive egenskaberne for lag og tekst.

Ja, det er så let. ️

For at gøre dette, gå til siden Kom i gang, vælg lag og stilarter, du vil justere, ændre dem i en gruppe eller en efter en, og anvend. Resten gøres ved hjælp af magi med delte stilarter, der synkroniserer alle eksisterende symboler med de seneste valgte stilarter, inklusive tekstsymboler.

Tip: Husk at opdatere din primære tekstfarve på mærket, som det er vist i videoen.

Når du har denne side under din kontrol, gør det nemt at oprette nye temaer og stilarter inden for et par klik gennem hurtig adgang til hver visuel parameter i systemet, inklusive en stilguide, der altid forbliver synkroniseret.

4. Komponenter

Konceptet med gips har til formål at bringe store fordele på både kort og lang sigt ved at dele UI'en i kompakte byggesten, der er lette at tilpasse, skalere og genbruge til både Android og iOS platforme.

Komponenter - med dem kan du hurtigt designe mange skærme inden for en enkelt iteration ved blot at placere dem på det rigtige sted på tegnebrættet. Men hvad vigtigere er det faktum, at du kan opdatere dem med nye detaljer, når det er tid til at komme til en ny funktion, og sprede ændringerne gennem din app problemfrit uden yderligere indsats.

For at forklare arbejdsgangen med symboler, her er en kort video af mig, der bruger Gipskomponenter til at opbygge en brugerprofilskærm.

Tip: Ved at bruge de samme komponenter er det muligt at foretage ændringer til flere symboler på én gang.

Bemærk: Alle gipskomponenter har den samme samlede symbolstruktur, der deler identiske tilsidesættelsesegenskaber med alle systemkomponenter uden undtagelse, hvilket gør det meget let at forstå og arbejde med overstyringspanelet.

Her er et nærmere kig på den typiske listekomponentstruktur.

Tip: Du kan låse individuelle symboler for at skjule dem fra at blive vist i overstyringspanelet.

I dette eksempel er alle 4 symboler indlejret i en enkelt komponent, der repræsenterer visuelle egenskaber, der er mulige at justere eller bytte, såsom form, farve eller skygge (Materiale) tekst (Listepost), separatorer (Divider), et ikon (R Ikon).

Bemærk: du kan tilføje Gips som et bibliotek for at have alle komponenter, der altid er klar til at blive brugt gennem alle dine dokumenter, når som helst på dagen, ved hjælp af både Symbol-menuen eller et cool Sketch Runner-plugin.

For at vise dig på en mere detaljeret måde, hvordan komponenter bruges, har jeg forberedt en demofil med en simpel brugergrænseflade, lad dem downloade den og se dem i aktion for at få en fornemmelse af systemfunktionerne.

Download demofilen

5. Resume

Puds er et værktøj lavet til at teste og løse produktmål på kortest mulig tid. Når installationen er klar, sparer du dig selv mange timer på hvert næste mobildesignprojekt takket være den mangfoldighed af brugssager, dette sæt kan tilbyde.

Brug sager

  • Valider ideer hurtigere. Når du har foruddesignede komponenter i din beholdning, sparer man meget tid prototype fra bunden for både designere og udviklere gennem genbrug af de velprøvede og eksisterende løsninger.
  • Opret en smuk stilguide, og brug den som en kilde til sandhed til dit projekt, opret nye temaer og stilarter baseret på det.
  • Opret animationer, og brugerstrømme ved hjælp af Sketch-native funktioner eller eksportkomponenter til enhver anden app efter eget valg.
  • Lær Material.io retningslinjer og Sketch app bedste praksis på en sjov og interaktiv måde blive mere ekspert inden for dette designfelt.
  • Synkroniser og del biblioteket med dine teamkammerater for at samarbejde og holde dig ajour med hver ændring ved hjælp af adskillige plugins og apps.

Gør mere på kortere tid, bygg fed og smukke applikationer.

Besøg webstedet for gipsdesignsystem for at få den fulde version af produktet, eller download demofilen og udforsk den nærmere.

Ofte stillede spørgsmål

Hvordan får jeg den nyeste version?
Vi sender e-mail-meddelelser via Gumroad og tweet, når den nye version er frigivet, så sørg for at følge os, og hvis du allerede har købt Gips, gå til produktsiden og download den nyeste version.

Betyder det, at rammer ikke længere vil blive opdateret?
Nej. Begge systemer opdateres separat, vores mål er at oprette de bedst mulige UI-biblioteker til Sketch-appen, og vi har ikke til hensigt at stoppe med at innovere vores produkter.

Vil du foreslå en funktion eller en komponent?
Store! Du er velkommen til at nå os og diskutere det via hello@robowolf.net.

Hvad adskiller dit produkt fra andre UI-sæt?
Puds er indbygget i et system gennem konstante forbedringer og er baseret på de eksisterende mobile designmønstre, hvilket giver brugeren en mulighed for at kontrollere og skalere mobile designsystemer til mellemstore / store klienter på en hurtig og selvsikker måde.

Før du går:

  • Følg på Twitter og Dribbble for flere nyheder og opdateringer.
  • Find ud af mere designrelaterede artikler og freebies: