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.

Az egyedi okosóra számlapok készítése egy igazán kreatív és izgalmas folyamat, amely ötvözi a dizájnt, a funkcionalitást és a technológiai tudást. Ebben a cikksorozatban lépésről lépésre végigvesszük az alapoktól a profi megoldásokig, kezdve az óra képességeinek megismerésével és a tervezéssel.

A számlap készítés nagyon sok összetevőből áll. Most kezdjük az alapokkal és majd a folytatásokban kifejtek mindent részletesen is. Az első okosórám egy Huawei Watch volt. Amikor megkaptam, rögtön felmerült bennem az igény egy saját, egyedi számlapra.

A store-ban rengeteg szebbnél-szebb számlapot találtam. Ingyeneseket és megvásárolhatókat is. Ezekkel csak annyi problémám volt, hogy nem én voltam egyik sem. Bármennyire igényesek voltak a számlapok, nem tükrözték az egyéniségemet.

Miért érdemes saját számlapot készíteni?

Sok okosóra számos előre telepített számlappal érkezik, de ezek gyakran nem elégítik ki minden felhasználó egyedi igényeit. Az egyedi számlapok lehetőséget adnak arra, hogy:

• Saját stílusodhoz igazítsd az órád megjelenését
• Csak a számodra fontos információkat jelenítsd meg
• Különleges animációkat, interaktív elemeket adj hozzá
• Saját logóval vagy személyes dizájnnal láss el egy számlapot

Hogyan fogjunk bele az okosóra számlap elkészítésébe?

A legfontosabb dolog, az óra típusa és képességei. A képességek alatt a megjeleníthető adattípusokat értjük. A terminológia szerint minden ami mérhető, megjeleníthető, az egy-egy adattípushoz van hozzárendelve.

Mivel az első okosórám egy Huawei Watch volt, így az egész folyamatot erre építve fogom bemutatni. Az Apple óráira nem térnék ki, mert a zárt rendszer miatt, azokra a számlap készítés nem olyan egyszerű, mint az Android bázisú órákra.

Ebből következik az első és legfontosabb kérdés:

• Milyen információkat szeretnénk látni a számlapon?

Ne akarjunk túl sok mindent kiíratni, mert a számlap zsúfolt és átláthatatlan lesz. A káosz elkerülhetetlen ha sok információt szeretnél megjeleníteni. Illetve minél több a megjelenített adat, annál kisebbeknek kell lenni a számoknak, feliratoknak és a felületi elemeknek. Ez pedig könnyen azt eredményezi, hogy nagyító kell ahhoz, hogy el tudd olvasni, mi is lett éppen kiírva.

Milyen elengedhetetlen adattípusok vannak, amiknek feltétlenül meg kell jelenni?

• Idő és dátum. Óráról van szó, így egy kötelező elem. Ha nem jelenítesz meg idő adattípust, akkor a szoftver nem engedi elmenteni az elkészült számlapot.
• Lépésszám. Mivel az óra velünk mozog, így ez egy logikus választás.
• Szívritmus. A szívünk a legfontosabb! Mindig figyelni kell rá. A szívritmust én 3 részre szoktam bontani. Pillanatnyi, napi legalacsonyabb és napi legmagasabb érték.
• Időjárás. Ez két elemből épül fel. Szöveges vagy ikon formában megjelenített időjárási viszony. Szöveges formában megjelenített hőmérséklet. A hőmérséklet kijelzést, a szívritmus mintájára, 3 részre lehet bontani. Pillanatnyi, napi legalacsonyabb és napi legmagasabb hőmérséklet.
• Töltöttség.

Opcionális elemek:

• Tengerszint feletti magasság.
• Légnyomás.
• Páratartalom.
• Véroxigén szint.
• …

Ezeken kívül még rengeteg megjeleníthető adattípus van. Ezeket az óra, vagy a tervező szoftver dokumentációja tartalmazza és részletesen tárgyalja a működésüket.

Huawei Watch Adattípusok

Akkor vágjunk bele a tervezésbe

Mi kell a tervezéshez?

Milyen eszközökre és szoftverekre van szükség?

Az egyedi számlapkészítéshez szükséged lesz néhány alapvető szoftverre és eszközre:

• Kép- és vektorgrafikai szerkesztőprogramok:
  • Fizetős lehetőségek: Adobe Photoshop, Adobe Illustrator, Affinity Designer
  • Ingyenes alternatívák: GIMP, Krita (pixelgrafika), Inkscape (vektorgrafika), Figma
• Speciális számlapkészítő programok:
  • Watch Face Studio (Samsung órákhoz)
  • WatchMaker (Android és iOS támogatás)
  • Facer (cross-platform megoldás)
