\n Voc\u00ea pode pensar: como tudo isso est\u00e1 conectado com o design m\u00f3vel? Estou feliz que voc\u00ea perguntou! O motivo est\u00e1 nos tamanhos de tela pequenos que devem conter apenas os blocos e op\u00e7\u00f5es realmente necess\u00e1rios.\n<\/p>\n
\n Usabilidade n\u00e3o \u00e9 o que o cliente v\u00ea, \u00e9 algo que ele sente quando navega em uma loja mobile. Deixe-o se sentir em casa.\n<\/p>\n
\n Princ\u00edpio 2: Prototipagem
\n<\/h5>\n
\n Depois de coletar todas as informa\u00e7\u00f5es necess\u00e1rias sobre a empresa, voc\u00ea pode come\u00e7ar a projetar seu site para celular. \u00c9 melhor come\u00e7ar com um prot\u00f3tipo que simplifica muito o processo. Um prot\u00f3tipo deve conter todos os elementos estruturais da p\u00e1gina: blocos de texto, imagens, links, bot\u00f5es, cabe\u00e7alhos e t\u00edtulos, entradas, etc. Voc\u00ea pode criar prot\u00f3tipos em diferentes programas como Photoshop ou Axure ou at\u00e9 mesmo no papel.\n<\/p>\n
\n Em primeiro lugar, um prot\u00f3tipo ajudar\u00e1 voc\u00ea a entender melhor o projeto. Ao cri\u00e1-lo, voc\u00ea pensar\u00e1 cuidadosamente sobre todos os elementos e suas posi\u00e7\u00f5es, para que a pr\u00f3xima etapa \u2013 desenhar seu design \u2013 seja muito mais f\u00e1cil.\n<\/p>\n \n Em segundo lugar, ao criar um prot\u00f3tipo voc\u00ea economiza muito tempo em corre\u00e7\u00f5es futuras: \u00e9 melhor faz\u00ea-las nesta etapa do que nas pr\u00f3ximas.\n<\/p>\n \n Antes de criar um prot\u00f3tipo deve decidir para que dispositivo o vai criar: um telem\u00f3vel ou um tablet. Al\u00e9m disso, considere que cada um desses dispositivos possui modos retrato e paisagem. Anote todos os elementos estruturais que devem ser encontrados em seu prot\u00f3tipo para n\u00e3o esquecer de nada.\n<\/p>\n \n Por exemplo, para a p\u00e1gina principal de uma loja online precisaremos de: logotipo, checkout, barra de pesquisa, navega\u00e7\u00e3o, blocos de produtos com imagens, t\u00edtulos, breves descri\u00e7\u00f5es e pre\u00e7o, bem como algum texto geral sobre a loja. Uma vez enumerados todos estes elementos, pode come\u00e7ar a criar 4 prot\u00f3tipos: para um telem\u00f3vel com modos retrato e paisagem e para um tablet com modos retrato e paisagem.\n<\/p>\n \n Depois que seus prot\u00f3tipos estiverem prontos e aprovados, voc\u00ea pode come\u00e7ar a projetar a interface.\n<\/p>\n \n Uma interface \u00e9 a primeira coisa que um visitante v\u00ea quando chega a uma loja online. A interface define o tom da loja, o que \u00e9 muito importante, ent\u00e3o sua miss\u00e3o como designer \u00e9 tornar esse tom positivo e construir uma atitude positiva.\n<\/p>\n \n Ajude os visitantes a entender rapidamente onde est\u00e3o, o que podem obter, quais fun\u00e7\u00f5es e recursos podem usar. Isso pode ser obtido pelo uso de cores espec\u00edficas, recuos, \u00edcones e fontes. Se voc\u00ea precisar mostrar o checkout \u2013 adicione um \u00edcone de checkout; se precisar inserir um link \u2013 destaque-o com cores.\n<\/p>\n \n Existem 2 principais peculiaridades fundamentais dos dispositivos m\u00f3veis: seu tamanho e a forma como um usu\u00e1rio interage com um site por meio desses dispositivos: ele usa seus dedos que s\u00e3o muito maiores que um cursor em um desktop. Voc\u00ea deve ter essas peculiaridades em mente ao projetar para dispositivos m\u00f3veis.\n<\/p>\n \n Tamanho da \u00e1rea clic\u00e1vel:<\/strong>\n <\/p>\n \n Devido \u00e0s caracter\u00edsticas acima mencionadas dos dispositivos m\u00f3veis, um tamanho de \u00e1rea clic\u00e1vel ideal deve ser maior que 44x44px. Se voc\u00ea n\u00e3o quiser frustrar seus visitantes com cliques errados, tente fazer todos os elementos clic\u00e1veis \u200b\u200b(links, bot\u00f5es, barra de pesquisa, etc.) 44x44px ou maior para resolu\u00e7\u00e3o mdpi para dispositivos Android e telas sem retina para dispositivos iOS. Para outras resolu\u00e7\u00f5es, voc\u00ea deve escal\u00e1-lo.\n <\/p>\n<\/li>\n \n Tamanho das Fontes:<\/strong>\n <\/p>\n \n Voc\u00ea deve fornecer aos seus visitantes op\u00e7\u00f5es de escaneamento r\u00e1pido e n\u00e3o se esquecer de sua vis\u00e3o ao mesmo tempo. \u00c9 por isso que o tamanho da fonte n\u00e3o deve ser inferior a 11pt. Este tamanho garante boa legibilidade, desde que seja usado com fundo contrastante. No entanto, 11pt \u00e9 mais adequado para espa\u00e7os reservados, dicas e informa\u00e7\u00f5es menos essenciais. Para descri\u00e7\u00f5es de produtos e blocos de texto importantes, 13pt \u00e9 mais adequado.\n <\/p>\n<\/li>\n \n Imagens do produto Tamanho:<\/strong>\n <\/p>\n \n N\u00e3o ser\u00e1 exagero se eu disser que as imagens dos produtos s\u00e3o as respons\u00e1veis \u200b\u200bpela venda dos produtos (na maioria dos casos). Muitas pessoas pulam a leitura dos detalhes, elas s\u00f3 precisam de fotos que mostrem um produto de todos os \u00e2ngulos poss\u00edveis. Isso significa que as imagens do produto devem ser percept\u00edveis e grandes o suficiente para permitir que os clientes examinem um produto em detalhes, voc\u00ea pode at\u00e9 adicionar uma op\u00e7\u00e3o de zoom para isso.\n <\/p>\n \n A imagem de um produto n\u00e3o deve ocupar menos de 45% da largura da tela de um telefone celular na orienta\u00e7\u00e3o retrato; e mais de 30% na orienta\u00e7\u00e3o paisagem. Isso ajudar\u00e1 o cliente a ver os detalhes do produto em geral, bem como perceber suas peculiaridades. No que diz respeito aos tablets, voc\u00ea mesmo pode descobrir o melhor tamanho de imagem.\n <\/p>\n \n Al\u00e9m do tamanho das imagens, voc\u00ea tamb\u00e9m deve se preocupar com a qualidade das imagens. O fato \u00e9 que a maioria dos dispositivos m\u00f3veis modernos usa tela retina, ent\u00e3o imagens para resolu\u00e7\u00e3o de tela de 360x640px n\u00e3o ficar\u00e3o boas em telas com resolu\u00e7\u00e3o de 720x1280px ou 1080x1920px. Voc\u00ea deve sempre lembrar que a qualidade das imagens \u00e9 uma das coisas mais importantes para uma loja online.\n <\/p>\n<\/li>\n \n Tamanho dos \u00edcones:<\/strong>\n <\/p>\n \n Os \u00edcones s\u00e3o percebidos com muito mais facilidade do que o texto, \u00e9 por isso que os \u00edcones geralmente s\u00e3o usados \u200b\u200bpara dicas em vez de texto. Por um lado, os \u00edcones devem ser percept\u00edveis; mas, por outro lado, n\u00e3o devem ser muito proeminentes, pois desempenham um papel secund\u00e1rio. Por exemplo, se voc\u00ea adicionar uma barra de pesquisa com 44px de altura, adicione uma lupa de tamanho 24\u044524px. Isso seria o suficiente para o usu\u00e1rio entender o prop\u00f3sito desta barra, e ela ficaria bonita.\n <\/p>\n<\/li>\n \n Tamanho dos formul\u00e1rios:<\/strong>\n <\/p>\n \n Abaixo eu falei sobre tamanhos de elementos individuais, agora \u00e9 hora de falar sobre o tamanho de um bloco importante \u2013 forma.\n <\/p>\n \n O tamanho da tela de um telefone celular \u00e9 limitado e, quando um cliente precisa preencher um formul\u00e1rio, um teclado aparece e se sobrep\u00f5e a cerca de metade do tamanho da tela. Essa peculiaridade exige manter as formas m\u00f3veis o mais minimalistas poss\u00edvel. Eles devem conter apenas os campos que s\u00e3o realmente necess\u00e1rios: por exemplo, nome, endere\u00e7o, e-mail. A prop\u00f3sito, essa regra tamb\u00e9m pode ser aplicada a sites de desktop se voc\u00ea quiser aumentar os leads: quanto menos campos um formul\u00e1rio tiver, mais pessoas provavelmente o enviar\u00e3o.\n <\/p>\n \n Um caminho longo e enfadonho de um insumo a outro pode frustrar um cliente e faz\u00ea-lo sair da loja.\n <\/p>\n<\/li>\n<\/ul>\n \n O estilo da marca deve ser observado n\u00e3o apenas no logotipo, cart\u00f5es de visita e folhetos, mas tamb\u00e9m em um site m\u00f3vel. \u00c9 principalmente a cor que ajuda a mostrar o estilo da marca, bem como destacar o elemento-chave de cada p\u00e1gina.\n<\/p>\n \n Antes de projetar uma interface, voc\u00ea deve pensar em quais cores ser\u00e3o usadas e criar uma paleta. Se voc\u00ea usar poucas cores, a interface ficar\u00e1 chata; se voc\u00ea usar muitas cores, a interface parecer\u00e1 muito confusa e distrativa. Portanto, \u00e9 melhor manter o equil\u00edbrio e usar de 6 a 10 cores. Este \u00e9 um n\u00famero ideal, mas \u00e9 claro que pode haver algumas exce\u00e7\u00f5es.\n<\/p>\n \n Aqui est\u00e1 um guia passo a passo para escolher cores para um site de com\u00e9rcio eletr\u00f4nico:\n<\/p>\n \n As combina\u00e7\u00f5es de cores que voc\u00ea criou devem ser harmoniosas. Lembre-se do contraste, pois ajuda a atrair a aten\u00e7\u00e3o dos visitantes para os elementos mais importantes, por exemplo, o bot\u00e3o “Adicionar ao carrinho”.\n<\/p>\n \n Assim como nas cores, voc\u00ea pode criar uma “paleta” para as fontes que vai usar: fa\u00e7a uma lista com os nomes, tamanhos e estilos das fontes.\n<\/p>\n \n As fontes devem ter alta legibilidade e transmitir facilmente as informa\u00e7\u00f5es aos clientes em potencial. Portanto, evite fontes muito complexas e dif\u00edceis de ler: o cliente n\u00e3o perder\u00e1 tempo tentando entender o que voc\u00ea est\u00e1 tentando oferecer.\n<\/p>\n \n Sua “paleta” de fonte pode parecer um simples arquivo txt onde voc\u00ea salva as seguintes informa\u00e7\u00f5es:\n<\/p>\n \n T\u00edtulo 1 \u2013 RobotoLight 36pt\n<\/p>\n \n Cabe a voc\u00ea decidir qual fonte usar para este ou aquele elemento. Cada fonte tem seu pr\u00f3prio significado e caractere que ser\u00e1 passado para o site, ent\u00e3o voc\u00ea deve ter cuidado ao escolher as fontes certas.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\")
<\/a><\/p>\n<\/a><\/p>\n\n Princ\u00edpio 3: Interface
\n<\/h5>\n<\/a><\/p>\n\n Princ\u00edpio 4: Tamanhos
\n<\/h5>\n<\/a><\/p>\n\n
\n Princ\u00edpio 5: Cor
\n<\/h5>\n\n
<\/a><\/p>\n\n Princ\u00edpio 6: Fontes
\n<\/h5>\n