Sovelluksen navigointi

Näytöt ovat sivuja; navigointi on se, mikä vie ihmiset niiden luo. Keplinissä se ei asu minkään näytön sisällä: se on sovelluksen oma dokumentti, joka suunnitellaan visuaalisessa editorissa ja tarjoillaan minkä tahansa avoinna olevan näytön ympärille.

Ja se suunnitellaan laitteittain: tietokoneen yläpalkki, puhelimen vetolaatikko ja tabletin toimintopalkki ovat kolme itsenäistä suunnitelmaa, kullakin omat valikkonsa.

#Editorin avaaminen

Sovelluksen sivupalkissa, paneelissa UI, ensimmäinen kohde on nimeltään Navigointi. Napsauta, niin se avautuu työtilan välilehteen.

Keskellä näkyvä ei ole lomake: se on sovelluksen sivu, piirrettynä sellaisena kuin siitä tulee. Palkki ylhäällä, näytön sisältö alhaalla (Näytön sisältö), tunnus vasemmalla. Muokkaat koskemalla siihen.

Otsikon alla ovat säätimet, jotka hallitsevat sitä, mitä katsot:

Säädin	Mitä se tekee
Web (1280px) / Tabletti (768px) / Mobiili (390px)	Valitsee laitteen, jota suunnittelet.
Tila (vain tabletti ja puhelin)	Navigoinnin muoto sillä laitteella.
Aloitusvalikko	Mikä valikoista avautuu, kun joku tulee sovellukseen.

#Eleet

Ele	Mitä tapahtuu
Napsautus valikkoon	Valitsee sen (ja kontekstissa näyttää sen sivupalkin).
Kaksoisnapsautus valikkoon	Avaa modaalin Valittu kohde, jossa kaikkea muokataan.
Valikon vetäminen	Siirtää sen alueelta toiselle tai järjestää uudelleen. Sen voi pudottaa vain sinne, missä se on kelvollinen.
+	Lisää valikon siihen paikkaan.
× valikon kulmassa	Poistaa sen.
Napsautus tunnukseen	Avaa modaalin Sovelluksen logo.

#Valikkotyypit

Kunkin alueen painike + näyttää tyypit, jotka se paikka hyväksyy:

Tyyppi	Mikä se on
Valikko	Vie sovelluksen näytölle. Tavallinen kohde.
Alivalikko	Ryhmittelee muita valikoita — vetolaatikossa ja sivupalkeissa.
Konteksti (sivupalkki)	Valikko, joka valittuna aktivoi oman sivupalkin lapsineen. Ikään kuin se jakaisi sovelluksen alueisiin.
Erotin	Jakoviiva.
Käyttäjävalikko	Käyttäjän avatar, omine kohtineen ja Kirjaudu ulos -toimintoineen.
Ilmoitukset	Kello, lukemattomien automaattisella lukumäärällä.

Kaikki tyypit eivät sovi kaikkiin paikkoihin, ja editori tarjoaa vain kelvolliset: konteksti ei voi sisältää toista kontekstia, alivalikkoon mahtuu vain kohteita, käyttäjävalikkoon mahtuu vain kohteita ja erottimia, eikä puhelimen vetolaatikossa ole konteksteja (käytä alivalikoita).

#Palkin alueet

Yläpalkissa valikot järjestyvät kolmeen alueeseen, ja editorin vihje sanoo olennaisen: Vedä valikoita palkin alueiden välillä (vasen / keskellä / oikea) luodaksesi ryhmiä.

Alue	Tavallinen käyttö
Vasen ryhmä	Päänavigointi, heti tunnuksen jälkeen.
Keskiryhmä	Korostettu ryhmä. Jos se jää tyhjäksi, se ei vie tilaa.
Oikea ryhmä	Käyttäjävalikko, kello, pikavalinnat.

Kontekstin sivupalkin sisällä — ja vetolaatikossa — alueita on kaksi: Yläryhmä ja Alareuna (tämä tarttuu pohjaan, jotta ”Asetukset” ja ”Ohje” pysyvät siellä, missä niitä odotetaan).

#Valikon luominen

1. Valitse laite kontekstipalkista.
2. Napsauta sen alueen +, johon haluat valikon.
3. Valitse tyyppi.
4. Valikko syntyy yleisnimellä ja jää valituksi — tee siihen kaksoisnapsautus avataksesi modaalin Valittu kohde.
5. Täytä:

