Облик и брандиране на киоска

Стъпки и настройки

Първо вижте кои части от външния вид можете да персонализирате и как може да изглежда резултатът. Номерата в примерните илюстрации съответстват на стъпките по-долу. Всички опции са незадължителни; променяйте само това, което ви е необходимо.

Външен вид на киоска в хоризонтална и вертикална ориентация

Същият киоск в хоризонтална и вертикална ориентация. Това е примерен дизайн; броят на показаните приложения не определя фиксирана подредба.

Елементи на плочката на приложение

Подкана за докосване на екрана

Зеленото обозначава приложния слой, синьото — презентационния слой, а предната прозрачна плоскост — подканата за докосване. Цветните контури служат само за пояснение на подредбата; те не са част от качената графика. Настройте подканата за докосване в стъпка 5.

Подредба с фотогалерия

Подредбата с фотогалерия променя организацията на менюто (3). Добавете снимки и настройте изрязването в стъпка 4. Изрязването запълва областта и може да отреже краищата; без изрязване цялата снимка се показва върху размазан фон.

Общ фон и текст на диалога

11

Предупреждение за неактивност

Приложението ще се затвори.

Продължи

Реални примери за приложния слой (киоск): собствен облик и съдържание

Тези примери показват приложния слой в реална употреба: менюта с приложения, персонализирани от потребителите със собствени лога, цветове и съдържание. Приложният слой поддържа хоризонтални и вертикални екрани.

1. Изберете логото на приложния слой. Изберете изображение за лого от медийните си файлове. Използвайте прозрачен фон, ако логото трябва да се слее с панела. Промяната на цвета на панела не може да премахне бял правоъгълник, който е част от изображението. Логото и неговите цветове не се преоцветяват автоматично.
2. Въведете заглавието на менюто. Въведете заглавието, което посетителите ще виждат в менюто на киоска, например „Посетителски център“. Името на локацията в администрацията и заглавието на менюто са отделни полета.
3. Изберете подредбата на менюто и размера на иконите.
   • Тип подредба на приложенията — Изберете „С фотогалерия“ или „Без фотогалерия“. Снимките променят наличното пространство и подредбата на менюто. Без галерия това пространство се използва за приложения.
   • Размер на иконите на приложенията — Плъзгачът променя размера на изображението в плочката. Например 60% мащабира изображението в отредената му област; това не означава 60% от броя приложения или размера на плочката. Диапазонът е от 0 до 100%. При 0% изображението на иконата не се вижда.

   Киоскът избира размерите и подредбата на плочките според броя приложения, ориентацията и избраната подредба. Решетките 5 × 3 и 4 × 5 в илюстрацията са примери, а не настройка за броя колони. Ако е достъпно само едно приложение, устройството може да го отвори директно, вместо да показва менюто.

4. Добавете снимки и настройте изрязването им.

   Добавяйте и премахвайте снимки в отделния раздел „Фотогалерия на приложния слой“. След това изберете „С фотогалерия“ в „Брандиране“. Самото качване на снимки не избира подредба с галерия.

   • Изрязване на медийните файлове във фотогалерията на приложния слой — Включено: снимката запълва отредената ѝ област, затова краищата може да бъдат изрязани. Изключено: показва се цялата снимка, а размазан вариант на същото изображение запълва останалото пространство.

   Тази галерия е част от менюто на киоска. Тя е отделна от приложението за фотогалерия и от изображенията, възпроизвеждани в кампании.

