{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "list", "locale": "en", "id": "L-C", "name": { "zh": "布局与信息架构 · 经典基础", "en": "Layout & information architecture · Classic foundation" }, "headline": { "zh": "网页布局 Top 10：10 大经典页面与信息架构", "en": "Top 10 Classic Web Layout and Information Architecture Patterns" }, "page": "https://designvocabulary.com/en/lists/L-C/", "self": "https://designvocabulary.com/en/lists/L-C.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/lists/L-C.json", "en": "https://designvocabulary.com/en/lists/L-C.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/en/lists/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "selection": "editorial", "ordered": false, "disclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is.", "titleNote": "“Top” in the title is a search convention. This edition is an editorial selection, not a ranking, a score, or a measure of popularity.", "seatOrigins": { "issue-1-ledger": "The seat comes from the list ledger in plan issue #1.", "editorial-reconstruction": "The seat was filled by editorial judgement in this repository." }, "evidence": "Each reason says what structural gap the entry fills; together they are not an order of preference. These structures often combine, and the choice follows the task, not the position in a list.", "nominalSize": 10, "seatCount": 10, "filled": true, "sibling": { "id": "L-Y", "page": "https://designvocabulary.com/en/lists/L-Y/", "json": "https://designvocabulary.com/en/lists/L-Y.json" } }, "seats": [ { "seat": 1, "entry": "master-detail", "origin": "editorial-reconstruction", "reason": "Sets the category's baseline: a list selection decides what the detail shows.", "name": "Master–Detail", "type": "layout", "page": "https://designvocabulary.com/en/entries/master-detail/", "json": "https://designvocabulary.com/en/entries/master-detail.json" }, { "seat": 2, "entry": "bento", "origin": "editorial-reconstruction", "reason": "Covers surveying several blocks at once, in contrast to working through items one at a time.", "name": "Bento Grid", "type": "layout", "page": "https://designvocabulary.com/en/entries/bento/", "json": "https://designvocabulary.com/en/entries/bento.json" }, { "seat": 3, "entry": "modular-grid", "origin": "issue-1-ledger", "reason": "Shows that a grid can itself be a structural convention, not only an alignment tool.", "name": "Modular Grid", "type": "layout", "page": "https://designvocabulary.com/en/entries/modular-grid/", "json": "https://designvocabulary.com/en/entries/modular-grid.json" }, { "seat": 4, "entry": "single-column", "origin": "issue-1-ledger", "reason": "Covers the simplest structure and flags that it is where several layouts converge on narrow screens.", "name": "Single-Column Layout", "type": "layout", "page": "https://designvocabulary.com/en/entries/single-column/", "json": "https://designvocabulary.com/en/entries/single-column.json" }, { "seat": 5, "entry": "sidebar-layout", "origin": "issue-1-ledger", "reason": "Separates a persistent side region from master-detail: a sidebar is not necessarily a list of objects.", "name": "Sidebar Layout", "type": "layout", "page": "https://designvocabulary.com/en/entries/sidebar-layout/", "json": "https://designvocabulary.com/en/entries/sidebar-layout.json" }, { "seat": 6, "entry": "card-grid", "origin": "issue-1-ledger", "reason": "Covers repeated, uniform units, as distinct from blocks of differing size.", "name": "Card Grid", "type": "layout", "page": "https://designvocabulary.com/en/entries/card-grid/", "json": "https://designvocabulary.com/en/entries/card-grid.json" }, { "seat": 7, "entry": "holy-grail-layout", "origin": "issue-1-ledger", "reason": "Keeps a three-column composition that has a specific historical name, and notes it is not a list-detail relationship.", "name": "Holy Grail Layout", "type": "layout", "page": "https://designvocabulary.com/en/entries/holy-grail-layout/", "json": "https://designvocabulary.com/en/entries/holy-grail-layout.json" }, { "seat": 8, "entry": "hierarchical-navigation", "origin": "issue-1-ledger", "reason": "Brings tree organisation across pages into this category, showing layout is not only within-page arrangement.", "name": "Hierarchical Navigation Structure", "type": "layout", "page": "https://designvocabulary.com/en/entries/hierarchical-navigation/", "json": "https://designvocabulary.com/en/entries/hierarchical-navigation.json" }, { "seat": 9, "entry": "hub-and-spoke", "origin": "issue-1-ledger", "reason": "Covers a single hub linking otherwise isolated tasks, unlike drilling down through levels.", "name": "Hub-and-Spoke Structure", "type": "layout", "page": "https://designvocabulary.com/en/entries/hub-and-spoke/", "json": "https://designvocabulary.com/en/entries/hub-and-spoke.json" }, { "seat": 10, "entry": "linear-flow", "origin": "issue-1-ledger", "reason": "Covers a fixed sequence with no branches, and makes clear it is not the same as revealing on demand.", "name": "Linear Flow Structure", "type": "layout", "page": "https://designvocabulary.com/en/entries/linear-flow/", "json": "https://designvocabulary.com/en/entries/linear-flow.json" } ], "list": { "id": "L-C", "category": "layout", "edition": "classic", "name": { "zh": "布局与信息架构 · 经典基础", "en": "Layout & information architecture · Classic foundation" }, "headline": { "zh": "网页布局 Top 10：10 大经典页面与信息架构", "en": "Top 10 Classic Web Layout and Information Architecture Patterns" }, "note": "A classic foundation for layout and information architecture: chosen for structural differences, not ordered by how often each is used.", "keywords": [ "web layout patterns", "page layout", "information architecture", "master-detail", "card grid", "single column layout", "sidebar layout", "navigation structure" ], "lead": "This edition collects the basic skeletons of layout and information architecture — the decision you make before drawing anything. These structures do not replace one another; they answer different questions.", "criteria": [ "It describes a structural relationship between pieces of content, not the look of one component.", "It separates from its neighbours by who decides what is shown, not by what it looks like.", "It applies to arrangement within a page or to navigation across pages; this category treats both as layout." ], "pairing": "Against the 2026 focus edition, this one depends less on any single year's product shapes. An entry in both lists is a structure that is both foundational and being put to new use.", "evidence": "Each reason says what structural gap the entry fills; together they are not an order of preference. These structures often combine, and the choice follows the task, not the position in a list.", "seats": [ { "seat": 1, "entry": "master-detail", "origin": "editorial-reconstruction", "reason": "Sets the category's baseline: a list selection decides what the detail shows." }, { "seat": 2, "entry": "bento", "origin": "editorial-reconstruction", "reason": "Covers surveying several blocks at once, in contrast to working through items one at a time." }, { "seat": 3, "entry": "modular-grid", "origin": "issue-1-ledger", "reason": "Shows that a grid can itself be a structural convention, not only an alignment tool." }, { "seat": 4, "entry": "single-column", "origin": "issue-1-ledger", "reason": "Covers the simplest structure and flags that it is where several layouts converge on narrow screens." }, { "seat": 5, "entry": "sidebar-layout", "origin": "issue-1-ledger", "reason": "Separates a persistent side region from master-detail: a sidebar is not necessarily a list of objects." }, { "seat": 6, "entry": "card-grid", "origin": "issue-1-ledger", "reason": "Covers repeated, uniform units, as distinct from blocks of differing size." }, { "seat": 7, "entry": "holy-grail-layout", "origin": "issue-1-ledger", "reason": "Keeps a three-column composition that has a specific historical name, and notes it is not a list-detail relationship." }, { "seat": 8, "entry": "hierarchical-navigation", "origin": "issue-1-ledger", "reason": "Brings tree organisation across pages into this category, showing layout is not only within-page arrangement." }, { "seat": 9, "entry": "hub-and-spoke", "origin": "issue-1-ledger", "reason": "Covers a single hub linking otherwise isolated tasks, unlike drilling down through levels." }, { "seat": 10, "entry": "linear-flow", "origin": "issue-1-ledger", "reason": "Covers a fixed sequence with no branches, and makes clear it is not the same as revealing on demand." } ] } }