Når det kommer til å produsere GUI-prototyper, flytskjemaer og andre forretningsdisplayer, er Visio fra Microsoft ofte et go-to-verktøy på Windows-plattformen. Macen har også applikasjoner som den gode Axure og OmniGraffle. Når det gjelder Linux, er Evolus Pencil et av de beste for å lage kvalitetsbilder raskt og enkelt.

Merk : Blyant støttes i Windows, OSX og Linux. I denne artikkelen vil vi fokusere på Linux-versjonen av blyant.

Installasjon

Blyant er ikke lenger tilgjengelig i Ubuntu-depotene (fra Raring, i det minste), men det er en enkel installasjon via DEB-pakken fra prosjektets nettsted. Installer ved å dobbeltklikke på den nedlastede pakken, eller med følgende terminalkommando:

 sudo dpkg -i evoluspencil_2.0.3_all.deb

Den eneste avhengigheten er Firefox, så hvis du er på et system som ikke inkluderer dette som standard, må du installere det (eller bruk en GUI-pakkebehandling, som vil håndtere avhengigheten av deg).

bruk

Mens med et program som GIMP eller Krita, trenger du vanligvis å lage dine egne grafiske stykker. Blyant gir deg et bredt utvalg av former du raskt kan dra på en side og endre til din smak. Ruten til venstre viser de tilgjengelige formene, i grupper som "Vanlige figurer" (grunnleggende firkanter og sirkler), "Skrivebord - GTK Widgets" (hvis du vil prototype en enhet eller GNOME-applikasjon) og "Sketchy" (en av min favoritt for webmock-ups, som ser ut som en blyantskisse). Elementer i disse gruppene kan blandes og matches.

For å legge til en av disse på tegningen, klikk og dra den på en side (nye sider kan legges til via "Ny side" -knappen øverst til høyre).

En gang på siden kan størrelsen endres ved å dra en av hjørnene eller kantene av formen, eller via feltene "Plassering og størrelse" i verktøylinjen (nyttig hvis du trenger tegningen, for eksempel en webmock-up, som passer en viss oppløsning).

Hvis du dobbeltklikker på de fleste former, kan du legge til tekst, som kan tilpasses med justering, skrift, fet / kursiv og punktstørrelse ved hjelp av knappene "Tekstformat" på verktøylinjen.

Mock-up Basics

Jeg tegner wireframes og andre diagrammer hele tiden, og den grunnleggende prosessen jeg bruker, er som følger (ved hjelp av eksempelet på en hjemmeside-mock-up for et nettsted).

Bakgrunn

For en nettside starter dette med nettleservinduet - "Window Frame" -elementet fra Sketchy-samlingen brukes her for enkelhets skyld. For å plassere dette ved 0px x 0px (dvs. øverst til venstre på skjermen), brukes "Location & Size" -kontrollene. Bunnen og venstre kantene dras, slik at den fyller hele skjermen.

En "boks" -form er lagt helt over toppen for å indikere nettadresselinjen. Noen ganger plasserer ting nøyaktig med musen er vanskelig, men piltastene kan også brukes til å flytte en form når den er valgt:

Sideelementer

En stor glidebryter kan legges til siden øverst. "Image" -formen brukes til å indikere lysbildet og to "Sketchy Triangles" for å fungere som frem og tilbake kontroller. Hvis du klikker to ganger på et objekt, blir kant / hjørnehåndtakene rosa, noe som gjør at de kan roteres:

Til slutt legges tre regioner til bunnen for å holde nyheter, en video og et kontaktskjema ("Box" -formen brukes til å skissere hver region). Nyhetene vil bare være en overskrift og litt tekst (ved hjelp av "Label" Sketchy form med noen varierende tekststørrelser), blir videoregionen laget ved å slippe en "Sketchy Triangle" inne i en "Sketchy Circle" innenfor en "Box" (dvs. en "Play" -knapp), og den siste vil være en "Etikett" ledsaget av tre "Tekstfelt" og en "Knapp":

Ved å bruke de forhåndsdefinerte figurene, gir tegneprogrammer deg svært raskt (det tok ca 10 minutter) illustrerer ideer på en måte som andre kan forstå. Dette Microsoft Visio-alternativet lar deg lage diagrammer i en intuitiv og bærbar (Evolus Pencil selv er tverrplattform, og tegninger kan eksporteres til PDF eller PNG), slik at du kan dele med kolleger.