Izgled i brendiranje kioska

Postupak i postavke

Najprije pogledajte koje dijelove izgleda možete prilagoditi i kako rezultat može izgledati. Brojevi na ilustracijama odgovaraju koracima u nastavku. Sve su mogućnosti neobavezne; promijenite samo ono što trebate.

Izgled kioska u vodoravnom i okomitom položaju

Isti kiosk u vodoravnom i okomitom prikazu. Ovo je ogledni prikaz; prikazani broj aplikacija ne određuje obvezni raspored.

Dijelovi pločice aplikacije

Poziv na dodir zaslona

Zeleno označava aplikacijski sloj, plavo prezentacijski sloj, a prednja prozirna ploha poziv na dodir. Obojeni obrubi samo objašnjavaju raspored; nisu dio prenesene podloge. Vlastiti poziv postavite u koraku 5.

Raspored s fotogalerijom

Raspored s fotogalerijom mijenja raspored izbornika (3). Fotografije i njihovo obrezivanje postavite u koraku 4. Obrezivanje ispunjava površinu uz mogući gubitak rubova; bez obrezivanja prikazuje se cijela fotografija sa zamućenom pozadinom.

Globalna pozadina i tekst dijaloškog okvira

11

Upozorenje o neaktivnosti

Aplikacija će se zatvoriti.

Nastavi

Stvarni primjeri aplikacijskog sloja (kioska): vlastiti izgled i sadržaj

Primjeri prikazuju aplikacijske slojeve u stvarnoj uporabi – izbornike aplikacija koje su korisnici prilagodili vlastitim logotipom, bojama i sadržajem. Aplikacijski sloj može se koristiti na vodoravnom i okomitom zaslonu.

1. Odaberite logotip aplikacijskog sloja. Odaberite sliku logotipa iz medija. Upotrijebite prozirnu pozadinu ako se logotip treba uklopiti u boju panela. Promjena boje panela neće ukloniti bijeli pravokutnik koji je dio slike. Logotip i njegove boje ne mijenjaju se automatski.
2. Unesite naslov izbornika. Unesite naslov koji će posjetitelj vidjeti u izborniku kioska, primjerice „Infocentar”. Naziv lokacije u administraciji i naslov izbornika dva su zasebna polja.
3. Odaberite raspored izbornika i veličinu ikona.
   • Tip rasporeda aplikacija — Odaberite „Sa fotogalerijom” ili „Bez fotogalerije”. Fotografije mijenjaju raspoloživi prostor i raspored izbornika. Bez fotogalerije taj se prostor koristi za aplikacije.
   • Veličina ikone aplikacija — Klizač mijenja veličinu slike unutar pločice. Primjerice, 60 % smanjuje sliku u odnosu na njezinu površinu; ne znači 60 % broja aplikacija ni veličine cijele pločice. Raspon klizača je 0–100 %. Pri 0 % slika ikone nije vidljiva.

   Kiosk bira veličinu i raspored pločica prema broju aplikacija, orijentaciji i odabranom rasporedu. Mreže 5 × 3 i 4 × 5 na ilustraciji samo su primjeri, a ne postavka broja stupaca. Ako je dostupna samo jedna aplikacija, uređaj je može otvoriti izravno umjesto izbornika.

4. Dodajte fotografije i postavite obrezivanje.

   Fotografije dodajete i uklanjate na zasebnoj kartici „Fotogalerija aplikacijskog sloja”. Zatim u brendiranju odaberite raspored „Sa fotogalerijom”. Samo učitavanje fotografija ne odabire raspored s galerijom.

   • Izrezati medije u fotogaleriji aplikacijskog sloja — Uključeno: fotografija ispunjava dodijeljenu površinu pa se rubovi mogu odrezati. Isključeno: prikazuje se cijela fotografija, a ostatak površine ispunjava zamućena pozadina iste slike.

   Ova je galerija dio izbornika kioska. Razlikuje se od zasebne aplikacije Fotogalerija i od slika koje se prikazuju u kampanjama.

