Elementi comuni utilizzati nella progettazione di pulsanti di interfaccia
Pulsanti e elementi di navigazione sono probabilmente gli oggetti di interfaccia più comunemente utilizzati sia nella progettazione desktop che mobile. Tirano insieme un'interfaccia, consentendo agli utenti di ottenere da A a B in un solo clic.
Ancora più importante, un pulsante deve avere un bell'aspetto. Deve gridare "Click me!", Altrimenti semplicemente non sarà così efficace come deve essere. I pulsanti sono comunemente usati per "" Cerca "," Invia "," Invia "," Acquista "e" Carica ".
In questo articolo, esamineremo sette elementi di pulsante comuni nel design dell'interfaccia moderna: trame, motivi, tratti tridimensionali, pixel perfetti, sfondi con rientri, bagliori e luci.
Troverai 35 fantastici esempi di queste tecniche e una manciata di mini-tutorial per Photoshop.
1. Textures
Usare la texture è un ottimo modo per aggiungere un po 'di profondità ai pulsanti e farli risaltare un po' dal resto dell'interfaccia (e in definitiva renderli più cliccabili). Di seguito sono riportati alcuni esempi di trame nei pulsanti.
ShelfLuv utilizza la texture in tutto per aggiungere dimensioni alla sua interfaccia, specialmente nelle aree dei campi di testo e pulsanti.
Texture è utilizzata su tutta questa interfaccia, ma è più pesante nell'area del pulsante "Carica", rendendola un punto focale.
La trama qui si fonde bene con il pulsante smussato, rendendolo reale.
Texture non è effettivamente utilizzato su questo pulsante dell'interfaccia utente, ma appare in background, consentendo al pulsante di risaltare.
Creazione di un pulsante strutturato
Crea uno sfondo semplice usando lo strumento Forma e aggiungendo rumore (Filtro → Disturbo → Aggiungi disturbo).
Riseleziona lo strumento Forma e disegna un rettangolo, assicurandoti che la sua parte superiore sia nascosta dal bordo della tela.
Cambia il colore della forma in blu. Ho usato # 00A3D9.
Duplica il livello Shape e ridimensionalo nella stessa posizione. Cambia il colore in un blu leggermente più scuro.
Duplica nuovamente il livello. Posiziona il livello sotto gli ultimi due livelli Forma e cambia il colore in grigio chiaro.
Fotografare o scaricare una texture di carta (ne ho usata una da Perso e preso ). Vai a File → Inserisci, quindi individua il file per inserirlo nel documento. Ridimensionalo e posizionalo sopra le tue forme blu.
Rimuovere eventuali trame in eccesso utilizzando lo strumento Selezione e modificare la modalità di fusione della trama. Sperimenta con diverse modalità perché trame diverse producono risultati diversi. Potresti anche voler abbassare un po 'i livelli di opacità.
Apri la finestra Stile livello per la tua forma blu più scura e applica il seguente stile Ombra esterna per aggiungere un'ombra bianca sottile.
Ora applica un tratto alla tua forma usando le impostazioni di seguito.
Infine, aggiungi un'ombra interna alla forma per conferirgli ulteriori dimensioni.
Aggiungi del testo al pulsante e il gioco è fatto!
2. Modelli
I pattern sono un altro ottimo modo per aggiungere un po 'di interesse e profondità ai pulsanti dell'interfaccia. Di seguito sono riportati alcuni esempi di modelli nei pulsanti, tutti sottili ma efficaci.
Una riflessione diagonale viene utilizzata sul lato sinistro del pulsante qui per separare l'icona dal tipo.
In questo pulsante viene utilizzata una linea diagonale che si adatta all'aspetto vintage aggiungendo dimensioni al design.
Questo è il mio uso preferito di un modello in questi esempi. Sebbene non sia utilizzato nei pulsanti stessi, il motivo nell'intestazione grigia aggiunge dimensione all'intero design e in definitiva aiuta i pulsanti arancioni ad emergere.
Creazione di un pulsante a forma di nastro con motivi
Dopo aver creato uno sfondo con texture usando la tecnica nel precedente mini-tutorial, disegna un rettangolo usando lo strumento Forma e riempilo con un blu-verde. Ho usato il colore # 008B8D.
Disegna un'altra forma con la stessa altezza e colore.
Usando lo strumento Lazo, crea un triangolo, come mostrato sotto. Posizionalo sul bordo della nuova forma e premi il tasto "Cancella" per rimuovere l'area che non è necessaria.
Duplica la forma e vai in Modifica → Trasforma → Capovolgi orizzontalmente per farla affrontare nella direzione opposta.
Posiziona le due forme sotto la forma più grande, come mostrato sotto.
Fai clic con il tasto destro del mouse su una delle forme e apri la finestra Opzioni di fusione / Stile livello. Applicare una sovrapposizione gradiente simile a quella vista di seguito. Puoi anche aggiungere una sottile ombra esterna. Una volta terminato, fai clic con il pulsante destro del mouse sul livello e seleziona "Copia stile livello". Seleziona l'altra forma del banner. Fai clic con il pulsante destro del mouse e seleziona "Incolla stile livello". Apri la finestra Stile livello e modifica l'angolazione del Sovrapposizione sfumatura da 180 ° a 0 °.
Usando lo strumento Lazo, crea una selezione simile a quella vista sotto per abbinare i due angoli delle nostre forme. Riempi con un colore ancora più scuro.
Duplica il livello, ruotalo orizzontalmente e posizionalo sull'altro lato.
Crea un modello di linea. In alternativa, puoi usare quello che ho creato qui sotto.
Incolla lo schema su tutto il tuo banner. Tenendo premuto Comando + Maiusc, fai clic sulle miniature del livello di tutti i livelli del banner. Questo selezionerà tutti loro. Fai clic con il pulsante destro del mouse e seleziona "Seleziona inverso". Se hai selezionato il livello del modello di linea, premi il tasto "Elimina" per rimuovere le aree del disegno che non ti servono.
Cambia il metodo di fusione del livello del modello in "Moltiplica" per nascondere il bianco dal livello. Ora rilascia l'opacità verso il basso da qualche parte tra il 25 e il 75%. Sperimenta per il miglior risultato.
Usando lo strumento Forma, crea alcune linee simili a quelle seguenti.
Rimuovi le aree che si trovano sullo sfondo dell'immagine.
Sperimenta con il metodo di fusione di ciascuna delle tue linee. Ecco il risultato:
3. 3-D
I pulsanti tridimensionali sono fantastici perché rendono i pulsanti molto più realistici. Sono quasi impossibili da non fare clic! L'unico inconveniente è che l'effetto è piuttosto giocoso e quindi non si adatta a tutti i siti web (come quelli aziendali). Di seguito è riportata una selezione di alcuni deliziosi pulsanti 3D.
Le ombre e le linee da 1 pixel qui evidenziano alcune aree e fanno apparire il pulsante 3-D. Questo e alcuni buoni effetti CSS farebbero per un pulsante super-interattivo.
Anche il nostro secondo elemento (pattern) viene utilizzato in questo design per aggiungere una dimensione a un pulsante già molto 3D.
Questo pulsante ha un approccio leggermente diverso, basandosi solo sui gradienti per il suo aspetto tridimensionale.
Questo set mostra diverse altezze per indicare se il pulsante si trova nel suo stato normale, al passaggio del mouse o attivo. Le linee e la trama conferiscono ai pulsanti un aspetto più realistico.
Come un paio di altri esempi in questa sezione, una combinazione di gradienti e tratti rende questi pulsanti in 3D.
Questo pulsante sembra in 3-D a causa del suo design "out of the box", avvolto attorno all'interfaccia utente.
Creazione di un pulsante 3D
Inizia disegnando una forma con lo strumento Rettangolo, con un raggio d'angolo di 7 pixel. Aprire la finestra Stile livello e applicare una sovrapposizione sfumatura che va dal rosso scuro al rosso chiaro. Usa un rosso più chiaro alla fine della barra della sfumatura per evidenziare la parte superiore di quello che sarà il nostro pulsante 3D.
Ora applica un tratto al pulsante. Cambia il tipo di riempimento in "Gradiente" in modo da poter cambiare il colore della parte superiore e inferiore del tratto. Passa da un rosso chiaro a uno scuro (l'opposto del Sovrapposizione sfumatura).
Dovrebbe sembrare qualcosa del genere finora:
Duplica il livello Shape. Spingi il livello originale verso il basso di circa 10 pixel.
Applica un'ombra esterna al livello originale usando le impostazioni visualizzate nello screenshot qui sotto.
Inoltre, scurisci la Sovrapposizione sfumatura rendendo ogni singolo colore nella barra della sfumatura un po 'più scuro.
Dovresti avere qualcosa che assomigli a questo:
Seleziona lo strumento Testo e digita qualcosa sul pulsante. Apri la finestra Stile livello e applica un Sovrapposizione sfumatura simile a quello visualizzato di seguito:
Applicare un'ombra interna usando queste impostazioni:
Applica un'ombra esterna utilizzando queste impostazioni:
E abbiamo finito! Dovresti finire con qualcosa del genere:
4. Tratti pixel-perfetti
L'arte di perfezionare i pixel è diventata parte integrante di tutti gli aspetti del design dell'interfaccia utente, non solo dei pulsanti. Linee (o tratti) a un pixel danno profondità pulsanti e un aspetto leggermente tridimensionale. Inoltre fanno apparire i pulsanti rientrati. Ecco alcuni esempi brillanti di questo.
Puoi vedere chiaramente che una linea bianca (sovrapposta) di 1 pixel viene utilizzata come evidenziazione nella parte superiore del pulsante rosso, con una linea più scura nella parte inferiore. Questo lo fa sembrare leggermente tridimensionale e aggiunge molti dettagli alla pagina.
La tipografia in questo pulsante ha un'ombra interna, facendo apparire il pulsante come se fosse posizionato sopra l'interfaccia.
Questi pulsanti solo CSS3 (assolutamente nessun Photoshop) hanno tratti da 1 pixel che li distinguono dallo sfondo e appaiono indentati quando cliccati.
Un altro esempio di un colpo di luce da 1 pixel nella parte superiore del pulsante per agire da evidenziazione.
Questo pulsante verde mostra un approccio leggermente diverso, con un bagliore interno che agisce da evidenziazione nella parte superiore del pulsante. Il tratto all'esterno crea un'ombra molto sottile.
Ancora un altro pulsante che combina le tecniche di cui sopra.
Questo pulsante di base ha un tratto sottile e un'ombra delicata per far risaltare il design semplice.
Questo pulsante ha un sottile bagliore interno per farlo risaltare dallo sfondo. Il suo stato attivo ha una opacità ridotta, che fa il trucco.
Dimentica il pulsante: tutto questo design è perfetto per i pixel, con la sua tipografia moderna e le sue linee che creano un'interfaccia utente bellissima.
Crea un pulsante Pixel-Perfect
Seleziona lo strumento Forma rettangolare (che si trova nella barra degli strumenti nella parte superiore di Photoshop quando lo strumento Forma è selezionato) e assegna un raggio angolare di 5 pixel. Disegna un rettangolo nero simile a quello sottostante.
Aprire la finestra Stile livello e applicare una sovrapposizione sfumatura alla forma. Ho usato un verde scuro per un verde leggermente più leggero.
Dare alla forma un tratto sfumato, passando da un verde a un verde sempre più scuro.
Ora conferisci alla forma uno stile White Shadow bianco, utilizzando le impostazioni visualizzate di seguito.
E ora un Drop Shadow, con una dimensione di 0 pixel e un'opacità di appena il 5%.
Trova un'icona su Internet (o creane una tua) e inseriscila nel tuo documento andando su File → Inserisci, posizionandolo correttamente. Applicare una sovrapposizione sfumatura ad esso.
Assegna all'ombra interiore della tua icona una distanza di 1 pixel e l'ombra esterna bianca a una distanza di 1 pixel. Questo fa apparire l'icona come se fosse incisa nel pulsante.
Aggiungi del testo al pulsante e applica un effetto Ombra esterna a bassa opacità usando la finestra Stile livello. Ecco il risultato:
5. Sfondi indentati
Uno sfondo rientrato fa apparire un pulsante come se fosse sepolto in esso, dando profondità al pulsante e interesse visivo. Di seguito sono riportati alcuni ottimi esempi di questo.
Lo sfondo di questo pulsante ha un'ombra interna sottile per farlo sembrare rientrato.
I gradienti invertiti in questo sfondo fanno apparire i pulsanti rientrati.
Una combinazione di tratti e ombre esterne conferisce maggiore profondità a questi pulsanti rientrati.
Lo sfondo di questo pulsante ha diversi stili, tra cui un gradiente, un'ombra interna e un'ombra esterna.
Questo sfondo con un tasto rientrato è molto più piccolo di quello che abbiamo visto, ma segue ancora le stesse tecniche.
Ancora una volta, un'ombreggiatura e un'ombra interiore vengono utilizzate per creare un rientro.
6. Si illumina
I bagliori sono una tecnica abbastanza difficile da attuare nel design dell'interfaccia e di solito sono visti solo nelle interfacce scure (anche se vedremo un esempio di luce sotto). Questi esempi mostrano come i bagliori possono essere usati in modi diversi.
Un bagliore viene utilizzato all'interno di questo pulsante, conferendogli un punto di svolta a tutto tondo.
I bagliori sono abilmente utilizzati per far risaltare la tipografia in questo pulsante sullo sfondo scuro. E i bagliori fanno apparire le barre di caricamento realistiche.
I bagliori sono comunemente usati nelle interfacce scure per l'iPhone. Qui vediamo un bagliore intorno alla tipografia quando il pulsante è nel suo stato attivo.
Il bagliore leggero e discretamente sottile conferisce a questo pulsante la spinta extra di cui ha bisogno per diventare bello.
Creazione di un pulsante luminoso d'ardore
Usando ancora lo strumento Forma rettangolo, disegna un rettangolo, questa volta con un raggio d'angolo di 3 pixel. Applicare una sovrapposizione sfumatura simile a quella sottostante. Dai ai colori del tuo centro una posizione di "49" e "50".
Applica la seguente ombra interiore.
Applica la seguente ombra esterna.
Applicare il seguente bagliore esterno.
Aggiungi un po 'di tipografia al pulsante. Dovresti ottenere un risultato bello, pulito e incredibilmente facile da produrre come questo:
7. Aspetti salienti
I punti salienti offrono pulsanti di profondità, interesse visivo e cliccabilità. Gli esempi qui sotto lo dimostrano.
Una semplice forma bianca a bassa opacità è usata nella metà superiore di questo pulsante per dargli un po 'di profondità e aiutarla ad adattarsi all'intera interfaccia rossa e grigia.
Come con molti altri pulsanti in questo post, un tratto da 1 pixel evidenzia questo.
I gradienti chiari e scuri per illuminare questi pulsanti servono da luci e ombre.
Questo post è stato scritto esclusivamente per WDD da Callum Chapman , l'uomo dietro Picmix Store e Blog di Circlebox .
Quali disegni di pulsanti usi di più e perché? Hai trovato una percentuale di clic superiore per alcuni progetti? Si prega di condividere qui sotto ...