Android okosóra számlap készítés – Grafikai megvalósítás és a Téma elkészítésének az alapjai

Megismertük a számlap készítés alapjait, most lépjünk egyel tovább.

Ki kell alakítani a fejlesztői szoftver környezetet. E-hez ismerni kell az óra típusát és az operációs rendszert ami fut az órán. Az OS az minden esetben Android. Ezért szinte bármely Android fejlesztői szoftver alkalmas a számlapok elkészítésére.

Itt van egy nagy DE!

Ugyanis az Android egy Garmin órán nem ugyan az mint egy Xiaomin. Ez alól pedig a Huawei órái messze kilógnak a megszorítások óta. Emiatt a Huawei óráira nem egészen úgy kell számlapot készíteni, mint bármely más Android OS alapú órára

Fejlesztői Szoftverkörnyezet:

• Huawei Theme Studio Ez a Huawei saját alkalmazása, amelyel Huawei telefonokra, tabletekre és órákra tudunk saját témákat készíteni. Rövid barátkozás után a kezelő felülete kézre áll, nagyon felhasználóbarát.
• Wathface Studio Ez a Samsung által készített alkalmazás a gyártó saját viselhető eszközeihez lett tervezve. Ezzel kizárólag csak ezekre az eszközökre készíthető téma.
• Watch Faces – Pujie Ez az alkalmazás egy harmadik fél alkalmazása. Elérhető a Play áruházban. Van szerkesztő funkciója és saját számlap készítésére is alkalmas.
• Facemaker Ez is egy harmadikfeles alkalmazás. Ez alapvetően Huawei és Xiaomi óraszámlapok készítésére használható. Ez egy fizetős alkalmazás, melyet PayPal donációval tudsz megvásárolni. Képes a számlap konverzióra, pl. egy Huawei órához készített számlapot tudsz vele konvertálni Xiaomi számlappá.
• Facer Creator Ez egy webes felületen használható számlap készítő app. Elérhető ingyenes verziója korlátozott funkciókkal. De a teljes funkcionalitásért fizetni kell. Telefonon futó verziója elérhető a Play áruházban és az App Store-ban. Ezzel készíthetsz Apple órákhoz számlapot.
• Android Stúdió Ha járatos vagy a programozásban, vagy csak ezen a téren is ki akarod magad próbálni, akkor ez egy jó választás a számodra.

Hogyan fogjunk bele az elkészítésbe és a tervezésbe?

Már ismerjük, hogy milyen grafikai szoftverek és fejlesztői eszközök állnak a rendelkezésünkre. Most már elkezdhetjük a tényleges munkát.

Már említettem, hogy a folyamatot én a Huawei órákon ismertem meg és gyakoroltam be, így ezekre fogok koncentrálni. Ami fontos, hogy elkerüljem a hosszú körmondatokat, vagy óraként, vagy viselhető eszközként fogok hivatkozni minden eszközre, legyen az okosóra, vagy okoskarkötő.

Szoftverből a legtöbb tervező az Adobe Photoshopot használja. Én egy kényelmes ember vagyok és az én eszközöm az Inkscape. A Photoshoppal pixelgrafikus képeket tudunk készíteni, míg az Inkscape-el vektoros képek készíthetők.

Számomra a vektoros megoldás a közelibb.

Inksscape megközelítés:

• Első lépés, hogy létrehozunk néhány réteget:
  • Segédvonalak – opcionális, használhatod a program saját segédvonalait is, ezt csak a szemléltetés miatt készítettem el
  • Háttér – ide kerül a számlap háttérképe
  • Analóg – erre a rétegre kerülnek az analóg óra elemei
  • Digitális – ide a digitális idő és dátum kijelzés elemei kerülnek
  • Widgets – ide kerülnek a kijelezendő adattípusok elemei
  • Export – ez egy segédréteg, amikor egy-egy adatcsoporttal elkészültél, azt áthelyezheted erre a rétegre az exportáláshoz. Az Inkscape-ben tudod exportálni a csak kijelölt részeket.
• Második lépés elkészíteni a számlap adatcsoportjainak a megjelenését
• Harmadik lépés, hogy a szükség szerinti elemeket .PNG formátumban exportálod.
• Az exportálást csoportonkénti mappa struktúrába végzem, beszédes neveket adva az egyes elemeknek +Saját számlap -Háttér -Analóg
  -Digitális -…

Számlap összeállítása az alkalmazásban

Nyissuk meg a Huawei Theme Studio Watch Face lapját. Itt létre kell hozni az óránk specifikációjának megfelelő számlapot. A Plusz ikonra kattintva kiválaszthatjuk, hogy óraszámlapot, okos karkötő számlapot, vagy gyermekóra számlapját készítjük el.

Ezután megadjuk a számlap méretét, amit az óránk specifikációjából megtudunk.

A számlapot a szerkesztő, designer által biztosított erőforrásokkal építhetjük fel.

