[{"data":1,"prerenderedAt":2761},["ShallowReactive",2],{"article-/topics/design/atmosphere-web-design-for-cultural-content":3,"related-design":1025,"content-query-DaNeFARqM7":1960},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageAlt":19,"imageQuery":20,"pexelsPhotoId":21,"pexelsUrl":22,"readingTime":23,"featured":6,"body":24,"_type":1019,"_id":1020,"_source":1021,"_file":1022,"_stem":1023,"_extension":1024},"/topics/design/atmosphere-web-design-for-cultural-content","design",false,"","氛围感网页设计不是堆滤镜：文化内容页的留白、字体、配色与滚动节奏","很多文化内容页一追求氛围感，就变成了重装饰、轻阅读。本文从留白、字体、配色、图片、滚动节奏五个维度拆解：文化内容页的氛围感到底靠什么建立，怎样既有气质，又不牺牲可读性和移动端体验。","2026-04-04","HTMLPAGE 团队",[13,14,15,16,17],"氛围感网页设计","网页设计","文化内容页","排版","阅读体验","/images/articles/atmosphere-web-design-for-cultural-content-featured.jpg","安静桌面上的书本与柔和光线，代表文化内容页的氛围感设计","minimal reading desk book coffee calm aesthetic",29709742,"https://www.pexels.com/photo/minimalist-flat-lay-with-coffee-and-glasses-on-book-29709742/",14,{"type":25,"children":26,"toc":986},"root",[27,35,40,70,75,80,89,96,219,224,230,235,241,246,279,284,289,307,312,317,323,328,333,352,357,375,380,398,403,417,423,428,433,451,456,474,479,484,502,507,513,518,536,541,559,564,569,575,580,585,603,608,613,641,646,652,657,680,685,703,708,713,731,736,741,746,769,775,780,803,808,826,831,849,855,927,932,937,942,947],{"type":28,"tag":29,"props":30,"children":31},"element","p",{},[32],{"type":33,"value":34},"text","“氛围感网页”这几个字，特别容易把人带偏。",{"type":28,"tag":29,"props":36,"children":37},{},[38],{"type":33,"value":39},"很多页面一旦想做气氛，就开始堆：",{"type":28,"tag":41,"props":42,"children":43},"ul",{},[44,50,55,60,65],{"type":28,"tag":45,"props":46,"children":47},"li",{},[48],{"type":33,"value":49},"半透明蒙层",{"type":28,"tag":45,"props":51,"children":52},{},[53],{"type":33,"value":54},"模糊滤镜",{"type":28,"tag":45,"props":56,"children":57},{},[58],{"type":33,"value":59},"大背景图",{"type":28,"tag":45,"props":61,"children":62},{},[63],{"type":33,"value":64},"书法字或手写体",{"type":28,"tag":45,"props":66,"children":67},{},[68],{"type":33,"value":69},"飘落粒子、慢动效、渐变光晕",{"type":28,"tag":29,"props":71,"children":72},{},[73],{"type":33,"value":74},"结果往往不是更高级，而是更难读、更像模板、也更难维护。",{"type":28,"tag":29,"props":76,"children":77},{},[78],{"type":33,"value":79},"对文化内容页来说，真正好的氛围感不是“我加了很多效果”，而是：",{"type":28,"tag":29,"props":81,"children":82},{},[83],{"type":28,"tag":84,"props":85,"children":86},"strong",{},[87],{"type":33,"value":88},"页面有没有让读者在进入时立刻安静下来，并且愿意继续往下读。",{"type":28,"tag":90,"props":91,"children":93},"h2",{"id":92},"结论先说氛围感来自五个可控变量不来自堆效果",[94],{"type":33,"value":95},"结论先说：氛围感来自五个可控变量，不来自堆效果",{"type":28,"tag":97,"props":98,"children":99},"table",{},[100,124],{"type":28,"tag":101,"props":102,"children":103},"thead",{},[104],{"type":28,"tag":105,"props":106,"children":107},"tr",{},[108,114,119],{"type":28,"tag":109,"props":110,"children":111},"th",{},[112],{"type":33,"value":113},"变量",{"type":28,"tag":109,"props":115,"children":116},{},[117],{"type":33,"value":118},"做得对的效果",{"type":28,"tag":109,"props":120,"children":121},{},[122],{"type":33,"value":123},"做错后的后果",{"type":28,"tag":125,"props":126,"children":127},"tbody",{},[128,147,165,183,201],{"type":28,"tag":105,"props":129,"children":130},{},[131,137,142],{"type":28,"tag":132,"props":133,"children":134},"td",{},[135],{"type":33,"value":136},"留白",{"type":28,"tag":132,"props":138,"children":139},{},[140],{"type":33,"value":141},"页面显得松弛、有呼吸",{"type":28,"tag":132,"props":143,"children":144},{},[145],{"type":33,"value":146},"页面像资料板或海报拼贴",{"type":28,"tag":105,"props":148,"children":149},{},[150,155,160],{"type":28,"tag":132,"props":151,"children":152},{},[153],{"type":33,"value":154},"字体系统",{"type":28,"tag":132,"props":156,"children":157},{},[158],{"type":33,"value":159},"有稳定气质，阅读不累",{"type":28,"tag":132,"props":161,"children":162},{},[163],{"type":33,"value":164},"标题有味道，正文却难读",{"type":28,"tag":105,"props":166,"children":167},{},[168,173,178],{"type":28,"tag":132,"props":169,"children":170},{},[171],{"type":33,"value":172},"配色控制",{"type":28,"tag":132,"props":174,"children":175},{},[176],{"type":33,"value":177},"情绪统一、识别度清晰",{"type":28,"tag":132,"props":179,"children":180},{},[181],{"type":33,"value":182},"花哨、脏、廉价感强",{"type":28,"tag":105,"props":184,"children":185},{},[186,191,196],{"type":28,"tag":132,"props":187,"children":188},{},[189],{"type":33,"value":190},"图片与装饰",{"type":28,"tag":132,"props":192,"children":193},{},[194],{"type":33,"value":195},"为文本让位，补情境",{"type":28,"tag":132,"props":197,"children":198},{},[199],{"type":33,"value":200},"抢戏、拖慢速度、干扰阅读",{"type":28,"tag":105,"props":202,"children":203},{},[204,209,214],{"type":28,"tag":132,"props":205,"children":206},{},[207],{"type":33,"value":208},"滚动节奏",{"type":28,"tag":132,"props":210,"children":211},{},[212],{"type":33,"value":213},"阅读推进自然",{"type":28,"tag":132,"props":215,"children":216},{},[217],{"type":33,"value":218},"每一屏都很重，读者很快疲劳",{"type":28,"tag":29,"props":220,"children":221},{},[222],{"type":33,"value":223},"所谓氛围感，真正能落地的部分几乎都能被拆成版式和节奏问题。它不是玄学，而是结构选择。",{"type":28,"tag":90,"props":225,"children":227},{"id":226},"一留白文化内容页最容易被低估的设计资产",[228],{"type":33,"value":229},"一、留白：文化内容页最容易被低估的设计资产",{"type":28,"tag":29,"props":231,"children":232},{},[233],{"type":33,"value":234},"对内容型页面来说，留白不是“空”，而是“告诉读者现在该慢一点”。",{"type":28,"tag":236,"props":237,"children":239},"h3",{"id":238},"为什么文化内容页更需要留白",[240],{"type":33,"value":238},{"type":28,"tag":29,"props":242,"children":243},{},[244],{"type":33,"value":245},"因为这类页面通常信息密度并不低：",{"type":28,"tag":41,"props":247,"children":248},{},[249,254,259,264,269,274],{"type":28,"tag":45,"props":250,"children":251},{},[252],{"type":33,"value":253},"标题",{"type":28,"tag":45,"props":255,"children":256},{},[257],{"type":33,"value":258},"引文",{"type":28,"tag":45,"props":260,"children":261},{},[262],{"type":33,"value":263},"正文分析",{"type":28,"tag":45,"props":265,"children":266},{},[267],{"type":33,"value":268},"注释",{"type":28,"tag":45,"props":270,"children":271},{},[272],{"type":33,"value":273},"图片",{"type":28,"tag":45,"props":275,"children":276},{},[277],{"type":33,"value":278},"延伸链接",{"type":28,"tag":29,"props":280,"children":281},{},[282],{"type":33,"value":283},"如果这些内容之间没有明确间隔，读者会把整页看成一块内容墙。尤其在手机端，压迫感会更强。",{"type":28,"tag":236,"props":285,"children":287},{"id":286},"更有效的做法",[288],{"type":33,"value":286},{"type":28,"tag":41,"props":290,"children":291},{},[292,297,302],{"type":28,"tag":45,"props":293,"children":294},{},[295],{"type":33,"value":296},"区块与区块之间明显拉开",{"type":28,"tag":45,"props":298,"children":299},{},[300],{"type":33,"value":301},"一屏只承担一个阅读任务",{"type":28,"tag":45,"props":303,"children":304},{},[305],{"type":33,"value":306},"引文与正文使用不同层级和不同间距",{"type":28,"tag":236,"props":308,"children":310},{"id":309},"一个简单判断标准",[311],{"type":33,"value":309},{"type":28,"tag":29,"props":313,"children":314},{},[315],{"type":33,"value":316},"如果你把颜色都去掉，页面还看得出哪里是停顿、哪里是重点，这个留白系统通常才算成立。",{"type":28,"tag":90,"props":318,"children":320},{"id":319},"二字体气质重要但正文稳定更重要",[321],{"type":33,"value":322},"二、字体：气质重要，但正文稳定更重要",{"type":28,"tag":29,"props":324,"children":325},{},[326],{"type":33,"value":327},"很多文化页失败在这里：标题很有味道，正文却像排版事故。",{"type":28,"tag":236,"props":329,"children":331},{"id":330},"字体系统的正确优先级",[332],{"type":33,"value":330},{"type":28,"tag":334,"props":335,"children":336},"ol",{},[337,342,347],{"type":28,"tag":45,"props":338,"children":339},{},[340],{"type":33,"value":341},"正文先稳定",{"type":28,"tag":45,"props":343,"children":344},{},[345],{"type":33,"value":346},"小标题建立层级",{"type":28,"tag":45,"props":348,"children":349},{},[350],{"type":33,"value":351},"标题再承担气质表达",{"type":28,"tag":29,"props":353,"children":354},{},[355],{"type":33,"value":356},"这意味着：",{"type":28,"tag":41,"props":358,"children":359},{},[360,365,370],{"type":28,"tag":45,"props":361,"children":362},{},[363],{"type":33,"value":364},"正文用更耐读的字体",{"type":28,"tag":45,"props":366,"children":367},{},[368],{"type":33,"value":369},"强风格字体只在少量标题或引用中使用",{"type":28,"tag":45,"props":371,"children":372},{},[373],{"type":33,"value":374},"不要让每种文字都在“表演”",{"type":28,"tag":236,"props":376,"children":378},{"id":377},"常见误区",[379],{"type":33,"value":377},{"type":28,"tag":41,"props":381,"children":382},{},[383,388,393],{"type":28,"tag":45,"props":384,"children":385},{},[386],{"type":33,"value":387},"整页都用装饰型字体",{"type":28,"tag":45,"props":389,"children":390},{},[391],{"type":33,"value":392},"标题、正文、注释各用一套风格，像来自三个模板",{"type":28,"tag":45,"props":394,"children":395},{},[396],{"type":33,"value":397},"为了文艺，把字号压得很小、字重压得很轻",{"type":28,"tag":236,"props":399,"children":401},{"id":400},"更稳的做法",[402],{"type":33,"value":400},{"type":28,"tag":29,"props":404,"children":405},{},[406,408,415],{"type":33,"value":407},"字体数量尽量控制在两套以内，并且确保正文的可读性参数先过关。具体参数可参考 ",{"type":28,"tag":409,"props":410,"children":412},"a",{"href":411},"/topics/design/typography-readability-parameters",[413],{"type":33,"value":414},"排版可读性参数速查表",{"type":33,"value":416},"。",{"type":28,"tag":90,"props":418,"children":420},{"id":419},"三配色情绪统一比有记忆点更重要",[421],{"type":33,"value":422},"三、配色：情绪统一比“有记忆点”更重要",{"type":28,"tag":29,"props":424,"children":425},{},[426],{"type":33,"value":427},"文化内容页常见的配色问题不是不够大胆，而是过于明显地“想做气氛”。",{"type":28,"tag":236,"props":429,"children":431},{"id":430},"适合文化内容页的配色逻辑",[432],{"type":33,"value":430},{"type":28,"tag":41,"props":434,"children":435},{},[436,441,446],{"type":28,"tag":45,"props":437,"children":438},{},[439],{"type":33,"value":440},"以正文可读为前提",{"type":28,"tag":45,"props":442,"children":443},{},[444],{"type":33,"value":445},"背景保持克制",{"type":28,"tag":45,"props":447,"children":448},{},[449],{"type":33,"value":450},"强调色只保留少量点状使用",{"type":28,"tag":29,"props":452,"children":453},{},[454],{"type":33,"value":455},"你可以理解为：",{"type":28,"tag":41,"props":457,"children":458},{},[459,464,469],{"type":28,"tag":45,"props":460,"children":461},{},[462],{"type":33,"value":463},"主体色负责阅读",{"type":28,"tag":45,"props":465,"children":466},{},[467],{"type":33,"value":468},"强调色负责引导",{"type":28,"tag":45,"props":470,"children":471},{},[472],{"type":33,"value":473},"装饰色只负责轻微气质补充",{"type":28,"tag":236,"props":475,"children":477},{"id":476},"为什么很多页面会显得廉价",[478],{"type":33,"value":476},{"type":28,"tag":29,"props":480,"children":481},{},[482],{"type":33,"value":483},"因为它们同时做了三件事：",{"type":28,"tag":41,"props":485,"children":486},{},[487,492,497],{"type":28,"tag":45,"props":488,"children":489},{},[490],{"type":33,"value":491},"大面积有色背景",{"type":28,"tag":45,"props":493,"children":494},{},[495],{"type":33,"value":496},"高饱和按钮或线条",{"type":28,"tag":45,"props":498,"children":499},{},[500],{"type":33,"value":501},"大量渐变、纹理和装饰图案",{"type":28,"tag":29,"props":503,"children":504},{},[505],{"type":33,"value":506},"这会让页面变成“设计在前，内容在后”。文化内容页最怕这个顺序。",{"type":28,"tag":90,"props":508,"children":510},{"id":509},"四图片和装饰是补情境不是占舞台",[511],{"type":33,"value":512},"四、图片和装饰：是补情境，不是占舞台",{"type":28,"tag":29,"props":514,"children":515},{},[516],{"type":33,"value":517},"对于文化内容页，图片最合适的作用通常只有三种：",{"type":28,"tag":41,"props":519,"children":520},{},[521,526,531],{"type":28,"tag":45,"props":522,"children":523},{},[524],{"type":33,"value":525},"提供场景暗示",{"type":28,"tag":45,"props":527,"children":528},{},[529],{"type":33,"value":530},"提供作品气质线索",{"type":28,"tag":45,"props":532,"children":533},{},[534],{"type":33,"value":535},"帮助段落切换",{"type":28,"tag":29,"props":537,"children":538},{},[539],{"type":33,"value":540},"它不适合承担的任务是：",{"type":28,"tag":41,"props":542,"children":543},{},[544,549,554],{"type":28,"tag":45,"props":545,"children":546},{},[547],{"type":33,"value":548},"霸占首屏阅读区",{"type":28,"tag":45,"props":550,"children":551},{},[552],{"type":33,"value":553},"用复杂纹理压住正文",{"type":28,"tag":45,"props":555,"children":556},{},[557],{"type":33,"value":558},"在每个区块都制造视觉强刺激",{"type":28,"tag":236,"props":560,"children":562},{"id":561},"一个实用原则",[563],{"type":33,"value":561},{"type":28,"tag":29,"props":565,"children":566},{},[567],{"type":33,"value":568},"如果页面中的图片拿掉，结构仍然成立，说明图片是在辅助内容；如果图片拿掉后页面就散了，说明你把结构问题交给了素材解决。",{"type":28,"tag":90,"props":570,"children":572},{"id":571},"五滚动节奏氛围感其实是一种阅读节拍",[573],{"type":33,"value":574},"五、滚动节奏：氛围感其实是一种阅读节拍",{"type":28,"tag":29,"props":576,"children":577},{},[578],{"type":33,"value":579},"这是最容易被忽略、也最关键的一点。",{"type":28,"tag":29,"props":581,"children":582},{},[583],{"type":33,"value":584},"很多人做氛围型页面，只盯着单屏视觉，却不看整页的滚动体验。结果常见问题是：",{"type":28,"tag":41,"props":586,"children":587},{},[588,593,598],{"type":28,"tag":45,"props":589,"children":590},{},[591],{"type":33,"value":592},"每一屏都很重",{"type":28,"tag":45,"props":594,"children":595},{},[596],{"type":33,"value":597},"每一屏都想表达很多",{"type":28,"tag":45,"props":599,"children":600},{},[601],{"type":33,"value":602},"屏与屏之间没有情绪变化",{"type":28,"tag":236,"props":604,"children":606},{"id":605},"更好的滚动节奏是什么",[607],{"type":33,"value":605},{"type":28,"tag":29,"props":609,"children":610},{},[611],{"type":33,"value":612},"可以把一页内容想成一个简单的节拍：",{"type":28,"tag":334,"props":614,"children":615},{},[616,621,626,631,636],{"type":28,"tag":45,"props":617,"children":618},{},[619],{"type":33,"value":620},"引入",{"type":28,"tag":45,"props":622,"children":623},{},[624],{"type":33,"value":625},"停顿",{"type":28,"tag":45,"props":627,"children":628},{},[629],{"type":33,"value":630},"解释",{"type":28,"tag":45,"props":632,"children":633},{},[634],{"type":33,"value":635},"强化",{"type":28,"tag":45,"props":637,"children":638},{},[639],{"type":33,"value":640},"收束",{"type":28,"tag":29,"props":642,"children":643},{},[644],{"type":33,"value":645},"这个节拍未必一定要写出来，但页面顺序最好能让读者感受到。尤其是文学、文化、展陈类内容页，这种“阅读推进感”比视觉特效更重要。",{"type":28,"tag":90,"props":647,"children":649},{"id":648},"六一个失败案例为什么很文艺的页面反而读不下去",[650],{"type":33,"value":651},"六、一个失败案例：为什么“很文艺”的页面反而读不下去",{"type":28,"tag":29,"props":653,"children":654},{},[655],{"type":33,"value":656},"典型失败页面通常有这些特征：",{"type":28,"tag":41,"props":658,"children":659},{},[660,665,670,675],{"type":28,"tag":45,"props":661,"children":662},{},[663],{"type":33,"value":664},"开屏大图很美，但文字压在图上不清楚",{"type":28,"tag":45,"props":666,"children":667},{},[668],{"type":33,"value":669},"正文太细太浅，像海报字而不是阅读字",{"type":28,"tag":45,"props":671,"children":672},{},[673],{"type":33,"value":674},"每个区块都做了明显特效",{"type":28,"tag":45,"props":676,"children":677},{},[678],{"type":33,"value":679},"动效很多，但没有帮助理解内容",{"type":28,"tag":236,"props":681,"children":683},{"id":682},"结果",[684],{"type":33,"value":682},{"type":28,"tag":41,"props":686,"children":687},{},[688,693,698],{"type":28,"tag":45,"props":689,"children":690},{},[691],{"type":33,"value":692},"第一眼觉得风格强",{"type":28,"tag":45,"props":694,"children":695},{},[696],{"type":33,"value":697},"第二屏开始疲劳",{"type":28,"tag":45,"props":699,"children":700},{},[701],{"type":33,"value":702},"第三屏就退出",{"type":28,"tag":236,"props":704,"children":706},{"id":705},"根因",[707],{"type":33,"value":705},{"type":28,"tag":29,"props":709,"children":710},{},[711],{"type":33,"value":712},"根因不是“审美不好”，而是没有把页面的优先级排清楚：",{"type":28,"tag":41,"props":714,"children":715},{},[716,721,726],{"type":28,"tag":45,"props":717,"children":718},{},[719],{"type":33,"value":720},"文本优先，还是效果优先？",{"type":28,"tag":45,"props":722,"children":723},{},[724],{"type":33,"value":725},"阅读优先，还是展示优先？",{"type":28,"tag":45,"props":727,"children":728},{},[729],{"type":33,"value":730},"结构优先，还是装饰优先？",{"type":28,"tag":29,"props":732,"children":733},{},[734],{"type":33,"value":735},"当后者压过前者，页面就会从“有气质”变成“有负担”。",{"type":28,"tag":236,"props":737,"children":739},{"id":738},"修复路径",[740],{"type":33,"value":738},{"type":28,"tag":29,"props":742,"children":743},{},[744],{"type":33,"value":745},"最有效的修复通常不是再加一层设计，而是减法：",{"type":28,"tag":334,"props":747,"children":748},{},[749,754,759,764],{"type":28,"tag":45,"props":750,"children":751},{},[752],{"type":33,"value":753},"降低装饰强度",{"type":28,"tag":45,"props":755,"children":756},{},[757],{"type":33,"value":758},"增加段落间距",{"type":28,"tag":45,"props":760,"children":761},{},[762],{"type":33,"value":763},"重新定义标题与正文层级",{"type":28,"tag":45,"props":765,"children":766},{},[767],{"type":33,"value":768},"把一屏里的信息任务收缩到一个",{"type":28,"tag":90,"props":770,"children":772},{"id":771},"七如果你用-htmlpage-做这类页面重点该放在哪",[773],{"type":33,"value":774},"七、如果你用 HTMLPAGE 做这类页面，重点该放在哪",{"type":28,"tag":29,"props":776,"children":777},{},[778],{"type":33,"value":779},"HTMLPAGE 这类 Builder 在文化内容页里适合承担的，是：",{"type":28,"tag":41,"props":781,"children":782},{},[783,788,793,798],{"type":28,"tag":45,"props":784,"children":785},{},[786],{"type":33,"value":787},"区块排布",{"type":28,"tag":45,"props":789,"children":790},{},[791],{"type":33,"value":792},"文本与图片的组合顺序",{"type":28,"tag":45,"props":794,"children":795},{},[796],{"type":33,"value":797},"视觉层级快速试版",{"type":28,"tag":45,"props":799,"children":800},{},[801],{"type":33,"value":802},"手机端节奏调整",{"type":28,"tag":29,"props":804,"children":805},{},[806],{"type":33,"value":807},"但它不能替你做的，是：",{"type":28,"tag":41,"props":809,"children":810},{},[811,816,821],{"type":28,"tag":45,"props":812,"children":813},{},[814],{"type":33,"value":815},"判断哪一段该提前，哪一段该删掉",{"type":28,"tag":45,"props":817,"children":818},{},[819],{"type":33,"value":820},"判断字体是否真的适合长文阅读",{"type":28,"tag":45,"props":822,"children":823},{},[824],{"type":33,"value":825},"判断页面是“气氛强”还是“阅读顺”",{"type":28,"tag":29,"props":827,"children":828},{},[829],{"type":33,"value":830},"所以正确的工作方式不是“上来就找特效”，而是：",{"type":28,"tag":334,"props":832,"children":833},{},[834,839,844],{"type":28,"tag":45,"props":835,"children":836},{},[837],{"type":33,"value":838},"先做结构稿",{"type":28,"tag":45,"props":840,"children":841},{},[842],{"type":33,"value":843},"再做排版系统",{"type":28,"tag":45,"props":845,"children":846},{},[847],{"type":33,"value":848},"最后补气氛细节",{"type":28,"tag":90,"props":850,"children":852},{"id":851},"八checklist文化内容页的氛围感自检",[853],{"type":33,"value":854},"八、Checklist：文化内容页的氛围感自检",{"type":28,"tag":41,"props":856,"children":859},{"className":857},[858],"contains-task-list",[860,873,882,891,900,909,918],{"type":28,"tag":45,"props":861,"children":864},{"className":862},[863],"task-list-item",[865,871],{"type":28,"tag":866,"props":867,"children":870},"input",{"disabled":868,"type":869},true,"checkbox",[],{"type":33,"value":872}," 页面即使去掉装饰图和特效，结构仍然成立",{"type":28,"tag":45,"props":874,"children":876},{"className":875},[863],[877,880],{"type":28,"tag":866,"props":878,"children":879},{"disabled":868,"type":869},[],{"type":33,"value":881}," 标题有气质，但正文连续读 3 屏不累",{"type":28,"tag":45,"props":883,"children":885},{"className":884},[863],[886,889],{"type":28,"tag":866,"props":887,"children":888},{"disabled":868,"type":869},[],{"type":33,"value":890}," 全页配色克制，没有大面积抢戏色块",{"type":28,"tag":45,"props":892,"children":894},{"className":893},[863],[895,898],{"type":28,"tag":866,"props":896,"children":897},{"disabled":868,"type":869},[],{"type":33,"value":899}," 每一屏只承担一个主要阅读任务",{"type":28,"tag":45,"props":901,"children":903},{"className":902},[863],[904,907],{"type":28,"tag":866,"props":905,"children":906},{"disabled":868,"type":869},[],{"type":33,"value":908}," 图片和装饰在辅助内容，而不是压住内容",{"type":28,"tag":45,"props":910,"children":912},{"className":911},[863],[913,916],{"type":28,"tag":866,"props":914,"children":915},{"disabled":868,"type":869},[],{"type":33,"value":917}," 手机端间距和行长依然舒适",{"type":28,"tag":45,"props":919,"children":921},{"className":920},[863],[922,925],{"type":28,"tag":866,"props":923,"children":924},{"disabled":868,"type":869},[],{"type":33,"value":926}," 页面滚动顺序有明显节拍，而不是信息平铺",{"type":28,"tag":90,"props":928,"children":930},{"id":929},"结语",[931],{"type":33,"value":929},{"type":28,"tag":29,"props":933,"children":934},{},[935],{"type":33,"value":936},"氛围感网页设计真正难的地方，不是做出一种风格，而是让风格为阅读服务。对文化内容页来说，最高级的气质往往不是“我做了很多”，而是“我让不该干扰阅读的东西都退后了”。",{"type":28,"tag":29,"props":938,"children":939},{},[940],{"type":33,"value":941},"这时候，留白、字体、配色和滚动节奏才会真正一起工作。",{"type":28,"tag":29,"props":943,"children":944},{},[945],{"type":33,"value":946},"延伸阅读：",{"type":28,"tag":41,"props":948,"children":949},{},[950,959,968,977],{"type":28,"tag":45,"props":951,"children":952},{},[953],{"type":28,"tag":409,"props":954,"children":956},{"href":955},"/topics/practical-tips/htmlpage-poetry-appreciation-page-guide",[957],{"type":33,"value":958},"用 HTMLPAGE 制作古诗词赏析网页：怎么把诗的气氛做成页面节奏",{"type":28,"tag":45,"props":960,"children":961},{},[962],{"type":28,"tag":409,"props":963,"children":965},{"href":964},"/topics/practical-tips/literature-appreciation-website-structure-guide",[966],{"type":33,"value":967},"文学赏析网页制作指南：单篇赏析、专题合集、课堂展示三种结构怎么选",{"type":28,"tag":45,"props":969,"children":970},{},[971],{"type":28,"tag":409,"props":972,"children":974},{"href":973},"/topics/design/free-web-design-premium-look-playbook",[975],{"type":33,"value":976},"免费网页设计怎么做出高级感：从模板味到内容气质的完整改造路径",{"type":28,"tag":45,"props":978,"children":979},{},[980],{"type":28,"tag":409,"props":981,"children":983},{"href":982},"/topics/practical-tips/cultural-content-page-seo-reading-experience",[984],{"type":33,"value":985},"在线免费制作网页的 SEO 实战：文化内容页怎么兼顾氛围感、收录和停留时间",{"title":7,"searchDepth":987,"depth":987,"links":988},3,[989,991,996,1001,1005,1008,1011,1016,1017,1018],{"id":92,"depth":990,"text":95},2,{"id":226,"depth":990,"text":229,"children":992},[993,994,995],{"id":238,"depth":987,"text":238},{"id":286,"depth":987,"text":286},{"id":309,"depth":987,"text":309},{"id":319,"depth":990,"text":322,"children":997},[998,999,1000],{"id":330,"depth":987,"text":330},{"id":377,"depth":987,"text":377},{"id":400,"depth":987,"text":400},{"id":419,"depth":990,"text":422,"children":1002},[1003,1004],{"id":430,"depth":987,"text":430},{"id":476,"depth":987,"text":476},{"id":509,"depth":990,"text":512,"children":1006},[1007],{"id":561,"depth":987,"text":561},{"id":571,"depth":990,"text":574,"children":1009},[1010],{"id":605,"depth":987,"text":605},{"id":648,"depth":990,"text":651,"children":1012},[1013,1014,1015],{"id":682,"depth":987,"text":682},{"id":705,"depth":987,"text":705},{"id":738,"depth":987,"text":738},{"id":771,"depth":990,"text":774},{"id":851,"depth":990,"text":854},{"id":929,"depth":990,"text":929},"markdown","content:topics:design:atmosphere-web-design-for-cultural-content.md","content","topics/design/atmosphere-web-design-for-cultural-content.md","topics/design/atmosphere-web-design-for-cultural-content","md",[1026,1379,1681],{"_path":1027,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1028,"description":1029,"keywords":1030,"image":1036,"author":11,"date":1037,"readingTime":1038,"topic":5,"body":1039,"_type":1019,"_id":1376,"_source":1021,"_file":1377,"_stem":1378,"_extension":1024},"/topics/design/button-component-design","按钮组件设计详解","学习按钮样式、交互状态、无障碍性和最佳实践",[1031,1032,1033,1034,1035],"按钮设计","Button Component","交互状态","UI 组件","用户体验","/images/topics/button-design.jpg","2025-12-08",18,{"type":25,"children":1040,"toc":1358},[1041,1045,1050,1055,1061,1074,1080,1089,1095,1104,1108,1114,1125,1131,1140,1146,1155,1160,1169,1174,1185,1190,1199,1204,1216,1250,1261,1304,1309],{"type":28,"tag":90,"props":1042,"children":1043},{"id":1028},[1044],{"type":33,"value":1028},{"type":28,"tag":29,"props":1046,"children":1047},{},[1048],{"type":33,"value":1049},"按钮是 UI 中最重要的交互元素。优秀的按钮设计能够指导用户行为。",{"type":28,"tag":90,"props":1051,"children":1053},{"id":1052},"按钮类型",[1054],{"type":33,"value":1052},{"type":28,"tag":236,"props":1056,"children":1058},{"id":1057},"primary-button主按钮",[1059],{"type":33,"value":1060},"Primary Button（主按钮）",{"type":28,"tag":1062,"props":1063,"children":1068},"pre",{"className":1064,"code":1066,"language":1067,"meta":7},[1065],"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",[1069],{"type":28,"tag":1070,"props":1071,"children":1072},"code",{"__ignoreMap":7},[1073],{"type":33,"value":1066},{"type":28,"tag":236,"props":1075,"children":1077},{"id":1076},"secondary-button次按钮",[1078],{"type":33,"value":1079},"Secondary Button（次按钮）",{"type":28,"tag":1062,"props":1081,"children":1084},{"className":1082,"code":1083,"language":1067,"meta":7},[1065],".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",[1085],{"type":28,"tag":1070,"props":1086,"children":1087},{"__ignoreMap":7},[1088],{"type":33,"value":1083},{"type":28,"tag":236,"props":1090,"children":1092},{"id":1091},"danger-button危险按钮",[1093],{"type":33,"value":1094},"Danger Button（危险按钮）",{"type":28,"tag":1062,"props":1096,"children":1099},{"className":1097,"code":1098,"language":1067,"meta":7},[1065],".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",[1100],{"type":28,"tag":1070,"props":1101,"children":1102},{"__ignoreMap":7},[1103],{"type":33,"value":1098},{"type":28,"tag":90,"props":1105,"children":1106},{"id":1033},[1107],{"type":33,"value":1033},{"type":28,"tag":236,"props":1109,"children":1111},{"id":1110},"loading-状态",[1112],{"type":33,"value":1113},"Loading 状态",{"type":28,"tag":1062,"props":1115,"children":1120},{"className":1116,"code":1118,"language":1119,"meta":7},[1117],"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",[1121],{"type":28,"tag":1070,"props":1122,"children":1123},{"__ignoreMap":7},[1124],{"type":33,"value":1118},{"type":28,"tag":236,"props":1126,"children":1128},{"id":1127},"disabled-状态",[1129],{"type":33,"value":1130},"Disabled 状态",{"type":28,"tag":1062,"props":1132,"children":1135},{"className":1133,"code":1134,"language":1067,"meta":7},[1065],".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",[1136],{"type":28,"tag":1070,"props":1137,"children":1138},{"__ignoreMap":7},[1139],{"type":33,"value":1134},{"type":28,"tag":236,"props":1141,"children":1143},{"id":1142},"focus-状态",[1144],{"type":33,"value":1145},"Focus 状态",{"type":28,"tag":1062,"props":1147,"children":1150},{"className":1148,"code":1149,"language":1067,"meta":7},[1065],".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",[1151],{"type":28,"tag":1070,"props":1152,"children":1153},{"__ignoreMap":7},[1154],{"type":33,"value":1149},{"type":28,"tag":90,"props":1156,"children":1158},{"id":1157},"按钮大小",[1159],{"type":33,"value":1157},{"type":28,"tag":1062,"props":1161,"children":1164},{"className":1162,"code":1163,"language":1067,"meta":7},[1065],"/* 小按钮 */\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",[1165],{"type":28,"tag":1070,"props":1166,"children":1167},{"__ignoreMap":7},[1168],{"type":33,"value":1163},{"type":28,"tag":90,"props":1170,"children":1172},{"id":1171},"无障碍性",[1173],{"type":33,"value":1171},{"type":28,"tag":1062,"props":1175,"children":1180},{"className":1176,"code":1178,"language":1179,"meta":7},[1177],"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",[1181],{"type":28,"tag":1070,"props":1182,"children":1183},{"__ignoreMap":7},[1184],{"type":33,"value":1178},{"type":28,"tag":90,"props":1186,"children":1188},{"id":1187},"完整组件示例",[1189],{"type":33,"value":1187},{"type":28,"tag":1062,"props":1191,"children":1194},{"className":1192,"code":1193,"language":1119,"meta":7},[1117],"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",[1195],{"type":28,"tag":1070,"props":1196,"children":1197},{"__ignoreMap":7},[1198],{"type":33,"value":1193},{"type":28,"tag":90,"props":1200,"children":1202},{"id":1201},"最佳实践",[1203],{"type":33,"value":1201},{"type":28,"tag":29,"props":1205,"children":1206},{},[1207,1209,1214],{"type":33,"value":1208},"✅ ",{"type":28,"tag":84,"props":1210,"children":1211},{},[1212],{"type":33,"value":1213},"应该做的事",{"type":33,"value":1215},":",{"type":28,"tag":41,"props":1217,"children":1218},{},[1219,1224,1229,1240,1245],{"type":28,"tag":45,"props":1220,"children":1221},{},[1222],{"type":33,"value":1223},"最小触摸目标 44x44px",{"type":28,"tag":45,"props":1225,"children":1226},{},[1227],{"type":33,"value":1228},"清晰的视觉反馈",{"type":28,"tag":45,"props":1230,"children":1231},{},[1232,1234],{"type":33,"value":1233},"使用语义 HTML ",{"type":28,"tag":1070,"props":1235,"children":1237},{"className":1236},[],[1238],{"type":33,"value":1239},"\u003Cbutton>",{"type":28,"tag":45,"props":1241,"children":1242},{},[1243],{"type":33,"value":1244},"提供加载状态反馈",{"type":28,"tag":45,"props":1246,"children":1247},{},[1248],{"type":33,"value":1249},"支持键盘导航",{"type":28,"tag":29,"props":1251,"children":1252},{},[1253,1255,1260],{"type":33,"value":1254},"❌ ",{"type":28,"tag":84,"props":1256,"children":1257},{},[1258],{"type":33,"value":1259},"不应该做的事",{"type":33,"value":1215},{"type":28,"tag":41,"props":1262,"children":1263},{},[1264,1277,1282,1287,1292],{"type":28,"tag":45,"props":1265,"children":1266},{},[1267,1269,1275],{"type":33,"value":1268},"使用 ",{"type":28,"tag":1070,"props":1270,"children":1272},{"className":1271},[],[1273],{"type":33,"value":1274},"\u003Cdiv>",{"type":33,"value":1276}," 模拟按钮",{"type":28,"tag":45,"props":1278,"children":1279},{},[1280],{"type":33,"value":1281},"隐藏焦点指示器",{"type":28,"tag":45,"props":1283,"children":1284},{},[1285],{"type":33,"value":1286},"过多的按钮样式",{"type":28,"tag":45,"props":1288,"children":1289},{},[1290],{"type":33,"value":1291},"忽视禁用状态",{"type":28,"tag":45,"props":1293,"children":1294},{},[1295,1296,1302],{"type":33,"value":1268},{"type":28,"tag":1070,"props":1297,"children":1299},{"className":1298},[],[1300],{"type":33,"value":1301},"\u003Ca>",{"type":33,"value":1303}," 代替按钮",{"type":28,"tag":90,"props":1305,"children":1307},{"id":1306},"测试清单",[1308],{"type":33,"value":1306},{"type":28,"tag":41,"props":1310,"children":1312},{"className":1311},[858],[1313,1322,1331,1340,1349],{"type":28,"tag":45,"props":1314,"children":1316},{"className":1315},[863],[1317,1320],{"type":28,"tag":866,"props":1318,"children":1319},{"disabled":868,"type":869},[],{"type":33,"value":1321}," 在各种浏览器中测试",{"type":28,"tag":45,"props":1323,"children":1325},{"className":1324},[863],[1326,1329],{"type":28,"tag":866,"props":1327,"children":1328},{"disabled":868,"type":869},[],{"type":33,"value":1330}," 验证键盘导航",{"type":28,"tag":45,"props":1332,"children":1334},{"className":1333},[863],[1335,1338],{"type":28,"tag":866,"props":1336,"children":1337},{"disabled":868,"type":869},[],{"type":33,"value":1339}," 检查色彩对比度",{"type":28,"tag":45,"props":1341,"children":1343},{"className":1342},[863],[1344,1347],{"type":28,"tag":866,"props":1345,"children":1346},{"disabled":868,"type":869},[],{"type":33,"value":1348}," 测试触摸设备",{"type":28,"tag":45,"props":1350,"children":1352},{"className":1351},[863],[1353,1356],{"type":28,"tag":866,"props":1354,"children":1355},{"disabled":868,"type":869},[],{"type":33,"value":1357}," 屏幕阅读器兼容性",{"title":7,"searchDepth":987,"depth":987,"links":1359},[1360,1361,1366,1371,1372,1373,1374,1375],{"id":1028,"depth":990,"text":1028},{"id":1052,"depth":990,"text":1052,"children":1362},[1363,1364,1365],{"id":1057,"depth":987,"text":1060},{"id":1076,"depth":987,"text":1079},{"id":1091,"depth":987,"text":1094},{"id":1033,"depth":990,"text":1033,"children":1367},[1368,1369,1370],{"id":1110,"depth":987,"text":1113},{"id":1127,"depth":987,"text":1130},{"id":1142,"depth":987,"text":1145},{"id":1157,"depth":990,"text":1157},{"id":1171,"depth":990,"text":1171},{"id":1187,"depth":990,"text":1187},{"id":1201,"depth":990,"text":1201},{"id":1306,"depth":990,"text":1306},"content:topics:design:button-component-design.md","topics/design/button-component-design.md","topics/design/button-component-design",{"_path":1380,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1381,"description":1382,"keywords":1383,"image":1388,"author":11,"date":1037,"readingTime":1389,"topic":5,"body":1390,"_type":1019,"_id":1678,"_source":1021,"_file":1679,"_stem":1680,"_extension":1024},"/topics/design/dark-mode-design","暗黑模式设计完整方案","学习暗黑模式实现、色彩方案、对比度管理和最佳实践",[1384,1385,1386,1387,1035],"暗黑模式","Dark Mode","色彩系统","CSS 变量","/images/topics/dark-mode-design.jpg",20,{"type":25,"children":1391,"toc":1661},[1392,1396,1401,1406,1412,1421,1427,1436,1441,1447,1456,1462,1473,1479,1488,1493,1502,1507,1516,1521,1530,1534,1543,1571,1580,1608,1612],{"type":28,"tag":90,"props":1393,"children":1394},{"id":1381},[1395],{"type":33,"value":1381},{"type":28,"tag":29,"props":1397,"children":1398},{},[1399],{"type":33,"value":1400},"暗黑模式已成为现代应用的标准功能。它能够减少眼睛疲劳、节省电池、改善用户体验。",{"type":28,"tag":90,"props":1402,"children":1404},{"id":1403},"核心色彩系统",[1405],{"type":33,"value":1403},{"type":28,"tag":236,"props":1407,"children":1409},{"id":1408},"light-mode-配色",[1410],{"type":33,"value":1411},"Light Mode 配色",{"type":28,"tag":1062,"props":1413,"children":1416},{"className":1414,"code":1415,"language":1067,"meta":7},[1065],":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",[1417],{"type":28,"tag":1070,"props":1418,"children":1419},{"__ignoreMap":7},[1420],{"type":33,"value":1415},{"type":28,"tag":236,"props":1422,"children":1424},{"id":1423},"dark-mode-配色",[1425],{"type":33,"value":1426},"Dark Mode 配色",{"type":28,"tag":1062,"props":1428,"children":1431},{"className":1429,"code":1430,"language":1067,"meta":7},[1065],"@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",[1432],{"type":28,"tag":1070,"props":1433,"children":1434},{"__ignoreMap":7},[1435],{"type":33,"value":1430},{"type":28,"tag":90,"props":1437,"children":1439},{"id":1438},"实现方案",[1440],{"type":33,"value":1438},{"type":28,"tag":236,"props":1442,"children":1444},{"id":1443},"方案-1prefers-color-scheme",[1445],{"type":33,"value":1446},"方案 1：prefers-color-scheme",{"type":28,"tag":1062,"props":1448,"children":1451},{"className":1449,"code":1450,"language":1067,"meta":7},[1065],"/* 自动跟随系统设置 */\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",[1452],{"type":28,"tag":1070,"props":1453,"children":1454},{"__ignoreMap":7},[1455],{"type":33,"value":1450},{"type":28,"tag":236,"props":1457,"children":1459},{"id":1458},"方案-2javascript-切换",[1460],{"type":33,"value":1461},"方案 2：JavaScript 切换",{"type":28,"tag":1062,"props":1463,"children":1468},{"className":1464,"code":1466,"language":1467,"meta":7},[1465],"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",[1469],{"type":28,"tag":1070,"props":1470,"children":1471},{"__ignoreMap":7},[1472],{"type":33,"value":1466},{"type":28,"tag":236,"props":1474,"children":1476},{"id":1475},"方案-3css-variables-javascript",[1477],{"type":33,"value":1478},"方案 3：CSS Variables + JavaScript",{"type":28,"tag":1062,"props":1480,"children":1483},{"className":1481,"code":1482,"language":1467,"meta":7},[1465],"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",[1484],{"type":28,"tag":1070,"props":1485,"children":1486},{"__ignoreMap":7},[1487],{"type":33,"value":1482},{"type":28,"tag":90,"props":1489,"children":1491},{"id":1490},"对比度管理",[1492],{"type":33,"value":1490},{"type":28,"tag":1062,"props":1494,"children":1497},{"className":1495,"code":1496,"language":1067,"meta":7},[1065],"/* 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",[1498],{"type":28,"tag":1070,"props":1499,"children":1500},{"__ignoreMap":7},[1501],{"type":33,"value":1496},{"type":28,"tag":90,"props":1503,"children":1505},{"id":1504},"图片和图表处理",[1506],{"type":33,"value":1504},{"type":28,"tag":1062,"props":1508,"children":1511},{"className":1509,"code":1510,"language":1179,"meta":7},[1177],"\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",[1512],{"type":28,"tag":1070,"props":1513,"children":1514},{"__ignoreMap":7},[1515],{"type":33,"value":1510},{"type":28,"tag":90,"props":1517,"children":1519},{"id":1518},"完整示例",[1520],{"type":33,"value":1518},{"type":28,"tag":1062,"props":1522,"children":1525},{"className":1523,"code":1524,"language":1119,"meta":7},[1117],"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",[1526],{"type":28,"tag":1070,"props":1527,"children":1528},{"__ignoreMap":7},[1529],{"type":33,"value":1524},{"type":28,"tag":90,"props":1531,"children":1532},{"id":1201},[1533],{"type":33,"value":1201},{"type":28,"tag":29,"props":1535,"children":1536},{},[1537,1538,1542],{"type":33,"value":1208},{"type":28,"tag":84,"props":1539,"children":1540},{},[1541],{"type":33,"value":1213},{"type":33,"value":1215},{"type":28,"tag":41,"props":1544,"children":1545},{},[1546,1551,1556,1561,1566],{"type":28,"tag":45,"props":1547,"children":1548},{},[1549],{"type":33,"value":1550},"支持系统偏好",{"type":28,"tag":45,"props":1552,"children":1553},{},[1554],{"type":33,"value":1555},"提供手动切换选项",{"type":28,"tag":45,"props":1557,"children":1558},{},[1559],{"type":33,"value":1560},"确保足够的对比度",{"type":28,"tag":45,"props":1562,"children":1563},{},[1564],{"type":33,"value":1565},"优化图片和图表",{"type":28,"tag":45,"props":1567,"children":1568},{},[1569],{"type":33,"value":1570},"防止加载闪烁",{"type":28,"tag":29,"props":1572,"children":1573},{},[1574,1575,1579],{"type":33,"value":1254},{"type":28,"tag":84,"props":1576,"children":1577},{},[1578],{"type":33,"value":1259},{"type":33,"value":1215},{"type":28,"tag":41,"props":1581,"children":1582},{},[1583,1588,1593,1598,1603],{"type":28,"tag":45,"props":1584,"children":1585},{},[1586],{"type":33,"value":1587},"强制单一模式",{"type":28,"tag":45,"props":1589,"children":1590},{},[1591],{"type":33,"value":1592},"忽视性能影响",{"type":28,"tag":45,"props":1594,"children":1595},{},[1596],{"type":33,"value":1597},"使用相同的颜色",{"type":28,"tag":45,"props":1599,"children":1600},{},[1601],{"type":33,"value":1602},"忘记保存用户偏好",{"type":28,"tag":45,"props":1604,"children":1605},{},[1606],{"type":33,"value":1607},"过度使用深色背景",{"type":28,"tag":90,"props":1609,"children":1610},{"id":1306},[1611],{"type":33,"value":1306},{"type":28,"tag":41,"props":1613,"children":1615},{"className":1614},[858],[1616,1625,1634,1643,1652],{"type":28,"tag":45,"props":1617,"children":1619},{"className":1618},[863],[1620,1623],{"type":28,"tag":866,"props":1621,"children":1622},{"disabled":868,"type":869},[],{"type":33,"value":1624}," 在浅色和深色模式下测试所有页面",{"type":28,"tag":45,"props":1626,"children":1628},{"className":1627},[863],[1629,1632],{"type":28,"tag":866,"props":1630,"children":1631},{"disabled":868,"type":869},[],{"type":33,"value":1633}," 检查颜色对比度符合 WCAG 标准",{"type":28,"tag":45,"props":1635,"children":1637},{"className":1636},[863],[1638,1641],{"type":28,"tag":866,"props":1639,"children":1640},{"disabled":868,"type":869},[],{"type":33,"value":1642}," 验证图片和图表在两种模式下清晰",{"type":28,"tag":45,"props":1644,"children":1646},{"className":1645},[863],[1647,1650],{"type":28,"tag":866,"props":1648,"children":1649},{"disabled":868,"type":869},[],{"type":33,"value":1651}," 测试主题切换的平滑性",{"type":28,"tag":45,"props":1653,"children":1655},{"className":1654},[863],[1656,1659],{"type":28,"tag":866,"props":1657,"children":1658},{"disabled":868,"type":869},[],{"type":33,"value":1660}," 检查用户偏好是否被保存",{"title":7,"searchDepth":987,"depth":987,"links":1662},[1663,1664,1668,1673,1674,1675,1676,1677],{"id":1381,"depth":990,"text":1381},{"id":1403,"depth":990,"text":1403,"children":1665},[1666,1667],{"id":1408,"depth":987,"text":1411},{"id":1423,"depth":987,"text":1426},{"id":1438,"depth":990,"text":1438,"children":1669},[1670,1671,1672],{"id":1443,"depth":987,"text":1446},{"id":1458,"depth":987,"text":1461},{"id":1475,"depth":987,"text":1478},{"id":1490,"depth":990,"text":1490},{"id":1504,"depth":990,"text":1504},{"id":1518,"depth":990,"text":1518},{"id":1201,"depth":990,"text":1201},{"id":1306,"depth":990,"text":1306},"content:topics:design:dark-mode-design.md","topics/design/dark-mode-design.md","topics/design/dark-mode-design",{"_path":1682,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1683,"description":1684,"keywords":1685,"image":1690,"author":1691,"date":1037,"readingTime":1389,"topic":5,"body":1692,"_type":1019,"_id":1957,"_source":1021,"_file":1958,"_stem":1959,"_extension":1024},"/topics/design/form-controls-design","表单控件设计规范","学习输入框、选择框、复选框等表单控件的设计和实现",[1686,1687,1688,1689,1035],"表单设计","Form Controls","输入框","验证反馈","/images/topics/form-controls-design.jpg","AI Content Team",{"type":25,"children":1693,"toc":1943},[1694,1698,1703,1708,1713,1722,1727,1736,1740,1749,1754,1763,1768,1777,1782,1791,1796,1805,1809,1818,1844,1853,1881,1885],{"type":28,"tag":90,"props":1695,"children":1696},{"id":1683},[1697],{"type":33,"value":1683},{"type":28,"tag":29,"props":1699,"children":1700},{},[1701],{"type":33,"value":1702},"优秀的表单设计能够提高用户完成率和满意度。",{"type":28,"tag":90,"props":1704,"children":1706},{"id":1705},"输入框设计",[1707],{"type":33,"value":1705},{"type":28,"tag":236,"props":1709,"children":1711},{"id":1710},"基础文本输入",[1712],{"type":33,"value":1710},{"type":28,"tag":1062,"props":1714,"children":1717},{"className":1715,"code":1716,"language":1067,"meta":7},[1065],".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",[1718],{"type":28,"tag":1070,"props":1719,"children":1720},{"__ignoreMap":7},[1721],{"type":33,"value":1716},{"type":28,"tag":236,"props":1723,"children":1725},{"id":1724},"标签和提示",[1726],{"type":33,"value":1724},{"type":28,"tag":1062,"props":1728,"children":1731},{"className":1729,"code":1730,"language":1179,"meta":7},[1177],"\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",[1732],{"type":28,"tag":1070,"props":1733,"children":1734},{"__ignoreMap":7},[1735],{"type":33,"value":1730},{"type":28,"tag":90,"props":1737,"children":1738},{"id":1689},[1739],{"type":33,"value":1689},{"type":28,"tag":1062,"props":1741,"children":1744},{"className":1742,"code":1743,"language":1119,"meta":7},[1117],"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",[1745],{"type":28,"tag":1070,"props":1746,"children":1747},{"__ignoreMap":7},[1748],{"type":33,"value":1743},{"type":28,"tag":90,"props":1750,"children":1752},{"id":1751},"选择框设计",[1753],{"type":33,"value":1751},{"type":28,"tag":1062,"props":1755,"children":1758},{"className":1756,"code":1757,"language":1067,"meta":7},[1065],".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",[1759],{"type":28,"tag":1070,"props":1760,"children":1761},{"__ignoreMap":7},[1762],{"type":33,"value":1757},{"type":28,"tag":90,"props":1764,"children":1766},{"id":1765},"复选框和单选按钮",[1767],{"type":33,"value":1765},{"type":28,"tag":1062,"props":1769,"children":1772},{"className":1770,"code":1771,"language":1067,"meta":7},[1065],".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",[1773],{"type":28,"tag":1070,"props":1774,"children":1775},{"__ignoreMap":7},[1776],{"type":33,"value":1771},{"type":28,"tag":90,"props":1778,"children":1780},{"id":1779},"文本区域",[1781],{"type":33,"value":1779},{"type":28,"tag":1062,"props":1783,"children":1786},{"className":1784,"code":1785,"language":1067,"meta":7},[1065],".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",[1787],{"type":28,"tag":1070,"props":1788,"children":1789},{"__ignoreMap":7},[1790],{"type":33,"value":1785},{"type":28,"tag":90,"props":1792,"children":1794},{"id":1793},"完整表单示例",[1795],{"type":33,"value":1793},{"type":28,"tag":1062,"props":1797,"children":1800},{"className":1798,"code":1799,"language":1119,"meta":7},[1117],"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",[1801],{"type":28,"tag":1070,"props":1802,"children":1803},{"__ignoreMap":7},[1804],{"type":33,"value":1799},{"type":28,"tag":90,"props":1806,"children":1807},{"id":1201},[1808],{"type":33,"value":1201},{"type":28,"tag":29,"props":1810,"children":1811},{},[1812,1813,1817],{"type":33,"value":1208},{"type":28,"tag":84,"props":1814,"children":1815},{},[1816],{"type":33,"value":1213},{"type":33,"value":1215},{"type":28,"tag":41,"props":1819,"children":1820},{},[1821,1826,1831,1836,1840],{"type":28,"tag":45,"props":1822,"children":1823},{},[1824],{"type":33,"value":1825},"使用正确的输入类型",{"type":28,"tag":45,"props":1827,"children":1828},{},[1829],{"type":33,"value":1830},"提供实时验证反馈",{"type":28,"tag":45,"props":1832,"children":1833},{},[1834],{"type":33,"value":1835},"清晰的标签和提示",{"type":28,"tag":45,"props":1837,"children":1838},{},[1839],{"type":33,"value":1223},{"type":28,"tag":45,"props":1841,"children":1842},{},[1843],{"type":33,"value":1249},{"type":28,"tag":29,"props":1845,"children":1846},{},[1847,1848,1852],{"type":33,"value":1254},{"type":28,"tag":84,"props":1849,"children":1850},{},[1851],{"type":33,"value":1259},{"type":33,"value":1215},{"type":28,"tag":41,"props":1854,"children":1855},{},[1856,1861,1866,1871,1876],{"type":28,"tag":45,"props":1857,"children":1858},{},[1859],{"type":33,"value":1860},"隐藏标签",{"type":28,"tag":45,"props":1862,"children":1863},{},[1864],{"type":33,"value":1865},"过度使用占位符",{"type":28,"tag":45,"props":1867,"children":1868},{},[1869],{"type":33,"value":1870},"验证后立即提交",{"type":28,"tag":45,"props":1872,"children":1873},{},[1874],{"type":33,"value":1875},"忽视无障碍性",{"type":28,"tag":45,"props":1877,"children":1878},{},[1879],{"type":33,"value":1880},"复杂的验证规则",{"type":28,"tag":90,"props":1882,"children":1883},{"id":1306},[1884],{"type":33,"value":1306},{"type":28,"tag":41,"props":1886,"children":1888},{"className":1887},[858],[1889,1898,1907,1916,1925,1934],{"type":28,"tag":45,"props":1890,"children":1892},{"className":1891},[863],[1893,1896],{"type":28,"tag":866,"props":1894,"children":1895},{"disabled":868,"type":869},[],{"type":33,"value":1897}," 所有控件都可用键盘导航",{"type":28,"tag":45,"props":1899,"children":1901},{"className":1900},[863],[1902,1905],{"type":28,"tag":866,"props":1903,"children":1904},{"disabled":868,"type":869},[],{"type":33,"value":1906}," 标签与输入框关联",{"type":28,"tag":45,"props":1908,"children":1910},{"className":1909},[863],[1911,1914],{"type":28,"tag":866,"props":1912,"children":1913},{"disabled":868,"type":869},[],{"type":33,"value":1915}," 验证消息清晰",{"type":28,"tag":45,"props":1917,"children":1919},{"className":1918},[863],[1920,1923],{"type":28,"tag":866,"props":1921,"children":1922},{"disabled":868,"type":869},[],{"type":33,"value":1924}," 色彩对比度足够",{"type":28,"tag":45,"props":1926,"children":1928},{"className":1927},[863],[1929,1932],{"type":28,"tag":866,"props":1930,"children":1931},{"disabled":868,"type":869},[],{"type":33,"value":1933}," 屏幕阅读器兼容",{"type":28,"tag":45,"props":1935,"children":1937},{"className":1936},[863],[1938,1941],{"type":28,"tag":866,"props":1939,"children":1940},{"disabled":868,"type":869},[],{"type":33,"value":1942}," 移动设备测试",{"title":7,"searchDepth":987,"depth":987,"links":1944},[1945,1946,1950,1951,1952,1953,1954,1955,1956],{"id":1683,"depth":990,"text":1683},{"id":1705,"depth":990,"text":1705,"children":1947},[1948,1949],{"id":1710,"depth":987,"text":1710},{"id":1724,"depth":987,"text":1724},{"id":1689,"depth":990,"text":1689},{"id":1751,"depth":990,"text":1751},{"id":1765,"depth":990,"text":1765},{"id":1779,"depth":990,"text":1779},{"id":1793,"depth":990,"text":1793},{"id":1201,"depth":990,"text":1201},{"id":1306,"depth":990,"text":1306},"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":1961,"image":18,"imageAlt":19,"imageQuery":20,"pexelsPhotoId":21,"pexelsUrl":22,"readingTime":23,"featured":6,"body":1962,"_type":1019,"_id":1020,"_source":1021,"_file":1022,"_stem":1023,"_extension":1024},[13,14,15,16,17],{"type":25,"children":1963,"toc":2730},[1964,1968,1972,1995,1999,2003,2010,2014,2113,2117,2121,2125,2129,2133,2160,2164,2168,2183,2187,2191,2195,2199,2203,2218,2222,2237,2241,2256,2260,2269,2273,2277,2281,2296,2300,2315,2319,2323,2338,2342,2346,2350,2365,2369,2384,2388,2392,2396,2400,2404,2419,2423,2427,2450,2454,2458,2462,2481,2485,2500,2504,2508,2523,2527,2531,2535,2554,2558,2562,2581,2585,2600,2604,2619,2623,2683,2687,2691,2695,2699],{"type":28,"tag":29,"props":1965,"children":1966},{},[1967],{"type":33,"value":34},{"type":28,"tag":29,"props":1969,"children":1970},{},[1971],{"type":33,"value":39},{"type":28,"tag":41,"props":1973,"children":1974},{},[1975,1979,1983,1987,1991],{"type":28,"tag":45,"props":1976,"children":1977},{},[1978],{"type":33,"value":49},{"type":28,"tag":45,"props":1980,"children":1981},{},[1982],{"type":33,"value":54},{"type":28,"tag":45,"props":1984,"children":1985},{},[1986],{"type":33,"value":59},{"type":28,"tag":45,"props":1988,"children":1989},{},[1990],{"type":33,"value":64},{"type":28,"tag":45,"props":1992,"children":1993},{},[1994],{"type":33,"value":69},{"type":28,"tag":29,"props":1996,"children":1997},{},[1998],{"type":33,"value":74},{"type":28,"tag":29,"props":2000,"children":2001},{},[2002],{"type":33,"value":79},{"type":28,"tag":29,"props":2004,"children":2005},{},[2006],{"type":28,"tag":84,"props":2007,"children":2008},{},[2009],{"type":33,"value":88},{"type":28,"tag":90,"props":2011,"children":2012},{"id":92},[2013],{"type":33,"value":95},{"type":28,"tag":97,"props":2015,"children":2016},{},[2017,2035],{"type":28,"tag":101,"props":2018,"children":2019},{},[2020],{"type":28,"tag":105,"props":2021,"children":2022},{},[2023,2027,2031],{"type":28,"tag":109,"props":2024,"children":2025},{},[2026],{"type":33,"value":113},{"type":28,"tag":109,"props":2028,"children":2029},{},[2030],{"type":33,"value":118},{"type":28,"tag":109,"props":2032,"children":2033},{},[2034],{"type":33,"value":123},{"type":28,"tag":125,"props":2036,"children":2037},{},[2038,2053,2068,2083,2098],{"type":28,"tag":105,"props":2039,"children":2040},{},[2041,2045,2049],{"type":28,"tag":132,"props":2042,"children":2043},{},[2044],{"type":33,"value":136},{"type":28,"tag":132,"props":2046,"children":2047},{},[2048],{"type":33,"value":141},{"type":28,"tag":132,"props":2050,"children":2051},{},[2052],{"type":33,"value":146},{"type":28,"tag":105,"props":2054,"children":2055},{},[2056,2060,2064],{"type":28,"tag":132,"props":2057,"children":2058},{},[2059],{"type":33,"value":154},{"type":28,"tag":132,"props":2061,"children":2062},{},[2063],{"type":33,"value":159},{"type":28,"tag":132,"props":2065,"children":2066},{},[2067],{"type":33,"value":164},{"type":28,"tag":105,"props":2069,"children":2070},{},[2071,2075,2079],{"type":28,"tag":132,"props":2072,"children":2073},{},[2074],{"type":33,"value":172},{"type":28,"tag":132,"props":2076,"children":2077},{},[2078],{"type":33,"value":177},{"type":28,"tag":132,"props":2080,"children":2081},{},[2082],{"type":33,"value":182},{"type":28,"tag":105,"props":2084,"children":2085},{},[2086,2090,2094],{"type":28,"tag":132,"props":2087,"children":2088},{},[2089],{"type":33,"value":190},{"type":28,"tag":132,"props":2091,"children":2092},{},[2093],{"type":33,"value":195},{"type":28,"tag":132,"props":2095,"children":2096},{},[2097],{"type":33,"value":200},{"type":28,"tag":105,"props":2099,"children":2100},{},[2101,2105,2109],{"type":28,"tag":132,"props":2102,"children":2103},{},[2104],{"type":33,"value":208},{"type":28,"tag":132,"props":2106,"children":2107},{},[2108],{"type":33,"value":213},{"type":28,"tag":132,"props":2110,"children":2111},{},[2112],{"type":33,"value":218},{"type":28,"tag":29,"props":2114,"children":2115},{},[2116],{"type":33,"value":223},{"type":28,"tag":90,"props":2118,"children":2119},{"id":226},[2120],{"type":33,"value":229},{"type":28,"tag":29,"props":2122,"children":2123},{},[2124],{"type":33,"value":234},{"type":28,"tag":236,"props":2126,"children":2127},{"id":238},[2128],{"type":33,"value":238},{"type":28,"tag":29,"props":2130,"children":2131},{},[2132],{"type":33,"value":245},{"type":28,"tag":41,"props":2134,"children":2135},{},[2136,2140,2144,2148,2152,2156],{"type":28,"tag":45,"props":2137,"children":2138},{},[2139],{"type":33,"value":253},{"type":28,"tag":45,"props":2141,"children":2142},{},[2143],{"type":33,"value":258},{"type":28,"tag":45,"props":2145,"children":2146},{},[2147],{"type":33,"value":263},{"type":28,"tag":45,"props":2149,"children":2150},{},[2151],{"type":33,"value":268},{"type":28,"tag":45,"props":2153,"children":2154},{},[2155],{"type":33,"value":273},{"type":28,"tag":45,"props":2157,"children":2158},{},[2159],{"type":33,"value":278},{"type":28,"tag":29,"props":2161,"children":2162},{},[2163],{"type":33,"value":283},{"type":28,"tag":236,"props":2165,"children":2166},{"id":286},[2167],{"type":33,"value":286},{"type":28,"tag":41,"props":2169,"children":2170},{},[2171,2175,2179],{"type":28,"tag":45,"props":2172,"children":2173},{},[2174],{"type":33,"value":296},{"type":28,"tag":45,"props":2176,"children":2177},{},[2178],{"type":33,"value":301},{"type":28,"tag":45,"props":2180,"children":2181},{},[2182],{"type":33,"value":306},{"type":28,"tag":236,"props":2184,"children":2185},{"id":309},[2186],{"type":33,"value":309},{"type":28,"tag":29,"props":2188,"children":2189},{},[2190],{"type":33,"value":316},{"type":28,"tag":90,"props":2192,"children":2193},{"id":319},[2194],{"type":33,"value":322},{"type":28,"tag":29,"props":2196,"children":2197},{},[2198],{"type":33,"value":327},{"type":28,"tag":236,"props":2200,"children":2201},{"id":330},[2202],{"type":33,"value":330},{"type":28,"tag":334,"props":2204,"children":2205},{},[2206,2210,2214],{"type":28,"tag":45,"props":2207,"children":2208},{},[2209],{"type":33,"value":341},{"type":28,"tag":45,"props":2211,"children":2212},{},[2213],{"type":33,"value":346},{"type":28,"tag":45,"props":2215,"children":2216},{},[2217],{"type":33,"value":351},{"type":28,"tag":29,"props":2219,"children":2220},{},[2221],{"type":33,"value":356},{"type":28,"tag":41,"props":2223,"children":2224},{},[2225,2229,2233],{"type":28,"tag":45,"props":2226,"children":2227},{},[2228],{"type":33,"value":364},{"type":28,"tag":45,"props":2230,"children":2231},{},[2232],{"type":33,"value":369},{"type":28,"tag":45,"props":2234,"children":2235},{},[2236],{"type":33,"value":374},{"type":28,"tag":236,"props":2238,"children":2239},{"id":377},[2240],{"type":33,"value":377},{"type":28,"tag":41,"props":2242,"children":2243},{},[2244,2248,2252],{"type":28,"tag":45,"props":2245,"children":2246},{},[2247],{"type":33,"value":387},{"type":28,"tag":45,"props":2249,"children":2250},{},[2251],{"type":33,"value":392},{"type":28,"tag":45,"props":2253,"children":2254},{},[2255],{"type":33,"value":397},{"type":28,"tag":236,"props":2257,"children":2258},{"id":400},[2259],{"type":33,"value":400},{"type":28,"tag":29,"props":2261,"children":2262},{},[2263,2264,2268],{"type":33,"value":407},{"type":28,"tag":409,"props":2265,"children":2266},{"href":411},[2267],{"type":33,"value":414},{"type":33,"value":416},{"type":28,"tag":90,"props":2270,"children":2271},{"id":419},[2272],{"type":33,"value":422},{"type":28,"tag":29,"props":2274,"children":2275},{},[2276],{"type":33,"value":427},{"type":28,"tag":236,"props":2278,"children":2279},{"id":430},[2280],{"type":33,"value":430},{"type":28,"tag":41,"props":2282,"children":2283},{},[2284,2288,2292],{"type":28,"tag":45,"props":2285,"children":2286},{},[2287],{"type":33,"value":440},{"type":28,"tag":45,"props":2289,"children":2290},{},[2291],{"type":33,"value":445},{"type":28,"tag":45,"props":2293,"children":2294},{},[2295],{"type":33,"value":450},{"type":28,"tag":29,"props":2297,"children":2298},{},[2299],{"type":33,"value":455},{"type":28,"tag":41,"props":2301,"children":2302},{},[2303,2307,2311],{"type":28,"tag":45,"props":2304,"children":2305},{},[2306],{"type":33,"value":463},{"type":28,"tag":45,"props":2308,"children":2309},{},[2310],{"type":33,"value":468},{"type":28,"tag":45,"props":2312,"children":2313},{},[2314],{"type":33,"value":473},{"type":28,"tag":236,"props":2316,"children":2317},{"id":476},[2318],{"type":33,"value":476},{"type":28,"tag":29,"props":2320,"children":2321},{},[2322],{"type":33,"value":483},{"type":28,"tag":41,"props":2324,"children":2325},{},[2326,2330,2334],{"type":28,"tag":45,"props":2327,"children":2328},{},[2329],{"type":33,"value":491},{"type":28,"tag":45,"props":2331,"children":2332},{},[2333],{"type":33,"value":496},{"type":28,"tag":45,"props":2335,"children":2336},{},[2337],{"type":33,"value":501},{"type":28,"tag":29,"props":2339,"children":2340},{},[2341],{"type":33,"value":506},{"type":28,"tag":90,"props":2343,"children":2344},{"id":509},[2345],{"type":33,"value":512},{"type":28,"tag":29,"props":2347,"children":2348},{},[2349],{"type":33,"value":517},{"type":28,"tag":41,"props":2351,"children":2352},{},[2353,2357,2361],{"type":28,"tag":45,"props":2354,"children":2355},{},[2356],{"type":33,"value":525},{"type":28,"tag":45,"props":2358,"children":2359},{},[2360],{"type":33,"value":530},{"type":28,"tag":45,"props":2362,"children":2363},{},[2364],{"type":33,"value":535},{"type":28,"tag":29,"props":2366,"children":2367},{},[2368],{"type":33,"value":540},{"type":28,"tag":41,"props":2370,"children":2371},{},[2372,2376,2380],{"type":28,"tag":45,"props":2373,"children":2374},{},[2375],{"type":33,"value":548},{"type":28,"tag":45,"props":2377,"children":2378},{},[2379],{"type":33,"value":553},{"type":28,"tag":45,"props":2381,"children":2382},{},[2383],{"type":33,"value":558},{"type":28,"tag":236,"props":2385,"children":2386},{"id":561},[2387],{"type":33,"value":561},{"type":28,"tag":29,"props":2389,"children":2390},{},[2391],{"type":33,"value":568},{"type":28,"tag":90,"props":2393,"children":2394},{"id":571},[2395],{"type":33,"value":574},{"type":28,"tag":29,"props":2397,"children":2398},{},[2399],{"type":33,"value":579},{"type":28,"tag":29,"props":2401,"children":2402},{},[2403],{"type":33,"value":584},{"type":28,"tag":41,"props":2405,"children":2406},{},[2407,2411,2415],{"type":28,"tag":45,"props":2408,"children":2409},{},[2410],{"type":33,"value":592},{"type":28,"tag":45,"props":2412,"children":2413},{},[2414],{"type":33,"value":597},{"type":28,"tag":45,"props":2416,"children":2417},{},[2418],{"type":33,"value":602},{"type":28,"tag":236,"props":2420,"children":2421},{"id":605},[2422],{"type":33,"value":605},{"type":28,"tag":29,"props":2424,"children":2425},{},[2426],{"type":33,"value":612},{"type":28,"tag":334,"props":2428,"children":2429},{},[2430,2434,2438,2442,2446],{"type":28,"tag":45,"props":2431,"children":2432},{},[2433],{"type":33,"value":620},{"type":28,"tag":45,"props":2435,"children":2436},{},[2437],{"type":33,"value":625},{"type":28,"tag":45,"props":2439,"children":2440},{},[2441],{"type":33,"value":630},{"type":28,"tag":45,"props":2443,"children":2444},{},[2445],{"type":33,"value":635},{"type":28,"tag":45,"props":2447,"children":2448},{},[2449],{"type":33,"value":640},{"type":28,"tag":29,"props":2451,"children":2452},{},[2453],{"type":33,"value":645},{"type":28,"tag":90,"props":2455,"children":2456},{"id":648},[2457],{"type":33,"value":651},{"type":28,"tag":29,"props":2459,"children":2460},{},[2461],{"type":33,"value":656},{"type":28,"tag":41,"props":2463,"children":2464},{},[2465,2469,2473,2477],{"type":28,"tag":45,"props":2466,"children":2467},{},[2468],{"type":33,"value":664},{"type":28,"tag":45,"props":2470,"children":2471},{},[2472],{"type":33,"value":669},{"type":28,"tag":45,"props":2474,"children":2475},{},[2476],{"type":33,"value":674},{"type":28,"tag":45,"props":2478,"children":2479},{},[2480],{"type":33,"value":679},{"type":28,"tag":236,"props":2482,"children":2483},{"id":682},[2484],{"type":33,"value":682},{"type":28,"tag":41,"props":2486,"children":2487},{},[2488,2492,2496],{"type":28,"tag":45,"props":2489,"children":2490},{},[2491],{"type":33,"value":692},{"type":28,"tag":45,"props":2493,"children":2494},{},[2495],{"type":33,"value":697},{"type":28,"tag":45,"props":2497,"children":2498},{},[2499],{"type":33,"value":702},{"type":28,"tag":236,"props":2501,"children":2502},{"id":705},[2503],{"type":33,"value":705},{"type":28,"tag":29,"props":2505,"children":2506},{},[2507],{"type":33,"value":712},{"type":28,"tag":41,"props":2509,"children":2510},{},[2511,2515,2519],{"type":28,"tag":45,"props":2512,"children":2513},{},[2514],{"type":33,"value":720},{"type":28,"tag":45,"props":2516,"children":2517},{},[2518],{"type":33,"value":725},{"type":28,"tag":45,"props":2520,"children":2521},{},[2522],{"type":33,"value":730},{"type":28,"tag":29,"props":2524,"children":2525},{},[2526],{"type":33,"value":735},{"type":28,"tag":236,"props":2528,"children":2529},{"id":738},[2530],{"type":33,"value":738},{"type":28,"tag":29,"props":2532,"children":2533},{},[2534],{"type":33,"value":745},{"type":28,"tag":334,"props":2536,"children":2537},{},[2538,2542,2546,2550],{"type":28,"tag":45,"props":2539,"children":2540},{},[2541],{"type":33,"value":753},{"type":28,"tag":45,"props":2543,"children":2544},{},[2545],{"type":33,"value":758},{"type":28,"tag":45,"props":2547,"children":2548},{},[2549],{"type":33,"value":763},{"type":28,"tag":45,"props":2551,"children":2552},{},[2553],{"type":33,"value":768},{"type":28,"tag":90,"props":2555,"children":2556},{"id":771},[2557],{"type":33,"value":774},{"type":28,"tag":29,"props":2559,"children":2560},{},[2561],{"type":33,"value":779},{"type":28,"tag":41,"props":2563,"children":2564},{},[2565,2569,2573,2577],{"type":28,"tag":45,"props":2566,"children":2567},{},[2568],{"type":33,"value":787},{"type":28,"tag":45,"props":2570,"children":2571},{},[2572],{"type":33,"value":792},{"type":28,"tag":45,"props":2574,"children":2575},{},[2576],{"type":33,"value":797},{"type":28,"tag":45,"props":2578,"children":2579},{},[2580],{"type":33,"value":802},{"type":28,"tag":29,"props":2582,"children":2583},{},[2584],{"type":33,"value":807},{"type":28,"tag":41,"props":2586,"children":2587},{},[2588,2592,2596],{"type":28,"tag":45,"props":2589,"children":2590},{},[2591],{"type":33,"value":815},{"type":28,"tag":45,"props":2593,"children":2594},{},[2595],{"type":33,"value":820},{"type":28,"tag":45,"props":2597,"children":2598},{},[2599],{"type":33,"value":825},{"type":28,"tag":29,"props":2601,"children":2602},{},[2603],{"type":33,"value":830},{"type":28,"tag":334,"props":2605,"children":2606},{},[2607,2611,2615],{"type":28,"tag":45,"props":2608,"children":2609},{},[2610],{"type":33,"value":838},{"type":28,"tag":45,"props":2612,"children":2613},{},[2614],{"type":33,"value":843},{"type":28,"tag":45,"props":2616,"children":2617},{},[2618],{"type":33,"value":848},{"type":28,"tag":90,"props":2620,"children":2621},{"id":851},[2622],{"type":33,"value":854},{"type":28,"tag":41,"props":2624,"children":2626},{"className":2625},[858],[2627,2635,2643,2651,2659,2667,2675],{"type":28,"tag":45,"props":2628,"children":2630},{"className":2629},[863],[2631,2634],{"type":28,"tag":866,"props":2632,"children":2633},{"disabled":868,"type":869},[],{"type":33,"value":872},{"type":28,"tag":45,"props":2636,"children":2638},{"className":2637},[863],[2639,2642],{"type":28,"tag":866,"props":2640,"children":2641},{"disabled":868,"type":869},[],{"type":33,"value":881},{"type":28,"tag":45,"props":2644,"children":2646},{"className":2645},[863],[2647,2650],{"type":28,"tag":866,"props":2648,"children":2649},{"disabled":868,"type":869},[],{"type":33,"value":890},{"type":28,"tag":45,"props":2652,"children":2654},{"className":2653},[863],[2655,2658],{"type":28,"tag":866,"props":2656,"children":2657},{"disabled":868,"type":869},[],{"type":33,"value":899},{"type":28,"tag":45,"props":2660,"children":2662},{"className":2661},[863],[2663,2666],{"type":28,"tag":866,"props":2664,"children":2665},{"disabled":868,"type":869},[],{"type":33,"value":908},{"type":28,"tag":45,"props":2668,"children":2670},{"className":2669},[863],[2671,2674],{"type":28,"tag":866,"props":2672,"children":2673},{"disabled":868,"type":869},[],{"type":33,"value":917},{"type":28,"tag":45,"props":2676,"children":2678},{"className":2677},[863],[2679,2682],{"type":28,"tag":866,"props":2680,"children":2681},{"disabled":868,"type":869},[],{"type":33,"value":926},{"type":28,"tag":90,"props":2684,"children":2685},{"id":929},[2686],{"type":33,"value":929},{"type":28,"tag":29,"props":2688,"children":2689},{},[2690],{"type":33,"value":936},{"type":28,"tag":29,"props":2692,"children":2693},{},[2694],{"type":33,"value":941},{"type":28,"tag":29,"props":2696,"children":2697},{},[2698],{"type":33,"value":946},{"type":28,"tag":41,"props":2700,"children":2701},{},[2702,2709,2716,2723],{"type":28,"tag":45,"props":2703,"children":2704},{},[2705],{"type":28,"tag":409,"props":2706,"children":2707},{"href":955},[2708],{"type":33,"value":958},{"type":28,"tag":45,"props":2710,"children":2711},{},[2712],{"type":28,"tag":409,"props":2713,"children":2714},{"href":964},[2715],{"type":33,"value":967},{"type":28,"tag":45,"props":2717,"children":2718},{},[2719],{"type":28,"tag":409,"props":2720,"children":2721},{"href":973},[2722],{"type":33,"value":976},{"type":28,"tag":45,"props":2724,"children":2725},{},[2726],{"type":28,"tag":409,"props":2727,"children":2728},{"href":982},[2729],{"type":33,"value":985},{"title":7,"searchDepth":987,"depth":987,"links":2731},[2732,2733,2738,2743,2747,2750,2753,2758,2759,2760],{"id":92,"depth":990,"text":95},{"id":226,"depth":990,"text":229,"children":2734},[2735,2736,2737],{"id":238,"depth":987,"text":238},{"id":286,"depth":987,"text":286},{"id":309,"depth":987,"text":309},{"id":319,"depth":990,"text":322,"children":2739},[2740,2741,2742],{"id":330,"depth":987,"text":330},{"id":377,"depth":987,"text":377},{"id":400,"depth":987,"text":400},{"id":419,"depth":990,"text":422,"children":2744},[2745,2746],{"id":430,"depth":987,"text":430},{"id":476,"depth":987,"text":476},{"id":509,"depth":990,"text":512,"children":2748},[2749],{"id":561,"depth":987,"text":561},{"id":571,"depth":990,"text":574,"children":2751},[2752],{"id":605,"depth":987,"text":605},{"id":648,"depth":990,"text":651,"children":2754},[2755,2756,2757],{"id":682,"depth":987,"text":682},{"id":705,"depth":987,"text":705},{"id":738,"depth":987,"text":738},{"id":771,"depth":990,"text":774},{"id":851,"depth":990,"text":854},{"id":929,"depth":990,"text":929},1778574590311]