Questa pagina è stata tradotta dall'API Cloud Translation.

Guida allo stile dell'interfaccia utente per i componenti aggiuntivi Editor

Componenti aggiuntivi di Editor creare interfacce utente (menu, barre laterali e finestre di dialogo) utilizzando Apps Script Servizio HTML. Poiché le interfacce sono sviluppati in HTML e CSS, pertanto sono altamente personalizzabili. Tuttavia, quando per sviluppare l'interfaccia dei componenti aggiuntivi, dovresti progettarla in modo da offrire un'esperienza utente un'esperienza senza intervento manuale.

I migliori componenti aggiuntivi estendono ogni editor in modo naturale utilizzando controlli e i comportamenti dei modelli, Quando crei un nuovo componente aggiuntivo:

Utilizza il pacchetto CSS dei componenti aggiuntivi nelle Pagine di servizio HTML.
In caso di dubbi sul design, trova una finestra di dialogo o una barra laterale simili nell'editor e o fare riferimento a uno guida rapida dei componenti aggiuntivi.
Segui questa guida di stile per creare un'esperienza fluida.

Testo

Nome componente aggiuntivo

Devi impostare il nome del componente aggiuntivo quando pubblichi li annotino. Il nome viene visualizzato in molti punti, ad esempio nel negozio dei componenti aggiuntivi e all'interno dei menu.

Usa le iniziali maiuscole.
Evita la punteggiatura, in particolare le parentesi, a meno che non facciano parte del tuo brand.
Deve essere breve: il numero massimo di caratteri è 30. I nomi lunghi possono essere troncato automaticamente.
Non includere il nome del prodotto Google a cui è destinato il componente aggiuntivo (oppure utilizza parola Google).
Non inserire le informazioni sulla versione.
Assicurati che il nome pubblicato del componente aggiuntivo corrisponda al nome file della progetto di script. Il nome del progetto viene visualizzato nella finestra di dialogo di autorizzazione.

Azione sconsigliata	Cosa fare

Stile di scrittura

Non dovrebbe essere necessario scrivere molto. La maggior parte delle azioni dovrebbe essere chiarita iconografia, layout ed etichette brevi. Se trovi una parte del componente aggiuntivo una spiegazione più esaustiva di quella fornita dalle etichette brevi, è la creare una pagina web separata con la descrizione del componente aggiuntivo e un link al componente aggiuntivo.

Durante la scrittura del testo dell'interfaccia utente:

Usa la maiuscola a inizio frase (soprattutto per pulsanti, etichette e voci di menu).
Preferisco un testo breve e semplice senza gergo o acronimi.

Azione sconsigliata	Cosa fare

Suggerimento post-installazione

Il suggerimento post-installazione viene visualizzato subito dopo che un utente installa il componente aggiuntivo. vengono visualizzati nella Guida. Hai un paio di frasi per aiutare gli utenti a iniziare rapidamente.

Inizia con una parola d'azione.
Descrivi il primo passaggio per l'utilizzo del componente aggiuntivo.
Se hai un'interfaccia utente principale, ad esempio una barra laterale, spiega come aprirla.
Non promuovere qui il tuo componente aggiuntivo: è già installato.

Azione sconsigliata	Cosa fare

Voci di menu

A differenza dei normali progetti Apps Script, i componenti aggiuntivi non vengono visualizzati nell'editor di script o gestore di script; gli utenti non possono eseguire direttamente script dei componenti aggiuntivi. Invece, ogni il componente aggiuntivo verrà inserito nel menu dei componenti aggiuntivi. Il menu (e possibilmente una finestra di dialogo o barra laterale) gli utenti interagiscono con il componente aggiuntivo.

Il menu è una parte fondamentale del modo in cui gli utenti controllano il tuo componente aggiuntivo, quindi progetta il suo struttura e testo con attenzione.
Evita voci di menu che ripetono semplicemente il nome del componente aggiuntivo. Inizia invece con un parola chiave.
Se la voce di menu principale inizia un flusso di lavoro e non esiste un solo verbo che descrive cosa fa, chiamalo "Start". Questo pattern viene utilizzato Guida rapida ai componenti aggiuntivi di Documenti.
A meno che il menu non contenga più di sei voci, cerca di non utilizzare i sottomenu. Possono esigente e difficile da selezionare.
Descrivi l'attività, non il componente dell'interfaccia utente visualizzato nella voce di menu.

Azione sconsigliata	Cosa fare

Messaggi di errore

Quando si verifica un problema, è importante utilizzare un linguaggio semplice. Spiega la problema dal punto di vista dell'utente e suggerisci come risolverlo.

