Page tree
Skip to end of metadata
Go to start of metadata

Изображение в шапке (логотип)

Ограничение по высоте 24 px. Если изображение больше, то оно пропорционально уменьшается (то есть и высота и ширина). Ограничений по ширине нет, если изображение шире текущего экрана, то будет горизонтальный скролл (и элемент выбора языка будет вытеснен из видимой области экрана вправо). Так что по ширине рекомендуем не больше 260 px (ширина iphone4 минус 60px для флага выбора языка).

Изображение сверху (верхний баннер)

Изображение само по себе не ограничено, но т.к. оно находится внутри главного блока с контролами, чей размер по ширине ограничен 400px, то и соответственно и изображение не шире. Информация по ресурсам (изображениям) 400px. Если изображение шире 400px, то оно пропорционально уменьшается. По высоте не ограничено, чем больше высота, тем больше сдвигает вниз контрольные элементы (кнопки, поля и т.д.)

Для экранов шириной меньше 400px занимает всю доступную видимую ширину.

Изображение снизу (нижний баннер)

Изображение само по себе не ограничено, но т.к. оно находится внутри главного блока с контролами, чей размер по ширине ограничен 400px, то и соответственно и изображение не шире 400px. Если изображение шире 400px, то оно пропорционально уменьшается. По высоте не ограничено, чем больше высота, тем больше получается высота исходной страницы.

Для экранов шириной меньше 400px занимает всю доступную видимую ширину.

Изображения слева и справа

Имеют отступ сверху на уровне нижней границы логотипа (изображение сверху), т.е. 47px + top_image_height px. Максимальная ширина 200px, по высоте нет ограничений, чем больше высота изображения, тем  больше  высота исходной страницы. Если ширина изображения больше 200px, то оно пропорционально уменьшается. Блоки с изображениями непосредственно прижаты к главному блоку с контрольными элементами. Если ширина изображения меньше 200px, то оно будет отцентрировано в блоке шириной 200px и будет казаться, что есть отступ между изображением и главным блоком.

При ширине дисплея устройства от 600 до 800 px при условии, что настроены одновременно и левый и правый баннера, оба скрываются. Если настроен только правый или только левый, то изображение не скрывается. При ширине экрана меньше 600px изображения скрываются в любом случае

Задний фон

Изображение должно быть максимального качества, для корректного отображения на больших экранах. Отцентрованно по осям X и Y, покрывает всю область заднего фона (если изображение будет слишком мало, оно будет увеличено, что скажется на качестве заднего фона), не растягивается. Строго не рекомендуется на фоновое изображение помещать значащие элементы, т.к. при малых размерах экрана (телефоны) оно практически все будет скрыто контрольными элементами.

Каждая картинка может быть статичной (png, jpg) либо динамичной (gif).

Важно! Боковые баннеры не отображаются в мобильном варианте.

Информация по прочим элементам (кнопкам и т.д.)

Настройке подлежат:

  • Значок (favicon), отображаемый в браузере
  • Цвет фона и прозрачность шапки (узкой полосы в верхней части портала, содержащей логотип и флаг переключения языка)
  • Задний фон страницы. Может быть заполнен изображением либо залит цветом
  • Текст между верхним баннером и кнопками выбора сценария (там может быть написано "Добро пожаловать" или что-то ещё на выбор дизайнера)
  • Фон (цвет, прозрачность) и шрифт текста из п.3 и фразы "Авторизируясь на портале вы принимаете условия лицензионного сообщения"
  • Текст, цвет фона и цвет рамки полей ввода телефона, фамилии, пароля, номера аккредитации
  • Надписи на кнопках "У меня есть пароль", "У меня нет пароля"
  • Надписи рядом с элементами ввода "Логин", "Пароль" (например, вместо слова "Пароль" можно подписать "Номер аккредитации")
  • Цвет и содержимое кнопок выбора сценария: идентификация по телефону или вход по номеру аккредитации
  • Цвет и текст надписей рядом с полями ввода (телефон, фамилия, пароль, номер аккредитации), содержимое этих надписей
  • Каждый из баннеров может быть включен, либо выключен (не отображаться)

Порядок элементов, расположение баннеров и относительные размеры кнопок фиксированы. Может быть только по одному экземпляру баннеров каждого типа. Нельзя сделать два верхних или два нижних баннера.

Прочие страницы

Дополнительно, кроме страницы входа в портале присутствуют прочие страницы:

  • Ввод кода из SMS (опционально)
  • Финальная (текст: "Поздравляем, вы подключены к сети Интернет")
  • Добро пожаловать (текст "Ваш номер 12345, мы правильно вас узнали?") - опционально, в случае выставления длительного периода хранения сессии пользователь страницу не увидит
  • Окончание сессии (текст об истечении лимита по трафику или времени) - опционально, в случае безлимитных тарифов пользователь страницу не увидит
  • Пользовательское соглашение (пользователь перейдёт на эту страницу при нажатии на соотв. ссылку на странице входа)
  • Доступ запрещён (попытка обращения к ресурсам, запрещённым текущим сервисом или фазой сценария обработки сессии)
  • Сессия устарела (пользователь увидит данную страницу, если откроет портал и не будт вводить данные дольше пяти минут)

Настроенные цветовые схемы для элементов ввода (поля ввода, кнопки) будут отображаться на всех страницах единообразно. Настроенные графические элементы: лого, фон, баннеры будут отображаться на всех страницах единообразно.

Языковые настройки

При мультиязыковой настройке есть возможность задавать текстовые надписи и баннеры отдельно для каждого языка.

Поддерживаемые платформой языки:

  • русский
  • английский
  • китайский
  • казахский

Цветовая гамма (настройки кнопок и элементов ввода) для всех языков будет одинаковая.

Схема расположения баннеров на портале

Расположение баннеров в мобильном варианте:

Расположение баннеров в планшете:

Расположение баннеров на ПК(ноутбуке):

Расположение баннеров на ПК (ноутбуке) при выбранном сценарии идентификации:

Примеры рабочих порталов с различных мероприятий:




  • No labels