Perché iOS sta usando così tanti colori gradienti?

Il gradiente si riferisce alla misteriosa e romantica transizione di colore di un oggetto da luminoso a scuro, da profondo a superficiale, o da un colore all'altro. All'inizio, quando il design piatto è appena sorto, i designer tenevano lontano il gradiente nel design. Tuttavia, da quando Instagram ha cambiato il logo dalla classica macchina fotografica Polaroid a un'icona piatta dai colori vivaci, il gradiente nel design delle app sta gradualmente tornando in auge.

La ragione dell'ascesa del gradiente è che le combinazioni di colori del design piatto sono estremamente facili da causare omogeneità. Se i designer perseguono un linguaggio di design con una ricca visuale, il gradiente è la scelta migliore. Diamo un'occhiata agli esempi di colore gradiente utilizzati in APP mobile.

1. Gradiente lineare

Come metodo di espressione di base nel design graduale, il gradiente lineare è anche una delle tecniche creative più comuni. In generale, ci sono 3 tipi di gradiente secondo la direzione: gradiente orizzontale, gradiente verticale e gradiente diagonale. Di seguito sono riportati degli esempi.

Gradiente orizzontale:

Questo è un concept design di un'app di eCommerce, che include impostazioni, autorizzazioni e coupon. Il designer presenta le informazioni dei coupon dell'utente tramite schede che utilizzano un gradiente orizzontale a doppio colore uniforme, evidenziando le informazioni sulla scheda. Nel complesso, l'interfaccia è minimalista ed elegante.

Vertical gradient:

Come far risaltare la tua APP meteo? Guardate questo. Il designer usa il gradiente verticale in modo molto intelligente per creare un sofisticato sfondo di cielo serale con la timeline dell'APP. L'interfaccia e la funzione si completano a vicenda.

Diagonale gradiente:

La landing page di questa app musicale è stata creata dallo strumento di prototipazione rapida Mockplus. Quando aprirete l'APP, essa chiederà gentilmente il vostro stato attuale per filtrare automaticamente la musica in linea con l'umore corrente.

Il designer usa il gradiente diagonale come sfondo, la calda interfaccia graduale rende l'interfaccia più amichevole e cordiale. Inoltre, il gradiente diagonale rende l'interfaccia più vivace e ricca, dando agli utenti un'esperienza morbida e umana del prodotto AI.

2. Sovrapposizioni di gradiente sull'immagine

L'aggiunta di sovrapposizioni di gradiente sullo sfondo e sull'immagine principale può rafforzare il senso di completezza, rendendo l'utente consapevole di altri elementi più importanti e cruciali che migliorano la leggibilità della pagina. L'effetto di questo design sull'immagine grande è particolarmente evidente. Inoltre, l'immagine complessiva sarà più misteriosa, elegante e attraente.

Si dovrebbe anche prestare attenzione alla selezione dell'immagine di sfondo, al contenuto dell'immagine e al tono. Tutti gli elementi devono essere coerenti, l'uso del traslucido potrebbe rendere l'immagine più delicata. Il gradiente deve rafforzare la leggibilità delle informazioni della pagina e non può essere decorato per la decorazione.

3. Sovrapposizione multi-angolo multi-livello

Come Instagram ha cambiato le sue icone e UI, il lead designer di Instagram Ian Spalter ha scritto un post sul cambiamento dell'icona su Medium.

"Se la lente è un ponte nel glifo più semplice e audace, l'arcobaleno è un ponte nel gradiente colorato. Il colore è sempre stato una parte enorme di Instagram - lo si vede nell'icona classica dell'app, nei filtri, nelle foto e nei video della comunità.

Quando abbiamo iniziato a reimmaginare l'arcobaleno, abbiamo esaminato opzioni più minimali, ma alla fine avevamo bisogno di più calore ed energia per completare il glifo."

Instagram cattura gli elementi centrali del logo originale: l'arcobaleno, la lente e il mirino, che hanno creato un arcobaleno minimalista e colorato di immagini con una sovrapposizione multi-angolo e multistrato sullo sfondo. In particolare, questa icona utilizza principalmente un set di gradiente diagonale lineare, più due set di sovrapposizione di gradiente radiale sferico, usando saggiamente il colore nel design UI.

4. Effetto gradiente funzionale

Il gradiente non è solo limitato ad essere usato come una singola decorazione di sfondo, può anche avere alcune funzionalità. I designer useranno lo stesso colore, il colore simile, il colore approssimativo, il colore di contrasto, il colore complementare per separare chiaramente ogni voce di menu. In modo che l'interfaccia mantiene l'equilibrio alla stessa frequenza che rende l'immagine è colorata, più ritmica e più confortevole.

Controlla di più per Gradient design tools