{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "mobile-first",
  "name": {
    "zh": "移动优先",
    "en": "Mobile-First"
  },
  "page": "https://designvocabulary.com/zh/entries/mobile-first/",
  "self": "https://designvocabulary.com/zh/entries/mobile-first.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/mobile-first.json",
    "en": "https://designvocabulary.com/en/entries/mobile-first.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.philosophy"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "mobilefirst-lukew-2009",
        "url": "https://www.lukew.com/ff/entry.asp?933",
        "title": "LukeW · Mobile First",
        "checkedAt": "2026-10-20",
        "archive": {
          "status": "unconfirmed",
          "confirmed": false,
          "url": null,
          "capturedAt": null,
          "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/ff/entry.asp?933"
        }
      },
      {
        "id": "mobilefirst-lukew-book",
        "url": "https://www.lukew.com/resources/mobile_first.asp",
        "title": "LukeW · Mobile First (A Book Apart, 2011)",
        "checkedAt": "2026-10-20",
        "archive": {
          "status": "unconfirmed",
          "confirmed": false,
          "url": null,
          "capturedAt": null,
          "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/resources/mobile_first.asp"
        }
      },
      {
        "id": "mobilefirst-marcotte-rwd",
        "url": "https://alistapart.com/article/responsive-web-design/",
        "title": "A List Apart · Responsive Web Design (Ethan Marcotte)",
        "checkedAt": "2026-10-20",
        "archive": {
          "status": "unconfirmed",
          "confirmed": false,
          "url": null,
          "capturedAt": null,
          "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/responsive-web-design/"
        }
      }
    ],
    "lists": [],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "id": "mobile-first",
    "type": "philosophy",
    "name": {
      "zh": "移动优先",
      "en": "Mobile-First"
    },
    "aliases": [
      "Mobile First",
      "Mobile-First Design",
      "移动端优先",
      "小屏优先"
    ],
    "granularity": "experience",
    "intents": [
      "extend-reach",
      "reduce-complexity",
      "organize-content"
    ],
    "tags": [
      "移动端",
      "小屏幕",
      "优先级",
      "内容取舍",
      "向上扩展"
    ],
    "definition": "先为最小的屏幕与移动情境设计产品，再向更大的屏幕扩展：小屏幕迫使团队先决定什么最重要，移动设备特有的能力也从一开始就被纳入考虑，而不是把桌面版做完后再削减成移动版。",
    "boundary": "移动优先是关于设计顺序与取舍的立场，不是一种排版技术。它不等于响应式设计：响应式设计是用流式网格、弹性图片与媒体查询让同一页面适应不同宽度的实现手段，可以从桌面向下写，也可以从移动向上写；移动优先回答的是先为哪种情境做取舍。它也不同于渐进增强：渐进增强按浏览器与网络的能力从基础功能逐层叠加，关心的是在最差条件下核心任务能否完成；移动优先按屏幕与情境排序，最小的屏幕不一定是能力最弱的环境。它也不意味着\"只做移动端\"或把桌面版做成放大的手机界面——向上扩展时更大的屏幕同样应当得到合适的版式。",
    "signature": [
      "第一版版式与内容取舍是在最小屏幕上做出的",
      "较大屏幕的版式是在小屏版本上增加列、信息与操作，而不是反过来删减",
      "定位、触控、摄像头等移动设备能力在需求阶段就被考虑"
    ],
    "when": [
      "相当一部分使用发生在手机上，或这一比例正在增长",
      "页面内容与功能过多，团队难以就优先级达成一致",
      "产品能从定位、触控或传感器等移动能力中真正受益"
    ],
    "when_not": [
      "主要任务依赖大屏幕与精确指针，例如密集的数据编辑或专业制图工具",
      "把小屏版本直接放大当作桌面版，宽屏空间被浪费",
      "以\"移动端放不下\"为由删掉用户在任何设备上都需要的内容"
    ],
    "tradeoff": "从最小屏幕开始迫使团队尽早决定优先级，得到的核心体验更聚焦，也让移动设备的能力进入早期设计；代价是桌面上的高密度任务可能被当作事后补充，而小屏上的取舍一旦被当作内容本身的取舍，较大屏幕的用户会失去他们需要的信息。",
    "comparison": {
      "focus": "先为最小屏幕与移动情境做内容和功能的取舍",
      "mechanism": "以小屏版本为基线，随着屏幕变大逐步增加版式、信息与操作",
      "cost": "大屏上的高密度任务容易被当成事后补充"
    },
    "sources": [
      {
        "id": "mobilefirst-lukew-2009",
        "title": "LukeW · Mobile First",
        "url": "https://www.lukew.com/ff/entry.asp?933",
        "claim": "Luke Wroblewski 在 2009 年 11 月 3 日的这篇文章中主张 Web 应用应先为移动端、再为桌面设计，并给出三条理由：移动使用量快速增长；小屏幕的限制迫使团队确定优先级、只保留关键任务；移动平台提供定位、指南针、多点触控、加速度计等桌面浏览器缺少的能力。本词条的定义与\"增长、约束、能力\"三点据此转述；文中引用的用户增长预测属于当年的数字，本词条不作复述。",
        "checkedAt": "2026-10-20",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/ff/entry.asp?933",
          "status": "unconfirmed",
          "checkedAt": "2026-10-20T08:00:05.333Z",
          "error": "save-request-failed"
        }
      },
      {
        "id": "mobilefirst-lukew-book",
        "title": "LukeW · Mobile First (A Book Apart, 2011)",
        "url": "https://www.lukew.com/resources/mobile_first.asp",
        "claim": "作者的图书页面说明《Mobile First》由 A Book Apart 于 2011 年 10 月出版，主张网站与应用应越来越多地先为移动端设计，认为从桌面开始可能是一种越来越落后的思考方式，并介绍团队如何在组织、操作、输入与版式等方面从桌面转向移动设计。本词条据此说明这一立场的来源与关注范围。",
        "checkedAt": "2026-10-20",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/resources/mobile_first.asp",
          "status": "unconfirmed",
          "checkedAt": "2026-10-20T08:00:07.408Z",
          "error": "save-request-failed"
        }
      },
      {
        "id": "mobilefirst-marcotte-rwd",
        "title": "A List Apart · Responsive Web Design (Ethan Marcotte)",
        "url": "https://alistapart.com/article/responsive-web-design/",
        "claim": "Ethan Marcotte 于 2010 年 5 月 25 日发表的这篇文章提出响应式网页设计，把流式网格、弹性图片与媒体查询列为其三项技术要素，用一套适应性的体验代替为各设备分别建站。本词条只据此区分：响应式设计是实现手段，移动优先是设计顺序与取舍的立场。",
        "checkedAt": "2026-10-20",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/responsive-web-design/",
          "status": "unconfirmed",
          "checkedAt": "2026-10-20T08:00:08.060Z",
          "error": "save-request-failed"
        }
      }
    ],
    "relations": [
      {
        "target": "progressive-enhancement",
        "kind": "related",
        "condition": "两者容易被当成同一件事时需要分辨",
        "reason": "两者都是\"从小处开始、向上增加\"，但渐进增强按浏览器与网络能力分层，移动优先按屏幕与使用情境排序；最小的屏幕不一定是能力最弱的环境，两条轴可以同时采用。",
        "basis": "editorial"
      },
      {
        "target": "single-column",
        "kind": "realized_by",
        "condition": "确定小屏上的基线版式",
        "reason": "小屏基线通常是一列由上到下的内容，较大屏幕再在此基础上增加栏位。",
        "basis": "editorial"
      },
      {
        "target": "adaptive-multipane",
        "kind": "composes_with",
        "condition": "屏幕变大时需要决定增加什么",
        "reason": "移动优先决定基线内容，自适应多窗格说明大屏上如何把这些内容并排展开，而不是把手机界面放大。",
        "basis": "editorial"
      },
      {
        "target": "cognitive-load",
        "kind": "informs",
        "condition": "页面信息与操作过多",
        "reason": "小屏幕的限制迫使团队删去非必要元素，这一取舍同样减少了用户需要同时处理的信息。",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "为小屏幕删减内容或功能",
        "instruction": "区分\"放到次一级位置\"和\"彻底删除\"：用户在任何设备上都需要的内容只能调整位置或展开方式，不应因为屏幕小而消失。",
        "strength": "recommend",
        "basis": "editorial"
      },
      {
        "when": "向较大屏幕扩展版式",
        "instruction": "为大屏单独决定增加哪些栏位、信息与快捷操作，并用真实的大屏任务检查，而不是只把小屏版本拉宽。",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "philosophy": {
      "values": [
        "先决定什么最重要，再决定放多少",
        "设计应从使用最受限的情境出发"
      ],
      "tension": "小屏幕带来的聚焦与大屏任务所需的信息密度之间",
      "questions": [
        "如果只能放一件事，这一页放什么？",
        "这次删减是位置的取舍，还是内容的取舍？",
        "屏幕变大之后，用户多得到了什么？"
      ]
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "本词条尚无可操作示例；插画为编辑示意，以同一虚构页面从手机到桌面逐级展开来表现设计顺序，不代表任何具体的断点或框架。应用到产品之前仍须用真实设备与真实任务检查各尺寸下的取舍。",
    "image": {
      "src": "/images/mobile-first.webp",
      "alt": "一张示意图：同一个虚构的 FIELDNOTES 页面从左到右出现在手机、平板与桌面三种尺寸的屏幕上；手机上是单列的灰色内容条与一个陶土色主按钮，平板上增加了一列，桌面上再增加侧栏，三者之间用向右的小箭头连接。"
    },
    "searchTerms": [
      "mobile",
      "small screens",
      "priorities",
      "content choices",
      "scaling up"
    ]
  }
}