\n Potresti pensare: come \u00e8 collegato tutto questo con il design mobile? Sono contento che tu abbia chiesto! Il motivo risiede nelle dimensioni ridotte dello schermo che dovrebbero contenere solo quei blocchi e opzioni che sono veramente necessari.\n<\/p>\n
\n L'usabilit\u00e0 non \u00e8 ci\u00f2 che vede un cliente, \u00e8 qualcosa che sente quando naviga attraverso un negozio mobile. Fallo sentire a casa.\n<\/p>\n
\n Principio 2: Prototipazione
\n<\/h5>\n
\n Dopo aver raccolto tutte le informazioni necessarie sull'azienda, puoi passare alla progettazione del suo sito mobile. \u00c8 meglio iniziare con un prototipo che semplifica notevolmente il processo. Un prototipo dovrebbe contenere tutti gli elementi strutturali della pagina: blocchi di testo, immagini, collegamenti, pulsanti, intestazioni e titoli, input, ecc. Puoi creare prototipi in diversi programmi come Photoshop o Axure o anche su carta.\n<\/p>\n
\n In primo luogo, un prototipo ti aiuter\u00e0 a comprendere meglio il progetto. Durante la creazione, penserai attentamente a tutti gli elementi e alle loro posizioni, quindi la fase successiva – disegnare il tuo disegno – sar\u00e0 molto pi\u00f9 semplice.\n<\/p>\n \n In secondo luogo, creando un prototipo si risparmia molto tempo sulle correzioni future: \u00e8 meglio farle in questa fase che in quelle successive.\n<\/p>\n \n Prima di creare un prototipo dovresti decidere per quale dispositivo lo creerai: un telefono cellulare o un tablet. Inoltre, considera che ognuno di questi dispositivi ha modalit\u00e0 verticale e orizzontale. Annota tutti gli elementi strutturali che dovresti trovare sul tuo prototipo per non dimenticare nulla.\n<\/p>\n \n Ad esempio, per la pagina principale di un negozio online avremo bisogno di: logo, checkout, barra di ricerca, navigazione, blocchi di prodotti con immagini, titoli, brevi descrizioni e prezzo, nonch\u00e9 del testo generale sul negozio. Una volta enumerati tutti questi elementi, puoi iniziare a creare 4 prototipi: per un telefono cellulare con modalit\u00e0 verticale e orizzontale e per un tablet con modalit\u00e0 verticale e orizzontale.\n<\/p>\n \n Una volta che i tuoi prototipi sono pronti e approvati, puoi iniziare a progettare l'interfaccia.\n<\/p>\n \n Un'interfaccia \u00e8 la prima cosa che un visitatore vede quando arriva in un negozio online. L'interfaccia imposta il tono del negozio che \u00e8 molto importante, quindi la tua missione come designer \u00e8 rendere questo tono positivo e costruire un atteggiamento positivo.\n<\/p>\n \n Aiuta i visitatori a capire rapidamente dove si trovano, cosa possono ottenere, quali funzioni e caratteristiche possono utilizzare. Pu\u00f2 essere ottenuto utilizzando colori specifici, rientri, icone, caratteri. Se devi mostrare il checkout, aggiungi un'icona di checkout; se devi inserire un collegamento, evidenzialo con il colore.\n<\/p>\n \n Ci sono 2 principali peculiarit\u00e0 fondamentali dei dispositivi mobili: le loro dimensioni e il modo in cui un utente interagisce con un sito tramite questi dispositivi: usa le sue dita che sono molto pi\u00f9 grandi di un cursore su un desktop. Dovresti tenere a mente queste peculiarit\u00e0 durante la progettazione per dispositivi mobili.\n<\/p>\n \n Dimensioni dell'area cliccabile:<\/strong>\n <\/p>\n \n A causa delle caratteristiche sopra menzionate dei dispositivi mobili, una dimensione ottimale dell'area cliccabile dovrebbe essere maggiore di 44x44px. Se non vuoi frustrare i tuoi visitatori con clic errati, prova a rendere tutti gli elementi cliccabili (link, pulsanti, barra di ricerca, ecc.) 44x44px o pi\u00f9 grandi per la risoluzione mdpi per dispositivi Android e display non retina per dispositivi iOS. Per altre risoluzioni dovresti ridimensionarlo.\n <\/p>\n<\/li>\n \n Dimensione caratteri:<\/strong>\n <\/p>\n \n Dovresti fornire ai tuoi visitatori opzioni di scansione rapida e non dimenticare allo stesso tempo la loro vista. Ecco perch\u00e9 la dimensione del tuo carattere non dovrebbe essere inferiore a 11pt. Questa dimensione garantisce una buona leggibilit\u00e0 a condizione che venga utilizzata con uno sfondo a contrasto. Tuttavia, 11pt \u00e8 pi\u00f9 adatto per segnaposto, suggerimenti e informazioni meno essenziali. Per descrizioni di prodotti e blocchi di testo importanti 13pt \u00e8 pi\u00f9 adatto.\n <\/p>\n<\/li>\n \n Dimensioni delle immagini del prodotto:<\/strong>\n <\/p>\n \n Non sar\u00e0 un'esagerazione se dico che le immagini dei prodotti sono responsabili della vendita dei prodotti (nella maggior parte dei casi). Molte persone saltano la lettura dei dettagli, hanno solo bisogno di foto che mostrino un prodotto da tutte le angolazioni possibili. Ci\u00f2 significa che le immagini dei prodotti dovrebbero essere evidenti e abbastanza grandi da consentire ai clienti di esaminare un prodotto in dettaglio, puoi persino aggiungere un'opzione di zoom per questo.\n <\/p>\n \n L'immagine di un prodotto deve occupare non meno del 45% della larghezza dello schermo di un telefono cellulare con orientamento verticale; e oltre il 30% in orientamento orizzontale. Ci\u00f2 aiuter\u00e0 un cliente a vedere i dettagli del prodotto in generale e a notare le sue peculiarit\u00e0. Per quanto riguarda i tablet, puoi capire tu stesso la dimensione migliore delle immagini.\n <\/p>\n \n Oltre alle dimensioni delle immagini, dovresti anche tenere conto della qualit\u00e0 delle immagini. Il fatto \u00e8 che la maggior parte dei dispositivi mobili moderni utilizza il display retina, quindi le immagini per la risoluzione del display 360x640px non avranno un bell'aspetto sugli schermi con risoluzioni 720x1280px o 1080x1920px. Dovresti sempre ricordare che la qualit\u00e0 delle immagini \u00e8 una delle cose pi\u00f9 importanti per un negozio online.\n <\/p>\n<\/li>\n \n Dimensioni delle icone:<\/strong>\n <\/p>\n \n Le icone sono percepite molto pi\u00f9 facilmente del testo, ecco perch\u00e9 le icone vengono solitamente utilizzate per i suggerimenti invece del testo. Da un lato, le icone dovrebbero essere evidenti; ma d'altra parte, non dovrebbero essere troppo prominenti in quanto svolgono un ruolo secondario. Ad esempio, se aggiungi una barra di ricerca con un'altezza di 44 px, aggiungi una lente d'ingrandimento di 24\u044524 px. Questo sarebbe sufficiente per l'utente per capire lo scopo di questa barra e sembrer\u00e0 carino.\n <\/p>\n<\/li>\n \n Dimensioni dei moduli:<\/strong>\n <\/p>\n \n Di seguito ho parlato delle dimensioni dei singoli elementi, ora \u00e8 il momento di parlare delle dimensioni di un blocco importante: la forma.\n <\/p>\n \n Le dimensioni del display di un telefono cellulare sono limitate e quando un cliente deve compilare un modulo, viene visualizzata una tastiera che si sovrappone a circa la met\u00e0 delle dimensioni dello schermo. Questa particolarit\u00e0 richiede di mantenere le forme mobili il pi\u00f9 minimaliste possibile. Dovrebbero contenere solo i campi realmente necessari: ad esempio nome, indirizzo, e-mail. A proposito, questa regola pu\u00f2 essere applicata anche ai siti desktop se vuoi aumentare i lead: meno campi ha un modulo, pi\u00f9 \u00e8 probabile che le persone lo inviino.\n <\/p>\n \n Un percorso lungo e noioso da un ingresso all'altro pu\u00f2 frustrare un cliente e farlo uscire dal negozio.\n <\/p>\n<\/li>\n<\/ul>\n \n Lo stile del marchio dovrebbe essere osservato non solo nel logo, nei biglietti da visita e negli opuscoli, ma anche in un sito mobile. \u00c8 principalmente il colore che aiuta a mostrare lo stile del marchio e a evidenziare l'elemento chiave di ogni pagina.\n<\/p>\n \n Prima di progettare un'interfaccia, dovresti pensare a quali colori verranno utilizzati e creare una tavolozza. Se usi pochi colori, l'interfaccia sembrer\u00e0 noiosa; se usi troppi colori, l'interfaccia sembrer\u00e0 troppo disordinata e distraente. Quindi \u00e8 meglio mantenere l'equilibrio e usare 6-10 colori. Questo \u00e8 un numero ottimale ma ovviamente potrebbero esserci alcune eccezioni.\n<\/p>\n \n Ecco una guida passo-passo sulla scelta dei colori per un sito di e-commerce:\n<\/p>\n \n Le combinazioni di colori che hai creato dovrebbero essere armoniose. Ricorda il contrasto in quanto aiuta ad attirare l'attenzione dei visitatori sugli elementi pi\u00f9 importanti, ad esempio sul pulsante “Aggiungi al carrello”.\n<\/p>\n \n Come per i colori, puoi creare una “tavolozza” per i caratteri che utilizzerai: crea un elenco dei nomi, delle dimensioni e degli stili dei caratteri.\n<\/p>\n \n I caratteri dovrebbero avere un'elevata leggibilit\u00e0 e trasmettere facilmente le informazioni ai potenziali clienti. Evita quindi font troppo complessi e difficili da leggere: i clienti non perderanno tempo a cercare di capire cosa stai cercando di offrire.\n<\/p>\n \n La tua “tavolozza” di font potrebbe sembrare un semplice file txt in cui salvi le seguenti informazioni:\n<\/p>\n \n Titolo 1 \u2013 RobotoLight 36pt\n<\/p>\n \n Sta a te decidere quale carattere usare per questo o quell'elemento. Ogni carattere ha il proprio significato e carattere che verr\u00e0 trasmesso al sito, quindi dovresti fare attenzione a scegliere i caratteri giusti.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\")
<\/a><\/p>\n<\/a><\/p>\n\n Principio 3: Interfaccia
\n<\/h5>\n<\/a><\/p>\n\n Principio 4: Dimensioni
\n<\/h5>\n<\/a><\/p>\n\n
\n Principio 5: Colore
\n<\/h5>\n\n
<\/a><\/p>\n\n Principio 6: Font
\n<\/h5>\n