Дизайн вбудованих значків

Інтерфейсні значки

Інтерфейсні значки повідомляють про статус або дії, такі як рівень заряду акумулятора чи будильник, і дозволяють користувачеві виконувати такі дії, як відкриття меню, обмін контентом або друк документів. Ці значки знаходяться на верхній панелі або у вбудованих значках, таких як заголовок або меню.

stock_message.svg share.svg stock_alarm-clock.svg security-alert.svg settings.svg

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

Колір

Інтерфейсні значки можна розфарбувати у 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