网页设计新手入门先搞懂这5个核心步骤

前言目标

前几天一个在老家开装修公司的朋友给我打电话，说他花了三千块找人做了个网站，上线两个月，一个咨询电话都没接着。我让他把网址发来看看，点开那瞬间我差点没把手机扔出去，首页一张大图占了满满一屏多，往下拉全是公司简介和老板照片，找了半天愣是没看见他家的电话号码在哪儿。这事说起来我也有责任，当初他问我要不要做网站，我随口说了句要做，但没细说怎么做。

所以今天咱们就聊聊网页设计这件事。特别是刚开始接触的朋友，别急着找外包，也别急着套模板，先把我下面要讲的这几个步骤弄明白，你至少能少花冤枉钱，也知道什么样的网页设计算是合格。目标很简单，就是你跟着看完，能清楚地知道一个网页从想法到上线到底要经过哪些环节，每个环节你该盯住什么。

准备工作：别急着打开软件

很多人一说到网页设计，第一反应就是找工具，听说这个软件好那个平台强，结果装了一堆，打开还是不知道从哪下手。我自己就干过这种蠢事，早些年听说某款设计工具火，连夜下载了三个，光安装就折腾一晚上，最后做出来的页面还不如人家用记事本敲的。

准备工作其实就三样东西，拿张纸拿支笔就能干。第一，想清楚你这个网页是给谁看的。是给二十出头的大学生还是给四五十岁的企业老板，这决定你后面所有设计的走向。第二，列一下你希望访客进来后做的三件事，记住就三件，超过三个等于没重点。第三，把你要放上去的文字内容先写出来，对，先写内容再做设计，顺序反了后面一定返工。说白了，网页设计不是先画个漂亮壳子再往里塞东西，而是先有内容骨架再考虑长相。

分步骤讲解：从骨架到皮肉

第一步是画结构草图。别被草图两个字吓着，就是拿笔在纸上画几个方框，标出哪块放导航哪块放主要内容哪块放联系方式。手机屏幕就巴掌大，你画的时候想象自己在手机上看这个页面，手指头能不能够着按钮，不用使劲滑就能看见关键信息不。这一步花不了二十分钟，但能省掉后面好几天的来回改。

第二步才是打开设计工具。这时候你脑子里已经有了清晰的地图，做网页设计的过程就是把纸上的方框变成屏幕上的模块。新手我建议先别碰代码，用所见即所得的工具练手，拖拖拽拽就能看到效果。重点盯三件事：字体别超过两种，颜色别超过三种，按钮要大到手指头能轻松点中。我见过太多新手页面，光字体就用了五六种，看着热闹，其实乱得没法看。

第三步做自适应检查。你做好的页面在电脑上看着挺美，换到手机上可能文字挤成一团。把浏览器窗口慢慢缩小，看看内容是怎么变的，该换行的换行，该隐藏的隐藏，别让用户为了看清你的内容把手机横过来。这一步是区分专业和业余的关键，很多新手直接跳过，结果上线后被手机用户骂得不行。

第四步是加载速度自查。你做的网页设计再好看，打开要等十秒钟，人早跑了。怎么查？打开页面的时候自己数数，超过三秒就得找原因。八成是图片太大了，把图片压一压，换成合适的格式，能省不少时间。我上个月帮一个开民宿的朋友看他的网页，一张首页大图原图直接传上去，十二兆，难怪没人愿意等。

第五步是走一遍用户流程。假装自己是第一次来的访客，从进来到找到你想要他看的信息，掐个表看用多久。如果需要点三次以上才能找到联系方式，那你的网页设计就有问题。这一步最好找个完全不懂你业务的朋友来试，他在哪儿卡住了，哪儿就是你要改的地方。

提示：新手最容易犯的错是把网页设计当成美术作业，拼命往上堆装饰。实际上用户来你网页是办事的，不是来看画的。信息清楚、操作顺畅，比什么特效都管用。

实战演练：拿个真实场景练手

咱们模拟一个场景。楼下王姐开了个烘焙工作室，想做个网页让周围小区的人能找到她、看到这周出什么新品、能直接打电话订蛋糕。按上面五步来。先画草图，手机屏幕上最上面放工作室名字和一句话介绍，紧接着放本周新品图片和价格，中间放地址和营业时间，底部固定一个打电话的按钮。内容先写出来，王姐口述我记，大概一百多字加上六张图。

然后动手做，选个顺手的工具，把内容往里放，字体用一种圆润的，颜色用暖色调，按钮做成明显的橙色。做完缩小窗口看手机效果，发现新品图片在手机上太小，改成两列变一列。再检查加载速度，把图片压到每张两百千字节以内。最后让王姐自己走一遍流程，她找了半天没看见打电话的按钮在哪儿，原来是我把按钮做成了跟背景差不多的颜色，改！整个网页设计过程花了一个下午，但王姐后来跟我说，那个月靠网页来的订单有十几单。

常见问题

说实话，我自己到现在也不敢说每次网页设计都做得完美，上周给一个客户做的页面导航就翻车了，他想要的下拉菜单在手机上根本点不开。所以你看，这事就是不断遇到问题不断改。你要是也遇到过类似的坑，或者你正打算做自己的第一个网页，遇到什么拿不准的，欢迎说给我听听。