Текстовые поля

Поля имеют 5 состояний.

 

Текст у контекстной подсказки максимально краткий, полностью отражающий суть проблемы.

 

Две рядом стоящие подсказки не должны пересекаться. В случае возможного пересечения текст идет в несколько строк.

 

 

Обводка

размер: 1px

HEX: #CDD1D4

RGB: 205,209,212

Обводка

размер: 5px

HEX: #BFE5FF

RGB: 191,229,255

Заливка

HEX: #E9ECEE

RGB: 233,236,238

Обводка

размер: 1 px

HEX: #DD191D

RGB: 221,25,29

 

 

   X1 X2 X3 X4 X5 X6 X7
Десктоп 20  16  30  40 
Планшет 15  20  30  40  3
Телефон   15 16  15  20  нет 

 

 

Многострочное поле

На портале "Госуслуги"многострочные поля, существую для Десктопной, Планшетной, и Мобильной версии.

 

Внешний вид и поведение многострочных полей у Десктопной и Планшетной версии одинковы.  На мобильных устройствах, внешниий вид изначально идентичен однострочному полю. В следствии добавления контента более чем одна строка, поле растягивается по высоте. Сдвигая в низ контент под собой с сохранением отступов.

 

 

Выпадающие списки

Характеристики полей выпадающих списков аналогичны характеристикам текстовых полей (кроме указаных в таблице).

 

Список разворачивается поверх полей формы.

 

Максимальное кол-вовидимых выпадающихпунктов - 4.

 

Если список не влезает повысоте в экран устройства- он выпадает сверху поля

 

На десктопе спискиподдерживают клавиатурные комбинации для раскрытиясписка, перемещения и поиска нужного пункта по первой букве.

 

На мобильных устройствах разворачиваются системные списки. Имеют скругленные углы с обеих сторон.

 

  X1  X2  X3  X4  X5  X6  X7  X8  Радиус 

Заливка

HEX: #6CA9D2

Смартфон RGB: 108,169,210

Десктоп 20 21  15  21  38  10  54  10 
Телефон  20 18  15 24 нет нет  нет  нет 
Планшет  15 23  20  23  нет  нет  нет  нет 

 

 

 

Поисковая строка

Характеристики полей поисковой строки аналогичны характеристикам текстовых полей (кроме указаных в таблице). Список разворачивается поверх полей формы.

 

Список начинаетотображаться при вводе 3 и более символов Максимальное кол-во видимых выпадающих пунктов - 4.Если список не влезает по

 

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

по первой букве

 

  X1  X2  X3  X4  X5  X6  X7  X8  Радиус 

Заливка

HEX: #6CA9D2

Смартфон RGB: 108,169,210

Десктоп 20 18 15  20  38  10  54  10  4, справа
Телефон  20 15  15 20 32 50  10  4, справа 
Планшет  15 20  20  20 36  10  50  10  4, справа 

 

 

 

Комбинированные списки

Характеристики полей комбинированных списков аналогичны характеристикам текстовых полей (кроме указаных в таблице). Список разворачивается поверх полей формы. Нажатие на пиктограмму принудительно раскрывает выпадающий список.

Максимальное кол-во видимых выпадающих пунктов - 4. Если список не влезает по высоте в экран устройства- он выпадает сверху поля На мобильных устройствах разворачиваются системные списки. На десктопе списки поддерживают клавиатурные

комбинации для раскрытия списка, перемещения и поиска нужного пункта по первой букве.Имеют скругленные углы с правой стороны.

 

 

 

 

  X1  X2  X3  X4  X5  X6  X7  X8  Радиус 

Заливка

HEX: #6CA9D2

Смартфон RGB: 108,169,210

Десктоп 20 18 15  20  38  10  54  10  4, справа
Телефон  20 15  15 20 32 50  10  4, справа 
Планшет  15 20  20  20 36  10  50  10  4, справа 

 

 

Длинные названия полей

Если текст длинный, он выносится над полями, а в самих полях пишется стандартный текст «Введите» или «Укажите»

Стиль текста для названия полей - Sub

Название поля имеет ширину самого поля

 

 

   X1 X2   X3
Десктоп 40  30 
Планшет  30  10  20 

 

 

Длинное содержимое полей

В полях длинный текст переносится на вторую строку.

На десктопе и планшете поля, в которые вводится много данных всегда по ширине на всю рабочую область формы и переносятся так же как и на смартфоне

 

Все устройства

 

 

Длинное содержимое в выпадающих списках

В выпадающих списках длинный текст переносится на следующую строку.

 

 

Лайткуб