El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Components Comuns de la Interfície d'Usuari

Següent ►
►

En aquest tema, explorarem els components més comuns que es troben en les interfícies d'usuari (UI). Aquests components són elements bàsics que ajuden a crear una experiència d'usuari coherent i intuïtiva. Comprendre com utilitzar-los correctament és fonamental per a qualsevol dissenyador o desenvolupador d'interfícies d'usuari.

  1. Botons

Descripció

  • Els botons són elements interactius que permeten als usuaris realitzar accions.
  • Solen estar etiquetats amb text que descriu l'acció que es durà a terme.

Exemples

<button>Enviar</button>
<button>Cancel·lar</button>

Consells

  • Utilitza colors i estils que facin que els botons siguin fàcils de veure i identificar.
  • Assegura't que el text del botó sigui clar i concís.

  1. Camps de Text

Descripció

  • Els camps de text permeten als usuaris introduir dades.
  • S'utilitzen en formularis per recollir informació com noms, correus electrònics, etc.

Exemples

<input type="text" placeholder="Nom">
<input type="email" placeholder="Correu electrònic">

Consells

  • Proporciona etiquetes clares i suggeriments (placeholders) per guiar l'usuari.
  • Considera l'ús de validació en temps real per millorar l'experiència de l'usuari.

  1. Menús de Navegació

Descripció

  • Els menús de navegació ajuden els usuaris a moure's per l'aplicació o lloc web.
  • Poden ser horitzontals o verticals, desplegables o fixos.

Exemples

<nav>
  <ul>
    <li><a href="#home">Inici</a></li>
    <li><a href="#about">Sobre Nosaltres</a></li>
    <li><a href="#contact">Contacte</a></li>
  </ul>
</nav>

Consells

  • Mantingues la navegació senzilla i fàcil d'entendre.
  • Utilitza indicadors visuals per mostrar la pàgina actual.

  1. Quadres de Diàleg

Descripció

  • Els quadres de diàleg són finestres emergents que proporcionen informació o demanen confirmació a l'usuari.
  • S'utilitzen per alertes, confirmacions o per recollir informació addicional.

Exemples

<div class="modal">
  <p>Estàs segur que vols continuar?</p>
  <button>Acceptar</button>
  <button>Cancel·lar</button>
</div>

Consells

  • Evita utilitzar quadres de diàleg de manera excessiva, ja que poden interrompre l'experiència de l'usuari.
  • Assegura't que el missatge sigui clar i que les opcions siguin fàcils d'entendre.

  1. Llistes i Taules

Descripció

  • Les llistes i taules s'utilitzen per mostrar informació de manera organitzada.
  • Les llistes poden ser ordenades o desordenades, mentre que les taules són ideals per a dades tabulades.

Exemples

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

<table>
  <tr>
    <th>Nom</th>
    <th>Edat</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>28</td>
  </tr>
</table>

Consells

  • Utilitza llistes per a elements que no necessiten una estructura complexa.
  • Les taules han de ser utilitzades per a dades que requereixen comparació o estructura.

Exercici Pràctic

Objectiu: Crear una pàgina web senzilla que inclogui els components comuns de la interfície d'usuari.

Instruccions

  1. Crea un document HTML bàsic.
  2. Afegeix un menú de navegació amb tres enllaços.
  3. Inclou un formulari amb camps de text per al nom i el correu electrònic, i un botó d'enviament.
  4. Afegeix una llista desordenada amb tres elements.
  5. Crea un quadre de diàleg senzill que es mostri quan es fa clic en un botó.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Components UI</title>
    <style>
        .modal { display: none; }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">Inici</a></li>
            <li><a href="#about">Sobre Nosaltres</a></li>
            <li><a href="#contact">Contacte</a></li>
        </ul>
    </nav>

    <form>
        <input type="text" placeholder="Nom">
        <input type="email" placeholder="Correu electrònic">
        <button type="submit">Enviar</button>
    </form>

    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>

    <button onclick="document.querySelector('.modal').style.display='block'">Mostra Diàleg</button>

    <div class="modal">
        <p>Estàs segur que vols continuar?</p>
        <button onclick="document.querySelector('.modal').style.display='none'">Acceptar</button>
        <button onclick="document.querySelector('.modal').style.display='none'">Cancel·lar</button>
    </div>
</body>
</html>

Conclusió

Els components comuns de la interfície d'usuari són fonamentals per crear aplicacions i llocs web intuïtius i fàcils d'utilitzar. Comprendre com i quan utilitzar aquests components millorarà significativament la qualitat del teu disseny d'interfícies. En el següent tema, explorarem els patrons de disseny en la interfície d'usuari, que ens ajudaran a aplicar aquests components de manera coherent i efectiva.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats