Bedre gittersystemer i UI-designværktøjer.

Designere skal være i stand til at udforske konsekvenserne af gitter visuelt - ikke kun i kode.

I den første del af denne artikel, "Er gittersystemer stadig relevante i digital produktdesign?", Kiggede jeg på netsystemets historie og deres praktiske fordele. Kort sagt: gitter er stadig nyttige til interfacedesign, men skærmen er meget mere kompliceret end den udskrevne side, da både outputmediet og indholdet er meget varierende.

Så hvad er der galt med gitter i UI-designværktøjer?

Softwareudviklere har værktøjer til at hjælpe med at styre skærmlayoutkompleksiteten: begrænsningssystemer som iOS 'AutoLayout og Android's ConstraintLayout, Flexbox og endda netspecifikke rammer som det kommende CSS Grid. Men layoutbeslutninger skal træffes af designere, ikke delegeres til udviklere. De er kritiske til formen og funktionen af ​​en grænseflade. Designere skal være i stand til at udforske konsekvenserne af beslutninger om netlayout visuelt, ikke kun i kode.

75% af interface-designere bruger primært Photoshop, Illustrator eller Sketch. Hvert af disse værktøjer blev oprettet omkring metaforen på siden, ikke på skærmen. Overraskende er metoderne til at arbejde med gitre i disse værktøjer også baseret på tryktraditionen. For digitale produktdesignere fører dette til nogle store smertepunkter i daglig brug.

lydhørhed

For at oprette et gitter indstiller du typisk parametre som total bredde, antal og bredde på kolonner, tagrender og marginer:

Skitse og Photoshops gitterkontroller

Dette skaber et gitterstillads, der tegnes som et sæt styrelinjer på toppen af ​​tegnebrættet. Elementer kan derefter klikkes manuelt til disse guiderlinjer:

Dette fungerer fint til print. Designeren ved, at deres publikation vil for eksempel bruge A4-papirstørrelsen. Men hvad sker der i digitalt, når du skal simulere en anden enhedsstørrelse? Ændring af tegnebrætets dimensioner betyder, at gitteret enten er for stort eller for lille:

Den mest almindelige løsning på dette problem er at oprette flere tegnebræt, der hver svarer til en unik enhedskategori, som smartphones, tablets og desktops. Individuelle gitre kan derefter oprettes separat for hver enhed / tegnebræt:

Simulering af lydhør: oprettelse af gitter til et par forskellige enhedsstørrelser kan hjælpe, men detaljer falder stadig igennem.

Dette er en temmelig elendig simulering af outputmedier, da det kun repræsenterer tre potentielle enhedsopløsninger. (I ovenstående eksempel er det iPhone 7, iPad og en 13 "Macbook Pro.) Har lydbeslutningerne stadig lyd på en Google Pixel eller en iMac 5K? Hvad med landskabsorienteringer eller opdelte visninger?

Arbejde med kun få faste netkonfigurationer gør det nemt at gå glip af problemer, mens du arbejder. Enten finder udvikleren dem under implementering - hvilket kræver en masse irriterende frem og tilbage - eller de ødelagte layouts ender i dit slutprodukt.

Formere ændringer

I de indflydelsesrige gidsystemer i grafisk design kræver Josef Müller-Brockmann, at gitter skal specificeres i starten af ​​et projekt, inden der opstår sidelayout. Faktisk foreslår Müller-Brockmann at kende alle variablerne i et projekt, før det specificerer gitteret:

Før arbejdet kan begynde […], skal spørgsmål vedrørende formatet, teksten og illustrationer, skrifttypen, udskrivningsmetoden og papirkvaliteten ryddes.

Disse variabler kan naturligvis have indflydelse på gittersystemet. For eksempel: læseafstand påvirker skriftstørrelsesbeslutninger og fontstørrelser påvirker kolonnebredder og rækkehøjder. På tryk er disse variabler kendelige og ændres typisk ikke. En bog bliver pludselig ikke en avis.

Så det er ikke overraskende, at værktøjer til visuel design til print aldrig var designet til at håndtere denne slags ændringer. At trække et par breddeenheder fra rennen - eller tilføje et par kolonner til - betyder, at du manuelt skal tilpasse alle elementer til de nye gitterlinjer:

For UI-designere er gitterændringer ofte nødvendige. Det er bare ikke muligt at redegøre for alle output- og indholdsvariabler, før man begynder visuelt design.

Selvom udskrivningsprojekter er færdige, når de går til presse, ”softwaregrænseflader” bliver aldrig ”færdige”. De bliver konstant itereret og forbedret.

Som vist ovenfor betyder en simpel ændring af gitteret manuelt omlægning af hvert element i et design. Multipliseret med hundreder af skærme kan en gitterændring betyde timer (eller dage) af elendig pixelpresning.

eksperimenter

Ved konstruktion af et nyt gitter ville Müller-Brockmann lave små håndsskitser af potentielle konfigurationer. Den tekniske vanskelighed ved processen var tilsyneladende selv for ham:

”Ved skitsering af et gitter skal man passe på, at skitsen svarer så tæt som muligt til proportioner af det endelige trykte format. […] Kun på denne måde er det gradvist muligt at tilegne sig evnen til at producere, selv i meget små skitser, typografiske mønstre, der er realistiske, dvs. som kan overføres til det endelige format uden vanskeligheder. ”
 - Josef Müller-Brockmann, Grid Systems in Graphic Design, s. 94, 49
Nogle af Joseph Müller-Brockmanns håndsskitser fra Grid Systems in Graphic Design.

Naturligvis var dette det eneste middel for Müller-Brockmann til billigt at eksperimentere med mulige gitterlayouts: han havde ikke adgang til computeren i 1981. Det er dog temmelig forundrende, at næsten 40 år senere, computerbaserede designværktøjer stadig ikke lette denne form for eksperimentering.

Meget af tiden ønsker du hurtigt at opdele nogle elementer på tværs af den tilgængelige plads, enten jævnt eller i forhold. Dette er et gitter som enhver anden, men at definere et gitterstillads for at gøre dette føles for tidligt i den tidlige proces med at udforske layout.

Tid til at bryde lommeregneren ud. Få bredden på det indeholdende rum, træk antallet af tagrenner ganget med deres bredde, og del derefter resten med antallet af elementer. Tegn et element med resultatet, dupliker det for hver søjle, og fordel derefter dem alle jævnt:

Dette er ligetil nok, men manuelt at udføre beregninger som dette holder ikke trit med tankehastigheden. Når du begynder at stille spørgsmål som "vil det være for lille, hvis jeg sætter 8 fotos på denne række i stedet for 6?", Er det kedeligt at gøre matematik hver gang og afskrækker hurtig eksperimentering.

Hvordan ser måske bedre gitterværktøjer ud?

Alle disse smertepunkter fører til en konklusion: UI / UX-designere har brug for bedre måder at arbejde med gitter under visuel design. Kevin Lynagh og jeg har arbejdet på nogle løsninger i vores UI-designværktøj, Subform. Lad os se på de principper (og eksempler), vi hidtil har fundet ud af. (Alle disse demoer blev optaget direkte fra Subform.)

Tavler skal være lydhøre af natur.

For at gittersystemer skal arbejde på tværs af mange forskellige enheder, skal du være i stand til at specificere værdier i fleksible procentdele og proportioner, ikke kun nøjagtige pixels.

Disse værdier giver dig mulighed for at opbygge et simpelt responsivt gitter meget hurtigt uden at gøre noget aritmetisk. Du indstiller blot et antal kolonner og fortæller hver kolonne at strække sig. Kolonnerne opdeler derefter jævnt den tilgængelige plads, baseret på artboardbredden:

Strækbare søjler kan blandes med faste søjler, tagrender og margener. Rendene i ovenstående eksempel er indstillet til 12px, så deres bredde forbliver fast, når tegnebrættet ændrer størrelse.

En strækbar søjle kan også acceptere proportioner. Dette åbner interessante muligheder for ikke-ensartede gitter, som at specificere, at den ene kolonne altid skal være tre gange så bred som den anden:

At arbejde på denne måde gør det meget nemmere at forstå, hvordan et gitter fungerer på tværs af forskellige enhedsstørrelser og orienteringer - og fange eventuelle kantsager, før de sendes videre til udviklingsteamet.

Glem guider og snapping - elementer skal have et formelt forhold til nettet.

I eksisterende værktøjer er gitret blot en samling guiderlinjer, der overlejrer tegnebrættet. Elementer kan snap-tilpasses til disse guider, men det er alt. Elementerne ved ikke noget om deres større forhold til nettet.

Sagen er, et gitter er forholdet mellem elementer. Vejledninger er et visuelt hack til at hjælpe med at oprette disse forhold manuelt. Det er langt bedre at opbygge disse forhold direkte.

For eksempel skal du være i stand til at placere et element ved hjælp af en regel som "start i kolonne 2 og derefter spænde 4 kolonner." Dette kan gøres implicit gennem direkte manipulation, eller eksplicit ved hjælp af en korruption som 2 / span 4. Nu når gitteret ændres, ændrer elementerne automatisk størrelse og bevarer deres justeringer:

Dette åbner også nye muligheder for direkte manipulation af selve gitteret, f.eks. Ændring af tagrender og søjler:

Rister skal muliggøre hurtig eksperimentering.

At være i stand til at definere gitter uformelt, mens du arbejder - uden at bruge en lommeregner - er også en meget tiltrængt funktion. Det kan være en god ide at tilføje nogle elementer til tegnebrættet, der automatisk deler op den tilgængelige plads og derefter indsætter rene jævnt mellem dem:

Når du har designet værktøjet, skal du udføre disse beregninger på farten - i stedet for omhyggeligt at udføre matematikken for hånd - gør eksperimenteringen hurtig og visuel. Spørgsmål som "hvor mange fotos skal vises i træk på smartphonen?" Kan let afprøves på få sekunder, snarere end efter masser af omhyggelige, kedelige pixel-skubber:

To-dimensionelle gitre bør ikke overses.

Kolonnegitter dækker mange brugssager, men mange layout kræver både søjler og rækker, svarende til Müller-Brockmanns modulære gitter. Du skal være i stand til at beskrive elementer i begge disse dimensioner: ”Vandret skal dette element starte i kolonne 3 og spænde 2 kolonner. Lodret skal det starte på række 1 og slutte på række 2. ”

Som med en-dimensionelt gitter reflekterer indholdet automatisk ændring af størrelse i begge retninger. Underform kan også beregne ændringer i gitteret, som tilføjelse af tagrender, i realtid:

Alt skal være i stand til at indeholde et gitter.

Eksisterende værktøjer tillader kun, at der defineres et gitter for hele tegnebrættet, men det er en vilkårlig grænse. Gitter er nyttige til at løse mange designproblemer, ikke kun på skærmeniveaulayout.

Ethvert rektangulært element skal kunne indeholde et gitter. En tabel kan for eksempel have brug for en separat gitterstruktur fra skærmen, den lever på:

Evnen til at bruge flere gitre og indlejre dem åbner også for en masse kreativ udtryksevne for designeren. (Karl Gerstner udførte noget ret coolt arbejde med flere overlejrede gitre til Capital Magazine i 1962.)

Konklusion

Mens vi bygger Subform undersøger Kevin og jeg konstant, hvordan vi kan skabe et værktøj, der opretholder umiddelbarheden og udtryksevnen ved visuel design, men tilføjer beregningens dynamiske kraft.

I Media for Thinking the Unthinkable foreslår Bret Victor, at for at tænke over komplekse systemer, er der behov for nye repræsentationer - repræsentationer, der er mere magtfulde end papirmediet. De repræsentationer, vi udvikler til netbaseret layout, er, håber vi, et skridt i den rigtige retning.

Og måske er de endda noget, som Joseph Müller-Brockmann måske genkender: designværktøjer til den "klart forståelige, objektive, funktionelle og æstetiske kvalitet i matematisk tænkning."

Hvis du er interesseret i at lære mere om Subform, vores UI-designværktøj, så tjek hjemmesiden. Og sørg for at tilmelde dig for at få tidlig adgang og modtage lejlighedsvise opdateringer som denne artikel. ️