Selkeät kuvakaappaukset oppaisiin ja dokumentaatioon

Hyvä ohjekuva vastaa kysymykseen: mistä napsautan, minkä asetuksen valitsen tai miltä lopputuloksen pitäisi näyttää? Teräväkin koko työpöydän kuva voi olla hyödytön, jos oikeaa toimintoa ei löydä.

Tavoitteena on selittää vaihe ilman häiriöitä, yksityisiä tietoja tai tarpeettoman suurta tiedostoa. Tämä opas etenee näkymän valmistelusta valmiin ohjekuvan tarkistamiseen.

Päätä, mitä kukin kuvakaappaus selittää

Kirjoita ohje ensin. ”Valitse Vie ja sitten PNG” kertoo kuvan tehtävän. ”Tässä asetusnäkymä” jättää lukijan etsimään olennaisen itse.

Kaappaa ohjetta tukeva hetki: avoin valikko näyttää vaihtoehdot, toiminnon jälkeinen vahvistus lopputuloksen. Jaa vaiheet, jos yrität näyttää yhdessä kuvassa lähtötilanteen, valikon ja valmiin tuloksen.

Säilytä paikantamiseen tarvittava asiayhteys. Pelkkää kytkintä ei välttämättä löydä sovelluksesta, jos ympäröivän paneelin otsikko puuttuu. Ota mukaan lähin hyödyllinen otsikko tai navigointikohta ja poista muu.

Suunnittele pitkään työnkulkuun lyhyt kuvasarja, jossa jokainen kuva lisää tietoa. Yksiselitteinen tekstiohje ei yleensä tarvitse kuvaa jokaisesta napsautuksesta.

Ota siisti alkuperäinen kuvakaappaus

Käytä esimerkkitiliä tai harjoitusprojektia, sulje ylimääräiset välilehdet ja ilmoitukset sekä säädä ikkunan koko sopivaksi. Kapea ikkuna voi muuttaa navigointia, joten kuvaa ohjeessa tarkoitettua näkymää.

• Windowsissa: Windows + Vaihto + S avaa aluekaappauksen. Kuvakaappaustyökalulla voi kaapata myös ikkunan tai koko näytön. Katso vaihtoehdot Microsoftin ohjeesta.
• Macissa: Vaihto + Komento + 4 valitsee alueen ja Vaihto + Komento + 5 avaa kuvakaappauksen säätimet. Applen ohje esittelee vaihtoehdot.

Tallenna alkuperäinen kuvatiedosto. Viestisovelluksessa näkyvän kuvan kaappaaminen tai pienen esikatselun lataaminen voi heikentää yksityiskohtia entisestään. Näytön valokuvaaminen tuo mukaan heijastuksia, vääristymiä ja ylimääräistä ympäristöä.

Jos teksti on jo kaappauksessa liian pientä, säädä sovelluksen tai selaimen zoomausta ja kaappaa uudelleen. Varmista, ettei zoomaus piilota toimintoja tai muuta ohjeen tarkoittamaa asettelua. Tallennetun kuvan suurentaminen ei palauta epäselvästi kaapattuja kirjaimia.

Poista yksityiset tiedot ennen jakamista

Tarkista osoiterivi, välilehtien nimet, tilivalikko, sivupalkit ja ilmoitukset. Pääpaneelin esimerkkitiedot eivät suojaa tilivalikossa edelleen näkyvää sähköpostiosoitetta.

Rajaa yksityiset tiedot pois, jos ne jäävät hyödyllisen alueen ulkopuolelle. Peitä sisäpuolelle jäävät tiedot täysin peittävällä värialueella. Pikselöinti ja sumennus voivat jättää vihjeitä sisällöstä eivätkä sovi luottamuksellisen tekstin suojaamiseen.

1. Avaa kuva Pikselöi kuva -työkalussa. Valitse tehosteeksi peittävä väri eli Solid cover, jos käytät englanninkielistä käyttöliittymää.
2. Aseta peitto koko salattavan alueen päälle. Säädä suorakulmiota esikatselussa ja jätä tekstin ympärille marginaali, ettei kirjaimista jää reunoja näkyviin.
3. Lisää jokaiselle uudelle peitolle oma alue. Englanniksi painike on Add area. Peitä kaikki saman tiedon esiintymät, myös koodit ja QR-kuvat. Vanhan peiton siirtäminen ei suojaa kahta kohtaa yhtä aikaa.
4. Lataa PNG ja avaa tallennettu tiedosto. Tarkista lopputulos, älä vain muokkaimen esikatselua.

Ladatussa PNG:ssä peitto on osa kuvan pikseleitä. Jaa tämä kopio sellaisen muokattavan asiakirjan sijaan, jossa alkuperäisen kuvan päällä on poistettava suorakulmio. Säilytä alkuperäinen poissa julkisista latauskansioista.

