网站开发方案和网页设计技巧

网站只是设计得漂亮或者使用华丽酷炫的技术是远远不够的，我们要知道建站的目的是为了给公司创造效益，如果吸引不到访客再漂亮的页面那似乎从公司角度出发也是失败的设计。好消息是，我们为你准备的5个小技巧，可以让你的网站吸引更多客户。

一、保持简约

你在首页上塞满了图形，内容以及你认为必要的东西，然后希望访客访问后能成为一个潜在客户？事实是，这会让访客反感并且想快速关掉你的网站。保持简洁和专注，强调访客想了解的重点信息。同样，表单也应该简短，没有人喜欢填写冗余的表单。

二、发布有价值的内容

你可能认为好产品自销售，也许这是真的。但如果没人知道你公司，也就没人会注意你卖的是什么。不掺水的内容，精准的产品描述，一切为你的目标客户量身定做，显然比你把产品属性堆满整个页面更有效果。发布有价值的内容嵌入你品牌中能有效吸引访客和回头客，提升你品牌的权威性，提高你的在线业务。发布更多有针对性的内容，亦能增强你客户的信任度和提升品牌知名度，从而获得更多转化。

三、增加迷人的元素

放一个巨大的香蕉上去不迷人，甚至碍眼。聚集你的品牌，增加简单、清晰的元素吸引你的受众。视频和图片也能体现你的水平。同样你也可以采用视差滚动之类的技术来提高用户体验。你受众喜欢你网站越多，你获得的客户也就越多。

四、千万别忽视了落地页

这似乎是显而易见的，但很多企业往往把行动按钮放在混乱、分散甚至是干扰性信息下面。网站的行动按钮应明显，突出显示和强调视觉线索。带领访客迅速清晰的采取行动，从而提升更多转化。

五、测试

不确定哪些东西在你网站上表现良好？测试它！A / B测试允许你测试你的网站方方面面，从颜色、图形到内容，以便你更好的了解访客行为和做出决策。

一个好看的网站是很重要的，但是转换成功才是关键。好消息是，结合这5个技巧，你将获得更多追随者，提升品牌知名度和转化更多客户。

六、重点网页设计相关

说完网站设计，再说说网页设计，大家都知道不少做平面的设计师想转行走网页设计这条路，做网页和做平面是完全不同的思维，加上还要熟悉或了解html和CSS代码，所以就很考验设计师的自学能力了。而且还有一点，我们在设计网页的过程中，并不是你想怎么设计都可以的，还要考虑编码实现和用户体验。那么今天我们就来和您聊聊，想转型成为网页设计师，需要必备的一些技能知识点：

1、基本中的基本，只要是任何单位是「PX」、给屏幕用的图稿我都建议用 Photoshop 制作，Illustrator 是印刷用软件，对 PX 支持度很差。关于最基础的抠图，有的童鞋懂的方法还不全面。现在新开发的网页通常会要求制作 Responsive ，为了要方便套用 Bootstrap 或 Susy ，Grid 就是一定要懂的观念。

2、切图，当你会写 Html、搞懂 Div、Css 后，你就知道怎么切图了（无误），不会写 Code 的视觉设计师切出来的图常常被退货也只是刚好…做个蛋糕需要糖和巧克力粉、材料供应却老给他盐和胡椒粉，是想逼写 Html 的人从种甘蔗和可可树开始吗？

3、Illustrator；既然都是平面设计师想转型，这套一定用的非常熟悉，可惜我对这套的定义就是「送印刷厂」用。在我的制图过程中，所有能用向量绘制的部份我都会用向量。PS 的向量工具不太好操作，遇到比较复杂的图型我会在 AI 里画好、贴进 PS 为形状图层，再来调整图层样式。所以 AI 只会用到画向量的功能，其他全进 PS 处理。

不会切图、不会手写 Code 的不要说自己是网页设计师，做网页只靠 Dreamweaver？和蒸饭箱蒸出来的便当感觉差不多，勉强能入口但很难吃。有的 RD 会接受用 Dreamweaver 之类可视化软件产生的 Code，这要看和设计师配合的 RD 接受度到哪里。通常平面想转网页设计很大部份是薪水可以喊比较高，如果想拿更高的薪水就不要依赖 DW ，老老实实的练英打吧。（推荐：死亡打字员）—— YouTube视频，自备梯子。想当个网页设计师， W3C 是一定要懂的。当然非常多的元素不会每个都记得，把这个网址当目录用吧，不懂或忘记就跑来查一下。All Standards and Drafts – W3C

margin、padding 是初学者最容易搞混的两个值；Float 很常用但不小心就破版；熟悉 Background 可以玩出很多花样…等等。在 CSS 细节部份就可以偷懒一点用现成的了，虽然产出的 Code 比较丑不优雅，但 RD 比较少去动到这一块，所以还可以接受。我自己常用的偷懒工具如下：

圆角框：CSS Border Radius Generator

阴影：Box Shadow CSS Generator

按钮：Buttons – A button library built with Sass and Compass

可以看 browser 对 html、css 等等的支持度：Can I use… Support tables for HTML5, CSS3, etc

当然很有很多其他在线生成或是外挂包，欢迎大家补充，好让我能更偷懒一点…

七、新手入行必备：网页设计师基本功

1、Responsive：先把 Html 和 Css 练熟了再来看 Responsive 这个大难题。要做好一个 RWD 从 Wireframe 就要规划好。在 Wireframe 阶段我习惯先设计 Desktop 版本，功能最多最完善。但在写 Code 的时候会是反过来、先从 Mobile 的尺寸开始刻。刚接触 RWD 的先套 Bootstrap 增加成就感和手感，等熟悉了觉得不够用绑手绑脚的时候，差不多该踏进 Sass、Compass、Susy 的领域。

2、别用现成的软件做 Responsive，除非是纯静态网页不需要和 RD 合作，原始码脏就脏没关系反正不会有人看了。目前我看到「排排版就好」的软件产出的 Code 没有干净的，只要是之后有人还要接手的产出、拜托维持它的干净整齐。有没有打开厕所门看到一团乱产生晕眩感脸色发青的经验？看到恶心的 Code 就是这种感觉。

结  论

以上写的非常粗浅，只能算是给个方向让初学者知道要怎么学习。最好还是去找个 F2E 拜师学艺一下，靠自己自学写出来的东西一定会被正规 RD 嫌弃，我就被老公骂过，边哭边学被他嫌弃了一整年才得到勉强及格的评语。如果能把上述几项都练起来，就能自己接案赚外快了。只要和程序无关的静态网页都难不倒你。网络上有些套装的特效包可以拿来改一改套用，看起来也很炫。网页设计和 F2E 职务范围部份重迭，都要写 Html、Css，注重使用者体验等等。最大的差别在于网页设计师要画 Flow、Wireframe、Mockup、切图，会写 JS 特效最好，不会写也没关系。但 F2E 就要对 JS 很熟悉了。网页设计师算是一脚踩在 UI/UX 圈、另一只脚踩在 F2E 边在线的角色。千万小心在 Code 上不要和 F2E 起争执，请谦虚求教，没事拿自己的弱项去撞别人的强项做什么？RD 写 Code 输给设计师是哪门子笑话？设计师强的当然是视觉啊！