Vinkkejä Balsamiq Mock-Up työkalun käyttöön

Transkriptio

1 Vinkkejä Balsamiq Mock-Up työkalun käyttöön Tämä ohje ei ole Balsamiqin yleinen käyttöohje, mutta tässä kerrotaan miten Balsamiqia tulisi käyttää silloin kun malleissa halutaan käyttää yhteisiä pohjia. Balsamiq mock-up tool on erittäin helppokäyttöinen työkalu, jolla voi helposti ja nopeasti hahmotella ja suunnitella käyttöliittymän rakenteen. Työkalussa on valmiina kaikki tyypilliset web-käyttöliittymän ja osin myös mobiilikäyttöliittymän kontrollit kuten valikot, painikkeet, syöttökentät, ikonit jne. Kun nyt tätä työkalua aletaan laajemmin käyttää, olisi hyvä sopia tietyistä käyttötavoista, että eri ihmisten piirtämät mallit noudattaisivat samoja periaatteita ja käyttäisivät yhteisesti ylläpidettyjä pohjia. Tällaisissa yhteisissä pohjissa olevia rakenteita voivat olla esim. valikot, ylä- ja alatunnisteet yms., jotka halutaan olevan jokaisessa mallissa samanlaisia. Ilman pohjien käyttöä, mallien työstäminen ja pitäminen yhtenäisinä voi käydä työlääksi myöhemmin Tässä ohjeessa kerrotaan, miten Balsamiqissa voidaan tehdä mallipohjia. Balsamiqissa näitä kutsutaan symboleiksi (symbols). Muissa ohjelmissa käytetään samankaltaisesta asiasta nimeä template, master pages, custom pages tai widgets.

2 Symbolien luominen Luo rautalankamalli, jossa on esim. kaikkien sivujen yhteiset osat kuten ylätunnisteet ja alatunnisteet ja päävalikko. Valitse kaikki (tai ne elementit, jotka haluat kuuluvan mallipohjaan). Valitse Edit-valikosta Group-toiminto. Anna ryhmälle nimi ja konvertoi se symboliksi.

3 Nyt mallipohjaa vastaava symboli ilmestyy Project Assets-välilehdelle.

4 Symbolit talletetaan nimettyinä ryhminä erillisiin BMML-tiedostoihin projektin assets-alikansioon. Projektin muodostavat Balsamiq stand-alone versiossa kaikki mallit, jotka ovat samassa hakemistossa.

5 Symbolien käyttäminen Luo uusi Mock-up. Tallenna tyhjä mock-up samaan projektiin eli hakemistoon kuin, mihin tallensit sen mock-upin, josta loit symbolit. Tallennuksen jälkeen voit klikata symbols välehteä, jonne ilmestyy äsken luotu symboli. Tallennus tarvittiin, vain siksi, että Balsamiq ikään kuin liitti luomasi mallin samaan projektiin eli samaan kansioon, ja pystyi näin katsomaan, onko hakemistolla Symbols-alihakemistoa. Nyt voi vetää Symbols valikosta pohjan ja tehdä sen päälle uuden sivun. Pohjassa olevien elementtien tekstejä ja asetuksia (esim. mikä valikosta on valittuna) voi muuttaa kahdella tavalla.

6 1. Muuta symbolia, jos haluat muuttaa niin, että se vaikutta kaikkiin malleihin, jotka käyttäneet kyseistä symbolia. 2. Muuttaa symbolin ilmentymää, jolloin muutos ei vaikuta muihin malleihin, joissa symbolia on käytetty. Jälkimmäisestä tapaa tarvitaan esim. silloin, kun symbolissa esiintyy esim. valikko, jossa valittuna olevaa (korostettua) painiketta halutaan vaihtaa. Esim. yllä olevassa kuvassa pitäisi olla valittuna Ajankohtaista. Symbolia itseään pääsee muuttamaan, kun tuplaklikkaa sivulle asetettua symbolia. jolloin symboliin sisältyvät kontrollit jäävät näkyviin ja muut harmaantuvat. Symbolin yläpuolelle ilmestyy kontrolli, josta pääsee editoimaan symbolia itseään [Edit]. Symbolista voi nyt tuplaklikkaamalla valita halutun osan, kuten tässä esimerkissä valikon, jolloin sen asetuksia ja tekstejä pääsee muokkaamaan.

7 Tässä esimerkissä merkitään Ajankohtaista sivu valituksi. Tuplaklikkaamalla symbolin ulkopuolelta jotain kohtaa ruudulla, palautuu ohjelma normaaliin editointitilaan. Symbolin muokkaaminen Seuraavassa esitetään, miten edellä kuvattua esimerkkiä käyttäen muokataan vielä alatunnistetta niin, että sinne lisätään puhelinnumero. 1. Tuplaklikkaa symbolia millä tahansa sivulla, jossa sitä on käytetty. 2. Klikkaa ruudulle ilmestyneestä palkista Edit-painiketta. 3. Lisää tai muuta mitä haluat muuttaa kaikissa malleissa, jotka käyttävät kyseistä symbolia. 4. Tallenna Nyt voit mennä mihin tahansa toiseen malliin (samassa projektissa eli kansiossa), jotka käyttävät kyseistä symbolia, yllä tehty muutos näkyy siinä.

8 Referenssejä