huang
c341ef1aac
基于移动优先原则优化布局、排版、颜色和间距，提升设计感和专业度。 - 重构全局设计系统：颜色、阴影、间距、圆角、排版 - 优化 UserInfoCard：更大的头像和状态徽章设计 - 优化 DeviceStatusCard：信息层级和指标网格 - 优化 TrafficCard：进度条和数字排版 - 优化 FunctionCard：4列布局和触摸反馈 - 优化 WifiCard：列表设计和信息层次 - 优化 FloatingButton：去除渐变，纯色设计 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
31 lines
1.9 KiB
Markdown
31 lines
1.9 KiB
Markdown
# Impeccable Design Context
|
|
|
|
## Design Context
|
|
|
|
### Users
|
|
- **Who**: Regular consumers on mobile who purchased a portable WiFi/MiFi device
|
|
- **Context**: Using the app on their phone to check data usage, manage their device settings, top up balance, and ensure connectivity while traveling
|
|
- **Job to be done**: Quick access to device status, data usage, and account management with minimal friction
|
|
|
|
### Brand Personality
|
|
- **Voice**: Clean, confident, trustworthy
|
|
- **Tone**: Fast and efficient, modern and sleek, friendly and helpful, reliable and secure
|
|
- **3-word personality**: Modern · Trustworthy · Effortless
|
|
- **Emotional goals**: Users should feel in control of their connectivity, confident their device is working, and that managing it is simple
|
|
|
|
### Aesthetic Direction
|
|
- **Visual tone**: Minimal and refined — clean layouts with purposeful use of space
|
|
- **References**: Consumer electronics (Apple, Tile, Anker) + Minimalist app interfaces
|
|
- **Anti-references**: Cluttered admin dashboards, AI slop aesthetics, legacy carrier apps, overly playful designs
|
|
- **Theme**: Light mode only — bright, clean, accessible
|
|
- **Colors**: Blue-based palette (iOS-like primary blue #0A84FF) with the existing color system as a base
|
|
|
|
### Design Principles
|
|
1. **Clarity first**: Every element earns its place. No decorative clutter.
|
|
2. **Confidence through space**: Generous whitespace creates premium feel. Tight grouping shows related content.
|
|
3. **Light and bright**: Light theme only. White surfaces, not gray. Blue accent for primary actions.
|
|
4. **Progressive disclosure**: Simple by default, reveal complexity on demand (e.g., WiFi settings behind a tap).
|
|
5. **Fast interactions**: Optimistic UI. Updates feel instant. Loading states are minimal.
|
|
6. **Typography hierarchy**: Bold headings, readable body. Clear contrast between levels.
|
|
7. **Trust signals**: Online/offline status, battery level, data usage — at a glance, always visible.
|