[{"data":1,"prerenderedAt":2759},["ShallowReactive",2],{"article-/topics/design/atmosphere-web-design-for-cultural-content":3,"related-design":1023,"content-query-DaNeFARqM7":1958},{"_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":1017,"_id":1018,"_source":1019,"_file":1020,"_stem":1021,"_extension":1022},"/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":984},"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/web-design-10-rules-for-beginners",[975],{"type":33,"value":976},"新手网页设计 10 条规则：从“能看”到“能转化”",{"type":28,"tag":45,"props":978,"children":979},{},[980],{"type":28,"tag":409,"props":981,"children":982},{"href":411},[983],{"type":33,"value":414},{"title":7,"searchDepth":985,"depth":985,"links":986},3,[987,989,994,999,1003,1006,1009,1014,1015,1016],{"id":92,"depth":988,"text":95},2,{"id":226,"depth":988,"text":229,"children":990},[991,992,993],{"id":238,"depth":985,"text":238},{"id":286,"depth":985,"text":286},{"id":309,"depth":985,"text":309},{"id":319,"depth":988,"text":322,"children":995},[996,997,998],{"id":330,"depth":985,"text":330},{"id":377,"depth":985,"text":377},{"id":400,"depth":985,"text":400},{"id":419,"depth":988,"text":422,"children":1000},[1001,1002],{"id":430,"depth":985,"text":430},{"id":476,"depth":985,"text":476},{"id":509,"depth":988,"text":512,"children":1004},[1005],{"id":561,"depth":985,"text":561},{"id":571,"depth":988,"text":574,"children":1007},[1008],{"id":605,"depth":985,"text":605},{"id":648,"depth":988,"text":651,"children":1010},[1011,1012,1013],{"id":682,"depth":985,"text":682},{"id":705,"depth":985,"text":705},{"id":738,"depth":985,"text":738},{"id":771,"depth":988,"text":774},{"id":851,"depth":988,"text":854},{"id":929,"depth":988,"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",[1024,1377,1679],{"_path":1025,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1026,"description":1027,"keywords":1028,"image":1034,"author":11,"date":1035,"readingTime":1036,"topic":5,"body":1037,"_type":1017,"_id":1374,"_source":1019,"_file":1375,"_stem":1376,"_extension":1022},"/topics/design/button-component-design","按钮组件设计详解","学习按钮样式、交互状态、无障碍性和最佳实践",[1029,1030,1031,1032,1033],"按钮设计","Button Component","交互状态","UI 组件","用户体验","/images/topics/button-design.jpg","2025-12-08",18,{"type":25,"children":1038,"toc":1356},[1039,1043,1048,1053,1059,1072,1078,1087,1093,1102,1106,1112,1123,1129,1138,1144,1153,1158,1167,1172,1183,1188,1197,1202,1214,1248,1259,1302,1307],{"type":28,"tag":90,"props":1040,"children":1041},{"id":1026},[1042],{"type":33,"value":1026},{"type":28,"tag":29,"props":1044,"children":1045},{},[1046],{"type":33,"value":1047},"按钮是 UI 中最重要的交互元素。优秀的按钮设计能够指导用户行为。",{"type":28,"tag":90,"props":1049,"children":1051},{"id":1050},"按钮类型",[1052],{"type":33,"value":1050},{"type":28,"tag":236,"props":1054,"children":1056},{"id":1055},"primary-button主按钮",[1057],{"type":33,"value":1058},"Primary Button（主按钮）",{"type":28,"tag":1060,"props":1061,"children":1066},"pre",{"className":1062,"code":1064,"language":1065,"meta":7},[1063],"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",[1067],{"type":28,"tag":1068,"props":1069,"children":1070},"code",{"__ignoreMap":7},[1071],{"type":33,"value":1064},{"type":28,"tag":236,"props":1073,"children":1075},{"id":1074},"secondary-button次按钮",[1076],{"type":33,"value":1077},"Secondary Button（次按钮）",{"type":28,"tag":1060,"props":1079,"children":1082},{"className":1080,"code":1081,"language":1065,"meta":7},[1063],".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",[1083],{"type":28,"tag":1068,"props":1084,"children":1085},{"__ignoreMap":7},[1086],{"type":33,"value":1081},{"type":28,"tag":236,"props":1088,"children":1090},{"id":1089},"danger-button危险按钮",[1091],{"type":33,"value":1092},"Danger Button（危险按钮）",{"type":28,"tag":1060,"props":1094,"children":1097},{"className":1095,"code":1096,"language":1065,"meta":7},[1063],".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",[1098],{"type":28,"tag":1068,"props":1099,"children":1100},{"__ignoreMap":7},[1101],{"type":33,"value":1096},{"type":28,"tag":90,"props":1103,"children":1104},{"id":1031},[1105],{"type":33,"value":1031},{"type":28,"tag":236,"props":1107,"children":1109},{"id":1108},"loading-状态",[1110],{"type":33,"value":1111},"Loading 状态",{"type":28,"tag":1060,"props":1113,"children":1118},{"className":1114,"code":1116,"language":1117,"meta":7},[1115],"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",[1119],{"type":28,"tag":1068,"props":1120,"children":1121},{"__ignoreMap":7},[1122],{"type":33,"value":1116},{"type":28,"tag":236,"props":1124,"children":1126},{"id":1125},"disabled-状态",[1127],{"type":33,"value":1128},"Disabled 状态",{"type":28,"tag":1060,"props":1130,"children":1133},{"className":1131,"code":1132,"language":1065,"meta":7},[1063],".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",[1134],{"type":28,"tag":1068,"props":1135,"children":1136},{"__ignoreMap":7},[1137],{"type":33,"value":1132},{"type":28,"tag":236,"props":1139,"children":1141},{"id":1140},"focus-状态",[1142],{"type":33,"value":1143},"Focus 状态",{"type":28,"tag":1060,"props":1145,"children":1148},{"className":1146,"code":1147,"language":1065,"meta":7},[1063],".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",[1149],{"type":28,"tag":1068,"props":1150,"children":1151},{"__ignoreMap":7},[1152],{"type":33,"value":1147},{"type":28,"tag":90,"props":1154,"children":1156},{"id":1155},"按钮大小",[1157],{"type":33,"value":1155},{"type":28,"tag":1060,"props":1159,"children":1162},{"className":1160,"code":1161,"language":1065,"meta":7},[1063],"/* 小按钮 */\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",[1163],{"type":28,"tag":1068,"props":1164,"children":1165},{"__ignoreMap":7},[1166],{"type":33,"value":1161},{"type":28,"tag":90,"props":1168,"children":1170},{"id":1169},"无障碍性",[1171],{"type":33,"value":1169},{"type":28,"tag":1060,"props":1173,"children":1178},{"className":1174,"code":1176,"language":1177,"meta":7},[1175],"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",[1179],{"type":28,"tag":1068,"props":1180,"children":1181},{"__ignoreMap":7},[1182],{"type":33,"value":1176},{"type":28,"tag":90,"props":1184,"children":1186},{"id":1185},"完整组件示例",[1187],{"type":33,"value":1185},{"type":28,"tag":1060,"props":1189,"children":1192},{"className":1190,"code":1191,"language":1117,"meta":7},[1115],"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",[1193],{"type":28,"tag":1068,"props":1194,"children":1195},{"__ignoreMap":7},[1196],{"type":33,"value":1191},{"type":28,"tag":90,"props":1198,"children":1200},{"id":1199},"最佳实践",[1201],{"type":33,"value":1199},{"type":28,"tag":29,"props":1203,"children":1204},{},[1205,1207,1212],{"type":33,"value":1206},"✅ ",{"type":28,"tag":84,"props":1208,"children":1209},{},[1210],{"type":33,"value":1211},"应该做的事",{"type":33,"value":1213},":",{"type":28,"tag":41,"props":1215,"children":1216},{},[1217,1222,1227,1238,1243],{"type":28,"tag":45,"props":1218,"children":1219},{},[1220],{"type":33,"value":1221},"最小触摸目标 44x44px",{"type":28,"tag":45,"props":1223,"children":1224},{},[1225],{"type":33,"value":1226},"清晰的视觉反馈",{"type":28,"tag":45,"props":1228,"children":1229},{},[1230,1232],{"type":33,"value":1231},"使用语义 HTML ",{"type":28,"tag":1068,"props":1233,"children":1235},{"className":1234},[],[1236],{"type":33,"value":1237},"\u003Cbutton>",{"type":28,"tag":45,"props":1239,"children":1240},{},[1241],{"type":33,"value":1242},"提供加载状态反馈",{"type":28,"tag":45,"props":1244,"children":1245},{},[1246],{"type":33,"value":1247},"支持键盘导航",{"type":28,"tag":29,"props":1249,"children":1250},{},[1251,1253,1258],{"type":33,"value":1252},"❌ ",{"type":28,"tag":84,"props":1254,"children":1255},{},[1256],{"type":33,"value":1257},"不应该做的事",{"type":33,"value":1213},{"type":28,"tag":41,"props":1260,"children":1261},{},[1262,1275,1280,1285,1290],{"type":28,"tag":45,"props":1263,"children":1264},{},[1265,1267,1273],{"type":33,"value":1266},"使用 ",{"type":28,"tag":1068,"props":1268,"children":1270},{"className":1269},[],[1271],{"type":33,"value":1272},"\u003Cdiv>",{"type":33,"value":1274}," 模拟按钮",{"type":28,"tag":45,"props":1276,"children":1277},{},[1278],{"type":33,"value":1279},"隐藏焦点指示器",{"type":28,"tag":45,"props":1281,"children":1282},{},[1283],{"type":33,"value":1284},"过多的按钮样式",{"type":28,"tag":45,"props":1286,"children":1287},{},[1288],{"type":33,"value":1289},"忽视禁用状态",{"type":28,"tag":45,"props":1291,"children":1292},{},[1293,1294,1300],{"type":33,"value":1266},{"type":28,"tag":1068,"props":1295,"children":1297},{"className":1296},[],[1298],{"type":33,"value":1299},"\u003Ca>",{"type":33,"value":1301}," 代替按钮",{"type":28,"tag":90,"props":1303,"children":1305},{"id":1304},"测试清单",[1306],{"type":33,"value":1304},{"type":28,"tag":41,"props":1308,"children":1310},{"className":1309},[858],[1311,1320,1329,1338,1347],{"type":28,"tag":45,"props":1312,"children":1314},{"className":1313},[863],[1315,1318],{"type":28,"tag":866,"props":1316,"children":1317},{"disabled":868,"type":869},[],{"type":33,"value":1319}," 在各种浏览器中测试",{"type":28,"tag":45,"props":1321,"children":1323},{"className":1322},[863],[1324,1327],{"type":28,"tag":866,"props":1325,"children":1326},{"disabled":868,"type":869},[],{"type":33,"value":1328}," 验证键盘导航",{"type":28,"tag":45,"props":1330,"children":1332},{"className":1331},[863],[1333,1336],{"type":28,"tag":866,"props":1334,"children":1335},{"disabled":868,"type":869},[],{"type":33,"value":1337}," 检查色彩对比度",{"type":28,"tag":45,"props":1339,"children":1341},{"className":1340},[863],[1342,1345],{"type":28,"tag":866,"props":1343,"children":1344},{"disabled":868,"type":869},[],{"type":33,"value":1346}," 测试触摸设备",{"type":28,"tag":45,"props":1348,"children":1350},{"className":1349},[863],[1351,1354],{"type":28,"tag":866,"props":1352,"children":1353},{"disabled":868,"type":869},[],{"type":33,"value":1355}," 屏幕阅读器兼容性",{"title":7,"searchDepth":985,"depth":985,"links":1357},[1358,1359,1364,1369,1370,1371,1372,1373],{"id":1026,"depth":988,"text":1026},{"id":1050,"depth":988,"text":1050,"children":1360},[1361,1362,1363],{"id":1055,"depth":985,"text":1058},{"id":1074,"depth":985,"text":1077},{"id":1089,"depth":985,"text":1092},{"id":1031,"depth":988,"text":1031,"children":1365},[1366,1367,1368],{"id":1108,"depth":985,"text":1111},{"id":1125,"depth":985,"text":1128},{"id":1140,"depth":985,"text":1143},{"id":1155,"depth":988,"text":1155},{"id":1169,"depth":988,"text":1169},{"id":1185,"depth":988,"text":1185},{"id":1199,"depth":988,"text":1199},{"id":1304,"depth":988,"text":1304},"content:topics:design:button-component-design.md","topics/design/button-component-design.md","topics/design/button-component-design",{"_path":1378,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1379,"description":1380,"keywords":1381,"image":1386,"author":11,"date":1035,"readingTime":1387,"topic":5,"body":1388,"_type":1017,"_id":1676,"_source":1019,"_file":1677,"_stem":1678,"_extension":1022},"/topics/design/dark-mode-design","暗黑模式设计完整方案","学习暗黑模式实现、色彩方案、对比度管理和最佳实践",[1382,1383,1384,1385,1033],"暗黑模式","Dark Mode","色彩系统","CSS 变量","/images/topics/dark-mode-design.jpg",20,{"type":25,"children":1389,"toc":1659},[1390,1394,1399,1404,1410,1419,1425,1434,1439,1445,1454,1460,1471,1477,1486,1491,1500,1505,1514,1519,1528,1532,1541,1569,1578,1606,1610],{"type":28,"tag":90,"props":1391,"children":1392},{"id":1379},[1393],{"type":33,"value":1379},{"type":28,"tag":29,"props":1395,"children":1396},{},[1397],{"type":33,"value":1398},"暗黑模式已成为现代应用的标准功能。它能够减少眼睛疲劳、节省电池、改善用户体验。",{"type":28,"tag":90,"props":1400,"children":1402},{"id":1401},"核心色彩系统",[1403],{"type":33,"value":1401},{"type":28,"tag":236,"props":1405,"children":1407},{"id":1406},"light-mode-配色",[1408],{"type":33,"value":1409},"Light Mode 配色",{"type":28,"tag":1060,"props":1411,"children":1414},{"className":1412,"code":1413,"language":1065,"meta":7},[1063],":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",[1415],{"type":28,"tag":1068,"props":1416,"children":1417},{"__ignoreMap":7},[1418],{"type":33,"value":1413},{"type":28,"tag":236,"props":1420,"children":1422},{"id":1421},"dark-mode-配色",[1423],{"type":33,"value":1424},"Dark Mode 配色",{"type":28,"tag":1060,"props":1426,"children":1429},{"className":1427,"code":1428,"language":1065,"meta":7},[1063],"@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",[1430],{"type":28,"tag":1068,"props":1431,"children":1432},{"__ignoreMap":7},[1433],{"type":33,"value":1428},{"type":28,"tag":90,"props":1435,"children":1437},{"id":1436},"实现方案",[1438],{"type":33,"value":1436},{"type":28,"tag":236,"props":1440,"children":1442},{"id":1441},"方案-1prefers-color-scheme",[1443],{"type":33,"value":1444},"方案 1：prefers-color-scheme",{"type":28,"tag":1060,"props":1446,"children":1449},{"className":1447,"code":1448,"language":1065,"meta":7},[1063],"/* 自动跟随系统设置 */\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",[1450],{"type":28,"tag":1068,"props":1451,"children":1452},{"__ignoreMap":7},[1453],{"type":33,"value":1448},{"type":28,"tag":236,"props":1455,"children":1457},{"id":1456},"方案-2javascript-切换",[1458],{"type":33,"value":1459},"方案 2：JavaScript 切换",{"type":28,"tag":1060,"props":1461,"children":1466},{"className":1462,"code":1464,"language":1465,"meta":7},[1463],"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",[1467],{"type":28,"tag":1068,"props":1468,"children":1469},{"__ignoreMap":7},[1470],{"type":33,"value":1464},{"type":28,"tag":236,"props":1472,"children":1474},{"id":1473},"方案-3css-variables-javascript",[1475],{"type":33,"value":1476},"方案 3：CSS Variables + JavaScript",{"type":28,"tag":1060,"props":1478,"children":1481},{"className":1479,"code":1480,"language":1465,"meta":7},[1463],"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",[1482],{"type":28,"tag":1068,"props":1483,"children":1484},{"__ignoreMap":7},[1485],{"type":33,"value":1480},{"type":28,"tag":90,"props":1487,"children":1489},{"id":1488},"对比度管理",[1490],{"type":33,"value":1488},{"type":28,"tag":1060,"props":1492,"children":1495},{"className":1493,"code":1494,"language":1065,"meta":7},[1063],"/* 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",[1496],{"type":28,"tag":1068,"props":1497,"children":1498},{"__ignoreMap":7},[1499],{"type":33,"value":1494},{"type":28,"tag":90,"props":1501,"children":1503},{"id":1502},"图片和图表处理",[1504],{"type":33,"value":1502},{"type":28,"tag":1060,"props":1506,"children":1509},{"className":1507,"code":1508,"language":1177,"meta":7},[1175],"\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",[1510],{"type":28,"tag":1068,"props":1511,"children":1512},{"__ignoreMap":7},[1513],{"type":33,"value":1508},{"type":28,"tag":90,"props":1515,"children":1517},{"id":1516},"完整示例",[1518],{"type":33,"value":1516},{"type":28,"tag":1060,"props":1520,"children":1523},{"className":1521,"code":1522,"language":1117,"meta":7},[1115],"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",[1524],{"type":28,"tag":1068,"props":1525,"children":1526},{"__ignoreMap":7},[1527],{"type":33,"value":1522},{"type":28,"tag":90,"props":1529,"children":1530},{"id":1199},[1531],{"type":33,"value":1199},{"type":28,"tag":29,"props":1533,"children":1534},{},[1535,1536,1540],{"type":33,"value":1206},{"type":28,"tag":84,"props":1537,"children":1538},{},[1539],{"type":33,"value":1211},{"type":33,"value":1213},{"type":28,"tag":41,"props":1542,"children":1543},{},[1544,1549,1554,1559,1564],{"type":28,"tag":45,"props":1545,"children":1546},{},[1547],{"type":33,"value":1548},"支持系统偏好",{"type":28,"tag":45,"props":1550,"children":1551},{},[1552],{"type":33,"value":1553},"提供手动切换选项",{"type":28,"tag":45,"props":1555,"children":1556},{},[1557],{"type":33,"value":1558},"确保足够的对比度",{"type":28,"tag":45,"props":1560,"children":1561},{},[1562],{"type":33,"value":1563},"优化图片和图表",{"type":28,"tag":45,"props":1565,"children":1566},{},[1567],{"type":33,"value":1568},"防止加载闪烁",{"type":28,"tag":29,"props":1570,"children":1571},{},[1572,1573,1577],{"type":33,"value":1252},{"type":28,"tag":84,"props":1574,"children":1575},{},[1576],{"type":33,"value":1257},{"type":33,"value":1213},{"type":28,"tag":41,"props":1579,"children":1580},{},[1581,1586,1591,1596,1601],{"type":28,"tag":45,"props":1582,"children":1583},{},[1584],{"type":33,"value":1585},"强制单一模式",{"type":28,"tag":45,"props":1587,"children":1588},{},[1589],{"type":33,"value":1590},"忽视性能影响",{"type":28,"tag":45,"props":1592,"children":1593},{},[1594],{"type":33,"value":1595},"使用相同的颜色",{"type":28,"tag":45,"props":1597,"children":1598},{},[1599],{"type":33,"value":1600},"忘记保存用户偏好",{"type":28,"tag":45,"props":1602,"children":1603},{},[1604],{"type":33,"value":1605},"过度使用深色背景",{"type":28,"tag":90,"props":1607,"children":1608},{"id":1304},[1609],{"type":33,"value":1304},{"type":28,"tag":41,"props":1611,"children":1613},{"className":1612},[858],[1614,1623,1632,1641,1650],{"type":28,"tag":45,"props":1615,"children":1617},{"className":1616},[863],[1618,1621],{"type":28,"tag":866,"props":1619,"children":1620},{"disabled":868,"type":869},[],{"type":33,"value":1622}," 在浅色和深色模式下测试所有页面",{"type":28,"tag":45,"props":1624,"children":1626},{"className":1625},[863],[1627,1630],{"type":28,"tag":866,"props":1628,"children":1629},{"disabled":868,"type":869},[],{"type":33,"value":1631}," 检查颜色对比度符合 WCAG 标准",{"type":28,"tag":45,"props":1633,"children":1635},{"className":1634},[863],[1636,1639],{"type":28,"tag":866,"props":1637,"children":1638},{"disabled":868,"type":869},[],{"type":33,"value":1640}," 验证图片和图表在两种模式下清晰",{"type":28,"tag":45,"props":1642,"children":1644},{"className":1643},[863],[1645,1648],{"type":28,"tag":866,"props":1646,"children":1647},{"disabled":868,"type":869},[],{"type":33,"value":1649}," 测试主题切换的平滑性",{"type":28,"tag":45,"props":1651,"children":1653},{"className":1652},[863],[1654,1657],{"type":28,"tag":866,"props":1655,"children":1656},{"disabled":868,"type":869},[],{"type":33,"value":1658}," 检查用户偏好是否被保存",{"title":7,"searchDepth":985,"depth":985,"links":1660},[1661,1662,1666,1671,1672,1673,1674,1675],{"id":1379,"depth":988,"text":1379},{"id":1401,"depth":988,"text":1401,"children":1663},[1664,1665],{"id":1406,"depth":985,"text":1409},{"id":1421,"depth":985,"text":1424},{"id":1436,"depth":988,"text":1436,"children":1667},[1668,1669,1670],{"id":1441,"depth":985,"text":1444},{"id":1456,"depth":985,"text":1459},{"id":1473,"depth":985,"text":1476},{"id":1488,"depth":988,"text":1488},{"id":1502,"depth":988,"text":1502},{"id":1516,"depth":988,"text":1516},{"id":1199,"depth":988,"text":1199},{"id":1304,"depth":988,"text":1304},"content:topics:design:dark-mode-design.md","topics/design/dark-mode-design.md","topics/design/dark-mode-design",{"_path":1680,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1681,"description":1682,"keywords":1683,"image":1688,"author":1689,"date":1035,"readingTime":1387,"topic":5,"body":1690,"_type":1017,"_id":1955,"_source":1019,"_file":1956,"_stem":1957,"_extension":1022},"/topics/design/form-controls-design","表单控件设计规范","学习输入框、选择框、复选框等表单控件的设计和实现",[1684,1685,1686,1687,1033],"表单设计","Form Controls","输入框","验证反馈","/images/topics/form-controls-design.jpg","AI Content Team",{"type":25,"children":1691,"toc":1941},[1692,1696,1701,1706,1711,1720,1725,1734,1738,1747,1752,1761,1766,1775,1780,1789,1794,1803,1807,1816,1842,1851,1879,1883],{"type":28,"tag":90,"props":1693,"children":1694},{"id":1681},[1695],{"type":33,"value":1681},{"type":28,"tag":29,"props":1697,"children":1698},{},[1699],{"type":33,"value":1700},"优秀的表单设计能够提高用户完成率和满意度。",{"type":28,"tag":90,"props":1702,"children":1704},{"id":1703},"输入框设计",[1705],{"type":33,"value":1703},{"type":28,"tag":236,"props":1707,"children":1709},{"id":1708},"基础文本输入",[1710],{"type":33,"value":1708},{"type":28,"tag":1060,"props":1712,"children":1715},{"className":1713,"code":1714,"language":1065,"meta":7},[1063],".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",[1716],{"type":28,"tag":1068,"props":1717,"children":1718},{"__ignoreMap":7},[1719],{"type":33,"value":1714},{"type":28,"tag":236,"props":1721,"children":1723},{"id":1722},"标签和提示",[1724],{"type":33,"value":1722},{"type":28,"tag":1060,"props":1726,"children":1729},{"className":1727,"code":1728,"language":1177,"meta":7},[1175],"\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",[1730],{"type":28,"tag":1068,"props":1731,"children":1732},{"__ignoreMap":7},[1733],{"type":33,"value":1728},{"type":28,"tag":90,"props":1735,"children":1736},{"id":1687},[1737],{"type":33,"value":1687},{"type":28,"tag":1060,"props":1739,"children":1742},{"className":1740,"code":1741,"language":1117,"meta":7},[1115],"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",[1743],{"type":28,"tag":1068,"props":1744,"children":1745},{"__ignoreMap":7},[1746],{"type":33,"value":1741},{"type":28,"tag":90,"props":1748,"children":1750},{"id":1749},"选择框设计",[1751],{"type":33,"value":1749},{"type":28,"tag":1060,"props":1753,"children":1756},{"className":1754,"code":1755,"language":1065,"meta":7},[1063],".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",[1757],{"type":28,"tag":1068,"props":1758,"children":1759},{"__ignoreMap":7},[1760],{"type":33,"value":1755},{"type":28,"tag":90,"props":1762,"children":1764},{"id":1763},"复选框和单选按钮",[1765],{"type":33,"value":1763},{"type":28,"tag":1060,"props":1767,"children":1770},{"className":1768,"code":1769,"language":1065,"meta":7},[1063],".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",[1771],{"type":28,"tag":1068,"props":1772,"children":1773},{"__ignoreMap":7},[1774],{"type":33,"value":1769},{"type":28,"tag":90,"props":1776,"children":1778},{"id":1777},"文本区域",[1779],{"type":33,"value":1777},{"type":28,"tag":1060,"props":1781,"children":1784},{"className":1782,"code":1783,"language":1065,"meta":7},[1063],".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",[1785],{"type":28,"tag":1068,"props":1786,"children":1787},{"__ignoreMap":7},[1788],{"type":33,"value":1783},{"type":28,"tag":90,"props":1790,"children":1792},{"id":1791},"完整表单示例",[1793],{"type":33,"value":1791},{"type":28,"tag":1060,"props":1795,"children":1798},{"className":1796,"code":1797,"language":1117,"meta":7},[1115],"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",[1799],{"type":28,"tag":1068,"props":1800,"children":1801},{"__ignoreMap":7},[1802],{"type":33,"value":1797},{"type":28,"tag":90,"props":1804,"children":1805},{"id":1199},[1806],{"type":33,"value":1199},{"type":28,"tag":29,"props":1808,"children":1809},{},[1810,1811,1815],{"type":33,"value":1206},{"type":28,"tag":84,"props":1812,"children":1813},{},[1814],{"type":33,"value":1211},{"type":33,"value":1213},{"type":28,"tag":41,"props":1817,"children":1818},{},[1819,1824,1829,1834,1838],{"type":28,"tag":45,"props":1820,"children":1821},{},[1822],{"type":33,"value":1823},"使用正确的输入类型",{"type":28,"tag":45,"props":1825,"children":1826},{},[1827],{"type":33,"value":1828},"提供实时验证反馈",{"type":28,"tag":45,"props":1830,"children":1831},{},[1832],{"type":33,"value":1833},"清晰的标签和提示",{"type":28,"tag":45,"props":1835,"children":1836},{},[1837],{"type":33,"value":1221},{"type":28,"tag":45,"props":1839,"children":1840},{},[1841],{"type":33,"value":1247},{"type":28,"tag":29,"props":1843,"children":1844},{},[1845,1846,1850],{"type":33,"value":1252},{"type":28,"tag":84,"props":1847,"children":1848},{},[1849],{"type":33,"value":1257},{"type":33,"value":1213},{"type":28,"tag":41,"props":1852,"children":1853},{},[1854,1859,1864,1869,1874],{"type":28,"tag":45,"props":1855,"children":1856},{},[1857],{"type":33,"value":1858},"隐藏标签",{"type":28,"tag":45,"props":1860,"children":1861},{},[1862],{"type":33,"value":1863},"过度使用占位符",{"type":28,"tag":45,"props":1865,"children":1866},{},[1867],{"type":33,"value":1868},"验证后立即提交",{"type":28,"tag":45,"props":1870,"children":1871},{},[1872],{"type":33,"value":1873},"忽视无障碍性",{"type":28,"tag":45,"props":1875,"children":1876},{},[1877],{"type":33,"value":1878},"复杂的验证规则",{"type":28,"tag":90,"props":1880,"children":1881},{"id":1304},[1882],{"type":33,"value":1304},{"type":28,"tag":41,"props":1884,"children":1886},{"className":1885},[858],[1887,1896,1905,1914,1923,1932],{"type":28,"tag":45,"props":1888,"children":1890},{"className":1889},[863],[1891,1894],{"type":28,"tag":866,"props":1892,"children":1893},{"disabled":868,"type":869},[],{"type":33,"value":1895}," 所有控件都可用键盘导航",{"type":28,"tag":45,"props":1897,"children":1899},{"className":1898},[863],[1900,1903],{"type":28,"tag":866,"props":1901,"children":1902},{"disabled":868,"type":869},[],{"type":33,"value":1904}," 标签与输入框关联",{"type":28,"tag":45,"props":1906,"children":1908},{"className":1907},[863],[1909,1912],{"type":28,"tag":866,"props":1910,"children":1911},{"disabled":868,"type":869},[],{"type":33,"value":1913}," 验证消息清晰",{"type":28,"tag":45,"props":1915,"children":1917},{"className":1916},[863],[1918,1921],{"type":28,"tag":866,"props":1919,"children":1920},{"disabled":868,"type":869},[],{"type":33,"value":1922}," 色彩对比度足够",{"type":28,"tag":45,"props":1924,"children":1926},{"className":1925},[863],[1927,1930],{"type":28,"tag":866,"props":1928,"children":1929},{"disabled":868,"type":869},[],{"type":33,"value":1931}," 屏幕阅读器兼容",{"type":28,"tag":45,"props":1933,"children":1935},{"className":1934},[863],[1936,1939],{"type":28,"tag":866,"props":1937,"children":1938},{"disabled":868,"type":869},[],{"type":33,"value":1940}," 移动设备测试",{"title":7,"searchDepth":985,"depth":985,"links":1942},[1943,1944,1948,1949,1950,1951,1952,1953,1954],{"id":1681,"depth":988,"text":1681},{"id":1703,"depth":988,"text":1703,"children":1945},[1946,1947],{"id":1708,"depth":985,"text":1708},{"id":1722,"depth":985,"text":1722},{"id":1687,"depth":988,"text":1687},{"id":1749,"depth":988,"text":1749},{"id":1763,"depth":988,"text":1763},{"id":1777,"depth":988,"text":1777},{"id":1791,"depth":988,"text":1791},{"id":1199,"depth":988,"text":1199},{"id":1304,"depth":988,"text":1304},"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":1959,"image":18,"imageAlt":19,"imageQuery":20,"pexelsPhotoId":21,"pexelsUrl":22,"readingTime":23,"featured":6,"body":1960,"_type":1017,"_id":1018,"_source":1019,"_file":1020,"_stem":1021,"_extension":1022},[13,14,15,16,17],{"type":25,"children":1961,"toc":2728},[1962,1966,1970,1993,1997,2001,2008,2012,2111,2115,2119,2123,2127,2131,2158,2162,2166,2181,2185,2189,2193,2197,2201,2216,2220,2235,2239,2254,2258,2267,2271,2275,2279,2294,2298,2313,2317,2321,2336,2340,2344,2348,2363,2367,2382,2386,2390,2394,2398,2402,2417,2421,2425,2448,2452,2456,2460,2479,2483,2498,2502,2506,2521,2525,2529,2533,2552,2556,2560,2579,2583,2598,2602,2617,2621,2681,2685,2689,2693,2697],{"type":28,"tag":29,"props":1963,"children":1964},{},[1965],{"type":33,"value":34},{"type":28,"tag":29,"props":1967,"children":1968},{},[1969],{"type":33,"value":39},{"type":28,"tag":41,"props":1971,"children":1972},{},[1973,1977,1981,1985,1989],{"type":28,"tag":45,"props":1974,"children":1975},{},[1976],{"type":33,"value":49},{"type":28,"tag":45,"props":1978,"children":1979},{},[1980],{"type":33,"value":54},{"type":28,"tag":45,"props":1982,"children":1983},{},[1984],{"type":33,"value":59},{"type":28,"tag":45,"props":1986,"children":1987},{},[1988],{"type":33,"value":64},{"type":28,"tag":45,"props":1990,"children":1991},{},[1992],{"type":33,"value":69},{"type":28,"tag":29,"props":1994,"children":1995},{},[1996],{"type":33,"value":74},{"type":28,"tag":29,"props":1998,"children":1999},{},[2000],{"type":33,"value":79},{"type":28,"tag":29,"props":2002,"children":2003},{},[2004],{"type":28,"tag":84,"props":2005,"children":2006},{},[2007],{"type":33,"value":88},{"type":28,"tag":90,"props":2009,"children":2010},{"id":92},[2011],{"type":33,"value":95},{"type":28,"tag":97,"props":2013,"children":2014},{},[2015,2033],{"type":28,"tag":101,"props":2016,"children":2017},{},[2018],{"type":28,"tag":105,"props":2019,"children":2020},{},[2021,2025,2029],{"type":28,"tag":109,"props":2022,"children":2023},{},[2024],{"type":33,"value":113},{"type":28,"tag":109,"props":2026,"children":2027},{},[2028],{"type":33,"value":118},{"type":28,"tag":109,"props":2030,"children":2031},{},[2032],{"type":33,"value":123},{"type":28,"tag":125,"props":2034,"children":2035},{},[2036,2051,2066,2081,2096],{"type":28,"tag":105,"props":2037,"children":2038},{},[2039,2043,2047],{"type":28,"tag":132,"props":2040,"children":2041},{},[2042],{"type":33,"value":136},{"type":28,"tag":132,"props":2044,"children":2045},{},[2046],{"type":33,"value":141},{"type":28,"tag":132,"props":2048,"children":2049},{},[2050],{"type":33,"value":146},{"type":28,"tag":105,"props":2052,"children":2053},{},[2054,2058,2062],{"type":28,"tag":132,"props":2055,"children":2056},{},[2057],{"type":33,"value":154},{"type":28,"tag":132,"props":2059,"children":2060},{},[2061],{"type":33,"value":159},{"type":28,"tag":132,"props":2063,"children":2064},{},[2065],{"type":33,"value":164},{"type":28,"tag":105,"props":2067,"children":2068},{},[2069,2073,2077],{"type":28,"tag":132,"props":2070,"children":2071},{},[2072],{"type":33,"value":172},{"type":28,"tag":132,"props":2074,"children":2075},{},[2076],{"type":33,"value":177},{"type":28,"tag":132,"props":2078,"children":2079},{},[2080],{"type":33,"value":182},{"type":28,"tag":105,"props":2082,"children":2083},{},[2084,2088,2092],{"type":28,"tag":132,"props":2085,"children":2086},{},[2087],{"type":33,"value":190},{"type":28,"tag":132,"props":2089,"children":2090},{},[2091],{"type":33,"value":195},{"type":28,"tag":132,"props":2093,"children":2094},{},[2095],{"type":33,"value":200},{"type":28,"tag":105,"props":2097,"children":2098},{},[2099,2103,2107],{"type":28,"tag":132,"props":2100,"children":2101},{},[2102],{"type":33,"value":208},{"type":28,"tag":132,"props":2104,"children":2105},{},[2106],{"type":33,"value":213},{"type":28,"tag":132,"props":2108,"children":2109},{},[2110],{"type":33,"value":218},{"type":28,"tag":29,"props":2112,"children":2113},{},[2114],{"type":33,"value":223},{"type":28,"tag":90,"props":2116,"children":2117},{"id":226},[2118],{"type":33,"value":229},{"type":28,"tag":29,"props":2120,"children":2121},{},[2122],{"type":33,"value":234},{"type":28,"tag":236,"props":2124,"children":2125},{"id":238},[2126],{"type":33,"value":238},{"type":28,"tag":29,"props":2128,"children":2129},{},[2130],{"type":33,"value":245},{"type":28,"tag":41,"props":2132,"children":2133},{},[2134,2138,2142,2146,2150,2154],{"type":28,"tag":45,"props":2135,"children":2136},{},[2137],{"type":33,"value":253},{"type":28,"tag":45,"props":2139,"children":2140},{},[2141],{"type":33,"value":258},{"type":28,"tag":45,"props":2143,"children":2144},{},[2145],{"type":33,"value":263},{"type":28,"tag":45,"props":2147,"children":2148},{},[2149],{"type":33,"value":268},{"type":28,"tag":45,"props":2151,"children":2152},{},[2153],{"type":33,"value":273},{"type":28,"tag":45,"props":2155,"children":2156},{},[2157],{"type":33,"value":278},{"type":28,"tag":29,"props":2159,"children":2160},{},[2161],{"type":33,"value":283},{"type":28,"tag":236,"props":2163,"children":2164},{"id":286},[2165],{"type":33,"value":286},{"type":28,"tag":41,"props":2167,"children":2168},{},[2169,2173,2177],{"type":28,"tag":45,"props":2170,"children":2171},{},[2172],{"type":33,"value":296},{"type":28,"tag":45,"props":2174,"children":2175},{},[2176],{"type":33,"value":301},{"type":28,"tag":45,"props":2178,"children":2179},{},[2180],{"type":33,"value":306},{"type":28,"tag":236,"props":2182,"children":2183},{"id":309},[2184],{"type":33,"value":309},{"type":28,"tag":29,"props":2186,"children":2187},{},[2188],{"type":33,"value":316},{"type":28,"tag":90,"props":2190,"children":2191},{"id":319},[2192],{"type":33,"value":322},{"type":28,"tag":29,"props":2194,"children":2195},{},[2196],{"type":33,"value":327},{"type":28,"tag":236,"props":2198,"children":2199},{"id":330},[2200],{"type":33,"value":330},{"type":28,"tag":334,"props":2202,"children":2203},{},[2204,2208,2212],{"type":28,"tag":45,"props":2205,"children":2206},{},[2207],{"type":33,"value":341},{"type":28,"tag":45,"props":2209,"children":2210},{},[2211],{"type":33,"value":346},{"type":28,"tag":45,"props":2213,"children":2214},{},[2215],{"type":33,"value":351},{"type":28,"tag":29,"props":2217,"children":2218},{},[2219],{"type":33,"value":356},{"type":28,"tag":41,"props":2221,"children":2222},{},[2223,2227,2231],{"type":28,"tag":45,"props":2224,"children":2225},{},[2226],{"type":33,"value":364},{"type":28,"tag":45,"props":2228,"children":2229},{},[2230],{"type":33,"value":369},{"type":28,"tag":45,"props":2232,"children":2233},{},[2234],{"type":33,"value":374},{"type":28,"tag":236,"props":2236,"children":2237},{"id":377},[2238],{"type":33,"value":377},{"type":28,"tag":41,"props":2240,"children":2241},{},[2242,2246,2250],{"type":28,"tag":45,"props":2243,"children":2244},{},[2245],{"type":33,"value":387},{"type":28,"tag":45,"props":2247,"children":2248},{},[2249],{"type":33,"value":392},{"type":28,"tag":45,"props":2251,"children":2252},{},[2253],{"type":33,"value":397},{"type":28,"tag":236,"props":2255,"children":2256},{"id":400},[2257],{"type":33,"value":400},{"type":28,"tag":29,"props":2259,"children":2260},{},[2261,2262,2266],{"type":33,"value":407},{"type":28,"tag":409,"props":2263,"children":2264},{"href":411},[2265],{"type":33,"value":414},{"type":33,"value":416},{"type":28,"tag":90,"props":2268,"children":2269},{"id":419},[2270],{"type":33,"value":422},{"type":28,"tag":29,"props":2272,"children":2273},{},[2274],{"type":33,"value":427},{"type":28,"tag":236,"props":2276,"children":2277},{"id":430},[2278],{"type":33,"value":430},{"type":28,"tag":41,"props":2280,"children":2281},{},[2282,2286,2290],{"type":28,"tag":45,"props":2283,"children":2284},{},[2285],{"type":33,"value":440},{"type":28,"tag":45,"props":2287,"children":2288},{},[2289],{"type":33,"value":445},{"type":28,"tag":45,"props":2291,"children":2292},{},[2293],{"type":33,"value":450},{"type":28,"tag":29,"props":2295,"children":2296},{},[2297],{"type":33,"value":455},{"type":28,"tag":41,"props":2299,"children":2300},{},[2301,2305,2309],{"type":28,"tag":45,"props":2302,"children":2303},{},[2304],{"type":33,"value":463},{"type":28,"tag":45,"props":2306,"children":2307},{},[2308],{"type":33,"value":468},{"type":28,"tag":45,"props":2310,"children":2311},{},[2312],{"type":33,"value":473},{"type":28,"tag":236,"props":2314,"children":2315},{"id":476},[2316],{"type":33,"value":476},{"type":28,"tag":29,"props":2318,"children":2319},{},[2320],{"type":33,"value":483},{"type":28,"tag":41,"props":2322,"children":2323},{},[2324,2328,2332],{"type":28,"tag":45,"props":2325,"children":2326},{},[2327],{"type":33,"value":491},{"type":28,"tag":45,"props":2329,"children":2330},{},[2331],{"type":33,"value":496},{"type":28,"tag":45,"props":2333,"children":2334},{},[2335],{"type":33,"value":501},{"type":28,"tag":29,"props":2337,"children":2338},{},[2339],{"type":33,"value":506},{"type":28,"tag":90,"props":2341,"children":2342},{"id":509},[2343],{"type":33,"value":512},{"type":28,"tag":29,"props":2345,"children":2346},{},[2347],{"type":33,"value":517},{"type":28,"tag":41,"props":2349,"children":2350},{},[2351,2355,2359],{"type":28,"tag":45,"props":2352,"children":2353},{},[2354],{"type":33,"value":525},{"type":28,"tag":45,"props":2356,"children":2357},{},[2358],{"type":33,"value":530},{"type":28,"tag":45,"props":2360,"children":2361},{},[2362],{"type":33,"value":535},{"type":28,"tag":29,"props":2364,"children":2365},{},[2366],{"type":33,"value":540},{"type":28,"tag":41,"props":2368,"children":2369},{},[2370,2374,2378],{"type":28,"tag":45,"props":2371,"children":2372},{},[2373],{"type":33,"value":548},{"type":28,"tag":45,"props":2375,"children":2376},{},[2377],{"type":33,"value":553},{"type":28,"tag":45,"props":2379,"children":2380},{},[2381],{"type":33,"value":558},{"type":28,"tag":236,"props":2383,"children":2384},{"id":561},[2385],{"type":33,"value":561},{"type":28,"tag":29,"props":2387,"children":2388},{},[2389],{"type":33,"value":568},{"type":28,"tag":90,"props":2391,"children":2392},{"id":571},[2393],{"type":33,"value":574},{"type":28,"tag":29,"props":2395,"children":2396},{},[2397],{"type":33,"value":579},{"type":28,"tag":29,"props":2399,"children":2400},{},[2401],{"type":33,"value":584},{"type":28,"tag":41,"props":2403,"children":2404},{},[2405,2409,2413],{"type":28,"tag":45,"props":2406,"children":2407},{},[2408],{"type":33,"value":592},{"type":28,"tag":45,"props":2410,"children":2411},{},[2412],{"type":33,"value":597},{"type":28,"tag":45,"props":2414,"children":2415},{},[2416],{"type":33,"value":602},{"type":28,"tag":236,"props":2418,"children":2419},{"id":605},[2420],{"type":33,"value":605},{"type":28,"tag":29,"props":2422,"children":2423},{},[2424],{"type":33,"value":612},{"type":28,"tag":334,"props":2426,"children":2427},{},[2428,2432,2436,2440,2444],{"type":28,"tag":45,"props":2429,"children":2430},{},[2431],{"type":33,"value":620},{"type":28,"tag":45,"props":2433,"children":2434},{},[2435],{"type":33,"value":625},{"type":28,"tag":45,"props":2437,"children":2438},{},[2439],{"type":33,"value":630},{"type":28,"tag":45,"props":2441,"children":2442},{},[2443],{"type":33,"value":635},{"type":28,"tag":45,"props":2445,"children":2446},{},[2447],{"type":33,"value":640},{"type":28,"tag":29,"props":2449,"children":2450},{},[2451],{"type":33,"value":645},{"type":28,"tag":90,"props":2453,"children":2454},{"id":648},[2455],{"type":33,"value":651},{"type":28,"tag":29,"props":2457,"children":2458},{},[2459],{"type":33,"value":656},{"type":28,"tag":41,"props":2461,"children":2462},{},[2463,2467,2471,2475],{"type":28,"tag":45,"props":2464,"children":2465},{},[2466],{"type":33,"value":664},{"type":28,"tag":45,"props":2468,"children":2469},{},[2470],{"type":33,"value":669},{"type":28,"tag":45,"props":2472,"children":2473},{},[2474],{"type":33,"value":674},{"type":28,"tag":45,"props":2476,"children":2477},{},[2478],{"type":33,"value":679},{"type":28,"tag":236,"props":2480,"children":2481},{"id":682},[2482],{"type":33,"value":682},{"type":28,"tag":41,"props":2484,"children":2485},{},[2486,2490,2494],{"type":28,"tag":45,"props":2487,"children":2488},{},[2489],{"type":33,"value":692},{"type":28,"tag":45,"props":2491,"children":2492},{},[2493],{"type":33,"value":697},{"type":28,"tag":45,"props":2495,"children":2496},{},[2497],{"type":33,"value":702},{"type":28,"tag":236,"props":2499,"children":2500},{"id":705},[2501],{"type":33,"value":705},{"type":28,"tag":29,"props":2503,"children":2504},{},[2505],{"type":33,"value":712},{"type":28,"tag":41,"props":2507,"children":2508},{},[2509,2513,2517],{"type":28,"tag":45,"props":2510,"children":2511},{},[2512],{"type":33,"value":720},{"type":28,"tag":45,"props":2514,"children":2515},{},[2516],{"type":33,"value":725},{"type":28,"tag":45,"props":2518,"children":2519},{},[2520],{"type":33,"value":730},{"type":28,"tag":29,"props":2522,"children":2523},{},[2524],{"type":33,"value":735},{"type":28,"tag":236,"props":2526,"children":2527},{"id":738},[2528],{"type":33,"value":738},{"type":28,"tag":29,"props":2530,"children":2531},{},[2532],{"type":33,"value":745},{"type":28,"tag":334,"props":2534,"children":2535},{},[2536,2540,2544,2548],{"type":28,"tag":45,"props":2537,"children":2538},{},[2539],{"type":33,"value":753},{"type":28,"tag":45,"props":2541,"children":2542},{},[2543],{"type":33,"value":758},{"type":28,"tag":45,"props":2545,"children":2546},{},[2547],{"type":33,"value":763},{"type":28,"tag":45,"props":2549,"children":2550},{},[2551],{"type":33,"value":768},{"type":28,"tag":90,"props":2553,"children":2554},{"id":771},[2555],{"type":33,"value":774},{"type":28,"tag":29,"props":2557,"children":2558},{},[2559],{"type":33,"value":779},{"type":28,"tag":41,"props":2561,"children":2562},{},[2563,2567,2571,2575],{"type":28,"tag":45,"props":2564,"children":2565},{},[2566],{"type":33,"value":787},{"type":28,"tag":45,"props":2568,"children":2569},{},[2570],{"type":33,"value":792},{"type":28,"tag":45,"props":2572,"children":2573},{},[2574],{"type":33,"value":797},{"type":28,"tag":45,"props":2576,"children":2577},{},[2578],{"type":33,"value":802},{"type":28,"tag":29,"props":2580,"children":2581},{},[2582],{"type":33,"value":807},{"type":28,"tag":41,"props":2584,"children":2585},{},[2586,2590,2594],{"type":28,"tag":45,"props":2587,"children":2588},{},[2589],{"type":33,"value":815},{"type":28,"tag":45,"props":2591,"children":2592},{},[2593],{"type":33,"value":820},{"type":28,"tag":45,"props":2595,"children":2596},{},[2597],{"type":33,"value":825},{"type":28,"tag":29,"props":2599,"children":2600},{},[2601],{"type":33,"value":830},{"type":28,"tag":334,"props":2603,"children":2604},{},[2605,2609,2613],{"type":28,"tag":45,"props":2606,"children":2607},{},[2608],{"type":33,"value":838},{"type":28,"tag":45,"props":2610,"children":2611},{},[2612],{"type":33,"value":843},{"type":28,"tag":45,"props":2614,"children":2615},{},[2616],{"type":33,"value":848},{"type":28,"tag":90,"props":2618,"children":2619},{"id":851},[2620],{"type":33,"value":854},{"type":28,"tag":41,"props":2622,"children":2624},{"className":2623},[858],[2625,2633,2641,2649,2657,2665,2673],{"type":28,"tag":45,"props":2626,"children":2628},{"className":2627},[863],[2629,2632],{"type":28,"tag":866,"props":2630,"children":2631},{"disabled":868,"type":869},[],{"type":33,"value":872},{"type":28,"tag":45,"props":2634,"children":2636},{"className":2635},[863],[2637,2640],{"type":28,"tag":866,"props":2638,"children":2639},{"disabled":868,"type":869},[],{"type":33,"value":881},{"type":28,"tag":45,"props":2642,"children":2644},{"className":2643},[863],[2645,2648],{"type":28,"tag":866,"props":2646,"children":2647},{"disabled":868,"type":869},[],{"type":33,"value":890},{"type":28,"tag":45,"props":2650,"children":2652},{"className":2651},[863],[2653,2656],{"type":28,"tag":866,"props":2654,"children":2655},{"disabled":868,"type":869},[],{"type":33,"value":899},{"type":28,"tag":45,"props":2658,"children":2660},{"className":2659},[863],[2661,2664],{"type":28,"tag":866,"props":2662,"children":2663},{"disabled":868,"type":869},[],{"type":33,"value":908},{"type":28,"tag":45,"props":2666,"children":2668},{"className":2667},[863],[2669,2672],{"type":28,"tag":866,"props":2670,"children":2671},{"disabled":868,"type":869},[],{"type":33,"value":917},{"type":28,"tag":45,"props":2674,"children":2676},{"className":2675},[863],[2677,2680],{"type":28,"tag":866,"props":2678,"children":2679},{"disabled":868,"type":869},[],{"type":33,"value":926},{"type":28,"tag":90,"props":2682,"children":2683},{"id":929},[2684],{"type":33,"value":929},{"type":28,"tag":29,"props":2686,"children":2687},{},[2688],{"type":33,"value":936},{"type":28,"tag":29,"props":2690,"children":2691},{},[2692],{"type":33,"value":941},{"type":28,"tag":29,"props":2694,"children":2695},{},[2696],{"type":33,"value":946},{"type":28,"tag":41,"props":2698,"children":2699},{},[2700,2707,2714,2721],{"type":28,"tag":45,"props":2701,"children":2702},{},[2703],{"type":28,"tag":409,"props":2704,"children":2705},{"href":955},[2706],{"type":33,"value":958},{"type":28,"tag":45,"props":2708,"children":2709},{},[2710],{"type":28,"tag":409,"props":2711,"children":2712},{"href":964},[2713],{"type":33,"value":967},{"type":28,"tag":45,"props":2715,"children":2716},{},[2717],{"type":28,"tag":409,"props":2718,"children":2719},{"href":973},[2720],{"type":33,"value":976},{"type":28,"tag":45,"props":2722,"children":2723},{},[2724],{"type":28,"tag":409,"props":2725,"children":2726},{"href":411},[2727],{"type":33,"value":414},{"title":7,"searchDepth":985,"depth":985,"links":2729},[2730,2731,2736,2741,2745,2748,2751,2756,2757,2758],{"id":92,"depth":988,"text":95},{"id":226,"depth":988,"text":229,"children":2732},[2733,2734,2735],{"id":238,"depth":985,"text":238},{"id":286,"depth":985,"text":286},{"id":309,"depth":985,"text":309},{"id":319,"depth":988,"text":322,"children":2737},[2738,2739,2740],{"id":330,"depth":985,"text":330},{"id":377,"depth":985,"text":377},{"id":400,"depth":985,"text":400},{"id":419,"depth":988,"text":422,"children":2742},[2743,2744],{"id":430,"depth":985,"text":430},{"id":476,"depth":985,"text":476},{"id":509,"depth":988,"text":512,"children":2746},[2747],{"id":561,"depth":985,"text":561},{"id":571,"depth":988,"text":574,"children":2749},[2750],{"id":605,"depth":985,"text":605},{"id":648,"depth":988,"text":651,"children":2752},[2753,2754,2755],{"id":682,"depth":985,"text":682},{"id":705,"depth":985,"text":705},{"id":738,"depth":985,"text":738},{"id":771,"depth":988,"text":774},{"id":851,"depth":988,"text":854},{"id":929,"depth":988,"text":929},1775267181096]