网页设计新手入门先理清这5个基础步骤

上个月我表弟半夜给我发语音，语气特别兴奋，说他花了三个周末自学网页设计，终于给自己的摄影工作室做了个网站。我让他发链接过来看看，点开之后我沉默了大概十秒钟。首页是一张巨大的全屏照片，下面密密麻麻排了二十多张图，没有分类，没有导航，手机上打开更是灾难，图片全部挤成一列，加载了快半分钟还在转圈。他问我怎么样，我说挺好的，就是你自己找一张去年拍的照片试试，看能不能在十秒内翻到。

这事让我想起自己刚开始接触网页设计那会儿，也是差不多的状态。总觉得好看就行，功能什么的后面再说。结果做出来的东西别说用户了，我自己过两天都找不到入口在哪。所以今天想跟你聊聊，如果你也是刚入门，先把这五个基础步骤理清楚，能少走很多弯路。

动手之前，先想明白这个页面到底给谁看

很多人一上来就打开软件开始拖拽，包括当年的我。工具确实越来越顺手了，但工具解决不了方向问题。你得先问自己一句：这个页面主要是给谁用的？是给第一次来的陌生访客看，还是给已经了解你的老客户用？目标不一样，整个设计思路完全不同。

我表弟那个摄影网站，访客大部分是准备结婚的年轻人，他们最关心的是你拍过什么风格的婚纱照、价格大概什么区间、怎么联系你。结果他把最有价值的婚纱作品集藏在了二级页面里，首页全是风景照。这就是没想清楚给谁看。后来我让他把首页改成三块内容：精选婚纱作品、服务套餐说明、预约联系方式，页面浏览量大概翻了一倍多，这个数据是他自己在后台看到的，具体数字我记得他说是涨了百分之一百二左右。

准备工作其实就三件小事，但一件都别省

第一件事，把你要展示的内容先准备好。文字、图片、联系方式、产品介绍，全部整理到一个文件夹里。别一边设计一边找素材，那种状态特别容易分心，我试过，效率低得离谱。第二件事，找三到五个你喜欢的网站截图存下来，作为参考。注意是参考布局和配色思路，不是让你照抄。第三件事，准备一个笔记本或者手机备忘录，把你在设计过程中冒出来的想法随手记下来。网页设计这个活，改着改着就忘了自己最初想做什么，这是常有的事。

提示：新手最容易忽略的是文字内容的准备。我见过太多人页面框架搭得挺漂亮，结果往里面填文字的时候发现字数对不上，排版全部重来。先把文字写好，哪怕写得粗糙，也比空着强。

分步骤来，先搭骨架再管好不好看

坦白讲，我到现在都改不掉一个毛病，就是喜欢先调颜色和字体。这其实是不对的。正确的顺序是先把页面的结构框架搭出来。什么叫结构框架？就是哪里放导航栏、哪里放主图、哪里放内容区、哪里放页脚。你可以拿张白纸手画几笔，比直接打开软件快得多。

骨架搭好之后，再往里填内容。内容填完了，才轮到颜色、字体、间距这些视觉层面的事。顺序反了会怎样？我上周就翻车了一次。帮朋友改一个活动页面，我先把配色调得特别满意，结果他临时说要在中间加一个报名表单，整个版面全乱了，之前调的配色方案有一半对不上。气得我当晚没睡好，但怪谁呢，怪我自己顺序没搞对。

还有一点，导航设计千万别搞太复杂。新手特别容易犯的错就是恨不得把所有页面都塞进导航栏。实际上，主导航超过七个选项，用户的选择困难就会明显上升。把不重要的页面放到页脚去，主导航只留最核心的几个板块就够了。

实战演练：给自己做一个简单但完整的页面

我的建议是第一个练习项目别做太复杂的。就做一个个人介绍页，包含四个部分：顶部放你的名字和一句话介绍、中间放三到四段关于你的经历、下面放联系方式、底部放版权信息。对，就这么简单。但你要把之前说的流程完整走一遍。

先想清楚看这个页面的人是谁，大概率是潜在雇主或者合作伙伴。然后准备好你的自我介绍文字和一张还算过得去的照片。接着在纸上画结构，哪里放什么。再打开软件按照画好的结构搭建。内容填完之后再调字体大小和行间距。最后一定要做的一件事：把浏览器窗口缩小到手机屏幕的宽度，看看排版有没有乱掉。这一步千万别跳过，现在超过六成的访问量来自手机端，这个比例每年还在涨。

做完之后别急着自我欣赏，找两三个朋友帮你看看，就问他们一个问题：这个页面是干什么的，你能在十秒内说出来吗？如果他们说不太确定，那你的网页设计还有优化的空间。这个方法我用了好几年了，比任何理论都好使。

好了，五个基础步骤差不多就是这些。说起来都不复杂，但每一条我都见过有人栽跟头，包括我自己。你也别指望看一遍就能全记住，先挑一个最简单的项目动手做起来，遇到问题再回头翻翻这些步骤，印象会深得多。至于我表弟那边，他最近又开始折腾新版本了，这次终于知道先把导航放出来了，不过配色嘛，我还没顾上看。