references/layouts/dense-modules.md
3.7 KB查看排版效果| 1 | # dense-modules |
| 2 | |
| 3 | High-density modular layout with 6-7 typed information modules packed with concrete data. |
| 4 | |
| 5 | ## Structure |
| 6 | |
| 7 | - 6-7 distinct modules per image, each serving a specific information function |
| 8 | - Every module contains concrete data: brand names, numbers, percentages, parameters |
| 9 | - Minimal whitespace—compact spacing prioritized over breathing room |
| 10 | - Smaller text acceptable to maximize information density |
| 11 | - Each module identified by coordinate label or section marker (e.g., MOD-1, SEC-A) |
| 12 | |
| 13 | ## Module Archetypes |
| 14 | |
| 15 | | Module | Purpose | Content Requirements | |
| 16 | |--------|---------|---------------------| |
| 17 | | **Brand/Selection Array** | Grid of options with recommendations | 4-8 items with icons, names, brief descriptions; highlight "best choice" | |
| 18 | | **Specification Scale** | Quality/measurement gauge | 3-5 levels with precise numerical increments, quality indicators (emoji faces, checkmarks) | |
| 19 | | **Deep Dive/Detail** | Technical breakdown of key item | Zoom-in callouts, internal components, cross-section or exploded view | |
| 20 | | **Scenario Comparison** | Side-by-side use cases | 3-6 scenarios with specific recommendations and data per scenario | |
| 21 | | **Identification Tips** | How-to checklist | 3-5 inspection methods: look/test/check/ask format | |
| 22 | | **Warning/Pitfall Zone** | Critical mistakes to avoid | 3-5 pitfalls with consequences, 1-2 correct approaches; high visual contrast | |
| 23 | | **Quick Reference** | Compact summary | Dense table, one-line summaries, decision flowchart, or key takeaways | |
| 24 | |
| 25 | ## Variants |
| 26 | |
| 27 | | Variant | Focus | Visual Emphasis | |
| 28 | |---------|-------|-----------------| |
| 29 | | **Coordinate-labeled** | Precision and systematicity | Each module has alphanumeric coordinate (A-01, B-05, C-12), ruler/axis markers | |
| 30 | | **Grid-cell** | Order and structure | Modules in strict rectangular cells divided by thick lines, Swiss grid feel | |
| 31 | | **Free-flowing** | Organic density | Magazine-style layout with dotted frames, varying module sizes, connected by arrows | |
| 32 | |
| 33 | ## Best For |
| 34 | |
| 35 | - Product selection guides and buying guides |
| 36 | - Multi-dimensional comparison content |
| 37 | - Data-rich educational materials |
| 38 | - "Avoid pitfalls" / "complete guide" formats |
| 39 | - Content targeting platforms like Xiaohongshu with high-density visual requirements |
| 40 | |
| 41 | ## Visual Elements |
| 42 | |
| 43 | - Module boundary markers (thick lines, dotted frames, or coordinate grids) |
| 44 | - Quality indicators per module (emoji faces, checkmarks, crosses, crowns) |
| 45 | - Data callout boxes with highlighted numbers |
| 46 | - Comparison arrows and progression indicators |
| 47 | - Warning/alert visual markers for pitfall modules |
| 48 | - Metadata in corners (page numbers, timestamps, small barcodes) |
| 49 | |
| 50 | ## Text Placement |
| 51 | |
| 52 | - Main title at top, prominent and impactful |
| 53 | - Subtitle with module count ("X大维度全面解析...") |
| 54 | - Module headers inside colored badges or labeled frames |
| 55 | - Body text compact, multiple columns within modules |
| 56 | - Numbers highlighted with accent colors, slightly larger than body text |
| 57 | |
| 58 | ## Information Density Rules |
| 59 | |
| 60 | - Every corner should contain useful information or metadata |
| 61 | - No decorative-only empty space |
| 62 | - Text size may be reduced to fit more content—information over font size |
| 63 | - Each module must have specific data points, not generic descriptions |
| 64 | - Balance between density and readability: dense but organized |
| 65 | |
| 66 | ## Recommended Pairings |
| 67 | |
| 68 | - `pop-laboratory`: Technical precision with coordinate markers and blueprint grid |
| 69 | - `morandi-journal`: Hand-drawn warmth with doodle illustrations and organic frames |
| 70 | - `retro-pop-grid`: 1970s pop art with strict grid cells and bold contrast |
| 71 | - `retro-popup-pop`: Vintage desktop popups with chunky pixel UI for retro-tech dense guides |
| 72 | - `corporate-memphis`: Clean business feel for product comparisons |
| 73 | - `technical-schematic`: Engineering precision for technical product guides |
文件内容是平台检查时读出的文本，只供查看。平台不会运行包里的任何脚本或程序。
