Дизайн иконок в приложении#

Иконки интерфейса#

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

stock_message.svg share.svg stock_alarm-clock.svg security-alert.svg settings.svg (иконки)

Полный список значков, которые есть в системе UTouch.

Цвет#

Иконки интерфейса можно раскрасить в qml, они раскрашены в цвет #808080.

Шрифт#

Чтобы обеспечить единообразный вид пользовательского интерфейса и сделать значки Suru отличительными, дизайн основан на тех же шаблонах, что и шрифты Ubuntu. Шаблоны шрифтов можно применить к символу, чтобы определить его контуры.

../../_images/14.png

Линии#

Концы линий имеют прямоугольную форму, но верхний конец вертикальных линий слегка скошен под углом + 10º.

../../_images/15.png

Вращение#

Когда объекты не расположены горизонтально или вертикально, они ориентированы по оси + 45º.

../../_images/16.png

Углы#

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

../../_images/17.png

Стрелки#

Навигационные стрелки обозначены символом шеврона. Стрелка представляет собой равнобедренный треугольник, две равные стороны которого слегка изогнуты (по образцу буквы «Y»).

../../_images/18.png

Тени и непрозрачность#

Прозрачность в 50% используется для отражения статуса индикатора. В случае двойного нажатия (например, включенного и выключенного) прозрачность всего значка изменится. Когда статус допускает диапазон значений, можно изменить прозрачность отдельной части значка.

../../_images/19.png

Сетка#

Интерфейсные иконки имеют размер 96x96 пикселей, с полями не менее 4 пикселей с каждой стороны.

../../_images/20.png