Non consentire all'utente di vedere eventuali eccezioni generate dal codice. Utilizza invece try...catch per intercettare le eccezioni e visualizzare un messaggio di errore intuitivo con testo incorporato in stile Classe error del CSS del componente aggiuntivo o una finestra di dialogo di avviso.
Prima della pubblicazione, verifica che il componente aggiuntivo non registri le informazioni di debug in la console JavaScript; utilizzare Logging di Stackdriver .

Azione sconsigliata	Cosa fare

Contenuti Help

Il menu di ogni componente aggiuntivo include una finestra di dialogo automatica per la guida. Se fornisci un URL della guida al momento della pubblicazione, la sezione "Scopri di più" rimanda a quella pagina. A meno che il tuo il componente aggiuntivo si spiega da solo, fornisci una pagina che spieghi come utilizzarlo.

Se possibile, mostra le istruzioni sotto forma di elenco puntato o numerato. Utenti con camminata fino al risultato finale, con chiari riferimenti agli elementi UI denominati.
Assicurati che le istruzioni spieghino chiaramente eventuali requisiti, ad esempio la configurazione un foglio di lavoro in un certo modo.
Non esitare a inserire link ai contenuti della guida dall'interfaccia utente principale. Se il componente aggiuntivo crea un nuovo documento, puoi visualizzare le istruzioni anche il corpo del documento.

Interfacce utente personalizzate

Alcuni semplici componenti aggiuntivi di Editor possono essere controllati interamente dal loro menu, ma la maggior parte mostrare una barra laterale o una finestra di dialogo con contenuti.

Le barre laterali sono ideali per gli strumenti persistenti che è probabile che le persone utilizzino ripetutamente facendo riferimento ai contenuti del documento o del foglio di lavoro.
Le finestre di dialogo sono ideali per strumenti monouso, pagine di impostazioni e messaggi importanti.

Testo UI

In qualsiasi finestra di dialogo o barra laterale, supponi che le persone leggano solo le etichette del titolo e del pulsante. Riescono a comprendere la funzione della tua interfaccia e a fare una buona scelta?

Usa etichette di titoli e pulsanti indipendenti.
Evita lunghi blocchi di testo descrittivo.

Finestre di dialogo

Le finestre di dialogo sono ideali per gli strumenti che le persone usano una volta e poi vanno avanti. Ad esempio, se consente di inserire un'immagine, potresti visualizzare una finestra di dialogo con cosa inserire e quindi chiudi la finestra di dialogo quando viene inserito l'immagine. Le finestre di dialogo sono è utile anche per visualizzare le impostazioni del componente aggiuntivo o per comunicare un messaggio importante.

Non aprire una finestra di dialogo (incluso un avviso o prompt) da un'altra finestra di dialogo, solo a visualizzare una scheda alla volta.
Per il titolo della finestra di dialogo, utilizza una parola o una breve frase, che inizi con il parola importante.
Le etichette dei pulsanti devono essere correlate al titolo della finestra di dialogo.
Preferisci due pulsanti, in genere un'azione principale e "Annulla". Per casi speciali che richiedono un terzo pulsante, considera l'angolo in basso a destra.
Posiziona i pulsanti nell'angolo in basso a sinistra della finestra di dialogo. Il pulsante principale blu dovrebbe essere posizionato a sinistra, con eventuali pulsanti secondari grigi a destra.

Azione sconsigliata	Cosa fare

Barre laterali

Le barre laterali consentono di consultare documenti, fogli di lavoro, presentazioni o il formato mentre fai delle scelte. Inoltre, consentono agli utenti di utilizzare il tuo componente aggiuntivo ripetutamente. Ogni volta che viene aperta una nuova barra laterale, qualsiasi barra laterale precedente si chiude automaticamente. Sono ideali per le modalità temporanee che l'utente chiude quando hanno terminato.

Gli utenti potrebbero avere altri componenti aggiuntivi con le proprie barre laterali. Se due componenti aggiuntivi tentano aprire le barre laterali contemporaneamente, ne viene visualizzata solo una.
Non mostrare una barra laterale o una finestra di dialogo alla prima apertura di un documento.
Solo componenti aggiuntivi che operano in AuthMode.FULL puoi aprire le barre laterali o le finestre di dialogo. Puoi utilizzare una voce del menu per aprire barra laterale, poiché in questo modo viene chiesto all'utente di fornire un'autorizzazione completa.

Controlli

Gli ottimi UI dei componenti aggiuntivi lasciano spazio ai controlli. Margini adeguati la spaziatura interna può essere molto utile, mentre controlli densi possono sembrare un'impresa ardua. Quando prendere in prestito un layout dall'editor. Ad esempio, esamina i contenuti esistenti finestre di dialogo in Documenti Google, ad esempio File > Impostazione pagina, quando ne crei uno personalizzato.