5. Postavite poziv na dodir zaslona.

   Prekrivna slika prikazuje se iznad prezentacijskog sloja i upućuje posjetitelja da dodirom otvori aplikacijski sloj. Nije riječ o logotipu ni fotografiji u izborniku kioska. Odaberite zasebnu sliku za svaku orijentaciju koju koristite. Prozirni dijelovi ostavljaju vidljivim sadržaj ispod slike.

   Poziv na dodir ne zamjenjuje navigaciju unutar web-stranice. Ako koristite aplikaciju Web-stranica bez kontrola sustava, razvojni programer web-stranice može dodati gumbe za povratak na izbornik aplikacija ili reprodukciju kampanja. Primjer i tehničke upute nalaze se u vodiču za upravljanje slojevima sustava putem vaše web-stranice.
   • Vodoravni zaslon: 16:9
   • Okomiti zaslon: 9:16
   • Vlastita podloga: pripremite prozirnu sliku u razlučivosti ciljnog zaslona, zasebno za vodoravnu i okomitu orijentaciju koju upotrebljavate. Prenesite je i odaberite u odgovarajućoj postavci prekrivne slike.
   • Grafika i položaj: u datoteku možete postaviti bilo koju ikonu ili tekst na bilo koje mjesto. Prozirni dijelovi ostavljaju sadržaj koji se reproducira vidljivim.
   • Značenje prekrivanja: riječ je o dodatku iznad prezentacijskog sloja, a ne o trećem samostalnom sloju sadržaja. Položaj nacrtane ikone ne određuje dodirno područje; prijelazom upravljaju postavke slojeva i aplikacija.

   Možete koristiti i izvorne prozirne PNG slike dostupne za preuzimanje u nastavku. U postavkama brendiranja lokacije prenesite ih u polje za odgovarajuću orijentaciju zaslona. Šahovnica u pregledu označava prozirnost i nije dio datoteke.

   Vodoravno

   

   PNG · 2048 × 1152 px

   Preuzmi PNG – Vodoravno

   Okomito

   

   PNG · 1152 × 2048 px

   Preuzmi PNG – Okomito

   U koracima 6–11 postavit ćete boje pojedinih dijelova kioska. Svaka skupina postavki odnosi se na određeni element, primjerice primarnu ploču ili pozadinu ikona.

   Svaka skupina ima dvije postavke: „Boja pozadine” određuje podlogu, a „Boja teksta i simbola” odgovarajuće elemente na njoj. Počnite s panelima i pločicama te nakon svake promjene provjerite čitljivost teksta i kontrola.

   Kliknite kvadratić s bojom pokraj polja. U biraču mišem namjestite nijansu, svjetlinu i prozirnost te potvrdite gumbom OK. Ako znate točan kôd boje svojeg brenda, možete ga unijeti izravno u polje.

   Odaberite dovoljan kontrast: tamni tekst na svijetloj podlozi ili svijetli tekst na tamnoj. Boje sučelja ne mijenjaju fotografije, videozapise, učitane logotipe ni sadržaj vanjskih web-stranica.
6. Postavite boje primarne ploče. Panel s logotipom, naslovom i satom: lijevo u vodoravnom, gore u okomitom prikazu.
   • Boja pozadine: Pozadina primarnog panela.
   • Boja teksta i simbola: Tekst i simboli koji koriste boju primarnog panela.
7. Postavite boje sekundarne ploče. Sadržaj izbornika: desno u vodoravnom prikazu, ispod primarnog panela u okomitom.
   • Boja pozadine: Pozadina sekundarnog panela; koristi se i na drugim zaslonima aplikacija.
   • Boja teksta i simbola: Pripadajući tekst i simboli na toj pozadini.
8. Postavite podlogu ikona aplikacija. Površina ispod slike ikone aplikacije.
   • Boja pozadine: Podloga ikone, osobito vidljiva oko manje ili prozirne slike.
   • Boja teksta i simbola: Koristi se u određenim drugim kontrolama aplikacija. Ne mijenja boje slike ikone u izborniku.
9. Postavite pozadinu gumba i naziva aplikacija. Podloga naziva aplikacije i gumba koji koriste ovu boju.
10. Postavite boju teksta i simbola gumba i aplikacija. Naziv aplikacije i pripadajući upravljački simboli.
11. Postavite globalnu pozadinu aplikacije.

    Globalna pozadina koristi se, primjerice, u dijaloškom okviru pri neaktivnosti i u nekim aplikacijama, uključujući USB reproduktor i Labirint. Ne određuje glavnu pozadinu izbornika s pločicama. Provjerite kontrast teksta; ako promjena nije potrebna, zadržite zadane vrijednosti.

    • Boja pozadine: Pozadina elemenata koji koriste ovu skupinu boja.
    • Boja teksta i simbola: Pripadajući tekst i simboli, primjerice u upozorenju na neaktivnost.

Kad završite, spremite promjene. Poslužitelj stavlja ažurirani aplikacijski sloj u red za slanje uređajima na lokaciji. Uređaji moraju biti povezani, a nove slike preuzete. Provjerite rezultat na uređaju dodijeljenom lokaciji; samo spremanje obrasca ne potvrđuje isporuku.