网页设计新手入门先搞懂这5个基础概念和实操顺序

前几天有个做行政的姑娘给我发消息，说她被老板安排去做公司官网的改版对接工作，打开设计软件的那一刻整个人都蒙了。她问我：网页设计到底该从哪儿下手？说真的，这个问题我被人问过不下五十遍。每次我都想起自己刚入行那会儿，也是对着满屏的图层和代码发呆，感觉每个字都认识，凑在一起就成了天书。

所以今天咱们不聊那些虚头巴脑的审美理论，就把网页设计这件事拆开揉碎了讲。我按新手最容易理解的顺序，把五个基础概念和对应的实操动作排了个队，你照着来就行，至少能让你少走两三个月的弯路。

先明白这五个概念，比急着动手更重要

我把网页设计入门需要搞懂的东西按重要程度排了个序。这个排序不是拍脑袋来的，是我带了十几个新人之后总结出来的规律。下面一个个说。

第一个概念：信息层级。简单说就是让用户一眼看出来什么最重要。你打开一个网页，眼睛先看哪儿、再看哪儿，这个顺序就是信息层级决定的。很多新手做出来的页面看着挺花哨，但用户进去之后不知道点哪里，就是层级没做好。我之前帮一个做烘焙工作室的客户改版，他们原来的首页把优惠券、产品图、品牌故事、联系方式全部堆在一起，字号还差不多大，用户根本找不到下单入口。后来我把价格和购买按钮放大，其他信息缩小并分层排列，转化率大概涨了四成左右。这个数据是我自己记录的，不一定适用于所有行业，但方向肯定没错。

第二个概念：栅格系统。你可以把它想象成一本账本上的格子。网页上的所有内容都放在这些格子里，这样页面才不会乱。最常见的做法是把页面宽度分成十二列，然后内容按列来摆放。听起来有点抽象对吧？你就记住一点：对齐。所有元素左边对齐或者居中对齐，看起来就舒服。我刚开始学的时候特别迷恋那种不对称的酷炫布局，结果做出来的东西在别人电脑上全乱了，气得我当晚没睡好。后来老老实实用栅格，效率反而高了很多。

第三个概念：响应式设计。说白了就是你的网页在手机、平板、电脑上都得能正常看。现在超过六成的流量来自手机，你要是只按电脑屏幕做设计，手机上打开要么字小得看不清，要么按钮点不到，用户扭头就走。这个后面实操部分我会说具体怎么做。

第四个概念：留白。新手最容易犯的毛病就是把页面塞得满满当当，觉得空着就是浪费。其实留白是让页面呼吸的关键。你去看那些大牌的官网，周围全是空白，就中间一个产品图，反而显得高级。留白不只是空白，它是一种引导，告诉用户往哪儿看。

第五个概念：交互反馈。用户点了按钮之后得有反应，比如颜色变了、弹出来一个提示、或者加载动画转起来。没有反馈的网页用起来像在跟木头说话，心里没底。我见过一个电商页面，加入购物车之后没有任何提示，用户以为没加上，连点了五六次，最后购物车里同一件商品加了六件。这个体验就很糟糕。

新手实操的正确顺序，别搞反了

概念清楚了，接下来就是动手。很多人一上来就打开设计软件开始画，这是最大的坑。我当初就是这么干的，画了三天觉得不满意全删了重来，浪费的全是时间。

正确的第一步是画草图。拿张纸和笔，把页面大概的布局画出来。哪儿放标题、哪儿放图片、按钮在什么位置，用方框和线条表示就行。这一步花不了十分钟，但能帮你理清思路。我现在的习惯是至少画三个版本的草图，然后挑一个最顺眼的继续。

第二步是确定色调和字体。别小看这个，颜色和字体决定了整个页面的气质。一般来说，主色调不超过三种，字体不超过两种。如果你是给传统企业做官网，蓝色系配黑体字比较稳；如果是给母婴品牌做，暖色调配圆润一点的字体更合适。我自己翻过一次车，给一个做工业零件的客户用了很活泼的橙色，对方老板看了之后沉默了大概十秒钟，然后说“我们做的是机床配件，不是儿童玩具”。那次之后我每次定色调之前都会先问清楚品牌调性。

第三步是搭建框架。在你选好的设计工具里把页面的大结构搭出来，哪里是导航栏、哪里是内容区、哪里是页脚。这个阶段不用抠细节，先把骨架立起来。对了，这个骨架就得考虑响应式了，每调整一次布局都看看在手机尺寸下是什么效果。

第四步才是填充内容和细节。把图片、文字、按钮一个个放进去，调整间距和对齐。这里有一个小技巧：把所有元素先对齐，再微调间距。对齐是底线，间距是锦上添花。顺序反了的话，你会发现自己陷入无限微调的泥潭里出不来。

最后一步是测试。把做好的页面发给三五个朋友看看，问他们第一眼看到什么、能不能找到想要的信息、手机上打开有没有问题。这一步特别重要，因为你自己看自己的设计会自带滤镜，别人一眼就能看出问题。我上周就翻车了一次，自己觉得排版挺完美，结果朋友说在手机上价格显示不全，被按钮挡住了。当时确实有点尴尬，但总比上线之后被用户骂强。

说到底，网页设计这件事没有捷径，但顺序对了能省很多力气。先把五个基础概念吃透，再按画草图、定调性、搭框架、填内容、做测试这五步走，你至少能做出一个及格线以上的页面。剩下的就是多看、多做、多改。我现在回头看自己早期的作品也觉得惨不忍睹，但这不就是进步的过程嘛。