Peitto suojaa vain valitut näkyvät alueet. Se ei poista tietoja muualta asiakirjasta, leikepöydältä, tililtä tai lähdetiedostoista. Lisätietoa on kuvan pikselöintiä ja peittämistä käsittelevässä oppaassa.

Rajaa ensin ja korosta vain tarvittavaa

Poista rajaustyökalulla ylimääräinen navigointi, tyhjät reunat ja työpöytä. Säilytä toiminnon nimi ja riittävä asiayhteys. Rajaus voi sekä keventää tiedostoa että selkeyttää ohjetta.

Päätä lopullinen rajaus ennen merkintöjä, jotta nuoli ei osoita myöhemmin poistettavaan kohtaan. Säilytä paneelin otsikko tai muu paikantamisvihje: tunnistamattoman painikkeen vieressä leijuva nuoli ei juuri auta.

Jos kohdetta on yhä vaikea löytää, lisää yksinkertainen kehys tai numeromerkintä niitä tukevassa kuvaeditorissa. Älä peitä toiminnon nimeä, ja selitä merkintä tekstissä. Pixilon rajaustyökalu muuttaa näkyvää aluetta, mutta ei lisää nuolia tai selitteitä.

Käytä samaa merkintätapaa koko oppaassa. Kuvan numeroinnin on vastattava tekstin järjestystä. Älä ohjaa pelkällä värillä: ”Valitse numerolla 2 merkitty painike” on selkeämpi kuin ”Napsauta vihreää aluetta”.

Valitse mitat lopullisen näyttökoon mukaan

Arvioi kuva valmiissa artikkelissa tai asiakirjassa. Koko näytön katselimessa luettava kaappaus voi muuttua hankalaksi kapeassa sisältöpalstassa.

Erota tekstin näkyvä koko ja terävyyteen tarvittava pikselimäärä. Lisäpikselit voivat terävöittää kirjaimia tekemättä niistä näkyvästi suurempia.

Esimerkiksi 800 × 500 CSS-pikselin näkymä voi 2×-kaappauksena tuottaa 1 600 × 1 000 pikselin kuvan. Sen näyttäminen koossa 800 × 500 CSS-pikseliä säilyttää käyttöliittymän alkuperäisen näkyvän koon, eikä puolita tekstiä automaattisesti. Koko näkymän näyttäminen 400 CSS-pikselin levyisenä taas pienentää tekstiä.

Luvut riippuvat kaappaustavasta, näytön skaalauksesta ja zoomauksesta. MDN:n selitys pikselitiheydestä kuvaa CSS-pikselien ja fyysisten pikselien suhteen. Tarkista tallennetut mitat, älä oleta kaikkia kaappauksia 2×-kuviksi.

Kokeile tiiviimpää rajausta ennen pikselimittojen pienentämistä. Puhelimessa 800 pikselin näkymä voi mahtua vain noin 360 CSS-pikselin palstaan. Teräväkin pieni teksti voi silloin jäädä lukukelvottomaksi. Jaa näkymä tarvittaessa osiin tai tarjoa avattava suurempi versio.

Käytä koonmuutostyökalua kuvasuhde lukittuna, jos lähde on tarpeettoman suuri. Vertaa pienennettyä kopiota alkuperäiseen lopullisessa näyttökoossa. Säilytä enemmän pikseleitä tai yksinkertaista sommittelua, jos olennaista tietoa katoaa.

Valitse kuvamuoto tekstin terävyys säilyttäen

Aloita PNG:stä, kun kuvassa on pientä tekstiä ja käyttöliittymätoimintoja. Sen häviötön pakkaus ei lisää JPG-tyyppistä pakkausjälkeä. Kokeile PNG:n optimointia ennen mittojen muuttamista. Valokuvapainotteisessa kaappauksessa voi verrata JPG:tä tai WebP:tä.

Tee vertailu samasta valmistellusta lähteestä samoilla pikselimitoilla ja samalla näyttökoolla. Tutki pientä kirjainta, ohutta jakoviivaa ja merkinnän reunaa. Etsi suttaantumista, katoavia välimerkkejä ja vaaleita kehiä kirjainten ympäriltä. Vertaa vasta sitten tiedostokokoja. Säilytä selkeämpi versio, jos pienempi hukkaa olennaista.

Kuvamuotojen erot selviävät JPG–PNG-oppaasta ja MDN:n kuvamuotoviitteestä. Aloita uusi vertailu samasta valmistellusta lähdekuvasta, älä jo pakatusta kopiosta.

Julkaise ohjeet myös ilman kuvaa ymmärrettävinä

Kirjoita olennaiset toiminnot tavallisena tekstinä kuvan viereen. Lukija voi käyttää ruudunlukijaa, suurentaa tekstiä, tulostaa ohjeen tai kohdata latautumattoman kuvan. ”Avaa Asetukset, valitse Laskutus ja sitten Lataa lasku” toimii näissäkin tilanteissa.

