Советы разработчикам: брендинг вашего приложения

Как придать вашему приложению уникальный, но естественный вид

С более чем 75 собственными приложениями GTK3 AppCenter продолжает наполняться качественным опытом от нескольких десятков разработчиков. Многие начали создавать свой собственный бренд на основе своих приложений или аккаунта разработчика, и это здорово! Сегодня я собираюсь научить вас, как вы можете использовать простую таблицу стилей и другие соглашения о платформе для укрепления бренда и дизайна вашего собственного приложения.

Используйте стилевые классы

Самый быстрый способ настроить внешний вид вашего приложения - это использовать встроенные классы стилей из элементарной таблицы стилей. Существует множество таких приложений, таких как кнопки «Назад», типографика, плоские заголовки и т. Д.

Константы для классов стилей Granite и Gtk доступны в Valadoc, но вот некоторые из моих любимых и самых полезных:

  • .back для кнопок назад, как в Системных настройках и AppCenter
  • .h1 – .h4 для заголовков текстовых меток
  • .flat, полезно для плоских окон или заголовков
  • .default-украшение для тонких заголовков, как в терминале
  • .покрытый для закругленных нижних углов на окнах, таких как Диппи или Харви

Если константа стиля существует, всегда рекомендуется использовать ее вместо установки класса вручную. Это гарантирует, что вы получите предупреждения, если константа устареет, будет заменена или удалена. Предполагая, что ваше приложение находится в Vala (что мы рекомендуем для AppCenter, но не обязательно!), Вы добавили бы константу стиля, такую ​​как:

your_widget.get_style_context () .add_class (Gtk.STYLE_CLASS_FLAT);

Или, если нет встроенной постоянной стиля, просто установите класс с помощью:

your_widget.get_style_context () .add_class ("округленный");

Вы можете прочитать больше на Valadoc или проверить их в действии в Granite Demo. Другие языки должны быть похожими; ищите добавление класса в контекст стиля Gtk.

Классы стилей работают точно так же, как вы ожидаете от CSS: если вы отправляете пользовательскую таблицу стилей, вы можете добавить собственный стиль для любых встроенных классов или даже добавить свой собственный. Сочетание их с определенными цветами в вашем приложении может значительно помочь ему выделиться из толпы, оставаясь при этом абсолютно естественным и комфортным в элементарной ОС.

Установить фирменные цвета

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

Snaptastic использует ярко-оранжевую панель заголовков.

Чтобы стилизовать панель заголовка, установите переменные @colorPrimary, @textColorPrimary и @textColorPrimaryShadow в своем собственном CSS. Вы можете увидеть переменные в простейшей таблице стилей на GitHub.

Для цвета акцента просто установите @colorAccent, и он будет выбран контурами фокуса, выделением текста и т. Д. Вы можете увидеть пример установки этого в Dippi для тонкого фиолетового акцента.

Обратите внимание на тонкий фиолетовый контур на элементе Размер диагонали

Вы также можете использовать CSS для установки или изменения других цветов в вашем пользовательском интерфейсе, например, субтитры на снимке экрана Snaptastic ранее. Не слишком увлекайтесь, но приятное прикосновение акцентного цвета может выглядеть великолепно.

GResource Иконки

Иногда вам может понадобиться отправить значок, которого нет в базовом наборе, или вы хотите перекрасить значок, чтобы он лучше соответствовал вашему приложению. Вместо установки этих значков на всю систему рекомендуется использовать GResource.

Это влечет за собой создание простого XML-файла ресурса, загрузку ресурса в качестве запасного значка, установленного в вашем приложении, и указание вашей системе сборки создать его с вашим приложением. Посмотрите пример gresource.xml из Dippi, а также установите его в качестве резервной темы значков в Vala. Для примера компиляции ресурсов с системой сборки, проверьте файл meson.build.

Разные языки и системы сборки, очевидно, будут отличаться, но документация и / или примеры не должны быть слишком сложными. Документы разработчиков GNOME - хорошее место для начала.

Типография

Использование вышеупомянутых классов заголовков .h1 – .h4 Gtk для заголовков - один из самых быстрых способов добавить богатую типографику в ваше приложение, и это отличное место для начала. Эти классы гарантируют, что вы не жестко программируете точный стиль, но отмечаете важность заголовка и позволяете системной таблице стилей вступить во владение с установкой точного шрифта, размера и веса.

Вы также можете напрямую установить вес и цвет шрифта в вашем пользовательском интерфейсе с помощью CSS, как и следовало ожидать. Что касается цвета, помните о соответствии контраста WCAG (вы можете использовать Harvey в AppCenter, чтобы проверить!).

Вы также можете установить размер шрифта в CSS, но не используйте пиксельные единицы: пользователи могут установить больший или меньший размер текста, чем по умолчанию, из соображений доступности. Это всегда хорошая идея для тестирования с настройками специальных возможностей, а использование единиц измерения pt или em гарантирует, что ваш шрифт будет масштабироваться в соответствии с настройками пользователя. Перейдите в «Настройки системы» → «Универсальный доступ» → «Дисплей», чтобы опробовать различные размеры текста.

Словарь приложение Palaura использует шрифт с засечками для отображения определений

Одной из малоизученных областей уникального брендинга является использование собственного шрифта в «хроме» или интерфейсе приложения. Snaptastic снова использует это, но есть некоторые вещи, которые нужно иметь в виду:

  1. Используйте предустановленный шрифт или зависите от шрифта, если он есть в репозиториях ОС. Вы должны убедиться, что шрифт будет отображаться в пользовательских системах, а не только тогда, когда он установлен на вашей! Проверьте исходный код Snaptastic для примера зависимости от шрифта.
  2. Рассмотрим локализацию. Не каждый шрифт поддерживает все языки и специальные символы, поэтому ваше приложение может выглядеть странно при переводе. Выберите шрифт с широким охватом символов и опробуйте свое приложение на нескольких языках, чтобы увидеть, как оно будет выглядеть.
  3. Избегайте пользовательских шрифтов для контента. Инструмент для создания скриншотов в элементарной ОС имеет функцию «скрыть текст», которая временно заменяет системный шрифт шрифтом «отредактированный». Это не сработает, где бы вы ни установили собственный шрифт, поэтому будьте осторожны при работе с пользовательским контентом и любой потенциально конфиденциальной информацией.

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

Еще раз спасибо всем разработчикам, создающим приложения для AppCenter, всем, кто купил приложение в AppCenter, нашим сторонникам в Bountysource и Patreon, а также тем, кто приобрел копию элементарной ОС или мерч в нашем магазине. Каждый вклад помогает сделать все это возможным, и мы не были бы здесь без вас! Если вы хотите помочь улучшить элементарную ОС, не стесняйтесь подключиться!