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