页面看着挤？间距和视觉层级才是高级感的关键

很多网站的毛病不是丑，是挤。所有东西都想塞进首屏，字挨着字，卡片贴着卡片，用户一眼看过去不知道先看哪。

间距是设计里最便宜也最有效的工具。我的做法是定一套8px的间距系统：小间距4和8，中间距16，大间距24和32。区块和区块之间的间距，一定要大于区块内部元素的间距，这样层级才清楚。卡片里的文字间距8px，卡片之间24px，一眼就能分清这是一组。

行高也容易被忽略。正文行高1.6到1.8倍，段间距用字号的一半。很多中文站行高只有1.2，读起来跟挤地铁似的。

视觉层级不用花哨，四个手段就够：大小、粗细、颜色、间距。标题大、正文小，关键词加粗，重点用主色，该拉开距离的拉开。我帮一个做环保设备的客户改落地页，只调了间距和层级，停留时间从40秒涨到1分10秒，表单提交率涨了六成。没改一个字，没加一个元素。

移动端要更舍得留白。手指粗，热区小，间距小了点错是常态。我一般会把手机端的区块间距再放大一档。记住一句话：用户不会觉得留白是浪费，只会觉得你的页面干净、能看懂。这比任何装饰都值钱。

最后说两个能立刻上手的检查方法。第一，把页面截图缩小到看不清文字，只看黑白灰块，这时候层级应该依然清楚；如果糊成一团，就是间距和对比出了问题。第二，数一下同一屏里字号种类，超过三种就砍。我自己改版前必做这两步，比盯着设计稿抠半天管用。设计这事，做减法永远比做加法难，也永远更值钱。

标签： 网页设计 间距 视觉层级