La documentazione per il pacchetto CSS dei componenti aggiuntivi fornisce un markup di esempio per ciascuno dei tipi di controlli descritti di seguito.

Pulsanti

Utilizza i pulsanti per controllare le azioni principali dell'interfaccia utente anziché la semplice link o altri elementi.

Evita di visualizzare più di un pulsante blu, rosso o verde alla volta. Grigio i pulsanti possono essere visualizzati ripetutamente.
La maggior parte delle etichette dei pulsanti dovrebbe usare la maiuscola a inizio frase e iniziare con un verbo. di colore rosso I pulsanti, di solito per le azioni di creazione, devono essere in maiuscolo.

Azione sconsigliata	Cosa fare

Caselle di controllo e pulsanti di opzione

Utilizza le caselle di controllo quando le persone possono selezionare più opzioni o nessuna opzione. Utilizza le funzionalità di (o un menu di selezione) quando è necessario selezionare una sola opzione.

Non modificare le caselle di controllo il comportamento dei pulsanti di opzione.
Non fare nulla subito dopo aver controllato. Le persone commettono errori. Attendi finché gli utenti non fanno clic su un pulsante per confermare le loro scelte.

Seleziona menu

Gli elementi selezionati sono un ottimo modo per offrire un breve elenco di alternative.

Ordina le opzioni in ordine alfabetico o in base a uno schema logico che tutti gli utenti possono capire (ad esempio i giorni della settimana, a partire da domenica).
Se l'elenco si allunga troppo, valuta la possibilità di utilizzare un altro controllo. Ad esempio: potresti visualizzare un elenco scorrevole per dare al menu più spazio e renderlo la navigazione.

Aree di testo

Se devi digitare più di una parola, utilizza un'area di testo.

Fai in modo che le aree di testo abbiano un'altezza di almeno due righe in modo che siano più facili da usare e da evitare che hanno l'aspetto di campi di testo.
Posiziona le etichette sopra.

Campi di testo

Utilizza i campi di testo se le persone devono digitare solo una o due parole.

La larghezza di un campo di testo dovrebbe suggerire il testo digitato dagli utenti.
Evita di utilizzare testo segnaposto come etichetta, perché scompare nello stato attivo. Il testo segnaposto è utile per fornire esempi o dettagli aggiuntivi.
Posiziona le etichette nella parte superiore, ma non esitare a disporre brevi campi di testo affiancati.

Branding

Nel tuo componente aggiuntivo

Se preferisci includere il branding, mantienilo breve e leggero. Ciò consente di gli utenti si concentrano sull'interfaccia utente e fanno sì che il tuo componente aggiuntivo sembri parte dell'editor.

Tutti gli aspetti del componente aggiuntivo devono rispettare le linee guida per il branding.
Non includere la parola "Google" e non utilizzare le icone dei prodotti Google.
Il testo non deve essere composto da più di poche parole e deve avere uno stile nel Classe gray del CSS del componente aggiuntivo pacchetto.
Le immagini devono essere su uno sfondo bianco e non devono superare i 200 × 60 px.
Per le finestre di dialogo, il branding deve trovarsi nell'angolo in basso a destra.
Per le barre laterali, il branding può essere posizionato in alto o in basso.

In negozio

Per pubblicare un componente aggiuntivo Editor, è necessaria una numero di asset immagine. Questi asset vengono utilizzati per creare la scheda dello Store del componente aggiuntivo.

Tutti gli aspetti della scheda dello Store devono rispettare le linee guida per il branding.
Per ulteriori dettagli sulle immagini da fornire, consulta le linee guida per le immagini.

Accessibilità

Tutti devono poter usufruire del tuo componente aggiuntivo, a prescindere dai colori. in modo diverso, usare uno screen reader o avere altre esigenze. L'accessibilità è un ampio argomento non può essere trattato in modo esaustivo in questa guida di stile. Una risorsa utile è il sito Accessibilità di Google. Ma qui ecco alcuni suggerimenti per iniziare:

Assicurati di poter accedere a tutti i controlli dell'interfaccia utente con la tastiera. Aggiungi tabindex=0 ai controlli personalizzati (come quelli creati con <div>) in modo che gli utenti possano premi Tab. Valuta se dovrebbero essere supportati anche altri tasti, come le frecce per un elenco.
Alcune persone potrebbero utilizzare uno screen reader con il tuo componente aggiuntivo. Di conseguenza, le immagini devono avere un Attributo alt, e controlli personalizzati devono avere Attributi ARIA per descriverne l'utilizzo.
Non fare affidamento solo sul colore per comunicare lo stato. Usa anche icone e testo.

Se utilizzi controlli web standard, come quelli descritti in precedenza in questa guida, rendere accessibile il componente aggiuntivo è più facile.