\n Puedes pensar: \u00bfc\u00f3mo se relaciona todo esto con el dise\u00f1o m\u00f3vil? \u00a1Me alegro de que hayas preguntado! La raz\u00f3n radica en los tama\u00f1os de pantalla peque\u00f1os que deben contener solo aquellos bloques y opciones que realmente se necesitan.\n<\/p>\n
\n La usabilidad no es lo que ve un cliente, es algo que siente cuando navega por una tienda m\u00f3vil. Que se sienta como en casa.\n<\/p>\n
\n Principio 2: Prototipos
\n<\/h5>\n
\n Una vez que haya recopilado toda la informaci\u00f3n necesaria sobre la empresa, puede comenzar a dise\u00f1ar su sitio m\u00f3vil. Es mejor comenzar con un prototipo que simplifica mucho el proceso. Un prototipo debe contener todos los elementos estructurales de la p\u00e1gina: bloques de texto, im\u00e1genes, enlaces, botones, encabezados y t\u00edtulos, entradas, etc. Puedes crear prototipos en diferentes programas como Photoshop o Axure o incluso en papel.\n<\/p>\n
\n En primer lugar, un prototipo te ayudar\u00e1 a comprender mejor el proyecto. Mientras lo crea, pensar\u00e1 cuidadosamente en todos los elementos y sus posiciones, por lo que la siguiente etapa, dibujar su dise\u00f1o, ser\u00e1 mucho m\u00e1s f\u00e1cil.\n<\/p>\n \n En segundo lugar, al crear un prototipo ahorras mucho tiempo en futuras correcciones: es mejor hacerlas en esta etapa que en las siguientes.\n<\/p>\n \n Antes de crear un prototipo debes decidir para qu\u00e9 dispositivo lo vas a crear: un tel\u00e9fono m\u00f3vil o una tableta. Adem\u00e1s, considera que cada uno de estos dispositivos tiene modos de retrato y paisaje. Anota todos los elementos estructurales que se deben encontrar en tu prototipo para no olvidar nada.\n<\/p>\n \n Por ejemplo, para la p\u00e1gina principal de una tienda online necesitaremos: logotipo, pago, barra de b\u00fasqueda, navegaci\u00f3n, bloques de productos con im\u00e1genes, t\u00edtulos, descripciones breves y precio, as\u00ed como alg\u00fan texto general sobre la tienda. Una vez enumerados todos estos elementos, puedes comenzar a crear 4 prototipos: para un tel\u00e9fono m\u00f3vil con modos vertical y horizontal y para una tableta con modos vertical y horizontal.\n<\/p>\n \n Una vez que sus prototipos est\u00e9n listos y aprobados, puede comenzar a dise\u00f1ar la interfaz.\n<\/p>\n \n Una interfaz es lo primero que ve un visitante cuando aterriza en una tienda en l\u00ednea. La interfaz establece el tono de la tienda, lo cual es muy importante, por lo que su misi\u00f3n como dise\u00f1ador es hacer que este tono sea positivo y generar una actitud positiva.\n<\/p>\n \n Ayude a los visitantes a comprender r\u00e1pidamente d\u00f3nde est\u00e1n, qu\u00e9 pueden obtener, qu\u00e9 funciones y caracter\u00edsticas pueden usar. Se puede lograr mediante el uso de colores espec\u00edficos, sangr\u00edas, \u00edconos, fuentes. Si necesita mostrar el pago, agregue un \u00edcono de pago; si necesita insertar un enlace, res\u00e1ltelo con color.\n<\/p>\n \n Hay 2 principales peculiaridades fundamentales de los dispositivos m\u00f3viles: su tama\u00f1o y la forma en que un usuario interact\u00faa con un sitio a trav\u00e9s de estos dispositivos: usa sus dedos que son mucho m\u00e1s grandes que un cursor en una computadora de escritorio. Debe tener en cuenta estas peculiaridades al dise\u00f1ar para dispositivos m\u00f3viles.\n<\/p>\n \n Tama\u00f1o del \u00e1rea en la que se puede hacer clic:<\/strong>\n <\/p>\n \n Debido a las caracter\u00edsticas mencionadas anteriormente de los dispositivos m\u00f3viles, el tama\u00f1o \u00f3ptimo del \u00e1rea en la que se puede hacer clic debe ser mayor que 44x44px. Si no quiere frustrar a sus visitantes con clics err\u00f3neos, intente hacer que todos los elementos en los que se pueda hacer clic (enlaces, botones, barra de b\u00fasqueda, etc.) tengan una resoluci\u00f3n mdpi de 44 x 44 p\u00edxeles o mayor para dispositivos Android y pantallas que no sean retina para dispositivos iOS.. Para otras resoluciones, debe ampliarlo.\n <\/p>\n<\/li>\n \n Tama\u00f1o de fuente:<\/strong>\n <\/p>\n \n Debe proporcionar a sus visitantes opciones de escaneo r\u00e1pido y no olvidarse de su vista al mismo tiempo. Es por eso que el tama\u00f1o de la fuente no debe ser inferior a 11 pt. Este tama\u00f1o garantiza una buena legibilidad siempre que se utilice con un fondo de contraste. Sin embargo, 11pt es m\u00e1s adecuado para marcadores de posici\u00f3n, sugerencias e informaci\u00f3n menos esencial. Para descripciones de productos y bloques de texto importantes, 13pt es m\u00e1s adecuado.\n <\/p>\n<\/li>\n \n Tama\u00f1o de las im\u00e1genes del producto:<\/strong>\n <\/p>\n \n No ser\u00e1 una exageraci\u00f3n si digo que las im\u00e1genes de los productos son las responsables de vender los productos (en la mayor\u00eda de los casos). Muchas personas se saltan la lectura de los detalles, solo necesitan fotos que muestren un producto desde todos los \u00e1ngulos posibles. Esto significa que las im\u00e1genes de los productos deben ser notables y lo suficientemente grandes como para permitir que los clientes examinen un producto en detalle, incluso puede agregar una opci\u00f3n de zoom para eso.\n <\/p>\n \n La imagen de un producto debe ocupar no menos del 45% del ancho de la pantalla de un tel\u00e9fono m\u00f3vil en orientaci\u00f3n vertical; y m\u00e1s del 30% en orientaci\u00f3n apaisada. Esto ayudar\u00e1 a un cliente a ver los detalles del producto en general, as\u00ed como a notar sus peculiaridades. En lo que respecta a las tabletas, usted mismo puede averiguar el mejor tama\u00f1o de las im\u00e1genes.\n <\/p>\n \n Adem\u00e1s del tama\u00f1o de las im\u00e1genes, tambi\u00e9n debe tener en cuenta la calidad de las im\u00e1genes. El problema es que la mayor\u00eda de los dispositivos m\u00f3viles modernos usan pantalla retina, por lo que las im\u00e1genes con una resoluci\u00f3n de pantalla de 360x640px no se ver\u00e1n bien en pantallas con resoluciones de 720x1280px o 1080x1920px. Siempre debes recordar que la calidad de las im\u00e1genes es una de las cosas m\u00e1s importantes para una tienda en l\u00ednea.\n <\/p>\n<\/li>\n \n Tama\u00f1o de los iconos:<\/strong>\n <\/p>\n \n Los \u00edconos se perciben mucho m\u00e1s f\u00e1cilmente que el texto, es por eso que los \u00edconos generalmente se usan para sugerencias en lugar de texto. Por un lado, los \u00edconos deben ser notorios; pero por otro lado, no deben ser demasiado prominentes ya que juegan un papel secundario. Por ejemplo, si agrega una barra de b\u00fasqueda con una altura de 44 px, agregue una lupa de 24 x 24 px de tama\u00f1o. Esto ser\u00eda suficiente para que el usuario comprenda el prop\u00f3sito de esta barra y se ver\u00e1 bien.\n <\/p>\n<\/li>\n \n Tama\u00f1o de las formas:<\/strong>\n <\/p>\n \n A continuaci\u00f3n, he hablado sobre los tama\u00f1os de los elementos individuales, ahora es el momento de hablar sobre el tama\u00f1o de un bloque importante: la forma.\n <\/p>\n \n El tama\u00f1o de la pantalla de un tel\u00e9fono m\u00f3vil es limitado, y cuando un cliente necesita completar un formulario, aparece un teclado y se superpone aproximadamente a la mitad del tama\u00f1o de la pantalla. Esta peculiaridad requiere mantener las formas m\u00f3viles lo m\u00e1s minimalistas posible. Deben contener s\u00f3lo aquellos campos que son realmente necesarios: por ejemplo, nombre, direcci\u00f3n, correo electr\u00f3nico. Por cierto, esta regla tambi\u00e9n se puede aplicar a los sitios de escritorio si desea aumentar los clientes potenciales: cuantos menos campos tenga un formulario, es probable que m\u00e1s personas lo env\u00eden.\n <\/p>\n \n Un camino largo y aburrido de una entrada a otra puede frustrar a un cliente y hacer que abandone la tienda.\n <\/p>\n<\/li>\n<\/ul>\n \n El estilo de la marca debe observarse no solo en el logotipo, las tarjetas de visita y los folletos, sino tambi\u00e9n en un sitio m\u00f3vil. Es principalmente el color lo que ayuda a mostrar el estilo de la marca, as\u00ed como a resaltar el elemento clave de cada p\u00e1gina.\n<\/p>\n \n Antes de dise\u00f1ar una interfaz, debe pensar qu\u00e9 colores se utilizar\u00e1n y crear una paleta. Si usa pocos colores, la interfaz se ver\u00e1 aburrida; si usa demasiados colores, la interfaz se ver\u00e1 demasiado desordenada y distra\u00edda. As\u00ed que es mejor mantener el equilibrio y usar de 6 a 10 colores. Este es un n\u00famero \u00f3ptimo pero, por supuesto, puede haber algunas excepciones.\n<\/p>\n \n Aqu\u00ed hay una gu\u00eda paso a paso para elegir colores para un sitio de comercio electr\u00f3nico:\n<\/p>\n \n Las combinaciones de colores que ha creado deben ser armoniosas. Recuerde el contraste, ya que ayuda a atraer la atenci\u00f3n de los visitantes a los elementos m\u00e1s importantes, por ejemplo, al bot\u00f3n \u00abAgregar al carrito\u00bb.\n<\/p>\n \n Al igual que con los colores, puede crear una \u00abpaleta\u00bb para las fuentes que va a utilizar: haga una lista de los nombres, tama\u00f1os y estilos de las fuentes.\n<\/p>\n \n Las fuentes deben tener una alta legibilidad y transmitir f\u00e1cilmente la informaci\u00f3n a los clientes potenciales. Por lo tanto, evita las fuentes demasiado complejas y dif\u00edciles de leer: los clientes no perder\u00e1n el tiempo tratando de entender lo que intentas ofrecer.\n<\/p>\n \n Su \u00abpaleta\u00bb de fuentes puede verse como un simple archivo txt donde guarda la siguiente informaci\u00f3n:\n<\/p>\n \n T\u00edtulo 1 \u2013 RobotoLight 36pt\n<\/p>\n \n Depende de usted decidir qu\u00e9 fuente usar para este o aquel elemento. Cada fuente tiene su propio significado y car\u00e1cter que se transmitir\u00e1 al sitio, por lo que debe tener cuidado al elegir las fuentes correctas.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\")
<\/a><\/p>\n<\/a><\/p>\n\n Principio 3: Interfaz
\n<\/h5>\n<\/a><\/p>\n\n Principio 4: Tama\u00f1os
\n<\/h5>\n<\/a><\/p>\n\n
\n Principio 5: Color
\n<\/h5>\n\n
<\/a><\/p>\n\n Principio 6: Fuentes
\n<\/h5>\n