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 uspravnom položaju

Isti kiosk u horizontalnom i vertikalnom prikazu. Ovo je ogledni prikaz; prikazani broj aplikacija ne određuje obavezni raspored.

Dijelovi pločice aplikacije

Poziv na dodir ekrana

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

Raspored s fotogalerijom

Raspored s fotogalerijom mijenja raspored menija (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 upotrebi – menije aplikacija koje su korisnici prilagodili vlastitim logotipom, bojama i sadržajem. Aplikacijski sloj može se koristiti na horizontalnom i vertikalnom ekranu.

1. Odaberite logotip aplikacijskog sloja. Odaberite sliku logotipa iz medija. Koristite prozirnu pozadinu ako se logotip treba uklopiti u boju panela. Promjena boje panela neće ukloniti bijeli pravougaonik koji je dio slike. Logotip i njegove boje ne mijenjaju se automatski.
2. Unesite naslov menija. Unesite naslov koji će posjetilac vidjeti u meniju kioska, naprimjer „Infocentar”. Naziv lokacije u administraciji i naslov menija dva su zasebna polja.
3. Odaberite raspored menija i veličinu ikona.
   • Tip rasporeda aplikacija — Odaberite „Sa fotogalerijom” ili „Bez fotogalerije”. Fotografije mijenjaju raspoloživi prostor i raspored menija. Bez fotogalerije taj se prostor koristi za aplikacije.
   • Veličina ikone aplikacija — Klizač mijenja veličinu slike unutar pločice. Naprimjer, 60 % smanjuje sliku u odnosu na njenu 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 kolona. Ako je dostupna samo jedna aplikacija, uređaj je može otvoriti direktno umjesto menija.

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 menija kioska. Razlikuje se od zasebne aplikacije Fotogalerija i od slika koje se prikazuju u kampanjama.

5. Postavite poziv na dodir ekrana.

   Prekrivna slika prikazuje se iznad prezentacijskog sloja i upućuje posjetioca da dodirom otvori aplikacijski sloj. Nije riječ o logotipu ni fotografiji u meniju 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 sistema, programer web-stranice može dodati dugmad za povratak na meni aplikacija ili reprodukciju kampanja. Primjer i tehničke upute nalaze se u vodiču za upravljanje slojevima sistema putem vaše web-stranice.
   • Horizontalni ekran: 16:9
   • Vertikalni ekran: 9:16
   • Vlastita podloga: pripremite prozirnu sliku u rezoluciji ciljnog ekrana, zasebno za horizontalnu i vertikalnu orijentaciju koju upotrebljavate. Učitajte 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 ekrana. Šahovnica u pregledu označava prozirnost i nije dio datoteke.

   Horizontalno

   

   PNG · 2048 × 1152 px

   Preuzmi PNG – Horizontalno

   Vertikalno

   

   PNG · 1152 × 2048 px

   Preuzmi PNG – Vertikalno

   U koracima 6–11 postavit ćete boje pojedinih dijelova kioska. Svaka grupa postavki odnosi se na određeni element, naprimjer primarni panel ili pozadinu ikona.

   Svaka grupa 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 pored polja. U biraču mišem podesite nijansu, svjetlinu i prozirnost te potvrdite dugmetom OK. Ako znate tačan kôd boje svojeg brenda, možete ga unijeti direktno u polje.

   Odaberite dovoljan kontrast: tamni tekst na svijetloj podlozi ili svijetli tekst na tamnoj. Boje interfejsa ne mijenjaju fotografije, videosnimke, učitane logotipe ni sadržaj vanjskih web-stranica.
6. Postavite boje primarne ploče. Panel s logotipom, naslovom i satom: lijevo u horizontalnom, gore u vertikalnom 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 menija: desno u horizontalnom prikazu, ispod primarnog panela u vertikalnom.
   • Boja pozadine: Pozadina sekundarnog panela; koristi se i na drugim ekranima 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, naročito vidljiva oko manje ili prozirne slike.
   • Boja teksta i simbola: Koristi se u određenim drugim kontrolama aplikacija. Ne mijenja boje slike ikone u meniju.
9. Postavite pozadinu dugmadi i naziva aplikacija. Podloga naziva aplikacije i dugmadi koja koriste ovu boju.
10. Postavite boju teksta i simbola dugmadi i aplikacija. Naziv aplikacije i pripadajući upravljački simboli.
11. Postavite globalnu pozadinu aplikacije.

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

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

Kad završite, sačuvajte promjene. Server 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.