Når det kommer til at producere GUI-prototyper, flowcharts og andre forretningsdiagrammer, er Microsofts Visio ofte go-to-værktøjet på Windows-platformen. Mac'en har også applikationer som den fremragende Axure og OmniGraffle. Når det kommer til Linux, er Evolus Pencil et af bedste for at skabe kvalitetsbilleder hurtigt og nemt.

Bemærk : Pencil understøttes i Windows, OSX og Linux. I denne artikel vil vi fokusere på Linux-versionen af ​​blyant.

Installation

Blyant er ikke længere tilgængelig i Ubuntu-lagrene (som i hvert fald Raring), men det er en nem installation via DEB-pakken fra projektets hjemmeside. Installer ved at dobbeltklikke på den downloadede pakke eller med den følgende terminalkommando:

 sudo dpkg -i evoluspencil_2.0.3_all.deb

Den eneste afhængighed er Firefox, så hvis du er på et system, der ikke indeholder dette som standard, skal du installere det (eller bruge en GUI-pakkeadministrator, som håndterer afhængigheden af ​​dig).

Anvendelse

Mens med et program som GIMP eller Krita, skal du generelt lave dine egne grafiske stykker. Blyant giver dig et bredt udvalg af former, du kan hurtigt trække på en side og ændre til din smag. Ruden til venstre viser de tilgængelige former, i grupper som "Fælles former" (grundlæggende firkanter og cirkler), "Desktop - GTK Widgets" (hvis du ønskede at prototype en enhed eller GNOME-applikation) og "Sketchy" (en af min favorit til web mock-ups, som ligner en blyantskitse). Elementer i disse grupper kan blandes og matches.

For at tilføje en af ​​disse til tegningen skal du blot klikke og trække den på en side (nye sider kan tilføjes via knappen "Ny side" øverst til højre).

En gang på siden kan størrelsen ændres ved at trække en af ​​hjørnerne eller grænserne af formen eller via værktøjslinjerne "Placering og størrelse" (nyttig, hvis du har brug for tegningen, som f.eks. En webmock-up, der passer en vis beslutning).

Hvis du dobbeltklikker på de fleste former, kan du tilføje tekst, som kan tilpasses med justering, skrifttype, fed / kursiv og punktstørrelse ved hjælp af knapperne "Tekstformat" på værktøjslinjen.

Mock-up Basics

Jeg trækker wireframes og andre diagrammer hele tiden, og den grundlæggende proces, jeg bruger, er som følger (ved hjælp af eksemplet på en hjemmeside-mock-up til en hjemmeside).

Baggrund

For en webside starter dette med browservinduet - "Window Frame" -elementet fra Sketchy-samlingen bruges her for enkelhedens skyld. For at placere dette ved 0px x 0px (dvs. øverst til venstre på skærmen) anvendes "Placering og størrelse" -kontrol. Bund- og venstrekantene trækkes, så det fylder hele skærmen.

En "boks" -form er tilføjet hele vejen over toppen for at indikere URL-linjen ... nogle gange at placere ting nøjagtigt med musen er svært, men piletasterne kan også bruges til at flytte en form, når den er valgt:

Sideelementer

En stor skyder kan tilføjes til siden øverst. "Image" -formen bruges til at angive diaset og to "Sketchy Triangles" til at fungere som frem- og bagkontroller. Hvis du klikker to gange på et objekt, bliver kant / hjørnehåndtag lyserødt, hvilket gør det muligt at rotere dem:

Endelig tilføjes tre regioner nederst for at holde nyheder, en video og en kontaktformular ("Box" -formen bruges til at skitsere hver region). Nyhederne vil bare være en overskrift og en del tekst (ved hjælp af skabelonformet "Label" med nogle forskellige tekststørrelser). Videobåndregionen er lavet ved at droppe en "Sketchy Triangle" inde i en "Sketchy Circle" inden for en "Box" (dvs. en "Play" -knap), og den sidste vil være en "Etiket" ledsaget af tre "Tekstfelter" og en "Knap":

Ved at bruge de præfabrikerede figurer giver tegneprogrammer dig meget hurtigt (ovenstående tog omkring ti minutter) illustrerer ideer på en måde, som andre kan forstå. Dette Microsoft Visio-alternativ giver dig mulighed for at oprette diagrammer på en intuitiv og bærbar (Evolus Pencil selv er cross-platform, og tegninger kan eksporteres til PDF eller PNG) måde at dele med kolleger.