Kerro vaihtoehtoisessa tekstissä, mitä kuva tuo asiayhteyteen. Esimerkiksi: ”Laskutusasetukset, joissa Lataa lasku -painike on korostettu uusimman maksun vieressä.” Epäolennaisia sivupalkin kohtia ei tarvitse luetella. W3C:n ohje informatiivisista kuvista selittää, miksi kuvan tarkoitus ratkaisee tekstivastineen.

Kuvateksti voi kertoa muuten huomaamatta jäävän seikan, kuten käyttöliittymän version. Sijoita kuva, kuvateksti ja toimintaohje lähelle toisiaan, ei kaikkia kuvia kauas vaiheiden alapuolelle.

Säilytä verkkosivulla kuvasuhde ja estä kuvan leviäminen palstan ulkopuolelle. Responsiivisten kuvien opas käsittelee toteutusta. Tarkista julkaisun jälkeen, ettei sivustoeditori korvannut kuvaa pienellä pikkukuvaversiolla.

Esimerkki: laskun lataamisen opastaminen

Oletetaan ohjeeksi ”Avaa Asetukset, valitse Laskutus ja sitten maksun vierestä Lataa lasku”. Seuraavat mitat ovat havainnollistavia, eivät tietyn sovelluksen mittauksia.

1. Valmistele näkymä. Avaa Laskutus esimerkkimaksuilla. Jätä oikea maksu ja latauspainike näkyviin ja sulje muut valikot.
2. Kaappaa ja rajaa. Kuvasta 1 600 × 1 000 voi jäädä 1 200 × 700 pikselin rajaus, jossa näkyvät Laskutus-otsikko, uusin maksu ja painike. Ylimääräinen sivupalkki poistuu. Säilytä alkuperäinen yksityisesti.
3. Peitä jäljelle jääneet tilitiedot. Jos kuvassa näkyy edelleen oikea sähköpostiosoite, käytä peittävää väriä eli Solid cover -tehostetta. Lisää uusi peitto jokaiseen kohtaan, jossa osoite näkyy. Lataa ja tarkista PNG.
4. Korosta tarvittaessa. Kehystä latauspainike merkintöjä tukevassa editorissa peittämättä nimeä. Tallenna PNG ja käytä yhtenäistä merkintätapaa.
5. Tarkista artikkelissa. Kun 1 200 pikselin rajaus näkyy 600 CSS-pikselin levyisenä, jokaista CSS-pikseliä kohti on kaksi kuvan pikseliä. Tarkista maksun rivi ja painikkeen nimi puhelimessa. Tarjoa tarvittaessa rivistä lähikuva sen sijaan, että pienentäisit koko näkymää lisää.
6. Julkaise ohjeen kanssa. Kirjoita toiminto kuvan viereen. Varmista, että sekä sivulla näkyvä kuva että mahdollinen linkki täysikokoiseen kuvaan käyttävät muokattua, suojattua PNG-kopiota.

Tärkeintä on, että lukija löytää oikean maksun ja painikkeen. Rajauksella poistettujen pikselien määrä ei yksin kerro, onnistuiko kuva.

Selvitä huonon lopputuloksen syy

Seuraa julkaistua ohjetta kuin käyttäisit toimintoa ensi kertaa. Varmista, että kuvan nimet vastaavat tekstiä ja kuvat ovat oikeiden vaiheiden vieressä.

Usein kysytyt kysymykset

Tarvitseeko jokainen vaihe kuvakaappauksen?

Ei. Käytä kuvaa selventämään sijaintia, valintaa tai tulosta. Tuttuun toimintoon voi riittää lyhyt teksti. Turhat kuvat lisäävät vierittämistä ja ylläpidettäviä esimerkkejä ohjelmiston muuttuessa.

Onko koko sivun kaappaus hyödyllinen?

Se voi näyttää kokonaisrakenteen, mutta sopii huonosti yksittäisen toiminnon opastamiseen. Säilytä tarpeellinen yleiskuva ja käytä tarkkuutta vaativissa vaiheissa kohdennettuja kaappauksia.

Kannattaako hiiren osoitin näyttää?

Vain jos sen sijainti selventää toimintoa. Nimen päälle jäävä osoitin vaikeuttaa lukemista. Hankalasti löytyvään toimintoon selkeä kehys ja tekstiohje ovat usein parempi ratkaisu.

Miten kuvat pysyvät hyödyllisinä käyttöliittymän muuttuessa?

Kaappaa vain tarvittava asiayhteys ja merkitse tarvittaessa ohjelmaversio tai tarkistuspäivä. Tarkista kuvat nimien tai navigoinnin vaihtuessa ja käy teksti samalla läpi: pelkkä uusi kuva ei korjaa vanhentunutta vaihetta.