mozilla

Revision 382101 of Conferme

  • Slug della versione: Mozilla/Firefox_OS/UX/Building_blocks/Conferme
  • Titolo della versione: Conferme
  • ID versione: 382101
  • Data di creazione
  • Autore: EdoPut
  • Versione corrente?
  • Commento

Contenuto della versione

Una richiesta di conferma chiede all'utente conferma per una scelta, come garantire o annullare i permessi di un'app, o fornisce istruzioni per eseguire un'azione, come richiedere all'utente di riavviare il dispositivo dopo aver cambiato SIM. Vedi la Guida allo sviluppo per informazioni su come implementare queste richieste nella tua app.

Caratteristiche

  • Le richieste di conferma sono modali; occupano l'intero schermo ed è richiesta l'interazione con l'utente per chiuderle.
  • Le richieste di conferma hanno questa struttura:
    • Titolo (facoltativo)
    • Corpo
    • Icona (facoltativo)
    • Un bottone di conferma con testo, che può essere personalizzato nel testo
    • Un bottone annulla facoltativo, che può essere personalizzato nel testo

Aspetto

Ecco alcuni esempi di come devono apparire le richieste di conferma.

Normale

Un elemento {{HTMLElement("h1")}} è usato per dare il titolo "Confirmation" alla richiesta. Il bottone Delete ha come classe "delete" per mostrarlo come richiesto nelle linee guida della GUI.

Con elementi nel corpo

In questo esempio  è stato usato un corpo con immagini  e testo e relativi stili. Al bottone "Action" è stata applicata la Classe "recommend"  per indicare che è il bottone da premere per continuare a svolgere l'azione per cui si chiede conferma all'utente.

Senza titolo

Esattamente come l'esempio precedente ma senza l'elemento{{HTMLElement("h1")}} a creare il titolo della richiesta.

In modalità modifica

Va

Variazioni sul tema

Le varianti possibili sono quelle elencate sopra nella sezione aspetto. Questo schema semplificato ti aiuterà a capire quali sono i componenti di una richiesta di conferma e a vedere che hai il controllo su ciò che apparirà nei tuoi layout e nei contenuti.

Richiesta di permessi

In questo esempio le icone ed il titolo sono usate per identificare l'app che richiede i permessi e che permessi vuole.

Il testo nel corpo pagina deve fornire dettagli su ciò che l'app vuole fare con i permessi ed i dati dell'utente.

Richesta di conferma per azioni

Esempio molto semplice di richiesta di conferma; la richiesta pone una domanda all'utente che deve risponedere, non c'è il titolo.

Richiesta conferma per azione

Un esempio più completo per la conferma di un'azione con titolo ed icona.

 

Interazione

Cancellare messaggi

In questo esempio una richiesta viene fatta all'utente per chiedere se è certo di voler cancellare i messaggi selezionati dalla lista delle email. Toccando il bottone "delete" verrà mostrato il messaggio di richiesta di conferma; i messaggi verranno cancellati soltanto se l'utente tocca il bottone "Delete" nella richiesta di conferma.

Confermare una richiesta di privilegi/permessi

