Sådan startede min Sketch-fil: et separat tegnebræt til alle typer Yammer-tråde. Der var masser.

Mit lyspæreøjeblik med modulopbygget design

Reducer vores designoverlevering fra 30 mockups til kun en

Yammers vertikale rytmegitter, der jævnt fordeler alle UI-elementer og tekstbaserede linjer.

Jeg er for nylig begyndt at arbejde på en designfornyelse af Yammers Android-app, begyndende med at overføre alle Yammer-samtaler til et 4px lodret gitter for bedre læsbarhed. Da en enkelt forkert justeret pixel kunne smide gitteret, begyndte vi med den omhyggelige proces med at tage app-skærmbilleder og trække hver enkelt oven på min originale mockup til sammenligning. Efter mange sessioner med design og kodning sammen med Victor Alcazar og Ozzy Thebe, to meget tålmodige Yammer Android-ingeniører, så hver enkelt del af en Yammer tråd ud perfekt.

Men når vi kombinerede bidderne i en faktisk tråd, blev gitteret smidt af. Når de var stablet oven på hinanden, var de perfekte bidder ikke så perfekte.

Vi har snart fundet ud af problemet: visse kombinationer krævede en vis ekstra margen for at passe på nettet. Da en Yammer-tråd kan have hundreder af permutationer - nogle har dokumenter eller billeder vedhæftet, nogle har flere typer metadata - er vi nødt til at definere hundreder af specielle marginstørrelser. Selv hvis det var muligt at katalogisere og specialtilfælde hver af disse marginer, ville det alvorligt bremse appen.

Jeg tog problemet til vores hoveddesigner Manuel Muñoz-Solera for at mulle over. Han havde rigelig erfaring med at designe modulær UI før - det er en almindelig og veldokumenteret tilgang til CSS-rammer - men på grund af flere års hurtige produktcyklusser og den resulterende kode og designgæld, der blev bagt i vores mobil- og webapplikationer, ville vi aldrig have havde chancen for at implementere en modulær tilgang på Yammer.

Efter at have trukket alle vores bunker rundt i en kæmpe fil og bearbejdet et par af dem, kom vi frem til en enklere, mere modulopbygget tilgang til vores tråddesign, en der løste vores marginproblem.

Her er hvad vi gjorde.

  1. Vi grupperede hver del af en Yammer-tråd på samme måde som vores udviklere grupperede dem i koden. For at hjælpe vores øjne tildelte vi hver deres egen farve. På dette tidspunkt begyndte vi også at referere til bidderne som moduler, fordi vi kunne lide.
  2. Vi stoppede med at definere marginer mellem moduler. I stedet kommer al afstanden i appen fra polstring i modulerne - specifikt top polstring. Bundpolstring ville også have fungeret; bare ikke begge dele. Nøglen er at vælge en af ​​de to og holde sig til den. Dette holdt tingene enklere, da vi i nogle særlige tilfælde havde brug for at definere top- og bundmargener.
  3. Vi kastede alle de enkelte moduler i et superlængt tegnebræt. Det ser temmelig underligt ud, fordi dette ikke er en samtale, der nogensinde faktisk ville eksistere i Yammer. Det er dog okay. Alt, hvad vi har brug for det, er at kontrollere justeringen på vores gitter og sørge for, at der er gjort rede for alle typer elementer.
  4. Da alt blev anbragt lodret, havde vi stadig tre specifikke kombinationer, der kastede tingene væk. Dette var okay med os - tre var meget lettere at håndtere end hundreder. Vores ingeniører gik på arbejde med at definere særlige ”hvis…” -angivelser for hver af dem.

I sidste ende, i stedet for at have 30 forskellige tegnebræt til forskellige typer Yammer-samtaler, har vi kun et master-artboard. Vi kan trække modulerne rundt og stakke dem, uanset hvor vi vil, og når vi tænder for vores lodrette netlinjer for at kontrollere det, stiller alt op. Det er perfekt, det er kun et tegnebræt, og det matcher koden perfekt. Naturligvis var vores Android-ingeniører meget tilfredse.

Det er super nemt at trække moduler til en faktisk mockup og vide, at alt forbliver på nettet:

Det er længe siden, at jeg havde nogen epiphanier omkring den temmelig kedelige proces, som jeg overleverer mine designs, men dette tændte for den sproglige pære over mit hoved. Måske nærmer du dig allerede dine mobile designs på en modulopbygget måde, i hvilket tilfælde jeg hilser dig. Vi er et designteam med mange kollektive års erfaring blandt os, så det faktum, at vi aldrig havde struktureret vores arbejde på denne måde, fik mig til at ønske at dele mit lyspæreøjeblik med dig.

Vi arbejder nu på at "symbolisere" disse moduler ved hjælp af nogle af den nye symbolfunktionalitet i Sketch for at gøre et omfattende bibliotek med pixel-perfekte, skalerbare UI-elementer. Hold øje med en demo, det er ret flot.