pkupuk
f6b806617e
Include supplementary documentation, research notes on Lexical/UX, and setup guides.
222 lines
5.4 KiB
Markdown
222 lines
5.4 KiB
Markdown
# 3. User Interface Enhancement Goals
|
|
|
|
**Last Updated:** 2025-01-29
|
|
|
|
Since this migration involves complete UI reconstruction, this section defines how UI enhancements integrate with the existing design.
|
|
|
|
---
|
|
|
|
## Integration with Existing UI
|
|
|
|
### Design System Extraction
|
|
|
|
Based on analysis of the original Webflow HTML, the following key design patterns have been identified:
|
|
|
|
#### Typography System
|
|
|
|
**Fonts:**
|
|
- **Primary Font:** Noto Sans TC (weights: 100, 300, 400, 500, 700, 900)
|
|
- **Display Font:** Quicksand (weights: 300, 400, 500, 600, 700)
|
|
- **Source:** Google Fonts
|
|
|
|
**Responsive Font Sizes:**
|
|
```css
|
|
/* Desktop and above */
|
|
html { font-size: 19px; }
|
|
|
|
/* Tablet */
|
|
@media (max-width: 991px) {
|
|
html { font-size: 19px; }
|
|
}
|
|
|
|
/* Mobile - Landscape */
|
|
@media (max-width: 767px) {
|
|
html { font-size: 16px; }
|
|
}
|
|
|
|
/* Mobile - Portrait */
|
|
@media (max-width: 479px) {
|
|
html { font-size: 13px; }
|
|
}
|
|
```
|
|
|
|
#### Icon System
|
|
- **Library:** Google Material Icons
|
|
- **Variants:** Outlined, Two Tone, Round, Sharp
|
|
|
|
#### Layout Patterns
|
|
- **Container-based layout** (`w-container` class in Webflow)
|
|
- **Grid system** for feature cards, portfolio, footer
|
|
- **Sticky navigation** with scroll effects
|
|
- **Responsive hamburger menu** for mobile
|
|
|
|
#### Component Patterns
|
|
- Hero sections with overlay backgrounds
|
|
- Feature cards with icon + text
|
|
- Comparison tables (Enchun vs competitors)
|
|
- Call-to-action sections
|
|
- Dynamic footer with blog categories
|
|
|
|
---
|
|
|
|
## Modified/New Screens and Views
|
|
|
|
### Pages to Reconstruct
|
|
|
|
#### 1. Homepage (`/`)
|
|
- Hero section with overlay
|
|
- Service features grid
|
|
- Portfolio preview
|
|
- CTA section
|
|
|
|
#### 2. About Enchun (`/about`)
|
|
- Hero section
|
|
- Service features (4 cards)
|
|
- Comparison table (Enchun vs others)
|
|
- CTA section
|
|
|
|
#### 3. Marketing Solutions (`/solutions`)
|
|
- Services list
|
|
- Detail sections for each service
|
|
|
|
#### 4. Marketing Magnifier (`/blog`)
|
|
- Blog listing page
|
|
- Category filters
|
|
- Article cards with thumbnails
|
|
|
|
#### 5. Teams (`/teams`)
|
|
- Team member profiles
|
|
|
|
#### 6. Website Portfolio (`/portfolio`)
|
|
- Portfolio grid (2 columns)
|
|
- Project cards with external links
|
|
|
|
#### 7. Contact Us (`/contact`)
|
|
- Contact form
|
|
- Contact information
|
|
- CTA section
|
|
|
|
#### 8. Article Detail (`/blog/[slug]`)
|
|
- Dynamic content from Payload CMS
|
|
- Related articles
|
|
- Social sharing
|
|
|
|
#### 9. Category Page (`/blog/category/[slug]`)
|
|
- Filtered article list
|
|
- Category description
|
|
|
|
#### 10. Project Detail (`/portfolio/[slug]`)
|
|
- Project details
|
|
- Case study content
|
|
|
|
### New Admin Interface
|
|
|
|
#### 11. Login Page (`/admin/login`)
|
|
- Login form with email/password
|
|
- Error handling
|
|
- Redirect after login
|
|
|
|
#### 12. Dashboard (`/admin/dashboard`)
|
|
- Welcome message
|
|
- Quick stats
|
|
- Recent activity
|
|
|
|
#### 13. CMS Admin Interface (`/admin/cms`)
|
|
- Embedded Payload CMS admin panel
|
|
- Protected by authentication
|
|
|
|
---
|
|
|
|
## UI Consistency Requirements
|
|
|
|
### Responsive Design Requirements
|
|
|
|
#### Breakpoint Definition
|
|
- **Desktop:** > 991px
|
|
- **Tablet:** 768px - 991px
|
|
- **Mobile Landscape:** 480px - 767px
|
|
- **Mobile Portrait:** < 479px
|
|
|
|
#### Consistency Rules
|
|
|
|
**UC1:** All pages must use a unified Header component including:
|
|
- Enchun logo
|
|
- Navigation links (About, Solutions, Marketing Magnifier, Teams, Portfolio, Contact)
|
|
- Hot/New badges (Solutions shows "hot", Marketing Magnifier shows "new")
|
|
- Mobile hamburger menu
|
|
|
|
**UC2:** All pages must use a unified Footer component including:
|
|
- Enchun logo and description
|
|
- Contact information (phone, Email, Facebook)
|
|
- Marketing solution links
|
|
- Marketing magnifier category links (dynamically fetched from Payload CMS)
|
|
- Copyright notice (2018 - 2024)
|
|
|
|
**UC3:** All CTA buttons must follow consistent styling:
|
|
- Consistent colors, spacing, border-radius
|
|
- Hover effects
|
|
- Material icons integration
|
|
|
|
**UC4:** All form elements must:
|
|
- Use consistent input styling
|
|
- Provide clear error messages
|
|
- Support keyboard navigation
|
|
- Meet WCAG 2.1 AA contrast requirements
|
|
|
|
**UC5:** Images and media must:
|
|
- Use Next.js Image or Astro Image optimization
|
|
- Support responsive loading
|
|
- Provide alt text
|
|
- Implement lazy loading
|
|
|
|
**UC6:** Animations and transitions must:
|
|
- Maintain smooth scroll effects similar to original Webflow
|
|
- Use CSS transitions and transforms
|
|
- Respect user's `prefers-reduced-motion` setting
|
|
|
|
**UC7:** Typography must:
|
|
- Follow hierarchy structure (H1 > H2 > H3 > H4)
|
|
- Use consistent spacing system (based on Tailwind spacing scale)
|
|
- Maintain consistent line-height and letter-spacing
|
|
|
|
**UC8:** Accessibility must:
|
|
- All interactive elements accessible via keyboard
|
|
- Clear focus indicators
|
|
- Semantic HTML (proper use of `<nav>`, `<main>`, `<article>`, `<section>`)
|
|
- ARIA labels for custom components
|
|
|
|
---
|
|
|
|
## Design Tokens
|
|
|
|
### Color System (To Be Extracted)
|
|
|
|
The following color system needs to be extracted from Webflow CSS and converted to Tailwind configuration:
|
|
|
|
```javascript
|
|
// tailwind.config.js (to be completed)
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Extract from enchun.webflow.shared.557e15b5a.css
|
|
brand: {
|
|
primary: '', // To be extracted
|
|
secondary: '', // To be extracted
|
|
accent: '', // To be extracted
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Spacing System
|
|
- Base spacing unit: Tailwind default (4px)
|
|
- Consistent padding/margins for components
|
|
- Container max-widths aligned with breakpoints
|
|
|
|
---
|
|
|
|
**Next Section:** [Technical Constraints and Integration Requirements](./04-technical-constraints.md)
|