¿Cómo diseñar una web para usuarios chinos?

Busca este tema en español y casi todo lo útil que aparece está en inglés, con el mismo consejo: las webs chinas están cargadas, así que carga la tuya y añade rojo. Casi todo sale de capturas comparadas, y parte tiene más de diez años.

Las pruebas dicen algo más útil y más fácil de aplicar a una web española. Esta guía forma parte de nuestro trabajo sobre cómo traducir y localizar una web para China.

¿De verdad quieren webs cargadas los usuarios chinos?

No exactamente. Aceptan la densidad, pero la complejidad sigue frenándolos. La mejor prueba que hemos encontrado es de Nielsen Norman Group, de 2016.¹

Pidió a 6 usuarios chinos y a 6 extranjeros residentes en China que hicieran tareas en webs de ordenador, desde las más sencillas hasta las de tipo portal.¹ Los resultados tienen dos caras:

• Los usuarios chinos vieron normales las páginas densas, y juzgaron que a algunas webs minimalistas les faltaba contenido útil.¹
• Aun así, los participantes tardaron más en las webs complicadas y mostraron más duda y ansiedad.¹
• Muchos problemas coincidían con los observados en Occidente, como un carrusel que daba dificultades o una navegación que atrapaba al usuario en un subsitio.¹

Así queda frente a lo que suele repetirse.

Fuente	Qué dice	En qué se apoya
Chinafy, 2023	Webs «más cargadas y complejas» 25	Ejemplos de marcas y lecturas citadas, sin prueba de usuarios propia
FINN Partners, 2012	QQ.com tiene 92 enlaces de navegación 26	Un recuento de enlaces de 2012
Sinorbis, 2017	Las páginas usan todo su espacio, en bloques pequeños 27	Comparaciones de webs, sin estudio externo
Thoughtworks, 2021	La historia, el idioma y la competencia lo explican 28	Suposiciones, en palabras del propio autor
Nielsen Norman Group, 2016	Más sencillo ayuda, minimalista no 1	Tareas observadas, 12 participantes

Las explicaciones de esa densidad tampoco pasan de ser opiniones. Ninguno de los artículos anteriores demostró una causa, así que no diseñes a partir de una teoría sobre la cultura china.

¿Qué significa «más sencillo, no minimalista» en una página real?

Significa más contenido en cada página, en bloques claros y sin nada escondido. Las normas de página de Baidu apuntan en la misma dirección, al menos en móvil.

La tabla siguiente es nuestra lectura de las pruebas. Las normas de Baidu de 2020 están escritas para páginas de su búsqueda móvil, no podemos confirmar que hoy siga aplicando estos valores, y los cambios son criterios de diseño, no recetas probadas.

Costumbre occidental	Cambio para las páginas chinas	Prueba
Cabecera a pantalla completa con un eslogan	Pon contenido real en la primera pantalla	Más del 50 % de la pantalla, Baidu 2020 6. Su lista de 2023 señala una primera pantalla plegada por debajo del 50 % 8
Una línea por servicio	Una descripción breve y un enlace para cada uno	Las webs minimalistas parecen menos útiles 1
Buscador escondido tras un icono	Muestra la caja de búsqueda, si la tienes	Los iconos dieron problemas en la prueba 1
Carrusel rotatorio	Bloques fijos	Un carrusel dio dificultades a los usuarios 1
Una sola página muy larga	Secciones claras, nombres de categoría, migas de pan	Baidu 2019 pide nombres de categoría visibles y migas de pan, y no dice nada de la longitud 29
Texto dentro de imágenes	Texto real	Guía de Baidu de 2014, antigua 30

Conviene conocer dos límites:

• Las normas de página de Baidu dicen que el contenido principal debe situarse en el centro de la primera pantalla, y que los anuncios en la parte superior de esa pantalla no pueden superar el 10 % de una pantalla.⁶
• Sinorbis dice que las páginas chinas suelen tener «2 pantallas completas o menos».²⁷ Es una observación de 2017 sin fuente, así que no la tomes como objetivo.

