网站首页设计怎么做？知名建设网站公司实用技巧

今儿个跟大伙唠唠折腾公司新网站首页那点事儿。接这活儿的时候头都大了，甲方爸爸张口就要“高端大气上档次”，闭口就要“一看就知道是大公司”，具体啥样？人家两手一摊：“你们专业的嘛看着弄！”行，反正咱也不是第一次接这种活儿了。

一、上来就犯愁，从哪下手？

我习惯先把自己当用户。打开浏览器，把同行里排得上号的公司官网、还有几个甲方点名要“对标”的对手网站首页，挨个点了看。一边看一边截图、存书签，手机上也翻一遍。这么一通看下来，发现几个明白事儿的地方：

• 第一印象贼重要。几乎所有的网站，最上头那部分（专业点叫首屏），都是大图或者动画配上句特显眼的话，告诉你是干嘛的。
• 导航要清楚得像自家客厅。去哪看产品？去哪联系？得一眼找到，绝对不能藏猫猫。
• 手机看不能瞎。现在谁还只盯着电脑看？手机上打开不能排版乱、字小得拿放大镜。

琢磨透了，心里大概有谱了：咱也得整这么几块。

二、纸上乱画到上电脑打草稿

没急着开电脑，先掏出一张A4打印纸，摸出根快没水的签字笔，就开画！圈圈框框代表图片，横线代表文字，画了个稀里哗。画了好几版，发现一个大问题：想放的东西太多了！产品、案例、公司实力、新闻动态、联系方式……恨不得全堆在首页上半截。

不行，太挤了！用户会晕。我硬着头皮删，把最重要的三个东西挑出来放最上面那块：一个吸引眼球的卖点大图，一句特直接的介绍语，再加个明显的按钮让用户点进去看详情。剩下那些，排队往下放！

草稿差不多了，才开始用那个做设计的软件画精细点的图。主要是把位置定死，比如导航条在顶头左边还是右边？搜索框放哪？大图片下面是接着放文字还是放几张小图标？这一步就反复调，像个摆地摊的，把东西挪来挪去，总算看着顺溜点了。

三、颜色字儿选差点逼疯我！

配色这事儿最玄乎！甲方公司有个蓝色Logo，那就蓝色做主色呗？试了五六个深浅不同的蓝，配上白色背景，感觉挺干净；又试着加一点点橙色跳色，放按钮上显眼。让同事帮忙瞅瞅，都说比纯蓝好看多了。

字也不能马虎。大标题得粗壮有力，我挑了款没脚的字（黑体类）；正文说明的字得舒坦好认，选了款有脚、字间距大的（衬线体类）。重点地方，比如优惠信息、下载按钮，字号敢放大，颜色用跳的橙色强调。

四、搞动效，差点砸键盘！

想着加点小动画，鼠标挪上去变个色、按钮按下去沉一下，或者页面滚动到哪儿文字图片才蹦出来。结果一做发现坑真多！电脑上看着顺滑的滚动效果，到自己手机上卡得像放PPT；好不容易调好了，老板又说太花哨了怕用户分心，得砍掉一半！妥协了，就留几个特别关键的：比如轮播大图切换要自然点，用户点导航能平滑地跳到地方。

五、真机挨个测，血压狂飙！

你以为做完了？早着！用办公室那台苹果电脑开浏览器看，美滋滋；换个老旧点的Windows台式机再看，哟吼，这位置咋跑偏了？赶紧打开笔记本、平板，还有自己的两部手机（一个新款一个旧款），挨个浏览器打开看。苹果的Safari、安卓的Chrome、系统自带浏览器…个个不省心。

手机端是大麻烦！导航菜单在小屏幕上缩成了“三根线”（汉堡菜单），点开要顺畅；小图片加载不能慢，不然用户早跑了；所有按钮大小得让手指头好点。看到那个“立即咨询”按钮在老年机上像粒小芝麻，赶紧回去调大一圈！

六、改！改！改！甲方永远是爸爸

拿着这稿给甲方看，人家摸着下巴：“嗯…整体还行，就是这里…不够大气…” 心里默念一百遍冷静，继续问具体点？结果人家指着“联系我们”说：“这电话放的位置不够显眼嘛要放最顶上右边！”行，改！又说案例图片太小，“气势不够”。接着调！反反复复搞了几轮，还好不算太离谱，总算签字收工。

整个做下来，最大的感受就是：好首页不是堆出来的，是狠狠砍出来的。 用户瞄一眼几秒钟就得抓住他。别整那么复杂，重点突出、手机看着像回事、能让人找到路，这几点能做到就已经打败很多同行了！各位想做网站的老板们，真别把你们仓库里所有的东西都塞首页上！累死设计不说，用户也晕！