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