[{"data":1,"prerenderedAt":639},["ShallowReactive",2],{"post-\u002Fposts\u002F8628a5ad":3,"post-nav-\u002Fposts\u002F8628a5ad":607,"post-related-\u002Fposts\u002F8628a5ad":625},{"id":4,"title":5,"abbrlink":6,"aisummary":7,"body":8,"category":593,"cover":594,"date":595,"description":596,"draft":597,"extension":598,"featured":597,"meta":599,"navigation":212,"path":600,"pinned":597,"seo":601,"stem":602,"tags":603,"updated":594,"__hash__":606},"posts\u002Fposts\u002Fstop-using-cards.md","别再用卡片装一切","8628a5ad","文章讨论了卡片布局在网页设计中的使用误区，指出当所有内容都采用卡片形式时，会失去区分作用，导致读者难以确定阅读顺序。作者建议根据内容之间的关系选择合适的视觉呈现方式，如列表、网格、缩进或留白。卡片应仅用于少量独立且需区分的内容，如友链，而非文章列表或代码块。",{"type":9,"value":10,"toc":582},"minimark",[11,15,39,46,50,53,60,63,66,142,145,150,342,345,356,360,366,429,432,436,439,470,473,476,479,498,501,504,507,510,515,523,528,534,537,551,554,563,566,572,575,578],[12,13,14],"p",{},"打开最近看到的十个个人网站，八个长这样：",[16,17,18,22,25,33,36],"ul",{},[19,20,21],"li",{},"白色背景",[19,23,24],{},"每块内容一个圆角 16px 的卡片",[19,26,27,28,32],{},"卡片下面一层 ",[29,30,31],"code",{},"0 4px 6px rgba(0,0,0,.1)"," 的阴影",[19,34,35],{},"卡片之间 24px 间距",[19,37,38],{},"所有卡片长得一模一样",[12,40,41,42],{},"这个布局不算丑，但它有一个致命问题：",[43,44,45],"strong",{},"读者不知道先看哪里。",[47,48,49],"h2",{"id":49},"卡片传递的错误信息",[12,51,52],{},"在视觉语言里，一个边界明确的容器在说：「这是一组相关的东西，和外面无关。」",[12,54,55,56,59],{},"这是有用的信息——但前提是",[43,57,58],{},"并非所有东西都是卡片","。",[12,61,62],{},"如果 10 块内容全都是卡片，那这个信号就失效了。就像一篇文章里每个词都加粗，等于没加粗。",[12,64,65],{},"具体到博客：",[67,68,69,85],"table",{},[70,71,72],"thead",{},[73,74,75,79,82],"tr",{},[76,77,78],"th",{},"内容",[76,80,81],{},"是卡片吗",[76,83,84],{},"为什么",[86,87,88,100,111,121,131],"tbody",{},[73,89,90,94,97],{},[91,92,93],"td",{},"文章列表项",[91,95,96],{},"不该是",[91,98,99],{},"它们是一串同类项，不是独立单元",[73,101,102,105,108],{},[91,103,104],{},"友链",[91,106,107],{},"可以是",[91,109,110],{},"每个友链确实是独立实体",[73,112,113,116,118],{},[91,114,115],{},"技能标签",[91,117,96],{},[91,119,120],{},"它们属于同一组",[73,122,123,126,128],{},[91,124,125],{},"文章正文的代码块",[91,127,96],{},[91,129,130],{},"它是正文的一部分",[73,132,133,136,139],{},[91,134,135],{},"弹窗",[91,137,138],{},"是",[91,140,141],{},"它确实浮在页面之上",[47,143,144],{"id":144},"我用什么代替",[146,147,149],"h3",{"id":148},"列表横线-间距","列表：横线 + 间距",[151,152,157],"pre",{"className":153,"code":154,"language":155,"meta":156,"style":156},"language-css shiki shiki-themes github-light github-dark",".post-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.post-item {\n  display: flex;\n  align-items: baseline;\n  gap: 1rem;\n  padding-block: 0.875rem;\n  border-bottom: 1px solid var(--border);\n}\n\n.post-item:last-child {\n  border-bottom: none;\n}\n","css","",[29,158,159,172,188,201,207,214,222,233,246,263,278,307,312,317,325,337],{"__ignoreMap":156},[160,161,164,168],"span",{"class":162,"line":163},"line",1,[160,165,167],{"class":166},"sScJk",".post-list",[160,169,171],{"class":170},"sVt8B"," {\n",[160,173,175,179,182,185],{"class":162,"line":174},2,[160,176,178],{"class":177},"sj4cs","  display",[160,180,181],{"class":170},": ",[160,183,184],{"class":177},"flex",[160,186,187],{"class":170},";\n",[160,189,191,194,196,199],{"class":162,"line":190},3,[160,192,193],{"class":177},"  flex-direction",[160,195,181],{"class":170},[160,197,198],{"class":177},"column",[160,200,187],{"class":170},[160,202,204],{"class":162,"line":203},4,[160,205,206],{"class":170},"}\n",[160,208,210],{"class":162,"line":209},5,[160,211,213],{"emptyLinePlaceholder":212},true,"\n",[160,215,217,220],{"class":162,"line":216},6,[160,218,219],{"class":166},".post-item",[160,221,171],{"class":170},[160,223,225,227,229,231],{"class":162,"line":224},7,[160,226,178],{"class":177},[160,228,181],{"class":170},[160,230,184],{"class":177},[160,232,187],{"class":170},[160,234,236,239,241,244],{"class":162,"line":235},8,[160,237,238],{"class":177},"  align-items",[160,240,181],{"class":170},[160,242,243],{"class":177},"baseline",[160,245,187],{"class":170},[160,247,249,252,254,257,261],{"class":162,"line":248},9,[160,250,251],{"class":177},"  gap",[160,253,181],{"class":170},[160,255,256],{"class":177},"1",[160,258,260],{"class":259},"szBVR","rem",[160,262,187],{"class":170},[160,264,266,269,271,274,276],{"class":162,"line":265},10,[160,267,268],{"class":177},"  padding-block",[160,270,181],{"class":170},[160,272,273],{"class":177},"0.875",[160,275,260],{"class":259},[160,277,187],{"class":170},[160,279,281,284,286,288,291,294,297,300,304],{"class":162,"line":280},11,[160,282,283],{"class":177},"  border-bottom",[160,285,181],{"class":170},[160,287,256],{"class":177},[160,289,290],{"class":259},"px",[160,292,293],{"class":177}," solid",[160,295,296],{"class":177}," var",[160,298,299],{"class":170},"(",[160,301,303],{"class":302},"s4XuR","--border",[160,305,306],{"class":170},");\n",[160,308,310],{"class":162,"line":309},12,[160,311,206],{"class":170},[160,313,315],{"class":162,"line":314},13,[160,316,213],{"emptyLinePlaceholder":212},[160,318,320,323],{"class":162,"line":319},14,[160,321,322],{"class":166},".post-item:last-child",[160,324,171],{"class":170},[160,326,328,330,332,335],{"class":162,"line":327},15,[160,329,283],{"class":177},[160,331,181],{"class":170},[160,333,334],{"class":177},"none",[160,336,187],{"class":170},[160,338,340],{"class":162,"line":339},16,[160,341,206],{"class":170},[12,343,344],{},"一行一条线。视线沿着线往下走，不会被框住。",[12,346,347,348,351,352,355],{},"而且 ",[29,349,350],{},"border"," 比 ",[29,353,354],{},"box-shadow"," 便宜得多——阴影会触发重绘，边框不会。",[146,357,359],{"id":358},"分组留白","分组：留白",[12,361,362,363,59],{},"不需要任何视觉元素，",[43,364,365],{},"间距本身就是分组",[151,367,369],{"className":153,"code":368,"language":155,"meta":156,"style":156},".section {\n  margin-block-start: 3rem;\n}\n\n.section + .section {\n  margin-block-start: 4rem;\n}\n",[29,370,371,378,392,396,400,412,425],{"__ignoreMap":156},[160,372,373,376],{"class":162,"line":163},[160,374,375],{"class":166},".section",[160,377,171],{"class":170},[160,379,380,383,385,388,390],{"class":162,"line":174},[160,381,382],{"class":177},"  margin-block-start",[160,384,181],{"class":170},[160,386,387],{"class":177},"3",[160,389,260],{"class":259},[160,391,187],{"class":170},[160,393,394],{"class":162,"line":190},[160,395,206],{"class":170},[160,397,398],{"class":162,"line":203},[160,399,213],{"emptyLinePlaceholder":212},[160,401,402,404,407,410],{"class":162,"line":209},[160,403,375],{"class":166},[160,405,406],{"class":259}," +",[160,408,409],{"class":166}," .section",[160,411,171],{"class":170},[160,413,414,416,418,421,423],{"class":162,"line":216},[160,415,382],{"class":177},[160,417,181],{"class":170},[160,419,420],{"class":177},"4",[160,422,260],{"class":259},[160,424,187],{"class":170},[160,426,427],{"class":162,"line":224},[160,428,206],{"class":170},[12,430,431],{},"大间距说「这是新的部分」，小间距说「这些是一起的」。这是人类视觉系统最古老的规则之一，不需要额外的框。",[146,433,435],{"id":434},"强调字重和颜色","强调：字重和颜色",[12,437,438],{},"想突出某一块内容，不要给它加边框，改它的字重。",[151,440,442],{"className":153,"code":441,"language":155,"meta":156,"style":156},".post-item:hover .post-item__title {\n  font-weight: 700;\n}\n",[29,443,444,454,466],{"__ignoreMap":156},[160,445,446,449,452],{"class":162,"line":163},[160,447,448],{"class":166},".post-item:hover",[160,450,451],{"class":166}," .post-item__title",[160,453,171],{"class":170},[160,455,456,459,461,464],{"class":162,"line":174},[160,457,458],{"class":177},"  font-weight",[160,460,181],{"class":170},[160,462,463],{"class":177},"700",[160,465,187],{"class":170},[160,467,468],{"class":162,"line":190},[160,469,206],{"class":170},[12,471,472],{},"从 400 到 700 的变化，比任何阴影都醒目，而且不占空间、不增加视觉噪音。",[47,474,475],{"id":475},"那卡片什么时候用",[12,477,478],{},"三个条件同时满足才用：",[480,481,482,487,492],"ol",{},[19,483,484],{},[43,485,486],{},"内容确实是独立的、可以单独存在的单元",[19,488,489],{},[43,490,491],{},"它需要和周围的内容明确区分开",[19,493,494,497],{},[43,495,496],{},"数量不多","（少于 10 个）",[12,499,500],{},"友链页的每个友链符合这三条——它们确实彼此无关，确实需要区分，数量也不多。",[12,502,503],{},"文章列表不符合第一条：10 篇文章是一个连续的序列，不是 10 个独立单元。",[47,505,506],{"id":506},"一个具体的对比",[12,508,509],{},"同一个博客，两种列表：",[12,511,512],{},[43,513,514],{},"卡片式：",[151,516,521],{"className":517,"code":519,"language":520},[518],"language-text","┌─────────────────────────┐\n│ ┌─────────────────────┐ │\n│ │ 排版比配色更决定气质 │ │\n│ │ 2025-10-28          │ │\n│ └─────────────────────┘ │\n│ ┌─────────────────────┐ │\n│ │ 我删掉了站点的 90%   │ │\n│ │ 2025-10-12          │ │\n│ └─────────────────────┘ │\n└─────────────────────────┘\n","text",[29,522,519],{"__ignoreMap":156},[12,524,525],{},[43,526,527],{},"行式：",[151,529,532],{"className":530,"code":531,"language":520},[518],"2025-10-28   排版比配色更决定气质\n──────────────────────────────────\n2025-10-12   我删掉了站点的 90% 功能\n──────────────────────────────────\n",[29,533,531],{"__ignoreMap":156},[12,535,536],{},"行式版本：",[16,538,539,542,545,548],{},[19,540,541],{},"纵向高度减少约 50%，一屏能看更多文章",[19,543,544],{},"日期对齐成一列，可以扫读",[19,546,547],{},"视线路径是单一的从上到下",[19,549,550],{},"没有任何装饰性的视觉重量",[47,552,553],{"id":553},"最后",[555,556,557],"blockquote",{},[12,558,559,560,59],{},"卡片不是设计元素，是",[43,561,562],{},"信息结构的可视化",[12,564,565],{},"当你不知道该怎么组织内容时，把东西装进卡片是最省事的选择——但也是最偷懒的选择。",[12,567,568,569],{},"真正该问的问题是：",[43,570,571],{},"这些内容之间是什么关系？",[12,573,574],{},"是序列？用列表。\n是并列的独立实体？用网格或卡片。\n是从属关系？用缩进。\n没有关系？用留白隔开。",[12,576,577],{},"想清楚关系，视觉自然就对了。",[579,580,581],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":156,"searchDepth":174,"depth":174,"links":583},[584,585,590,591,592],{"id":49,"depth":174,"text":49},{"id":144,"depth":174,"text":144,"children":586},[587,588,589],{"id":148,"depth":190,"text":149},{"id":358,"depth":190,"text":359},{"id":434,"depth":190,"text":435},{"id":475,"depth":174,"text":475},{"id":506,"depth":174,"text":506},{"id":553,"depth":174,"text":553},"设计",null,"2025-08-22","卡片是个好东西，但它有明确的使用条件。当每一块内容都变成同样圆角同样阴影的卡片时，页面就失去了层级，读者也失去了方向。",false,"md",{},"\u002Fposts\u002F8628a5ad",{"title":5,"description":596},"posts\u002Fstop-using-cards",[593,604,605],"布局","反思","uviX4uxXENJRF2p1DOQbgLrEk5SkEcD57axYx6mJdjw",{"prev":608,"next":617},{"path":609,"title":610,"description":611,"date":612,"updated":594,"tags":613,"category":593,"cover":616,"draft":597,"pinned":212,"featured":597},"\u002Fposts\u002F90a855a1","排版比配色更决定气质","把同样一套颜色交给两个人排，出来的东西可以完全不同。这篇讲我怎么用字重、行距和留白，在不换颜色的前提下改变一个页面的脾气。","2025-10-28",[614,593,615],"排版","CSS","\u002Fimages\u002Fcovers\u002Ftypography.png",{"path":618,"title":619,"description":620,"date":621,"updated":594,"tags":622,"category":593,"cover":594,"draft":597,"pinned":597,"featured":597},"\u002Fposts\u002Fcac47918","暗色模式不是把颜色反过来","反转配色是最省事的做法，也是最糟的做法。暗色模式需要重新设计对比度、阴影、饱和度和层级关系。","2025-07-25",[623,593,624],"暗色模式","可访问性",[626,628,630],{"path":609,"title":610,"description":611,"date":612,"updated":594,"tags":627,"category":593,"cover":616,"draft":597,"pinned":212,"featured":597},[614,593,615],{"path":618,"title":619,"description":620,"date":621,"updated":594,"tags":629,"category":593,"cover":594,"draft":597,"pinned":597,"featured":597},[623,593,624],{"path":631,"title":632,"description":633,"date":634,"updated":594,"tags":635,"category":593,"cover":638,"draft":597,"pinned":597,"featured":597},"\u002Fposts\u002F85fffa25","测试文章乙：有封面但非推荐","这是首页改版验收用的测试文章乙，有封面但未标记 featured，只出现在卡片流，不进轮播。","2026-10-20",[636,637],"测试","首页改版","\u002Fimages\u002Fcovers\u002Fcharset.png",1794495070984]