In questo esempio l'utente apre per la la prima volta un'app che richiede i permessi per usare le API di  geolocalizzazione. Poichè l'app richiede questi permessi per funzionare li chiede immediatamente. Quando l'utente tocca il bottone "Don't Allow" ( che nega il permesso all'app di usare i servizi di geolocalizzazione) o "Allow" (che invece concede i permessi) la richiesta viene chiusa e la scelta dell'utente ha effetto

Nota che questo esempio include una checkbox nella richiesta per salvare la scelta dell'utente in modo che non venga fatta la stessa  richiesta in futuro dalla stessa app.

Vedi anche

Sorgente della versione

<p>Una richiesta di conferma chiede all'utente conferma per una scelta, come garantire o annullare i permessi di un'app, o fornisce istruzioni per eseguire un'azione, come richiedere all'utente di riavviare il dispositivo dopo aver cambiato SIM. Vedi la <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Guida allo sviluppo</a> per informazioni su come implementare queste richieste nella tua app.</p>
<h2 id="Caratteristiche">Caratteristiche</h2>
<ul>
  <li>Le richieste di conferma sono modali; occupano l'intero schermo ed è richiesta l'interazione con l'utente per chiuderle.</li>
  <li>Le richieste di conferma hanno questa struttura:
    <ul>
      <li>Titolo (facoltativo)</li>
      <li>Corpo</li>
      <li>Icona (facoltativo)</li>
      <li>Un bottone di conferma con testo, che può essere personalizzato nel testo</li>
      <li>Un bottone annulla facoltativo, che può essere personalizzato nel testo</li>
    </ul>
  </li>
</ul>
<h2 id="Aspetto">Aspetto</h2>
<p>Ecco alcuni esempi di come devono apparire le richieste di conferma.</p>
<table class="fxosScreenGrid">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
        <h3 id="Normale">Normale</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/4805/default.png" /></p>
        <p>Un elemento {{HTMLElement("h1")}} è usato per dare il titolo "Confirmation" alla richiesta. Il <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">bottone</a> Delete ha come classe "delete" per mostrarlo come richiesto nelle linee guida della GUI.</p>
      </td>
      <td style="vertical-align: top;">
        <h3 id="Con_elementi_nel_corpo">Con elementi nel corpo</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/4811/with-content.png" /></p>
        <p>In questo esempio&nbsp; è stato usato un corpo con immagini&nbsp; e testo e relativi stili. Al bottone "Action" è stata applicata la Classe "recommend"&nbsp; per indicare che è il bottone da premere per continuare a svolgere l'azione per cui si chiede conferma all'utente.</p>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">
        <h3 id="Senza_titolo">Senza titolo</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/4807/confirm-without-title.png" /></p>
        <p>Esattamente come l'esempio precedente ma senza l'elemento{{HTMLElement("h1")}} a creare il titolo della richiesta.</p>
      </td>
      <td style="vertical-align: top;">
        <h3 id="In_modalit.C3.A0_modifica">In modalità modifica</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/4809/edit-mode.png" style="width: 320px; height: 480px;" />Va</p>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="Variazioni_sul_tema">Variazioni sul tema</h2>
<p>Le varianti possibili sono quelle elencate sopra nella sezione aspetto. Questo schema semplificato ti aiuterà a capire quali sono i componenti di una richiesta di conferma e a vedere che hai il controllo su ciò che apparirà nei tuoi layout e nei contenuti.</p>
<table class="fxosScreenGrid">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
        <h3 id="Richiesta_di_permessi">Richiesta di permessi</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/4813/confirm-prompt-permissions.png" style="width: 376px; height: 578px;" /></p>
        <p>In questo esempio le icone ed il titolo sono usate per identificare l'app che richiede i permessi e che permessi vuole.</p>
        <p>Il testo nel corpo pagina deve fornire dettagli su ciò che l'app vuole fare con i permessi ed i dati dell'utente.</p>
      </td>
      <td style="vertical-align: top;">
        <h3 id="Richesta_di_conferma_per_azioni">Richesta di conferma per azioni</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/4819/confirm-prompt-action-confirm.png" style="width: 327px; height: 578px;" /></p>
        <p>Esempio molto semplice di richiesta di conferma; la richiesta pone una domanda all'utente che deve risponedere, non c'è il titolo.</p>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;">
        <h3 id="Action_confirmation_prompt">Richiesta conferma per azione</h3>
        <p><img alt="" src="https://mdn.mozillademos.org/files/4817/confirm-prompt-action-confirm-2.png" style="width: 329px; height: 578px;" /></p>
        <p>Un esempio più completo per la conferma di un'azione con titolo ed icona.</p>
      </td>
      <td style="vertical-align: top;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Interaction">Interazione</h2>
<h4 id="Deleting_messages">Cancellare messaggi</h4>
<p>In questo esempio una richiesta viene fatta all'utente per chiedere se è certo di voler cancellare i messaggi selezionati dalla lista delle email. Toccando il bottone "delete" verrà mostrato il messaggio di richiesta di conferma; i messaggi verranno cancellati soltanto se l'utente tocca il bottone "Delete" nella richiesta di conferma.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/4821/confirm-delete-messages.png" style="width: 739px; height: 1200px;" /></p>
<h3 id="Confirming_a_permission_request">Confermare una richiesta di privilegi/permessi</h3>
<p>In questo esempio l'utente apre per la la prima volta un'app che richiede i permessi per usare le API di&nbsp; <a href="/en-US/docs/Using_geolocation" title="/en-US/docs/Using_geolocation">geolocalizzazione.</a> Poichè l'app richiede questi permessi per funzionare li chiede immediatamente. Quando l'utente tocca il bottone "Don't Allow" ( che nega il permesso all'app di usare i servizi di geolocalizzazione) o "Allow" (che invece concede i permessi) la richiesta viene chiusa e la scelta dell'utente ha effetto</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/4823/confirm-permission.png" />Nota che questo esempio include una <em>checkbox</em> nella richiesta per salvare la scelta dell'utente in modo che non venga fatta la stessa&nbsp; richiesta in futuro dalla stessa app.</p>
<h2 id="See_also">Vedi anche</h2>
<ul>
  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Guida allo sviluppo delle richieste di conferma</a></li>
  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Eseperienza utente in Firefox OS</a></li>
</ul>
Ripristina questa versione