UX / UI · 设计

Gestalten für
die Art, wie chinesische Nutzer tatsächlich surfen.

WordPress-Erlebnisse, die sich für Nutzer in China nativ anfühlen: kulturell verankert, konsequent Mobile-first und um die Plattformen herum entworfen, die Chinas Internet tragen.

Ihr Designprojekt starten Das System ansehen →
home-mobile.fig
375 × 812
Eine mobile WordPress-Startseite, gestaltet für chinesische Nutzer, mit roten Akzenten, WeChat-QR-Code und ICP-Lizenz
70%+
Mobiler Traffic in China
6
Geprüfte Browser
WeChat
Native Integration
ICP
Konform durch Konzept

Das Problem

Warum westliches Design
in China nicht greift.

Ein Unternehmen bringt seine WordPress-Seite im Heimatmarkt zum Konvertieren, startet sie in China, und die Absprungrate schnellt nach oben. Technisch wirkt die Seite einwandfrei, doch für jeden, der aus Shanghai oder Chengdu surft, stimmt etwas daran nicht.

Chinesische Internetnutzer sind nicht mit demselben Web aufgewachsen. Wie sie navigieren und wie viele Informationen sie gleichzeitig sehen möchten, ist von WeChat, Taobao und Douyin geprägt.

Eine Designsprache, die in Chicago konvertiert, trägt in Chongqing nicht von selbst.

Zwei Telefone nebeneinander: links eine schlichte Seite im westlichen Stil, rechts eine dichte Seite im chinesischen Stil mit WeChat-QR und Vertrauenssignalen
Westlicher Stil
Schlicht, geringes Engagement
China-nativer Stil
Dicht, konvertiert

Wissen aus der Praxis

Sechs Dinge, die uns das Gestalten
für China gelehrt hat.

A.01 bis A.06 / UX-Heuristiken für China

A.01

Farbe trägt Bedeutung

Rot steht für Glück und Energie, Gold für gehobene Qualität. Weiß für sich allein trägt eine Bedeutung von Trauer, weshalb wir es mit kräftigen Akzenten kombinieren.

A.02

Dichte liest sich als Vertrauen

Dichte Layouts im oberen Bildausschnitt wirken auf chinesische Nutzer fundiert. Entwürfe mit viel Weißraum hingegen können leer, unfertig oder ausweichend wirken.

A.03
ICP 沪B2-2024
0123456号
营业
执照

Vertrauen sitzt an den Rändern

ICP-Anmeldenummer, Gewerbelizenz und offizielle Siegel gehören üblicherweise in den Fußbereich. QR-Codes im oberen Bildausschnitt verankern zusätzlich die Glaubwürdigkeit.

A.04
微信

WeChat ist Infrastruktur

QR-Codes, Mini-Program-Links, Teilen-Endpunkte und Kundendienst-Kontakte gehören zur Grundausstattung einer China-Seite, nicht zu ihren optionalen Funktionen.

A.05
中
Aa

Schrift trägt Gewicht

PingFang SC, Noto Sans SC oder Source Han lassen sich gut mit Inter oder Systemschriften kombinieren. Zeichenabstand und Zeilenhöhe weichen dabei spürbar von der Lateinschrift ab.

A.06

Die untere Leiste ist der Home-Button

Eine fixierte untere Navigation übernimmt im chinesischen mobilen Web die Rolle des Home-Buttons: fünf Tippziele, stets sichtbar und stets mit dem Daumen erreichbar.

Unsere Leistung

Vier Disziplinen,
ein Ergebnis.

/ Forschung

Nutzerforschung und Erkenntnisse

Wir kartieren, wie sich Ihr Publikum in China tatsächlich durch Inhalte bewegt, vergleichen lokale und internationale Wettbewerber und gestalten Nutzerwege, die dort ansetzen, wo chinesische Nutzer beginnen: auf Douyin, in WeChat oder bei Baidu.

/ Architektur

Informationsarchitektur

Das chinesische Publikum bevorzugt dichtere Seiten, mit mehr sichtbaren Links, mehr Text und mehr Optionen bereits im ersten Bildausschnitt. Wir gliedern Inhalte in der Tiefe, die Besucher erwarten, ohne dass die Seite für das Headquarter unlesbar wird.

/ UI

Visuelles Design

Mobile-first-Layouts für die Geräte, die in China tatsächlich im Einsatz sind. Dazu gehören eine symbolisch aufgeladene Farbgebung, eine Typografie, die chinesische Schriftzeichen respektiert, sowie die Vertrauenssignale (WeChat-QR, ICP, Gewerbelizenz), die chinesische Verbraucher prüfen, bevor sie handeln.

/ System

Gutenberg-natives Designsystem

