references/elements/canvas.md
3.8 KB查看排版效果| 1 | # Canvas & Layout |
| 2 | |
| 3 | Core canvas specifications and layout grids for Xiaohongshu infographics. |
| 4 | |
| 5 | ## Aspect Ratios |
| 6 | |
| 7 | | Name | Ratio | Pixels | Note | |
| 8 | |------|-------|--------|------| |
| 9 | | portrait-3-4 | 3:4 | 1242×1660 | Highest traffic on XHS (recommended) | |
| 10 | | square | 1:1 | 1242×1242 | Second recommended | |
| 11 | | portrait-2-3 | 2:3 | 1242×1863 | Taller format | |
| 12 | |
| 13 | **Default**: portrait-3-4 for maximum engagement. |
| 14 | |
| 15 | ## Safe Zones |
| 16 | |
| 17 | Avoid placing critical content in these areas: |
| 18 | |
| 19 | | Zone | Position | Reason | |
| 20 | |------|----------|--------| |
| 21 | | bottom-overlay | Bottom 10% | Title bar overlay on mobile | |
| 22 | | top-right | Top-right corner | Like/share button overlay | |
| 23 | | bottom-right | Bottom-right corner | Watermark position | |
| 24 | |
| 25 | ``` |
| 26 | ┌─────────────────────────────┐ |
| 27 | │ [like/share]│ ← top-right: avoid |
| 28 | │ │ |
| 29 | │ │ |
| 30 | │ ✓ SAFE CONTENT AREA │ |
| 31 | │ │ |
| 32 | │ │ |
| 33 | │ [title bar overlay area] │ ← bottom 10%: avoid key info |
| 34 | └─────────────────────────────┘ |
| 35 | ``` |
| 36 | |
| 37 | ## Grid Layouts |
| 38 | |
| 39 | ### Density-Based Layouts |
| 40 | |
| 41 | | Layout | Info Density | Whitespace | Points/Image | Best For | |
| 42 | |--------|--------------|------------|--------------|----------| |
| 43 | | sparse | Low | 60-70% | 1-2 | Covers, quotes, impactful statements | |
| 44 | | balanced | Medium | 40-50% | 3-4 | Standard content, tutorials | |
| 45 | | dense | High | 20-30% | 5-8 | Knowledge cards, cheat sheets | |
| 46 | |
| 47 | ### Structure-Based Layouts |
| 48 | |
| 49 | | Layout | Structure | Items | Best For | |
| 50 | |--------|-----------|-------|----------| |
| 51 | | list | Vertical enumeration | 4-7 | Rankings, checklists, step guides | |
| 52 | | comparison | Left vs Right | 2 sections | Before/after, pros/cons | |
| 53 | | flow | Connected nodes | 3-6 steps | Processes, timelines, workflows | |
| 54 | | mindmap | Center radial | 4-8 branches | Concept maps, brainstorming, topic overview | |
| 55 | | quadrant | 4-section grid | 4 sections | SWOT analysis, priority matrix, classification | |
| 56 | |
| 57 | ## Layout by Position |
| 58 | |
| 59 | | Position | Recommended Layout | Why | |
| 60 | |----------|-------------------|-----| |
| 61 | | Cover | sparse | Maximum visual impact, clear title | |
| 62 | | Setup | balanced | Context without overwhelming | |
| 63 | | Core | balanced/dense/list | Based on content density | |
| 64 | | Payoff | balanced/list | Clear takeaways | |
| 65 | | Ending | sparse | Clean CTA, memorable close | |
| 66 | |
| 67 | ## Grid Cells |
| 68 | |
| 69 | For multi-element compositions: |
| 70 | |
| 71 | | Name | Cells | Use Case | |
| 72 | |------|-------|----------| |
| 73 | | single | 1 | Hero image, maximum impact | |
| 74 | | dual | 2 | Before/after, comparison | |
| 75 | | triptych | 3 | Steps, process flow | |
| 76 | | quad | 4 | Product showcase | |
| 77 | | six-grid | 6 | Checklist, collection | |
| 78 | | nine-grid | 9 | Multi-image gallery | |
| 79 | |
| 80 | ## Visual Balance |
| 81 | |
| 82 | ### Sparse Layout |
| 83 | - Single focal point centered |
| 84 | - Breathing room on all sides |
| 85 | - Symmetrical composition |
| 86 | |
| 87 | ### Balanced Layout |
| 88 | - Top-weighted title |
| 89 | - Evenly distributed content below |
| 90 | - Clear visual hierarchy |
| 91 | |
| 92 | ### Dense Layout |
| 93 | - Organized grid structure |
| 94 | - Clear section boundaries |
| 95 | - Compact but readable spacing |
| 96 | |
| 97 | ### List Layout |
| 98 | - Left-aligned items |
| 99 | - Clear number/bullet hierarchy |
| 100 | - Consistent item format |
| 101 | |
| 102 | ### Comparison Layout |
| 103 | - Symmetrical left/right |
| 104 | - Clear visual contrast |
| 105 | - Divider between sections |
| 106 | |
| 107 | ### Flow Layout |
| 108 | - Directional flow (top→bottom or left→right) |
| 109 | - Connected nodes with arrows |
| 110 | - Clear progression indicators |
| 111 | |
| 112 | ### Mindmap Layout |
| 113 | - Central topic node |
| 114 | - Radial branches outward |
| 115 | - Hierarchical sub-branches |
| 116 | - Organic curved connections |
| 117 | |
| 118 | ### Quadrant Layout |
| 119 | - 4-section grid (2×2) |
| 120 | - Clear axis labels |
| 121 | - Each quadrant with distinct content |
| 122 | - Optional circular variant for cycles |
文件内容是平台检查时读出的文本，只供查看。平台不会运行包里的任何脚本或程序。
