Dicas para desenvolvedores: como destacar seu aplicativo

Como dar ao seu aplicativo uma aparência única, mas nativa

Com 75+ aplicativos nativos GTK3, o AppCenter continua a preencher com experiências de qualidade de várias dezenas de desenvolvedores. Muitos começaram a construir sua própria marca em torno de seus aplicativos ou conta de desenvolvedor, o que é incrível! Hoje vou ensinar como você pode usar a folha de estilo elementary e outras convenções de plataforma para fortalecer a marca e o design de seu aplicativo.

Use classes de estilo

A maneira mais rápida de ajustar a aparência do seu aplicativo é usar as classes de estilo internas da folha de estilo elementary. Existem toneladas destes para diferentes usos, como botões para trás, tipografia, barras de cabeçalho planas, etc.

Constantes para classes de estilo Granite e Gtk estão disponíveis no Valadoc, mas aqui estão alguns dos meus favoritos e mais úteis:

• .back para botões de retorno, como nas configurações do sistema e no AppCenter
• .h1- .h4para rótulos de texto de título
• .flat, útil para janelas de estilo plano ou barras de cabeçalho
• .default-decoration para barras de cabeçalho finas, como no Terminal
• .roundedpara cantos inferiores arredondados nas janelas, como Dippi ou Harvey

Se existir uma constante de estilo, é sempre recomendável usá-la em vez de definir uma classe manualmente. Isso garante que você receba avisos se a constante for desatualizada, substituída ou removida. Supondo que seu aplicativo esteja em Vala (que recomendamos para o AppCenter, mas não é obrigatório!), Adicione uma constante de estilo como:

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

Ou se não houver uma constante de estilo incorporada, basta definir uma classe com:

your_widget. get_style_context (). add_class ("arredondado");

Você pode ler mais no Valadoc ou verificá-los em ação no Granite Demo . Outras línguas devem ser semelhantes; procure adicionar uma classe ao contexto do estilo Gtk.

As classes de estilo funcionam exatamente como você esperaria com CSS: se você envia uma folha de estilo personalizada, pode adicionar um estilo personalizado para qualquer classe interna ou até mesmo adicionar a sua própria. Combinando-as com cores específicas em seu aplicativo, você pode se destacar da multidão, sentindo-se completamente nativa e em casa no sistema operacional elementary.

Definir cores da marca

Uma mudança fácil, mas impressionante, que você pode fazer no seu aplicativo é usar as cores da marca. A folha de estilo elementary usa várias variáveis ​​para estilizar a interface do usuário, incluindo as cores da barra de cabeçalho e do acento em todo o aplicativo. Por padrão, as barras de cabeçalho são neutras e a cor de destaque é azul elementary. Mas você pode usar isso para definir o tom da sua própria marca.

Snaptastic usa um cabeçalho laranja brilhante.

Para um estilo de headerbar, defina as @colorPrimary, @textColorPrimarye @textColorPrimaryShadowvariáveis no seu CSS personalizado. Você pode ver as variáveis ​​na folha de estilo elementary no GitHub .

Para a cor de @colorAccentdestaque , basta definir e ele será escolhido por contornos de foco, seleção de texto, etc. Você pode ver um exemplo de configuração em Dippi para um sutil sotaque roxo.

Observe o contorno roxo sutil na entrada Tamanho Diagonal

Você também pode usar CSS para definir ou alterar outras cores na sua interface do usuário, como a legenda na captura de tela do Snaptastic anteriormente. Não fique muito empolgado, mas um belo toque de cor de destaque pode ficar ótimo.

Ícones GResource

Às vezes, você pode enviar um ícone que não está no conjunto básico de ações ou recolorir um ícone para melhor corresponder ao seu aplicativo. Em vez de instalar esses ícones em todo o sistema, é recomendável usar o GResource.

Isso envolve a criação de um arquivo XML de recurso simples, o carregamento do recurso como um ícone de fallback definido em seu aplicativo e a solicitação ao seu sistema de compilação para criá-lo com seu aplicativo. Confira um exemplo de gresource.xml a partir do Dippi, juntamente com a configuração como o tema do ícone de fallback no Vala. Para um exemplo de compilar os recursos com um sistema de compilação, verifique o arquivo meson.build .

Diferentes linguagens e sistemas de compilação obviamente serão diferentes, mas documentação e/ou exemplos não devem ser muito difíceis de encontrar. Os documentos do desenvolvedor do GNOME são um bom lugar para começar.

Tipografia

Usando as acima mencionadas .h1- .h4classes de estilo Gtk para títulos é uma das maneiras mais rápidas de adicionar algum tipografia rico para a sua aplicação e é um ótimo lugar para começar. Essas classes garantem que você não codifique um estilo exato, mas estão marcando a importância de um título e deixando a folha de estilo do sistema assumir o controle com o tipo, tamanho e peso exatos.

Você também pode definir diretamente o peso e a cor da fonte na sua interface do usuário com CSS, como seria de esperar. Para cores, tenha em mente as diretrizes de contraste das WCAG (você pode usar o Harvey no AppCenter para verificar!).

Você também pode definir um tamanho de fonte em CSS, mas não usar pxunidades : os usuários podem definir um tamanho de texto maior ou menor que o padrão por motivos de acessibilidade. É sempre uma boa ideia testar as configurações de acessibilidade, e usar ptou emnnas unidades garante que sua fonte seja dimensionada para corresponder às configurações do usuário. Vá para Configurações do Sistema → Acesso Universal → Display para experimentar diferentes tamanhos de texto.

Aplicativo de dicionário Palaura usa uma fonte Serif para exibir definições

Uma área menos explorada da marca exclusiva é usar uma fonte personalizada no “chrome” ou na interface do usuário do seu aplicativo. O Snaptastic novamente usa isso, mas há algumas coisas que você deve ter em mente:

1. Use uma fonte pré-instalada ou dependa de uma fonte se estiver nos repositórios do SO. Você precisa ter certeza de que a fonte aparecerá nos sistemas dos usuários, não apenas quando estiver instalada na sua! Verifique o código-fonte do Snaptastic para um exemplo de dependendo de uma fonte .
2. Considere a localização . Nem todas as fontes são compatíveis com todos os idiomas e caracteres especiais, portanto, seu aplicativo pode parecer estranho quando traduzido. Escolha uma fonte com ampla cobertura de personagem e experimente seu aplicativo com alguns idiomas diferentes para ver como ele ficará.
3. Evite fontes personalizadas para conteúdo . A ferramenta de captura de tela no sistema operacional elementary tem um recurso de “ocultar texto” que substitui temporariamente a fonte do sistema por uma fonte rabiscada “redigida”. Isso não funcionará em nenhum lugar em que você definir uma fonte personalizada, portanto, tenha cuidado ao lidar com o conteúdo do usuário e qualquer informação potencialmente sensível.

Usando essas dicas, você pode ajudar seu aplicativo a se destacar, reforçando sua marca e design. Lembre-se, o design nem sempre é adicionar ao seu aplicativo! Use esses métodos com reserva e propósito. Nem todo aplicativo precisa ser de marca super personalizada, e pequenos toques são muito importantes.

Gostariamos de agradecer a todos que compraram algum aplicativo no AppCenter, nos ajudaram via Bountysource ou Patreon, ou também aqueles que compraram uma copia do elementary OS ou produtos da nossa loja. Toda contribuição nos ajuda a tornar tudo isso possível, e não estaríamos aqui sem vocês! Se você gostaria de nos ajudar a melhorar o elementary OS, não hesite em Se Envolver!

¯\_(ツ)_/¯

Tradução do medium do elementary OS