FőoldalHR PortálReszponzivitás

HR Portál Reszponzivitás

A HR Portál reszponzív tervezési alapelvei és az Audi corporate designba illeszkedő megjelenés minden eszközön.

HR Portál Breakpoint-ok

A HR Portál az alábbi breakpoint-okat használja, amelyek igazodnak az Audi általános dizájn irányelveihez:

Mobile

320px - 767px

Tablet

768px - 1023px

Desktop

1024px - 1279px

Large Desktop

1280px és fölötte

// HR Portál - Tailwind CSS breakpoints example
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- Mobil: 1 oszlop, Tablet: 2 oszlop, Desktop: 3 oszlop, Large Desktop: 4 oszlop -->
</div>

HR-specifikus Komponensek Viselkedése

A HR Portál egyes komponensei egyedi módon alkalmazkodnak a különböző képernyőméretekhez, hogy a felhasználói élmény mindig optimális legyen.

Alkalmazott adatlap

Mobil: Adatok egymás alatt, profilkép kicsinyítve

Tablet: Profilkép és alapadatok egymás mellett, részletes adatok alatta

Desktop: Két oszlopos elrendezés, bal oldalon profilkép és kapcsolati adatok, jobb oldalon részletes információk

Munkaidő nyilvántartás

Mobil: Lista nézet, napi összesítéssel, részletek alatt felnyíló panelben

Tablet: Kombinált lista és egyszerűsített naptár nézet

Desktop: Teljes naptár nézet havi bontásban, jobb oldali részletező panellel

HR Portál

Példa Márton

UX designer

Adatlap megtekintése

HR Portál

HR Űrlapok Reszponzivitása

A HR portálon található űrlapok és adminisztrációs felületek optimalizáltak a különböző eszközökön való használathoz.

Űrlap tervezési alapelvek

Mobil eszközön 1 oszlopos elrendezés függetlenül az űrlap méretétől
Tablet/Desktop nézetben maximum 2 oszlop használata az űrlapoknál
A legfontosabb elemek mindig a látható területen, görgetés nélkül elérhetők
Minimális input méret mobilon 44px magasság
Több lépéses űrlapoknál mobil eszközön progresszív megjelenítés

Kód példa űrlap elrendezésre

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div class="space-y-4">
    <label class="block text-sm font-medium text-[#333333]">Keresztnév</label>
    <input type="text" class="w-full px-4 h-11 rounded-md border border-[#E0E0E0]">
  </div>
  <div class="space-y-4">
    <label class="block text-sm font-medium text-[#333333]">Vezetéknév</label>
    <input type="text" class="w-full px-4 h-11 rounded-md border border-[#E0E0E0]">
  </div>
</div>

Szabadság igénylési űrlap

Mobil nézet

Igénylő neve

Kezdő dátum

Záró dátum

Szabadság típusa

Megjegyzés

Igénylés beküldése

Desktop nézet

Igénylő neve

Szabadság típusa

Kezdő dátum

Záró dátum

Megjegyzés

Igénylés beküldése

Navigáció Átalakulása

A HR Portál navigációs elemei eltérő módon jelennek meg különböző képernyőméreteken a legjobb felhasználói élmény érdekében.

Mobil navigáció

HR Portál

Mobil eszközökön a fő navigáció egy hamburger menü mögé kerül, amely kattintásra nyílik le. A lábléc menü egyszerűsített formában jelenik meg.

Főbb jellemzők:

Hamburger menü a fejlécben
Egyszerűsített alsó tab bar legfontosabb funkciókkal
Teljes képernyős menü megnyitáskor
Legutóbb használt elemek kiemelése

Desktop navigáció

HR Portál

FőoldalAlkalmazottakSzabadságBeállítások

Asztali és nagyképernyős nézetben a teljes horizontális főmenü jelenik meg, almenükkel és gyors hozzáférési lehetőségekkel.

Főbb jellemzők:

Horizontális főmenü
Lenyíló almenük
Oldalsáv a részletes navigációhoz
Állandóan elérhető keresési funkció

<nav class="hidden md:flex space-x-4">
  <NuxtLink to="/hr" class="text-white hover:text-opacity-80">Főoldal</NuxtLink>
  <NuxtLink to="/hr/employees" class="text-white hover:text-opacity-80">Alkalmazottak</NuxtLink>
  <NuxtLink to="/hr/leave" class="text-white hover:text-opacity-80">Szabadság</NuxtLink>
  <NuxtLink to="/hr/settings" class="text-white hover:text-opacity-80">Beállítások</NuxtLink>
</nav>
<button class="md:hidden text-white">
  <i class="fa-solid fa-bars"></i>
</button>