Nuestra guía sobre SEO móvil en Baidu recoge todas las normas.

A la izquierda, plantilla occidental

• Imagen a pantalla completa
• Eslogan
• Botón

A la derecha, versión china

• Qué hace la empresa
• Para quién
• Enlaces a cada servicio
• Prueba
• Contacto visible

VS

¿Para qué pantallas hay que diseñar?

Para móvil y para ordenador. «Primero el móvil» vale para la mayor parte del tráfico chino, pero las dos principales fuentes de datos muestran por qué no puede significar «solo móvil».

Fuente	Qué mide	Móvil	Ordenador
CNNIC, diciembre de 2025	Porcentaje de internautas que se conectan así	99,6 % 235	32,5 % 235
StatCounter, octubre de 2026	Porcentaje del tráfico de páginas que registra	55,87 % 3	42,78 % 3

No se contradicen, porque cuentan cosas distintas. Casi todo el mundo usa el móvil, mientras que una gran parte de las páginas sigue cargándose en un ordenador. CNNIC cuenta además los portátiles aparte, con un 31,2 %, así que su cifra de ordenador se queda corta.²³⁵

Tus compradores pueden estar en cualquiera de los dos lados. La investigación B2B de Nielsen Norman Group no da un reparto, así que mira tu propia analítica cuando la tengas.

Los datos de StatCounter de octubre de 2026 también te dan una lista de pruebas práctica.⁴⁵

Prueba en	Por qué
1920x1080	La resolución más común, 11,59 % 4
414x896, 390x844	Tamaños de móvil comunes, 8,14 % y 3 % 4
360x800	El más estrecho de los tamaños principales, 5,31 % 4
Chrome, Edge, Safari	50,2 %, 16,07 %, 15,89 % del tráfico de navegadores 5
UC, 360 Safe, QQ Browser	5,77 %, 4,55 %, 4,35 % 5

La lista principal de StatCounter no menciona el navegador integrado de WeChat, así que no podemos decir cuánto tráfico lleva. Pruébalo de todos modos, porque quien llegue a ti por WeChat puede ver tu página ahí.

¿Qué ajustes tipográficos necesita el texto chino?

Empieza con texto de 14 px y una altura de línea de 22 px. Ahí coinciden las normas publicadas por Baidu y Ant Design, un sistema de diseño publicado en chino y en inglés.

Los caracteres chinos son complejos, de modo que los tamaños pequeños perjudican la lectura,²⁶ y los ajustes copiados de una web en alfabeto latino pueden quedar demasiado apretados. Los valores siguientes están publicados, cada uno con su contexto.

Ajuste	Valor	Fuente y contexto
Tamaño del texto	14 px recomendado, mínimo 10 px	Baidu móvil, 2016 7
Tamaño del texto	Al menos 10 pt	Baidu, 2020 6
Tamaño base y altura de línea	14 px sobre 22 px	Ant Design, para lectura en ordenador 10
Altura de línea	Más de 1,4 veces el tamaño	Baidu, 2020 6
Espacio entre líneas	De 0,42 a 0,6 veces el tamaño	Baidu móvil, 2016 7
Zonas táctiles	Más de 40 px de ancho y de alto	Baidu móvil, 2016 7
Longitud de línea	48 caracteres como máximo, en impresión	Borrador de W3C 9
Separación entre chino y alfabeto latino	Un cuarto de carácter como máximo	Borrador de W3C 9

Las cifras encajan mejor de lo que cabría esperar. A 14 px, el espaciado de Baidu de 2016 da líneas de unos 20 a 22 px, y 10 pt equivalen a unos 13,3 px en unidades CSS, si es esa la unidad a la que se refiere Baidu.

El tamaño estándar de W3C para el texto impreso, 10,5 pt, también equivale exactamente a 14 px en unidades CSS.⁹ Impresión y pantalla son contextos distintos, así que tómalo como una coincidencia útil, no como una norma.

La longitud de línea sirve de comprobación. A 14 px, 48 caracteres son 672 px, así que una columna de texto más ancha resulta demasiado larga según la medida de impresión de W3C.⁹

