mozilla

Revision 382077 of Conferme

  • Slug della versione: Mozilla/Firefox_OS/UX/Building_blocks/Conferme
  • Titolo della versione: Conferme
  • ID versione: 382077
  • Data di creazione
  • Autore: EdoPut
  • Versione corrente? No
  • 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

This simple action confirmation prompt is asking a simple question, and doesn't have a title.

Richiesta conferma per azione

This slightly more complex action confirmation prompt adds an icon and a title.

 

Interaction

Deleting messages

In this example, a confirmation prompt is used to ask the user if they're certain that they want to delete the selected messages from a list of emails. Tapping the "Delete" button displays the prompt; deletion only occurs if the user taps the "Delete" button on the confirmation prompt.

Confirming a permission request

In this example, the user opens for the first time an app that needs permission to use the geolocation service. Since the app requires the permission in order to function, it immediately asks for permission to use the location service. When the user dismisses the prompt by tapping either "Don't Allow" (which denies permission to use geolocation) or "Allow" (which grants permission), the confirmation prompt is dismissed and the user's choice takes effect.

Note that this sample includes a checkbox in the confirmation prompt to let the user's selection be saved so that the user doesn't get asked for permission again in the future.

See also

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>This simple action confirmation prompt is asking a simple question, and doesn't have a title.</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>This slightly more complex action confirmation prompt adds an icon and a title.</p>
      </td>
      <td style="vertical-align: top;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Interaction">Interaction</h2>
<h4 id="Deleting_messages">Deleting messages</h4>
<p>In this example, a confirmation prompt is used to ask the user if they're certain that they want to delete the selected messages from a list of emails. Tapping the "Delete" button displays the prompt; deletion only occurs if the user taps the "Delete" button on the confirmation prompt.</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">Confirming a permission request</h3>
<p>In this example, the user opens for the first time an app that needs permission to use the <a href="/en-US/docs/Using_geolocation" title="/en-US/docs/Using_geolocation">geolocation</a> service. Since the app requires the permission in order to function, it immediately asks for permission to use the location service. When the user dismisses the prompt by tapping either "Don't Allow" (which denies permission to use geolocation) or "Allow" (which grants permission), the confirmation prompt is dismissed and the user's choice takes effect.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/4823/confirm-permission.png" /></p>
<p>Note that this sample includes a checkbox in the confirmation prompt to let the user's selection be saved so that the user doesn't get asked for permission again in the future.</p>
<h2 id="See_also">See also</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">Confirmation coding guide</a></li>
  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS user experience</a></li>
</ul>
Ripristina questa versione