Kenttä	Mikä se on
Kuvake	Kuvake kirjastosta tai SVG sovelluksen asseteista.
Valikon nimi	Teksti, joka näkyy. Se on sovelluksen lause — se menee käännöksiin.
Näyttö…	Kohdenäyttö (vain tyypissä Valikko).
(parametrit)	Jos kohdenäytöllä on reitin parametreja, näkyviin tulee kenttä parametria kohden kiinteän arvon antamista varten.
Vain kuvake (nimi näkyy työkaluvihjeenä)	Jättää palkkiin vain kuvakkeen.

6. Sulje painikkeella Valmis ja tallenna painikkeella Tallenna.

Painike Poista kohde, samassa modaalissa, poistaa valikon.

#Kontekstit ja sivupalkit

Konteksti (sivupalkki) on tapa antaa sovelluksen alueelle oma valikko: valitset yläpalkista ”Vendas” ja vasemmalle ilmestyy sivupalkki myynnin näyttöineen. Kontekstin lapset ovat sen palkin kohteet.

Kontekstin modaalissa osio Tämän kontekstin sivupalkki hienosäätää sitä:

Kenttä	Vaihtoehdot
Toiminta	Kiinteä (aina auki) · Kutistuva (painike kutistaa kuvakkeiksi) · Mini (kuvakkeet; laajenee osoitettaessa) · Mini ja paneeli (hiiren osoitus avaa valikon puun)
Leveys	180–400 pikseliä.
Laajennettaessa (vain mini-tilassa)	Peittää sisällön tai Työntää sisältöä.
Alkaa kutistettuna (vain kutistuvassa tilassa)	Miten se avautuu ensimmäisellä kerralla.

#Käyttäjävalikko

Käyttäjävalikko on kohde muiden joukossa — se voi olla yläpalkissa, kontekstin sisällä, vetolaatikossa tai kompaktissa palkissa. Sen valitseminen avaa sen ponnahdusvalikon, ja siellä lisätään kohtia +-painikkeella (Valikko tai Erotin).

Modaaliin jäävät asetukset, jotka eivät ole visuaalisia:

Asetus	Mitä se tekee
Näytä nimi	Käyttäjän nimi näkyy valikon ylätunnisteessa.
Näytä käyttäjätunnus (login)	Myös käyttäjätunnus.
”Kirjaudu ulos” -vaihtoehto	Sisällyttää uloskirjautumisen valikon loppuun.
”Kirjaudu ulos” -teksti	Oma teksti; tyhjänä käytetään vaihtoehtoa Järjestelmän oletus (käännetty).

Ilman kuvaketta avatar näyttää nimen nimikirjaimet — ja juuri sitä kuvakevalitsin kutsuu nimellä Ei kuvaketta (nimikirjaimet).

#Ilmoitukset

Kohde Ilmoitukset on kello: pelkkä kuvake, jonka lukemattomien pilleri päivittyy itsestään. Napsautus avaa viimeisimmät ilmoitukset ja Näytä lisää avaa paneelin, jossa ovat kaikki. Modaalissa Ilmoitukset pudotusvalikossa päättää, montako näkyy kerralla (1–20).

#Arvopillerit

Mikä tahansa valikko (paitsi erottimet ja kello) voi näyttää pillerin, jossa on elävä luku — käsittelemättömät tilaukset ”Encomendas”-valikon vieressä, odottavat pyynnöt ”Aprovações”-valikon vieressä.

1. Kytke kohteen modaalissa päälle Näytä pilleri, jossa arvo.
2. Valitse API, joka tuo datan (Valitse API…).
3. Valitse kohdassa Arvo joko Lukumäärä (tietueiden määrä) tai 1. tietueen kenttä — jälkimmäisessä tapauksessa kerro myös Kenttä.
4. Piilota, kun arvo on tyhjä tai nolla estää pillerin, joka sanoo ”0”.

Pilleri päivittyy reaaliajassa: kun data muuttuu, luku muuttuu — kenenkään lataamatta sivua uudelleen.

#Sovelluksen logo

Napsauta tunnusta palkin vasemmassa reunassa avataksesi modaalin Sovelluksen logo:

Kenttä	Mitä se tekee
Kuvake tai kuva	Valitse kuvake kirjastosta tai tiedosto sovelluksen asseteista.
Näytä sovelluksen nimi	Nimi tunnuksen vieressä.
Rajaus palkissa	Vain SVG:lle: Mittakaava, Laatikon leveys ja sijoittelu kuvaa vetämällä.
Sovita laatikkoon	Palauttaa mittakaavan ja sijainnin.
Ei rajausta	Kytkee rajauksen pois.