5. Задайте подканата за докосване на екрана.

   Върху презентационния слой се показва наслагвано изображение, което подсказва на посетителите, че могат да докоснат екрана, за да отворят приложния слой. То е отделно от логото на менюто и снимките в галерията. Изберете отделно изображение за всяка използвана ориентация. Прозрачните области оставят съдържанието отдолу видимо.

   Подканата за докосване не замества навигацията в уеб страницата. Ако използвате приложението „Уеб страница“ без системни контроли, разработчикът на страницата може да добави бутони за връщане към менюто с приложения или възпроизвеждането на кампании. Вижте примера и техническите указания в ръководството за управление на системните слоеве от вашата уеб страница.
   • Хоризонтален екран: 16:9
   • Вертикален екран: 9:16
   • Собствена графика: подгответе прозрачно изображение с разделителната способност на целевия екран, отделно за всяка използвана хоризонтална или вертикална ориентация. Качете го и го изберете в съответната настройка за наслагвано изображение.
   • Графика и разположение: поставете иконата или текста на желаното място във файла. Прозрачните области оставят възпроизвежданото съдържание видимо.
   • Какво прави наслагването: то е допълнение над презентационния слой, а не трети независим слой със съдържание. Позицията на нарисуваната икона не определя сензорната област; преминаването се управлява от настройките на слоевете и приложенията.

   Можете да използвате и оригиналните прозрачни PNG изображения по-долу. Качете ги в настройките за брандиране на локацията в полето за съответната ориентация на екрана. Шахматният фон в прегледа обозначава прозрачност и не е част от файла.

   Хоризонтално

   

   PNG · 2048 × 1152 px

   Изтегляне на PNG – Хоризонтално

   Вертикално

   

   PNG · 1152 × 2048 px

   Изтегляне на PNG – Вертикално

   В стъпки 6–11 ще зададете цветовете на отделните елементи на киоска. Всяка група настройки се отнася за конкретен елемент, например основния панел или фона на иконата.

   Всяка група има две настройки: „Цвят на фона“ задава фона, а „Цвят на текста и символите“ — съответните елементи на преден план. Започнете с панелите и плочките, след което при всяка промяна проверявайте четливостта на текста и контролите.

   Щракнете върху цветното квадратче до полето. Използвайте инструмента за избор, за да настроите оттенъка, яркостта и прозрачността, след това потвърдете с OK. Ако знаете точния код на цвета на марката си, можете да го въведете направо в полето.

   Осигурете достатъчен контраст: тъмен текст върху светъл фон или светъл текст върху тъмен фон. Цветовете на интерфейса не преоцветяват снимки, видеа, качени лога или съдържание на външни уеб страници.
6. Задайте цветовете на основния панел. Панелът с логото, заглавието и часовника: вляво при хоризонтална ориентация, отгоре при вертикална.
   • Цвят на фона: Фонът на основния панел.
   • Цвят на текста и символите: Текстът и символите, които използват цвета на предния план на основния панел.
7. Задайте цветовете на допълнителния панел. Областта със съдържание на менюто: вдясно при хоризонтална ориентация, под основния панел при вертикална.
   • Цвят на фона: Фонът на допълнителния панел; използва се и в други екрани на приложенията.
   • Цвят на текста и символите: Съответните текст и символи върху този фон.
8. Задайте фона на иконите на приложенията. Областта зад изображението на иконата на приложение.
   • Цвят на фона: Фонът на иконата, който се вижда особено около по-малко или прозрачно изображение.
   • Цвят на текста и символите: Използва се от някои други контроли в приложенията. Не преоцветява изображението на иконата в менюто.
9. Задайте фона на бутоните и имената на приложенията. Фонът зад имената на приложенията и бутоните, които използват този цвят.
10. Задайте цветовете на текста и символите на бутоните и приложенията. Имената на приложенията и съответните символи за управление.
11. Задайте общия фон на приложенията.

    Общият фон се използва например в диалога с обратно броене при неактивност и в някои приложения, включително „USB плейър за медийни файлове“ и „3D лабиринт“. Той не определя основния фон на менюто с плочки. Проверете контраста на текста; запазете стойностите по подразбиране, ако не е необходима промяна.

    • Цвят на фона: Фонът на елементите, които използват тази цветова група.
    • Цвят на текста и символите: Съответните текст и символи, например в предупреждението за неактивност.

Запазете промените, когато приключите. Сървърът поставя обновения приложен слой в опашка за изпращане към устройствата в локацията. Устройствата трябва да са свързани и всички нови изображения трябва да се изтеглят докрай. Проверете резултата на устройство, отнесено към локацията; само запазването на формуляра не потвърждава получаването.