mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-15 06:59:48 +08:00
Jim Liu 宝玉
a596c653d3
Rename baoyu-xhs-images to baoyu-image-cards to decouple from Xiaohongshu platform. Deprecate baoyu-xhs-images with migration notice pointing to baoyu-image-cards.
123 lines
3.6 KiB
Markdown
123 lines
3.6 KiB
Markdown
# Canvas & Layout
|
||
|
||
Core canvas specifications and layout grids for Xiaohongshu infographics.
|
||
|
||
## Aspect Ratios
|
||
|
||
| Name | Ratio | Pixels | Note |
|
||
|------|-------|--------|------|
|
||
| portrait-3-4 | 3:4 | 1242×1660 | Highest traffic on XHS (recommended) |
|
||
| square | 1:1 | 1242×1242 | Second recommended |
|
||
| portrait-2-3 | 2:3 | 1242×1863 | Taller format |
|
||
|
||
**Default**: portrait-3-4 for maximum engagement.
|
||
|
||
## Safe Zones
|
||
|
||
Avoid placing critical content in these areas:
|
||
|
||
| Zone | Position | Reason |
|
||
|------|----------|--------|
|
||
| bottom-overlay | Bottom 10% | Title bar overlay on mobile |
|
||
| top-right | Top-right corner | Like/share button overlay |
|
||
| bottom-right | Bottom-right corner | Watermark position |
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ [like/share]│ ← top-right: avoid
|
||
│ │
|
||
│ │
|
||
│ ✓ SAFE CONTENT AREA │
|
||
│ │
|
||
│ │
|
||
│ [title bar overlay area] │ ← bottom 10%: avoid key info
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
## Grid Layouts
|
||
|
||
### Density-Based Layouts
|
||
|
||
| Layout | Info Density | Whitespace | Points/Image | Best For |
|
||
|--------|--------------|------------|--------------|----------|
|
||
| sparse | Low | 60-70% | 1-2 | Covers, quotes, impactful statements |
|
||
| balanced | Medium | 40-50% | 3-4 | Standard content, tutorials |
|
||
| dense | High | 20-30% | 5-8 | Knowledge cards, cheat sheets |
|
||
|
||
### Structure-Based Layouts
|
||
|
||
| Layout | Structure | Items | Best For |
|
||
|--------|-----------|-------|----------|
|
||
| list | Vertical enumeration | 4-7 | Rankings, checklists, step guides |
|
||
| comparison | Left vs Right | 2 sections | Before/after, pros/cons |
|
||
| flow | Connected nodes | 3-6 steps | Processes, timelines, workflows |
|
||
| mindmap | Center radial | 4-8 branches | Concept maps, brainstorming, topic overview |
|
||
| quadrant | 4-section grid | 4 sections | SWOT analysis, priority matrix, classification |
|
||
|
||
## Layout by Position
|
||
|
||
| Position | Recommended Layout | Why |
|
||
|----------|-------------------|-----|
|
||
| Cover | sparse | Maximum visual impact, clear title |
|
||
| Setup | balanced | Context without overwhelming |
|
||
| Core | balanced/dense/list | Based on content density |
|
||
| Payoff | balanced/list | Clear takeaways |
|
||
| Ending | sparse | Clean CTA, memorable close |
|
||
|
||
## Grid Cells
|
||
|
||
For multi-element compositions:
|
||
|
||
| Name | Cells | Use Case |
|
||
|------|-------|----------|
|
||
| single | 1 | Hero image, maximum impact |
|
||
| dual | 2 | Before/after, comparison |
|
||
| triptych | 3 | Steps, process flow |
|
||
| quad | 4 | Product showcase |
|
||
| six-grid | 6 | Checklist, collection |
|
||
| nine-grid | 9 | Multi-image gallery |
|
||
|
||
## Visual Balance
|
||
|
||
### Sparse Layout
|
||
- Single focal point centered
|
||
- Breathing room on all sides
|
||
- Symmetrical composition
|
||
|
||
### Balanced Layout
|
||
- Top-weighted title
|
||
- Evenly distributed content below
|
||
- Clear visual hierarchy
|
||
|
||
### Dense Layout
|
||
- Organized grid structure
|
||
- Clear section boundaries
|
||
- Compact but readable spacing
|
||
|
||
### List Layout
|
||
- Left-aligned items
|
||
- Clear number/bullet hierarchy
|
||
- Consistent item format
|
||
|
||
### Comparison Layout
|
||
- Symmetrical left/right
|
||
- Clear visual contrast
|
||
- Divider between sections
|
||
|
||
### Flow Layout
|
||
- Directional flow (top→bottom or left→right)
|
||
- Connected nodes with arrows
|
||
- Clear progression indicators
|
||
|
||
### Mindmap Layout
|
||
- Central topic node
|
||
- Radial branches outward
|
||
- Hierarchical sub-branches
|
||
- Organic curved connections
|
||
|
||
### Quadrant Layout
|
||
- 4-section grid (2×2)
|
||
- Clear axis labels
|
||
- Each quadrant with distinct content
|
||
- Optional circular variant for cycles
|