Документация
ОС Аврора 5.0.1

Иконки приложений

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

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

Размер и форма иконки

Размер иконки на экране приложений, это iconSizeLauncher, что равно 86×86dp. В качестве основной формы иконок приложений в ОС Аврора используется суперэллипс. По умолчанию в систему загружаются иконки простой квадратной формы, без скгруглений, далее, система сама обрезает иконку по маске суперэллипса. Поэтому при подготовке иконки скруглять её углы не нужно — все углы должны быть равны 90°.

Базовые правила

Фон

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

При создании градиента для сохранения визуальной согласованности всех иконок приложений стоит учитывать, что иконка должна быть «освещена» слева-сверху, то есть более светлый тон рекомендуется располагать в левом верхнем углу иконки.

Фоновый градиент обязательно должен быть достаточно контрастным, чтобы основная форма иконки легко на нём считывалась.

Форма и цвет основы

В качестве основы рекомендуется использовать простые геометрические формы, окрашенные в сплошной белый цвет (#FFFFFF). При необходимости детали могут быть выделены за счёт изменения прозрачности составляющих иконки. Не исключено добавление дополнительных родственных цветов в небольших количествах для добавления акцента. Использование различных эффектов, таких как тени (внутренние и падающие), размытия и маски крайне не рекомендуется, так как это повлияет и на визуальную гармонию экрана приложений и на корректное отображение иконки в целом.

Важнейшее правило создания иконки приложения ОС Аврора — соблюдение безопасной зоны, в которую допустимо помещать иконку, а также в целом, соблюдение базовой сетки иконки. Учёт сетки при проектировании поможет избежать визуального дисбаланса размерности иконок на экране приложений.

За основу лучше взять базовые фигуры, которые легко ложатся в сетку иконки приложения ОС Аврора. Радиус скруглений прямых углов равен 6dp.

Базовая форма — круг. Дополнительный цвет как акцент. Градиент на основе белого цвета, как художественный приём для передачи метафоры. Базовая форма — скруглённый квадрат. Разные прозрачности составляющих иконки для контраста. Базовая форма — скруглённый горизонтально вытянутый прямоугольник. Разные прозрачности составляющих иконки для контраста.
Базовая форма — скруглённый вертикально вытянутый прямоугольник. Дополнительный цвет для контраста элементов иконки. Базовая форма — комбинация простых геометрических фигур. Дополнительный цвет как акцент. Дополнительный цвет как контраста элементов иконки. Базовая форма — комбинация простых геометрических фигур. Градиент на основе белого цвета, как художественный приём.

Настройка иконки в desktop-файле

Все иконки приложений принимают стандартную системную форму, на текущий момент это сквиркл. По умолчанию иконки отрисовываются на белом фоне с размером 80% от оригинального. Это позволяет аккуратно разместить иконку по центру "подложки" системной формы и исключает ощущение беспорядка в Меню приложений.

Переопределить такое поведение можно полем IconMode в секции X-Aurora-Application, которое может принимать одно из двух значений:

  • Scale — по умолчанию, иконка масштабируется.
  • Crop — иконка отрисовывается без масшабирования, а края подрезаются системной формой.

Режим IconMode == Crop упрощает разработку иконки, так как теперь нет необходимости рисовать исходник иконки со сложной формой, достаточно разместить иконку на квадратном фоне.

Частые ошибки

Обрезка общей формы иконки

Нарушение безопасной зоны

Использование сложных форм и обилие мелких деталей

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

Использование пёстрого и/или неконтрастного градиента

Использование эффектов и масок в иконке

Итог

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

На выходе для передачи в разработку должна получиться иконка:

  • формата.svg,
  • размера IconSizeLauncher,
  • без скруглений общей формы (фона),
  • без использования масок,
  • без использования эффектов.

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

Пожалуйста ознакомьтесь с политикой использования cookies.