做网站设计最容易犯的五个排版错误

做网页设计这些年，看过太多差一点就很好的页面。差的那一点，几乎都在排版上。今天说五个最常见的问题，以及怎么改。

第一个错误：正文字体太小。

很多人还用14px做正文。在2024年之前可能还行，但现在高分屏普及了，14px在某些屏幕上看着像蚂蚁。建议正文最小16px，如果是面向中老年用户的内容，18px更保险。

有个简单测试方法：把页面截图放到手机上看，如果你自己读起来都觉得费劲，那就是太小了。

第二个错误：行距不对。

行距太小，文字挤在一起看着累。行距太大，段落松散不成片。中文正文最舒服的行距是1.6到1.8倍（CSS里的line-height）。英文可以稍紧一点，1.4到1.6倍。

特别注意：标题的行距要比正文小。标题字大，行距如果也按比例放大，会显得特别松散。标题行距一般设为字号的1.2倍左右就够了。

第三个错误：文字对比度不够。

灰色文字配白色背景，看起来很高级，但阅读体验很差。WCAG标准要求正文文字对比度至少4.5:1。简单判断方法：把页面截图转成灰度图，如果文字几乎看不清，就是对比度不够。

现在很多设计工具（比如Figma的Contrast插件）可以直接检查对比度数值，用起来很方便。

第四个错误：没有留白。

新手设计师容易把页面塞得满满当当，觉得空白是浪费空间。其实留白是最好的设计工具——它能引导视线、区分内容层级、让页面呼吸。

段落之间的间距至少应该是行距的1.5倍。不同内容块之间的间距要更大，一般是段落间距的2倍。这样用户的眼睛能自然区分这部分结束了，下面是新内容。

第五个错误：对齐方式混乱。

中文网页正文用两端对齐（text-align: justify）看起来整齐，但容易出现河流问题——单词之间的间距忽大忽小，形成白色空隙。如果遇到这种情况，改成左对齐就好。

标题建议左对齐或居中，不要混用。一个页面里标题一会儿居中一会儿左对齐，看着会很乱。

排版这件事，没什么高深理论，就是多看好网站，然后在自己的项目里反复试。推荐一个练习方法：找一个你觉得排版好的页面，用Figma把它的排版参数全部抄下来——字号、行距、间距、颜色——然后照着做。做三个页面之后，你自然就知道什么比例看着舒服了。

标签： 网页设计 排版 UI设计