Naudokite „Firefox“, kad sukurtumėte paprastus maketus
Pieštukas yra „wireframing“ įrankis, kurį galime naudoti, kad suprojektuotų mūsų programos vartotojo sąsajos modelį. Puikus dalykas dėl pieštuko yra tai, kad jis yra lengvas, paprastas naudoti ir glaudžiai integruotas su „Firefox“. Be to, visa tai yra nemokama atviro kodo programa! Straipsnio pabaigoje mes pateiksime jums paprastą demonstraciją apie tai, kaip naudoti pieštuką, kad sukurtumėte „Brizzly“ panašų vielinį rėmelį.
Kodėl mes sukuriame wireframes ?
Viela yra puslapio išdėstymo idėjos eskizas. Viela yra orientuota į puslapio informacinį dizainą, kad būtų užtikrinta, jog dizainas atitinka vartotojo poreikius. Viela paprastai susideda iš skirtingų formų (pvz., Dėžės, ovalo formos ir deimantų), kad būtų galima vaizduoti turinį, funkcinius ir navigacinius elementus. Šiose formose rodoma jų vieta puslapyje.
Iš pradžių tai gali atrodyti kaip laiko švaistymas, sukuriantis grubus puslapio eskizus. Vielos rėmas yra svarbus norint, kad naudotojai galėtų sutelkti dėmesį į jūsų puslapio svarbos elementą. Kuriant neapdorotą puslapio vaizdą be išgalvotų vaizdinių elementų, naudotojo dėmesys nukreipiamas į svarbius elementus, tokius kaip dydžio nustatymas, išdėstymas ir puslapio dalių išdėstymas. Pradėsime geriau suprasti, ką klientas tikrai nori ir turi iš programinės įrangos, kai vartotojas pradeda sutelkti dėmesį į svarbius puslapio elementus. Sukūrus vielos rėmą, jūs ir jūsų vartotojai galės veiksmingai bendradarbiauti ir anksti nustatyti galimą projektavimo problemą.
Darbo su pieštuku pradžia
Atsisiųskite pieštuką iš „Pencil“ priedų puslapio. Įdiegę pieštuką, jis pasiekiamas iš „Įrankiai“> „Pieštuko piešimas“.
Tai atrodo Brizzly. Tai gana kieta žiniatinklio programa, kuri sujungia jūsų „Facebook“ ir „Twitter“ per vieną puslapį.
Tai galutinis vielos rėmo rezultatas. Pagrindinės šios vielos formos formos yra stačiakampiai, teksto laukeliai ir skirtukai. Kitame straipsnio skyriuje pateikiamas paprastas pavyzdys, kaip sukurti kiekvieną formą.
Stačiakampio kūrimas
Pirmasis vielos rėmo formos kūrimo žingsnis yra nuvilkti formą iš meniu „Formų kolekcijos“ į drobę.
Padidinkite stačiakampio dydį iki tinkamo pločio ir aukščio.
Pieštukuose galime pritaikyti bet kokios formos tekstą, sieną ir fono spalvą. Dešiniuoju pelės mygtuku spustelėkite stačiakampį ir pasirinkite „Properties“, kad atidarytumėte „Properties“ langus. Tai fono savybių ekranas. Nustatykite stačiakampio fono spalvą baltai (#FFFFFF).
Spustelėkite skirtuką „Apriboti“ ir koreguokite sienos savybes. Nustatykite sienos spalvą į juodą (# 000000) ir pakeiskite sienos svorį iki 1.
Teksto ypatybių ekranas leis mums pritaikyti teksto šrifto tipą, dydį, stilių, svorį, spalvą, ryškumą ir neskaidrumą.
Skirtukų kūrimas
Namų, juodraščio, vaizdo skirtukai yra trys skirtukai, kurie yra sukrauti vienas ant kito. Į stačiakampį vilkite tris „skirtukų skydelį“. Pakeiskite kiekvieno skirtuko dydį taip, kad kiekvienas skirtukas būtų vienas šalia kito.
Atidarykite teksto ypatybių ekraną, kad sureguliuotumėte skirtuko „Nuotraukos“ ir „juodraštis“ šrifto spalvą. Nustatykite jį į „Grey“ (# 989898).
Teksto kūrimas
Norėdami sukurti kiekvieną meniu, vilkite „Tekstą“ ant drobės. Teksto išvaizdą galime reguliuoti pasiekdami teksto savybių langą.
Naudingi patarimai, kaip keisti spalvą
Spalva yra viena iš svarbiausių elementų, suteikiančių malonų vielos rėmelį. Tikslus būdas pakeisti formos spalvą yra nurodyti spalvos HTML kodą. HTML kodo nustatymas tam tikrai spalvai gali būti sudėtingas. Mes galime naudoti HTML spalvų sukčiavimo lapą iš w3cschools.com, kad galėtume ieškoti tinkamo HTML kodo tam tikrai spalvai.
Mes taip pat norime naudoti spalvas pasirinkti spalvas iš ekrano ir naudoti jį pieštuku. Spustelėkite akių lašintuvo piktogramą, esantį apatiniame kairiajame „Firefox“ kampe, kad pasirinktumėte spalvą ekrane. Taip pat galime atidaryti ColorZilla spalvų rinkiklį, dukart spustelėję akių lašų piktogramą. Tiesiog nukopijuokite Hex kodą į pieštuko spalvotą HTML kodą.
Išvada
Pieštukas yra paprasta naudoti wireframing įrankį. Pieštuko integravimas su „Firefox“ leidžia mums naudoti kitą „Firefox“ įskiepį, kad galėtume sukurti geresnę vielą.
Nuorodos
Atsisiųsti pieštuką
Atsisiųskite „Colorzilla“
„W3C“ HTML spalvos „Cheat Sheet“