Wir gestalten direkt in Gutenberg: eigens entwickelte Blöcke, die Ihr Redaktionsteam ohne Entwickler bedient, Komponenten, die für visuelle Stimmigkeit sorgen, und Vorlagen, die auch nicht-technische Mitarbeiter selbst aktualisieren können.

Im Inneren des Systems

Dokumentierte Tokens
bis ins kleinste Detail.

Jedes Design, das wir liefern, ist als geschlossenes System dokumentiert. Farb-, Typografie- und Abstands-Tokens gehen unverändert von Figma nach Gutenberg über.

/ Farbe

5 / Tokens
  • Glücksverheißendes Rot #E11D2E
    Glück, Energie, Tatkraft
  • Markenorange #F25F29
    Vitalität, Akzent
  • Vertrauensgrün #52C41A
    Bestätigung, WeChat
  • Tinte #1F1F1F
    Überschriften, Ankerpunkt
  • Wolke #FAFAFA
    Fläche, nie allein

/ Typografie

PingFang · Inter
  • H1
    32px
    中文标题 Display-Überschrift
  • H2
    24px
    副标题 Abschnitts-Unterzeile
  • Body
    16px
    正文段落 Fließtext-Absatz
  • Caption
    12px
    辅助说明 Bildunterschrift / Meta

/ Abstand

Skala auf Basis 4
  • 4 · XS
  • 8 · S
  • 16 · M
  • 24 · L
  • 32 · XL
  • 48 · 2XL
Jeder Abstand auf einer Basis von 4 px.
Vertikaler Rhythmus auf 8 px festgelegt.

Designsystem · Übergabe

In Figma gebaut,
übergeben und bereit zum Ausliefern.

  • Eine Komponentenbibliothek, abgestimmt auf chinesische Typografie
  • Ein Token-System für Farbe, Abstand und Typografie-Skala
  • Mobile- und Desktop-Wireframes für jede wesentliche Seite
  • Interaktionsspezifikationen, nach denen Ihr Entwicklerteam bauen kann
WordPress CN / Komponentenbibliothek
Eine Figma-Arbeitsfläche, die die für chinesisches Publikum zugeschnittene WordPress-Komponentenbibliothek zeigt

Wie wir arbeiten

Ein verlässlicher Weg
vom Briefing zur Übergabe.

P.01 bis P.06 / Ablauf des Mandats

P.01

Erstgespräch und Briefing

Wir stimmen uns auf Markenrichtlinien und Ziele ab und klären, wen Sie in China erreichen wollen.

P.02

Recherche und Benchmarking

Wir sichten das Wettbewerbsumfeld, die lokalen Nutzungsmuster und die Designprinzipien, die in der Kategorie gelten. Diese Vorarbeit ist abgeschlossen, bevor das erste Layout entsteht.

P.03

Wireframing

Seitenstruktur und Nutzerwege, abgeglichen mit den Erwartungen, die chinesische Nutzer an eine funktionierende Seite stellen. Ein Wireframe nachzuarbeiten ist günstiger, als ein fertiges Mockup zu korrigieren.

P.04

Visuelles Design und Iteration

Mockups in hoher Detailtiefe und mehrere Feedback-Runden, bis das Ergebnis für Ihre globale Marke und den chinesischen Markt zugleich trägt.

P.05

Designsystem und Übergabe

Komponenten, Stilrichtlinien und Interaktionsspezifikationen so aufbereitet, dass Ihr Entwicklerteam ohne Rückfragen bauen kann.

P.06

QA und Validierung

Wir testen auf chinesischen Browsern und Geräten. Eine Seite, die in London hervorragend aussieht, kann im UC Browser oder QQ Browser auseinanderbrechen, und beide sind in China weiterhin weit verbreitet.

Who Is This For?

An wen sich diese Seite richtet

Von Grund auf neu

Sie bauen eine WordPress-Seite für China und wollen das Design von Anfang an richtig anlegen.

Schwache Leistung

Ihre Seite ist in China bereits live, doch sie liefert nicht, und Sie vermuten das Design als Ursache.

Kampagnenseiten

Ihr Marketingteam braucht Seiten für chinesische Verbraucher, denen man die Übersetzung aus dem Englischen nicht anmerkt.

Globales Design anpassen

Sie verfügen über ein solides globales Designsystem und suchen jemanden, der es fachkundig für China anpasst.

Sprechen wir

Design für China misst sich daran,
ob Menschen nutzen, was Sie gebaut haben.

Die Ästhetik folgt erst danach. Wenn Sie diesen Ansatz teilen, sollten wir ins Gespräch kommen.

Ihr Designprojekt starten Leistungen für chinesische Inhalte