Share
Proviamo a creare una "barra di amministrazione statica" semplice ma efficace in Photoshop. Prenderemo una selezione di elementi dell'interfaccia utente e progetteremo i loro vari stati, pronti per la creazione in HTML e CSS.
Se hai utilizzato WordPress dalla v3.1, avrai senza dubbio notato la sempre presente barra di amministrazione che compare sul front-end ogni volta che accedi?
Uno strumento semplice e utile che ti consente di passare direttamente all'amministratore senza - sai - prima andare all'amministratore. Google è anche fan della barra di amministrazione statica; si adatta perfettamente con l'intera app web-app. Se utilizzi GMail, Google Documenti, Google +, avrai visto questo:
Anche il browser Chrome a volte ha una barra degli strumenti simile nel footer?
E se visiti Themeforest, troverai spesso autori che utilizzano barre statiche per navigare nelle anteprime dei temi:
OK, quindi ora sappiamo di cosa stiamo parlando, pensiamo ora ad alcuni aspetti del design che dobbiamo considerare.
Basta parlare. Apriamo Photoshop (o sentitevi liberi di crearne uno in Fireworks) e diamo il via alle cose?
Apri un nuovo documento, il mio 200x1000px, e aggiungi alcune guide per definire la tua barra degli strumenti (70px in altezza), i tuoi pulsanti (30 pixel pixel centrati verticalmente all'interno della barra), più un margine sinistro e destro di 20px.
Aggiungi una texture casuale allo sfondo principale, questo rappresenta la tua pagina web e siederà sotto la barra. Quindi, aggiungi una forma (nera) con l'85% di opacità. Questa è la barra stessa e dargli una leggera trasparenza enfatizzerà il fatto che è "sopra" il contenuto della pagina web.
Ora aggiungeremo alcuni elementi comuni alla pagina. Ci saranno alcuni esempi, ma non abbiamo bisogno di disegnare tutto, purché rispettiamo tutti gli stati dei nostri vari articoli. Fatto ciò, il resto della build può essere fatto nel browser.
Quando si tratta di creare la nostra barra di amministrazione, inseriremo un'immagine in miniatura utilizzando l'API Gravatar. Questo sarà presente per illustrare all'utente che ha effettuato l'accesso (che può sembrare ovvio, ma è un utile promemoria nel caso qualcuno voglia disconnettersi quando se ne vanno).
Nel frattempo, ho afferrato l'immagine gravatar predefinita e useremo questo come segnaposto.
Crea un rettangolo arrotondato (U), con un raggio di 2 pixel, tra le guide come mostrato di seguito. Tieni premuto Maiusc mentre lo trascini, trattenendo le dimensioni in quadrato. Avrai creato un quadrato accurato di 30x30 px. Posiziona l'immagine di anteprima sopra di essa, fai clic con il pulsante destro del mouse nel pannello dei livelli e seleziona "Crea maschera di ritaglio".
Ho aggiunto un'ombreggiatura scura al livello maschera (doppio clic sul livello per aprire le proprietà del livello) di 2px direttamente verso il basso. Questo sarà uno stato comune di molti dei nostri elementi, che vedremo più avanti.
Aggiungi del testo per dare il benvenuto all'utente (in questo caso Droid Serif Italic a 12px) e un'etichetta più neutra per consentire all'utente di disconnettersi.
Quando disegni forme in Photoshop, troverai spesso che l'anti-aliasing (che rende tutto caldo e sfocato) può togliere alcuni dettagli dal tuo lavoro. Dimostriamo questo ora disegnando una semplice forma quadrata sul nostro sfondo scuro.
È perfettamente preciso, o almeno così pensi. Una volta ingrandito, puoi vedere chiaramente la sfocatura lungo ciascuno dei bordi. Rimuovendoli, possiamo pulire la nostra immagine e raggiungere la perfezione dei pixel. Crea una copia della forma e posizionala lungo il lato.
Molto buona. Ora prendi lo strumento di selezione diretta (A) - la piccola freccia bianca del cursore - e seleziona la forma. Comanda e fai clic per selezionare due nodi lungo un bordo, quindi spingili verso l'interno finché non vedi un bordo perfettamente nitido.
Molto meglio! I vettori si allineano precisamente con la griglia dei pixel. Ora ripeti questo per gli altri tre bordi, assicurandoti di mantenere le dimensioni dell'oggetto nel miglior modo possibile.
OK, sembra molto meglio, ma la vera differenza diventa chiara quando ridimensioniamo i pixel reali?
Una differenza delicata ma significativa. Tienilo a mente quando costruisci i pulsanti durante questo tutorial e il risultato finale sarà sicuramente migliore.
Evita di dover ripulire i bordi smarriti attivando dapprima "Blocca su pixel" nelle opzioni di forma:
Grazie ancora a Jeff per averlo indicato!
Abbiamo già discusso le dimensioni generali dei nostri pulsanti, quindi andare avanti e costruirne alcuni non sarà un problema. Stiamo ora esaminando un esempio indipendente (non connesso ad altri pulsanti): il pulsante delle notifiche.
Nello stesso modo in cui abbiamo formato la nostra maschera gravatar, disegniamo un rettangolo arrotondato di 30 px attorno ad un semplice testo di Arial 12px. Questo pulsante mostrerà uno stato di passaggio del mouse, quindi applicheremo un tratto ben visibile attorno al rettangolo, gli diamo un colore di sfondo solido e, come abbiamo fatto con il nostro gravatar, applichiamo un'ombra esterna per dare al pulsante un sguardo sollevato.
Un'altra caratteristica di interfaccia utente comune è l'etichetta numerata che indica quanti messaggi di posta elettronica, notifiche, aggiornamenti, ecc. Sono attivi. Avrai familiarità con questi se sei un utente di smartphone, un proprietario di mac, vieni a pensarci - se hai mai aperto un browser di qualsiasi tipo?
Utilizzeremo questa convenzione dell'interfaccia utente e assegneremo ai nostri messaggi di notifica un'etichetta numerica. Useremo un colore più sorprendente in quanto l'idea alla base di questi è catturare l'attenzione dell'utente. Un testo Arial scuro e audace con un'ombreggiatura pallida, messo contro un gradiente giallo sottile dovrebbe fare il trucco. Ecco una rapida occhiata alle impostazioni della sfumatura:
Ancora una volta, questo è un piccolo rettangolo arrotondato, con un raggio di 2pz agli angoli, e ha un'ombreggiatura sottile. Lo posizioneremo sopra il nostro pulsante e a destra. pulito.
Avendo creato il nostro pulsante nel suo stato di hover, dovremmo ora occuparci dello stato di default. Ciò sarà meno sorprendente - chiaro, ma discreto. Copia il pulsante delle notifiche, assicurandoti di mantenere ciascuno dei tuoi elementi in una cartella a parte nel pannello dei livelli. Cambia il testo dell'etichetta (se lo desideri) e abbassa leggermente il colore. Fai lo stesso per il colore del tratto e rimuovi l'ombra esterna.
Duplica questo pulsante, perché useremo anche questo per dimostrare come appaiono gli elementi raggruppati.
Quando abbiamo una piccola raccolta di pulsanti associati (pulsanti di navigazione, ad esempio) dovremmo rendere l'utente consapevole che hanno a che fare con un gruppo, e non solo una fila di elementi casuali. Possiamo usare prossimità, una tecnica con cui si raggiunge l'unità nel web design. Collochiamo gli oggetti l'uno vicino all'altro in modo che la loro relazione sia visivamente indicata.
Come puoi vedere, abbiamo rimosso gli angoli arrotondati in cui i nostri pulsanti si incontrano. L'effetto arrotondato sarà evidente solo lungo i bordi esterni degli oggetti raggruppati. In un attimo, aggiungeremo un altro pulsante tra questi due per evidenziare ulteriormente l'effetto.
Prima però, osserviamo come rimuoviamo gli angoli arrotondati. Con il nostro rettangolo evidenziato, seleziona lo strumento Elimina punto di ancoraggio e rimuovi i due nodi esterni della curva.
Quindi, selezionare lo strumento Converti punto e convertire i restanti due punti in angoli retti.
tombola!
Dopo aver rimosso gli angoli arrotondati da un lato di ciascuno dei pulsanti, ora puoi collegarli insieme.
Non c'è niente come un set di icone di qualità per istruire gli utenti nella forma più diretta possibile. Su alcuni dei nostri pulsanti useremo le icone anziché il testo: hanno un bell'aspetto e risparmiano spazio. Possiamo sempre usare le descrizioni dei comandi per verificare a cosa servano. Ecco un esempio di due pulsanti di icone, uniti insieme, uno dei quali dimostra l'effetto hover:
Come ho già detto, non useremo una singola immagine durante questo tutorial (OK, a parte la miniatura gravatar). Invece, vai e prendi il carattere dei Web Symbols da Just be Nice Studio. Che bello da parte loro.
È bello, ed è completo in formato .otf (per l'utilizzo sul tuo sistema) e un kit di font web per l'implementazione nelle tue pagine web con @ font-face. Questo significa che non dobbiamo usare sprite o singoli file di immagine; possiamo semplicemente usare i caratteri e applicare questo carattere: brillante.
In questo caso ho usato il U e S rispettivamente, ma possiamo tagliare e cambiare molto facilmente quando stiamo costruendo. Possiamo anche applicare effetti usando i CSS, proprio come faremmo con i caratteri normali, ma qui sto andando meglio di me? Per ora, crea solo un paio di pulsanti e usa alcune di queste fantastiche icone.
Più o meno allo stesso modo in cui abbiamo lavorato, creare un campo di ricerca. È identico ai pulsanti nel loro stato predefinito (tratto grigio pallido, colore del carattere grigio chiaro, nessuna ombra esterna), tranne per il fatto che non ha uno sfondo uniforme.
Il suo pulsante adiacente fa tuttavia, e utilizza nuovamente uno dei nostri caratteri Web Symbols (L). Buttare il tutto contro la guida di destra, dato che lo posizioneremo nel browser su questo lato.
Ho pensato che sarebbe bello includere un pulsante in più che disegna extra attenzione, nel caso in cui qualcosa - er - extra, ha bisogno di fare. Ad esempio, un pulsante "pubblica" o "Chiudi frame".
Ancora una volta, possiamo utilizzare le icone, mantenendo le normali dimensioni dei pulsanti e gli angoli arrotondati di 2px. Questa volta, tuttavia, utilizziamo lo stesso gradiente giallo che abbiamo usato con la nostra etichetta con il numero di notifica, da # f9d944 a # fee77f, con un tratto di # f9d944. L'icona è di colore grigio scuro # 292929, proprio come per la notifica, con un'ombreggiatura pallida.
Come previsto, lo stato del passaggio del mouse avrà un'ombreggiatura scura proprio come con gli altri pulsanti.
Ci stiamo avvicinando alla fine e abbiamo quasi coperto tutti gli stati possibili dei nostri elementi dell'interfaccia utente. Aggiungeremo un pulsante in più tra i nostri pulsanti Impostazioni e Profilo, questa volta per agire come un menu a discesa (notare la completa assenza di angoli arrotondati):
Nello screenshot in alto vedrai il menu a tendina visibile, per definizione quindi il pulsante è attivo (o al passaggio del mouse). Il pulsante assume lo stato appropriato; tratto evidenziato, testo più chiaro e ombra scura. Ho usato un'altra icona Simboli Web () per indicare che c'è più contenuto sotto il pulsante.
Il menu a discesa in sé deve essere associato visivamente al resto degli elementi dell'interfaccia utente, ma deve distinguersi. Sarà anche al di sopra di qualsiasi contenuto della pagina web visibile al momento. Ho quindi scelto di renderlo un semplice rettangolo bianco, con un'ombra esterna:
Lo sfondo chiaro lo lega visivamente con il pulsante "menu" al passaggio del mouse e l'ombra lo aiuta a distinguersi da qualsiasi altro contenuto. L'effetto hover evidenziato sul link a discesa è semplicemente una tonalità più chiara del giallo che abbiamo usato.
C'è solo un piccolo elemento che dobbiamo ora affrontare; il tooltip (ricordate che lo abbiamo menzionato?) Lo useremo come verifica nel caso in cui gli scopi dei nostri pulsanti icona non siano immediatamente chiari.
Lo screenshot qui sopra mostra il mio primo suggerimento: perfettamente chiaro, in linea di principio, ma poi mi sono reso conto che era visivamente identico (a parte il piccolo punto) al menu a discesa. Poiché ciò suggerirebbe che in qualche modo svolgessero un ruolo simile, ho deciso che sarebbe meglio prendere una strada alternativa. Questo è un suggerimento; non dovrebbe essere confuso per nient'altro.
Il secondo tentativo ha molto più successo. È sottile contro il nostro scuro admin bar, ma il testo altamente contrastante lo rende molto leggibile. Tutto ciò di cui hai bisogno per costruire questo piccolo cucciolo è un rettangolo nero (non ci sono angoli arrotondati questa volta, ma dipende da te). Con la prima forma disegnata, disegnane un'altra, assicurandoti di avere lo strumento Aggiungi a forma (+) selezionato. Ciò vincolerà le tue due forme in un'unica forma, pur mantenendo i singoli vettori per la modifica:
Con lo strumento Selezione diretta (A) puoi selezionare i punti della seconda forma e manipolarli separatamente. Ridimensiona come ritieni opportuno e ruotalo di 45o. Finirai con qualcosa di simile?
La fine della strada! Spero che tu abbia raccolto un design dell'interfaccia utente che soddisfi la tua approvazione. Nel prossimo tutorial vedremo di codificare questo lotto in una barra di amministrazione statica, amichevole, che parla con il browser. Grazie per la lettura, non vedo l'ora di sentire cosa ne pensi nei commenti!
Accentsconagua