El móvil plantea el problema contrario. Una pantalla de 360 px con márgenes de 16 px admite solo unos 23 caracteres a 14 px, de modo que los párrafos breves importan todavía más.

Un punto de partida para tus plantillas en chino sería este:

:lang(zh-Hans) p {
  font-size: 14px;
  line-height: 22px;
  max-width: 48em;
  text-autospace: normal;
}
:lang(zh-Hans) em {
  font-style: normal;
  font-weight: 700;
}

¿Por qué esas últimas líneas?

• text-autospace añade la pequeña separación entre texto chino y latino, para que nadie teclee espacios a mano. MDN da normal como valor inicial, así que esta línea solo te protege de un reset en otra parte de tu CSS. Es Baseline desde noviembre de 2025, de modo que los navegadores antiguos la ignorarán.¹¹
• La cursiva se desactiva porque el documento de W3C trata de la negrita y de los puntos de énfasis, y no hemos encontrado en él ninguna mención a la cursiva.⁹ Thoughtworks añade que las fuentes chinas carecen de estilos comparables.²⁸ Es una prueba débil, pero la negrita simple es la opción segura.
• La negrita es 700 porque Microsoft solo enumera Light, Regular y Bold para YaHei.¹⁵ Ant Design propone 400 y 500,¹⁰ pero un 500 puede no notarse en Windows.

Pon bien el atributo lang

Usa lang="zh-Hans" en tus páginas en chino.¹³ Un mismo punto de código Unicode puede adoptar glifos distintos según la convención regional,¹² y W3C dice que los navegadores pueden usar la etiqueta de idioma para elegir una fuente adecuada.³²

W3C explica que las normas tipográficas siguen más a las regiones que a las escrituras. La puntuación del continente va abajo y a la izquierda de su caja, mientras que Taiwán y Hong Kong la centran.⁹

Nuestra guía sobre chino simplificado o tradicional trata esa elección.

Qué fuentes cargar es otra cuestión. Usa fuentes del sistema para el texto chino. Nuestra guía sobre fuentes y contenido incrustado en China explica por qué, con los tamaños de archivo.

¿Se puede usar cualquier fuente china?

No. Ninguna de las guías de diseño que hemos leído menciona este riesgo, y va más allá del rendimiento. Revisa la licencia de cada fuente china que aparezca en tu logotipo, tus imágenes o tus archivos de fuente servidos.

Microsoft YaHei es el caso más conocido. Microsoft obtuvo sus glifos bajo licencia de Beijing Founder, su aviso de copyright nombra también a Founder por partes de la fuente, y remite a los desarrolladores web a una licencia aparte.¹⁵

Un reportaje de Securities Times de 2019 describe a una startup de Shenzhen que usaba YaHei en su marca, su cuenta de WeChat y su web.¹⁶

Cuenta que Founder envió una carta de abogado y que la empresa borró sus contenidos de marca anteriores.¹⁶

Los desenlaces varían. El mismo reportaje dice, con datos de Tianyancha, que los casos de Founder acabaron sobre todo con su propio desistimiento. Cita a un profesional del derecho que considera bastante seguros los derechos de autor de Founder sobre sus fuentes, y a un abogado que dice que Founder debería indicar sus tarifas antes del uso.¹⁶

Uso	Situación	Qué hacer
Source Han Sans en imágenes o logotipos	SIL OFL 1.1: uso e incrustación permitidos, sin vender la fuente por separado 31	Comprueba que encaja con tu uso. Tiene versiones para el continente, Taiwán y Hong Kong 14
YaHei o fuentes de Founder en imágenes, logotipos o archivos servidos	Supón que hace falta una licencia	Consíguela o cambia de fuente
YaHei nombrada en una pila CSS, mostrada desde el dispositivo del visitante	Sin resolver en lo que hemos leído	Pregunta a un asesor local
Una fuente gratuita de una web de descargas	Desconocida	Rastrea antes la licencia

Revisión gratuita

¿Es visible tu web en Baidu?

