blob: 5e1bac0d8299f71f2e4c6ccb3429c864f140cd5d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
---
title: Conferme
slug: Archive/B2G_OS/UX/Building_blocks/Conferme
translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Confirmation
---
<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 è 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.</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à_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="Richiesta_conferma_per_azione">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;"> </td>
</tr>
</tbody>
</table>
<h2 id="Interazione">Interazione</h2>
<h4 id="Cancellare_messaggi">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="Confermare_una_richiesta_di_privilegipermessi">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 <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 richiesta in futuro dalla stessa app.</p>
<h2 id="Vedi_anche">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>
|
