目录
前言
推广页和落地页、着陆页、详情页都非常相近，我自己的理解是：推广页侧重于营销；落地页即着陆页，两者是一个意思，他们更侧重于营造一种良好的客户体验，简单明确，以达到引导客户的效果；详情页则是类似于淘宝的商品相关介绍，大多以图片形式呈现，前面的三个则是一个代码呈现的网站。
第一次接触，开始的几天时间参阅的大量资料，也不知道从何下手，经过沟通后，便试着边做边找灵感，在设计于实现过程中也遇到许多问题，比如颜色搭配问题，整体效果不协调问题，上下标题栏不协调等等。整体出来的效果还有待提高，不过也能为下一次积累丰富的经验。
1. 前期准备工作
1.1 确定主题
首先是确定主题，知道大概的轮廓，清楚大致的设计方向，在一开始接触的时候难免会出现懵逼状态，不知道应该怎着手去做，这时候由于没有过多经验，那怎么办？那就必须要去查阅大量的资料，当然一百条里面或许只有几条是有价值的，这个过程和写一篇论文的过程一样的，参考了几百篇文献，也就那十来篇是有价值的。
图1.1-1 参考、收集必要的资料
1.2 画大纲，了解设计轮廓
在明确了主题，了解此类页面的设计方法之后，我们就可以知道，接下来需要往怎么样的方向去设计了，在此时需要把自己的一个整体思路大概的写出来，也就是我们常常说的写大纲，当然大纲还会有很多修改，并不单单是一个大纲就可以概况所有。如图1.2-1所示：
1.2-1 主题大纲
1.3 软件准备
软件方面，我个人使用的是Adobe XD、WebStorm、PS。XD是整个过程用得最多的，XD的用来做界面设计是非常好的，XD轻量级的交互界面设计软件，
结合了PS和AI的一些优点，XD的导出方便快速，非常适合边写代码，边在XD里面修改选定内容，如图1.3-1所示：
图1.3-1 XD的一个优势
2. 界面设计过程
界面设计的过程相对来说比较长，但是也是非常必要的，只有设计过关了，写代码只需要原封不动的“抄下来”，再加上一些动态效果，基本上一个星期内就可以完成代码的编写。设计的过程要注意几个问题，第一个是，标题栏的样式最好要统一，如图2.1所示：
图2.1样式要统一
图2.1-1统一样式
第二个问题是：不管之前的设计多么粗糙，多么丑陋也不要把文件删掉，每一次改版都要留着，以便今后自己的查看和参考，知道当初出错在哪里，知道自己当初所处的一个状态，也算是一种迭代过程，如图2.2所示：
图2.2设计稿的迭代过程
第三个问题是：不管在使用PS、AI又或者是写代码的时候，都应该养成一种良好的习惯——写注释，写好备注，就不会在你设计和写代码过程中出现找不到你想找的东西在哪里，也算提高可读性，提高效率的一种方法，以前我也是不在意这样的细节的，但是当代码量多时，图层多时，就特别难马上找到自己想找的那行代码或图层。
图2.3 注释的作用
3. 代码编写过程
本次的代码编写要考虑到的是手机端和PC端同步，要做好相关响应式问题，确保在PC端看到的同时，手机端也可以不出差错，要满足手机端的要求，在<head>标签中加入如图3.1所示的一行代码：
图3.1 为手机端实现添加代码
加入此段代码之后，就可以实现响应式。当然了，由于手机端相对PC端来说，字体的大小是有一定限制，电脑上一个div可以显示完的一段话在手机端就未必可以显示完，因此我们就有必要控制字体比例大小，用transform:scale(0.9)来控制显示的大小比例。如图3.2和3.3所示：
图3.2js控制字体比例
图3.3 css控制最小字体比例
同时，代码的编写也要注意的两个问题。第一，做好代码注释，不管项目大小，注释是一个良好的代码习惯，主要是为了避免自己写着写着，就不知道写到哪里，也是为了避免当别人接手项目的时候再花费过多时间去理解你的代码，写上注释就可以很方便别人看了，当然真正上线的时候代码注释要去掉，留档自己用的最好写上注释。如图3.4所示：
图3.4代码注释
第二个问题就是，JS放置的位置，一般JS标签放置body里面的最后，因为当运用到一些插件的时候，会因为各种原因，一定需要放置在body最后面，又或者为了方便查看JS代码，引用了JS之后，就接着写他的效果，就很好的关联了起来。当然，写在head头部标签里面也可以，不管写在哪个地方，个人经验是自己写的引用，必须写在引用别的JS插件之后，主要是为了避免出现引用的代码没有效果。如图3.5所示:
图3.5 JS代码放置的位置