Introduce tu web. Revisamos Baidu, el acceso desde China y cómo está configurado tu sitio, y te enviamos el informe por correo.

Tu webRevisar mi web

¿Hay que cambiar los colores?

Por lo general no. No hemos encontrado ningún estudio que muestre que a una marca extranjera le va mejor con rojo y oro, así que conserva tu paleta y ajusta usos concretos.

Chinafy asocia el rojo con la suerte y la prosperidad, y el oro con la riqueza.²⁵ FINN Partners considera auspiciosos ambos colores.²⁶ Una guía de visualización de datos de la UE también vincula el rojo con la riqueza y la prosperidad en China.²⁴

Pero eso es lo que significan, no una prueba de que vendan.

La saturación tampoco está demostrada. Una guía de 2015, de las pocas que hemos encontrado en español, titula un apartado «Evita la baja saturación». Su comparación de 40 iconos de apps, que la autora llama «muy imperfecta», halló una saturación similar y más brillo en los chinos, y trata de iconos, no de webs.³⁸

Una convención sí merece un cambio. En los datos de mercado chinos, el rojo indica subida y el verde, bajada, al revés que en los paneles occidentales.²³²⁴

Si tu página muestra	Comprueba
Gráficos bursátiles o de inversión	Usa rojo para las ganancias y verde para las pérdidas
Gráficos de crecimiento con flechas verdes	Pregunta a un lector nativo cómo se perciben
Mensajes de error en rojo cerca de buenas noticias	Mantenlos bien separados
Los colores de tu logotipo	Déjalos como están

Muchas guías se llenan de supersticiones sobre números y colores. No hemos encontrado ninguna fuente sólida sobre ellas, así que las hemos dejado fuera. Tu revisor nativo detectará lo que suene mal.

¿Cómo deben aparecer el contacto y las pruebas?

Deben estar visibles, ser concretos y poder verificarse. El estudio B2B de Nielsen Norman Group de 2017 observó que los compradores buscan pruebas de que una empresa es real, y que le exigen responsabilidades a través de esas pruebas.¹⁷

Es un estudio cualitativo pequeño de 2017, con 8 participantes, pero estos son los puntos de diseño que respalda:

• Ubicación: los participantes buscaban una tienda física o un distribuidor local cerca.¹⁷
• Trabajos anteriores: querían fotos, casos o testimonios que pudieran comprobar.¹⁷
• Chat: 5 de 8 usaron el chat en línea, lo preferían a llamar y guardaban la conversación como registro.¹⁷

Si no tienes presencia local, di que estás en España y cómo atiendes a tus clientes chinos. No des a entender que tienes una oficina que no tienes. Nuestra guía sobre cómo ganarte la confianza de los compradores chinos va más lejos.

El chat y las normas de Baidu chocan

A los usuarios les gusta el chat, pero Baidu limita cómo mostrarlo. Sus normas de 2020 permiten una función de consulta por página, nunca arriba, y la ventana de chat no puede abrirse sola.⁶

Los botones de función no pueden superar el 10 % de una pantalla, y los flotantes no pueden tapar el contenido.⁶ Su lista de 2023 señala además dos o más funciones repetidas que permanecen en pantalla al desplazarse.⁸

Copiar los portales chinos no resuelve esto. La guía de 2015 muestra menús fijos laterales con código QR en webs como Tmall o Qunar.³⁸ Son capturas de hace once años, sin pruebas de usuarios y anteriores a estas normas.

Así que conviene replantearse un globo de chat, una barra fija de llamada y un botón de WeChat a la vez. Elige uno, hazlo pequeño y asegúrate de que la propia herramienta de chat carga desde China.

Usa los códigos QR con cuidado

El estudio con diarios de Nielsen Norman Group de 2016 observó que los códigos QR eran comunes en China, en gran parte gracias a WeChat, que lleva un escáner integrado desde 2012.¹⁸ La guía de 2015 describe además webs chinas con un enlace al móvil o a la app cerca de la parte superior, a veces con un QR que aparece al pasar el ratón.³⁸ Aun así, tienen límites:¹⁸

