网页设计新手入门先搞懂这5个基础概念

前几天一个做自媒体的朋友给我打电话，说他花了三千多块找人做了个网页，上线之后自己看着挺满意，结果访问量一直上不去。我问他移动端打开怎么样，他愣了一下说没看过。后来用手机一打开，整个页面全乱了，文字叠在一起，按钮点不动。他当时就傻眼了。这种事我见过太多，不是技术不行，是网页设计最基础的几个概念压根没搞清楚就开始动手了。

我自己也踩过类似的坑。早些年帮人做一个企业展示页面，一心想着把页面做得花哨，加了一堆动画效果，结果加载速度慢得要命，用户等了三秒还没看到内容就关了。后来我想了想，问题出在我把网页设计当成了纯粹的美术活，忽略了它本质上是一个解决问题的工具。

评选标准：什么才算好的基础入门概念

我评判一个概念值不值得新手优先学，看三点。第一，不懂它会不会直接导致网页出问题，比如打不开或者显示错乱。第二，它是不是后续进阶学习的必经之路，跳过去学别的会更吃力。第三，能不能用生活化的方式讲明白，如果讲半天还是云里雾里，那说明这个概念本身就不适合零基础的人先碰。

按照这个标准，我挑出了五个最值得先搞懂的基础概念，排名分先后。

第一个：页面结构，别把房子盖在沙子上

我见过一个新手朋友，用可视化的建站工具拖拽出了页面，看着没问题，结果搜索引擎完全收录不到内容。原因很简单，他的页面结构是一堆没有任何含义的容器堆起来的，搜索引擎根本不知道哪块是标题、哪块是正文。

页面结构说白了就是给你的内容分好区域，告诉浏览器和搜索引擎哪块是头部、哪块是导航、哪块是主要内容、哪块是页脚。这就跟盖房子一样，你得先有承重墙和隔断，再考虑刷什么颜色的漆。结构清晰了，后面加样式、做交互才有立足点。实测发现，结构合理的页面在搜索引擎里的收录速度平均能快两到三倍，这不是玄学，是搜索引擎能读懂你的内容了。

第二个：响应式布局，一套页面适配所有屏幕

回到我那个朋友的故事，他的网页在电脑上看着挺好，一到手机上就完蛋。这就是没做响应式布局的典型后果。现在超过六成的流量来自手机端，你要是只考虑电脑屏幕，等于主动放弃了一多半的用户。

响应式布局的核心思路很简单，就是让页面能根据屏幕宽度自动调整排列方式。电脑上并排显示三列内容，手机上就变成一列纵向排列。实现方式主要是靠相对单位和媒体查询，听起来有点技术味，但理解起来不复杂。关键在于养成习惯：做完页面先用手机看一眼，这个动作能帮你省掉后面很多返工的麻烦。

提示：新手最容易忽略的一步就是在手机浏览器里实际打开自己的页面。模拟器看着和真机差别挺大，尤其是字体和按钮的触控区域。

第三个：色彩与字体，别让用户看瞎眼

我见过太多新手做的页面，背景用深灰，正文用浅灰，对比度低得让人想把屏幕调最亮。色彩搭配不是让你去学美术，最基本的就一条：保证正文的可读性。浅色背景配深色文字，或者反过来，对比要足够明显。字体也一样，正文用无衬线字体在屏幕上更清晰，标题可以稍微有点个性，但别超过两种字体，多了就乱。

还有个容易被忽视的点是行高。行高太挤，读起来喘不过气；行高太松，视线跳来跳去容易串行。正文行高设置在字体大小的1.5到1.8倍之间，这个范围是经过大量阅读体验测试出来的，不是拍脑袋定的。

第四个：导航逻辑，别让用户猜谜

网页设计里有个常识但我发现很多新手不知道：用户进入一个页面，如果三秒内找不到自己想看的东西在哪儿，大概率会直接关掉。导航的作用就是告诉用户这里有什么、怎么去。主导航放最核心的几个入口，栏目别超过七个，层级别超过三层。面包屑导航这种小东西看着不起眼，但能帮用户随时知道自己身在何处。

我自己的经验是，导航设计好不好，找个没看过你网页的人来试。让他找某个信息，如果他要犹豫超过五秒，那导航就有问题。

第五个：加载速度，慢一秒都是罪

这个不用多解释，大家都讨厌等。但新手往往把注意力全放在视觉效果上，图片不压缩就往上放，一个页面几兆大小，手机用户打开要等十秒。我测过一组数据，页面加载时间从三秒降到一点五秒，跳出率大概能降三成左右。方法不复杂，图片压缩、代码精简、少用花哨的外部资源，做到这几点就能有明显改善。

选购建议：别急着买贵的工具

市面上有很多建站工具和课程，收费从几百到几千不等。我的建议是，先别急着花钱。这五个基础概念你花个周末就能有个大致理解，然后找个免费的工具练手，做个最简单的个人页面出来。等你真的做出来一个能在手机上正常显示、打开速度也不慢的页面，再考虑要不要买进阶课程或者付费工具。到那时候，你也有了自己的判断标准，不会被花里胡哨的宣传牵着走。

说实话，这五个概念也不是什么高深的东西，但恰恰是新手最容易跳过去的部分。我到现在也不敢说自己每个项目都做得完美，上周帮人看的一个页面，我第一版就忘了处理小屏幕下的字体大小。反正慢慢来吧，先把地基打稳，后面的事都好说。