Udviklertips: Branding af din app

Sådan giver du din app et unikt, men oprindeligt look

Med 75+ native GTK3-apps fortsætter AppCenter med at udfylde kvalitetsoplevelser fra flere dusin udviklere. Mange er begyndt at opbygge deres eget brand omkring deres apps eller udviklerkonto, hvilket er fantastisk! I dag skal jeg lære dig, hvordan du kan bruge det elementære stilark og andre platformkonventioner til at styrke din egen apps brand og design.

Brug stilklasser

Den hurtigste måde at indstille din apps look på er at bruge de indbyggede stilklasser fra det elementære stilark. Der er masser af disse til forskellige anvendelser, f.eks. Bagknapper, typografi, flade overskrift osv.

Konstanter til klasser i granit og Gtk er tilgængelige på Valadoc, men her er nogle af mine yndlings- og mest nyttige klasser:

  • .back til bagknapper, som i Systemindstillinger og AppCenter
  • .h1 – .h4 til overskrift af tekstetiketter
  • .flat, nyttigt til fladstilede windows eller headerbars
  • .default-dekoration til slanke headerbars, som i Terminal
  • . omgivet af afrundede hjørner på vinduer som Dippi eller Harvey

Hvis der findes en stilkonstant, anbefales det altid at bruge den i stedet for at indstille en klasse manuelt. Dette sikrer, at du får advarsler, hvis konstanten nogensinde er udskrevet, erstattet eller fjernet. Hvis du antager, at din app er i Vala (som vi anbefaler til AppCenter, men ikke er påkrævet!), Tilføjede du en stil konstant som:

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

Eller hvis der ikke er en indbygget stilkonstant, skal du bare indstille en klasse med:

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

Du kan læse mere på Valadoc, eller tjek dem ud i handling i Granite Demo. Andre sprog skal være ens; kigge efter at tilføje en klasse til Gtk-stilkonteksten.

Stilklasser fungerer, som du kunne forvente med CSS: hvis du sender et brugerdefineret typografiark, kan du tilføje tilpasset styling til alle indbyggede klasser eller endda tilføje dit eget. Når du kombinerer disse med specifikke farver i din app, kan det gå en lang vej at få det til at skille sig ud fra mængden, mens du føler dig helt hjemmehørende og hjemme på det elementære operativsystem.

Sæt mærkefarver

En nem, men slående ændring, du kan foretage i din app, bruger mærkefarver. Det elementære stilark bruger et antal variabler til at style UI'en, inklusive overskrift og accentfarver i hele din app. Som standard er headerbars neutral, og accentfarven er elementær blå. Men du kan bruge dette til at indstille tonen for dit eget brand.

Snaptastic bruger en lys orange overskrift.

For at style en headerbar skal du indstille variablerne @colorPrimary, @textColorPrimary og @textColorPrimaryShadow i din brugerdefinerede CSS. Du kan se variablerne i det elementære stilark på GitHub.

For accentfarve skal du bare indstille @colorAccent, så den samles op af fokuskonturer, valg af tekst osv. Du kan se et eksempel på indstilling af dette i Dippi for en subtil lilla accent.

Læg mærke til den subtile lilla kontur på indgangen Diagonal Size

Du kan også bruge CSS til at indstille eller ændre andre farver i dit brugergrænseflade, som underteksten i Snaptastic-skærmbillede fra tidligere. Bliv ikke for transporteret, men et dejligt strejf af accentfarve kan se godt ud.

GResource ikoner

Nogle gange vil du måske sende et ikon, der ikke findes i lagerelementærsættet, eller du vil gerne omfarve et ikon for bedre at matche din app. I stedet for at installere disse ikoner på hele systemet, er det bedste praksis at bruge GResource.

Dette indebærer oprettelse af en simpel ressource XML-fil, indlæsning af ressourcen som et tilbagevendelsesikon, der er angivet i din app, og fortælle dit build-system om at bygge det med din app. Tjek et eksempel gresource.xml fra Dippi sammen med at indstille det som et tilbagevendelsesikonstema i Vala. For et eksempel på kompilering af ressourcerne med et build-system skal du kontrollere filen meson.build.

Forskellige sprog og opbygningssystemer vil naturligvis være forskellige, men dokumentation og / eller eksempler burde ikke være for svære at komme med. GNOME-udviklerdokumenterne er et godt sted at starte.

Typografi

Brug af ovennævnte .h1 – .h4 Gtk-stilklasser til overskrifter er en af ​​de hurtigste måder at tilføje nogle rige typografier til din app og er et godt sted at starte. Disse klasser sikrer, at du ikke hardkoder en nøjagtig stil, men markerer vigtigheden af ​​en overskrift og lader systemstilsarket overtage ved at indstille det nøjagtige skrifttype, størrelse og vægt.

Du kan også direkte indstille en skriftvægt og farve i dit brugergrænseflade med CSS, som du kunne forvente. Husk WCAG-kontrastretningslinjer for farve (du kan bruge Harvey på AppCenter til at kontrollere!).

Du kan også indstille en skriftstørrelse i CSS, men brug ikke px-enheder: Brugere kan angive en større eller mindre tekststørrelse end standard af tilgængelighedsårsager. Det er altid en god ide at teste med tilgængelighedsindstillinger, og at bruge pt- eller em-enheder sikrer, at din skrifttype skaleres, så den svarer til brugerens indstillinger. Gå til systemindstillinger → Universal Access → Display for at prøve forskellige tekststørrelser.

Ordbog app Palaura bruger en Serif-skrifttype til at vise definitioner

Et mindre udforsket område med unik branding er at bruge en brugerdefineret skrifttype i din app's "chrome" eller UI. Snaptastic bruger igen dette, men der er nogle ting, du skal huske på:

  1. Brug en forudinstalleret skrifttype, eller afhæng af en skrifttype, hvis den er i OS repos. Du skal sørge for, at skrifttypen vises på brugernes systemer, ikke kun når den er installeret på din! Tjek Snaptastics kildekode for et eksempel på, afhængigt af en skrifttype.
  2. Overvej lokalisering. Ikke alle skrifttyper understøtter ethvert sprog og specialtegn, så din app ser muligvis underlig ud, når den oversættes. Vælg en skrifttype med bred karakterdækning, og prøv din app ud med et par forskellige sprog for at se, hvordan det ser ud.
  3. Undgå tilpassede skrifttyper til indhold. Screenshot-værktøjet i det elementære OS har en "skjul tekst" -funktion, der midlertidigt erstatter systemtypen med en skriftligt "redacted" font. Dette fungerer ikke overalt, hvor du indstiller en tilpasset skrifttype, så vær forsigtig, når du håndterer brugerindhold og potentielt følsomme oplysninger.

Ved hjælp af disse tip kan du hjælpe din app med at skille sig ud ved at styrke dens brand og design. Husk, at design dog ikke altid handler om at tilføje til din app! Brug disse metoder med forbehold og formål. Ikke hver app skal være supertilpasset branded, og små berøringer går langt.

Tak igen til alle udviklere, der laver apps til AppCenter, alle, der har købt en app på AppCenter, vores tilhængere på Bountysource og Patreon, og dem, der har købt en kopi af elementært OS eller merch fra vores butik. Ethvert bidrag hjælper med at gøre alt dette muligt, og vi ville ikke være her uden dig! Hvis du gerne vil hjælpe med at forbedre elementært OS, skal du ikke tøve med at blive involveret!