• Ocupan más que un enlace, y un exceso de códigos empeora una página móvil.
• No indican lo que hacen, así que añade una línea de texto junto a cada uno.
• Un código que se muestra en un móvil es difícil de escanear con ese mismo móvil, así que ofrece un enlace o una forma de copiar tu ID.

Este último punto es razonamiento nuestro, a partir de los problemas que vio el estudio para extraer códigos de los chats. Nuestra guía sobre WeChat para empresas extranjeras trata de la cuenta en sí.

Corrige los campos del formulario

Un formulario pensado para España necesita pequeños cambios:

Campo	Cambio	Por qué
Nombre	Un solo campo, o «apellido» y «nombre»	«First name» confunde a quien escribe primero el apellido 20
Segundo apellido	Quítalo, o que no sea obligatorio	En español lo común son dos apellidos, y el ejemplo chino de W3C lleva uno 20
Móvil	Acepta 11 dígitos, sin prefijo de zona, con o sin +86	Formato móvil estándar 21. Un validador solo para 9 dígitos, el formato español, lo rechazaría 36
Límites de caracteres	Admite texto no latino, usa UTF-8	Los nombres chinos necesitan Unicode 20
Acceso, si lo tienes	Ofrece un código por teléfono antes que una contraseña	Muy usado en China, según un estudio cualitativo de 2018 19

Un texto también puede cambiar de ancho al traducirse. W3C cita un ejemplo de Flickr que cuenta cada carácter chino como dos ingleses de ancho.²² Y el ajuste puede fallar al revés: Cinevva, en una guía sobre juegos web, avisa de que los botones pensados para el inglés se ven raros con solo dos caracteres.³⁷ Lo mismo puede pasarle a un botón pensado para «Solicitar presupuesto», así que prueba botones y menús con el texto final, no con textos de relleno.

Los datos personales también son una cuestión legal. Consulta si se aplica a tu web la ley china de protección de datos antes de añadir campos.

¿Cómo se revisa un diseño chino antes de publicar?

Prueba las páginas chinas finales, no una maqueta con texto de relleno. La mayoría de lo que puede fallar solo aparece ahí.

1. Carga las páginas desde China. Usa nuestra guía para comprobar tu web desde China. Un script bloqueado puede dejar un diseño a medio mostrar.
2. Mídelas. Una página con mucho contenido también debe cargar, así que consulta cómo mejorar la velocidad de tu web en China.
3. Revisa la primera pantalla. En una pantalla de 360 px, mira cuánto es contenido principal y cuánto es banner, aviso de cookies y botones.
4. Revisa la tipografía. Confirma el tamaño del texto, la altura de línea y la puntuación en un móvil real y en un ordenador con Windows.
5. Revisa los navegadores. Abre las páginas en los navegadores de la lista anterior, y escanea un código QR para verlas dentro de WeChat.
6. Haz una tarea real. Pide a un lector nativo que averigüe a qué te dedicas y que contacte contigo, pensando en voz alta.

El estudio de Nielsen Norman Group usó tareas de este tipo, con los participantes pensando en voz alta.¹ Unas pocas sesiones pueden mostrar dónde duda la gente, aunque no demostrarán cómo funcionará una página.

En resumen

No copies los portales chinos ni publiques tu plantilla occidental sin cambios. Pon más contenido útil en cada página, ajusta bien la tipografía china y diseña para móvil y ordenador.

Después revisa las licencias de tus fuentes y deja que un lector nativo pruebe el resultado. Gran parte de las pruebas son antiguas o pequeñas, así que tu propia prueba importa más que cualquier regla general.

Cómo puede ayudarte Index in China

Traducimos tu web al chino simplificado con revisión humana, como parte de nuestro trabajo para que se indexe en los buscadores chinos.

Las decisiones de diseño siguen siendo tuyas, y te diremos si tu caso necesita un asesor local. Reserva una llamada de 30 minutos.

Reservar una llamada de 30 minutos

Informe mensual BaiduIndexada Bing ChinaIndexada SogouIndexada