Share
Cosa starai creandoIn questo tutorial ti guiderò attraverso il processo di progettazione di una schermata di benvenuto per un'applicazione di fitness iOS. Lavoreremo con Affinity Designer, uno strumento nuovo e promettente realizzato da Serif e un'ottima app per la progettazione dell'interfaccia utente.
Non avrai bisogno di alcuna esperienza precedente con l'applicazione. Alla fine di questo tutorial avrai acquisito una conoscenza di base del flusso di lavoro di Affinity Designer. Lavoreremo con il tipo, il vettore, le immagini e gli stili di livello.
Iniziamo creando un nuovo documento.
Dopo aver aperto Affinity Designer, vai a File> Nuovo dal menu principale. Nel popup che appare puoi specificare i parametri del file che si adattano meglio alle tue esigenze. Per ora concentriamoci su due opzioni: genere e Preset di pagina. Progetteremo un'app per iPhone, quindi la soluzione migliore è scegliere Tipo: dispositivi e Preset: iPhone 5 (Retina). Affinity Designer imposterà atomicamente le altre opzioni per noi.
Ora dobbiamo preparare un ambiente in cui lavorare. Sono un grande fan dell'uso delle griglie nel design. Non ci soffermeremo subito su questo, ma creeremo una griglia di layout davvero semplice.
Questo design si baserà sulle linee guida di base sull'interfaccia umana di Apple, che significa aderire a una specifica gerarchia. Dovremo allocare uno spazio per la barra di stato (20 punti). Quindi, anche se trasparente, ci sarà una semplice barra di navigazione sotto quella (44 punti).
Successivo, uno spazio per le informazioni principali sulle prestazioni degli utenti e un posto per un pulsante per iniziare un allenamento.
Vai a Visualizza> Gestore delle guide e apparirà un popup, con linee guida orizzontali e verticali (vuoto per ora). Fare clic sulla piccola icona della pagina vuota sotto il Guide orizzontali sezione. In tal modo si aggiungerà una nuova guida orizzontale. Quindi fai doppio clic sul valore visualizzato nell'elenco e modificalo su 20 pt. Aggiungi altre guide usando gli attributi come mostrato di seguito.
Ora creeremo il nostro background dell'app. Dal menu degli strumenti a sinistra selezionare a Strumento rettangolo (M) e traccia un rettangolo che copre l'intera area di lavoro. Sul pannello laterale sinistro c'è a Trasformare sezione. Puoi controllare le dimensioni del rettangolo qui, così come i suoi punti di partenza (dovresti avere X: 0, Y: 0 e W: 320 pt, H: 568 pt).
Ora cambieremo il colore di sfondo. Vai al Barra degli strumenti del contesto appena sotto la barra degli strumenti principale (se non ne vedi uno vai Visualizza> Mostra barra degli strumenti contestuali nel menu principale). Sul lato sinistro della barra degli strumenti del contesto vedrai le proprietà relative alla forma che abbiamo appena creato. Clicca sul piccolo rettangolo bianco descritto come a Riempire (con la forma selezionata). Scegli i cursori esagonali RGB dall'elenco di selezione, quindi inserisci # 151515 nel campo di inserimento del parametro HEX e premi accedere.
Vai al Livelli pannello. Fai doppio clic sul livello contenente la nostra forma e cambia il suo nome in "BG". Quindi, fare clic sull'icona piccola lucchetto per bloccare il livello BG. In questo modo non ti casterai per errore quando lavori sugli altri elementi.
Focalizza la tua attenzione sulla barra di stato. Non ci preoccuperemo di reinventare la cerchia, ma di scaricare i file sorgente allegati a questo tutorial per trovare il file della barra di stato. Quindi vai a File> Importa nel menu principale di Affinity Designer, selezionare il stat-bar.afdesign file e singolo clic in qualsiasi punto del disegno.
Seleziona il gruppo e posizionalo nella parte superiore della schermata dell'app.
È tempo di creare il nostro menu di hamburger. Per iniziare, attiva la griglia, il pixel e le guide per lo snap nella barra degli strumenti principale. Cambia il tuo colore principale in "bianco" nella parte in alto a sinistra della finestra dell'applicazione. Seleziona il Strumento rettangolo dal Utensili pannello a sinistra e traccia un rettangolo di 18 x 2 pt. Tenere il Alt + Maiusc pulsanti e fare clic e trascinare il rettangolo sotto quello originale (stiamo solo copiando il rettangolo). Fallo ancora una volta e otterrai l'icona di un menu di un hamburger.
Seleziona tutte e tre le forme (Shift + click) e fare clic su Inserisci pulsante in Affinity Designer nell'angolo in alto a destra per unirlo in uno. Trova la tua icona sul Livelli riquadro e rinominarlo "icona-menu-hamburger".
Seleziona il Strumento di testo artistico (T) dal pannello degli strumenti e fai clic da qualche parte all'interno dello spazio della barra di navigazione sul nostro progetto. Inserisci il testo "Running App" e seleziona tutto il lotto.
Clicca sul Personaggio pulsante, modificare gli attributi del testo come mostrato di seguito, quindi chiudere il popup.
Ora centra il testo nell'area della barra di navigazione. Scatta automaticamente. In caso contrario, assicurati di attivare le opzioni di snap sulla barra degli strumenti principale in alto.
È ora di pulire le cose nel pannello dei livelli. Clicca il Aggiungi nuovo livello pulsante nella parte inferiore del Livelli pannello e trascina l'icona dell'hamburger, il titolo dell'app e la barra di stato in esso. Raggruppa insieme i livelli del titolo dell'app e dell'icona del menu (seleziona entrambi e fai clic Cmd + G) quindi rinomina il livello come mostrato di seguito:
Seleziona il Strumento cerchio (M) dal pannello degli strumenti e disegnare un cerchio. Con la tua nuova forma selezionata apri il Proprietà del tratto pannello in alto a sinistra e modificare i parametri come mostrato di seguito.
Iniziare a disegnare dalla guida centrale che abbiamo creato inizialmente, quindi premere e tenere premuto cmd (disegno dal punto centrale) e Cambio (disegnando un cerchio, non un'ellisse) mentre si disegna. Il tuo cerchio dovrebbe essere intorno a 200x200 pt.
Seleziona il cerchio e premi il Converti in curva pulsante sul menu della barra degli strumenti. Seleziona il Strumento Nodo (A) e fare clic su Break Curve pulsante. Con Strumento Nodo ancora selezionato crea due punti sulla curva a circa 3/4 della sua altezza.
Nota: È possibile creare ulteriori guide per allineare meglio questi nuovi nodi. stampa Cmd + R mostrare Righelli e fai clic e tieni premuto sul righello superiore, quindi trascina il cursore verso il basso per creare una guida.
Seleziona il nodo superiore della cerchia e clicca Elimina sulla tastiera per rimuoverlo. Dovresti avere una buona base per un grafico a cerchio aperto ora.
Seleziona la forma del grafico e duplicala (CMD + J). Selezionala in alto a sinistra con lo strumento nodo ed eliminala. Apri il Proprietà del tratto pannello e modificare i valori come mostrato di seguito. Il colore verde è # 4DFA41 e giallo # F7D203.
Seleziona il Strumento di testo artistico e inserire alcune informazioni aggiuntive, quindi posizionarle e formattarle come mostrato di seguito.
Ora abbiamo una tabella dei progressi davvero sorprendente con ulteriori informazioni sui risultati degli utenti!
Seleziona il Strumento rettangolo (M) dal Utensili pannello e disegnare un rettangolo, circa 290pt x 44 pt. In "Linee guida per l'interfaccia umana per iOS" i progettisti Apple suggeriscono che 44 pt sono l'altezza del pulsante perfetta per un semplice tocco.
Fai clic tenendo premuto Maiusc sullo sfondo dell'app e sulla forma rettangolare appena creata, quindi fai clic su Allinea orizzontale al centro pulsante nella parte superiore sinistra dello schermo. Posizionalo nella parte inferiore del tuo design dell'interfaccia utente. Puoi anche selezionare la forma del rettangolo e cambiare le sue impostazioni X / Y nel Trasformare pannello a quelli mostrati di seguito:
Seleziona la forma che hai appena creato. Apri il Colore di riempimento pannello in alto a sinistra dello schermo e cambia il colore di riempimento in trasparente. Sostituisci il tratto con # 4CFA41. Apri il Preferenze del tratto pannello (accanto a quello a colori), impostare il peso del tratto su 2pt e allinearlo all'interno della forma.
Ora per l'etichetta del pulsante. Seleziona il Strumento di testo artistico e usalo per creare un'etichetta al centro del rettangolo che hai appena creato. Digitare "Start Running" e aprire il Personaggio finestra facendo clic sul Personaggio pulsante sul menu strumenti in alto (con l'oggetto testo selezionato). Cambia tutte le preferenze per riflettere gli esempi mostrati di seguito:
Inseriremo una semplice vista delle statistiche tra la tabella dei progressi e il pulsante "Inizia a correre". Mostreremo il ritmo di corsa medio, il numero totale di corse e le calorie bruciate.
Visita il sito Web Icons8 e scarica l'icona In esecuzione, l'icona Cronometro e l'icona Elemento fuoco. Icons8 è un ottimo posto per trovare icone moderne ed eleganti. È possibile ottenere PNG gratuitamente (ricordarsi di collegarsi al sito Web Icons8 se li si sta utilizzando) o acquistare una versione vettoriale.
Inizia posizionando l'icona In esecuzione nel tuo progetto. Vai a File> Luogo e selezionare il file, o semplicemente trascinare il file in Affinity Designer. Posizionalo centrato verticalmente sotto il grafico di avanzamento.
Avanti vai al effetti pannello (con l'icona selezionata) e aprire il Sovrapposizione colore scheda. Cambia il colore di sovrapposizione in # 4CFA41.
Quindi passare al stili scheda e creare uno stile personalizzato dalla selezione facendo clic sulla piccola icona del menu a discesa a destra e selezionando Aggiungi stile dalla selezione. In questo modo sarà più facile riutilizzare il nostro stile in seguito.
Ancora una volta, seleziona il Strumento di testo artistico e creare due oggetti di testo. Digitare un numero di esempio e il testo "Numero totale di esecuzioni". Formattali come mostrato di seguito. Centrali verticalmente e posizionali sotto l'icona Running Man.
Posiziona le altre icone scaricate nella progettazione dell'interfaccia utente. Con uno di loro selezionato scegli lo stile che abbiamo appena definito dal stili pannello. Ecco! I nostri stili sono stati riapplicati senza doverli specificare nuovamente.
Con l'icona ancora selezionata clicca Cmd + C o andare a Modifica> Copia. Seleziona l'ultima icona e clicca Cmd + Shift + V o andare a Menu> Modifica> Incolla stile. Questo incollerà lo stile dell'oggetto precedentemente copiato in quello nuovo. Abbastanza utile, giusto?
Quando abbiamo tutti i componenti posizionati sulla nostra tela è ora di lavorare su alcuni dettagli. Prima di tutto abbiamo un brutto buco nel mezzo del design, facciamo qualcosa al riguardo.
Se hai organizzato i tuoi livelli, questo bit sarà facile. Seleziona il livello / gruppo con il nostro grafico di avanzamento e spostalo di circa 50 punti verso il basso. Se non hai organizzato i tuoi livelli, questo passaggio sarà più difficile, ti servirà nel modo giusto!
Diamo anche un po 'di pepe allo sfondo. Crea un rettangolo 320x320pt e posizionalo sopra il disegno. Selezionalo e scegli il Strumento d'angolo (C) dal pannello degli strumenti. Fare clic su uno dei punti di ancoraggio del rettangolo per renderlo modificabile, attivare precedentemente definito Guide (Cmd +;) e fare clic sul centro dell'angolo inferiore del rettangolo per creare un nodo. Selezionalo e spostalo verso il basso di 40 punti. E qui abbiamo la nostra nuova freccia a forma personalizzata. Vai al Livelli pannello e spostalo sul livello di bg (mettilo in cima).
Prendi i file sorgente allegati a questo tutorial e dai un'occhiata alla foto di una bella strada parigina. È una delle foto che ho scattato visitando Parigi. Sembra piacevole, è anche un ottimo posto dove correre. Aprilo in Affinity Designer e Copia (Cmd + C) esso.
Torna al design e seleziona la forma della freccia precedentemente creata (nel menu Livelli pannello). Quindi fare clic Cmd + Alt + V incollarlo in la forma selezionata. Spostalo per tagliare come preferisci. Seleziona la forma della freccia e attenuala fino al 40% di opacità. Clic Cmd + G per mettere la curva in un gruppo e cambiarne Modalità di fusione a partire dal Normale a splendore.
Con il gruppo ancora selezionato prendi il Strumento per la trasparenza (Y) dal menu degli strumenti e creare a Gradiente di sfumatura lineare sul gruppo (clicca e trascina) dal basso verso l'alto. Puoi giocare con lo strumento per ottenere i risultati che ti piacciono.
Ora aggiungiamo un'ombra sotto la nostra freccia. Seleziona il gruppo e vai al effetti pannello. Espandi il Outer Shadow scheda e accenderlo. Il raggio 20pt e l'offset 15pt dovrebbero funzionare bene.
Hai finito! Hai appena creato la tua prima progettazione di app per dispositivi mobili con Affinity Designer. Con un po 'di fortuna, i passaggi ripetitivi durante questo processo ti hanno insegnato un numero di tecniche di flusso di lavoro di Affinity Designer molto utili. Non vedo l'ora di vedere quali altri disegni si fanno con esso!
Accentsconagua