How to Build a Consistent UI for Multi‑Business‑Line Messaging Center Micro‑Chat

Background

As 58's product lines expand, the 58 Message Center becomes a key hub for delivering various service information and driving traffic. The micro‑chat component, a main conversion scenario, is increasingly important for guiding users across business lines.

Composition

Initial collection of micro‑chat interfaces from each business line revealed uneven design quality. Problems include inconsistent UI elements, divergent interaction logic, and highly specialized business cards for each line.

Design Principles

To ensure consistency, designers should follow three principles: Consistency (uniform framework and page structure), Interaction Reasonableness (standardized operation area, focus on core functions to reduce user cognitive load), and Flexibility (allowing innovation).

Guidelines

1. Consistency

Micro‑chat interface includes navigation, basic information, message information, and business cards. Navigation defaults: main title a/a+b, 34 px, #333333; subtitle c/d/e/c+d, 24 px, #666666. Custom navigation can highlight service roles.

2. Interaction Reasonableness

Standardize operation area and concentrate core functions. Consolidate dispersed card layouts into a right‑side operation zone to match user habits and improve efficiency.

3. Flexibility

Within the unified framework, each business line may customize designs, especially business cards, to balance consistency with specific needs.

Summary

The design system covers colors, typography, line height, margins, corners, buttons, and image usage. Detailed rules are omitted for brevity. A well‑structured specification simplifies rule setting, enhances extensibility, and supports continuous iteration, leading to a unified visual upgrade across all business lines.