Rajaus on vastaus logoon, joka ”ei mahdu”: vedät ja skaalaat, kunnes se istuu palkkiin hyvin, ja modaali itse takaa, että SVG-tiedosto säilyy koskemattomana — rajaus on vain visuaalinen ja peruttavissa. Muille muodoille huomautus selittää, että rajaus on käytettävissä vain SVG:lle.

#Aloitusvalikko

Aloitusvalikko, oikeassa yläkulmassa, päättää mistä sovellus avautuu. Valitaan yksi valikoista (ei irrallista näyttöä), ja valinta tehdään laitteittain — puhelin voi avautua eri paneeliin kuin tietokone.

Jos laitteella ei ole omaa valintaa, se perii seuraavan (puhelin → tabletti → web); ja jos mitään ei ole, sovellus avautuu ensimmäiseen valikkoon, joka vie näytölle.

#Suunnitelma laitetta kohden

Web on aina yläpalkki. Tabletilla ja puhelimella on valitsin Tila:

Tila	Miltä se näyttää
Yläpalkki (vain tabletti)	Sama kuin tietokoneella: tunnus, valikot ja kontekstit palkissa.
Hampurilaisvalikko	Kompakti palkki ☰-painikkeella, joka avaa vetolaatikon valikkopuineen.
Toimintopalkki	Palkki pohjassa, mobiilisovelluksen tyyliin, enintään 5 kohteella — ja ilman vetolaatikkoa.

Kompakteissa tiloissa on lisäksi kaksi omaa riviä:

• Header — enintään 4 toimintoa tunnuksen vieressä (käyttäjävalikko ja kello viihtyvät täällä hyvin).
• Toimintopalkki — enintään 5 kohdetta pohjassa, kukin Painike tai Toimintovalikko.

Kun raja tulee vastaan, alusta kertoo miksi: Toimintopalkissa on jo 5 kohdetta (enimmäismäärä). / Headeriin mahtuu enintään 4 toimintoa.

#Kuka näkee mitä

Editori suunnittelee; sen, kuka näkee kunkin valikon, päättää Sovelluksen asetukset ▸ Käyttöoikeudet, välilehdellä Valikot — rooleittain ja laitteittain.

Sääntö kannattaa tietää: toisin kuin näytöt, valikko on näkyvä oletuksena. Portti on näyttö, ja se on jo kiinni; valikon piilottaminen on sitä varten, että kokonainen ryhmä otetaan pois näkyvistä, tai kello otetaan pois siltä, joka ei saa mitään. Ryhmän piilottaminen vie lapset mukanaan, ja kohde, joka osoittaa saavuttamattomalle näytölle, katoaa itsestään.

#Miksi ei…?

• Miksi muutokseni katosivat? Niitä ei tallennettu. Navigoinnilla on painike Tallenna — ja se varoittaa, ennen kuin suljet välilehden, jossa on tallentamattomia muutoksia.
• Miksi en saa pudotettua valikkoa sinne minne haluan? Se paikka ei hyväksy sitä tyyppiä. Kelvottomat kohteet eivät edes syty: konteksti kontekstin sisällä, alivalikko käyttäjävalikon sisällä, erotin yläpalkissa.
• Miksi en näe valikoita puhelimella? Puhelimella on oma puunsa ja se voi olla tyhjä. Valitse Mobiili (390px) ja suunnittele se.
• Miksi valikko katosi julkaistusta sovelluksesta? Joko se piilotettiin kohdassa Asetukset ▸ Käyttöoikeudet ▸ Valikot siltä roolilta, tai se osoittaa näytölle, johon sillä henkilöllä ei ole pääsyä.
• Miksi logo näkyy leikattuna? Sillä on rajaus. Avaa modaali ja käytä Sovita laatikkoon, tai Ei rajausta.
• Miksi en voi vaihtaa valikon tyyppiä? Sitä ei vaihdeta. Poista ja luo oikealla tyypillä — se on ainoa operaatio, jota alusta ei anna tehdä kesken kaiken.
• Miksi pilleri näyttää aina 0? Kytke päälle Piilota, kun arvo on tyhjä tai nolla, tai varmista, että valittu API todella palauttaa tietueita.