• Számítógép vagy okostelefon, ahol a szerkesztést végzed
• Az adott okosóra gyártójának fejlesztői eszközei (ha szükséges)

A legfontosabb a képzelőerő és a kreativitás. Enélkül nem fog menni.

Vegyél elő papírt és ceruzát, ha analóg vagy, a digitálisak pedig a tabletjük rajzprogramját és digitális ceruzáját. Képzeljük el a számlapot, azt, hogy mit és hol szeretnénk látni. Ezt rajzoljuk le nagy vonalakban. Még nem kell a design elemekkel foglalkozni! Egyelőre csak egy vázlatot rajzoljunk a számlapról.

Ezt a vázlatot finomítsuk, javítsuk, hogy a számunkra legmegfelelőbb legyen. Figyeljük meg a felületi elemek elhelyezkedését és azokat priorizáljuk. A legfontosabb elemek kapjanak egy központi, erőteljesebb megjelenést.

Képzeljük el a számlapot az órán és vizualizáljuk, hogy minden ott van-e, ahol lennie kell. Ha ránézünk az órára, egyből azt lássuk, amire éppen kíváncsiak vagyunk és ne kelljen keresgélni, hogy „Ezt most hova is raktam?”.

Második lépés a dizájn kialakítása

Ha jól rajzolsz, akkor ezt is kezdheted a számodra kezelhetőbb analóg, vagy digitális környezetben.

Itt az elsődleges és kulcsfontosságú momentum a képzelőerő. Látnod kell, hogy mit szeretnél, hogy hogyan nézzen ki a számlap. Milyen grafikai elemeket szeretnél a különféle adattípusok elkülönítéséhez, vagy kiemeléséhez. Milyen megjelenést szeretnél? Egy egyszerű és letisztult felületet, vagy valamilyen robusztus, sportos megjelenést, esetleg valamilyen futurisztikus dizájnt.

Vagy esetleg a kedvenc filmed, vagy sorozatod motívumaira épülő kialakítást szeretnél látni. Egy ilyen esetben fontos a legalitás és az esetleges jogdíj fizetési kötelezettség. Tiszteld meg a kedvenc filmedet, sorozatodat azzal, hogy nem lépsz át egy határt! Ne a már mások, a filmkészítők által elkészített grafikai elemeket használd, hanem azokat rajzold meg magadnak.

Elkészült a dizájn, mi jön most?

Most elő kell vennünk egy grafikai programot és belefogni a megvalósításba.

Az ilyen szoftverekkel Dunát lehet rekeszteni. A legismertebbek az Adobe termékei. Ezeknek az ára igen magas, de cserébe professzionális eszközöket kapunk.

– Adobe Photoshop, ha pixelgrafikus megvalósításban gondolkozol.

– Adobe Illustrator, ha a vektoros utat szeretnéd követni.

Ezeknek az ellenpárja a Corel termékei.

– CorelDRAW a vektoros vonal.

– Corel PAINTER a pixeles képekhez. De ha megelégszel egy korlátozott képességű szoftverrel, akkor használhatod a CorelDRAW csomag részét képező Corel PHOTO-PAINT-et is.

De nem kell rögtön a pénztárcánkba nyúlni. A barátkozás, a próbák idejére kezdhetjük valamilyen ingyenes szoftverrel is. Ha pedig beválik az ingyenes megoldás, akkor akár maradhatsz is ennél.

Ingyenes szoftverek:

– GIMP. Eze pixelgrafikus képek készítésére alkalmas. Nagyon felhasználóbarát és a GIMPShop változattal, leutánozható a Photoshop felülete és működési mechanizmusa.

– Inkscape. Ez egy nagyon impresszív és professzionális vektorgrafikus program az ingyenessége ellenére. Az elkészült műveket mentheted vektoros SVG formátumba, vagy exportálhatod a népszerű pixeles formátumok valamelyikébe.

Ha nem akarsz szoftvert telepíteni, akkor a Canva a barátod. Ez egy böngészőben futó AI támogatású rajzprogram. Elérhető ingyenes változatban is. De havi $15 áron már meg kapsz minden eszközt, minden tudását kihasználhatod a szoftvernek.

Meg történtek az előkészületek és a folytatásban már a konkrét lépéseket fogom majd tárgyalni. Köszönöm az eddigi figyelmedet és kövesd az oldalam, hogy ne maradj le a számlaptervezés folytatásáról.

Te próbáltad már a számlapkészítést?

Neked milyen ötleteid vannak egyedi számlapok készítéséhez? Milyen információkat tartasz elengedhetetlennek? Oszd meg tapasztalataidat kommentben vagy írj nekünk!