{"id":752,"date":"2017-08-30T17:07:52","date_gmt":"2017-08-30T15:07:52","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/integrare-animazione-in-un-design-system\/"},"modified":"2017-08-30T17:07:52","modified_gmt":"2017-08-30T15:07:52","slug":"integrare-animazione-in-un-design-system","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/integrare-animazione-in-un-design-system\/","title":{"rendered":"Integrare l’animazione in un design system"},"content":{"rendered":"

Mantenere coerente la coreografia dell’animazione fin dall’inizio di un progetto pu\u00f2 essere difficile, specialmente per le piccole aziende. Senza uno specialista dell’animazione dedicato a ci\u00f2 all’interno del team, pu\u00f2 essere complicato dare delle priorit\u00e0 alle linee guida e ai pattern all’inizio del processo di design. La cosa pi\u00f9 probabile che possa accadere \u00e8 che l’animazione verr\u00e0 aggiunta durante lo sviluppo del prodotto.<\/p>\n

Non sorprende che questo approccio ad hoc possa portare ad inconsistenze, duplicati e revisioni sul lungo termine, ma lascia anche spazio per delle esplorazioni e scoperte creative riguardanti ci\u00f2 che funziona e ci\u00f2 che non funziona. Per quanto possa essere utile poter stabilire le fondamenta del sistema fin da subito, va altrettanto bene permettere ai pattern di emergere in maniera organica man mano che il vostro team sperimenta e trova la propria voce con l’animazione.<\/p>\n

Una volta che ci saranno animazioni a sufficienza, potreste cominciare a pensare a come assicurarne la consistenza e a come riutilizzare i pattern esistenti piuttosto che ricrearli da zero ogni volta. Come si fa la transizione da qualche animazione scoordinata a un sistema coerente? Io trovo utile cominciare a pensare allo scopo<\/em> delle animazioni e alle sensazioni<\/em> che dovrebbero evocare.<\/p>\n

\n

Cominciate da scopo e sensazione<\/h2>\n

Scopo<\/h3>\n

Come ogni altro elemento in un design system, le animazioni devono avere uno scopo. Per integrare l’animazione, cominciate dal passare in rassegna l’interfaccia per osservare come<\/em> e perch\u00e9<\/em> usate le animazioni in quel particolare prodotto e brand.<\/p>\n

Per esempio, in FutureLearn<\/a> abbiamo notato che usiamo le animazioni soprattutto in tre modi: per indicare un cambiamento di stato, per aggiungere enfasi o per mostrare informazioni extra.<\/p>\n

Un cambiamento di stato<\/em> mostra che un oggetto ha cambiato stato a causa di un’interazione da parte dell’utente. Per esempio, uno stato pu\u00f2 cambiare con \u201chover\u201d o con un click. In questo caso, l’animazione \u00e8 usata per ammorbidire la transizione tra gli stati. Le animazioni di enfasi<\/em> sono usate per attirare l’attenzione su specifiche informazioni o su un’azione, per esempio, un’esortazione per incoraggiare gli utenti a proseguire verso il passo successivo nel corso dell’interazione. Le animazioni che svelano<\/em> sono usate per nascondere e mostrare informazioni extra, quali un menu che viene nascosto di lato, un drop down o un popover.<\/p>\n

<\/div>\n

Non ci sono categorie \u201cstandard\u201d per gli scopi delle animazioni. Alcuni prodotti usano molte animazioni standalone, quali i tutorial animati. Alcuni usano le transizioni di schermo, altri no. Per esempio, le animazioni di personalit\u00e0 e branding vengono raggruppate in una categoria separata nel Salesforce Lightning Design System<\/a>.<\/p>\n

\"I<\/p>\n

I tipi di animazione vengono categorizzati in modo diverso nel Salesforce Lightning Design System rispetto a FutureLearn.<\/p>\n<\/div>\n

Le categorie sono specifiche della vostra interfaccia e del vostro brand e per il modo in cui usate l’animazione. Non dovrebbero essere normative. Il loro principale valore sta nell’articolare il perch\u00e9 il vostro team dovrebbe usare l’animazione, nel vostro specifico progetto.<\/p>\n

Sensazione<\/h3>\n

Cos\u00ec come ha uno scopo nell’aiutare l’utente a comprendere in che modo funziona il prodotto, l’animazione contribuisce anche ad esprimere la personalit\u00e0 del brand. Quindi, un altro aspetto da considerare \u00e8 il modo in cui dovrebbe far sentire<\/em>. In \u201cDesigning Interface Animation<\/a>\u201d, Val Head spiega come si possano usare gli aggettivi che descrivono le qualit\u00e0 del brand per definire l’animazione. Per esempio, un rapido movimento elastico pu\u00f2 essere percepito come vivace ed energico, mentre degli \u201cease-in-out\u201d regolari danno l’impressione di certezza e decisione.<\/p>\n\n\n\n\n\n\n\n\n
Qualit\u00e0 del brand tradotte in movimento<\/caption>\n
Sentimento del brand<\/th>\nSentimento dell’animazione<\/th>\nEsempi di effetto<\/th>\n<\/tr>\n<\/thead>\n
Vivace ed energico<\/td>\nVeloce e morbido<\/td>\nBalzo delicato
Anticipazione
Overshoot morbido<\/td>\n<\/tr>\n
Giocoso e amichevole<\/td>\nElastico o tipo molla<\/td>\nSchiacciare e allungare
Easing balzellante
Agitazione<\/td>\n<\/tr>\n
Risoluto e sicuro<\/td>\nIn equilibrio e stabile<\/td>\nEase-in, Ease-out
Ease-in-out<\/td>\n<\/tr>\n
Calmo e morbido<\/td>\nPiccoli movimenti morbidi o assenza di movimento<\/td>\nCambiamenti di opacit\u00e0, colore, blur e dimensione<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Man mano che esaminate gli esempi di animazione nella vostra interfaccia, elencate che sentimenti dovrebbe generare l’animazione e segnatevi gli esempi particolarmente efficaci. Per esempio, date un’occhiata alle due animazioni qui sotto. Sebbene entrambe siano l’animazione dell’entrata e dell’uscita di un popover, le animazioni danno sensazioni diverse. L’esempio di Marvel d\u00e0 sensazioni brusche attraverso l’uso di easing saltellante, mentre il piccolo movimento combinato con i cambiamenti di blur e opacit\u00e0 nell’esempio di FutureLearn lo fanno sembrare calmo e discreto.<\/p>\n

\"Animazione<\/div>\n
\n

Animazione di un popover su Marvel (sinistra) e FutureLearn (destra).<\/p>\n<\/div>\n

\"Animazione<\/p>\n

Probabilmente, non c’\u00e8 un modo giusto o sbagliato per animare un popover. Per quel che ne so, dipende tutto dal vostro brand e da come scegliete di comunicare attraverso il movimento. Nella vostra interfaccia potreste cominciare a notare animazioni che hanno lo stesso scopo ma sentimenti completamente diversi. Segnatevi quelli che vi sembrano giusti per il vostro brand, cos\u00ec che in seguito possiate allinearvi le altre animazioni.<\/p>\n<\/div>\n

\n

Audit delle animazioni esistenti<\/h2>\n

Una volta che vi siete fatti un’idea generale del ruolo che l’animazione gioca nell’interfaccia e che sentimenti dovrebbe scatenare, il passo successivo consiste nello standardizzare le animazioni esistenti. Come un inventario dell’interfaccia<\/a>, potete fare un inventario incentrato specificatamente sulle animazioni. Cominciate col mettere insieme tutte le animazioni esistenti. Le potete catturare con QuickTime o con un’altra applicazione per la registrazione video. Contemporaneamente, tenetene traccia in un Google Doc, in un file Keynote o in un foglio Excel, quello che fa per voi.<\/p>\n

Basandovi sullo scopo che avete definito in precedenza, inserite le categorie e poi aggiungete le animazioni alle categorie man mano che procedete. Durante l’audit potreste dover aggiustare tali categorie o aggiungerne di nuove, ma pu\u00f2 essere d’aiuto non dover cominciare da una pagina bianca.<\/p>\n

\"Esempi<\/p>\n

Esempi di categorie iniziali per raccogliere le animazioni in un Google Doc.<\/p>\n<\/div>\n

Per ciascuna animazione aggiungete:<\/p>\n