[{"data":1,"prerenderedAt":1855},["ShallowReactive",2],{"article-/topics/design/web-design-proposal-goals-structure-visual-direction":3,"related-design":526,"content-query-oVBvWoHH8o":1468},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":17,"imageQuery":18,"pexelsPhotoId":19,"pexelsUrl":20,"featured":6,"readingTime":21,"body":22,"_type":520,"_id":521,"_source":522,"_file":523,"_stem":524,"_extension":525},"/topics/design/web-design-proposal-goals-structure-visual-direction","design",false,"","网页设计方案怎么写：目标、受众、页面结构和视觉方向怎么一次对齐","很多网页设计方案看起来页数很多，真正进入项目后却还是反复重做。本文把网页设计方案拆成目标、受众、页面结构和视觉方向四个部分，讲清怎样把模糊需求写成可执行的方案。","2026-05-19","HTMLPAGE 团队",[13,14,15,16],"网页设计","网站设计","页面设计","设计方案","/images/articles/web-design-proposal-goals-structure-visual-direction-featured.jpg","website design proposal planning notes wireframe board",6913206,"https://www.pexels.com/photo/white-printer-paper-on-the-blackboard-6913206/",15,{"type":23,"children":24,"toc":508},"root",[25,33,38,43,80,87,192,197,203,208,233,238,243,261,266,272,277,282,300,305,310,316,321,326,331,360,365,371,376,381,399,404,409,415,420,425,430,436,441,469,474,480,485,503],{"type":26,"tag":27,"props":28,"children":29},"element","p",{},[30],{"type":31,"value":32},"text","很多团队一说要做网页设计方案，第一反应就是先整理竞品截图、找几张参考图，再写几页“风格方向”。这件事看上去专业，真正进项目时却经常失灵。首页该先讲价值还是先讲品牌，案例页要不要独立出来，CTA 是直接咨询还是先看方案，谁都还没对齐，方案却已经开始讨论蓝绿色还是黑金色。最后方案做得越像展示稿，后续返工就越重。",{"type":26,"tag":27,"props":34,"children":35},{},[36],{"type":31,"value":37},"问题不在于方案写得不够多，而在于很多方案把真正该先对齐的东西放到了后面。网页设计方案的本质，不是让页面显得更正式，而是让团队在进入视觉制作前先把几个关键判断锁住：这次页面到底为了什么做，主要给谁看，页面要按什么顺序解释问题，以及视觉方向应该服务什么，而不是单独表演审美。",{"type":26,"tag":27,"props":39,"children":40},{},[41],{"type":31,"value":42},"所以这篇文章不打算教你怎么把方案排得像提案 PPT，而是回答一个更实用的问题：网页设计方案到底应该写到什么程度，才能让设计、内容、业务和后续制作团队在同一张纸上工作，而不是每往前走一步又把前面的判断推翻一次。",{"type":26,"tag":27,"props":44,"children":45},{},[46,48,55,57,63,64,70,72,78],{"type":31,"value":47},"如果你要一起补完整个设计判断链，可以搭配看 ",{"type":26,"tag":49,"props":50,"children":52},"a",{"href":51},"/topics/design/web-design-layout-visual-hierarchy-practical-guide",[53],{"type":31,"value":54},"网页设计实战指南",{"type":31,"value":56},"、",{"type":26,"tag":49,"props":58,"children":60},{"href":59},"/topics/design/web-design-review-rubric-reading-flow-conversion",[61],{"type":31,"value":62},"网页设计如何评审才不只看好不好看",{"type":31,"value":56},{"type":26,"tag":49,"props":65,"children":67},{"href":66},"/topics/design/website-redesign-template-to-brand-case-study",[68],{"type":31,"value":69},"网页设计改版复盘：从模板感到品牌感",{"type":31,"value":71}," 和 ",{"type":26,"tag":49,"props":73,"children":75},{"href":74},"/topics/practical-tips/landing-page-brief-template-for-website-production",[76],{"type":31,"value":77},"网页制作需求说明模板",{"type":31,"value":79},"。",{"type":26,"tag":81,"props":82,"children":84},"h2",{"id":83},"先给结论网页设计方案不是把页面先画出来而是先把四个判断一次写清",[85],{"type":31,"value":86},"先给结论：网页设计方案不是把页面先画出来，而是先把四个判断一次写清",{"type":26,"tag":88,"props":89,"children":90},"table",{},[91,115],{"type":26,"tag":92,"props":93,"children":94},"thead",{},[95],{"type":26,"tag":96,"props":97,"children":98},"tr",{},[99,105,110],{"type":26,"tag":100,"props":101,"children":102},"th",{},[103],{"type":31,"value":104},"方案部分",{"type":26,"tag":100,"props":106,"children":107},{},[108],{"type":31,"value":109},"必须回答的问题",{"type":26,"tag":100,"props":111,"children":112},{},[113],{"type":31,"value":114},"没写清会发生什么",{"type":26,"tag":116,"props":117,"children":118},"tbody",{},[119,138,156,174],{"type":26,"tag":96,"props":120,"children":121},{},[122,128,133],{"type":26,"tag":123,"props":124,"children":125},"td",{},[126],{"type":31,"value":127},"目标",{"type":26,"tag":123,"props":129,"children":130},{},[131],{"type":31,"value":132},"这次页面要推动什么动作或结果",{"type":26,"tag":123,"props":134,"children":135},{},[136],{"type":31,"value":137},"方案看起来完整，但方向一直摇摆",{"type":26,"tag":96,"props":139,"children":140},{},[141,146,151],{"type":26,"tag":123,"props":142,"children":143},{},[144],{"type":31,"value":145},"受众",{"type":26,"tag":123,"props":147,"children":148},{},[149],{"type":31,"value":150},"页面主要给谁看，他们卡在哪一步",{"type":26,"tag":123,"props":152,"children":153},{},[154],{"type":31,"value":155},"页面信息很多，却没有真正的主线",{"type":26,"tag":96,"props":157,"children":158},{},[159,164,169],{"type":26,"tag":123,"props":160,"children":161},{},[162],{"type":31,"value":163},"结构",{"type":26,"tag":123,"props":165,"children":166},{},[167],{"type":31,"value":168},"页面按什么决策顺序展开",{"type":26,"tag":123,"props":170,"children":171},{},[172],{"type":31,"value":173},"视觉稿出来后仍在大改模块顺序",{"type":26,"tag":96,"props":175,"children":176},{},[177,182,187],{"type":26,"tag":123,"props":178,"children":179},{},[180],{"type":31,"value":181},"视觉方向",{"type":26,"tag":123,"props":183,"children":184},{},[185],{"type":31,"value":186},"风格为什么适合这次业务和受众",{"type":26,"tag":123,"props":188,"children":189},{},[190],{"type":31,"value":191},"讨论很久审美，落不到执行标准",{"type":26,"tag":27,"props":193,"children":194},{},[195],{"type":31,"value":196},"这四块少一块，方案都可能变成一种“延迟返工”。最常见的误判是把视觉方向当成方案主体，结果最关键的业务判断还在空白状态里漂着。",{"type":26,"tag":81,"props":198,"children":200},{"id":199},"先写目标不要先写高级感国际化这类风格词",[201],{"type":31,"value":202},"先写目标，不要先写“高级感”“国际化”这类风格词",{"type":26,"tag":27,"props":204,"children":205},{},[206],{"type":31,"value":207},"网页设计方案最先要写的，不是风格，而是目标。因为同样是“做官网”，实际可能在做完全不同的事：",{"type":26,"tag":209,"props":210,"children":211},"ul",{},[212,218,223,228],{"type":26,"tag":213,"props":214,"children":215},"li",{},[216],{"type":31,"value":217},"有的页面是为了拿咨询线索",{"type":26,"tag":213,"props":219,"children":220},{},[221],{"type":31,"value":222},"有的页面是为了让销售讲方案更顺",{"type":26,"tag":213,"props":224,"children":225},{},[226],{"type":31,"value":227},"有的页面是为了建立品牌可信度",{"type":26,"tag":213,"props":229,"children":230},{},[231],{"type":31,"value":232},"有的页面是为了配合投放承接搜索或广告流量",{"type":26,"tag":27,"props":234,"children":235},{},[236],{"type":31,"value":237},"目标不一样，页面结构和视觉语气都会跟着变。一个以咨询为主的页面，重点是尽快说清适合谁、怎么合作、为什么可信；一个偏品牌展示的页面，则更在意表达顺序、气质统一和长线内容沉淀。如果方案里只写“要大气”“要更专业”，团队真正进入制作时还是会不断回到最前面问：这个页面到底想让用户做什么。",{"type":26,"tag":27,"props":239,"children":240},{},[241],{"type":31,"value":242},"更有效的写法，是把目标压成一句能指导后续判断的表达，例如：",{"type":26,"tag":209,"props":244,"children":245},{},[246,251,256],{"type":26,"tag":213,"props":247,"children":248},{},[249],{"type":31,"value":250},"让第一次进入页面的企业客户在 60 秒内理解服务边界，并愿意提交咨询",{"type":26,"tag":213,"props":252,"children":253},{},[254],{"type":31,"value":255},"让已有渠道流量先看懂方案差异，再进入案例或联系页",{"type":26,"tag":213,"props":257,"children":258},{},[259],{"type":31,"value":260},"让官网首页承担统一品牌表达，而不是继续当活动页集合",{"type":26,"tag":27,"props":262,"children":263},{},[264],{"type":31,"value":265},"只要目标句写不出来，方案还不该进入视觉方向讨论。",{"type":26,"tag":81,"props":267,"children":269},{"id":268},"第二步写受众不要默认所有访客都一样",[270],{"type":31,"value":271},"第二步写受众，不要默认“所有访客都一样”",{"type":26,"tag":27,"props":273,"children":274},{},[275],{"type":31,"value":276},"很多网页设计方案会把受众写成“潜在客户”或“目标用户”，这几乎等于没写。因为真正影响页面结构的，不是大类标签，而是访客当前处在什么决策阶段。",{"type":26,"tag":27,"props":278,"children":279},{},[280],{"type":31,"value":281},"更有用的拆法通常是：",{"type":26,"tag":209,"props":283,"children":284},{},[285,290,295],{"type":26,"tag":213,"props":286,"children":287},{},[288],{"type":31,"value":289},"他们是第一次认识你，还是已经带着明确需求进来",{"type":26,"tag":213,"props":291,"children":292},{},[293],{"type":31,"value":294},"他们最先要判断的是能力、价格、行业经验，还是交付方式",{"type":26,"tag":213,"props":296,"children":297},{},[298],{"type":31,"value":299},"他们是想立刻联系，还是先比较几家方案",{"type":26,"tag":27,"props":301,"children":302},{},[303],{"type":31,"value":304},"网页设计方案只要把受众写成统一人群，页面就会开始把所有话混在一起说。首屏想讲品牌，第二屏想讲方案，第三屏又想讲价格，后面再补案例、FAQ 和表单，结果看起来什么都有，真正的主路径却被稀释掉了。",{"type":26,"tag":27,"props":306,"children":307},{},[308],{"type":31,"value":309},"如果你不知道该怎么写，至少先把受众分成一主一辅两类。主受众决定首屏和主 CTA，辅受众决定次要解释和次级入口。这样做虽然不复杂，却能明显减少后续“这个模块也想保留”的内耗。",{"type":26,"tag":81,"props":311,"children":313},{"id":312},"页面结构要按用户判断顺序写不要按模块名堆目录",[314],{"type":31,"value":315},"页面结构要按用户判断顺序写，不要按模块名堆目录",{"type":26,"tag":27,"props":317,"children":318},{},[319],{"type":31,"value":320},"很多方案有一个常见问题：目录看起来很完整，但其实只是把常见模块列了一遍，比如首页、关于我们、服务介绍、案例、FAQ、联系表单。这不是结构，只是模块名单。",{"type":26,"tag":27,"props":322,"children":323},{},[324],{"type":31,"value":325},"结构真正要解决的问题是：用户先理解什么，再相信什么，最后为什么会行动。也就是说，网页设计方案里的结构部分，最好写成决策顺序，而不是页面零件清单。",{"type":26,"tag":27,"props":327,"children":328},{},[329],{"type":31,"value":330},"更实用的结构表达通常像这样：",{"type":26,"tag":332,"props":333,"children":334},"ol",{},[335,340,345,350,355],{"type":26,"tag":213,"props":336,"children":337},{},[338],{"type":31,"value":339},"首屏先说清楚你是谁、适合谁、为什么值得继续看",{"type":26,"tag":213,"props":341,"children":342},{},[343],{"type":31,"value":344},"中段解释问题与解决方案，不急着先讲品牌故事",{"type":26,"tag":213,"props":346,"children":347},{},[348],{"type":31,"value":349},"在用户开始犹豫的位置放案例、结果或客户类型",{"type":26,"tag":213,"props":351,"children":352},{},[353],{"type":31,"value":354},"在行动前补价格边界、交付方式或常见顾虑",{"type":26,"tag":213,"props":356,"children":357},{},[358],{"type":31,"value":359},"最后再给明确 CTA，而不是整页到处抢动作",{"type":26,"tag":27,"props":361,"children":362},{},[363],{"type":31,"value":364},"只要结构部分能写到这个程度，后面的线框和视觉稿就有了稳定支点。反过来，如果方案里只写“首页包含 8 个模块”，那视觉稿出来后重排顺序几乎是必然的。",{"type":26,"tag":81,"props":366,"children":368},{"id":367},"视觉方向不是-moodboard-拼贴而是带边界的选择",[369],{"type":31,"value":370},"视觉方向不是 moodboard 拼贴，而是带边界的选择",{"type":26,"tag":27,"props":372,"children":373},{},[374],{"type":31,"value":375},"网页设计方案里最容易写得漂浮的一段，就是视觉方向。很多提案会给三页参考图，然后写“现代、简洁、专业、有质感”。这些词本身没错，问题是它们无法指导执行。因为不同人看到“简洁”“高级”会自动脑补完全不同的东西。",{"type":26,"tag":27,"props":377,"children":378},{},[379],{"type":31,"value":380},"真正能落地的视觉方向，至少要同时说明三件事：",{"type":26,"tag":209,"props":382,"children":383},{},[384,389,394],{"type":26,"tag":213,"props":385,"children":386},{},[387],{"type":31,"value":388},"为什么这种风格适合当前业务，而不是只是参考图好看",{"type":26,"tag":213,"props":390,"children":391},{},[392],{"type":31,"value":393},"视觉重点放在哪里，是可信感、效率感、行业感还是品牌辨识度",{"type":26,"tag":213,"props":395,"children":396},{},[397],{"type":31,"value":398},"哪些边界不能碰，例如不能为了气质牺牲信息清晰度，不能为了极简把转化入口藏掉",{"type":26,"tag":27,"props":400,"children":401},{},[402],{"type":31,"value":403},"比如企业官网首页，如果目标是让陌生客户快速判断是否值得联系，那么视觉方向就不该只追求“克制高级”，还要明确：标题必须可读、证据区要足够早出现、CTA 不能被过度弱化、图片风格要支撑业务场景而不是抽象氛围。",{"type":26,"tag":27,"props":405,"children":406},{},[407],{"type":31,"value":408},"换句话说，视觉方向应该是一个带约束的决定，而不是一组抽象形容词。",{"type":26,"tag":81,"props":410,"children":412},{"id":411},"失败案例方案写了-20-页项目还是在视觉稿阶段来回重做",[413],{"type":31,"value":414},"失败案例：方案写了 20 页，项目还是在视觉稿阶段来回重做",{"type":26,"tag":27,"props":416,"children":417},{},[418],{"type":31,"value":419},"一个典型案例是：某团队给新官网准备了一份很完整的网页设计方案，里面有竞品分析、品牌关键词、参考图、配色偏好和几页很精致的氛围描述。所有人第一次看都觉得“很专业”。",{"type":26,"tag":27,"props":421,"children":422},{},[423],{"type":31,"value":424},"真正进到视觉稿阶段后，问题才开始出现。业务团队说首页没有把行业方案讲清楚，销售团队说咨询入口太靠后，内容团队又觉得案例应该比品牌故事更早出现。设计团队只好开始不断调结构。改了两轮之后，大家又发现原先选定的视觉参考更适合品牌展示，不适合当前偏获客的目标，于是连配色和排版语气都跟着一起回调。",{"type":26,"tag":27,"props":426,"children":427},{},[428],{"type":31,"value":429},"最后回头看，方案不是没做，而是最关键的四个判断没有写硬：目标不够具体、主受众没有拆开、结构只写了模块名单、视觉方向没有绑定业务场景。方案越长，只是越晚暴露这个问题。",{"type":26,"tag":81,"props":431,"children":433},{"id":432},"什么时候方案已经足够别再继续写厚",[434],{"type":31,"value":435},"什么时候方案已经足够，别再继续写厚",{"type":26,"tag":27,"props":437,"children":438},{},[439],{"type":31,"value":440},"网页设计方案并不是越完整越好。只要下面这些问题已经能回答清楚，方案通常就够进入下一步了：",{"type":26,"tag":209,"props":442,"children":443},{},[444,449,454,459,464],{"type":26,"tag":213,"props":445,"children":446},{},[447],{"type":31,"value":448},"页面目标是否能用一句话描述",{"type":26,"tag":213,"props":450,"children":451},{},[452],{"type":31,"value":453},"主受众和辅受众是否已经区分",{"type":26,"tag":213,"props":455,"children":456},{},[457],{"type":31,"value":458},"页面结构是否能按判断顺序解释，而不只是列模块",{"type":26,"tag":213,"props":460,"children":461},{},[462],{"type":31,"value":463},"视觉方向是否说明了适用原因和不能牺牲的边界",{"type":26,"tag":213,"props":465,"children":466},{},[467],{"type":31,"value":468},"相关角色是否已经知道谁还能改目标，谁只能在既定方向内优化",{"type":26,"tag":27,"props":470,"children":471},{},[472],{"type":31,"value":473},"如果这些已经明确，再继续加大段背景、竞品截图和风格词，很多时候只是把决策伪装成资料量。真正需要的不是更厚的方案，而是更少的歧义。",{"type":26,"tag":81,"props":475,"children":477},{"id":476},"先做什么把方案先压成一页再决定要不要扩写",[478],{"type":31,"value":479},"先做什么：把方案先压成一页，再决定要不要扩写",{"type":26,"tag":27,"props":481,"children":482},{},[483],{"type":31,"value":484},"如果你正在准备新的网页设计方案，更稳的起手动作通常是这三步：",{"type":26,"tag":332,"props":486,"children":487},{},[488,493,498],{"type":26,"tag":213,"props":489,"children":490},{},[491],{"type":31,"value":492},"先写一页版方案，只保留目标、受众、结构和视觉方向四块。",{"type":26,"tag":213,"props":494,"children":495},{},[496],{"type":31,"value":497},"每一块都要求能被团队成员复述，尤其是“页面为什么这样排”。",{"type":26,"tag":213,"props":499,"children":500},{},[501],{"type":31,"value":502},"只有在这四块已经清楚时，再补竞品、参考图和执行细节。",{"type":26,"tag":27,"props":504,"children":505},{},[506],{"type":31,"value":507},"网页设计方案真正的价值，不在于看上去像一个完整提案，而在于它能不能减少后续的方向返工。只要目标、受众、页面结构和视觉方向一次对齐，方案才会是项目的起点，而不是下一轮争论的包装纸。",{"title":7,"searchDepth":509,"depth":509,"links":510},3,[511,513,514,515,516,517,518,519],{"id":83,"depth":512,"text":86},2,{"id":199,"depth":512,"text":202},{"id":268,"depth":512,"text":271},{"id":312,"depth":512,"text":315},{"id":367,"depth":512,"text":370},{"id":411,"depth":512,"text":414},{"id":432,"depth":512,"text":435},{"id":476,"depth":512,"text":479},"markdown","content:topics:design:web-design-proposal-goals-structure-visual-direction.md","content","topics/design/web-design-proposal-goals-structure-visual-direction.md","topics/design/web-design-proposal-goals-structure-visual-direction","md",[527,887,1189],{"_path":528,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":529,"description":530,"keywords":531,"image":537,"author":11,"date":538,"readingTime":539,"topic":5,"body":540,"_type":520,"_id":884,"_source":522,"_file":885,"_stem":886,"_extension":525},"/topics/design/button-component-design","按钮组件设计详解","学习按钮样式、交互状态、无障碍性和最佳实践",[532,533,534,535,536],"按钮设计","Button Component","交互状态","UI 组件","用户体验","/images/topics/button-design.jpg","2025-12-08",18,{"type":23,"children":541,"toc":866},[542,546,551,556,563,576,582,591,597,606,610,616,627,633,642,648,657,662,671,676,687,692,701,706,719,753,764,807,812],{"type":26,"tag":81,"props":543,"children":544},{"id":529},[545],{"type":31,"value":529},{"type":26,"tag":27,"props":547,"children":548},{},[549],{"type":31,"value":550},"按钮是 UI 中最重要的交互元素。优秀的按钮设计能够指导用户行为。",{"type":26,"tag":81,"props":552,"children":554},{"id":553},"按钮类型",[555],{"type":31,"value":553},{"type":26,"tag":557,"props":558,"children":560},"h3",{"id":559},"primary-button主按钮",[561],{"type":31,"value":562},"Primary Button（主按钮）",{"type":26,"tag":564,"props":565,"children":570},"pre",{"className":566,"code":568,"language":569,"meta":7},[567],"language-css",".btn-primary {\n  background-color: #0066cc;\n  color: #ffffff;\n  padding: 12px 24px;\n  border: none;\n  border-radius: 4px;\n  font-weight: 600;\n  font-size: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n  background-color: #0052a3;\n  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);\n}\n\n.btn-primary:active {\n  background-color: #003d7a;\n  transform: scale(0.98);\n}\n\n.btn-primary:disabled {\n  background-color: #cccccc;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","css",[571],{"type":26,"tag":572,"props":573,"children":574},"code",{"__ignoreMap":7},[575],{"type":31,"value":568},{"type":26,"tag":557,"props":577,"children":579},{"id":578},"secondary-button次按钮",[580],{"type":31,"value":581},"Secondary Button（次按钮）",{"type":26,"tag":564,"props":583,"children":586},{"className":584,"code":585,"language":569,"meta":7},[567],".btn-secondary {\n  background-color: transparent;\n  color: #0066cc;\n  border: 2px solid #0066cc;\n  padding: 10px 22px;\n  border-radius: 4px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n  background-color: rgba(0, 102, 204, 0.1);\n}\n\n.btn-secondary:active {\n  background-color: rgba(0, 102, 204, 0.2);\n}\n",[587],{"type":26,"tag":572,"props":588,"children":589},{"__ignoreMap":7},[590],{"type":31,"value":585},{"type":26,"tag":557,"props":592,"children":594},{"id":593},"danger-button危险按钮",[595],{"type":31,"value":596},"Danger Button（危险按钮）",{"type":26,"tag":564,"props":598,"children":601},{"className":599,"code":600,"language":569,"meta":7},[567],".btn-danger {\n  background-color: #cc0000;\n  color: #ffffff;\n  padding: 12px 24px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-weight: 600;\n}\n\n.btn-danger:hover {\n  background-color: #990000;\n  box-shadow: 0 4px 12px rgba(204, 0, 0, 0.2);\n}\n",[602],{"type":26,"tag":572,"props":603,"children":604},{"__ignoreMap":7},[605],{"type":31,"value":600},{"type":26,"tag":81,"props":607,"children":608},{"id":534},[609],{"type":31,"value":534},{"type":26,"tag":557,"props":611,"children":613},{"id":612},"loading-状态",[614],{"type":31,"value":615},"Loading 状态",{"type":26,"tag":564,"props":617,"children":622},{"className":618,"code":620,"language":621,"meta":7},[619],"language-jsx","import { useState } from 'react';\n\nfunction Button({ children, onClick, loading, ...props }) {\n  const [isLoading, setIsLoading] = useState(false);\n  \n  const handleClick = async () => {\n    setIsLoading(true);\n    try {\n      await onClick();\n    } finally {\n      setIsLoading(false);\n    }\n  };\n  \n  return (\n    \u003Cbutton\n      onClick={handleClick}\n      disabled={isLoading || loading}\n      aria-busy={isLoading || loading}\n      {...props}\n    >\n      {isLoading ? (\n        \u003C>\n          \u003Cspan className=\"spinner\" aria-hidden=\"true\">\u003C/span>\n          {children}\n        \u003C/>\n      ) : (\n        children\n      )}\n    \u003C/button>\n  );\n}\n","jsx",[623],{"type":26,"tag":572,"props":624,"children":625},{"__ignoreMap":7},[626],{"type":31,"value":620},{"type":26,"tag":557,"props":628,"children":630},{"id":629},"disabled-状态",[631],{"type":31,"value":632},"Disabled 状态",{"type":26,"tag":564,"props":634,"children":637},{"className":635,"code":636,"language":569,"meta":7},[567],".btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background-color: #cccccc;\n  color: #999999;\n}\n\n/* 禁用状态下隐藏指针光标 */\n.btn:disabled:hover {\n  box-shadow: none;\n  transform: none;\n}\n",[638],{"type":26,"tag":572,"props":639,"children":640},{"__ignoreMap":7},[641],{"type":31,"value":636},{"type":26,"tag":557,"props":643,"children":645},{"id":644},"focus-状态",[646],{"type":31,"value":647},"Focus 状态",{"type":26,"tag":564,"props":649,"children":652},{"className":650,"code":651,"language":569,"meta":7},[567],".btn:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1),\n              0 0 0 5px #0066cc;\n}\n\n/* 键盘导航焦点 */\n.btn:focus-visible {\n  outline: 2px solid #0066cc;\n  outline-offset: 2px;\n}\n",[653],{"type":26,"tag":572,"props":654,"children":655},{"__ignoreMap":7},[656],{"type":31,"value":651},{"type":26,"tag":81,"props":658,"children":660},{"id":659},"按钮大小",[661],{"type":31,"value":659},{"type":26,"tag":564,"props":663,"children":666},{"className":664,"code":665,"language":569,"meta":7},[567],"/* 小按钮 */\n.btn-sm {\n  padding: 6px 12px;\n  font-size: 12px;\n  min-height: 32px;\n  min-width: 32px;\n}\n\n/* 中等按钮（默认） */\n.btn-md {\n  padding: 12px 24px;\n  font-size: 16px;\n  min-height: 44px;\n  min-width: 44px;\n}\n\n/* 大按钮 */\n.btn-lg {\n  padding: 16px 32px;\n  font-size: 18px;\n  min-height: 56px;\n  min-width: 56px;\n}\n\n/* 全宽按钮 */\n.btn-block {\n  width: 100%;\n  display: block;\n}\n",[667],{"type":26,"tag":572,"props":668,"children":669},{"__ignoreMap":7},[670],{"type":31,"value":665},{"type":26,"tag":81,"props":672,"children":674},{"id":673},"无障碍性",[675],{"type":31,"value":673},{"type":26,"tag":564,"props":677,"children":682},{"className":678,"code":680,"language":681,"meta":7},[679],"language-html","\u003C!-- 语义正确 -->\n\u003Cbutton type=\"submit\" aria-label=\"提交表单\">\n  提交\n\u003C/button>\n\n\u003C!-- 加载状态 -->\n\u003Cbutton aria-busy=\"true\" disabled>\n  \u003Cspan aria-hidden=\"true\" class=\"spinner\">\u003C/span>\n  加载中...\n\u003C/button>\n\n\u003C!-- 图标按钮 -->\n\u003Cbutton aria-label=\"关闭\">\n  \u003Csvg aria-hidden=\"true\" width=\"24\" height=\"24\">\n    \u003Cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    \u003Cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  \u003C/svg>\n\u003C/button>\n\n\u003C!-- 切换按钮 -->\n\u003Cbutton aria-pressed=\"false\" aria-label=\"点赞\">\n  ♥\n\u003C/button>\n","html",[683],{"type":26,"tag":572,"props":684,"children":685},{"__ignoreMap":7},[686],{"type":31,"value":680},{"type":26,"tag":81,"props":688,"children":690},{"id":689},"完整组件示例",[691],{"type":31,"value":689},{"type":26,"tag":564,"props":693,"children":696},{"className":694,"code":695,"language":621,"meta":7},[619],"const Button = React.forwardRef((\n  {\n    children,\n    variant = 'primary',\n    size = 'md',\n    loading = false,\n    disabled = false,\n    icon,\n    className,\n    ...props\n  },\n  ref\n) => {\n  return (\n    \u003Cbutton\n      ref={ref}\n      className={`btn btn-${variant} btn-${size} ${className}`}\n      disabled={disabled || loading}\n      aria-busy={loading}\n      {...props}\n    >\n      {icon && \u003Cspan className=\"btn-icon\" aria-hidden=\"true\">{icon}\u003C/span>}\n      {loading ? (\n        \u003C>\n          \u003Cspan className=\"spinner\" aria-hidden=\"true\">\u003C/span>\n          {children}\n        \u003C/>\n      ) : (\n        children\n      )}\n    \u003C/button>\n  );\n});\n\nButton.displayName = 'Button';\n",[697],{"type":26,"tag":572,"props":698,"children":699},{"__ignoreMap":7},[700],{"type":31,"value":695},{"type":26,"tag":81,"props":702,"children":704},{"id":703},"最佳实践",[705],{"type":31,"value":703},{"type":26,"tag":27,"props":707,"children":708},{},[709,711,717],{"type":31,"value":710},"✅ ",{"type":26,"tag":712,"props":713,"children":714},"strong",{},[715],{"type":31,"value":716},"应该做的事",{"type":31,"value":718},":",{"type":26,"tag":209,"props":720,"children":721},{},[722,727,732,743,748],{"type":26,"tag":213,"props":723,"children":724},{},[725],{"type":31,"value":726},"最小触摸目标 44x44px",{"type":26,"tag":213,"props":728,"children":729},{},[730],{"type":31,"value":731},"清晰的视觉反馈",{"type":26,"tag":213,"props":733,"children":734},{},[735,737],{"type":31,"value":736},"使用语义 HTML ",{"type":26,"tag":572,"props":738,"children":740},{"className":739},[],[741],{"type":31,"value":742},"\u003Cbutton>",{"type":26,"tag":213,"props":744,"children":745},{},[746],{"type":31,"value":747},"提供加载状态反馈",{"type":26,"tag":213,"props":749,"children":750},{},[751],{"type":31,"value":752},"支持键盘导航",{"type":26,"tag":27,"props":754,"children":755},{},[756,758,763],{"type":31,"value":757},"❌ ",{"type":26,"tag":712,"props":759,"children":760},{},[761],{"type":31,"value":762},"不应该做的事",{"type":31,"value":718},{"type":26,"tag":209,"props":765,"children":766},{},[767,780,785,790,795],{"type":26,"tag":213,"props":768,"children":769},{},[770,772,778],{"type":31,"value":771},"使用 ",{"type":26,"tag":572,"props":773,"children":775},{"className":774},[],[776],{"type":31,"value":777},"\u003Cdiv>",{"type":31,"value":779}," 模拟按钮",{"type":26,"tag":213,"props":781,"children":782},{},[783],{"type":31,"value":784},"隐藏焦点指示器",{"type":26,"tag":213,"props":786,"children":787},{},[788],{"type":31,"value":789},"过多的按钮样式",{"type":26,"tag":213,"props":791,"children":792},{},[793],{"type":31,"value":794},"忽视禁用状态",{"type":26,"tag":213,"props":796,"children":797},{},[798,799,805],{"type":31,"value":771},{"type":26,"tag":572,"props":800,"children":802},{"className":801},[],[803],{"type":31,"value":804},"\u003Ca>",{"type":31,"value":806}," 代替按钮",{"type":26,"tag":81,"props":808,"children":810},{"id":809},"测试清单",[811],{"type":31,"value":809},{"type":26,"tag":209,"props":813,"children":816},{"className":814},[815],"contains-task-list",[817,830,839,848,857],{"type":26,"tag":213,"props":818,"children":821},{"className":819},[820],"task-list-item",[822,828],{"type":26,"tag":823,"props":824,"children":827},"input",{"disabled":825,"type":826},true,"checkbox",[],{"type":31,"value":829}," 在各种浏览器中测试",{"type":26,"tag":213,"props":831,"children":833},{"className":832},[820],[834,837],{"type":26,"tag":823,"props":835,"children":836},{"disabled":825,"type":826},[],{"type":31,"value":838}," 验证键盘导航",{"type":26,"tag":213,"props":840,"children":842},{"className":841},[820],[843,846],{"type":26,"tag":823,"props":844,"children":845},{"disabled":825,"type":826},[],{"type":31,"value":847}," 检查色彩对比度",{"type":26,"tag":213,"props":849,"children":851},{"className":850},[820],[852,855],{"type":26,"tag":823,"props":853,"children":854},{"disabled":825,"type":826},[],{"type":31,"value":856}," 测试触摸设备",{"type":26,"tag":213,"props":858,"children":860},{"className":859},[820],[861,864],{"type":26,"tag":823,"props":862,"children":863},{"disabled":825,"type":826},[],{"type":31,"value":865}," 屏幕阅读器兼容性",{"title":7,"searchDepth":509,"depth":509,"links":867},[868,869,874,879,880,881,882,883],{"id":529,"depth":512,"text":529},{"id":553,"depth":512,"text":553,"children":870},[871,872,873],{"id":559,"depth":509,"text":562},{"id":578,"depth":509,"text":581},{"id":593,"depth":509,"text":596},{"id":534,"depth":512,"text":534,"children":875},[876,877,878],{"id":612,"depth":509,"text":615},{"id":629,"depth":509,"text":632},{"id":644,"depth":509,"text":647},{"id":659,"depth":512,"text":659},{"id":673,"depth":512,"text":673},{"id":689,"depth":512,"text":689},{"id":703,"depth":512,"text":703},{"id":809,"depth":512,"text":809},"content:topics:design:button-component-design.md","topics/design/button-component-design.md","topics/design/button-component-design",{"_path":888,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":889,"description":890,"keywords":891,"image":896,"author":11,"date":538,"readingTime":897,"topic":5,"body":898,"_type":520,"_id":1186,"_source":522,"_file":1187,"_stem":1188,"_extension":525},"/topics/design/dark-mode-design","暗黑模式设计完整方案","学习暗黑模式实现、色彩方案、对比度管理和最佳实践",[892,893,894,895,536],"暗黑模式","Dark Mode","色彩系统","CSS 变量","/images/topics/dark-mode-design.jpg",20,{"type":23,"children":899,"toc":1169},[900,904,909,914,920,929,935,944,949,955,964,970,981,987,996,1001,1010,1015,1024,1029,1038,1042,1051,1079,1088,1116,1120],{"type":26,"tag":81,"props":901,"children":902},{"id":889},[903],{"type":31,"value":889},{"type":26,"tag":27,"props":905,"children":906},{},[907],{"type":31,"value":908},"暗黑模式已成为现代应用的标准功能。它能够减少眼睛疲劳、节省电池、改善用户体验。",{"type":26,"tag":81,"props":910,"children":912},{"id":911},"核心色彩系统",[913],{"type":31,"value":911},{"type":26,"tag":557,"props":915,"children":917},{"id":916},"light-mode-配色",[918],{"type":31,"value":919},"Light Mode 配色",{"type":26,"tag":564,"props":921,"children":924},{"className":922,"code":923,"language":569,"meta":7},[567],":root {\n  /* Light Mode */\n  --bg-primary: #ffffff;\n  --bg-secondary: #f5f5f5;\n  --bg-tertiary: #efefef;\n  \n  --text-primary: #1a1a1a;\n  --text-secondary: #666666;\n  --text-tertiary: #999999;\n  \n  --border-color: #e0e0e0;\n  --divider-color: #f0f0f0;\n}\n",[925],{"type":26,"tag":572,"props":926,"children":927},{"__ignoreMap":7},[928],{"type":31,"value":923},{"type":26,"tag":557,"props":930,"children":932},{"id":931},"dark-mode-配色",[933],{"type":31,"value":934},"Dark Mode 配色",{"type":26,"tag":564,"props":936,"children":939},{"className":937,"code":938,"language":569,"meta":7},[567],"@media (prefers-color-scheme: dark) {\n  :root {\n    /* Dark Mode */\n    --bg-primary: #1a1a1a;\n    --bg-secondary: #2d2d2d;\n    --bg-tertiary: #3a3a3a;\n    \n    --text-primary: #ffffff;\n    --text-secondary: #e0e0e0;\n    --text-tertiary: #a0a0a0;\n    \n    --border-color: #404040;\n    --divider-color: #2a2a2a;\n  }\n}\n",[940],{"type":26,"tag":572,"props":941,"children":942},{"__ignoreMap":7},[943],{"type":31,"value":938},{"type":26,"tag":81,"props":945,"children":947},{"id":946},"实现方案",[948],{"type":31,"value":946},{"type":26,"tag":557,"props":950,"children":952},{"id":951},"方案-1prefers-color-scheme",[953],{"type":31,"value":954},"方案 1：prefers-color-scheme",{"type":26,"tag":564,"props":956,"children":959},{"className":957,"code":958,"language":569,"meta":7},[567],"/* 自动跟随系统设置 */\n@media (prefers-color-scheme: light) {\n  :root {\n    --bg: #fff;\n    --text: #000;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #1a1a1a;\n    --text: #fff;\n  }\n}\n\nbody {\n  background: var(--bg);\n  color: var(--text);\n}\n",[960],{"type":26,"tag":572,"props":961,"children":962},{"__ignoreMap":7},[963],{"type":31,"value":958},{"type":26,"tag":557,"props":965,"children":967},{"id":966},"方案-2javascript-切换",[968],{"type":31,"value":969},"方案 2：JavaScript 切换",{"type":26,"tag":564,"props":971,"children":976},{"className":972,"code":974,"language":975,"meta":7},[973],"language-javascript","// 检测和切换暗黑模式\nfunction initDarkMode() {\n  const isDark = localStorage.getItem('darkMode') === 'true' ||\n                 window.matchMedia('(prefers-color-scheme: dark)').matches;\n  \n  if (isDark) {\n    document.documentElement.setAttribute('data-theme', 'dark');\n  }\n}\n\nfunction toggleDarkMode() {\n  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';\n  const newTheme = isDark ? 'light' : 'dark';\n  \n  document.documentElement.setAttribute('data-theme', newTheme);\n  localStorage.setItem('darkMode', newTheme === 'dark');\n}\n\n// CSS 应用\nhtml[data-theme='light'] {\n  color-scheme: light;\n}\n\nhtml[data-theme='dark'] {\n  color-scheme: dark;\n}\n","javascript",[977],{"type":26,"tag":572,"props":978,"children":979},{"__ignoreMap":7},[980],{"type":31,"value":974},{"type":26,"tag":557,"props":982,"children":984},{"id":983},"方案-3css-variables-javascript",[985],{"type":31,"value":986},"方案 3：CSS Variables + JavaScript",{"type":26,"tag":564,"props":988,"children":991},{"className":989,"code":990,"language":975,"meta":7},[973],"const themes = {\n  light: {\n    '--bg-primary': '#ffffff',\n    '--text-primary': '#000000',\n    '--accent': '#0066cc',\n    '--border': '#e0e0e0',\n  },\n  dark: {\n    '--bg-primary': '#1a1a1a',\n    '--text-primary': '#ffffff',\n    '--accent': '#4da3ff',\n    '--border': '#404040',\n  },\n};\n\nfunction applyTheme(themeName) {\n  const theme = themes[themeName];\n  Object.entries(theme).forEach(([key, value]) => {\n    document.documentElement.style.setProperty(key, value);\n  });\n  localStorage.setItem('theme', themeName);\n}\n",[992],{"type":26,"tag":572,"props":993,"children":994},{"__ignoreMap":7},[995],{"type":31,"value":990},{"type":26,"tag":81,"props":997,"children":999},{"id":998},"对比度管理",[1000],{"type":31,"value":998},{"type":26,"tag":564,"props":1002,"children":1005},{"className":1003,"code":1004,"language":569,"meta":7},[567],"/* Light Mode 对比度 */\n:root {\n  --contrast-high: #000000;     /* 21:1 */\n  --contrast-medium: #333333;   /* 12.6:1 */\n  --contrast-low: #666666;      /* 5.1:1 */\n}\n\n/* Dark Mode 对比度 */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --contrast-high: #ffffff;    /* 21:1 */\n    --contrast-medium: #e0e0e0;  /* 11.6:1 */\n    --contrast-low: #a0a0a0;     /* 4.5:1 */\n  }\n}\n\n/* 应用对比度 */\n.text-primary { color: var(--contrast-high); }\n.text-secondary { color: var(--contrast-medium); }\n.text-tertiary { color: var(--contrast-low); }\n",[1006],{"type":26,"tag":572,"props":1007,"children":1008},{"__ignoreMap":7},[1009],{"type":31,"value":1004},{"type":26,"tag":81,"props":1011,"children":1013},{"id":1012},"图片和图表处理",[1014],{"type":31,"value":1012},{"type":26,"tag":564,"props":1016,"children":1019},{"className":1017,"code":1018,"language":681,"meta":7},[679],"\u003C!-- 针对不同主题的图片 -->\n\u003Cpicture>\n  \u003Csource \n    media=\"(prefers-color-scheme: dark)\" \n    srcset=\"chart-dark.svg\"\n  />\n  \u003Cimg src=\"chart-light.svg\" alt=\"图表\" />\n\u003C/picture>\n\n\u003C!-- SVG 颜色适配 -->\n\u003Csvg class=\"icon\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"currentColor\" />\n\u003C/svg>\n\n\u003Cstyle>\n  .icon {\n    color: var(--text-primary);\n  }\n\u003C/style>\n",[1020],{"type":26,"tag":572,"props":1021,"children":1022},{"__ignoreMap":7},[1023],{"type":31,"value":1018},{"type":26,"tag":81,"props":1025,"children":1027},{"id":1026},"完整示例",[1028],{"type":31,"value":1026},{"type":26,"tag":564,"props":1030,"children":1033},{"className":1031,"code":1032,"language":621,"meta":7},[619],"import { useState, useEffect } from 'react';\n\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n  const [mounted, setMounted] = useState(false);\n  \n  useEffect(() => {\n    setMounted(true);\n    \n    // 获取保存的主题或系统偏好\n    const savedTheme = localStorage.getItem('theme');\n    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches \n      ? 'dark' \n      : 'light';\n    \n    const initialTheme = savedTheme || systemTheme;\n    setTheme(initialTheme);\n    document.documentElement.setAttribute('data-theme', initialTheme);\n  }, []);\n  \n  const toggleTheme = () => {\n    const newTheme = theme === 'light' ? 'dark' : 'light';\n    setTheme(newTheme);\n    localStorage.setItem('theme', newTheme);\n    document.documentElement.setAttribute('data-theme', newTheme);\n  };\n  \n  // 防止闪烁\n  if (!mounted) {\n    return null;\n  }\n  \n  return (\n    \u003CThemeContext.Provider value={{ theme, toggleTheme }}>\n      {children}\n      \u003CThemeToggle theme={theme} onChange={toggleTheme} />\n    \u003C/ThemeContext.Provider>\n  );\n}\n\nfunction ThemeToggle({ theme, onChange }) {\n  return (\n    \u003Cbutton \n      onClick={onChange}\n      aria-label={`切换到${theme === 'light' ? '暗黑' : '亮色'}模式`}\n    >\n      {theme === 'light' ? '🌙' : '☀️'}\n    \u003C/button>\n  );\n}\n",[1034],{"type":26,"tag":572,"props":1035,"children":1036},{"__ignoreMap":7},[1037],{"type":31,"value":1032},{"type":26,"tag":81,"props":1039,"children":1040},{"id":703},[1041],{"type":31,"value":703},{"type":26,"tag":27,"props":1043,"children":1044},{},[1045,1046,1050],{"type":31,"value":710},{"type":26,"tag":712,"props":1047,"children":1048},{},[1049],{"type":31,"value":716},{"type":31,"value":718},{"type":26,"tag":209,"props":1052,"children":1053},{},[1054,1059,1064,1069,1074],{"type":26,"tag":213,"props":1055,"children":1056},{},[1057],{"type":31,"value":1058},"支持系统偏好",{"type":26,"tag":213,"props":1060,"children":1061},{},[1062],{"type":31,"value":1063},"提供手动切换选项",{"type":26,"tag":213,"props":1065,"children":1066},{},[1067],{"type":31,"value":1068},"确保足够的对比度",{"type":26,"tag":213,"props":1070,"children":1071},{},[1072],{"type":31,"value":1073},"优化图片和图表",{"type":26,"tag":213,"props":1075,"children":1076},{},[1077],{"type":31,"value":1078},"防止加载闪烁",{"type":26,"tag":27,"props":1080,"children":1081},{},[1082,1083,1087],{"type":31,"value":757},{"type":26,"tag":712,"props":1084,"children":1085},{},[1086],{"type":31,"value":762},{"type":31,"value":718},{"type":26,"tag":209,"props":1089,"children":1090},{},[1091,1096,1101,1106,1111],{"type":26,"tag":213,"props":1092,"children":1093},{},[1094],{"type":31,"value":1095},"强制单一模式",{"type":26,"tag":213,"props":1097,"children":1098},{},[1099],{"type":31,"value":1100},"忽视性能影响",{"type":26,"tag":213,"props":1102,"children":1103},{},[1104],{"type":31,"value":1105},"使用相同的颜色",{"type":26,"tag":213,"props":1107,"children":1108},{},[1109],{"type":31,"value":1110},"忘记保存用户偏好",{"type":26,"tag":213,"props":1112,"children":1113},{},[1114],{"type":31,"value":1115},"过度使用深色背景",{"type":26,"tag":81,"props":1117,"children":1118},{"id":809},[1119],{"type":31,"value":809},{"type":26,"tag":209,"props":1121,"children":1123},{"className":1122},[815],[1124,1133,1142,1151,1160],{"type":26,"tag":213,"props":1125,"children":1127},{"className":1126},[820],[1128,1131],{"type":26,"tag":823,"props":1129,"children":1130},{"disabled":825,"type":826},[],{"type":31,"value":1132}," 在浅色和深色模式下测试所有页面",{"type":26,"tag":213,"props":1134,"children":1136},{"className":1135},[820],[1137,1140],{"type":26,"tag":823,"props":1138,"children":1139},{"disabled":825,"type":826},[],{"type":31,"value":1141}," 检查颜色对比度符合 WCAG 标准",{"type":26,"tag":213,"props":1143,"children":1145},{"className":1144},[820],[1146,1149],{"type":26,"tag":823,"props":1147,"children":1148},{"disabled":825,"type":826},[],{"type":31,"value":1150}," 验证图片和图表在两种模式下清晰",{"type":26,"tag":213,"props":1152,"children":1154},{"className":1153},[820],[1155,1158],{"type":26,"tag":823,"props":1156,"children":1157},{"disabled":825,"type":826},[],{"type":31,"value":1159}," 测试主题切换的平滑性",{"type":26,"tag":213,"props":1161,"children":1163},{"className":1162},[820],[1164,1167],{"type":26,"tag":823,"props":1165,"children":1166},{"disabled":825,"type":826},[],{"type":31,"value":1168}," 检查用户偏好是否被保存",{"title":7,"searchDepth":509,"depth":509,"links":1170},[1171,1172,1176,1181,1182,1183,1184,1185],{"id":889,"depth":512,"text":889},{"id":911,"depth":512,"text":911,"children":1173},[1174,1175],{"id":916,"depth":509,"text":919},{"id":931,"depth":509,"text":934},{"id":946,"depth":512,"text":946,"children":1177},[1178,1179,1180],{"id":951,"depth":509,"text":954},{"id":966,"depth":509,"text":969},{"id":983,"depth":509,"text":986},{"id":998,"depth":512,"text":998},{"id":1012,"depth":512,"text":1012},{"id":1026,"depth":512,"text":1026},{"id":703,"depth":512,"text":703},{"id":809,"depth":512,"text":809},"content:topics:design:dark-mode-design.md","topics/design/dark-mode-design.md","topics/design/dark-mode-design",{"_path":1190,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1191,"description":1192,"keywords":1193,"image":1198,"author":1199,"date":538,"readingTime":897,"topic":5,"body":1200,"_type":520,"_id":1465,"_source":522,"_file":1466,"_stem":1467,"_extension":525},"/topics/design/form-controls-design","表单控件设计规范","学习输入框、选择框、复选框等表单控件的设计和实现",[1194,1195,1196,1197,536],"表单设计","Form Controls","输入框","验证反馈","/images/topics/form-controls-design.jpg","AI Content Team",{"type":23,"children":1201,"toc":1451},[1202,1206,1211,1216,1221,1230,1235,1244,1248,1257,1262,1271,1276,1285,1290,1299,1304,1313,1317,1326,1352,1361,1389,1393],{"type":26,"tag":81,"props":1203,"children":1204},{"id":1191},[1205],{"type":31,"value":1191},{"type":26,"tag":27,"props":1207,"children":1208},{},[1209],{"type":31,"value":1210},"优秀的表单设计能够提高用户完成率和满意度。",{"type":26,"tag":81,"props":1212,"children":1214},{"id":1213},"输入框设计",[1215],{"type":31,"value":1213},{"type":26,"tag":557,"props":1217,"children":1219},{"id":1218},"基础文本输入",[1220],{"type":31,"value":1218},{"type":26,"tag":564,"props":1222,"children":1225},{"className":1223,"code":1224,"language":569,"meta":7},[567],".input {\n  width: 100%;\n  padding: 12px 16px;\n  font-size: 16px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  font-family: inherit;\n  transition: border-color 0.2s;\n}\n\n.input:hover {\n  border-color: #bdbdbd;\n}\n\n.input:focus {\n  outline: none;\n  border-color: #0066cc;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n\n.input:disabled {\n  background-color: #f5f5f5;\n  color: #999999;\n  cursor: not-allowed;\n}\n\n.input.error {\n  border-color: #cc0000;\n}\n\n.input.success {\n  border-color: #00cc00;\n}\n",[1226],{"type":26,"tag":572,"props":1227,"children":1228},{"__ignoreMap":7},[1229],{"type":31,"value":1224},{"type":26,"tag":557,"props":1231,"children":1233},{"id":1232},"标签和提示",[1234],{"type":31,"value":1232},{"type":26,"tag":564,"props":1236,"children":1239},{"className":1237,"code":1238,"language":681,"meta":7},[679],"\u003Cdiv class=\"form-group\">\n  \u003Clabel for=\"email\" class=\"form-label\">\n    邮箱地址 \u003Cspan class=\"required\">*\u003C/span>\n  \u003C/label>\n  \u003Cinput\n    id=\"email\"\n    type=\"email\"\n    placeholder=\"user@example.com\"\n    class=\"input\"\n    aria-describedby=\"email-hint\"\n  />\n  \u003Cp id=\"email-hint\" class=\"form-hint\">\n    我们永远不会分享你的邮箱\n  \u003C/p>\n\u003C/div>\n",[1240],{"type":26,"tag":572,"props":1241,"children":1242},{"__ignoreMap":7},[1243],{"type":31,"value":1238},{"type":26,"tag":81,"props":1245,"children":1246},{"id":1197},[1247],{"type":31,"value":1197},{"type":26,"tag":564,"props":1249,"children":1252},{"className":1250,"code":1251,"language":621,"meta":7},[619],"function FormInput({ label, error, success, helperText, value, onChange, ...props }) {\n  return (\n    \u003Cdiv className=\"form-group\">\n      \u003Clabel className=\"form-label\">{label}\u003C/label>\n      \u003Cinput\n        className={`input ${\n          error ? 'error' : success ? 'success' : ''\n        }`}\n        value={value}\n        onChange={onChange}\n        {...props}\n      />\n      {error && (\n        \u003Cp className=\"form-error\" role=\"alert\">\n          {error}\n        \u003C/p>\n      )}\n      {success && (\n        \u003Cp className=\"form-success\">\n          ✓ {success}\n        \u003C/p>\n      )}\n      {helperText && (\n        \u003Cp className=\"form-hint\">{helperText}\u003C/p>\n      )}\n    \u003C/div>\n  );\n}\n",[1253],{"type":26,"tag":572,"props":1254,"children":1255},{"__ignoreMap":7},[1256],{"type":31,"value":1251},{"type":26,"tag":81,"props":1258,"children":1260},{"id":1259},"选择框设计",[1261],{"type":31,"value":1259},{"type":26,"tag":564,"props":1263,"children":1266},{"className":1264,"code":1265,"language":569,"meta":7},[567],".select {\n  appearance: none;\n  width: 100%;\n  padding: 12px 16px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  background-image: url('data:image/svg+xml;...');\n  background-repeat: no-repeat;\n  background-position: right 12px center;\n  padding-right: 40px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.select:hover {\n  border-color: #bdbdbd;\n}\n\n.select:focus {\n  outline: none;\n  border-color: #0066cc;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n",[1267],{"type":26,"tag":572,"props":1268,"children":1269},{"__ignoreMap":7},[1270],{"type":31,"value":1265},{"type":26,"tag":81,"props":1272,"children":1274},{"id":1273},"复选框和单选按钮",[1275],{"type":31,"value":1273},{"type":26,"tag":564,"props":1277,"children":1280},{"className":1278,"code":1279,"language":569,"meta":7},[567],".checkbox-group {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.checkbox-input {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  accent-color: #0066cc;\n}\n\n.checkbox-label {\n  cursor: pointer;\n  user-select: none;\n}\n\n/* 自定义复选框 */\n.custom-checkbox {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: white;\n  transition: all 0.2s;\n}\n\n.custom-checkbox:checked {\n  background-color: #0066cc;\n  border-color: #0066cc;\n  background-image: url('data:image/svg+xml;...');\n}\n\n.custom-checkbox:focus {\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n",[1281],{"type":26,"tag":572,"props":1282,"children":1283},{"__ignoreMap":7},[1284],{"type":31,"value":1279},{"type":26,"tag":81,"props":1286,"children":1288},{"id":1287},"文本区域",[1289],{"type":31,"value":1287},{"type":26,"tag":564,"props":1291,"children":1294},{"className":1292,"code":1293,"language":569,"meta":7},[567],".textarea {\n  width: 100%;\n  min-height: 120px;\n  padding: 12px 16px;\n  border: 2px solid #e0e0e0;\n  border-radius: 4px;\n  font-family: inherit;\n  font-size: 16px;\n  resize: vertical;\n  transition: border-color 0.2s;\n}\n\n.textarea:focus {\n  outline: none;\n  border-color: #0066cc;\n  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n}\n",[1295],{"type":26,"tag":572,"props":1296,"children":1297},{"__ignoreMap":7},[1298],{"type":31,"value":1293},{"type":26,"tag":81,"props":1300,"children":1302},{"id":1301},"完整表单示例",[1303],{"type":31,"value":1301},{"type":26,"tag":564,"props":1305,"children":1308},{"className":1306,"code":1307,"language":621,"meta":7},[619],"function SignupForm() {\n  const [formData, setFormData] = useState({\n    name: '',\n    email: '',\n    password: '',\n    confirmPassword: '',\n    subscribe: false,\n    terms: false,\n  });\n  \n  const [errors, setErrors] = useState({});\n  const [touched, setTouched] = useState({});\n  const [submitted, setSubmitted] = useState(false);\n  \n  const handleChange = (e) => {\n    const { name, value, type, checked } = e.target;\n    setFormData(prev => ({\n      ...prev,\n      [name]: type === 'checkbox' ? checked : value,\n    }));\n    \n    // 实时验证\n    if (touched[name]) {\n      validateField(name, type === 'checkbox' ? checked : value);\n    }\n  };\n  \n  const handleBlur = (e) => {\n    const { name } = e.target;\n    setTouched(prev => ({ ...prev, [name]: true }));\n    validateField(name, formData[name]);\n  };\n  \n  const validateField = (name, value) => {\n    const newErrors = { ...errors };\n    \n    switch (name) {\n      case 'name':\n        if (!value) newErrors.name = '名字不能为空';\n        else delete newErrors.name;\n        break;\n      case 'email':\n        if (!value) newErrors.email = '邮箱不能为空';\n        else if (!/^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/.test(value)) {\n          newErrors.email = '请输入有效的邮箱';\n        } else {\n          delete newErrors.email;\n        }\n        break;\n      case 'password':\n        if (!value) newErrors.password = '密码不能为空';\n        else if (value.length \u003C 8) newErrors.password = '密码至少 8 位';\n        else delete newErrors.password;\n        break;\n      case 'confirmPassword':\n        if (value !== formData.password) {\n          newErrors.confirmPassword = '两次密码输入不一致';\n        } else {\n          delete newErrors.confirmPassword;\n        }\n        break;\n      case 'terms':\n        if (!value) newErrors.terms = '必须同意服务条款';\n        else delete newErrors.terms;\n        break;\n      default:\n        break;\n    }\n    \n    setErrors(newErrors);\n  };\n  \n  const validate = () => {\n    const newErrors = {};\n    \n    if (!formData.name) newErrors.name = '名字不能为空';\n    if (!formData.email) newErrors.email = '邮箱不能为空';\n    if (formData.password.length \u003C 8) newErrors.password = '密码至少 8 位';\n    if (formData.password !== formData.confirmPassword) {\n      newErrors.confirmPassword = '两次密码输入不一致';\n    }\n    if (!formData.terms) newErrors.terms = '必须同意服务条款';\n    \n    return newErrors;\n  };\n  \n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    \n    // 标记所有字段已触碰\n    setTouched({\n      name: true,\n      email: true,\n      password: true,\n      confirmPassword: true,\n      terms: true,\n    });\n    \n    const newErrors = validate();\n    \n    if (Object.keys(newErrors).length === 0) {\n      setSubmitted(true);\n      // 提交表单\n      console.log('Form submitted:', formData);\n      // 重置表单\n      setFormData({\n        name: '',\n        email: '',\n        password: '',\n        confirmPassword: '',\n        subscribe: false,\n        terms: false,\n      });\n    } else {\n      setErrors(newErrors);\n    }\n  };\n  \n  return (\n    \u003Cform onSubmit={handleSubmit} noValidate>\n      {submitted && (\n        \u003Cdiv className=\"form-success-message\" role=\"alert\">\n          注册成功！\n        \u003C/div>\n      )}\n      \n      \u003CFormInput\n        label=\"姓名\"\n        name=\"name\"\n        value={formData.name}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.name && errors.name}\n        helperText=\"请输入你的全名\"\n      />\n      \n      \u003CFormInput\n        label=\"邮箱\"\n        name=\"email\"\n        type=\"email\"\n        value={formData.email}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.email && errors.email}\n      />\n      \n      \u003CFormInput\n        label=\"密码\"\n        name=\"password\"\n        type=\"password\"\n        value={formData.password}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.password && errors.password}\n        helperText=\"至少 8 个字符\"\n      />\n      \n      \u003CFormInput\n        label=\"确认密码\"\n        name=\"confirmPassword\"\n        type=\"password\"\n        value={formData.confirmPassword}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        error={touched.confirmPassword && errors.confirmPassword}\n      />\n      \n      \u003Cdiv className=\"form-group\">\n        \u003Clabel className=\"checkbox-label\">\n          \u003Cinput\n            type=\"checkbox\"\n            name=\"subscribe\"\n            checked={formData.subscribe}\n            onChange={handleChange}\n            className=\"checkbox-input\"\n          />\n          订阅我们的新闻通讯\n        \u003C/label>\n      \u003C/div>\n      \n      \u003Cdiv className=\"form-group\">\n        \u003Clabel className=\"checkbox-label\">\n          \u003Cinput\n            type=\"checkbox\"\n            name=\"terms\"\n            checked={formData.terms}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            className=\"checkbox-input\"\n          />\n          我同意\n          \u003Ca href=\"/terms\" target=\"_blank\" rel=\"noopener noreferrer\">\n            服务条款\n          \u003C/a>\n          和\n          \u003Ca href=\"/privacy\" target=\"_blank\" rel=\"noopener noreferrer\">\n            隐私政策\n          \u003C/a>\n        \u003C/label>\n        {touched.terms && errors.terms && (\n          \u003Cp className=\"form-error\">{errors.terms}\u003C/p>\n        )}\n      \u003C/div>\n      \n      \u003Cbutton type=\"submit\" className=\"btn btn-primary btn-block\">\n        注册\n      \u003C/button>\n    \u003C/form>\n  );\n}\n",[1309],{"type":26,"tag":572,"props":1310,"children":1311},{"__ignoreMap":7},[1312],{"type":31,"value":1307},{"type":26,"tag":81,"props":1314,"children":1315},{"id":703},[1316],{"type":31,"value":703},{"type":26,"tag":27,"props":1318,"children":1319},{},[1320,1321,1325],{"type":31,"value":710},{"type":26,"tag":712,"props":1322,"children":1323},{},[1324],{"type":31,"value":716},{"type":31,"value":718},{"type":26,"tag":209,"props":1327,"children":1328},{},[1329,1334,1339,1344,1348],{"type":26,"tag":213,"props":1330,"children":1331},{},[1332],{"type":31,"value":1333},"使用正确的输入类型",{"type":26,"tag":213,"props":1335,"children":1336},{},[1337],{"type":31,"value":1338},"提供实时验证反馈",{"type":26,"tag":213,"props":1340,"children":1341},{},[1342],{"type":31,"value":1343},"清晰的标签和提示",{"type":26,"tag":213,"props":1345,"children":1346},{},[1347],{"type":31,"value":726},{"type":26,"tag":213,"props":1349,"children":1350},{},[1351],{"type":31,"value":752},{"type":26,"tag":27,"props":1353,"children":1354},{},[1355,1356,1360],{"type":31,"value":757},{"type":26,"tag":712,"props":1357,"children":1358},{},[1359],{"type":31,"value":762},{"type":31,"value":718},{"type":26,"tag":209,"props":1362,"children":1363},{},[1364,1369,1374,1379,1384],{"type":26,"tag":213,"props":1365,"children":1366},{},[1367],{"type":31,"value":1368},"隐藏标签",{"type":26,"tag":213,"props":1370,"children":1371},{},[1372],{"type":31,"value":1373},"过度使用占位符",{"type":26,"tag":213,"props":1375,"children":1376},{},[1377],{"type":31,"value":1378},"验证后立即提交",{"type":26,"tag":213,"props":1380,"children":1381},{},[1382],{"type":31,"value":1383},"忽视无障碍性",{"type":26,"tag":213,"props":1385,"children":1386},{},[1387],{"type":31,"value":1388},"复杂的验证规则",{"type":26,"tag":81,"props":1390,"children":1391},{"id":809},[1392],{"type":31,"value":809},{"type":26,"tag":209,"props":1394,"children":1396},{"className":1395},[815],[1397,1406,1415,1424,1433,1442],{"type":26,"tag":213,"props":1398,"children":1400},{"className":1399},[820],[1401,1404],{"type":26,"tag":823,"props":1402,"children":1403},{"disabled":825,"type":826},[],{"type":31,"value":1405}," 所有控件都可用键盘导航",{"type":26,"tag":213,"props":1407,"children":1409},{"className":1408},[820],[1410,1413],{"type":26,"tag":823,"props":1411,"children":1412},{"disabled":825,"type":826},[],{"type":31,"value":1414}," 标签与输入框关联",{"type":26,"tag":213,"props":1416,"children":1418},{"className":1417},[820],[1419,1422],{"type":26,"tag":823,"props":1420,"children":1421},{"disabled":825,"type":826},[],{"type":31,"value":1423}," 验证消息清晰",{"type":26,"tag":213,"props":1425,"children":1427},{"className":1426},[820],[1428,1431],{"type":26,"tag":823,"props":1429,"children":1430},{"disabled":825,"type":826},[],{"type":31,"value":1432}," 色彩对比度足够",{"type":26,"tag":213,"props":1434,"children":1436},{"className":1435},[820],[1437,1440],{"type":26,"tag":823,"props":1438,"children":1439},{"disabled":825,"type":826},[],{"type":31,"value":1441}," 屏幕阅读器兼容",{"type":26,"tag":213,"props":1443,"children":1445},{"className":1444},[820],[1446,1449],{"type":26,"tag":823,"props":1447,"children":1448},{"disabled":825,"type":826},[],{"type":31,"value":1450}," 移动设备测试",{"title":7,"searchDepth":509,"depth":509,"links":1452},[1453,1454,1458,1459,1460,1461,1462,1463,1464],{"id":1191,"depth":512,"text":1191},{"id":1213,"depth":512,"text":1213,"children":1455},[1456,1457],{"id":1218,"depth":509,"text":1218},{"id":1232,"depth":509,"text":1232},{"id":1197,"depth":512,"text":1197},{"id":1259,"depth":512,"text":1259},{"id":1273,"depth":512,"text":1273},{"id":1287,"depth":512,"text":1287},{"id":1301,"depth":512,"text":1301},{"id":703,"depth":512,"text":703},{"id":809,"depth":512,"text":809},"content:topics:design:form-controls-design.md","topics/design/form-controls-design.md","topics/design/form-controls-design",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":1469,"image":17,"imageQuery":18,"pexelsPhotoId":19,"pexelsUrl":20,"featured":6,"readingTime":21,"body":1470,"_type":520,"_id":521,"_source":522,"_file":523,"_stem":524,"_extension":525},[13,14,15,16],{"type":23,"children":1471,"toc":1845},[1472,1476,1480,1484,1508,1512,1596,1600,1604,1608,1627,1631,1635,1650,1654,1658,1662,1666,1681,1685,1689,1693,1697,1701,1705,1728,1732,1736,1740,1744,1759,1763,1767,1771,1775,1779,1783,1787,1791,1814,1818,1822,1826,1841],{"type":26,"tag":27,"props":1473,"children":1474},{},[1475],{"type":31,"value":32},{"type":26,"tag":27,"props":1477,"children":1478},{},[1479],{"type":31,"value":37},{"type":26,"tag":27,"props":1481,"children":1482},{},[1483],{"type":31,"value":42},{"type":26,"tag":27,"props":1485,"children":1486},{},[1487,1488,1492,1493,1497,1498,1502,1503,1507],{"type":31,"value":47},{"type":26,"tag":49,"props":1489,"children":1490},{"href":51},[1491],{"type":31,"value":54},{"type":31,"value":56},{"type":26,"tag":49,"props":1494,"children":1495},{"href":59},[1496],{"type":31,"value":62},{"type":31,"value":56},{"type":26,"tag":49,"props":1499,"children":1500},{"href":66},[1501],{"type":31,"value":69},{"type":31,"value":71},{"type":26,"tag":49,"props":1504,"children":1505},{"href":74},[1506],{"type":31,"value":77},{"type":31,"value":79},{"type":26,"tag":81,"props":1509,"children":1510},{"id":83},[1511],{"type":31,"value":86},{"type":26,"tag":88,"props":1513,"children":1514},{},[1515,1533],{"type":26,"tag":92,"props":1516,"children":1517},{},[1518],{"type":26,"tag":96,"props":1519,"children":1520},{},[1521,1525,1529],{"type":26,"tag":100,"props":1522,"children":1523},{},[1524],{"type":31,"value":104},{"type":26,"tag":100,"props":1526,"children":1527},{},[1528],{"type":31,"value":109},{"type":26,"tag":100,"props":1530,"children":1531},{},[1532],{"type":31,"value":114},{"type":26,"tag":116,"props":1534,"children":1535},{},[1536,1551,1566,1581],{"type":26,"tag":96,"props":1537,"children":1538},{},[1539,1543,1547],{"type":26,"tag":123,"props":1540,"children":1541},{},[1542],{"type":31,"value":127},{"type":26,"tag":123,"props":1544,"children":1545},{},[1546],{"type":31,"value":132},{"type":26,"tag":123,"props":1548,"children":1549},{},[1550],{"type":31,"value":137},{"type":26,"tag":96,"props":1552,"children":1553},{},[1554,1558,1562],{"type":26,"tag":123,"props":1555,"children":1556},{},[1557],{"type":31,"value":145},{"type":26,"tag":123,"props":1559,"children":1560},{},[1561],{"type":31,"value":150},{"type":26,"tag":123,"props":1563,"children":1564},{},[1565],{"type":31,"value":155},{"type":26,"tag":96,"props":1567,"children":1568},{},[1569,1573,1577],{"type":26,"tag":123,"props":1570,"children":1571},{},[1572],{"type":31,"value":163},{"type":26,"tag":123,"props":1574,"children":1575},{},[1576],{"type":31,"value":168},{"type":26,"tag":123,"props":1578,"children":1579},{},[1580],{"type":31,"value":173},{"type":26,"tag":96,"props":1582,"children":1583},{},[1584,1588,1592],{"type":26,"tag":123,"props":1585,"children":1586},{},[1587],{"type":31,"value":181},{"type":26,"tag":123,"props":1589,"children":1590},{},[1591],{"type":31,"value":186},{"type":26,"tag":123,"props":1593,"children":1594},{},[1595],{"type":31,"value":191},{"type":26,"tag":27,"props":1597,"children":1598},{},[1599],{"type":31,"value":196},{"type":26,"tag":81,"props":1601,"children":1602},{"id":199},[1603],{"type":31,"value":202},{"type":26,"tag":27,"props":1605,"children":1606},{},[1607],{"type":31,"value":207},{"type":26,"tag":209,"props":1609,"children":1610},{},[1611,1615,1619,1623],{"type":26,"tag":213,"props":1612,"children":1613},{},[1614],{"type":31,"value":217},{"type":26,"tag":213,"props":1616,"children":1617},{},[1618],{"type":31,"value":222},{"type":26,"tag":213,"props":1620,"children":1621},{},[1622],{"type":31,"value":227},{"type":26,"tag":213,"props":1624,"children":1625},{},[1626],{"type":31,"value":232},{"type":26,"tag":27,"props":1628,"children":1629},{},[1630],{"type":31,"value":237},{"type":26,"tag":27,"props":1632,"children":1633},{},[1634],{"type":31,"value":242},{"type":26,"tag":209,"props":1636,"children":1637},{},[1638,1642,1646],{"type":26,"tag":213,"props":1639,"children":1640},{},[1641],{"type":31,"value":250},{"type":26,"tag":213,"props":1643,"children":1644},{},[1645],{"type":31,"value":255},{"type":26,"tag":213,"props":1647,"children":1648},{},[1649],{"type":31,"value":260},{"type":26,"tag":27,"props":1651,"children":1652},{},[1653],{"type":31,"value":265},{"type":26,"tag":81,"props":1655,"children":1656},{"id":268},[1657],{"type":31,"value":271},{"type":26,"tag":27,"props":1659,"children":1660},{},[1661],{"type":31,"value":276},{"type":26,"tag":27,"props":1663,"children":1664},{},[1665],{"type":31,"value":281},{"type":26,"tag":209,"props":1667,"children":1668},{},[1669,1673,1677],{"type":26,"tag":213,"props":1670,"children":1671},{},[1672],{"type":31,"value":289},{"type":26,"tag":213,"props":1674,"children":1675},{},[1676],{"type":31,"value":294},{"type":26,"tag":213,"props":1678,"children":1679},{},[1680],{"type":31,"value":299},{"type":26,"tag":27,"props":1682,"children":1683},{},[1684],{"type":31,"value":304},{"type":26,"tag":27,"props":1686,"children":1687},{},[1688],{"type":31,"value":309},{"type":26,"tag":81,"props":1690,"children":1691},{"id":312},[1692],{"type":31,"value":315},{"type":26,"tag":27,"props":1694,"children":1695},{},[1696],{"type":31,"value":320},{"type":26,"tag":27,"props":1698,"children":1699},{},[1700],{"type":31,"value":325},{"type":26,"tag":27,"props":1702,"children":1703},{},[1704],{"type":31,"value":330},{"type":26,"tag":332,"props":1706,"children":1707},{},[1708,1712,1716,1720,1724],{"type":26,"tag":213,"props":1709,"children":1710},{},[1711],{"type":31,"value":339},{"type":26,"tag":213,"props":1713,"children":1714},{},[1715],{"type":31,"value":344},{"type":26,"tag":213,"props":1717,"children":1718},{},[1719],{"type":31,"value":349},{"type":26,"tag":213,"props":1721,"children":1722},{},[1723],{"type":31,"value":354},{"type":26,"tag":213,"props":1725,"children":1726},{},[1727],{"type":31,"value":359},{"type":26,"tag":27,"props":1729,"children":1730},{},[1731],{"type":31,"value":364},{"type":26,"tag":81,"props":1733,"children":1734},{"id":367},[1735],{"type":31,"value":370},{"type":26,"tag":27,"props":1737,"children":1738},{},[1739],{"type":31,"value":375},{"type":26,"tag":27,"props":1741,"children":1742},{},[1743],{"type":31,"value":380},{"type":26,"tag":209,"props":1745,"children":1746},{},[1747,1751,1755],{"type":26,"tag":213,"props":1748,"children":1749},{},[1750],{"type":31,"value":388},{"type":26,"tag":213,"props":1752,"children":1753},{},[1754],{"type":31,"value":393},{"type":26,"tag":213,"props":1756,"children":1757},{},[1758],{"type":31,"value":398},{"type":26,"tag":27,"props":1760,"children":1761},{},[1762],{"type":31,"value":403},{"type":26,"tag":27,"props":1764,"children":1765},{},[1766],{"type":31,"value":408},{"type":26,"tag":81,"props":1768,"children":1769},{"id":411},[1770],{"type":31,"value":414},{"type":26,"tag":27,"props":1772,"children":1773},{},[1774],{"type":31,"value":419},{"type":26,"tag":27,"props":1776,"children":1777},{},[1778],{"type":31,"value":424},{"type":26,"tag":27,"props":1780,"children":1781},{},[1782],{"type":31,"value":429},{"type":26,"tag":81,"props":1784,"children":1785},{"id":432},[1786],{"type":31,"value":435},{"type":26,"tag":27,"props":1788,"children":1789},{},[1790],{"type":31,"value":440},{"type":26,"tag":209,"props":1792,"children":1793},{},[1794,1798,1802,1806,1810],{"type":26,"tag":213,"props":1795,"children":1796},{},[1797],{"type":31,"value":448},{"type":26,"tag":213,"props":1799,"children":1800},{},[1801],{"type":31,"value":453},{"type":26,"tag":213,"props":1803,"children":1804},{},[1805],{"type":31,"value":458},{"type":26,"tag":213,"props":1807,"children":1808},{},[1809],{"type":31,"value":463},{"type":26,"tag":213,"props":1811,"children":1812},{},[1813],{"type":31,"value":468},{"type":26,"tag":27,"props":1815,"children":1816},{},[1817],{"type":31,"value":473},{"type":26,"tag":81,"props":1819,"children":1820},{"id":476},[1821],{"type":31,"value":479},{"type":26,"tag":27,"props":1823,"children":1824},{},[1825],{"type":31,"value":484},{"type":26,"tag":332,"props":1827,"children":1828},{},[1829,1833,1837],{"type":26,"tag":213,"props":1830,"children":1831},{},[1832],{"type":31,"value":492},{"type":26,"tag":213,"props":1834,"children":1835},{},[1836],{"type":31,"value":497},{"type":26,"tag":213,"props":1838,"children":1839},{},[1840],{"type":31,"value":502},{"type":26,"tag":27,"props":1842,"children":1843},{},[1844],{"type":31,"value":507},{"title":7,"searchDepth":509,"depth":509,"links":1846},[1847,1848,1849,1850,1851,1852,1853,1854],{"id":83,"depth":512,"text":86},{"id":199,"depth":512,"text":202},{"id":268,"depth":512,"text":271},{"id":312,"depth":512,"text":315},{"id":367,"depth":512,"text":370},{"id":411,"depth":512,"text":414},{"id":432,"depth":512,"text":435},{"id":476,"depth":512,"text":479},1779260404718]