Erőforrások

1. Single Resource (Egyedi erőforrás)
   1. Mit jelent? Egyetlen képfájlt adsz hozzá egy adott elemként, például egy ikon, háttér vagy egy fix kijelzőelem.
   2. Mikor használd?
      1. Ha statikus elemet szeretnél hozzáadni (pl. logó, díszítő grafika).
      2. Ha egy előre elkészített képet használsz és nincs szükség rétegek kombinálására.
2. Selected Resource (Választható erőforrás)
   1. Mit jelent? Ezzel lehetőséget adsz a felhasználónak, hogy különböző képek közül válasszon (pl. több háttér vagy ikon).
   2. Mikor használd?
      1. Ha a számlap testreszabható lesz a végfelhasználó számára.
      2. Ha több design opciót kínálsz egy adott elemhez (pl. világos és sötét háttér).
3. Combined Resource (Kombinált erőforrás)
   1. Mit jelent?
   Több réteget (képeket vagy egyéb erőforrásokat) kombinálsz egyetlen elemmé.
   1. Mikor használd?
      1. Ha több rétegű elemet hozol létre, például egy óraszámot, amely mögött árnyék vagy fényhatás van.
      2. Ha az óra egyes részei (pl. percszámok és ikonok) egyetlen egységként mozognak.
4. Text (Szöveg)
   1. Mit jelent?
   Egyedi szöveget adhatsz hozzá, amely lehet statikus vagy dinamikus.
   1. Mikor használd?
      1. Ha fix szöveget szeretnél, pl. „HUAWEI” márkajelzést.
      2. Ha egy időjárási vagy dátum információt kell megjeleníteni (dinamikus szövegként).
5. TextTwowild (Kétsoros szöveg)
   1. Mit jelent?
   Ez egy speciális szövegtípus, amely két különböző adatforrásból származó szöveget jelenít meg két sorban.
   1. Mikor használd?
      1. Ha például egy sorban az aktuális hőmérsékletet, a másikban a maximális/minimális hőmérsékletet mutatnád.
      2. Ha dátumformátumokat osztanál két sorra (pl. „2025-03-22” fent, „Szombat” lent).
6. Line Resource (Vonal erőforrás)
   1. Mit jelent?
   Egy vonalat jeleníthetsz meg, amely lehet statikus vagy dinamikusan változó.
   1. Mikor használd?
      1. Ha egy vizuális szeparátort szeretnél a kijelzőn.
      2. Ha például egy akkumulátor töltöttségi szintet ábrázolnál egy változó hosszúságú vonallal.
7. Arc Resource (Íves erőforrás)
   1. Mit jelent?
   Egy körívet jelenít meg, amely dinamikusan változhat.
   1. Mikor használd?
      1. Ha progresszív adatokat szeretnél vizuálisan ábrázolni (pl. lépésszámláló vagy pulzusszám mérés).
      2. Ha egy köríves akkumulátor vagy aktivitásindikátort szeretnél.
8. Hand Resource (Mutató erőforrás)
   1. Mit jelent?
   Ezzel adhatod meg az analóg mutatókat (óra, perc, másodperc).
   1. Mikor használd?
      1. Ha analóg számlapot készítesz.
      2. Ha mozgó elemet szeretnél, például egy iránytű mutatót.
9. Custome Options (Egyéni beállítások)
   1. Mit jelent?
   Ez egy testreszabható beállítás, amely lehetővé teszi, hogy speciális funkciókat hozz létre.
   1. Mikor használd?
      1. Ha egyedi interakciókat vagy beállításokat akarsz hozzáadni (pl. háttérváltás egy érintéssel).
      2. Ha a felhasználó módosíthatja az óra elemeit (pl. színek, betűtípusok, elrendezés).

Mikor melyiket használd?

1. Statikus dizájnelemekhez:
   1. Single Resource (egyszerű képek, ikonok, logók)
   2. Text (állandó szövegek)
2. Testreszabható elemekhez:
   1. Selected Resource (változtatható háttér)
   2. Custome Options (interaktív beállítások)
3. Dinamikus információkhoz:
   1. TextTwowild (kétsoros infók, pl. dátum és időjárás)
   2. Line Resource (akkumulátor vagy lépésszámláló vonalak)
   3. Arc Resource (kör alakú indikátorok)
4. Analóg órához:
   1. Hand Resource (óra-, perc-, másodpercmutatók)
5. Összetett grafikákhoz:
   1. Combined Resource (több réteg egyesítése)

Hamarosan folytatjuk.

Te belevágnál egy saját számlap elkészítésébe?

Érzel magadban annyi kreativitást, vagy kíváncsiságot, hogy elkezd akár a grafikai design tervezést, vagy akár a funkcionális megvalósítást?

Írd le egy hozzászólásban, hogy te mit gondolsz erről a témáról. Mutasd meg nekünk akár egy félkész számlapod design tervét.